From 10aa16b47173228fbd6d484f344d13b975295b75 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Tue, 16 Sep 2025 09:51:12 +0800
Subject: [PATCH] add workflow comment panel

---
 .../components/workflow-panel.tsx             |  3 +
 .../workflow/hooks/use-workflow-comment.ts    | 13 ++-
 .../workflow/panel/comments-panel/index.tsx   | 88 +++++++++++++++++++
 .../workflow/store/workflow/panel-slice.ts    |  8 ++
 4 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/workflow/panel/comments-panel/index.tsx

diff --git a/web/app/components/workflow-app/components/workflow-panel.tsx b/web/app/components/workflow-app/components/workflow-panel.tsx
index dd368660ce..a43aa9699f 100644
--- a/web/app/components/workflow-app/components/workflow-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-panel.tsx
@@ -11,6 +11,7 @@ import ChatRecord from '@/app/components/workflow/panel/chat-record'
 import ChatVariablePanel from '@/app/components/workflow/panel/chat-variable-panel'
 import GlobalVariablePanel from '@/app/components/workflow/panel/global-variable-panel'
 import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel'
+import CommentsPanel from '@/app/components/workflow/panel/comments-panel'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 import type { PanelProps } from '@/app/components/workflow/panel'
@@ -50,6 +51,7 @@ const WorkflowPanelOnRight = () => {
   const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
   const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
+  const controlMode = useStore(s => s.controlMode)
 
   return (
     <>
@@ -88,6 +90,7 @@ const WorkflowPanelOnRight = () => {
           <VersionHistoryPanel/>
         )
       }
+      {controlMode === 'comment' && <CommentsPanel />}
     </>
   )
 }
