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

@@ -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
+    // Only execute if health check is enabled and ApiKeyAlert is closed
-    if (!enableHealthCheck) return;
+    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)
+        setApiKeyAlertOpen(true)
-        return
       }
     }
-    setApiKeyInvalid(false)
+  }, [message])
-  }, [message, setApiKeyInvalid])
 
   return (
     <ThemeProvider>
@@ -123,8 +124,7 @@ function App() {
             </div>
           </Tabs>
           {enableHealthCheck && <StatusIndicator />}
-          {message !== null && !apiKeyInvalid && <MessageAlert />}
+          <ApiKeyAlert open={apiKeyAlertOpen} onOpenChange={handleApiKeyAlertOpenChange} />
-          {apiKeyInvalid && <ApiKeyAlert />}
         </main>
       </TabVisibilityProvider>
     </ThemeProvider>

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 ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps) => {
-  const [opened, setOpened] = useState<boolean>(true)
   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
+  }, [tempApiKey, setOpened])
-    }
-    toast.error('API Key is invalid')
-  }, [tempApiKey])
 
   const handleTempApiKeyChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -53,8 +51,11 @@ 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>
+        <div className="flex flex-col gap-4">
           <form className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
             <Input
               type="password"
@@ -69,6 +70,12 @@ const ApiKeyAlert = () => {
               Save
             </Button>
           </form>
+          {message && (
+            <div className="text-sm text-red-500">
+              {message}
+            </div>
+          )}
+        </div>
       </AlertDialogContent>
     </AlertDialog>
   )

lightrag_webui/src/components/MessageAlert.tsx

@@ -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

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 = () => {