diff --git a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx index e486f9692716..d005534f4654 100644 --- a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx +++ b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx @@ -83,7 +83,11 @@ export const SwitchModelModal = ({ const [provider, setProvider] = useState( initialProvider || currentProvider || null ); - const [model, setModel] = useState(currentModel || ''); + // Only use currentModel if we're not switching to a different provider + // Otherwise, let the auto-select logic pick an appropriate model for the new provider + const [model, setModel] = useState( + initialProvider && initialProvider !== currentProvider ? '' : currentModel || '' + ); const [isCustomModel, setIsCustomModel] = useState(false); const [validationErrors, setValidationErrors] = useState({ provider: '', diff --git a/ui/desktop/src/components/settings/providers/ProviderGrid.tsx b/ui/desktop/src/components/settings/providers/ProviderGrid.tsx index 11fade92d6b8..26397e471809 100644 --- a/ui/desktop/src/components/settings/providers/ProviderGrid.tsx +++ b/ui/desktop/src/components/settings/providers/ProviderGrid.tsx @@ -204,6 +204,7 @@ function ProviderCards({ api_key: '', models: editingProvider.config.models.map((m) => m.name), supports_streaming: editingProvider.config.supports_streaming ?? true, + requires_auth: editingProvider.config.requires_auth ?? true, }; const editable = editingProvider ? editingProvider.isEditable : true; diff --git a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx index ddf4e59eff5e..5c60a365a4a0 100644 --- a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx +++ b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx @@ -3,7 +3,6 @@ import { Input } from '../../../../../ui/input'; import { Select } from '../../../../../ui/Select'; import { Button } from '../../../../../ui/button'; import { SecureStorageNotice } from '../SecureStorageNotice'; -import { Checkbox } from '@radix-ui/themes'; import { UpdateCustomProviderRequest } from '../../../../../../api'; interface CustomProviderFormProps { @@ -24,7 +23,7 @@ export default function CustomProviderForm({ const [apiUrl, setApiUrl] = useState(''); const [apiKey, setApiKey] = useState(''); const [models, setModels] = useState(''); - const [noAuthRequired, setNoAuthRequired] = useState(false); + const [requiresApiKey, setRequiresApiKey] = useState(false); const [supportsStreaming, setSupportsStreaming] = useState(true); const [validationErrors, setValidationErrors] = useState>({}); @@ -40,13 +39,13 @@ export default function CustomProviderForm({ setApiUrl(initialData.api_url); setModels(initialData.models.join(', ')); setSupportsStreaming(initialData.supports_streaming ?? true); - setNoAuthRequired(!(initialData.requires_auth ?? true)); + setRequiresApiKey(initialData.requires_auth ?? true); } }, [initialData]); - const handleNoAuthChange = (checked: boolean) => { - setNoAuthRequired(!!checked); - if (checked) { + const handleRequiresApiKeyChange = (checked: boolean) => { + setRequiresApiKey(checked); + if (!checked) { setApiKey(''); } }; @@ -58,7 +57,7 @@ export default function CustomProviderForm({ if (!displayName) errors.displayName = 'Display name is required'; if (!apiUrl) errors.apiUrl = 'API URL is required'; const existingHadAuth = initialData && (initialData.requires_auth ?? true); - if (!noAuthRequired && !apiKey && !existingHadAuth) errors.apiKey = 'API key is required'; + if (requiresApiKey && !apiKey && !existingHadAuth) errors.apiKey = 'API key is required'; if (!models) errors.models = 'At least one model is required'; if (Object.keys(errors).length > 0) { @@ -78,7 +77,7 @@ export default function CustomProviderForm({ api_key: apiKey, models: modelList, supports_streaming: supportsStreaming, - requires_auth: !noAuthRequired, + requires_auth: requiresApiKey, }); }; @@ -174,22 +173,25 @@ export default function CustomProviderForm({ )}
-
- Authentication +

+ Local LLMs like Ollama typically don't require an API key. +

+
+ handleRequiresApiKeyChange(e.target.checked)} + className="rounded border-borderStandard" /> -
- {!noAuthRequired && ( - <> + {requiresApiKey && ( +
)}
{isEditable && ( @@ -241,15 +243,14 @@ export default function CustomProviderForm({ )}
- setSupportsStreaming(checked as boolean)} + onChange={(e) => setSupportsStreaming(e.target.checked)} + className="rounded border-borderStandard" /> -