feat: add model load error handling to improve UX (#5802)

* feat: model load error handling

* chore: clean up

* test: add tests

* fix: provider name

src-tauri/src/core/utils/download.rs

@@ -82,7 +82,7 @@ fn validate_proxy_config(config: &ProxyConfig) -> Result<(), String> {
     }
 
     // SSL verification settings are all optional booleans, no validation needed
-    
+
     Ok(())
 }
 
@@ -155,7 +155,7 @@ fn _get_client_for_item(
         // Note: reqwest doesn't have fine-grained SSL verification controls
         // for verify_proxy_ssl, verify_proxy_host_ssl, verify_peer_ssl, verify_host_ssl
         // These settings are handled by the underlying TLS implementation
-        
+
         // Check if this URL should bypass proxy
         let no_proxy = proxy_config.no_proxy.as_deref().unwrap_or(&[]);
         if !should_bypass_proxy(&item.url, no_proxy) {
@@ -617,17 +617,17 @@ mod tests {
         config.verify_proxy_host_ssl = Some(false);
         config.verify_peer_ssl = Some(true);
         config.verify_host_ssl = Some(true);
-        
+
         // Should validate successfully
         assert!(validate_proxy_config(&config).is_ok());
-        
+
         // Test with all SSL settings as false
         config.ignore_ssl = Some(false);
         config.verify_proxy_ssl = Some(false);
         config.verify_proxy_host_ssl = Some(false);
         config.verify_peer_ssl = Some(false);
         config.verify_host_ssl = Some(false);
-        
+
         // Should still validate successfully
         assert!(validate_proxy_config(&config).is_ok());
     }
@@ -641,7 +641,7 @@ mod tests {
         config.verify_proxy_host_ssl = Some(true);
         config.verify_peer_ssl = Some(false);
         config.verify_host_ssl = Some(true);
-        
+
         assert!(validate_proxy_config(&config).is_ok());
         assert!(create_proxy_from_config(&config).is_ok());
     }
@@ -650,61 +650,30 @@ mod tests {
     fn test_proxy_config_ssl_defaults() {
         // Test with no SSL settings (should use None defaults)
         let config = create_test_proxy_config("https://proxy.example.com:8080");
-        
+
         assert_eq!(config.ignore_ssl, None);
         assert_eq!(config.verify_proxy_ssl, None);
         assert_eq!(config.verify_proxy_host_ssl, None);
         assert_eq!(config.verify_peer_ssl, None);
         assert_eq!(config.verify_host_ssl, None);
-        
+
         assert!(validate_proxy_config(&config).is_ok());
         assert!(create_proxy_from_config(&config).is_ok());
     }
 
-    #[test]
-    fn test_proxy_config_serialization() {
-        // Test that proxy config with SSL settings can be serialized/deserialized
-        let mut config = create_test_proxy_config("https://proxy.example.com:8080");
-        config.username = Some("user".to_string());
-        config.password = Some("pass".to_string());
-        config.ignore_ssl = Some(true);
-        config.verify_proxy_ssl = Some(false);
-        config.verify_proxy_host_ssl = Some(false);
-        config.verify_peer_ssl = Some(true);
-        config.verify_host_ssl = Some(true);
-        config.no_proxy = Some(vec!["localhost".to_string(), "*.example.com".to_string()]);
-        
-        // Serialize to JSON
-        let json = serde_json::to_string(&config).unwrap();
-        
-        // Deserialize from JSON
-        let deserialized: ProxyConfig = serde_json::from_str(&json).unwrap();
-        
-        // Verify all fields are preserved
-        assert_eq!(deserialized.url, config.url);
-        assert_eq!(deserialized.username, config.username);
-        assert_eq!(deserialized.password, config.password);
-        assert_eq!(deserialized.ignore_ssl, config.ignore_ssl);
-        assert_eq!(deserialized.verify_proxy_ssl, config.verify_proxy_ssl);
-        assert_eq!(deserialized.verify_proxy_host_ssl, config.verify_proxy_host_ssl);
-        assert_eq!(deserialized.verify_peer_ssl, config.verify_peer_ssl);
-        assert_eq!(deserialized.verify_host_ssl, config.verify_host_ssl);
-        assert_eq!(deserialized.no_proxy, config.no_proxy);
-    }
-
     #[test]
     fn test_download_item_with_ssl_proxy() {
         // Test that DownloadItem can be created with SSL proxy configuration
         let mut proxy_config = create_test_proxy_config("https://proxy.example.com:8080");
         proxy_config.ignore_ssl = Some(true);
         proxy_config.verify_proxy_ssl = Some(false);
-        
+
         let download_item = DownloadItem {
             url: "https://example.com/file.zip".to_string(),
             save_path: "downloads/file.zip".to_string(),
             proxy: Some(proxy_config),
         };
-        
+
         assert!(download_item.proxy.is_some());
         let proxy = download_item.proxy.unwrap();
         assert_eq!(proxy.ignore_ssl, Some(true));
@@ -716,16 +685,16 @@ mod tests {
         // Test client creation with SSL settings
         let mut proxy_config = create_test_proxy_config("https://proxy.example.com:8080");
         proxy_config.ignore_ssl = Some(true);
-        
+
         let download_item = DownloadItem {
             url: "https://example.com/file.zip".to_string(),
             save_path: "downloads/file.zip".to_string(),
             proxy: Some(proxy_config),
         };
-        
+
         let header_map = HeaderMap::new();
         let result = _get_client_for_item(&download_item, &header_map);
-        
+
         // Should create client successfully even with SSL settings
         assert!(result.is_ok());
     }
@@ -736,7 +705,7 @@ mod tests {
         let mut config = create_test_proxy_config("http://proxy.example.com:8080");
         config.ignore_ssl = Some(true);
         config.verify_proxy_ssl = Some(false);
-        
+
         assert!(validate_proxy_config(&config).is_ok());
         assert!(create_proxy_from_config(&config).is_ok());
     }
@@ -748,8 +717,98 @@ mod tests {
         config.ignore_ssl = Some(false);
         config.verify_peer_ssl = Some(true);
         config.verify_host_ssl = Some(true);
-        
+
         assert!(validate_proxy_config(&config).is_ok());
         assert!(create_proxy_from_config(&config).is_ok());
     }
+
+    #[test]
+    fn test_download_item_creation() {
+        let item = DownloadItem {
+            url: "https://example.com/file.tar.gz".to_string(),
+            save_path: "models/test.tar.gz".to_string(),
+            proxy: None,
+        };
+
+        assert_eq!(item.url, "https://example.com/file.tar.gz");
+        assert_eq!(item.save_path, "models/test.tar.gz");
+    }
+
+    #[test]
+    fn test_download_event_creation() {
+        let event = DownloadEvent {
+            transferred: 1024,
+            total: 2048,
+        };
+
+        assert_eq!(event.transferred, 1024);
+        assert_eq!(event.total, 2048);
+    }
+
+    #[test]
+    fn test_err_to_string() {
+        let error = "Test error";
+        let result = err_to_string(error);
+        assert_eq!(result, "Error: Test error");
+    }
+
+    #[test]
+    fn test_convert_headers_valid() {
+        let mut headers = HashMap::new();
+        headers.insert("Content-Type".to_string(), "application/json".to_string());
+        headers.insert("Authorization".to_string(), "Bearer token123".to_string());
+
+        let result = _convert_headers(&headers);
+        assert!(result.is_ok());
+
+        let header_map = result.unwrap();
+        assert_eq!(header_map.len(), 2);
+        assert_eq!(header_map.get("Content-Type").unwrap(), "application/json");
+        assert_eq!(header_map.get("Authorization").unwrap(), "Bearer token123");
+    }
+
+    #[test]
+    fn test_convert_headers_invalid_header_name() {
+        let mut headers = HashMap::new();
+        headers.insert("Invalid\nHeader".to_string(), "value".to_string());
+
+        let result = _convert_headers(&headers);
+        assert!(result.is_err());
+    }
+
+    #[test]
+    fn test_convert_headers_invalid_header_value() {
+        let mut headers = HashMap::new();
+        headers.insert("Content-Type".to_string(), "invalid\nvalue".to_string());
+
+        let result = _convert_headers(&headers);
+        assert!(result.is_err());
+    }
+
+    #[test]
+    fn test_download_manager_state_default() {
+        let state = DownloadManagerState::default();
+        assert!(state.cancel_tokens.is_empty());
+    }
+
+    #[test]
+    fn test_download_event_serialization() {
+        let event = DownloadEvent {
+            transferred: 512,
+            total: 1024,
+        };
+
+        let json = serde_json::to_string(&event).unwrap();
+        assert!(json.contains("\"transferred\":512"));
+        assert!(json.contains("\"total\":1024"));
+    }
+
+    #[test]
+    fn test_download_item_deserialization() {
+        let json = r#"{"url":"https://example.com/file.zip","save_path":"downloads/file.zip"}"#;
+        let item: DownloadItem = serde_json::from_str(json).unwrap();
+
+        assert_eq!(item.url, "https://example.com/file.zip");
+        assert_eq!(item.save_path, "downloads/file.zip");
+    }
 }

web-app/src/containers/ErrorMessage.tsx

@@ -0,0 +1,96 @@
+import { useRef, useState } from 'react'
+
+import { ThreadMessage } from '@janhq/core'
+
+import { CheckIcon, ClipboardIcon, SearchCodeIcon } from 'lucide-react'
+
+const ErrorMessage = ({ message }: { message?: ThreadMessage }) => {
+  // const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
+  const errorDivRef = useRef<HTMLDivElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    if (errorDivRef.current) {
+      const errorText = errorDivRef.current.innerText
+      if (errorText) {
+        navigator.clipboard.writeText(errorText)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      }
+    }
+  }
+
+  const getErrorTitle = () => {
+    return (
+      <p
+        data-testid="passthrough-error-message"
+        className="first-letter:uppercase"
+      >
+        <>
+          {message?.content[0]?.text?.value && (
+            <span>{message?.content[0]?.text?.value}</span>
+          )}
+          {!message?.content[0]?.text?.value && (
+            <span>Something went wrong. Please try again.</span>
+          )}
+        </>
+      </p>
+    )
+  }
+
+  return (
+    <div className="mx-auto my-6 max-w-[700px] px-4">
+      <div
+        className="mx-auto  max-w-[400px] rounded-lg border border-[hsla(var(--app-border))]"
+        key={message?.id}
+      >
+        <div className="flex justify-between border-b border-inherit px-4 py-2">
+          <h6 className="flex items-center gap-x-1 font-semibold text-[hsla(var(--destructive-bg))]">
+            <span className="h-2 w-2 rounded-full bg-[hsla(var(--destructive-bg))]" />
+            <span>Error</span>
+          </h6>
+          <div className="flex items-center gap-x-4 text-xs">
+            <div className="font-semibold">
+              <span
+                className="flex cursor-pointer items-center gap-x-1 text-[hsla(var(--app-link))]"
+                // onClick={() => setModalTroubleShooting(true)}
+              >
+                <SearchCodeIcon size={14} className="text-inherit" />
+                Troubleshooting
+              </span>
+              {/* <ModalTroubleShooting /> */}
+            </div>
+            <div
+              className="flex cursor-pointer items-center gap-x-1 font-semibold text-[hsla(var(--text-secondary))]"
+              onClick={handleCopy}
+            >
+              {copied ? (
+                <>
+                  <CheckIcon
+                    size={14}
+                    className="text-[hsla(var(--success-bg))]"
+                  />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <ClipboardIcon size={14} className="text-inherit" />
+                  Copy
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="max-h-[80px] w-full overflow-x-auto p-4 py-2">
+          <div
+            className="font-serif text-xs leading-relaxed text-[hsla(var(--text-secondary))]"
+            ref={errorDivRef}
+          >
+            {getErrorTitle()}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default ErrorMessage

web-app/src/containers/dialogs/LoadModelErrorDialog.tsx

@@ -0,0 +1,80 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { AlertTriangle } from 'lucide-react'
+import { useTranslation } from '@/i18n/react-i18next-compat'
+import { useModelLoad } from '@/hooks/useModelLoad'
+import { toast } from 'sonner'
+
+export default function LoadModelErrorDialog() {
+  const { t } = useTranslation()
+  const { modelLoadError, setModelLoadError } = useModelLoad()
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(modelLoadError ?? '')
+    toast.success('Copy successful', {
+      id: 'copy-model',
+      description: 'Model load error information copied to clipboard',
+    })
+  }
+
+  const handleDialogOpen = (open: boolean) => {
+    setModelLoadError(open ? modelLoadError : undefined)
+  }
+
+  return (
+    <Dialog open={!!modelLoadError} onOpenChange={handleDialogOpen}>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <div className="flex items-start gap-3">
+            <div className="shrink-0">
+              <AlertTriangle className="size-4" />
+            </div>
+            <div>
+              <DialogTitle>{t('common:error')}</DialogTitle>
+              <DialogDescription className="mt-1 text-main-view-fg/70">
+                Failed to load model
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="bg-main-view-fg/8 p-2 border border-main-view-fg/5 rounded-lg">
+          <p
+            className="text-sm text-main-view-fg/70 leading-relaxed max-h-[200px] overflow-y-auto"
+            ref={(el) => {
+              if (el) {
+                el.scrollTop = el.scrollHeight
+              }
+            }}
+          >
+            {modelLoadError}
+          </p>
+        </div>
+
+        <DialogFooter className="flex flex-col gap-2 sm:flex-row sm:justify-right">
+          <Button
+            variant="link"
+            onClick={() => handleCopy()}
+            className="flex-1 text-right sm:flex-none"
+          >
+            {t('common:copy')}
+          </Button>
+          <Button
+            variant="link"
+            onClick={() => handleDialogOpen(false)}
+            className="flex-1 text-right sm:flex-none"
+          >
+            {t('common:cancel')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

web-app/src/hooks/useChat.ts

@@ -19,7 +19,6 @@ import {
 import { CompletionMessagesBuilder } from '@/lib/messages'
 import { ChatCompletionMessageToolCall } from 'openai/resources'
 import { useAssistant } from './useAssistant'
-import { toast } from 'sonner'
 import { getTools } from '@/services/mcp'
 import { MCPTool } from '@/types/completion'
 import { listen } from '@tauri-apps/api/event'
@@ -31,6 +30,7 @@ import { useToolAvailable } from '@/hooks/useToolAvailable'
 import { OUT_OF_CONTEXT_SIZE } from '@/utils/error'
 import { updateSettings } from '@/services/providers'
 import { useContextSizeApproval } from './useModelContextApproval'
+import { useModelLoad } from './useModelLoad'
 
 export const useChat = () => {
   const { prompt, setPrompt } = usePrompt()
@@ -61,6 +61,7 @@ export const useChat = () => {
     updateThreadTimestamp,
   } = useThreads()
   const { getMessages, addMessage } = useMessages()
+  const { setModelLoadError } = useModelLoad()
   const router = useRouter()
 
   const provider = useMemo(() => {
@@ -232,9 +233,7 @@ export const useChat = () => {
       try {
         if (selectedModel?.id) {
           updateLoadingModel(true)
-          await startModel(activeProvider, selectedModel.id).catch(
+          await startModel(activeProvider, selectedModel.id)
-            console.error
-          )
           updateLoadingModel(false)
         }
 
@@ -368,7 +367,7 @@ export const useChat = () => {
             activeThread.model?.id &&
             provider?.provider === 'llamacpp'
           ) {
-            await stopModel(activeThread.model.id, 'cortex')
+            await stopModel(activeThread.model.id, 'llamacpp')
             throw new Error('No response received from the model')
           }
 
@@ -404,9 +403,7 @@ export const useChat = () => {
           error && typeof error === 'object' && 'message' in error
             ? error.message
             : error
-
+        setModelLoadError(`${errorMessage}`)
-        toast.error(`Error sending message: ${errorMessage}`)
-        console.error('Error sending message:', error)
       } finally {
         updateLoadingModel(false)
         updateStreamingContent(undefined)
@@ -436,6 +433,7 @@ export const useChat = () => {
       showIncreaseContextSizeModal,
       increaseModelContextSize,
       toggleOnContextShifting,
+      setModelLoadError,
     ]
   )
 

web-app/src/hooks/useModelLoad.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+type ModelLoadState = {
+  modelLoadError?: string
+  setModelLoadError: (error: string | undefined) => void
+}
+
+export const useModelLoad = create<ModelLoadState>()((set) => ({
+  modelLoadError: undefined,
+  setModelLoadError: (error) => set({ modelLoadError: error }),
+}))

web-app/src/routes/__root.tsx

@@ -20,6 +20,7 @@ import { cn } from '@/lib/utils'
 import ToolApproval from '@/containers/dialogs/ToolApproval'
 import { TranslationProvider } from '@/i18n/TranslationContext'
 import OutOfContextPromiseModal from '@/containers/dialogs/OutOfContextDialog'
+import LoadModelErrorDialog from '@/containers/dialogs/LoadModelErrorDialog'
 
 export const Route = createRootRoute({
   component: RootLayout,
@@ -97,6 +98,7 @@ function RootLayout() {
         {/* <TanStackRouterDevtools position="bottom-right" /> */}
         <CortexFailureDialog />
         <ToolApproval />
+        <LoadModelErrorDialog />
         <OutOfContextPromiseModal />
       </TranslationProvider>
     </Fragment>