diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx index d1a0d48b0ce1ba85790ab82fdb028b75ff6f2911..2b19dd98af46ac401058c895c418f82ff0dce34a 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> ))}