feat: add model selector (fetch from v1/models) when user adds a provider model

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

@@ -8,8 +8,9 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import { useModelProvider } from '@/hooks/useModelProvider'
+import { useProviderModels } from '@/hooks/useProviderModels'
+import { ModelCombobox } from '@/containers/ModelCombobox'
 import { IconPlus } from '@tabler/icons-react'
 import { useState } from 'react'
 import { getProviderTitle } from '@/lib/utils'
@@ -25,6 +26,12 @@ export const DialogAddModel = ({ provider, trigger }: DialogAddModelProps) => {
   const { updateProvider } = useModelProvider()
   const [modelId, setModelId] = useState<string>('')
   const [open, setOpen] = useState(false)
+  const [isComboboxOpen, setIsComboboxOpen] = useState(false)
+
+  // Fetch models from provider API (API key is optional)
+  const { models, loading, error, refetch } = useProviderModels(
+    provider.base_url ? provider : undefined
+  )
 
   // Handle form submission
   const handleSubmit = () => {
@@ -62,7 +69,13 @@ export const DialogAddModel = ({ provider, trigger }: DialogAddModelProps) => {
           </div>
         )}
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent
+        onEscapeKeyDown={(e: KeyboardEvent) => {
+          if (isComboboxOpen) {
+            e.preventDefault()
+          }
+        }}
+      >
         <DialogHeader>
           <DialogTitle>{t('providers:addModel.title')}</DialogTitle>
           <DialogDescription>
@@ -72,7 +85,7 @@ export const DialogAddModel = ({ provider, trigger }: DialogAddModelProps) => {
           </DialogDescription>
         </DialogHeader>
 
-        {/* Model ID field - required */}
+        {/* Model selection field - required */}
         <div className="space-y-2">
           <label
             htmlFor="model-id"
@@ -81,12 +94,16 @@ export const DialogAddModel = ({ provider, trigger }: DialogAddModelProps) => {
             {t('providers:addModel.modelId')}{' '}
             <span className="text-destructive">*</span>
           </label>
-          <Input
-            id="model-id"
+          <ModelCombobox
+            key={`${provider.provider}-${provider.base_url || ''}`}
             value={modelId}
-            onChange={(e) => setModelId(e.target.value)}
+            onChange={setModelId}
+            models={models}
+            loading={loading}
+            error={error}
+            onRefresh={refetch}
             placeholder={t('providers:addModel.enterModelId')}
-            required
+            onOpenChange={setIsComboboxOpen}
           />
         </div>
 

web-app/src/hooks/__tests__/useProviderModels.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+import { useProviderModels } from '../useProviderModels'
+import { WebProvidersService } from '../../services/providers/web'
+
+let fetchModelsSpy: ReturnType<typeof vi.spyOn>
+
+// Local minimal provider type for tests
+type MockModelProvider = {
+  active: boolean
+  provider: string
+  base_url?: string
+  api_key?: string
+  settings: any[]
+  models: any[]
+}
+
+describe('useProviderModels', () => {
+  const mockProvider: MockModelProvider = {
+    active: true,
+    provider: 'openai',
+    base_url: 'https://api.openai.com/v1',
+    api_key: 'test-api-key',
+    settings: [],
+    models: [],
+  }
+
+  const mockModels = ['gpt-4', 'gpt-3.5-turbo', 'gpt-4-turbo']
+
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.clearAllMocks()
+    fetchModelsSpy = vi.spyOn(
+      WebProvidersService.prototype,
+      'fetchModelsFromProvider'
+    )
+  })
+
+  it('should initialize with empty state', () => {
+    const { result } = renderHook(() => useProviderModels())
+
+    expect(result.current.models).toEqual([])
+    expect(result.current.loading).toBe(false)
+    expect(result.current.error).toBe(null)
+    expect(typeof result.current.refetch).toBe('function')
+  })
+
+  it('should not fetch models when provider is undefined', () => {
+    renderHook(() => useProviderModels(undefined))
+    expect(fetchModelsSpy).not.toHaveBeenCalled()
+  })
+
+  it('should not fetch models when provider has no base_url', () => {
+    const providerWithoutUrl = { ...mockProvider, base_url: undefined }
+    renderHook(() => useProviderModels(providerWithoutUrl))
+    expect(fetchModelsSpy).not.toHaveBeenCalled()
+  })
+
+  it('should fetch and sort models', async () => {
+    fetchModelsSpy.mockResolvedValueOnce(mockModels)
+
+    const { result } = renderHook(() => useProviderModels(mockProvider))
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    // Should be sorted alphabetically
+    expect(result.current.models).toEqual(['gpt-3.5-turbo', 'gpt-4', 'gpt-4-turbo'])
+    expect(result.current.error).toBe(null)
+    expect(fetchModelsSpy).toHaveBeenCalledWith(mockProvider)
+  })
+
+  it('should clear models when switching to invalid provider', async () => {
+    fetchModelsSpy.mockResolvedValueOnce(mockModels)
+
+    const { result, rerender } = renderHook(
+      ({ provider }) => useProviderModels(provider),
+      { initialProps: { provider: mockProvider } }
+    )
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(result.current.models).toEqual(['gpt-3.5-turbo', 'gpt-4', 'gpt-4-turbo'])
+
+    // Switch to invalid provider
+    rerender({ provider: { ...mockProvider, base_url: undefined } })
+
+    expect(result.current.models).toEqual([])
+    expect(result.current.error).toBe(null)
+    expect(result.current.loading).toBe(false)
+  })
+
+  it('should not refetch when provider is undefined', () => {
+    const { result } = renderHook(() => useProviderModels(undefined))
+
+    result.current.refetch()
+
+    expect(fetchModelsSpy).not.toHaveBeenCalled()
+  })
+})

web-app/src/hooks/useProviderModels.ts

@@ -0,0 +1,93 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { WebProvidersService } from '../services/providers/web'
+
+type UseProviderModelsState = {
+  models: string[]
+  loading: boolean
+  error: string | null
+  refetch: () => void
+}
+
+const modelsCache = new Map<string, { models: string[]; timestamp: number }>()
+const CACHE_DURATION = 5 * 60 * 1000 // 5 minutes
+
+export const useProviderModels = (provider?: ModelProvider): UseProviderModelsState => {
+  const providersService = useMemo(() => new WebProvidersService(), [])
+  const [models, setModels] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const prevProviderKey = useRef<string>('')
+  const requestIdRef = useRef(0)
+
+  const fetchModels = useCallback(async () => {
+    if (!provider || !provider.base_url) {
+      // Clear models if provider is invalid (base_url is required, api_key is optional)
+      setModels([])
+      setError(null)
+      setLoading(false)
+      return
+    }
+
+    // Clear any previous state when starting a new fetch for a different provider
+    const currentProviderKey = `${provider.provider}-${provider.base_url}`
+    if (currentProviderKey !== prevProviderKey.current) {
+      setModels([])
+      setError(null)
+      setLoading(false)
+      prevProviderKey.current = currentProviderKey
+    }
+
+    const cacheKey = `${provider.provider}-${provider.base_url}`
+    const cached = modelsCache.get(cacheKey)
+
+    // Check cache first
+    if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+      setModels(cached.models)
+      return
+    }
+
+    const currentRequestId = ++requestIdRef.current
+    setLoading(true)
+    setError(null)
+
+    try {
+      const fetchedModels = await providersService.fetchModelsFromProvider(provider)
+      if (currentRequestId !== requestIdRef.current) return
+      const sortedModels = fetchedModels.sort((a, b) => a.localeCompare(b))
+
+      setModels(sortedModels)
+
+      // Cache the results
+      modelsCache.set(cacheKey, {
+        models: sortedModels,
+        timestamp: Date.now(),
+      })
+    } catch (err) {
+      if (currentRequestId !== requestIdRef.current) return
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch models'
+      setError(errorMessage)
+      console.error(`Error fetching models from ${provider.provider}:`, err)
+    } finally {
+      if (currentRequestId === requestIdRef.current) setLoading(false)
+    }
+  }, [provider, providersService])
+
+  const refetch = useCallback(() => {
+    if (provider) {
+      const cacheKey = `${provider.provider}-${provider.base_url}`
+      modelsCache.delete(cacheKey)
+      fetchModels()
+    }
+  }, [provider, fetchModels])
+
+  useEffect(() => {
+    fetchModels()
+  }, [fetchModels])
+
+  return {
+    models,
+    loading,
+    error,
+    refetch,
+  }
+}

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

