File size: 2,589 Bytes
0ef8cba da5b7be 0ef8cba 271afa2 0ef8cba 402ce00 0ef8cba 402ce00 da5b7be 0ef8cba 402ce00 0ef8cba 402ce00 0ef8cba da5b7be 402ce00 da5b7be 402ce00 0ef8cba 402ce00 da5b7be 402ce00 0ef8cba 402ce00 da5b7be 402ce00 0ef8cba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import { useState, useCallback, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import {
AlertDialog,
AlertDialogContent,
AlertDialogDescription,
AlertDialogHeader,
AlertDialogTitle
} from '@/components/ui/AlertDialog'
import Button from '@/components/ui/Button'
import Input from '@/components/ui/Input'
import { useSettingsStore } from '@/stores/settings'
import { useBackendState } from '@/stores/state'
import { InvalidApiKeyError, RequireApiKeError } from '@/api/lightrag'
interface ApiKeyAlertProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps) => {
const { t } = useTranslation()
const apiKey = useSettingsStore.use.apiKey()
const [tempApiKey, setTempApiKey] = useState<string>('')
const message = useBackendState.use.message()
useEffect(() => {
setTempApiKey(apiKey || '')
}, [apiKey, opened])
useEffect(() => {
if (message) {
if (message.includes(InvalidApiKeyError) || message.includes(RequireApiKeError)) {
setOpened(true)
}
}
}, [message, setOpened])
const setApiKey = useCallback(() => {
useSettingsStore.setState({ apiKey: tempApiKey || null })
setOpened(false)
}, [tempApiKey, setOpened])
const handleTempApiKeyChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
setTempApiKey(e.target.value)
},
[setTempApiKey]
)
return (
<AlertDialog open={opened} onOpenChange={setOpened}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('apiKeyAlert.title')}</AlertDialogTitle>
<AlertDialogDescription>
{t('apiKeyAlert.description')}
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex flex-col gap-4">
<form className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
<Input
type="password"
value={tempApiKey}
onChange={handleTempApiKeyChange}
placeholder={t('apiKeyAlert.placeholder')}
className="max-h-full w-full min-w-0"
autoComplete="off"
/>
<Button onClick={setApiKey} variant="outline" size="sm">
{t('apiKeyAlert.save')}
</Button>
</form>
{message && (
<div className="text-sm text-red-500">
{message}
</div>
)}
</div>
</AlertDialogContent>
</AlertDialog>
)
}
export default ApiKeyAlert
|