175 |
176 |
177 | {
184 | const newKey = e.target.value.trim();
185 | chrome.storage.sync.set({ apiKey: newKey });
186 | setApiKey(newKey);
187 | if (!newKey) {
188 | setApiKeyError("Please set your API key");
189 | } else {
190 | setApiKeyError(null);
191 | if (selectedProvider?.supportsModelList) {
192 | handleFetchModels(selectedProvider, newKey);
193 | }
194 | }
195 | }}
196 | />
197 |
198 |
199 |
200 | {providers.map((provider) => (
201 |
handleProviderChange(provider)}
207 | >
208 | {provider.name}
209 |
210 | ))}
211 |
212 |
213 | {selectedProvider?.isLocal && (
214 |
215 |
216 |
handleBaseUrlChange(e.target.value.trim())}
223 | />
224 |
225 | Default: {selectedProvider.defaultBaseUrl || "None"}
226 |
227 |
228 | )}
229 |
230 | {selectedProvider?.requiresModelInput ? (
231 |
232 |
233 | handleCustomModelChange(e.target.value.trim())}
240 | />
241 |
242 | ) : (
243 | selectedProvider &&
244 | availableModels.length > 0 && (
245 |
{
251 | setSelectedModel(modelId);
252 | chrome.storage.sync.set({ selectedModel: modelId });
253 | onModelChange?.(modelId);
254 | }}
255 | />
256 | )
257 | )}
258 |
259 | {apiKeyError && {apiKeyError}
}
260 | {modelError && {modelError}
}
261 |