Add confirmation dialog for pipeline cancellation

Author: danielaskdd

lightrag_webui/src/components/documents/PipelineStatusDialog.tsx

@@ -30,13 +30,17 @@ export default function PipelineStatusDialog({
   const [status, setStatus] = useState<PipelineStatusResponse | null>(null)
   const [position, setPosition] = useState<DialogPosition>('center')
   const [isUserScrolled, setIsUserScrolled] = useState(false)
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false)
   const historyRef = useRef<HTMLDivElement>(null)
 
   // Reset position when dialog opens
   useEffect(() => {
     if (open) {
       setPosition('center')
       setIsUserScrolled(false)
+    } else {
+      // Reset confirmation dialog state when main dialog closes
+      setShowCancelConfirm(false)
     }
   }, [open])
 
@@ -81,8 +85,9 @@ export default function PipelineStatusDialog({
     return () => clearInterval(interval)
   }, [open, t])
 
-  // Handle cancel pipeline
-  const handleCancelPipeline = async () => {
+  // Handle cancel pipeline confirmation
+  const handleConfirmCancel = async () => {
+    setShowCancelConfirm(false)
     try {
       const result = await cancelPipeline()
       if (result.status === 'cancellation_requested') {
@@ -186,7 +191,7 @@ export default function PipelineStatusDialog({
                 variant="destructive"
                 size="sm"
                 disabled={!canCancel}
-                onClick={handleCancelPipeline}
+                onClick={() => setShowCancelConfirm(true)}
                 title={
                   status?.cancellation_requested
                     ? t('documentPanel.pipelineStatus.cancelInProgress')
@@ -233,6 +238,32 @@ export default function PipelineStatusDialog({
           </div>
         </div>
       </DialogContent>
+
+      {/* Cancel Confirmation Dialog */}
+      <Dialog open={showCancelConfirm} onOpenChange={setShowCancelConfirm}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>{t('documentPanel.pipelineStatus.cancelConfirmTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('documentPanel.pipelineStatus.cancelConfirmDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-3 mt-4">
+            <Button
+              variant="outline"
+              onClick={() => setShowCancelConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmCancel}
+            >
+              {t('documentPanel.pipelineStatus.cancelConfirmButton')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </Dialog>
   )
 }

lightrag_webui/src/locales/ar.json

@@ -168,6 +168,9 @@
       "pipelineMessages": "رسائل خط الأنابيب",
       "cancelButton": "إلغاء",
       "cancelTooltip": "إلغاء معالجة خط الأنابيب",
+      "cancelConfirmTitle": "تأكيد إلغاء خط الأنابيب",
+      "cancelConfirmDescription": "سيؤدي هذا الإجراء إلى إيقاف معالجة خط الأنابيب الجارية. هل أنت متأكد من أنك تريد المتابعة؟",
+      "cancelConfirmButton": "تأكيد الإلغاء",
       "cancelInProgress": "الإلغاء قيد التقدم...",
       "pipelineNotRunning": "خط الأنابيب غير قيد التشغيل",
       "cancelSuccess": "تم طلب إلغاء خط الأنابيب",

lightrag_webui/src/locales/en.json

@@ -168,6 +168,9 @@
       "pipelineMessages": "Pipeline Messages",
       "cancelButton": "Cancel",
       "cancelTooltip": "Cancel pipeline processing",
+      "cancelConfirmTitle": "Confirm Pipeline Cancellation",
+      "cancelConfirmDescription": "This will interrupt the ongoing pipeline processing. Are you sure you want to continue?",
+      "cancelConfirmButton": "Confirm Cancellation",
       "cancelInProgress": "Cancellation in progress...",
       "pipelineNotRunning": "Pipeline not running",
       "cancelSuccess": "Pipeline cancellation requested",

lightrag_webui/src/locales/fr.json

@@ -168,6 +168,9 @@
       "pipelineMessages": "Messages de Pipeline",
       "cancelButton": "Annuler",
       "cancelTooltip": "Annuler le traitement du pipeline",
+      "cancelConfirmTitle": "Confirmer l'Annulation du Pipeline",
+      "cancelConfirmDescription": "Cette action interrompra le traitement du pipeline en cours. Êtes-vous sûr de vouloir continuer ?",
+      "cancelConfirmButton": "Confirmer l'Annulation",
       "cancelInProgress": "Annulation en cours...",
       "pipelineNotRunning": "Le pipeline n'est pas en cours d'exécution",
       "cancelSuccess": "Annulation du pipeline demandée",

lightrag_webui/src/locales/zh.json

@@ -168,6 +168,9 @@
       "pipelineMessages": "流水线消息",
       "cancelButton": "中断",
       "cancelTooltip": "中断流水线处理",
+      "cancelConfirmTitle": "确认中断流水线",
+      "cancelConfirmDescription": "此操作将中断正在进行的流水线处理。确定要继续吗？",
+      "cancelConfirmButton": "确认中断",
       "cancelInProgress": "取消请求进行中...",
       "pipelineNotRunning": "流水线未运行",
       "cancelSuccess": "流水线中断请求已发送",

lightrag_webui/src/locales/zh_TW.json

@@ -168,6 +168,9 @@
       "pipelineMessages": "流水線消息",
       "cancelButton": "中斷",
       "cancelTooltip": "中斷流水線處理",
+      "cancelConfirmTitle": "確認中斷流水線",
+      "cancelConfirmDescription": "此操作將中斷正在進行的流水線處理。確定要繼續嗎？",
+      "cancelConfirmButton": "確認中斷",
       "cancelInProgress": "取消請求進行中...",
       "pipelineNotRunning": "流水線未運行",
       "cancelSuccess": "流水線中斷請求已發送",