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