From 0deb0a01c68d97d4da4885c0239dfbd713e33bf4 Mon Sep 17 00:00:00 2001
From: Timothy Carambat <rambat1010@gmail.com>
Date: Fri, 13 Sep 2024 18:00:28 -0700
Subject: [PATCH] Patch 11Labs selection UI bug (#2284)

* Patch 11Labs selection UI bug

* remove log
---
 .../TextToSpeech/ElevenLabsOptions/index.jsx      | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
index d1a0d48b0..2b19dd98a 100644
--- a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
@@ -3,7 +3,9 @@ import System from "@/models/system";
 
 export default function ElevenLabsOptions({ settings }) {
   const [inputValue, setInputValue] = useState(settings?.TTSElevenLabsKey);
-  const [openAIKey, setOpenAIKey] = useState(settings?.TTSElevenLabsKey);
+  const [elevenLabsKey, setElevenLabsKey] = useState(
+    settings?.TTSElevenLabsKey
+  );
 
   return (
     <div className="flex gap-x-4">
@@ -21,11 +23,11 @@ export default function ElevenLabsOptions({ settings }) {
           autoComplete="off"
           spellCheck={false}
           onChange={(e) => setInputValue(e.target.value)}
-          onBlur={() => setOpenAIKey(inputValue)}
+          onBlur={() => setElevenLabsKey(inputValue)}
         />
       </div>
       {!settings?.credentialsOnly && (
-        <ElevenLabsModelSelection settings={settings} apiKey={openAIKey} />
+        <ElevenLabsModelSelection settings={settings} apiKey={elevenLabsKey} />
       )}
     </div>
   );
@@ -84,7 +86,6 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
       <select
         name="TTSElevenLabsVoiceModel"
         required={true}
-        defaultValue={settings?.TTSElevenLabsVoiceModel}
         className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
@@ -92,7 +93,11 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
           .map((organization) => (
             <optgroup key={organization} label={organization}>
               {groupedModels[organization].map((model) => (
-                <option key={model.id} value={model.id}>
+                <option
+                  key={model.id}
+                  value={model.id}
+                  selected={model.id === settings?.TTSElevenLabsVoiceModel}
+                >
                   {model.name}
                 </option>
               ))}