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>
))}
--
GitLab