Merge branch 'main'

2025-03-25 15:57:14 +08:00
parent b868dddac5 4af78f6c81
commit 23004546dc
36 changed files with 2780 additions and 914 deletions
--- 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>
--- a/lightrag_webui/src/components/ApiKeyAlert.tsx
+++ b/lightrag_webui/src/components/ApiKeyAlert.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
  AlertDialog,
  AlertDialogContent,
@@ -12,10 +13,13 @@ 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 { t } = useTranslation()
  const apiKey = useSettingsStore.use.apiKey()
  const [tempApiKey, setTempApiKey] = useState<string>('')
  const message = useBackendState.use.message()
@@ -32,14 +36,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>) => {
@@ -52,23 +52,32 @@ const ApiKeyAlert = () => {
    <AlertDialog open={opened} onOpenChange={setOpened}>
      <AlertDialogContent>
        <AlertDialogHeader>
-          <AlertDialogTitle>API Key is required</AlertDialogTitle>
-          <AlertDialogDescription>Please enter your API key</AlertDialogDescription>
+          <AlertDialogTitle>{t('apiKeyAlert.title')}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t('apiKeyAlert.description')}
+          </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={t('apiKeyAlert.placeholder')}
+              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">
+              {t('apiKeyAlert.save')}
+            </Button>
+          </form>
+          {message && (
+            <div className="text-sm text-red-500">
+              {message}
+            </div>
+          )}
+        </div>
      </AlertDialogContent>
    </AlertDialog>
  )
--- a/lightrag_webui/src/components/MessageAlert.tsx
+++ b/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
--- a/lightrag_webui/src/components/status/StatusCard.tsx
+++ b/lightrag_webui/src/components/status/StatusCard.tsx
--- a/lightrag_webui/src/components/status/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 = () => {
--- a/lightrag_webui/src/components/ui/AsyncSearch.tsx
+++ b/lightrag_webui/src/components/ui/AsyncSearch.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { Loader2 } from 'lucide-react'
 import { useDebounce } from '@/hooks/useDebounce'

@@ -81,100 +81,97 @@ export function AsyncSearch<T>({
  const [options, setOptions] = useState<T[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
-  const [selectedValue, setSelectedValue] = useState(value)
-  const [focusedValue, setFocusedValue] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState('')
  const debouncedSearchTerm = useDebounce(searchTerm, preload ? 0 : 150)
-  const [originalOptions, setOriginalOptions] = useState<T[]>([])
+  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    setMounted(true)
-    setSelectedValue(value)
-  }, [value])
+  }, [])

-  // Effect for initial fetch
+  // Handle clicks outside of the component
  useEffect(() => {
-    const initializeOptions = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-        // If we have a value, use it for the initial search
-        const data = value !== null ? await fetcher(value) : []
-        setOriginalOptions(data)
-        setOptions(data)
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch options')
-      } finally {
-        setLoading(false)
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node) &&
+        open
+      ) {
+        setOpen(false)
      }
    }

-    if (!mounted) {
-      initializeOptions()
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
    }
-  }, [mounted, fetcher, value])
+  }, [open])