@@ -75,6 +75,8 @@
   "selectAModel": "Select a model",
   "noToolsAvailable": "No tools available",
   "noModelsFoundFor": "No models found for \"{{searchValue}}\"",
+  "failedToLoadModels": "Failed to load models",
+  "noModels": "No models found",
   "customAvatar": "Custom avatar",
   "editAssistant": "Edit Assistant",
   "jan": "Jan",

web-app/src/services/__tests__/providers.test.ts

@@ -215,7 +215,7 @@
       )
     })
 
-    it('should throw error when API response is not ok', async () => {
+    it('should throw error when API response is not ok (404)', async () => {
       const mockResponse = {
         ok: false,
         status: 404,
@@ -229,7 +229,43 @@
       }
 
       await expect(providersService.fetchModelsFromProvider(provider)).rejects.toThrow(
-        'Cannot connect to custom at https://api.custom.com. Please check that the service is running and accessible.'
+        'Models endpoint not found for custom. Check the base URL configuration.'
+      )
+    })
+
+    it('should throw error when API response is not ok (403)', async () => {
+      const mockResponse = {
+        ok: false,
+        status: 403,
+        statusText: 'Forbidden',
+      }
+      vi.mocked(global.fetch).mockResolvedValue(mockResponse as any)
+
+      const provider = {
+        provider: 'custom',
+        base_url: 'https://api.custom.com',
+      } as ModelProvider
+
+      await expect(providersService.fetchModelsFromProvider(provider)).rejects.toThrow(
+        'Access forbidden: Check your API key permissions for custom'
+      )
+    })
+
+    it('should throw error when API response is not ok (401)', async () => {
+      const mockResponse = {
+        ok: false,
+        status: 401,
+        statusText: 'Unauthorized',
+      }
+      vi.mocked(global.fetch).mockResolvedValue(mockResponse as any)
+
+      const provider = {
+        provider: 'custom',
+        base_url: 'https://api.custom.com',
+      } as ModelProvider
+
+      await expect(providersService.fetchModelsFromProvider(provider)).rejects.toThrow(
+        'Authentication failed: API key is required or invalid for custom'
       )
     })
 
@@ -241,7 +277,7 @@
         base_url: 'https://api.custom.com',
       }
 
       await expect(providersService.fetchModelsFromProvider(provider)).rejects.toThrow(
         'Cannot connect to custom at https://api.custom.com. Please check that the service is running and accessible.'
       )
     })

