refactor: unify model picker components

src/core/webview/ClineProvider.ts

@@ -1834,6 +1834,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			if (!apiKey) {
 				apiKey = (await this.getSecret("requestyApiKey")) as string
 			}
+
+			if (!apiKey) {
+				this.outputChannel.appendLine("No Requesty API key found")
+				return models
+			}
+
 			if (apiKey) {
 				config["headers"] = { Authorization: `Bearer ${apiKey}` }
 			}
@@ -1884,7 +1890,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				this.outputChannel.appendLine("Invalid response from Requesty API")
 			}
 			await fs.writeFile(requestyModelsFilePath, JSON.stringify(models))
-			this.outputChannel.appendLine(`Requesty models fetched and saved: ${JSON.stringify(models, null, 2)}`)
 		} catch (error) {
 			this.outputChannel.appendLine(
 				`Error fetching Requesty models: ${JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}`,

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

@@ -251,7 +251,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.requestyApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onInput={handleInputChange("requestyApiKey")}
+						onBlur={handleInputChange("requestyApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>Requesty API Key</span>
 					</VSCodeTextField>

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

@@ -1,6 +1,6 @@
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import debounce from "debounce"
-import { useMemo, useState, useCallback, useEffect } from "react"
+import { useMemo, useState, useCallback, useEffect, useRef } from "react"
 import { useMount } from "react-use"
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 
@@ -23,15 +23,24 @@ import { vscode } from "../../utils/vscode"
 import { normalizeApiConfiguration } from "./ApiOptions"
 import { ModelInfoView } from "./ModelInfoView"
 
-interface ModelPickerProps {
+type ModelProvider = "glama" | "openRouter" | "unbound" | "requesty" | "openAi"
+
+type ModelKeys<T extends ModelProvider> = `${T}Models`
+type ConfigKeys<T extends ModelProvider> = `${T}ModelId`
+type InfoKeys<T extends ModelProvider> = `${T}ModelInfo`
+type RefreshMessageType<T extends ModelProvider> = `refresh${Capitalize<T>}Models`
+
+interface ModelPickerProps<T extends ModelProvider = ModelProvider> {
 	defaultModelId: string
-	modelsKey: "glamaModels" | "openRouterModels" | "unboundModels" | "requestyModels"
-	configKey: "glamaModelId" | "openRouterModelId" | "unboundModelId" | "requestyModelId"
-	infoKey: "glamaModelInfo" | "openRouterModelInfo" | "unboundModelInfo" | "requestyModelInfo"
-	refreshMessageType: "refreshGlamaModels" | "refreshOpenRouterModels" | "refreshUnboundModels" | "refreshRequestyModels"
+	modelsKey: ModelKeys<T>
+	configKey: ConfigKeys<T>
+	infoKey: InfoKeys<T>
+	refreshMessageType: RefreshMessageType<T>
+	refreshValues?: Record<string, any>
 	serviceName: string
 	serviceUrl: string
 	recommendedModel: string
+	allowCustomModel?: boolean
 }
 
 export const ModelPicker = ({
@@ -40,25 +49,51 @@ export const ModelPicker = ({
 	configKey,
 	infoKey,
 	refreshMessageType,
+	refreshValues,
 	serviceName,
 	serviceUrl,
 	recommendedModel,
+	allowCustomModel = false,
 }: ModelPickerProps) => {
+	const [customModelId, setCustomModelId] = useState("")
+	const [isCustomModel, setIsCustomModel] = useState(false)
 	const [open, setOpen] = useState(false)
 	const [value, setValue] = useState(defaultModelId)
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
+	const prevRefreshValuesRef = useRef<Record<string, any> | undefined>()
 
-	const { apiConfiguration, setApiConfiguration, [modelsKey]: models, onUpdateApiConfig } = useExtensionState()
-	const modelIds = useMemo(() => Object.keys(models).sort((a, b) => a.localeCompare(b)), [models])
+	const { apiConfiguration, [modelsKey]: models, onUpdateApiConfig, setApiConfiguration } = useExtensionState()
+
+	const modelIds = useMemo(
+		() => (Array.isArray(models) ? models : Object.keys(models)).sort((a, b) => a.localeCompare(b)),
+		[models],
+	)
 
 	const { selectedModelId, selectedModelInfo } = useMemo(
 		() => normalizeApiConfiguration(apiConfiguration),
 		[apiConfiguration],
 	)
 
+	const onSelectCustomModel = useCallback(
+		(modelId: string) => {
+			setCustomModelId(modelId)
+			const modelInfo = { id: modelId }
+			const apiConfig = { ...apiConfiguration, [configKey]: modelId, [infoKey]: modelInfo }
+			setApiConfiguration(apiConfig)
+			onUpdateApiConfig(apiConfig)
+			setValue(modelId)
+			setOpen(false)
+			setIsCustomModel(false)
+		},
+		[apiConfiguration, configKey, infoKey, onUpdateApiConfig, setApiConfiguration],
+	)
+
 	const onSelect = useCallback(
 		(modelId: string) => {
-			const apiConfig = { ...apiConfiguration, [configKey]: modelId, [infoKey]: models[modelId] }
+			const modelInfo = Array.isArray(models)
+				? { id: modelId } // For OpenAI models which are just strings
+				: models[modelId] // For other models that have full info objects
+			const apiConfig = { ...apiConfiguration, [configKey]: modelId, [infoKey]: modelInfo }
 			setApiConfiguration(apiConfig)
 			onUpdateApiConfig(apiConfig)
 			setValue(modelId)
@@ -67,16 +102,42 @@ export const ModelPicker = ({
 		[apiConfiguration, configKey, infoKey, models, onUpdateApiConfig, setApiConfiguration],
 	)
 
-	const debouncedRefreshModels = useMemo(
-		() => debounce(() => vscode.postMessage({ type: refreshMessageType }), 50),
-		[refreshMessageType],
-	)
+	const debouncedRefreshModels = useMemo(() => {
+		return debounce(() => {
+			const message = refreshValues
+				? { type: refreshMessageType, values: refreshValues }
+				: { type: refreshMessageType }
+			vscode.postMessage(message)
+		}, 100)
+	}, [refreshMessageType, refreshValues])
 
 	useMount(() => {
 		debouncedRefreshModels()
 		return () => debouncedRefreshModels.clear()
 	})
 
+	useEffect(() => {
+		if (!refreshValues) {
+			prevRefreshValuesRef.current = undefined
+			return
+		}
+
+		// Check if all values in refreshValues are truthy
+		if (Object.values(refreshValues).some((value) => !value)) {
+			prevRefreshValuesRef.current = undefined
+			return
+		}
+
+		// Compare with previous values
+		const prevValues = prevRefreshValuesRef.current
+		if (prevValues && JSON.stringify(prevValues) === JSON.stringify(refreshValues)) {
+			return
+		}
+
+		prevRefreshValuesRef.current = refreshValues
+		debouncedRefreshModels()
+	}, [debouncedRefreshModels, refreshValues])
+
 	useEffect(() => setValue(selectedModelId), [selectedModelId])
 
 	return (
@@ -104,6 +165,17 @@ export const ModelPicker = ({
 									</CommandItem>
 								))}
 							</CommandGroup>
+							{allowCustomModel && (
+								<CommandGroup heading="Custom">
+									<CommandItem
+										onSelect={() => {
+											setIsCustomModel(true)
+											setOpen(false)
+										}}>
+										+ Add custom model
+									</CommandItem>
+								</CommandGroup>
+							)}
 						</CommandList>
 					</Command>
 				</PopoverContent>
@@ -125,6 +197,28 @@ export const ModelPicker = ({
 				<VSCodeLink onClick={() => onSelect(recommendedModel)}>{recommendedModel}.</VSCodeLink>
 				You can also try searching "free" for no-cost options currently available.
 			</p>
+			{allowCustomModel && isCustomModel && (
+				<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+					<div className="bg-[var(--vscode-editor-background)] p-6 rounded-lg w-96">
+						<h3 className="text-lg font-semibold mb-4">Add Custom Model</h3>
+						<input
+							type="text"
+							className="w-full p-2 mb-4 bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border border-[var(--vscode-input-border)] rounded"
+							placeholder="Enter model ID"
+							value={customModelId}
+							onChange={(e) => setCustomModelId(e.target.value)}
+						/>
+						<div className="flex justify-end gap-2">
+							<Button variant="secondary" onClick={() => setIsCustomModel(false)}>
+								Cancel
+							</Button>
+							<Button onClick={() => onSelectCustomModel(customModelId)} disabled={!customModelId.trim()}>
+								Add
+							</Button>
+						</div>
+					</div>
+				</div>
+			)}
 		</>
 	)
 }