fix: download management ui and double refresh model

2025-09-23 20:17:51 +07:00 · 2025-09-23 20:17:51 +07:00 · d3fff154d4
commit d3fff154d4
parent 3f51c35229
3 changed files with 202 additions and 145 deletions
--- a/web-app/src/containers/DownloadManegement.tsx
+++ b/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'),
                                  {
--- a/web-app/src/containers/LeftPanel.tsx
+++ b/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 = [
@ -179,8 +179,6 @@ const LeftPanel = () => {
    }
  }, [isSmallScreen, open])

-  const { downloads, localDownloadingModels } = useDownloadStore()
-
  return (
    <>
      {/* Backdrop overlay for small screens */}
@ -263,14 +261,7 @@ const LeftPanel = () => {
        </div>

        <div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)] ">
-          <div
-            className={cn(
-              'flex flex-col',
-              Object.keys(downloads).length > 0 || localDownloadingModels.size > 0
-                ? 'h-[calc(100%-200px)]'
-                : 'h-[calc(100%-140px)]'
-            )}
-          >
+          <div className={cn('flex flex-col !h-[calc(100%-200px)]')}>
            {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>
    </>
--- a/web-app/src/containers/ModelCombobox.tsx
+++ b/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>) {
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })
+function useDropdownPosition(
+  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 highlightedElement = modelElements?.[highlightedIndex] as HTMLElement
+        const modelElements =
+          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 => {
-      document.addEventListener(eventType, handleClickOutside, { capture: true, passive: true })
+    events.forEach((eventType) => {
+      document.addEventListener(eventType, handleClickOutside, {
+        capture: true,
+        passive: true,
+      })
    })

    return () => {
-      events.forEach(eventType => {
-        document.removeEventListener(eventType, handleClickOutside, { capture: true })
+      events.forEach((eventType) => {
+        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 && (
-              filteredModels.length === 0 ? (
+              {!loading &&
+                !error &&
+                (filteredModels.length === 0 ? (
                  <EmptySection inputValue={inputValue} t={t} />
                ) : (
                  <ModelsList
@ -419,8 +480,7 @@ export function ModelCombobox({
                    onModelSelect={handleModelSelect}
                    onHighlight={setHighlightedIndex}
                  />
-              )
-            )}
+                ))}
            </div>,
            document.body
          )}