fix: download management ui and double refresh model

web-app/src/containers/DownloadManegement.tsx

@@ -400,7 +400,10 @@ export function DownloadManagement() {
                           className="text-main-view-fg/70 cursor-pointer"
                           title="Cancel download"
                           onClick={() => {
-                            serviceHub.models().abortDownload(download.name).then(() => {
+                            serviceHub
+                              .models()
+                              .abortDownload(download.name)
+                              .then(() => {
                                 toast.info(
                                   t('common:toast.downloadCancelled.title'),
                                   {

web-app/src/containers/LeftPanel.tsx

@@ -35,7 +35,7 @@ import { toast } from 'sonner'
 import { DownloadManagement } from '@/containers/DownloadManegement'
 import { useSmallScreen } from '@/hooks/useMediaQuery'
 import { useClickOutside } from '@/hooks/useClickOutside'
-import { useDownloadStore } from '@/hooks/useDownloadStore'
+
 import { DeleteAllThreadsDialog } from '@/containers/dialogs'
 
 const mainMenus = [
@@ -122,7 +122,7 @@ const LeftPanel = () => {
       ) {
         if (currentIsSmallScreen && open) {
           setLeftPanel(false)
-        } else if(!open) {
+        } else if (!open) {
           setLeftPanel(true)
         }
         prevScreenSizeRef.current = currentIsSmallScreen
@@ -179,8 +179,6 @@ const LeftPanel = () => {
     }
   }, [isSmallScreen, open])
 
-  const { downloads, localDownloadingModels } = useDownloadStore()
-
   return (
     <>
       {/* Backdrop overlay for small screens */}
@@ -262,15 +260,8 @@ const LeftPanel = () => {
           )}
         </div>
 
-        <div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)]">
+        <div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)] ">
-          <div
+          <div className={cn('flex flex-col !h-[calc(100%-200px)]')}>
-            className={cn(
-              'flex flex-col',
-              Object.keys(downloads).length > 0 || localDownloadingModels.size > 0
-                ? 'h-[calc(100%-200px)]'
-                : 'h-[calc(100%-140px)]'
-            )}
-          >
             {IS_MACOS && (
               <div
                 ref={searchContainerMacRef}
@@ -379,7 +370,9 @@ const LeftPanel = () => {
                           </button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent side="bottom" align="end">
-                          <DeleteAllThreadsDialog onDeleteAll={deleteAllThreads} />
+                          <DeleteAllThreadsDialog
+                            onDeleteAll={deleteAllThreads}
+                          />
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </div>
@@ -468,8 +461,9 @@ const LeftPanel = () => {
                 </Link>
               )
             })}
-            <DownloadManagement />
           </div>
+
+          <DownloadManagement />
         </div>
       </aside>
     </>

web-app/src/containers/ModelCombobox.tsx

@@ -7,8 +7,15 @@ import { cn } from '@/lib/utils'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 
 // Hook for the dropdown position
-function useDropdownPosition(open: boolean, containerRef: React.RefObject<HTMLDivElement | null>) {
+function useDropdownPosition(
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })
+  open: boolean,
+  containerRef: React.RefObject<HTMLDivElement | null>
+) {
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  })
 
   const updateDropdownPosition = useCallback(() => {
     if (containerRef.current) {
@@ -51,10 +58,18 @@ function useDropdownPosition(open: boolean, containerRef: React.RefObject<HTMLDi
 }
 
 // Components for the different sections of the dropdown
-const ErrorSection = ({ error, t }: { error: string; t: (key: string) => string }) => (
+const ErrorSection = ({
+  error,
+  t,
+}: {
+  error: string
+  t: (key: string) => string
+}) => (
   <div className="px-3 py-2 text-sm text-destructive">
     <div className="flex items-center justify-between">
-      <span className="text-destructive font-medium">{t('common:failedToLoadModels')}</span>
+      <span className="text-destructive font-medium">
+        {t('common:failedToLoadModels')}
+      </span>
     </div>
     <div className="text-xs text-main-view-fg/50 mt-0">{error}</div>
   </div>
@@ -67,12 +82,20 @@ const LoadingSection = ({ t }: { t: (key: string) => string }) => (
   </div>
 )
 
-const EmptySection = ({ inputValue, t }: { inputValue: string; t: (key: string, options?: Record<string, string>) => string }) => (
+const EmptySection = ({
+  inputValue,
+  t,
+}: {
+  inputValue: string
+  t: (key: string, options?: Record<string, string>) => string
+}) => (
   <div className="px-3 py-3 text-sm text-main-view-fg/50 text-center">
     <div className="flex items-center justify-between">
       <div className="flex-1">
         {inputValue.trim() ? (
-          <span className="text-main-view-fg/50">{t('common:noModelsFoundFor', { searchValue: inputValue })}</span>
+          <span className="text-main-view-fg/50">
+            {t('common:noModelsFoundFor', { searchValue: inputValue })}
+          </span>
         ) : (
           <span className="text-main-view-fg/50">{t('common:noModels')}</span>
         )}
@@ -86,7 +109,7 @@ const ModelsList = ({
   value,
   highlightedIndex,
   onModelSelect,
-  onHighlight
+  onHighlight,
 }: {
   filteredModels: string[]
   value: string
@@ -127,24 +150,27 @@ function useKeyboardNavigation(
   onModelSelect: (model: string) => void,
   dropdownRef: React.RefObject<HTMLDivElement | null>
 ) {
-
   // Scroll to the highlighted element
   useEffect(() => {
     if (highlightedIndex >= 0 && dropdownRef.current) {
       requestAnimationFrame(() => {
-        const modelElements = dropdownRef.current?.querySelectorAll('[data-model]')
+        const modelElements =
-        const highlightedElement = modelElements?.[highlightedIndex] as HTMLElement
+          dropdownRef.current?.querySelectorAll('[data-model]')
+        const highlightedElement = modelElements?.[
+          highlightedIndex
+        ] as HTMLElement
         if (highlightedElement) {
           highlightedElement.scrollIntoView({
             block: 'nearest',
-            behavior: 'auto'
+            behavior: 'auto',
           })
         }
       })
     }
   }, [highlightedIndex, dropdownRef])
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
       // Open the dropdown with the arrows if closed
       if (!open && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
         if (models.length > 0) {
@@ -160,15 +186,30 @@ function useKeyboardNavigation(
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault()
-        setHighlightedIndex((prev: number) => filteredModels.length === 0 ? 0 : (prev < filteredModels.length - 1 ? prev + 1 : 0))
+          setHighlightedIndex((prev: number) =>
+            filteredModels.length === 0
+              ? 0
+              : prev < filteredModels.length - 1
+                ? prev + 1
+                : 0
+          )
           break
         case 'ArrowUp':
           e.preventDefault()
-        setHighlightedIndex((prev: number) => filteredModels.length === 0 ? 0 : (prev > 0 ? prev - 1 : filteredModels.length - 1))
+          setHighlightedIndex((prev: number) =>
+            filteredModels.length === 0
+              ? 0
+              : prev > 0
+                ? prev - 1
+                : filteredModels.length - 1
+          )
           break
         case 'Enter':
           e.preventDefault()
-        if (highlightedIndex >= 0 && highlightedIndex < filteredModels.length) {
+          if (
+            highlightedIndex >= 0 &&
+            highlightedIndex < filteredModels.length
+          ) {
             onModelSelect(filteredModels[highlightedIndex])
           }
           break
@@ -187,7 +228,17 @@ function useKeyboardNavigation(
           setHighlightedIndex(filteredModels.length - 1)
           break
       }
-  }, [open, setOpen, models.length, filteredModels, highlightedIndex, setHighlightedIndex, onModelSelect])
+    },
+    [
+      open,
+      setOpen,
+      models.length,
+      filteredModels,
+      highlightedIndex,
+      setHighlightedIndex,
+      onModelSelect,
+    ]
+  )
 
   return { handleKeyDown }
 }
@@ -266,13 +317,18 @@ export function ModelCombobox({
     }
 
     const events = ['mousedown', 'touchstart']
-    events.forEach(eventType => {
+    events.forEach((eventType) => {
-      document.addEventListener(eventType, handleClickOutside, { capture: true, passive: true })
+      document.addEventListener(eventType, handleClickOutside, {
+        capture: true,
+        passive: true,
+      })
     })
 
     return () => {
-      events.forEach(eventType => {
+      events.forEach((eventType) => {
-        document.removeEventListener(eventType, handleClickOutside, { capture: true })
+        document.removeEventListener(eventType, handleClickOutside, {
+          capture: true,
+        })
       })
     }
   }, [open])
@@ -286,7 +342,8 @@ export function ModelCombobox({
   }, [])
 
   // Handler for the input change
-  const handleInputChange = useCallback((newValue: string) => {
+  const handleInputChange = useCallback(
+    (newValue: string) => {
       setInputValue(newValue)
       onChange(newValue)
 
@@ -296,16 +353,21 @@ export function ModelCombobox({
       } else {
         setOpen(false)
       }
-  }, [onChange, models.length])
+    },
+    [onChange, models.length]
+  )
 
   // Handler for the model selection
-  const handleModelSelect = useCallback((model: string) => {
+  const handleModelSelect = useCallback(
+    (model: string) => {
       setInputValue(model)
       onChange(model)
       setOpen(false)
       setHighlightedIndex(-1)
       inputRef.current?.focus()
-  }, [onChange])
+    },
+    [onChange]
+  )
 
   // Hook for the keyboard navigation
   const { handleKeyDown } = useKeyboardNavigation(
@@ -376,16 +438,14 @@ export function ModelCombobox({
             onClick={handleDropdownToggle}
             className="h-6 w-6 p-0 no-underline hover:bg-main-view-fg/10"
           >
-            {loading ? (
-              <IconLoader2 className="h-3 w-3 animate-spin" />
-            ) : (
             <IconChevronDown className="h-3 w-3 opacity-50" />
-            )}
           </Button>
         </div>
 
         {/* Custom dropdown rendered as portal */}
-        {open && dropdownPosition.width > 0 && createPortal(
+        {open &&
+          dropdownPosition.width > 0 &&
+          createPortal(
             <div
               ref={dropdownRef}
               className="fixed z-[9999] bg-main-view border border-main-view-fg/10 rounded-md shadow-lg max-h-[300px] overflow-y-auto text-main-view-fg animate-in fade-in-0 zoom-in-95 duration-200"
@@ -408,8 +468,9 @@ export function ModelCombobox({
               {loading && <LoadingSection t={t} />}
 
               {/* Models list */}
-            {!loading && !error && (
+              {!loading &&
-              filteredModels.length === 0 ? (
+                !error &&
+                (filteredModels.length === 0 ? (
                   <EmptySection inputValue={inputValue} t={t} />
                 ) : (
                   <ModelsList
@@ -419,8 +480,7 @@ export function ModelCombobox({
                     onModelSelect={handleModelSelect}
                     onHighlight={setHighlightedIndex}
                   />
-              )
+                ))}
-            )}
             </div>,
             document.body
           )}