From 4292dc45ea3c180dc11e4a345b3efaae4891f3ad Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 16 Nov 2024 15:42:31 +0530 Subject: [PATCH 01/10] feat: Bump application version to 1.3.5 Updates the application version in the wxt.config.ts file from 1.3.4 to 1.3.5. --- wxt.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wxt.config.ts b/wxt.config.ts index 288a555..18b2a44 100644 --- a/wxt.config.ts +++ b/wxt.config.ts @@ -50,7 +50,7 @@ export default defineConfig({ outDir: "build", manifest: { - version: "1.3.4", + version: "1.3.5", name: process.env.TARGET === "firefox" ? "Page Assist - A Web UI for Local AI Models" From c4d9e3aeed5b39a07e555c415ca22addc52cffd4 Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 16 Nov 2024 15:50:11 +0530 Subject: [PATCH 02/10] feat: Add page assist select component to header This commit introduces a new `PageAssistSelect` component to the header, which replaces the previous `Select` component for selecting the active chat model. The new component provides improved functionality, including: - Ability to display provider icons alongside the model name - Truncation of long model names to ensure they fit within the available space - Improved loading state handling - Ability to refresh the model list on demand These changes enhance the user experience and make it easier for users to quickly select the desired chat model. --- src/components/Layouts/Header.tsx | 45 ++- src/components/Select/LoadingIndicator.tsx | 27 ++ src/components/Select/index.tsx | 303 +++++++++++++++++++++ 3 files changed, 350 insertions(+), 25 deletions(-) create mode 100644 src/components/Select/LoadingIndicator.tsx create mode 100644 src/components/Select/index.tsx diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx index 7f3e153..3e4a1f6 100644 --- a/src/components/Layouts/Header.tsx +++ b/src/components/Layouts/Header.tsx @@ -22,6 +22,7 @@ import { getAllPrompts } from "@/db" import { ShareBtn } from "~/components/Common/ShareBtn" import { ProviderIcons } from "../Common/ProviderIcon" import { NewChat } from "./NewChat" +import { PageAssistSelect } from "../Select" type Props = { setSidebarOpen: (open: boolean) => void setOpenModelSettings: (open: boolean) => void @@ -49,14 +50,10 @@ export const Header: React.FC = ({ historyId, temporaryChat } = useMessageOption() - const { - data: models, - isLoading: isModelsLoading, - } = useQuery({ + const { data: models, isLoading: isModelsLoading, refetch } = useQuery({ queryKey: ["fetchModel"], queryFn: () => fetchChatModels({ returnEmpty: true }), - refetchInterval: 15_000, - refetchIntervalInBackground: true, + refetchIntervalInBackground: false, placeholderData: (prev) => prev }) @@ -87,9 +84,10 @@ export const Header: React.FC = ({ } return ( -
+
{pathname !== "/" && (
@@ -107,41 +105,38 @@ export const Header: React.FC = ({
- + {"/"}
- setSearchTerm(e.target.value)} + placeholder="Search..." + className={`${defaultSearchClass} ${searchClassName}`} + disabled={isLoading} + aria-label="Search options" + /> +
+
+ +
+ {isLoading ? ( +
+ + {loadingText} +
+ ) : filteredOptions.length === 0 ? ( +
+ +
+ ) : ( + filteredOptions.map((option, index) => ( +
{ + onChange(option) + setIsOpen(false) + setSearchTerm("") + }} + className={` + ${defaultOptionClass} + ${value === option.value ? "bg-blue-50 dark:bg-[#262627]" : "hover:bg-gray-100 dark:hover:bg-[#272728]"} + ${activeIndex === index ? "bg-gray-100 dark:bg-[#272728]" : ""} + ${optionClassName}`}> + {option.label} +
+ )) + )} +
+
+ )} +
+ ) +} \ No newline at end of file From 726d3e34274834126c3983f5aec1b389e323c823 Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 16 Nov 2024 19:33:04 +0530 Subject: [PATCH 03/10] feat: Improve PageAssistSelect component This commit enhances the `PageAssistSelect` component with the following improvements: - Adds a `ref` to the options container to automatically scroll to the selected option when the dropdown is opened. - Fixes an issue where the `selectedOption` was not being correctly determined when the `options` array was updated. - Improves the rendering of the selected option, ensuring that the loading state, placeholder, and selected option are displayed correctly. - Adds a `data-value` attribute to the option elements to facilitate scrolling to the selected option. These changes improve the overall user experience and functionality of the `PageAssistSelect` component. --- src/components/Select/index.tsx | 40 ++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx index 6ccfeda..e3da503 100644 --- a/src/components/Select/index.tsx +++ b/src/components/Select/index.tsx @@ -43,6 +43,7 @@ export const PageAssistSelect: React.FC = ({ const [searchTerm, setSearchTerm] = useState("") const [filteredOptions, setFilteredOptions] = useState([]) const containerRef = useRef(null) + const optionsContainerRef = useRef(null) const [activeIndex, setActiveIndex] = useState(-1) useEffect(() => { @@ -59,6 +60,21 @@ export const PageAssistSelect: React.FC = ({ return () => document.removeEventListener("mousedown", handleClickOutside) }, []) + useEffect(() => { + try { + if (isOpen && optionsContainerRef.current && value) { + const selectedOptionElement = optionsContainerRef.current.querySelector( + `[data-value="${value}"]` + ) + if (selectedOptionElement) { + selectedOptionElement.scrollIntoView({ block: "nearest" }) + } + } + } catch (error) { + console.error("Error scrolling to selected option:", error) + } + }, [isOpen, value]) + useEffect(() => { if (!options) return @@ -193,7 +209,7 @@ export const PageAssistSelect: React.FC = ({ const selectedOption = useMemo(() => { if (!value || !options) return null - return options?.find(opt => opt.value === value) + return options?.find((opt) => opt.value === value) }, [value, options]) if (!options) { @@ -221,7 +237,13 @@ export const PageAssistSelect: React.FC = ({ className={`${defaultSelectClass} ${className}`}> {isLoading && } - {isLoading ? loadingText : selectedOption ? selectedOption.label : {placeholder}} + {isLoading ? ( + loadingText + ) : selectedOption ? ( + selectedOption.label + ) : ( + {placeholder} + )}