implement API key alert

2025-02-17 01:59:36 +08:00
parent f5ee1f2cdb
commit c5f380986d
23 changed files with 229 additions and 18 deletions
--- a/lightrag_webui/src/components/ApiKeyAlert.tsx
+++ b/lightrag_webui/src/components/ApiKeyAlert.tsx
@@ -0,0 +1,79 @@
+import { useState, useCallback, useEffect } from 'react'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} 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'
+
+import { toast } from 'sonner'
+
+const ApiKeyAlert = () => {
+  const [opened, setOpened] = useState<boolean>(true)
+  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(async () => {
+    useSettingsStore.setState({ apiKey: tempApiKey || null })
+    if (await useBackendState.getState().check()) {
+      setOpened(false)
+      return
+    }
+    toast.error('API Key is invalid')
+  }, [tempApiKey])
+
+  const handleTempApiKeyChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setTempApiKey(e.target.value)
+    },
+    [setTempApiKey]
+  )
+
+  return (
+    <AlertDialog open={opened} onOpenChange={setOpened}>
+      <AlertDialogTrigger>Open</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>API Key is required</AlertDialogTitle>
+          <AlertDialogDescription>Please enter your API key</AlertDialogDescription>
+        </AlertDialogHeader>
+        <form className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
+          <Input
+            type="password"
+            value={tempApiKey}
+            onChange={handleTempApiKeyChange}
+            placeholder="Enter your API key"
+            className="max-h-full w-full min-w-0"
+            autoComplete="off"
+          />
+
+          <Button onClick={setApiKey} variant="outline" size="sm">
+            Save
+          </Button>
+        </form>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export default ApiKeyAlert