refactor: updated elevenLabs API module and remove button UX (#6781)
Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
This commit is contained in:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user