Refactoring clear document UI

lightrag_webui/src/components/documents/ClearDocumentsDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import Button from '@/components/ui/Button'
 import {
   Dialog,
@@ -6,24 +6,79 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
+  DialogFooter
 } from '@/components/ui/Dialog'
+import Input from '@/components/ui/Input'
+import Checkbox from '@/components/ui/Checkbox'
 import { toast } from 'sonner'
 import { errorMessage } from '@/lib/utils'
-import { clearDocuments } from '@/api/lightrag'
+import { clearDocuments, clearCache, getDocuments } from '@/api/lightrag'
+import { useBackendState } from '@/stores/state'
 
-import { EraserIcon } from 'lucide-react'
+import { EraserIcon, AlertTriangleIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
+// 简单的Label组件
+const Label = ({ 
+  htmlFor, 
+  className, 
+  children, 
+  ...props 
+}: React.LabelHTMLAttributes<HTMLLabelElement>) => (
+  <label 
+    htmlFor={htmlFor} 
+    className={className} 
+    {...props}
+  >
+    {children}
+  </label>
+)
+
 export default function ClearDocumentsDialog() {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const [confirmText, setConfirmText] = useState('')
+  const [clearCacheOption, setClearCacheOption] = useState(false)
+  const isConfirmEnabled = confirmText.toLowerCase() === 'yes'
+  const check = useBackendState.use.check()
+
+  // 重置状态当对话框关闭时
+  useEffect(() => {
+    if (!open) {
+      setConfirmText('')
+      setClearCacheOption(false)
+    }
+  }, [open])
 
   const handleClear = useCallback(async () => {
+    if (!isConfirmEnabled) return
+
     try {
+      // 清空文档
       const result = await clearDocuments()
+      
+      // 如果选择了清空缓存，则清空缓存
+      if (clearCacheOption) {
+        try {
+          await clearCache()
+          toast.success(t('documentPanel.clearDocuments.cacheCleared'))
+        } catch (cacheErr) {
+          toast.error(t('documentPanel.clearDocuments.cacheClearFailed', { error: errorMessage(cacheErr) }))
+        }
+      }
+
       if (result.status === 'success') {
         toast.success(t('documentPanel.clearDocuments.success'))
+        
+        // 刷新文档列表和后端状态
+        try {
+          await getDocuments()
+          check()
+        } catch (refreshErr) {
+          console.error('Error refreshing documents:', refreshErr)
+        }
+        
         setOpen(false)
       } else {
         toast.error(t('documentPanel.clearDocuments.failed', { message: result.message }))
@@ -31,7 +86,7 @@ export default function ClearDocumentsDialog() {
     } catch (err) {
       toast.error(t('documentPanel.clearDocuments.error', { error: errorMessage(err) }))
     }
-  }, [setOpen, t])
+  }, [isConfirmEnabled, clearCacheOption, setOpen, t, check])
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -42,12 +97,58 @@ export default function ClearDocumentsDialog() {
       </DialogTrigger>
       <DialogContent className="sm:max-w-xl" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
-          <DialogTitle>{t('documentPanel.clearDocuments.title')}</DialogTitle>
-          <DialogDescription>{t('documentPanel.clearDocuments.confirm')}</DialogDescription>
+          <DialogTitle className="flex items-center gap-2 text-red-500 dark:text-red-400 font-bold">
+            <AlertTriangleIcon className="h-5 w-5" />
+            {t('documentPanel.clearDocuments.title')}
+          </DialogTitle>
+          <DialogDescription className="pt-2">
+            <div className="text-red-500 dark:text-red-400 font-semibold mb-4">
+              {t('documentPanel.clearDocuments.warning')}
+            </div>
+            <div className="mb-4">
+              {t('documentPanel.clearDocuments.confirm')}
+            </div>
+          </DialogDescription>
         </DialogHeader>
-        <Button variant="destructive" onClick={handleClear}>
-          {t('documentPanel.clearDocuments.confirmButton')}
-        </Button>
+        
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="confirm-text" className="text-sm font-medium">
+              {t('documentPanel.clearDocuments.confirmPrompt')}
+            </Label>
+            <Input
+              id="confirm-text"
+              value={confirmText}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfirmText(e.target.value)}
+              placeholder={t('documentPanel.clearDocuments.confirmPlaceholder')}
+              className="w-full"
+            />
+          </div>
+          
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="clear-cache"
+              checked={clearCacheOption}
+              onCheckedChange={(checked: boolean | 'indeterminate') => setClearCacheOption(checked === true)}
+            />
+            <Label htmlFor="clear-cache" className="text-sm font-medium cursor-pointer">
+              {t('documentPanel.clearDocuments.clearCache')}
+            </Label>
+          </div>
+        </div>
+        
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button 
+            variant="destructive" 
+            onClick={handleClear} 
+            disabled={!isConfirmEnabled}
+          >
+            {t('documentPanel.clearDocuments.confirmButton')}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )