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