Enhance LiteLLM provider configuration and default handling

- Updated ApiOptions to ensure model-specific IDs are set correctly when switching to the LiteLLM provider.
- Added useEffect in SettingsView to set default values for LiteLLM configuration fields if they are missing.
- Improved error handling in LiteLLM component for missing API key and base URL during model refresh.
- Added missing configuration error messages in multiple languages for better user feedback.

Author: slytechnical

webview-ui/src/components/settings/ApiOptions.tsx

@@ -263,16 +263,29 @@ const ApiOptions = ({
 						setApiConfigurationField("requestyModelId", requestyDefaultModelId)
 					}
 					break
-				case "litellm":
-					if (!apiConfiguration.litellmModelId) {
+				case "litellm": {
+					let currentLitellmModelId = apiConfiguration.litellmModelId
+					if (!currentLitellmModelId) {
 						setApiConfigurationField("litellmModelId", litellmDefaultModelId)
+						currentLitellmModelId = litellmDefaultModelId // Use the default for the next step
+					}
+					// Ensure apiModelId is also set to the specific litellm model id
+					if (apiConfiguration.apiModelId !== currentLitellmModelId) {
+						setApiConfigurationField("apiModelId", currentLitellmModelId)
 					}
 					break
+				}
 			}
 
-			setApiConfigurationField("apiProvider", value)
+			// Only update the apiProvider if it's actually changing.
+			// This should be called after model-specific IDs are handled for the new provider.
+			if (apiConfiguration.apiProvider !== value) {
+				setApiConfigurationField("apiProvider", value)
+			}
 		},
 		[
+			apiConfiguration.apiProvider,
+			apiConfiguration.apiModelId, // Add apiModelId as it's read and potentially set
 			setApiConfigurationField,
 			apiConfiguration.openRouterModelId,
 			apiConfiguration.glamaModelId,

webview-ui/src/components/settings/SettingsView.tsx

@@ -27,7 +27,7 @@ import {
 
 import { ExperimentId } from "@roo/shared/experiments"
 import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
-import { ProviderSettings } from "@roo/shared/api"
+import { ProviderSettings, litellmDefaultModelId } from "@roo/shared/api"
 
 import { vscode } from "@/utils/vscode"
 import { ExtensionStateContextType, useExtensionState } from "@/context/ExtensionStateContext"
@@ -219,6 +219,51 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		})
 	}, [])
 
