| 82 | // Fetch model configurations from the backend |
| 83 | useEffect(() => { |
| 84 | const fetchModelConfig = async () => { |
| 85 | try { |
| 86 | setIsLoading(true); |
| 87 | setError(null); |
| 88 | |
| 89 | const response = await fetch('/api/models/config'); |
| 90 | |
| 91 | if (!response.ok) { |
| 92 | throw new Error(`Error fetching model configurations: ${response.status}`); |
| 93 | } |
| 94 | |
| 95 | const data = await response.json(); |
| 96 | setModelConfig(data); |
| 97 | |
| 98 | // Initialize provider and model with defaults from API if not already set |
| 99 | if (!provider && data.defaultProvider) { |
| 100 | setProvider(data.defaultProvider); |
| 101 | |
| 102 | // Find the default provider and set its default model |
| 103 | const selectedProvider = data.providers.find((p: Provider) => p.id === data.defaultProvider); |
| 104 | if (selectedProvider && selectedProvider.models.length > 0) { |
| 105 | setModel(selectedProvider.models[0].id); |
| 106 | } |
| 107 | } |
| 108 | } catch (err) { |
| 109 | console.error('Failed to fetch model configurations:', err); |
| 110 | setError('Failed to load model configurations. Using default options.'); |
| 111 | } finally { |
| 112 | setIsLoading(false); |
| 113 | } |
| 114 | }; |
| 115 | |
| 116 | fetchModelConfig(); |
| 117 | }, [provider, setModel, setProvider]); |