import { Sliders, Bot, LoaderCircle, Settings } from 'lucide-react'; import React, { useEffect, useState } from 'react'; import { useModelAndProvider } from '../../../ModelAndProviderContext'; import { SwitchModelModal } from '../subcomponents/SwitchModelModal'; import { View } from '../../../../utils/navigationUtils'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../ui/dropdown-menu'; import { useConfig } from '../../../ConfigContext'; import { getProviderMetadata } from '../modelInterface'; import { getModelDisplayName } from '../predefinedModelsUtils'; import { ModelSettingsPanel } from '../../localInference/ModelSettingsPanel'; import { ScrollArea } from '../../../ui/scroll-area'; import { defineMessages, useIntl } from '../../../../i18n'; const i18n = defineMessages({ selectModel: { id: 'modelsBottomBar.selectModel', defaultMessage: 'Select Model', }, currentModel: { id: 'modelsBottomBar.currentModel', defaultMessage: 'Current model', }, loadingModel: { id: 'modelsBottomBar.loadingModel', defaultMessage: 'Loading model...', }, changeModel: { id: 'modelsBottomBar.changeModel', defaultMessage: 'Change Model', }, localModelSettings: { id: 'modelsBottomBar.localModelSettings', defaultMessage: 'Local Model Settings', }, localModelSettingsTitle: { id: 'modelsBottomBar.localModelSettingsTitle', defaultMessage: 'Local Model Settings — {modelName}', }, }); interface ModelsBottomBarProps { sessionId: string | null; dropdownRef: React.RefObject; setView: (view: View) => void; sessionModel?: string | null; sessionProvider?: string | null; onModelChanged: (override: { model: string; provider: string }) => void; sessionLoaded?: boolean; } export default function ModelsBottomBar({ sessionId, dropdownRef, setView, sessionModel, sessionProvider, onModelChanged, sessionLoaded, }: ModelsBottomBarProps) { // ChatInput owns the override state and passes effective model/provider as sessionModel/sessionProvider. // Fall back to config defaults when no session-specific model is available. const { currentModel: configModel, currentProvider: configProvider } = useModelAndProvider(); const currentModel = sessionModel ?? configModel; const currentProvider = sessionProvider ?? configProvider; const intl = useIntl(); const { getProviders } = useConfig(); const [displayProvider, setDisplayProvider] = useState(null); const [displayModelName, setDisplayModelName] = useState(intl.formatMessage(i18n.selectModel)); const [isAddModelModalOpen, setIsAddModelModalOpen] = useState(false); const [isLocalModelSettingsOpen, setIsLocalModelSettingsOpen] = useState(false); const [providerDefaultModel, setProviderDefaultModel] = useState(null); // Show a visible loading placeholder while session metadata is still being fetched, // rather than flashing the config default or leaving the footer blank. const isModelLoading = Boolean(sessionId && !sessionLoaded); const displayModel = currentModel || providerDefaultModel || displayModelName; const loadingModelLabel = intl.formatMessage(i18n.loadingModel); const triggerLabel = isModelLoading ? loadingModelLabel : displayModel; const menuModelLabel = isModelLoading ? loadingModelLabel : displayModelName; useEffect(() => { if (!currentProvider) return; getProviderMetadata(currentProvider, getProviders) .then((metadata) => { setDisplayProvider(metadata.display_name || currentProvider); }) .catch(() => { setDisplayProvider(currentProvider); }); }, [currentProvider, currentModel, getProviders]); // Fetch provider default model when provider changes and no current model useEffect(() => { if (currentProvider && !currentModel) { (async () => { try { const metadata = await getProviderMetadata(currentProvider, getProviders); setProviderDefaultModel(metadata.default_model); } catch (error) { console.error('Failed to get provider default model:', error); setProviderDefaultModel(null); } })(); } else if (currentModel) { setProviderDefaultModel(null); } }, [currentProvider, currentModel, getProviders]); useEffect(() => { if (!currentModel) return; setDisplayModelName(getModelDisplayName(currentModel)); }, [currentModel]); const handleModelSelected = (model: string, provider: string) => { onModelChanged({ model, provider }); }; return (

{isModelLoading ? ( {triggerLabel} ) : ( {triggerLabel} )}

{intl.formatMessage(i18n.currentModel)}

{menuModelLabel} {!isModelLoading && displayProvider && ` — ${displayProvider}`}

setIsAddModelModalOpen(true)}> {intl.formatMessage(i18n.changeModel)} {currentProvider === 'local' && currentModel && ( setIsLocalModelSettingsOpen(true)}> {intl.formatMessage(i18n.localModelSettings)} )} {isAddModelModalOpen ? ( setIsAddModelModalOpen(false)} sessionModel={currentModel} sessionProvider={currentProvider} onModelSelected={(model, provider) => handleModelSelected(model, provider)} /> ) : null} {isLocalModelSettingsOpen && currentModel && (

{intl.formatMessage(i18n.localModelSettingsTitle, { modelName: getModelDisplayName(currentModel) })}

)}

); }