fix: ui check be version

web-app/src/locales/en/settings.json

@@ -1,12 +1,12 @@
 {
   "autoDownload": "Automatic download new updates",
-  "checkForUpdates": "Check for Updates",
+  "checkForUpdates": "Check for updates",
   "checkForUpdatesDesc": "Check if a newer version of Jan is available.",
   "checkingForUpdates": "Checking for updates...",
   "noUpdateAvailable": "You're running the latest version",
   "devVersion": "Development version detected",
   "updateError": "Failed to check for updates",
-  "checkForBackendUpdates": "Check for Llamacpp Updates",
+  "checkForBackendUpdates": "Check for Llamacpp updates",
   "checkForBackendUpdatesDesc": "Check if a newer version of the Llamacpp backend is available.",
   "checkingForBackendUpdates": "Checking for Llamacpp updates...",
   "noBackendUpdateAvailable": "You're running the latest Llamacpp version",
@@ -104,10 +104,10 @@
     "threadScrollDesc": "Choose how the chat viewport should react when new messages arrive.",
     "threadScrollFlowTitle": "Flow scroll",
     "threadScrollFlowHint": "Keeps the viewport anchored to the latest message you send.",
-    
+
     "threadScrollStickyTitle": "Sticky scroll",
     "threadScrollStickyHint": "Automatically follows along as replies stream in real time.",
-    
+
     "tokenCounterCompact": "Compact Token Counter",
     "tokenCounterCompactDesc": "Show token counter inside chat input. When disabled, token counter appears below the input.",
     "codeBlockTitle": "Code Block",

web-app/src/routes/settings/providers/$providerName.tsx

@@ -1,120 +1,120 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Card, CardItem } from '@/containers/Card'
 import HeaderPage from '@/containers/HeaderPage'
 import SettingsMenu from '@/containers/SettingsMenu'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { cn, getProviderTitle, getModelDisplayName } from '@/lib/utils'
 import {
   createFileRoute,
   Link,
   useParams,
   useSearch,
 } from '@tanstack/react-router'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 import Capabilities from '@/containers/Capabilities'
 import { DynamicControllerSetting } from '@/containers/dynamicControllerSetting'
 import { RenderMarkdown } from '@/containers/RenderMarkdown'
 import { DialogEditModel } from '@/containers/dialogs/EditModel'
 import { DialogAddModel } from '@/containers/dialogs/AddModel'
 import { ImportVisionModelDialog } from '@/containers/dialogs/ImportVisionModelDialog'
 import { ModelSetting } from '@/containers/ModelSetting'
 import { DialogDeleteModel } from '@/containers/dialogs/DeleteModel'
 import { FavoriteModelAction } from '@/containers/FavoriteModelAction'
 import Joyride, { CallBackProps, STATUS } from 'react-joyride'
 import { CustomTooltipJoyRide } from '@/containers/CustomeTooltipJoyRide'
 import { route } from '@/constants/routes'
 import DeleteProvider from '@/containers/dialogs/DeleteProvider'
 import { useServiceHub } from '@/hooks/useServiceHub'
 import { localStorageKey } from '@/constants/localStorage'
 import { Button } from '@/components/ui/button'
 import {
   IconFolderPlus,
   IconLoader,
   IconRefresh,
   IconUpload,
 } from '@tabler/icons-react'
 import { toast } from 'sonner'
 import { useCallback, useEffect, useState } from 'react'
 import { predefinedProviders } from '@/consts/providers'
 import { useModelLoad } from '@/hooks/useModelLoad'
 import { useLlamacppDevices } from '@/hooks/useLlamacppDevices'
 import { PlatformFeatures } from '@/lib/platform/const'
 import { PlatformFeature } from '@/lib/platform/types'
 import { useBackendUpdater } from '@/hooks/useBackendUpdater'
 import { basenameNoExt } from '@/lib/utils'
 import { useAppState } from '@/hooks/useAppState'
 import { useShallow } from 'zustand/shallow'
 
 // as route.threadsDetail
 export const Route = createFileRoute('/settings/providers/$providerName')({
   component: ProviderDetail,
   validateSearch: (search: Record<string, unknown>): { step?: string } => {
     // validate and parse the search params into a typed state
     return {
       step: String(search?.step),
     }
   },
 })
 
 function ProviderDetail() {
   const { t } = useTranslation()
   const serviceHub = useServiceHub()
   const { setModelLoadError } = useModelLoad()
   const steps = [
     {
       target: '.first-step-setup-remote-provider',
       title: t('providers:joyride.chooseProviderTitle'),
       disableBeacon: true,
       content: t('providers:joyride.chooseProviderContent'),
     },
     {
       target: '.second-step-setup-remote-provider',
       title: t('providers:joyride.getApiKeyTitle'),
       disableBeacon: true,
       content: t('providers:joyride.getApiKeyContent'),
     },
     {
       target: '.third-step-setup-remote-provider',
       title: t('providers:joyride.insertApiKeyTitle'),
       disableBeacon: true,
       content: t('providers:joyride.insertApiKeyContent'),
     },
   ]
   const { step } = useSearch({ from: Route.id })
   const [activeModels, setActiveModels] = useAppState(
     useShallow((state) => [state.activeModels, state.setActiveModels])
   )
   const [loadingModels, setLoadingModels] = useState<string[]>([])
   const [refreshingModels, setRefreshingModels] = useState(false)
   const [isCheckingBackendUpdate, setIsCheckingBackendUpdate] = useState(false)
   const [isInstallingBackend, setIsInstallingBackend] = useState(false)
   const [importingModel, setImportingModel] = useState<string | null>(null)
   const { checkForUpdate: checkForBackendUpdate, installBackend } =
     useBackendUpdater()
   const { providerName } = useParams({ from: Route.id })
   const { getProviderByName, setProviders, updateProvider } = useModelProvider()
   const provider = getProviderByName(providerName)
   const isSetup = step === 'setup_remote_provider'
 
   // Check if llamacpp provider needs backend configuration
   const needsBackendConfig =
     provider?.provider === 'llamacpp' &&
     provider.settings?.some(
       (setting) =>
         setting.key === 'version_backend' &&
         (setting.controller_props.value === 'none' ||
           setting.controller_props.value === '' ||
           !setting.controller_props.value)
     )
 
   const handleModelImportSuccess = async (importedModelName?: string) => {
     if (importedModelName) {
       setImportingModel(importedModelName)
     }
 
     try {
       // Refresh the provider to update the models list
       await serviceHub.providers().getProviders().then(setProviders)
 
       // If a model was imported and it might have vision capabilities, check and update
       if (importedModelName && providerName === 'llamacpp') {
@@ -628,9 +628,12 @@
                                   <Button
                                     variant="link"
                                     size="sm"
-                                    className="p-0"
+                                    className={cn(
+                                      'p-0',
+                                      isCheckingBackendUpdate &&
+                                        'pointer-events-none'
+                                    )}
                                     onClick={handleCheckForBackendUpdate}
-                                    disabled={isCheckingBackendUpdate}
                                   >
                                     <div className="cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1 gap-1">
                                       <IconRefresh