From 03934b138529298ca34ee081d2c4157594ad9ceb Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Wed, 26 Mar 2025 16:24:38 +0800
Subject: [PATCH] fix(ui): improve pipeline status dialog layout and styling

- Switch from AlertDialog to Dialog component for better modal behavior
- Adjust dialog positioning and alignment controls
- Remove custom close button to avoid duplication
- Add proper spacing between alignment buttons and close button
- Simplify history container height with min/max height
- Reduce overlay opacity for better visibility
---
 .../documents/PipelineStatusDialog.tsx        | 148 +++++++-----------
 lightrag_webui/src/components/ui/Dialog.tsx   |   2 +-
 2 files changed, 54 insertions(+), 96 deletions(-)

diff --git a/lightrag_webui/src/components/documents/PipelineStatusDialog.tsx b/lightrag_webui/src/components/documents/PipelineStatusDialog.tsx
index 8b83132b..cdf29ca0 100644
--- a/lightrag_webui/src/components/documents/PipelineStatusDialog.tsx
+++ b/lightrag_webui/src/components/documents/PipelineStatusDialog.tsx
@@ -1,16 +1,15 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import { X, AlignLeft, AlignCenter, AlignRight } from 'lucide-react'
+import { AlignLeft, AlignCenter, AlignRight } from 'lucide-react'
 
 import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogOverlay,
-} from '@/components/ui/AlertDialog'
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from '@/components/ui/Dialog'
 import Button from '@/components/ui/Button'
 import { getPipelineStatus, PipelineStatusResponse } from '@/api/lightrag'
 import { errorMessage } from '@/lib/utils'
@@ -31,44 +30,15 @@ export default function PipelineStatusDialog({
   const [status, setStatus] = useState<PipelineStatusResponse | null>(null)
   const [position, setPosition] = useState<DialogPosition>('center')
   const [isUserScrolled, setIsUserScrolled] = useState(false)
-  const [historyHeight, setHistoryHeight] = useState('20em')
   const historyRef = useRef<HTMLDivElement>(null)
-  const resizeObserverRef = useRef<ResizeObserver | null>(null)
-
-  // Calculate history height based on window height
-  const updateHistoryHeight = useCallback(() => {
-    const minHeight = 7.5 // 5 lines * 1.5em line height
-    const windowHeight = window.innerHeight
-    const pixelsPerEm = parseFloat(getComputedStyle(document.documentElement).fontSize)
-    const maxHeightInEm = Math.max(Math.floor((windowHeight * 0.4) / pixelsPerEm), minHeight)
-    setHistoryHeight(`${maxHeightInEm}em`)
-  }, [])
 
   // Reset position when dialog opens
   useEffect(() => {
     if (open) {
       setPosition('center')
       setIsUserScrolled(false)
-      updateHistoryHeight()
     }
-  }, [open, updateHistoryHeight])
-
-  // Setup resize observer
-  useEffect(() => {
-    if (!open) return
-
-    resizeObserverRef.current = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        updateHistoryHeight()
-      }
-    })
-
-    resizeObserverRef.current.observe(document.body)
-
-    return () => {
-      resizeObserverRef.current?.disconnect()
-    }
-  }, [open, updateHistoryHeight])
+  }, [open])
 
   // Handle scroll position
   useEffect(() => {
@@ -112,74 +82,63 @@ export default function PipelineStatusDialog({
   }, [open, t])
 
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogOverlay className="bg-black/30" />
-      <AlertDialogContent 
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
         className={cn(
-          'sm:max-w-[600px] transition-all duration-200',
-          position === 'left' && '!left-4 !translate-x-0',
+          'sm:max-w-[600px] transition-all duration-200 fixed',
+          position === 'left' && '!left-[25%] !translate-x-[-50%] !mx-4',
           position === 'center' && '!left-1/2 !-translate-x-1/2',
-          position === 'right' && '!right-4 !left-auto !translate-x-0'
+          position === 'right' && '!left-[75%] !translate-x-[-50%] !mx-4'
         )}
       >
-        <AlertDialogDescription className="sr-only">
+        <DialogDescription className="sr-only">
           {status?.job_name 
             ? `${t('documentPanel.pipelineStatus.jobName')}: ${status.job_name}, ${t('documentPanel.pipelineStatus.progress')}: ${status.cur_batch}/${status.batchs}`
             : t('documentPanel.pipelineStatus.noActiveJob')
           }
-        </AlertDialogDescription>
-        <AlertDialogHeader className="flex flex-row items-center justify-between">
-          <AlertDialogTitle>
+        </DialogDescription>
+        <DialogHeader className="flex flex-row items-center">
+          <DialogTitle className="flex-1">
             {t('documentPanel.pipelineStatus.title')}
-          </AlertDialogTitle>
+          </DialogTitle>
           
-          {/* Position control buttons and close button */}
-          <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1">
-              <Button
-                variant="ghost"
-                size="icon"
-                className={cn(
-                  'h-6 w-6',
-                  position === 'left' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600'
-                )}
-                onClick={() => setPosition('left')}
-              >
-                <AlignLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className={cn(
-                  'h-6 w-6',
-                  position === 'center' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600'
-                )}
-                onClick={() => setPosition('center')}
-              >
-                <AlignCenter className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className={cn(
-                  'h-6 w-6',
-                  position === 'right' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600'
-                )}
-                onClick={() => setPosition('right')}
-              >
-                <AlignRight className="h-4 w-4" />
-              </Button>
-            </div>
+          {/* Position control buttons */}
+          <div className="flex items-center gap-2 mr-8">
             <Button
               variant="ghost"
               size="icon"
-              className="h-6 w-6"
-              onClick={() => onOpenChange(false)}
+              className={cn(
+                'h-6 w-6',
+                position === 'left' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600'
+              )}
+              onClick={() => setPosition('left')}
             >
-              <X className="h-4 w-4" />
+              <AlignLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'h-6 w-6',
+                position === 'center' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600'
+              )}
+              onClick={() => setPosition('center')}
+            >
+              <AlignCenter className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'h-6 w-6',
+                position === 'right' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600'
+              )}
+              onClick={() => setPosition('right')}
+            >
+              <AlignRight className="h-4 w-4" />
             </Button>
           </div>
-        </AlertDialogHeader>
+        </DialogHeader>
 
         {/* Status Content */}
         <div className="space-y-4 pt-4">
@@ -218,8 +177,7 @@ export default function PipelineStatusDialog({
             <div 
               ref={historyRef}
               onScroll={handleScroll}
-              className="font-mono text-sm rounded-md bg-zinc-800 text-zinc-100 p-3 overflow-y-auto"
-              style={{ height: historyHeight }}
+              className="font-mono text-sm rounded-md bg-zinc-800 text-zinc-100 p-3 overflow-y-auto min-h-[7.5em] max-h-[40vh]"
             >
               {status?.history_messages?.map((msg, idx) => (
                 <div key={idx}>{msg}</div>
@@ -227,7 +185,7 @@ export default function PipelineStatusDialog({
             </div>
           </div>
         </div>
-      </AlertDialogContent>
-    </AlertDialog>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/lightrag_webui/src/components/ui/Dialog.tsx b/lightrag_webui/src/components/ui/Dialog.tsx
index a45f1e32..75d806f5 100644
--- a/lightrag_webui/src/components/ui/Dialog.tsx
+++ b/lightrag_webui/src/components/ui/Dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30',
       className
     )}
     {...props}