diff --git a/web/app/components/workflow/hooks/use-workflow-comment.ts b/web/app/components/workflow/hooks/use-workflow-comment.ts
index 90b0da25d2..42eae29705 100644
--- a/web/app/components/workflow/hooks/use-workflow-comment.ts
+++ b/web/app/components/workflow/hooks/use-workflow-comment.ts
@@ -73,9 +73,16 @@ export const useWorkflowComment = () => {
   }, [setControlMode, setPendingComment])
 
   const handleCommentIconClick = useCallback((comment: WorkflowCommentList) => {
-    // TODO: display comment details
-    console.log('Comment clicked:', comment)
-  }, [])
+    try {
+      const store = useStore.getState()
+      store.setControlMode(ControlMode.Comment)
+      store.setActiveCommentId(comment.id)
+      reactflow.setCenter(comment.position_x, comment.position_y, { zoom: 1, duration: 600 })
+    }
+    catch (e) {
+      console.error('Failed to open comments panel:', e)
+    }
+  }, [reactflow])
 
   const handleCreateComment = useCallback((mousePosition: { pageX: number; pageY: number }) => {
     if (controlMode === ControlMode.Comment) {
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
new file mode 100644
index 0000000000..64a2f39792
--- /dev/null
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -0,0 +1,88 @@
+import { memo, useCallback, useMemo } from 'react'
+import { useReactFlow } from 'reactflow'
+import { RiCloseLine } from '@remixicon/react'
+import { useStore } from '@/app/components/workflow/store'
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { useWorkflowComment } from '@/app/components/workflow/hooks/use-workflow-comment'
+import Avatar from '@/app/components/base/avatar'
+import cn from '@/utils/classnames'
+import { ControlMode } from '@/app/components/workflow/types'
+
+const CommentsPanel = () => {
+  const activeCommentId = useStore(s => s.activeCommentId)
+  const setActiveCommentId = useStore(s => s.setActiveCommentId)
+  const setControlMode = useStore(s => s.setControlMode)
+  const { comments, loading } = useWorkflowComment()
+  const reactFlow = useReactFlow()
+
+  const handleSelect = useCallback((comment: WorkflowCommentList) => {
+    // center viewport on the comment position and activate it
+    reactFlow.setCenter(comment.position_x, comment.position_y, { zoom: 1, duration: 600 })
+    setActiveCommentId(comment.id)
+  }, [reactFlow, setActiveCommentId])
+
+  const sorted = useMemo(() => {
+    return [...comments].sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+  }, [comments])
+
+  return (
+    <div className={cn('relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt')}>
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-2 text-text-primary'>
+        Comments
+        <div className='flex items-center'>
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={() => {
+              setControlMode(ControlMode.Pointer)
+              setActiveCommentId(null)
+            }}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='system-sm-regular shrink-0 px-4 pb-2 text-text-tertiary'>
+        {loading ? 'Loading…' : `${sorted.length} comment${sorted.length === 1 ? '' : 's'}`}
+      </div>
+      <div className='grow overflow-y-auto px-3 pb-4'>
+        {sorted.map((c) => {
+          const isActive = activeCommentId === c.id
+          return (
+            <div
+              key={c.id}
+              className={cn(
+                'group mb-2 cursor-pointer rounded-xl border border-components-panel-border bg-components-panel-bg p-3 transition-colors hover:bg-components-panel-on-panel-item-bg-hover',
+                isActive && 'ring-1 ring-primary-500',
+              )}
+              onClick={() => handleSelect(c)}
+            >
+              <div className='flex items-start gap-2'>
+                <Avatar
+                  avatar={c.created_by_account.avatar_url || null}
+                  name={c.created_by_account.name}
+                  size={28}
+                  className='shrink-0'
+                />
+                <div className='min-w-0 flex-1'>
+                  <div className='flex items-center gap-2'>
+                    <div className='system-sm-medium truncate text-text-primary'>{c.created_by_account.name}</div>
+                    {c.resolved && <span className='system-2xs-medium rounded-md bg-util-colors-green-green-100 px-1 py-0.5 text-util-colors-green-green-700'>Resolved</span>}
+                  </div>
+                  <div className='system-sm-regular mt-0.5 line-clamp-3 break-words text-text-secondary'>{c.content}</div>
+                  <div className='system-2xs-regular mt-1 text-text-tertiary'>
+                    {c.reply_count} replies • {c.mention_count} mentions
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+        {!loading && sorted.length === 0 && (
+          <div className='system-sm-regular mt-6 text-center text-text-tertiary'>No comments yet</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default memo(CommentsPanel)
diff --git a/web/app/components/workflow/store/workflow/panel-slice.ts b/web/app/components/workflow/store/workflow/panel-slice.ts
index 855f45f264..b6809b5243 100644
--- a/web/app/components/workflow/store/workflow/panel-slice.ts
+++ b/web/app/components/workflow/store/workflow/panel-slice.ts
@@ -10,6 +10,8 @@ export type PanelSliceShape = {
   setShowInputsPanel: (showInputsPanel: boolean) => void
   showDebugAndPreviewPanel: boolean
   setShowDebugAndPreviewPanel: (showDebugAndPreviewPanel: boolean) => void
+  showCommentsPanel: boolean
+  setShowCommentsPanel: (showCommentsPanel: boolean) => void
   panelMenu?: {
     top: number
     left: number
@@ -19,6 +21,8 @@ export type PanelSliceShape = {
   setShowVariableInspectPanel: (showVariableInspectPanel: boolean) => void
   initShowLastRunTab: boolean
   setInitShowLastRunTab: (initShowLastRunTab: boolean) => void
+  activeCommentId?: string | null
+  setActiveCommentId: (commentId: string | null) => void
 }
 
 export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
@@ -31,10 +35,14 @@ export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   setShowInputsPanel: showInputsPanel => set(() => ({ showInputsPanel })),
   showDebugAndPreviewPanel: false,
   setShowDebugAndPreviewPanel: showDebugAndPreviewPanel => set(() => ({ showDebugAndPreviewPanel })),
+  showCommentsPanel: false,
+  setShowCommentsPanel: showCommentsPanel => set(() => ({ showCommentsPanel })),
   panelMenu: undefined,
   setPanelMenu: panelMenu => set(() => ({ panelMenu })),
   showVariableInspectPanel: false,
   setShowVariableInspectPanel: showVariableInspectPanel => set(() => ({ showVariableInspectPanel })),
   initShowLastRunTab: false,
   setInitShowLastRunTab: initShowLastRunTab => set(() => ({ initShowLastRunTab })),
+  activeCommentId: null,
+  setActiveCommentId: (commentId: string | null) => set(() => ({ activeCommentId: commentId })),
 })