web-app/src/services/providers/web.ts

@@ -138,9 +138,24 @@ export class WebProvidersService implements ProvidersService {
       })
 
       if (!response.ok) {
-        throw new Error(
-          `Cannot connect to ${provider.provider} at ${provider.base_url}. Please check that the service is running and accessible.`
-        )
+        // Provide more specific error messages based on status code
+        if (response.status === 401) {
+          throw new Error(
+            `Authentication failed: API key is required or invalid for ${provider.provider}`
+          )
+        } else if (response.status === 403) {
+          throw new Error(
+            `Access forbidden: Check your API key permissions for ${provider.provider}`
+          )
+        } else if (response.status === 404) {
+          throw new Error(
+            `Models endpoint not found for ${provider.provider}. Check the base URL configuration.`
+          )
+        } else {
+          throw new Error(
+            `Failed to fetch models from ${provider.provider}: ${response.status} ${response.statusText}`
+          )
+        }
       }
 
       const data = await response.json()
@@ -170,13 +185,28 @@ export class WebProvidersService implements ProvidersService {
     } catch (error) {
       console.error('Error fetching models from provider:', error)
 
+      const structuredErrorPrefixes = [
+        'Authentication failed',
+        'Access forbidden',
+        'Models endpoint not found',
+        'Failed to fetch models from'
+      ]
+
+      if (error instanceof Error &&
+          structuredErrorPrefixes.some(prefix => (error as Error).message.startsWith(prefix))) {
+        throw new Error(error.message)
+      }
+
       // Provide helpful error message for any connection errors
       if (error instanceof Error && error.message.includes('Cannot connect')) {
-        throw error
+        throw new Error(
+          `Cannot connect to ${provider.provider} at ${provider.base_url}. Please check that the service is running and accessible.`
+        )
       }
-
+
+      // Generic fallback
       throw new Error(
-        `Cannot connect to ${provider.provider} at ${provider.base_url}. Please check that the service is running and accessible.`
+        `Unexpected error while fetching models from ${provider.provider}: ${error instanceof Error ? error.message : 'Unknown error'}`
       )
     }
   }