From c4d9e3aeed5b39a07e555c415ca22addc52cffd4 Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 16 Nov 2024 15:50:11 +0530
Subject: [PATCH] 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<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">
diff --git a/src/components/Select/LoadingIndicator.tsx b/src/components/Select/LoadingIndicator.tsx
new file mode 100644
index 0000000..dc06722
--- /dev/null
+++ b/src/components/Select/LoadingIndicator.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+
+export const LoadingIndicator: React.FC<{ className?: string }> = ({
+  className = ""
+}) => (
+  <div className={`animate-spin ${className}`}>
+    <svg
+      className="w-4 h-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  </div>
+)
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
new file mode 100644
index 0000000..6ccfeda
--- /dev/null
+++ b/src/components/Select/index.tsx
@@ -0,0 +1,303 @@
+import React, { useState, useRef, useEffect, useMemo } from "react"
+import { Search, RotateCw, ChevronDown } from "lucide-react"
+import { LoadingIndicator } from "./LoadingIndicator"
+import { Empty } from "antd"
+
+export interface SelectOption {
+  label: string | JSX.Element
+  value: string
+}
+
+interface SelectProps {
+  options: SelectOption[]
+  value?: string
+  onChange: (option: SelectOption) => void
+  placeholder?: string
+  onRefresh?: () => void
+  className?: string
+  dropdownClassName?: string
+  optionClassName?: string
+  searchClassName?: string
+  disabled?: boolean
+  isLoading?: boolean
+  loadingText?: string
+  filterOption?: (input: string, option: SelectOption) => boolean
+}
+
+export const PageAssistSelect: React.FC<SelectProps> = ({
+  options = [],
+  value,
+  onChange,
+  placeholder = "Select an option",
+  onRefresh,
+  className = "",
+  dropdownClassName = "",
+  optionClassName = "",
+  searchClassName = "",
+  disabled = false,
+  isLoading = false,
+  loadingText = "Loading...",
+  filterOption
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>([])
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [activeIndex, setActiveIndex] = useState(-1)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [])
+
+  useEffect(() => {
+    if (!options) return
+
+    const filtered = options.filter((option) => {
+      if (!searchTerm) return true
+
+      if (filterOption) {
+        return filterOption(searchTerm, option)
+      }
+
+      if (typeof option.label === "string") {
+        return option.label.toLowerCase().includes(searchTerm.toLowerCase())
+      }
+
+      if (React.isValidElement(option.label)) {
+        const textContent = extractTextFromJSX(option.label)
+        return textContent.toLowerCase().includes(searchTerm.toLowerCase())
+      }
+
+      return false
+    })
+    setFilteredOptions(filtered)
+    setActiveIndex(-1)
+  }, [searchTerm, options, filterOption])
+
+  const extractTextFromJSX = (element: React.ReactElement): string => {
+    if (typeof element.props.children === "string") {
+      return element.props.children
+    }
+
+    if (Array.isArray(element.props.children)) {
+      return element.props.children
+        .map((child) => {
+          if (typeof child === "string") return child
+          if (React.isValidElement(child)) return extractTextFromJSX(child)
+          return ""
+        })
+        .join(" ")
+    }
+
+    if (React.isValidElement(element.props.children)) {
+      return extractTextFromJSX(element.props.children)
+    }
+
+    return ""
+  }
+
+  const handleRefresh = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onRefresh?.()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled || isLoading) return
+
+    switch (e.key) {
+      case "Enter":
+        if (isOpen && activeIndex >= 0) {
+          e.preventDefault()
+          const selectedOption = filteredOptions[activeIndex]
+          if (selectedOption) {
+            onChange(selectedOption)
+            setIsOpen(false)
+            setSearchTerm("")
+          }
+        } else {
+          setIsOpen(!isOpen)
+        }
+        break
+      case " ":
+        if (!isOpen) {
+          e.preventDefault()
+          setIsOpen(true)
+        }
+        break
+      case "Escape":
+        setIsOpen(false)
+        break
+      case "ArrowDown":
+        e.preventDefault()
+        if (!isOpen) {
+          setIsOpen(true)
+        } else {
+          setActiveIndex((prev) =>
+            prev < filteredOptions.length - 1 ? prev + 1 : prev
+          )
+        }
+        break
+      case "ArrowUp":
+        e.preventDefault()
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev))
+        break
+    }
+  }
+
+  const defaultSelectClass = `
+    flex items-center justify-between p-2.5 rounded-lg border
+    ${disabled || isLoading ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+    ${isOpen ? "ring-2 ring-blue-500" : ""}
+    bg-transparent border-gray-200 text-gray-900
+    transition-all duration-200
+    dark:text-white
+    dark:border-[#353534]
+  `
+
+  const defaultDropdownClass = `
+    absolute z-50 w-full mt-1 bg-white dark:bg-[#1e1e1f] dark:text-white rounded-lg shadow-lg 
+    border border-gray-200 dark:border-[#353534]
+  `
+
+  const defaultSearchClass = `
+    w-full pl-8 pr-8 py-1.5 rounded-md
+    bg-gray-50 border border-gray-200
+    focus:outline-none focus:ring-2 focus:ring-gray-100
+    text-gray-900
+    dark:bg-[#1e1e1f] dark:text-white
+    dark:border-[#353534]
+    dark:focus:ring-gray-700
+    dark:focus:border-gray-700
+    dark:placeholder-gray-400
+    dark:bg-opacity-90
+    dark:hover:bg-opacity-100
+    dark:focus:bg-opacity-100
+    dark:hover:border-gray-700
+    dark:hover:bg-[#2a2a2b]
+    dark:focus:bg-[#2a2a2b]
+  `
+
+  const defaultOptionClass = `
+    p-2 cursor-pointer transition-colors duration-150
+  `
+
+  const selectedOption = useMemo(() => {
+    if (!value || !options) return null
+    return options?.find(opt => opt.value === value)
+  }, [value, options])
+
+  if (!options) {
+    return (
+      <div className={`relative w-full ${className}`}>
+        <div className={`${defaultSelectClass} ${className}`}>
+          <LoadingIndicator />
+          <span>{loadingText}</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className={`relative w-full ${className}`}>
+      <div
+        role="combobox"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-controls="select-dropdown"
+        aria-label={placeholder}
+        tabIndex={disabled ? -1 : 0}
+        onClick={() => !disabled && !isLoading && setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        className={`${defaultSelectClass} ${className}`}>
+        <span className="!truncate flex items-center gap-2 ">
+          {isLoading && <LoadingIndicator />}
+          {isLoading ? loadingText : selectedOption ? selectedOption.label : <span className="dark:text-gray-400 text-sm">{placeholder}</span>}
+        </span>
+        <ChevronDown
+          aria-hidden="true"
+          className={`w-4 h-4 transition-transform duration-200 ${
+            isOpen ? "transform rotate-180" : ""
+          }`}
+        />
+      </div>
+
+      {isOpen && (
+        <div 
+          id="select-dropdown"
+          role="listbox"
+          className={`${defaultDropdownClass} ${dropdownClassName}`}>
+          <div className="p-2 border-b border-gray-200 dark:border-[#353534]">
+            <div className="relative">
+              <input
+                type="text"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder="Search..."
+                className={`${defaultSearchClass} ${searchClassName}`}
+                disabled={isLoading}
+                aria-label="Search options"
+              />
+              <Search aria-hidden="true" className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+              {onRefresh && (
+                <button
+                  onClick={handleRefresh}
+                  disabled={isLoading}
+                  aria-label="Refresh options"
+                  className={`absolute right-2 top-1/2 transform -translate-y-1/2
+                    hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200
+                    ${isLoading ? "cursor-not-allowed opacity-50" : ""}`}>
+                  <RotateCw
+                    aria-hidden="true"
+                    className={`w-4 h-4 dark:text-gray-400 ${isLoading ? "animate-spin" : ""}`}
+                  />
+                </button>
+              )}{" "}
+            </div>
+          </div>
+
+          <div className="max-h-60 overflow-y-auto custom-scrollbar">
+            {isLoading ? (
+              <div className="p-4 text-center text-gray-500 flex items-center justify-center gap-2">
+                <LoadingIndicator />
+                <span>{loadingText}</span>
+              </div>
+            ) : filteredOptions.length === 0 ? (
+              <div className="p-6">
+                <Empty />
+              </div>
+            ) : (
+              filteredOptions.map((option, index) => (
+                <div
+                  key={option.value}
+                  role="option"
+                  aria-selected={value === option.value}
+                  onClick={() => {
+                    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}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file