From f8b3f1ee48ab310878ddd1bc7fe16a90140e02de Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Mon, 24 Mar 2025 17:00:15 +0800
Subject: [PATCH] Refactor API key alert and remove message alert component

- Move StatusIndicator to status directory
- Remove obsolete MessageAlert component
- Enhance ApiKeyAlert with open state control
- Improve health check logic with alert state
- Add error message display in ApiKeyAlert
---
 lightrag_webui/src/App.tsx                    | 30 +++++-----
 lightrag_webui/src/components/ApiKeyAlert.tsx | 55 ++++++++++--------
 .../src/components/MessageAlert.tsx           | 56 -------------------
 .../{graph => status}/StatusCard.tsx          |  0
 .../{graph => status}/StatusIndicator.tsx     |  2 +-
 5 files changed, 47 insertions(+), 96 deletions(-)
 delete mode 100644 lightrag_webui/src/components/MessageAlert.tsx
 rename lightrag_webui/src/components/{graph => status}/StatusCard.tsx (100%)
 rename lightrag_webui/src/components/{graph => status}/StatusIndicator.tsx (97%)

diff --git a/lightrag_webui/src/App.tsx b/lightrag_webui/src/App.tsx
index c0b6ac3d..487ca2e8 100644
--- a/lightrag_webui/src/App.tsx
+++ b/lightrag_webui/src/App.tsx
@@ -1,9 +1,8 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import ThemeProvider from '@/components/ThemeProvider'
 import TabVisibilityProvider from '@/contexts/TabVisibilityProvider'
-import MessageAlert from '@/components/MessageAlert'
 import ApiKeyAlert from '@/components/ApiKeyAlert'
-import StatusIndicator from '@/components/graph/StatusIndicator'
+import StatusIndicator from '@/components/status/StatusIndicator'
 import { healthCheckInterval } from '@/lib/constants'
 import { useBackendState, useAuthStore } from '@/stores/state'
 import { useSettingsStore } from '@/stores/settings'
