From f39eaa14ffb774259d2bf1e8129ffc7cb05cf70b Mon Sep 17 00:00:00 2001
From: sam hoang <samhv.ict@gmail.com>
Date: Wed, 8 Jan 2025 07:53:56 +0700
Subject: [PATCH] fix: sync model picker search terms with selected models

Added useEffect hooks to GlamaModelPicker, OpenAiModelPicker, and OpenRouterModelPicker components to ensure the search term stays synchronized with the selected model ID from apiConfiguration. This prevents the search term from getting out of sync when the model is changed.
---
 webview-ui/src/components/settings/GlamaModelPicker.tsx  | 9 +++++++++
 webview-ui/src/components/settings/OpenAiModelPicker.tsx | 8 ++++++++
 .../src/components/settings/OpenRouterModelPicker.tsx    | 8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/webview-ui/src/components/settings/GlamaModelPicker.tsx b/webview-ui/src/components/settings/GlamaModelPicker.tsx
index 1b6164d27d..2df9984d4b 100644
--- a/webview-ui/src/components/settings/GlamaModelPicker.tsx
+++ b/webview-ui/src/components/settings/GlamaModelPicker.tsx
@@ -37,6 +37,15 @@ const GlamaModelPicker: React.FC = () => {
 		return normalizeApiConfiguration(apiConfiguration)
 	}, [apiConfiguration])
 
+
+	useEffect(() => {
+		if (apiConfiguration?.glamaModelId) {
+			if (apiConfiguration?.glamaModelId !== searchTerm) {
+				setSearchTerm(apiConfiguration?.glamaModelId)
+			}
+		}
+	}, [apiConfiguration, searchTerm])
+
 	useMount(() => {
 		vscode.postMessage({ type: "refreshGlamaModels" })
 	})
diff --git a/webview-ui/src/components/settings/OpenAiModelPicker.tsx b/webview-ui/src/components/settings/OpenAiModelPicker.tsx
index 79792446fa..cb8a6a47f8 100644
--- a/webview-ui/src/components/settings/OpenAiModelPicker.tsx
+++ b/webview-ui/src/components/settings/OpenAiModelPicker.tsx
@@ -28,6 +28,14 @@ const OpenAiModelPicker: React.FC = () => {
 		setSearchTerm(newModelId)
 	}
 
+	useEffect(() => {
+		if (apiConfiguration?.openAiModelId) {
+			if (apiConfiguration?.openAiModelId !== searchTerm) {
+				setSearchTerm(apiConfiguration?.openAiModelId)
+			}
+		}
+	}, [apiConfiguration, searchTerm])
+
 	useEffect(() => {
 		if (!apiConfiguration?.openAiBaseUrl || !apiConfiguration?.openAiApiKey) {
 			return
diff --git a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
index 10086e7bf4..df2883ce12 100644
--- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
+++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
@@ -37,6 +37,14 @@ const OpenRouterModelPicker: React.FC = () => {
 		return normalizeApiConfiguration(apiConfiguration)
 	}, [apiConfiguration])
 
+	useEffect(() => {
+		if (apiConfiguration?.openRouterModelId) {
+			if (apiConfiguration?.openRouterModelId !== searchTerm) {
+				setSearchTerm(apiConfiguration?.openRouterModelId)
+			}
+		}
+	}, [apiConfiguration, searchTerm])
+
 	useMount(() => {
 		vscode.postMessage({ type: "refreshOpenRouterModels" })
 	})