Lifei Zhou
99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import { useState, useEffect, useRef } from 'react';
|
|
import { Input } from '../../ui/input';
|
|
import { useConfig } from '../../ConfigContext';
|
|
import { ELEVENLABS_API_KEY, isSecretKeyConfigured } from '../../../hooks/dictationConstants';
|
|
import { setElevenLabsKeyCache } from '../../../hooks/useDictationSettings';
|
|
|
|
export const ElevenLabsKeyInput = () => {
|
|
const [elevenLabsApiKey, setElevenLabsApiKey] = useState('');
|
|
const [isLoadingKey, setIsLoadingKey] = useState(false);
|
|
const [hasElevenLabsKey, setHasElevenLabsKey] = useState(false);
|
|
const elevenLabsApiKeyRef = useRef('');
|
|
const { upsert, read } = useConfig();
|
|
|
|
useEffect(() => {
|
|
const loadKey = async () => {
|
|
setIsLoadingKey(true);
|
|
try {
|
|
const response = await read(ELEVENLABS_API_KEY, true);
|
|
if (isSecretKeyConfigured(response)) {
|
|
setHasElevenLabsKey(true);
|
|
setElevenLabsKeyCache(true);
|
|
} else {
|
|
setElevenLabsKeyCache(false);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking ElevenLabs API key:', error);
|
|
setElevenLabsKeyCache(false);
|
|
} finally {
|
|
setIsLoadingKey(false);
|
|
}
|
|
};
|
|
|
|
loadKey();
|
|
}, [read]);
|
|
|
|
// Save key on unmount to avoid losing unsaved changes
|
|
useEffect(() => {
|
|
return () => {
|
|
if (elevenLabsApiKeyRef.current) {
|
|
const keyToSave = elevenLabsApiKeyRef.current;
|
|
if (keyToSave.trim()) {
|
|
upsert(ELEVENLABS_API_KEY, keyToSave, true)
|
|
.then(() => setElevenLabsKeyCache(true))
|
|
.catch((error) => {
|
|
console.error('Error saving ElevenLabs API key on unmount:', error);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
}, [upsert]);
|
|
|
|
const handleElevenLabsKeyChange = (key: string) => {
|
|
setElevenLabsApiKey(key);
|
|
elevenLabsApiKeyRef.current = key;
|
|
if (key.length > 0) {
|
|
setHasElevenLabsKey(false);
|
|
}
|
|
};
|
|
|
|
const saveElevenLabsKey = async () => {
|
|
try {
|
|
if (elevenLabsApiKey.trim()) {
|
|
await upsert(ELEVENLABS_API_KEY, elevenLabsApiKey, true);
|
|
setHasElevenLabsKey(true);
|
|
setElevenLabsKeyCache(true);
|
|
} else {
|
|
await upsert(ELEVENLABS_API_KEY, null, true);
|
|
setHasElevenLabsKey(false);
|
|
setElevenLabsKeyCache(false);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving ElevenLabs API key:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="py-2 px-2 bg-background-subtle rounded-lg">
|
|
<div className="mb-2">
|
|
<h4 className="text-text-default text-sm">ElevenLabs API Key</h4>
|
|
<p className="text-xs text-text-muted mt-[2px]">
|
|
Required for ElevenLabs voice recognition
|
|
{hasElevenLabsKey && <span className="text-green-600 ml-2">(Configured)</span>}
|
|
</p>
|
|
</div>
|
|
<Input
|
|
type="password"
|
|
value={elevenLabsApiKey}
|
|
onChange={(e) => handleElevenLabsKeyChange(e.target.value)}
|
|
onBlur={saveElevenLabsKey}
|
|
placeholder={
|
|
hasElevenLabsKey ? 'Enter new API key to update' : 'Enter your ElevenLabs API key'
|
|
}
|
|
className="max-w-md"
|
|
disabled={isLoadingKey}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|