@@ -22,26 +21,30 @@ function App() {
   const message = useBackendState.use.message()
   const enableHealthCheck = useSettingsStore.use.enableHealthCheck()
   const currentTab = useSettingsStore.use.currentTab()
-  const [apiKeyInvalid, setApiKeyInvalid] = useState(false)
+  const [apiKeyAlertOpen, setApiKeyAlertOpen] = useState(false)
   const versionCheckRef = useRef(false); // Prevent duplicate calls in Vite dev mode
 
+  const handleApiKeyAlertOpenChange = useCallback((open: boolean) => {
+    setApiKeyAlertOpen(open)
+    if (!open) {
+      useBackendState.getState().clear()
+    }
+  }, [])
+
   // Health check - can be disabled
   useEffect(() => {
-    // Only execute if health check is enabled
-    if (!enableHealthCheck) return;
+    // Only execute if health check is enabled and ApiKeyAlert is closed
+    if (!enableHealthCheck || apiKeyAlertOpen) return;
 
     // Health check function
     const performHealthCheck = async () => {
       await useBackendState.getState().check();
     };
 
-    // Execute immediately
-    performHealthCheck();
-
     // Set interval for periodic execution
     const interval = setInterval(performHealthCheck, healthCheckInterval * 1000);
     return () => clearInterval(interval);
-  }, [enableHealthCheck]);
+  }, [enableHealthCheck, apiKeyAlertOpen]);
 
   // Version check - independent and executed only once
   useEffect(() => {
@@ -90,12 +93,10 @@ function App() {
   useEffect(() => {
     if (message) {
       if (message.includes(InvalidApiKeyError) || message.includes(RequireApiKeError)) {
-        setApiKeyInvalid(true)
-        return
+        setApiKeyAlertOpen(true)
       }
     }
-    setApiKeyInvalid(false)
-  }, [message, setApiKeyInvalid])
+  }, [message])
 
   return (
     <ThemeProvider>
@@ -123,8 +124,7 @@ function App() {
             </div>
           </Tabs>
           {enableHealthCheck && <StatusIndicator />}
-          {message !== null && !apiKeyInvalid && <MessageAlert />}
-          {apiKeyInvalid && <ApiKeyAlert />}
+          <ApiKeyAlert open={apiKeyAlertOpen} onOpenChange={handleApiKeyAlertOpenChange} />
         </main>
       </TabVisibilityProvider>
     </ThemeProvider>
diff --git a/lightrag_webui/src/components/ApiKeyAlert.tsx b/lightrag_webui/src/components/ApiKeyAlert.tsx
index 86c8e13f..99a1098b 100644
--- a/lightrag_webui/src/components/ApiKeyAlert.tsx
+++ b/lightrag_webui/src/components/ApiKeyAlert.tsx
@@ -12,10 +12,12 @@ import { useSettingsStore } from '@/stores/settings'
 import { useBackendState } from '@/stores/state'
 import { InvalidApiKeyError, RequireApiKeError } from '@/api/lightrag'
 
-import { toast } from 'sonner'
+interface ApiKeyAlertProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
 
-const ApiKeyAlert = () => {
-  const [opened, setOpened] = useState<boolean>(true)
+const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps) => {
   const apiKey = useSettingsStore.use.apiKey()
   const [tempApiKey, setTempApiKey] = useState<string>('')
   const message = useBackendState.use.message()
@@ -32,14 +34,10 @@ const ApiKeyAlert = () => {
     }
   }, [message, setOpened])
 
-  const setApiKey = useCallback(async () => {
+  const setApiKey = useCallback(() => {
     useSettingsStore.setState({ apiKey: tempApiKey || null })
-    if (await useBackendState.getState().check()) {
-      setOpened(false)
-      return
-    }
-    toast.error('API Key is invalid')
-  }, [tempApiKey])
+    setOpened(false)
+  }, [tempApiKey, setOpened])
 
   const handleTempApiKeyChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -53,22 +51,31 @@ const ApiKeyAlert = () => {
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>API Key is required</AlertDialogTitle>
-          <AlertDialogDescription>Please enter your API key</AlertDialogDescription>
+          <AlertDialogDescription>
+            Please enter your API key to access the service
+          </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"
-          />
+        <div className="flex flex-col gap-4">
+          <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>
+            <Button onClick={setApiKey} variant="outline" size="sm">
+              Save
+            </Button>
+          </form>
+          {message && (
+            <div className="text-sm text-red-500">
+              {message}
+            </div>
+          )}
+        </div>
       </AlertDialogContent>
     </AlertDialog>
   )
diff --git a/lightrag_webui/src/components/MessageAlert.tsx b/lightrag_webui/src/components/MessageAlert.tsx
deleted file mode 100644
index cd23bbd9..00000000
--- a/lightrag_webui/src/components/MessageAlert.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/Alert'
-import { useBackendState } from '@/stores/state'
-import { useEffect, useState } from 'react'
-import { cn } from '@/lib/utils'
-
-// import Button from '@/components/ui/Button'
-// import { controlButtonVariant } from '@/lib/constants'
-
-import { AlertCircle } from 'lucide-react'
-
-const MessageAlert = () => {
-  const health = useBackendState.use.health()
-  const message = useBackendState.use.message()
-  const messageTitle = useBackendState.use.messageTitle()
-  const [isMounted, setIsMounted] = useState(false)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setIsMounted(true)
-    }, 50)
-  }, [])
-
-  return (
-    <Alert
-      // variant={health ? 'default' : 'destructive'}
-      className={cn(
-        'bg-background/90 absolute top-12 left-1/2 flex w-auto max-w-lg -translate-x-1/2 transform items-center gap-4 shadow-md backdrop-blur-lg transition-all duration-500 ease-in-out',
-        isMounted ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0',
-        !health && 'bg-red-700 text-white'
-      )}
-    >
-      {!health && (
-        <div>
-          <AlertCircle className="size-4" />
-        </div>
-      )}
-      <div>
-        <AlertTitle className="font-bold">{messageTitle}</AlertTitle>
-        <AlertDescription>{message}</AlertDescription>
-      </div>
-      {/* <div className="flex">
-        <div className="flex-auto" />
-        <Button
-          size="sm"
-          variant={controlButtonVariant}
-          className="border-primary max-h-8 border !p-2 text-xs"
-          onClick={() => useBackendState.getState().clear()}
-        >
-          Close
-        </Button>
-      </div> */}
-    </Alert>
-  )
-}
-
-export default MessageAlert
diff --git a/lightrag_webui/src/components/graph/StatusCard.tsx b/lightrag_webui/src/components/status/StatusCard.tsx
similarity index 100%
rename from lightrag_webui/src/components/graph/StatusCard.tsx
rename to lightrag_webui/src/components/status/StatusCard.tsx
diff --git a/lightrag_webui/src/components/graph/StatusIndicator.tsx b/lightrag_webui/src/components/status/StatusIndicator.tsx
similarity index 97%
rename from lightrag_webui/src/components/graph/StatusIndicator.tsx
rename to lightrag_webui/src/components/status/StatusIndicator.tsx
index d7a1831f..263bb99e 100644
--- a/lightrag_webui/src/components/graph/StatusIndicator.tsx
+++ b/lightrag_webui/src/components/status/StatusIndicator.tsx
@@ -2,7 +2,7 @@ import { cn } from '@/lib/utils'
 import { useBackendState } from '@/stores/state'
 import { useEffect, useState } from 'react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
-import StatusCard from '@/components/graph/StatusCard'
+import StatusCard from '@/components/status/StatusCard'
 import { useTranslation } from 'react-i18next'
 
 const StatusIndicator = () => {