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

@@ -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<Props> = ({
     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<Props> = ({
   }
 
   return (
-    <div className={`sticky top-0 z-[999] flex h-16 p-3  bg-gray-50 border-b  dark:bg-[#171717] dark:border-gray-600 ${
-      temporaryChat && "!bg-gray-200 dark:!bg-black"
-    }`}>
+    <div
+      className={`sticky top-0 z-[999] flex h-16 p-3  bg-gray-50 border-b  dark:bg-[#171717] dark:border-gray-600 ${
+        temporaryChat && "!bg-gray-200 dark:!bg-black"
+      }`}>
       <div className="flex gap-2 items-center">
         {pathname !== "/" && (
           <div>
@@ -107,41 +105,38 @@ export const Header: React.FC<Props> = ({
             <PanelLeftIcon className="w-6 h-6" />
           </button>
         </div>
-        <NewChat 
-          clearChat={clearChat}
-        />
+        <NewChat clearChat={clearChat} />
         <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
           {"/"}
         </span>
         <div className="hidden lg:block">
-          <Select
+          <PageAssistSelect
+            className="w-80"
+            placeholder={t("common:selectAModel")}
             value={selectedModel}
             onChange={(e) => {
-              setSelectedModel(e)
-              localStorage.setItem("selectedModel", e)
+              setSelectedModel(e.value)
+              localStorage.setItem("selectedModel", e.value)
             }}
-            size="large"
-            loading={isModelsLoading}
-            filterOption={(input, option) =>
-              option.label.key.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-            showSearch
-            placeholder={t("common:selectAModel")}
-            className="w-72"
+            isLoading={isModelsLoading}
             options={models?.map((model) => ({
               label: (
                 <span
                   key={model.model}
-                  className="flex flex-row gap-3 items-center truncate">
+                  className="flex flex-row gap-3 items-center ">
                   <ProviderIcons
                     provider={model?.provider}
                     className="w-5 h-5"
                   />
-                  <span className="truncate">{model.name}</span>
+                  <span className="line-clamp-2">{model.name}</span>
                 </span>
               ),
               value: model.model
             }))}
+
+            onRefresh={() => {
+              refetch()
+            }}
           />
         </div>
         <div className="lg:hidden">