import { useEffect, useState, useCallback, useRef } from 'react'; import { Bot, ExternalLink } from 'lucide-react'; import { defineMessages, useIntl } from '../../../../i18n'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../../ui/dialog'; import { Button } from '../../../ui/button'; import { QUICKSTART_GUIDE_URL } from '../../providers/modal/constants'; import { Input } from '../../../ui/input'; import { Select } from '../../../ui/Select'; import { useConfig } from '../../../ConfigContext'; import { useModelAndProvider } from '../../../ModelAndProviderContext'; import type { View } from '../../../../utils/navigationUtils'; import Model, { getProviderMetadata, fetchModelsForProviders } from '../modelInterface'; import { getPredefinedModelsFromEnv, shouldShowPredefinedModels } from '../predefinedModelsUtils'; import { ProviderType } from '../../../../api'; import { trackModelChanged } from '../../../../utils/analytics'; const i18n = defineMessages({ thinkingLevelLow: { id: 'switchModelModal.thinkingLevelLow', defaultMessage: 'Low - Better latency, lighter reasoning', }, thinkingLevelHigh: { id: 'switchModelModal.thinkingLevelHigh', defaultMessage: 'High - Deeper reasoning, higher latency', }, claudeEffortLow: { id: 'switchModelModal.claudeEffortLow', defaultMessage: 'Low - Minimal thinking, fastest responses', }, claudeEffortMedium: { id: 'switchModelModal.claudeEffortMedium', defaultMessage: 'Medium - Moderate thinking', }, claudeEffortHigh: { id: 'switchModelModal.claudeEffortHigh', defaultMessage: 'High - Deep reasoning (default)', }, claudeEffortMax: { id: 'switchModelModal.claudeEffortMax', defaultMessage: 'Max - No constraints on thinking depth', }, selectModel: { id: 'switchModelModal.selectModel', defaultMessage: 'Please select a model', }, selectProvider: { id: 'switchModelModal.selectProvider', defaultMessage: 'Please select a provider', }, selectOrEnterModel: { id: 'switchModelModal.selectOrEnterModel', defaultMessage: 'Please select or enter a model', }, title: { id: 'switchModelModal.title', defaultMessage: 'Switch models', }, description: { id: 'switchModelModal.description', defaultMessage: 'Select a provider and model to use for your conversations.', }, chooseModel: { id: 'switchModelModal.chooseModel', defaultMessage: 'Choose a model:', }, recommended: { id: 'switchModelModal.recommended', defaultMessage: 'Recommended', }, thinkingLevel: { id: 'switchModelModal.thinkingLevel', defaultMessage: 'Thinking Level', }, geminiOnly: { id: 'switchModelModal.geminiOnly', defaultMessage: '(Gemini 3 models only)', }, selectThinkingLevel: { id: 'switchModelModal.selectThinkingLevel', defaultMessage: 'Select thinking level', }, useOtherProvider: { id: 'switchModelModal.useOtherProvider', defaultMessage: 'Use other provider', }, providerPlaceholder: { id: 'switchModelModal.providerPlaceholder', defaultMessage: 'Provider, type to search', }, localModelsTitle: { id: 'switchModelModal.localModelsTitle', defaultMessage: 'Local models need to be downloaded first', }, localModelsDescription: { id: 'switchModelModal.localModelsDescription', defaultMessage: 'To use local inference, you need to download a model to your computer first. Go to Settings → Models to manage local models.', }, goToSettings: { id: 'switchModelModal.goToSettings', defaultMessage: 'Go to Settings', }, couldNotContactProvider: { id: 'switchModelModal.couldNotContactProvider', defaultMessage: 'Could not contact provider', }, checkProviderConfig: { id: 'switchModelModal.checkProviderConfig', defaultMessage: 'Check your provider configuration in Settings → Providers', }, loadingModels: { id: 'switchModelModal.loadingModels', defaultMessage: 'Loading models…', }, selectModelPlaceholder: { id: 'switchModelModal.selectModelPlaceholder', defaultMessage: 'Select a model, type to search', }, customModelName: { id: 'switchModelModal.customModelName', defaultMessage: 'Custom model name', }, backToModelList: { id: 'switchModelModal.backToModelList', defaultMessage: 'Back to model list', }, typeModelName: { id: 'switchModelModal.typeModelName', defaultMessage: 'Type model name here', }, extendedThinking: { id: 'switchModelModal.extendedThinking', defaultMessage: 'Extended Thinking', }, selectThinkingMode: { id: 'switchModelModal.selectThinkingMode', defaultMessage: 'Select thinking mode', }, thinkingEffort: { id: 'switchModelModal.thinkingEffort', defaultMessage: 'Thinking Effort', }, selectEffortLevel: { id: 'switchModelModal.selectEffortLevel', defaultMessage: 'Select effort level', }, thinkingBudget: { id: 'switchModelModal.thinkingBudget', defaultMessage: 'Thinking Budget (tokens)', }, quickStartGuide: { id: 'switchModelModal.quickStartGuide', defaultMessage: 'Quick start guide', }, cancel: { id: 'switchModelModal.cancel', defaultMessage: 'Cancel', }, selectModelButton: { id: 'switchModelModal.selectModelButton', defaultMessage: 'Select model', }, enterModelNotListed: { id: 'switchModelModal.enterModelNotListed', defaultMessage: 'Enter a model not listed...', }, claudeAdaptive: { id: 'switchModelModal.claudeAdaptive', defaultMessage: 'Adaptive - Claude decides when and how much to think', }, claudeEnabled: { id: 'switchModelModal.claudeEnabled', defaultMessage: 'Enabled - Fixed token budget for thinking', }, claudeDisabled: { id: 'switchModelModal.claudeDisabled', defaultMessage: 'Disabled - No extended thinking', }, }); // THINKING_LEVEL_OPTIONS and CLAUDE_THINKING_EFFORT_OPTIONS are created inside the component to support i18n. function isClaudeModel(name: string | null | undefined): boolean { return !!name && name.toLowerCase().startsWith('claude-'); } function supportsAdaptiveThinking(name: string): boolean { const lower = name.toLowerCase(); return lower.includes('claude-opus-4-6') || lower.includes('claude-sonnet-4-6'); } const PREFERRED_MODEL_PATTERNS = [ /claude-sonnet-4/i, /claude-4/i, /gpt-4o(?!-mini)/i, /claude-3-5-sonnet/i, /claude-3\.5-sonnet/i, /gpt-4-turbo/i, /gpt-4(?!-|o)/i, /claude-3-opus/i, /claude-3-sonnet/i, /gemini-pro/i, /llama-3/i, /gpt-4o-mini/i, /claude-3-haiku/i, /gemini/i, ]; function findPreferredModel( models: { value: string; label: string; provider: string }[] ): string | null { if (models.length === 0) return null; const validModels = models.filter( (m) => m.value !== 'custom' && m.value !== '__loading__' && !m.value.startsWith('__') ); if (validModels.length === 0) return null; for (const pattern of PREFERRED_MODEL_PATTERNS) { const match = validModels.find((m) => pattern.test(m.value)); if (match) { return match.value; } } return validModels[0].value; } type SwitchModelModalProps = { sessionId: string | null; onClose: () => void; setView: (view: View) => void; onModelSelected?: (model: string, provider: string) => void; initialProvider?: string | null; titleOverride?: string; sessionModel?: string | null; sessionProvider?: string | null; }; export const SwitchModelModal = ({ sessionId, onClose, setView, onModelSelected, initialProvider, titleOverride, sessionModel, sessionProvider, }: SwitchModelModalProps) => { const intl = useIntl(); const THINKING_LEVEL_OPTIONS = [ { value: 'low', label: intl.formatMessage(i18n.thinkingLevelLow) }, { value: 'high', label: intl.formatMessage(i18n.thinkingLevelHigh) }, ]; const CLAUDE_THINKING_EFFORT_OPTIONS = [ { value: 'low', label: intl.formatMessage(i18n.claudeEffortLow) }, { value: 'medium', label: intl.formatMessage(i18n.claudeEffortMedium) }, { value: 'high', label: intl.formatMessage(i18n.claudeEffortHigh) }, { value: 'max', label: intl.formatMessage(i18n.claudeEffortMax) }, ]; const { getProviders, read, upsert } = useConfig(); const { changeModel, currentModel: configModel, currentProvider: configProvider, } = useModelAndProvider(); // Use session-specific model/provider if available, otherwise fall back to config defaults const currentModel = sessionModel ?? configModel; const currentProvider = sessionProvider ?? configProvider; const [providerOptions, setProviderOptions] = useState<{ value: string; label: string }[]>([]); type ModelOption = { value: string; label: string; provider: string; isDisabled?: boolean }; const [modelOptions, setModelOptions] = useState<{ options: ModelOption[] }[]>([]); const [provider, setProvider] = useState( initialProvider || currentProvider || null ); const [model, setModel] = useState( initialProvider && initialProvider !== currentProvider ? '' : currentModel || '' ); const [isCustomModel, setIsCustomModel] = useState(false); const [validationErrors, setValidationErrors] = useState({ provider: '', model: '', }); const [isValid, setIsValid] = useState(true); const [attemptedSubmit, setAttemptedSubmit] = useState(false); const [usePredefinedModels] = useState(shouldShowPredefinedModels()); const [selectedPredefinedModel, setSelectedPredefinedModel] = useState(null); const [predefinedModels, setPredefinedModels] = useState([]); const [loadingModels, setLoadingModels] = useState(false); const [userClearedModel, setUserClearedModel] = useState(false); const [providerErrors, setProviderErrors] = useState>({}); const [providerWarnings, setProviderWarnings] = useState>({}); const [activeProvidersList, setActiveProvidersList] = useState< import('../../../../api').ProviderDetails[] >([]); const fetchedProviders = useRef>(new Set()); const [thinkingLevel, setThinkingLevel] = useState('low'); const [claudeThinkingType, setClaudeThinkingType] = useState('disabled'); const [claudeThinkingEffort, setClaudeThinkingEffort] = useState('high'); const [claudeThinkingBudget, setClaudeThinkingBudget] = useState('16000'); const modelName = usePredefinedModels ? selectedPredefinedModel?.name : model; const isGemini3Model = modelName?.toLowerCase().startsWith('gemini-3') ?? false; const showClaudeThinking = isClaudeModel(modelName); const modelSupportsAdaptive = modelName ? supportsAdaptiveThinking(modelName) : false; useEffect(() => { if (!showClaudeThinking) return; if (claudeThinkingType === 'adaptive' && !modelSupportsAdaptive) { setClaudeThinkingType('disabled'); } }, [modelName, showClaudeThinking, modelSupportsAdaptive, claudeThinkingType]); useEffect(() => { const readConfig = async (key: string): Promise => { try { const val = (await read(key, false)) as string; return val || null; } catch (e) { console.warn(`Could not read ${key}, using default:`, e); return null; } }; (async () => { const tt = await readConfig('CLAUDE_THINKING_TYPE'); if (tt) setClaudeThinkingType(tt); const effort = await readConfig('CLAUDE_THINKING_EFFORT'); if (effort) setClaudeThinkingEffort(effort); const budget = await readConfig('CLAUDE_THINKING_BUDGET'); if (budget) setClaudeThinkingBudget(budget); })(); }, [read]); // Validate form data const validateForm = useCallback(() => { const errors = { provider: '', model: '', }; let formIsValid = true; if (usePredefinedModels) { if (!selectedPredefinedModel) { errors.model = intl.formatMessage(i18n.selectModel); formIsValid = false; } } else { if (!provider) { errors.provider = intl.formatMessage(i18n.selectProvider); formIsValid = false; } if (!model) { errors.model = intl.formatMessage(i18n.selectOrEnterModel); formIsValid = false; } } setValidationErrors(errors); setIsValid(formIsValid); return formIsValid; }, [model, provider, usePredefinedModels, selectedPredefinedModel, intl]); const handleClose = () => { onClose(); }; const handleSubmit = async () => { setAttemptedSubmit(true); const isFormValid = validateForm(); if (isFormValid) { let modelObj: Model; if (usePredefinedModels && selectedPredefinedModel) { modelObj = selectedPredefinedModel; } else { const providerMetaData = await getProviderMetadata(provider || '', getProviders); const providerDisplayName = providerMetaData.display_name; modelObj = { name: model, provider: provider, subtext: providerDisplayName, } as Model; } if (isGemini3Model) { modelObj = { ...modelObj, request_params: { ...modelObj.request_params, thinking_level: thinkingLevel }, }; } if (showClaudeThinking) { const params: Record = { ...modelObj.request_params, thinking_type: claudeThinkingType, }; if (claudeThinkingType === 'adaptive') { params.effort = claudeThinkingEffort; } else if (claudeThinkingType === 'enabled') { params.budget_tokens = parseInt(claudeThinkingBudget, 10) || 16000; } modelObj = { ...modelObj, request_params: params }; upsert('CLAUDE_THINKING_TYPE', claudeThinkingType, false).catch(console.warn); if (claudeThinkingType === 'adaptive') { upsert('CLAUDE_THINKING_EFFORT', claudeThinkingEffort, false).catch(console.warn); } else if (claudeThinkingType === 'enabled') { upsert( 'CLAUDE_THINKING_BUDGET', parseInt(claudeThinkingBudget, 10) || 16000, false ).catch(console.warn); } } const success = await changeModel(sessionId, modelObj); if (success) { onModelSelected?.(modelObj.name, modelObj.provider || ''); trackModelChanged(modelObj.provider || '', modelObj.name); } onClose(); } }; // Re-validate when inputs change and after attempted submission useEffect(() => { if (attemptedSubmit) { validateForm(); } }, [attemptedSubmit, validateForm]); // Initialize predefined model selection from session/config model. // Separate effect so it re-runs when currentModel loads asynchronously. useEffect(() => { if (!usePredefinedModels || !currentModel) return; const models = getPredefinedModelsFromEnv(); const matchingModel = models.find((m) => m.name === currentModel); if (matchingModel) { setSelectedPredefinedModel(matchingModel); } }, [usePredefinedModels, currentModel]); // For manual mode: one-time sync of provider/model when session data // arrives after the modal has already mounted. Uses a ref so it only // fires once and doesn't interfere with user-driven changes (e.g. // switching provider clears model intentionally). const manualSyncDone = useRef(false); useEffect(() => { if (usePredefinedModels || manualSyncDone.current) return; if (initialProvider && initialProvider !== currentProvider) return; if (currentModel && currentProvider) { if (!provider) setProvider(currentProvider); if (!model) setModel(currentModel); manualSyncDone.current = true; } }, [currentModel, currentProvider, usePredefinedModels, provider, model, initialProvider]); useEffect(() => { if (usePredefinedModels) { const models = getPredefinedModelsFromEnv(); setPredefinedModels(models); } (async () => { try { const providersResponse = await getProviders(false); const activeProviders = providersResponse.filter((provider) => provider.is_configured); setActiveProvidersList(activeProviders); setProviderOptions([ ...activeProviders.map(({ metadata, name }) => ({ value: name, label: metadata.display_name, })), { value: 'configure_providers', label: intl.formatMessage(i18n.useOtherProvider), }, ]); } catch (error: unknown) { console.error('Failed to query providers:', error); } })(); }, [getProviders, usePredefinedModels, read, intl]); useEffect(() => { if (!provider || usePredefinedModels) return; if (fetchedProviders.current.has(provider)) { setLoadingModels(false); return; } const activeProvider = activeProvidersList.find((p) => p.name === provider); if (!activeProvider) return; let cancelled = false; (async () => { setLoadingModels(true); try { const results = await fetchModelsForProviders([activeProvider]); if (cancelled) return; const newGroupedOptions: { options: { value: string; label: string; provider: string; providerType: ProviderType }[]; }[] = []; const newErrors: Record = {}; const newWarnings: Record = {}; results.forEach(({ provider: p, models, error, warning }) => { if (warning) { newWarnings[p.name] = warning; } if (error) { newErrors[p.name] = error; return; } const modelList = models || []; const options: { value: string; label: string; provider: string; providerType: ProviderType; }[] = modelList.map((m) => ({ value: m, label: m, provider: p.name, providerType: p.provider_type, })); if (p.provider_type !== 'Custom') { options.push({ value: 'custom', label: intl.formatMessage(i18n.enterModelNotListed), provider: p.name, providerType: p.provider_type, }); } if (options.length > 0) { newGroupedOptions.push({ options }); } }); setProviderErrors((prev) => { const next = { ...prev, ...newErrors }; if (!newErrors[activeProvider.name]) delete next[activeProvider.name]; return next; }); setProviderWarnings((prev) => { const next = { ...prev, ...newWarnings }; if (!newWarnings[activeProvider.name]) delete next[activeProvider.name]; return next; }); setModelOptions((prev) => [...prev, ...newGroupedOptions]); setOriginalModelOptions((prev) => [...prev, ...newGroupedOptions]); fetchedProviders.current.add(provider); } catch (error: unknown) { console.error(`Failed to fetch models for ${provider}:`, error); } finally { if (!cancelled) { setLoadingModels(false); } } })(); return () => { cancelled = true; setLoadingModels(false); }; }, [provider, activeProvidersList, usePredefinedModels, intl]); const filteredModelOptions = provider ? modelOptions.filter((group) => group.options[0]?.provider === provider) : []; useEffect(() => { // Don't auto-select if user explicitly cleared the model if (!provider || loadingModels || model || isCustomModel || userClearedModel) return; const providerModels = modelOptions .filter((group) => group.options[0]?.provider === provider) .flatMap((group) => group.options); if (providerModels.length > 0) { const preferredModel = findPreferredModel(providerModels); if (preferredModel) { setModel(preferredModel); } } }, [provider, modelOptions, loadingModels, model, isCustomModel, userClearedModel]); // Handle model selection change const handleModelChange = (newValue: unknown) => { const selectedOption = newValue as { value: string; label: string; provider: string } | null; if (selectedOption?.value === 'custom') { setIsCustomModel(true); setModel(''); setProvider(selectedOption.provider); setUserClearedModel(false); } else if (selectedOption === null) { // User cleared the selection setIsCustomModel(false); setModel(''); setUserClearedModel(true); } else { setIsCustomModel(false); setModel(selectedOption?.value || ''); setProvider(selectedOption?.provider || ''); setUserClearedModel(false); } }; // Store the original model options in state, initialized from modelOptions const [originalModelOptions, setOriginalModelOptions] = useState<{ options: { value: string; label: string; provider: string }[] }[]>(modelOptions); const handleInputChange = (inputValue: string) => { if (!provider) return; const trimmedInput = inputValue.trim(); if (trimmedInput === '') { // Reset to original model options when input is cleared setModelOptions([...originalModelOptions]); // Create new array to ensure state update return; } // Filter through the original model options to find matches const matchingOptions = originalModelOptions .map((group) => ({ options: group.options.filter( (option) => option.value.toLowerCase().includes(trimmedInput.toLowerCase()) && option.value !== 'custom' // Exclude the "Use custom model" option from search ), })) .filter((group) => group.options.length > 0); if (matchingOptions.length > 0) { // If we found matches in the existing options, show those setModelOptions(matchingOptions); } else { // If no matches, show the "Use: " option const customOption = [ { options: [ { value: trimmedInput, label: `Use: "${trimmedInput}"`, provider: provider, }, ], }, ]; setModelOptions(customOption); } }; const claudeThinkingTypeOptions = [ ...(modelSupportsAdaptive ? [{ value: 'adaptive', label: intl.formatMessage(i18n.claudeAdaptive) }] : []), { value: 'enabled', label: intl.formatMessage(i18n.claudeEnabled) }, { value: 'disabled', label: intl.formatMessage(i18n.claudeDisabled) }, ]; const claudeThinkingControls = showClaudeThinking && (

{intl.formatMessage(i18n.extendedThinking)} o.value === claudeThinkingEffort)} onChange={(newValue: unknown) => { const option = newValue as { value: string; label: string } | null; setClaudeThinkingEffort(option?.value || 'high'); }} placeholder={intl.formatMessage(i18n.selectEffortLevel)} />

)} {claudeThinkingType === 'enabled' && (

{intl.formatMessage(i18n.thinkingBudget)} setClaudeThinkingBudget(e.target.value)} />

)}

); return (

{intl.formatMessage(i18n.localModelsTitle)}

{intl.formatMessage(i18n.couldNotContactProvider)}