Fix: ElevenLabs API Key Not Persisting #6557
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| import { useState, useEffect, useCallback } from 'react'; | ||
| import { Input } from '../../ui/input'; | ||
| import { Button } from '../../ui/button'; | ||
| import { useConfig } from '../../ConfigContext'; | ||
| import { ELEVENLABS_API_KEY, isSecretKeyConfigured } from '../../../hooks/dictationConstants'; | ||
| import { setElevenLabsKeyCache } from '../../../hooks/useDictationSettings'; | ||
|
|
@@ -8,71 +9,75 @@ export const ElevenLabsKeyInput = () => { | |
| const [elevenLabsApiKey, setElevenLabsApiKey] = useState(''); | ||
| const [isLoadingKey, setIsLoadingKey] = useState(false); | ||
| const [hasElevenLabsKey, setHasElevenLabsKey] = useState(false); | ||
| const [validationError, setValidationError] = useState(''); | ||
| const [isEditing, setIsEditing] = useState(false); | ||
| const { upsert, read, remove } = useConfig(); | ||
|
|
||
| const loadKey = useCallback(async () => { | ||
| setIsLoadingKey(true); | ||
| try { | ||
| const response = await read(ELEVENLABS_API_KEY, true); | ||
| const hasKey = isSecretKeyConfigured(response); | ||
| setHasElevenLabsKey(hasKey); | ||
| setElevenLabsKeyCache(hasKey); | ||
| } catch (error) { | ||
| console.error(error); | ||
| setElevenLabsKeyCache(false); | ||
| } finally { | ||
| setIsLoadingKey(false); | ||
| } | ||
| }, [read]); | ||
|
|
||
| useEffect(() => { | ||
| loadKey(); | ||
| }, [loadKey]); | ||
|
|
||
| const handleElevenLabsKeyChange = (key: string) => { | ||
| setElevenLabsApiKey(key); | ||
| if (validationError) { | ||
| setValidationError(''); | ||
| } | ||
| }; | ||
|
|
||
| const handleSave = async () => { | ||
| try { | ||
| const trimmedKey = elevenLabsApiKey.trim(); | ||
|
|
||
| if (!trimmedKey) { | ||
| setValidationError('API key is required'); | ||
| return; | ||
| } | ||
|
|
||
| await upsert(ELEVENLABS_API_KEY, trimmedKey, true); | ||
| setElevenLabsApiKey(''); | ||
| setValidationError(''); | ||
| setIsEditing(false); | ||
| await loadKey(); | ||
|
Collaborator
There was a problem hiding this comment. Hi @Abhijay007 just curious why we hav to loadKey again in the upsert and remove? It added an extra call to the server side and it seems unnecessary? Shall we just update the cache and hasElevenLabsKey instead of the additional call?
Collaborator
Author
There was a problem hiding this comment. it was mentioned here by copoilt : #6557 (comment) so I thought of implementing it |
||
| } catch (error) { | ||
| console.error(error); | ||
| setValidationError('Failed to save API key'); | ||
| } | ||
| }; | ||
Abhijay007 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const handleRemove = async () => { | ||
| try { | ||
| await remove(ELEVENLABS_API_KEY, true); | ||
| await loadKey(); | ||
| setElevenLabsApiKey(''); | ||
| setValidationError(''); | ||
| setIsEditing(false); | ||
| } catch (error) { | ||
| console.error(error); | ||
| setValidationError('Failed to remove API key'); | ||
| } | ||
| }; | ||
|
|
||
| const handleCancel = () => { | ||
| setElevenLabsApiKey(''); | ||
| setValidationError(''); | ||
| setIsEditing(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="py-2 px-2 bg-background-subtle rounded-lg"> | ||
| <div className="mb-2"> | ||
|
|
@@ -82,17 +87,42 @@ export const ElevenLabsKeyInput = () => { | |
| {hasElevenLabsKey && <span className="text-green-600 ml-2">(Configured)</span>} | ||
| </p> | ||
| </div> | ||
|
|
||
| {!isEditing ? ( | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={() => setIsEditing(true)} | ||
| disabled={isLoadingKey} | ||
| > | ||
| {hasElevenLabsKey ? 'Update API Key' : 'Add API Key'} | ||
| </Button> | ||
| ) : ( | ||
| <div className="space-y-2"> | ||
| <Input | ||
| type="password" | ||
| value={elevenLabsApiKey} | ||
| onChange={(e) => handleElevenLabsKeyChange(e.target.value)} | ||
| placeholder="Enter your ElevenLabs API key" | ||
| className="max-w-md" | ||
| autoFocus | ||
| /> | ||
| {validationError && <p className="text-xs text-red-600 mt-1">{validationError}</p>} | ||
| <div className="flex gap-2"> | ||
| <Button size="sm" onClick={handleSave}> | ||
| Save | ||
| </Button> | ||
| <Button variant="outline" size="sm" onClick={handleCancel}> | ||
| Cancel | ||
| </Button> | ||
| {hasElevenLabsKey && ( | ||
| <Button variant="destructive" size="sm" onClick={handleRemove}> | ||
| Remove | ||
| </Button> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
frankly, this whole module feels rather complicated. aren't we just setting an API key? there's validation code, but all it seems to do is check that the API key is set. or that the server failed but that's not very useful.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@lifeizhou-ap , @DOsinga should I consider this update in this PR or make another one for this refactor ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @Abhijay007,
Let's make another PR for this refactor.