From 3d6295c622fc201a22b6d4c27e382d7f63d62e7d Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Thu, 25 Sep 2025 09:35:46 +0800
Subject: [PATCH] refactor delete comment and reply

---
 web/app/components/workflow/index.tsx | 57 ++++++++++++++-------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 3276ecf330..b199f519c1 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -138,8 +138,6 @@ export const Workflow: FC<WorkflowProps> = memo(({
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
   const [isMouseOverCanvas, setIsMouseOverCanvas] = useState(false)
-  const [pendingDeleteCommentId, setPendingDeleteCommentId] = useState<string | null>(null)
-  const [pendingDeleteReply, setPendingDeleteReply] = useState<{ commentId: string; replyId: string } | null>(null)
   const [nodes, setNodes] = useNodesState(originalNodes)
   const [edges, setEdges] = useEdgesState(originalEdges)
   const controlMode = useStore(s => s.controlMode)
@@ -243,6 +241,33 @@ export const Workflow: FC<WorkflowProps> = memo(({
       setTimeout(() => handleRefreshWorkflowDraft(), 500)
   }, [syncWorkflowDraftWhenPageClose, handleRefreshWorkflowDraft])
 
+  // Optimized comment deletion using showConfirm
+  const handleCommentDeleteClick = useCallback((commentId: string) => {
+    if (!showConfirm) {
+      setShowConfirm({
+        title: 'Delete this thread?',
+        desc: 'This action will permanently delete the thread and all its replies. This cannot be undone.',
+        onConfirm: async () => {
+          await handleCommentDelete(commentId)
+          setShowConfirm(undefined)
+        },
+      })
+    }
+  }, [showConfirm, setShowConfirm, handleCommentDelete])
+
+  const handleCommentReplyDeleteClick = useCallback((commentId: string, replyId: string) => {
+    if (!showConfirm) {
+      setShowConfirm({
+        title: 'Delete this reply?',
+        desc: 'This reply will be removed permanently.',
+        onConfirm: async () => {
+          await handleCommentReplyDelete(commentId, replyId)
+          setShowConfirm(undefined)
+        },
+      })
+    }
+  }, [showConfirm, setShowConfirm, handleCommentReplyDelete])
+
   useEffect(() => {
     document.addEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)
 
@@ -412,30 +437,6 @@ export const Workflow: FC<WorkflowProps> = memo(({
           content={showConfirm.desc}
         />
       )}
-      {pendingDeleteCommentId && (
-        <Confirm
-          isShow
-          title='Delete this thread?'
-          content='This action will permanently delete the thread and all its replies. This cannot be undone.'
-          onCancel={() => setPendingDeleteCommentId(null)}
-          onConfirm={async () => {
-            await handleCommentDelete(pendingDeleteCommentId)
-            setPendingDeleteCommentId(null)
-          }}
-        />
-      )}
-      {pendingDeleteReply && (
-        <Confirm
-          isShow
-          title='Delete this reply?'
-          content='This reply will be removed permanently.'
-          onCancel={() => setPendingDeleteReply(null)}
-          onConfirm={async () => {
-            await handleCommentReplyDelete(pendingDeleteReply.commentId, pendingDeleteReply.replyId)
-            setPendingDeleteReply(null)
-          }}
-        />
-      )}
       <LimitTips />
       {controlMode === ControlMode.Comment && isMouseOverCanvas && (
         <CommentCursor mousePosition={mousePosition} />
@@ -467,12 +468,12 @@ export const Workflow: FC<WorkflowProps> = memo(({
                 loading={activeCommentLoading}
                 onClose={handleActiveCommentClose}
                 onResolve={() => handleCommentResolve(comment.id)}
-                onDelete={() => setPendingDeleteCommentId(comment.id)}
+                onDelete={() => handleCommentDeleteClick(comment.id)}
                 onPrev={canGoPrev ? () => handleCommentNavigate('prev') : undefined}
                 onNext={canGoNext ? () => handleCommentNavigate('next') : undefined}
                 onReply={(content, ids) => handleCommentReply(comment.id, content, ids ?? [])}
                 onReplyEdit={(replyId, content, ids) => handleCommentReplyUpdate(comment.id, replyId, content, ids ?? [])}
-                onReplyDelete={replyId => setPendingDeleteReply({ commentId: comment.id, replyId })}
+                onReplyDelete={replyId => handleCommentReplyDeleteClick(comment.id, replyId)}
                 canGoPrev={canGoPrev}
                 canGoNext={canGoNext}
               />