fix: unhandled model load error

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

@@ -1,115 +1,115 @@
 /* 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 } 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'
 
 // 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] = useState<string[]>([])
   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') {
@@ -317,17 +317,7 @@
           .getActiveModels()
           .then((models) => setActiveModels(models || []))
       } catch (error) {
-        console.error('Error starting model:', error)
-        if (
-          error &&
-          typeof error === 'object' &&
-          'message' in error &&
-          typeof error.message === 'string'
-        ) {
-          setModelLoadError({ message: error.message })
-        } else {
-          setModelLoadError(typeof error === 'string' ? error : `${error}`)
-        }
+        setModelLoadError(error as ErrorObject)
       } finally {
         // Remove model from loading state
         setLoadingModels((prev) => prev.filter((id) => id !== modelId))