+	useEffect(() => {
+		// This effect ensures that if LiteLLM is the provider,
+		// its specific configuration fields have default values in the cached state.
+		const config = cachedState.apiConfiguration
+		if (config && config.apiProvider === "litellm") {
+			const baseUrlMissing = config.litellmBaseUrl === undefined
+			const apiKeyMissing = config.litellmApiKey === undefined
+
+			if (baseUrlMissing || apiKeyMissing) {
+				setCachedState((prevState) => {
+					// Ensure we are working with the latest apiConfiguration from prevState
+					const currentApiConfig = prevState.apiConfiguration ?? {}
+					let updatedApiConfig = { ...currentApiConfig } // Clone to modify
+					let madeChanges = false
+
+					// Check and apply defaults based on the fresh currentApiConfig
+					if (currentApiConfig.litellmBaseUrl === undefined) {
+						updatedApiConfig.litellmBaseUrl = "http://localhost:4000"
+						madeChanges = true
+					}
+					if (currentApiConfig.litellmApiKey === undefined) {
+						updatedApiConfig.litellmApiKey = "sk-1234"
+						madeChanges = true
+					}
+					if (currentApiConfig.litellmModelId === undefined) {
+						updatedApiConfig.litellmModelId = litellmDefaultModelId
+						madeChanges = true
+					}
+
+					if (madeChanges) {
+						// setChangeDetected is not directly available here unless passed to setCachedState's scope or handled differently
+						// For now, we focus on updating apiConfiguration correctly.
+						// The parent component (SettingsView) already calls setChangeDetected(true) when setApiConfigurationField is used.
+						// If we bypass setApiConfigurationField, we need to call setChangeDetected here.
+						setChangeDetected(true) // Call setChangeDetected as we are modifying the state that tracks changes.
+						return { ...prevState, apiConfiguration: updatedApiConfig }
+					}
+					return prevState // No changes were actually needed based on the fresh check
+				})
+			}
+		}
+		// Adding setCachedState and setChangeDetected to dependencies as they are used directly or indirectly.
+		// setApiConfigurationField is removed as we are not calling it from here for these specific defaults.
+	}, [cachedState.apiConfiguration, setCachedState, setChangeDetected])
+
 	const setTelemetrySetting = useCallback((setting: TelemetrySetting) => {
 		setCachedState((prevState) => {
 			if (prevState.telemetrySetting === setting) {

webview-ui/src/components/settings/providers/LiteLLM.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react"
+import { useCallback, useState, useEffect, useRef } from "react"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { useEvent } from "react-use"
 
@@ -24,6 +24,7 @@ export const LiteLLM = ({ apiConfiguration, setApiConfigurationField, routerMode
 	const { t } = useAppTranslation()
 	const [refreshStatus, setRefreshStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
 	const [refreshError, setRefreshError] = useState<string | undefined>()
+	const initialRefreshPerformedRef = useRef(false)
 
 	const handleInputChange = useCallback(
 		<K extends keyof ProviderSettings, E>(
@@ -36,14 +37,18 @@ export const LiteLLM = ({ apiConfiguration, setApiConfigurationField, routerMode
 		[setApiConfigurationField],
 	)
 
-	const handleRefreshModels = () => {
+	const handleRefreshModels = useCallback(() => {
 		setRefreshStatus("loading")
 		setRefreshError(undefined)
 
-		// Due to the button's disabled state logic, litellmApiKey and litellmBaseUrl are guaranteed to be non-empty strings here.
-		// We use non-null assertions (!) to reflect this guarantee for type safety.
-		const key = apiConfiguration.litellmApiKey!
-		const url = apiConfiguration.litellmBaseUrl!
+		const key = apiConfiguration.litellmApiKey
+		const url = apiConfiguration.litellmBaseUrl
+
+		if (!key || !url) {
+			setRefreshStatus("error")
+			setRefreshError(t("settings:providers.refreshModels.missingConfig"))
+			return
+		}
 
 		const message: WebviewMessage = {
 			type: "requestProviderModels",
@@ -54,9 +59,34 @@ export const LiteLLM = ({ apiConfiguration, setApiConfigurationField, routerMode
 			},
 		}
 		vscode.postMessage(message)
-	}
+	}, [apiConfiguration.litellmApiKey, apiConfiguration.litellmBaseUrl, setRefreshStatus, setRefreshError, t])
+
+	// Effect to trigger initial model refresh, once per component instance when conditions are met
+	useEffect(() => {
+		// Only proceed if the initial refresh for this component instance hasn't been done
+		if (initialRefreshPerformedRef.current) {
+			return
+		}
+
+		// Check if the necessary configuration is available
+		if (apiConfiguration.litellmApiKey && apiConfiguration.litellmBaseUrl) {
+			// Mark that we are performing the refresh for this instance
+			initialRefreshPerformedRef.current = true
+			// Directly execute refresh logic
+			setRefreshStatus("loading")
+			setRefreshError(undefined)
+			const message: WebviewMessage = {
+				type: "requestProviderModels",
+				payload: {
+					provider: "litellm",
+					apiKey: apiConfiguration.litellmApiKey,
+					baseUrl: apiConfiguration.litellmBaseUrl,
+				},
+			}
+			vscode.postMessage(message)
+		}
+	}, [apiConfiguration.litellmApiKey, apiConfiguration.litellmBaseUrl])
 
-	// Listen for model refresh responses using useEvent
 	useEvent("message", (event: MessageEvent<ExtensionMessage>) => {
 		const message = event.data
 		if (message.type === "providerModelsResponse") {
@@ -67,7 +97,6 @@ export const LiteLLM = ({ apiConfiguration, setApiConfigurationField, routerMode
 					setRefreshError(message.payload.error)
 				} else {
 					setRefreshStatus("success")
-					// Parent (ApiOptions.tsx) will handle updating the routerModels prop for ModelPicker
 				}
 			} else {
 				console.log(
@@ -77,7 +106,6 @@ export const LiteLLM = ({ apiConfiguration, setApiConfigurationField, routerMode
 			}
 		}
 	})
-	console.log("apiconfig1212", apiConfiguration)
 
 	return (
 		<>

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react"
+import { useCallback, useState, useEffect } from "react"
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { validateApiConfiguration } from "@src/utils/validate"
@@ -10,12 +10,67 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "@src/oauth/urls"
 import RooHero from "./RooHero"
 import knuthShuffle from "knuth-shuffle-seeded"
+import { ProviderSettings, litellmDefaultModelId } from "@roo/shared/api"
 
 const WelcomeView = () => {
 	const { apiConfiguration, currentApiConfigName, setApiConfiguration, uriScheme, machineId } = useExtensionState()
 	const { t } = useAppTranslation()
 	const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
 
+	// Memoize the setApiConfigurationField function to pass to ApiOptions
+	const setApiConfigurationFieldForApiOptions = useCallback(
+		<K extends keyof ProviderSettings>(field: K, value: ProviderSettings[K]) => {
+			setApiConfiguration({ [field]: value })
+		},
+		[setApiConfiguration], // setApiConfiguration from context is stable
+	)
+
+	useEffect(() => {
+		if (!apiConfiguration) {
+			// If no apiConfig at all, nothing to default yet.
+			// This can happen before the initial state hydration from the extension.
+			return
+		}
+
+		const currentProvider = apiConfiguration.apiProvider
+		// Needs provider default if apiProvider is undefined, null, or an empty string.
+		const needsProviderDefault = !currentProvider
+		const isLiteLLMSelectedOrShouldBeDefault = currentProvider === "litellm" || needsProviderDefault
+
+		if (isLiteLLMSelectedOrShouldBeDefault) {
+			const updates: Partial<ProviderSettings> = {}
+			let madeChanges = false
+
+			if (apiConfiguration.litellmBaseUrl === undefined) {
+				updates.litellmBaseUrl = "http://localhost:4000"
+				madeChanges = true
+			}
+			if (apiConfiguration.litellmApiKey === undefined) {
+				updates.litellmApiKey = "sk-1234"
+				madeChanges = true
+			}
+			if (apiConfiguration.litellmModelId === undefined) {
+				updates.litellmModelId = litellmDefaultModelId
+				madeChanges = true
+			}
+
+			// If apiProvider was initially missing or falsy, set it to "litellm".
+			if (needsProviderDefault) {
+				updates.apiProvider = "litellm"
+				madeChanges = true
+			}
+
+			if (madeChanges) {
+				// This log helps confirm if we are about to call setApiConfiguration
+				setApiConfiguration(updates)
+			} else {
+				// This log helps confirm that on subsequent runs, no changes are deemed necessary.
+			}
+		}
+	}, [apiConfiguration, setApiConfiguration])
+
+	useEffect(() => {}, [apiConfiguration])
+
 	const handleSubmit = useCallback(() => {
 		const error = apiConfiguration ? validateApiConfiguration(apiConfiguration) : undefined
 
@@ -106,7 +161,7 @@ const WelcomeView = () => {
 						fromWelcomeView
 						apiConfiguration={apiConfiguration || {}}
 						uriScheme={uriScheme}
-						setApiConfigurationField={(field, value) => setApiConfiguration({ [field]: value })}
+						setApiConfigurationField={setApiConfigurationFieldForApiOptions}
 						errorMessage={errorMessage}
 						setErrorMessage={setErrorMessage}
 					/>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -188,6 +188,16 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		[],
 	)
 
+	const setApiConfiguration = useCallback((value: ProviderSettings) => {
+		setState((prevState) => ({
+			...prevState,
+			apiConfiguration: {
+				...prevState.apiConfiguration,
+				...value,
+			},
+		}))
+	}, [])
+
 	const handleMessage = useCallback(
 		(event: MessageEvent) => {
 			const message: ExtensionMessage = event.data
@@ -266,14 +276,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		screenshotQuality: state.screenshotQuality,
 		setExperimentEnabled: (id, enabled) =>
 			setState((prevState) => ({ ...prevState, experiments: { ...prevState.experiments, [id]: enabled } })),
-		setApiConfiguration: (value) =>
-			setState((prevState) => ({
-				...prevState,
-				apiConfiguration: {
-					...prevState.apiConfiguration,
-					...value,
-				},
-			})),
+		setApiConfiguration,
 		setCustomInstructions: (value) => setState((prevState) => ({ ...prevState, customInstructions: value })),
 		setAlwaysAllowReadOnly: (value) => setState((prevState) => ({ ...prevState, alwaysAllowReadOnly: value })),
 		setAlwaysAllowReadOnlyOutsideWorkspace: (value) =>

webview-ui/src/i18n/locales/ca/settings.json

@@ -121,7 +121,8 @@
 			"hint": "Si us plau, torneu a obrir la configuració per veure els models més recents.",
 			"loading": "Actualitzant models...",
 			"success": "Models actualitzats correctament.",
-			"error": "No s'han pogut actualitzar els models. Si us plau, comproveu la vostra configuració i torneu-ho a provar."
+			"error": "No s'han pogut actualitzar els models. Si us plau, comproveu la vostra configuració i torneu-ho a provar.",
+			"missingConfig": "Falta la clau API o l'URL base. Si us plau, proporcioneu ambdós per actualitzar els models."
 		},
 		"getRequestyApiKey": "Obtenir clau API de Requesty",
 		"openRouterTransformsText": "Comprimir prompts i cadenes de missatges a la mida del context (<a>Transformacions d'OpenRouter</a>)",

webview-ui/src/i18n/locales/de/settings.json

@@ -121,7 +121,8 @@
 			"hint": "Bitte öffne die Einstellungen erneut, um die neuesten Modelle zu sehen.",
 			"loading": "Modelle werden aktualisiert...",
 			"success": "Modelle erfolgreich aktualisiert.",
-			"error": "Fehler beim Aktualisieren der Modelle. Bitte überprüfe deine Konfiguration und versuche es erneut."
+			"error": "Fehler beim Aktualisieren der Modelle. Bitte überprüfe deine Konfiguration und versuche es erneut.",
+			"missingConfig": "API-Schlüssel oder Basis-URL fehlt. Bitte gib beides an, um Modelle zu aktualisieren."
 		},
 		"getRequestyApiKey": "Requesty API-Schlüssel erhalten",
 		"openRouterTransformsText": "Prompts und Nachrichtenketten auf Kontextgröße komprimieren (<a>OpenRouter Transformationen</a>)",

webview-ui/src/i18n/locales/en/settings.json

@@ -121,7 +121,8 @@
 			"hint": "Please reopen the settings to see the latest models.",
 			"loading": "Refreshing models...",
 			"success": "Models refreshed successfully.",
-			"error": "Failed to refresh models. Please check your configuration and try again."
+			"error": "Failed to refresh models. Please check your configuration and try again.",
+			"missingConfig": "API key or base URL missing. Please provide both to refresh models."
 		},
 		"getRequestyApiKey": "Get Requesty API Key",
 		"openRouterTransformsText": "Compress prompts and message chains to the context size (<a>OpenRouter Transforms</a>)",

webview-ui/src/i18n/locales/es/settings.json

@@ -121,7 +121,8 @@
 			"hint": "Por favor, vuelve a abrir la configuración para ver los modelos más recientes.",
 			"loading": "Actualizando modelos...",
 			"success": "Modelos actualizados correctamente.",
-			"error": "Error al actualizar los modelos. Por favor, verifica tu configuración e inténtalo de nuevo."
+			"error": "Error al actualizar los modelos. Por favor, verifica tu configuración e inténtalo de nuevo.",
+			"missingConfig": "Falta la clave API o la URL base. Por favor, proporciona ambos para actualizar los modelos."
 		},
 		"getRequestyApiKey": "Obtener clave API de Requesty",
 		"openRouterTransformsText": "Comprimir prompts y cadenas de mensajes al tamaño del contexto (<a>Transformaciones de OpenRouter</a>)",

webview-ui/src/i18n/locales/fr/settings.json

@@ -121,7 +121,8 @@
 			"hint": "Veuillez rouvrir les paramètres pour voir les modèles les plus récents.",
 			"loading": "Actualisation des modèles...",
 			"success": "Modèles actualisés avec succès.",
-			"error": "Échec de l'actualisation des modèles. Veuillez vérifier votre configuration et réessayer."
+			"error": "Échec de l'actualisation des modèles. Veuillez vérifier votre configuration et réessayer.",
+			"missingConfig": "Clé API ou URL de base manquante. Veuillez fournir les deux pour actualiser les modèles."
 		},
 		"getRequestyApiKey": "Obtenir la clé API Requesty",
 		"openRouterTransformsText": "Compresser les prompts et chaînes de messages à la taille du contexte (<a>Transformations OpenRouter</a>)",