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 1b6164d..2df9984 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 7979244..cb8a6a4 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 10086e7..df2883c 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" })
 	})