fix: config manager not update when model, key, another optionn...

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

@@ -46,11 +46,10 @@ interface ApiOptionsProps {
 	showModelOptions: boolean
 	apiErrorMessage?: string
 	modelIdErrorMessage?: string
-	onSelectProvider: (apiProvider: any) => void
 }
 
-const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, onSelectProvider }: ApiOptionsProps) => {
+const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) => {
-	const { apiConfiguration, setApiConfiguration, uriScheme } = useExtensionState()
+	const { apiConfiguration, setApiConfiguration, uriScheme, onUpdateApiConfig } = useExtensionState()
 	const [ollamaModels, setOllamaModels] = useState<string[]>([])
 	const [lmStudioModels, setLmStudioModels] = useState<string[]>([])
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
@@ -58,7 +57,9 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, on
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
 
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
-		setApiConfiguration({ ...apiConfiguration, [field]: event.target.value })
+		const apiConfig = { ...apiConfiguration, [field]: event.target.value }
+		onUpdateApiConfig(apiConfig)
+		setApiConfiguration(apiConfig)
 	}
 
 	const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(() => {
@@ -131,10 +132,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, on
 				<VSCodeDropdown
 					id="api-provider"
 					value={selectedProvider}
-					onChange={(event: any) => {
+					onChange={handleInputChange("apiProvider")}
-						onSelectProvider(event.target.value);
-						handleInputChange("apiProvider")(event);
-					}}
 					style={{ minWidth: 130, position: "relative", zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX + 1 }}>
 					<VSCodeOption value="openrouter">OpenRouter</VSCodeOption>
 					<VSCodeOption value="anthropic">Anthropic</VSCodeOption>

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

@@ -11,7 +11,7 @@ import { highlight } from "../history/HistoryView"
 import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 
 const GlamaModelPicker: React.FC = () => {
-	const { apiConfiguration, setApiConfiguration, glamaModels } = useExtensionState()
+	const { apiConfiguration, setApiConfiguration, glamaModels, onUpdateApiConfig } = useExtensionState()
 	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.glamaModelId || glamaDefaultModelId)
 	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
 	const [selectedIndex, setSelectedIndex] = useState(-1)
@@ -22,11 +22,14 @@ const GlamaModelPicker: React.FC = () => {
 
 	const handleModelChange = (newModelId: string) => {
 		// could be setting invalid model id/undefined info but validation will catch it
-		setApiConfiguration({
+		const apiConfig = {
 			...apiConfiguration,
 			glamaModelId: newModelId,
 			glamaModelInfo: glamaModels[newModelId],
-		})
+		}
+		setApiConfiguration(apiConfig)
+		onUpdateApiConfig(apiConfig)
+
 		setSearchTerm(newModelId)
 	}
 

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

@@ -8,7 +8,7 @@ import { vscode } from "../../utils/vscode"
 import { highlight } from "../history/HistoryView"
 
 const OpenAiModelPicker: React.FC = () => {
-	const { apiConfiguration, setApiConfiguration, openAiModels } = useExtensionState()
+	const { apiConfiguration, setApiConfiguration, openAiModels, onUpdateApiConfig } = useExtensionState()
 	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openAiModelId || "")
 	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
 	const [selectedIndex, setSelectedIndex] = useState(-1)
@@ -18,10 +18,13 @@ const OpenAiModelPicker: React.FC = () => {
 
 	const handleModelChange = (newModelId: string) => {
 		// could be setting invalid model id/undefined info but validation will catch it
-		setApiConfiguration({
+		const apiConfig = {
 			...apiConfiguration,
 			openAiModelId: newModelId,
-		})
+		}
+		setApiConfiguration(apiConfig)
+		onUpdateApiConfig(apiConfig)
+
 		setSearchTerm(newModelId)
 	}
 

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

@@ -11,7 +11,7 @@ import { highlight } from "../history/HistoryView"
 import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 
 const OpenRouterModelPicker: React.FC = () => {
-	const { apiConfiguration, setApiConfiguration, openRouterModels } = useExtensionState()
+	const { apiConfiguration, setApiConfiguration, openRouterModels, onUpdateApiConfig } = useExtensionState()
 	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openRouterModelId || openRouterDefaultModelId)
 	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
 	const [selectedIndex, setSelectedIndex] = useState(-1)
@@ -22,11 +22,14 @@ const OpenRouterModelPicker: React.FC = () => {
 
 	const handleModelChange = (newModelId: string) => {
 		// could be setting invalid model id/undefined info but validation will catch it
-		setApiConfiguration({
+		const apiConfig = {
 			...apiConfiguration,
 			openRouterModelId: newModelId,
 			openRouterModelInfo: openRouterModels[newModelId],
-		})
+		}
+
+		setApiConfiguration(apiConfig)
+		onUpdateApiConfig(apiConfig)
 		setSearchTerm(newModelId)
 	}
 

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

@@ -199,16 +199,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						showModelOptions={true}
 						apiErrorMessage={apiErrorMessage}
 						modelIdErrorMessage={modelIdErrorMessage}
-						onSelectProvider={(apiProvider: any) => {
-							vscode.postMessage({
-								type: "upsertApiConfiguration",
-								text: currentApiConfigName,
-								apiConfiguration: {
-									...apiConfiguration,
-									apiProvider: apiProvider,
-								}
-							})
-						}}
 					/>
 				</div>
 

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

@@ -38,7 +38,7 @@ const WelcomeView = () => {
 			<b>To get started, this extension needs an API provider for Claude 3.5 Sonnet.</b>
 
 			<div style={{ marginTop: "10px" }}>
-				<ApiOptions showModelOptions={false} onSelectProvider={() => {}} />
+				<ApiOptions showModelOptions={false} />
 				<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton} style={{ marginTop: "3px" }}>
 					Let's go!
 				</VSCodeButton>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -55,6 +55,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setRequestDelaySeconds: (value: number) => void
 	setCurrentApiConfigName: (value: string) => void
 	setListApiConfigMeta: (value: ApiConfigMeta[]) => void
+	onUpdateApiConfig: (apiConfig: ApiConfiguration) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -98,6 +99,14 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 
 	const setListApiConfigMeta = useCallback((value: ApiConfigMeta[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })), [setState])
 
+	const onUpdateApiConfig = useCallback((apiConfig: ApiConfiguration) => {
+		vscode.postMessage({
+			type: "upsertApiConfiguration",
+			text: state.currentApiConfigName,
+			apiConfiguration: apiConfig,
+		})
+	}, [state])
+
 	const handleMessage = useCallback((event: MessageEvent) => {
 		const message: ExtensionMessage = event.data
 		switch (message.type) {
@@ -210,7 +219,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setAlwaysApproveResubmit: (value) => setState((prevState) => ({ ...prevState, alwaysApproveResubmit: value })),
 		setRequestDelaySeconds: (value) => setState((prevState) => ({ ...prevState, requestDelaySeconds: value })),
 		setCurrentApiConfigName: (value) => setState((prevState) => ({ ...prevState, currentApiConfigName: value })),
-		setListApiConfigMeta
+		setListApiConfigMeta,
+		onUpdateApiConfig
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>