+  const fetchOptions = useCallback(async (query: string) => {
+    try {
+      setLoading(true)
+      setError(null)
+      const data = await fetcher(query)
+      setOptions(data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch options')
+    } finally {
+      setLoading(false)
+    }
+  }, [fetcher])
+
+  // Load options when search term changes
  useEffect(() => {
-    const fetchOptions = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-        const data = await fetcher(debouncedSearchTerm)
-        setOriginalOptions(data)
-        setOptions(data)
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch options')
-      } finally {
-        setLoading(false)
-      }
-    }
+    if (!mounted) return

-    if (!mounted) {
-      fetchOptions()
-    } else if (!preload) {
-      fetchOptions()
-    } else if (preload) {
+    if (preload) {
      if (debouncedSearchTerm) {
-        setOptions(
-          originalOptions.filter((option) =>
+        setOptions((prev) =>
+          prev.filter((option) =>
            filterFn ? filterFn(option, debouncedSearchTerm) : true
          )
        )
-      } else {
-        setOptions(originalOptions)
      }
+    } else {
+      fetchOptions(debouncedSearchTerm)
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher, debouncedSearchTerm, mounted, preload, filterFn])
+  }, [mounted, debouncedSearchTerm, preload, filterFn, fetchOptions])

-  const handleSelect = useCallback(
-    (currentValue: string) => {
-      if (currentValue !== selectedValue) {
-        setSelectedValue(currentValue)
-        onChange(currentValue)
-      }
+  // Load initial value
+  useEffect(() => {
+    if (!mounted || !value) return
+    fetchOptions(value)
+  }, [mounted, value, fetchOptions])
+
+  const handleSelect = useCallback((currentValue: string) => {
+    onChange(currentValue)
+    requestAnimationFrame(() => {
+      // Blur the input to ensure focus event triggers on next click
+      const input = document.activeElement as HTMLElement
+      input?.blur()
+      // Close the dropdown
      setOpen(false)
-    },
-    [selectedValue, setSelectedValue, setOpen, onChange]
-  )
+    })
+  }, [onChange])

-  const handleFocus = useCallback(
-    (currentValue: string) => {
-      if (currentValue !== focusedValue) {
-        setFocusedValue(currentValue)
-        onFocus(currentValue)
-      }
-    },
-    [focusedValue, setFocusedValue, onFocus]
-  )
+  const handleFocus = useCallback(() => {
+    setOpen(true)
+    // Use current search term to fetch options
+    fetchOptions(searchTerm)
+  }, [searchTerm, fetchOptions])
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    const target = e.target as HTMLElement
+    if (target.closest('.cmd-item')) {
+      e.preventDefault()
+    }
+  }, [])

  return (
    <div
+      ref={containerRef}
      className={cn(disabled && 'cursor-not-allowed opacity-50', className)}
-      onFocus={() => {
-        setOpen(true)
-      }}
-      onBlur={() => setOpen(false)}
+      onMouseDown={handleMouseDown}
    >
      <Command shouldFilter={false} className="bg-transparent">
        <div>
@@ -182,12 +179,13 @@ export function AsyncSearch<T>({
            placeholder={placeholder}
            value={searchTerm}
            className="max-h-8"
+            onFocus={handleFocus}
            onValueChange={(value) => {
              setSearchTerm(value)
-              if (value && !open) setOpen(true)
+              if (!open) setOpen(true)
            }}
          />
-          {loading && options.length > 0 && (
+          {loading && (
            <div className="absolute top-1/2 right-2 flex -translate-y-1/2 transform items-center">
              <Loader2 className="h-4 w-4 animate-spin" />
            </div>
@@ -209,8 +207,8 @@ export function AsyncSearch<T>({
                  key={getOptionValue(option) + `${idx}`}
                  value={getOptionValue(option)}
                  onSelect={handleSelect}
-                  onMouseEnter={() => handleFocus(getOptionValue(option))}
-                  className="truncate"
+                  onMouseMove={() => onFocus(getOptionValue(option))}
+                  className="truncate cmd-item"
                >
                  {renderOption(option)}
                </CommandItem>
--- a/lightrag_webui/src/features/SiteHeader.tsx
+++ b/lightrag_webui/src/features/SiteHeader.tsx
@@ -67,18 +67,20 @@ export default function SiteHeader() {

  return (
    <header className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex h-10 w-full border-b px-4 backdrop-blur">
-      <a href={webuiPrefix} className="mr-6 flex items-center gap-2">
-        <ZapIcon className="size-4 text-emerald-400" aria-hidden="true" />
-        {/* <img src='/logo.png' className="size-4" /> */}
-        <span className="font-bold md:inline-block">{SiteInfo.name}</span>
-        {versionDisplay && (
-          <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
-            v{versionDisplay}
-          </span>
-        )}
-      </a>
+      <div className="w-[200px] flex items-center">
+        <a href={webuiPrefix} className="flex items-center gap-2">
+          <ZapIcon className="size-4 text-emerald-400" aria-hidden="true" />
+          {/* <img src='/logo.png' className="size-4" /> */}
+          <span className="font-bold md:inline-block">{SiteInfo.name}</span>
+          {versionDisplay && (
+            <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
+              v{versionDisplay}
+            </span>
+          )}
+        </a>
+      </div>

-      <div className="flex h-10 flex-1 justify-center">
+      <div className="flex h-10 flex-1 items-center justify-center">
        <TabsNavigation />
        {isGuestMode && (
          <div className="ml-2 self-center px-2 py-1 text-xs bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 rounded-md">
@@ -87,7 +89,7 @@ export default function SiteHeader() {
        )}
      </div>

-      <nav className="flex items-center">
+      <nav className="w-[200px] flex items-center justify-end">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" side="bottom" tooltip={t('header.projectRepository')}>
            <a href={SiteInfo.github} target="_blank" rel="noopener noreferrer">
--- a/lightrag_webui/src/locales/ar.json
+++ b/lightrag_webui/src/locales/ar.json
@@ -259,5 +259,11 @@
  },
  "apiSite": {
    "loading": "جارٍ تحميل وثائق واجهة برمجة التطبيقات..."
+  },
+  "apiKeyAlert": {
+    "title": "مفتاح واجهة برمجة التطبيقات مطلوب",
+    "description": "الرجاء إدخال مفتاح واجهة برمجة التطبيقات للوصول إلى الخدمة",
+    "placeholder": "أدخل مفتاح واجهة برمجة التطبيقات",
+    "save": "حفظ"
  }
 }
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -274,5 +274,11 @@
  },
  "apiSite": {
    "loading": "Loading API Documentation..."
+  },
+  "apiKeyAlert": {
+    "title": "API Key is required",
+    "description": "Please enter your API key to access the service",
+    "placeholder": "Enter your API key",
+    "save": "Save"
  }
 }
--- a/lightrag_webui/src/locales/fr.json
+++ b/lightrag_webui/src/locales/fr.json
@@ -259,5 +259,11 @@
  },
  "apiSite": {
    "loading": "Chargement de la documentation de l'API..."
+  },
+  "apiKeyAlert": {
+    "title": "Clé API requise",
+    "description": "Veuillez entrer votre clé API pour accéder au service",
+    "placeholder": "Entrez votre clé API",
+    "save": "Sauvegarder"
  }
 }
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -259,5 +259,11 @@
  },
  "apiSite": {
    "loading": "正在加载 API 文档..."
+  },
+  "apiKeyAlert": {
+    "title": "需要 API Key",
+    "description": "请输入您的 API Key 以访问服务",
+    "placeholder": "请输入 API Key",
+    "save": "保存"
  }
 }