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
This commit is contained in:
yangdx
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user