Fix remaining typescript errors (#2741)

ui/desktop/src/components/settings/models/AddModelInline.tsx

@@ -19,7 +19,9 @@ export function AddModelInline() {
 
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [modelName, setModelName] = useState<string>('');
-  const [filteredModels, setFilteredModels] = useState<{ id: string; name: string; provider: string }[]>([]);
+  const [filteredModels, setFilteredModels] = useState<
+    { id: string; name: string; provider: string }[]
+  >([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const handleModelSelection = useHandleModelSelection();
 
@@ -37,7 +39,12 @@ export function AddModelInline() {
           model.provider.toLowerCase() === selectedProvider &&
           model.name.toLowerCase().includes(modelName.toLowerCase())
       )
-      .slice(0, 5); // Limit suggestions to top 5
+      .slice(0, 5) // Limit suggestions to top 5
+      .map((model) => ({
+        id: String(model.id || ''),
+        name: model.name,
+        provider: model.provider,
+      }));
     setFilteredModels(filtered);
     setShowSuggestions(filtered.length > 0);
   }, [modelName, selectedProvider]);
@@ -76,7 +83,8 @@ export function AddModelInline() {
         <Select
           options={providerOptions}
           value={providerOptions.find((option) => option.value === selectedProvider) || null}
-          onChange={(option: { value: string | null }) => {
+          onChange={(newValue: unknown) => {
+            const option = newValue as { value: string | null } | null;
             setSelectedProvider(option?.value || null);
             setModelName(''); // Clear model name when provider changes
             setFilteredModels([]);

ui/desktop/src/components/settings/models/ModelRadioList.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useRecentModels } from './RecentModels';
 import { useModel, Model } from './ModelContext';
 import { useHandleModelSelection } from './utils';
-import type { View } from '@/src/App';
+import type { View } from '../../../App';
 
 interface ModelRadioListProps {
   renderItem: (props: {

ui/desktop/src/components/settings/models/ProviderButtons.tsx

@@ -8,10 +8,13 @@ import { useModel } from './ModelContext';
 import { useHandleModelSelection } from './utils';
 
 // Create a mapping from provider name to href
-const providerLinks = model_docs_link.reduce((acc, { name, href }) => {
-  acc[name] = href;
-  return acc;
-}, {});
+const providerLinks: Record<string, string> = model_docs_link.reduce(
+  (acc, { name, href }) => {
+    acc[name] = href;
+    return acc;
+  },
+  {} as Record<string, string>
+);
 
 export function ProviderButtons() {
   const { activeKeys } = useActiveKeys();

ui/desktop/src/components/settings/models/utils.tsx

@@ -43,7 +43,7 @@ export function useHandleModelSelection() {
       toastError({
         title: model.name,
         msg: `Failed to switch to model`,
-        traceback: error.message,
+        traceback: error instanceof Error ? error.message : String(error),
       });
     }
   };