From 01fc683d321fd1d338e50d865d7198c44a0bc455 Mon Sep 17 00:00:00 2001
From: WanQuanXie <i2cherry941219@gmail.com>
Date: Tue, 7 May 2024 06:35:39 +0800
Subject: [PATCH] fix(SettingDialog): use `value` instead of `selected` props
 in <select>

avoid the browser console warning in devServer mode
---
 ui/components/SettingsDialog.tsx | 36 +++++++++-----------------------
 1 file changed, 10 insertions(+), 26 deletions(-)

diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index 634a163..be94db2 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -170,6 +170,7 @@ const SettingsDialog = ({
                           Chat model Provider
                         </p>
                         <select
+                          value={selectedChatModelProvider ?? undefined}
                           onChange={(e) => {
                             setSelectedChatModelProvider(e.target.value);
                             setSelectedChatModel(
@@ -180,13 +181,7 @@ const SettingsDialog = ({
                         >
                           {Object.keys(config.chatModelProviders).map(
                             (provider) => (
-                              <option
-                                key={provider}
-                                value={provider}
-                                selected={
-                                  provider === selectedChatModelProvider
-                                }
-                              >
+                              <option key={provider} value={provider}>
                                 {provider.charAt(0).toUpperCase() +
                                   provider.slice(1)}
                               </option>
@@ -200,6 +195,7 @@ const SettingsDialog = ({
                         <div className="flex flex-col space-y-1">
                           <p className="text-white/70 text-sm">Chat Model</p>
                           <select
+                            value={selectedChatModel ?? undefined}
                             onChange={(e) =>
                               setSelectedChatModel(e.target.value)
                             }
@@ -214,21 +210,17 @@ const SettingsDialog = ({
                                 config.chatModelProviders[
                                   selectedChatModelProvider
                                 ].map((model) => (
-                                  <option
-                                    key={model}
-                                    value={model}
-                                    selected={model === selectedChatModel}
-                                  >
+                                  <option key={model} value={model}>
                                     {model}
                                   </option>
                                 ))
                               ) : (
-                                <option value="" disabled selected>
+                                <option value="" disabled>
                                   No models available
                                 </option>
                               )
                             ) : (
-                              <option value="" disabled selected>
+                              <option value="" disabled>
                                 Invalid provider, please check backend logs
                               </option>
                             )}
@@ -287,6 +279,7 @@ const SettingsDialog = ({
                           Embedding model Provider
                         </p>
                         <select
+                          value={selectedEmbeddingModelProvider ?? undefined}
                           onChange={(e) => {
                             setSelectedEmbeddingModelProvider(e.target.value);
                             setSelectedEmbeddingModel(
@@ -297,13 +290,7 @@ const SettingsDialog = ({
                         >
                           {Object.keys(config.embeddingModelProviders).map(
                             (provider) => (
-                              <option
-                                key={provider}
-                                value={provider}
-                                selected={
-                                  provider === selectedEmbeddingModelProvider
-                                }
-                              >
+                              <option key={provider} value={provider}>
                                 {provider.charAt(0).toUpperCase() +
                                   provider.slice(1)}
                               </option>
@@ -316,6 +303,7 @@ const SettingsDialog = ({
                       <div className="flex flex-col space-y-1">
                         <p className="text-white/70 text-sm">Embedding Model</p>
                         <select
+                          value={selectedEmbeddingModel ?? undefined}
                           onChange={(e) =>
                             setSelectedEmbeddingModel(e.target.value)
                           }
@@ -330,11 +318,7 @@ const SettingsDialog = ({
                               config.embeddingModelProviders[
                                 selectedEmbeddingModelProvider
                               ].map((model) => (
-                                <option
-                                  key={model}
-                                  value={model}
-                                  selected={model === selectedEmbeddingModel}
-                                >
+                                <option key={model} value={model}>
                                   {model}
                                 </option>
                               ))