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/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>
   )

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