refactor: updated elevenLabs API module and remove button UX (#6781)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
This commit is contained in:
Abhijay Jain
2026-02-11 16:27:51 +05:30
committed by GitHub
parent d138c88d8d
commit 4571c3a41c
@@ -15,7 +15,6 @@ export const DictationSettings = () => {
); );
const [apiKey, setApiKey] = useState(''); const [apiKey, setApiKey] = useState('');
const [isEditingKey, setIsEditingKey] = useState(false); const [isEditingKey, setIsEditingKey] = useState(false);
const [keyValidationError, setKeyValidationError] = useState('');
const { read, upsert, remove } = useConfig(); const { read, upsert, remove } = useConfig();
useEffect(() => { useEffect(() => {
@@ -59,24 +58,15 @@ export const DictationSettings = () => {
if (!providerConfig || providerConfig.uses_provider_config) return; if (!providerConfig || providerConfig.uses_provider_config) return;
const trimmedKey = apiKey.trim(); const trimmedKey = apiKey.trim();
if (!trimmedKey) { if (!trimmedKey) return;
setKeyValidationError('API key is required');
return;
}
try { const keyName = providerConfig.config_key!;
const keyName = providerConfig.config_key!; await upsert(keyName, trimmedKey, true);
await upsert(keyName, trimmedKey, true); setApiKey('');
setApiKey(''); setIsEditingKey(false);
setKeyValidationError('');
setIsEditingKey(false);
const audioConfig = await getDictationConfig(); const audioConfig = await getDictationConfig();
setProviderStatuses(audioConfig.data || {}); setProviderStatuses(audioConfig.data || {});
} catch (error) {
console.error('Error saving API key:', error);
setKeyValidationError('Failed to save API key');
}
}; };
const handleRemoveKey = async () => { const handleRemoveKey = async () => {
@@ -84,24 +74,17 @@ export const DictationSettings = () => {
const providerConfig = providerStatuses[provider]; const providerConfig = providerStatuses[provider];
if (!providerConfig || providerConfig.uses_provider_config) return; if (!providerConfig || providerConfig.uses_provider_config) return;
try { const keyName = providerConfig.config_key!;
const keyName = providerConfig.config_key!; await remove(keyName, true);
await remove(keyName, true); setApiKey('');
setApiKey(''); setIsEditingKey(false);
setKeyValidationError('');
setIsEditingKey(false);
const audioConfig = await getDictationConfig(); const audioConfig = await getDictationConfig();
setProviderStatuses(audioConfig.data || {}); setProviderStatuses(audioConfig.data || {});
} catch (error) {
console.error('Error removing API key:', error);
setKeyValidationError('Failed to remove API key');
}
}; };
const handleCancelEdit = () => { const handleCancelEdit = () => {
setApiKey(''); setApiKey('');
setKeyValidationError('');
setIsEditingKey(false); setIsEditingKey(false);
}; };
@@ -193,25 +176,26 @@ export const DictationSettings = () => {
</div> </div>
{!isEditingKey ? ( {!isEditingKey ? (
<Button variant="outline" size="sm" onClick={() => setIsEditingKey(true)}> <div className="flex gap-2 flex-wrap">
{providerStatuses[provider]?.configured ? 'Update API Key' : 'Add API Key'} <Button variant="outline" size="sm" onClick={() => setIsEditingKey(true)}>
</Button> {providerStatuses[provider]?.configured ? 'Update API Key' : 'Add API Key'}
</Button>
{providerStatuses[provider]?.configured && (
<Button variant="destructive" size="sm" onClick={handleRemoveKey}>
Remove API Key
</Button>
)}
</div>
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
<Input <Input
type="password" type="password"
value={apiKey} value={apiKey}
onChange={(e) => { onChange={(e) => setApiKey(e.target.value)}
setApiKey(e.target.value);
if (keyValidationError) setKeyValidationError('');
}}
placeholder="Enter your API key" placeholder="Enter your API key"
className="max-w-md" className="max-w-md"
autoFocus autoFocus
/> />
{keyValidationError && (
<p className="text-xs text-red-600 mt-1">{keyValidationError}</p>
)}
<div className="flex gap-2"> <div className="flex gap-2">
<Button size="sm" onClick={handleSaveKey}> <Button size="sm" onClick={handleSaveKey}>
Save Save
@@ -219,11 +203,6 @@ export const DictationSettings = () => {
<Button variant="outline" size="sm" onClick={handleCancelEdit}> <Button variant="outline" size="sm" onClick={handleCancelEdit}>
Cancel Cancel
</Button> </Button>
{providerStatuses[provider]?.configured && (
<Button variant="destructive" size="sm" onClick={handleRemoveKey}>
Remove
</Button>
)}
</div> </div>
</div> </div>
)} )}