From 89bed479e40382e7ff9f5b39d26f3b1dd3604279 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Tue, 16 Sep 2025 17:25:51 +0800
Subject: [PATCH] improve comment panel

---
 api/fields/workflow_comment_fields.py         |  31 ++--
 .../workflow/panel/comments-panel/index.tsx   | 138 +++++++++++-------
 2 files changed, 99 insertions(+), 70 deletions(-)

diff --git a/api/fields/workflow_comment_fields.py b/api/fields/workflow_comment_fields.py
index d1530b5c5f..c25c7adc5d 100644
--- a/api/fields/workflow_comment_fields.py
+++ b/api/fields/workflow_comment_fields.py
@@ -2,13 +2,18 @@ from flask_restful import fields
 
 from libs.helper import AvatarUrlField, TimestampField
 
-# Basic account fields for comment creators/resolvers
-comment_account_fields = {"id": fields.String, "name": fields.String, "email": fields.String}
+# basic account fields for comments
+account_fields = {
+    "id": fields.String,
+    "name": fields.String,
+    "email": fields.String,
+    "avatar_url": AvatarUrlField,
+}
 
 # Comment mention fields
 workflow_comment_mention_fields = {
     "mentioned_user_id": fields.String,
-    "mentioned_user_account": fields.Nested(comment_account_fields, allow_null=True),
+    "mentioned_user_account": fields.Nested(account_fields, allow_null=True),
     "reply_id": fields.String,
 }
 
@@ -17,18 +22,10 @@ workflow_comment_reply_fields = {
     "id": fields.String,
     "content": fields.String,
     "created_by": fields.String,
-    "created_by_account": fields.Nested(comment_account_fields, allow_null=True),
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
     "created_at": TimestampField,
 }
 
-# Participant info for showing avatars
-workflow_comment_participant_fields = {
-    "id": fields.String,
-    "name": fields.String,
-    "email": fields.String,
-    "avatar_url": AvatarUrlField,
-}
-
 # Basic comment fields (for list views)
 workflow_comment_basic_fields = {
     "id": fields.String,
@@ -36,16 +33,16 @@ workflow_comment_basic_fields = {
     "position_y": fields.Float,
     "content": fields.String,
     "created_by": fields.String,
-    "created_by_account": fields.Nested(comment_account_fields, allow_null=True),
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
     "created_at": TimestampField,
     "updated_at": TimestampField,
     "resolved": fields.Boolean,
     "resolved_at": TimestampField,
     "resolved_by": fields.String,
-    "resolved_by_account": fields.Nested(comment_account_fields, allow_null=True),
+    "resolved_by_account": fields.Nested(account_fields, allow_null=True),
     "reply_count": fields.Integer,
     "mention_count": fields.Integer,
-    "participants": fields.List(fields.Nested(workflow_comment_participant_fields)),
+    "participants": fields.List(fields.Nested(account_fields)),
 }
 
 # Detailed comment fields (for single comment view)
@@ -55,13 +52,13 @@ workflow_comment_detail_fields = {
     "position_y": fields.Float,
     "content": fields.String,
     "created_by": fields.String,
-    "created_by_account": fields.Nested(comment_account_fields, allow_null=True),
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
     "created_at": TimestampField,
     "updated_at": TimestampField,
     "resolved": fields.Boolean,
     "resolved_at": TimestampField,
     "resolved_by": fields.String,
-    "resolved_by_account": fields.Nested(comment_account_fields, allow_null=True),
+    "resolved_by_account": fields.Nested(account_fields, allow_null=True),
     "replies": fields.List(fields.Nested(workflow_comment_reply_fields)),
     "mentions": fields.List(fields.Nested(workflow_comment_mention_fields)),
 }
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
index 4154b772cd..c2fbc1e903 100644
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useReactFlow } from 'reactflow'
-import { RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine } from '@remixicon/react'
+import { RiCheckLine, RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine, RiFilter3Line } 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'
@@ -10,6 +10,7 @@ import { ControlMode } from '@/app/components/workflow/types'
 import { resolveWorkflowComment } from '@/service/workflow-comment'
 import { useParams } from 'next/navigation'
 import { useFormatTimeFromNow } from '@/app/components/workflow/hooks'
+import { useAppContext } from '@/context/app-context'
 
 const CommentsPanel = () => {
   const activeCommentId = useStore(s => s.activeCommentId)
@@ -21,7 +22,8 @@ const CommentsPanel = () => {
   const appId = params.appId as string
   const { formatTimeFromNow } = useFormatTimeFromNow()
 
-  const [filter, setFilter] = useState<'all' | 'unresolved'>('all')
+  const [filter, setFilter] = useState<'all' | 'unresolved' | 'mine'>('all')
+  const [showFilter, setShowFilter] = useState(false)
 
   const handleSelect = useCallback((comment: WorkflowCommentList) => {
     // center viewport on the comment position and activate it
@@ -29,12 +31,16 @@ const CommentsPanel = () => {
     setActiveCommentId(comment.id)
   }, [reactFlow, setActiveCommentId])
 
+  const { userProfile } = useAppContext()
+
   const filteredSorted = useMemo(() => {
     let data = comments
     if (filter === 'unresolved')
       data = data.filter(c => !c.resolved)
+    else if (filter === 'mine')
+      data = data.filter(c => c.created_by === userProfile?.id)
     return data
-  }, [comments, filter])
+  }, [comments, filter, userProfile?.id])
 
   const handleResolve = useCallback(async (comment: WorkflowCommentList) => {
     if (comment.resolved) return
@@ -49,24 +55,48 @@ const CommentsPanel = () => {
     }
   }, [appId, loadComments, setActiveCommentId])
 
+  const handleFilterChange = useCallback((value: 'all' | 'unresolved' | 'mine') => {
+    setFilter(value)
+    setShowFilter(false)
+  }, [])
+
   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={cn('relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg')}>
       <div className='flex items-center justify-between p-4 pb-2'>
         <div className='system-xl-semibold text-text-primary'>Comments</div>
-        <div className='flex items-center gap-2'>
-          <div
-            className={cn('inline-flex rounded-md bg-components-panel-on-panel-item-bg px-1 py-1')}
-            role='group'
+        <div className='relative flex items-center gap-2'>
+          <button
+            className='flex h-8 w-8 items-center justify-center rounded-md bg-white hover:bg-state-base-hover'
+            aria-label='Filter comments'
+            onClick={() => setShowFilter(v => !v)}
           >
-            <button
-              className={cn('system-xs-medium rounded px-2 py-1', filter === 'all' ? 'bg-white text-text-primary' : 'text-text-tertiary hover:text-text-secondary')}
-              onClick={() => setFilter('all')}
-            >All</button>
-            <button
-              className={cn('system-xs-medium rounded px-2 py-1', filter === 'unresolved' ? 'bg-white text-text-primary' : 'text-text-tertiary hover:text-text-secondary')}
-              onClick={() => setFilter('unresolved')}
-            >Unresolved</button>
-          </div>
+            <RiFilter3Line className='h-4 w-4 text-text-secondary' />
+          </button>
+          {showFilter && (
+            <div className='absolute right-10 top-9 z-50 w-40 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
+              <button
+                className={cn('flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', filter === 'all' && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => handleFilterChange('all')}
+              >
+                <span>All</span>
+                {filter === 'all' && <RiCheckLine className='h-4 w-4 text-text-secondary' />}
+              </button>
+              <button
+                className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', filter === 'unresolved' && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => handleFilterChange('unresolved')}
+              >
+                <span>Unresolved</span>
+                {filter === 'unresolved' && <RiCheckLine className='h-4 w-4 text-text-secondary' />}
+              </button>
+              <button
+                className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', filter === 'mine' && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => handleFilterChange('mine')}
+              >
+                <span>Only your threads</span>
+                {filter === 'mine' && <RiCheckLine className='h-4 w-4 text-text-secondary' />}
+              </button>
+            </div>
+          )}
           <div
             className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={() => {
@@ -78,13 +108,13 @@ const CommentsPanel = () => {
           </div>
         </div>
       </div>
-      <div className='grow overflow-y-auto px-3 pb-4'>
+      <div className='grow overflow-y-auto px-1'>
         {filteredSorted.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')}
+              className={cn('group mb-2 cursor-pointer rounded-xl bg-components-panel-bg p-3 transition-colors hover:bg-components-panel-on-panel-item-bg-hover', isActive && 'bg-components-panel-on-panel-item-bg-hover')}
               onClick={() => handleSelect(c)}
             >
               <div className='min-w-0'>
@@ -103,50 +133,52 @@ const CommentsPanel = () => {
                   const visibleUsers = all.slice(0, maxVisible)
                   const remainingCount = all.length - maxVisible
                   return (
-                    <div className='mb-1 flex items-center -space-x-1'>
-                      {visibleUsers.map((p, index) => (
-                        <div
-                          key={`${p.id}-${index}`}
-                          className='relative'
-                          style={{ zIndex: visibleUsers.length - index }}
-                        >
-                          <Avatar
-                            name={p.name}
-                            avatar={p.avatar_url || null}
-                            size={18}
-                            className='ring-2 ring-white'
+                    <div className='mb-1 flex items-center justify-between'>
+                      <div className='flex items-center -space-x-1'>
+                        {visibleUsers.map((p, index) => (
+                          <div
+                            key={`${p.id}-${index}`}
+                            className='relative'
+                            style={{ zIndex: visibleUsers.length - index }}
+                          >
+                            <Avatar
+                              name={p.name}
+                              avatar={p.avatar_url || null}
+                              size={24}
+                              className='ring-2 ring-white'
+                            />
+                          </div>
+                        ))}
+                        {remainingCount > 0 && (
+                          <div
+                            className='flex h-[24px] w-[24px] items-center justify-center rounded-full bg-components-panel-on-panel-item-bg text-[10px] leading-none text-text-secondary ring-2 ring-white'
+                            style={{ zIndex: 0 }}
+                          >
+                            +{remainingCount}
+                          </div>
+                        )}
+                      </div>
+                      <div className='ml-2 flex items-center'>
+                        {c.resolved ? (
+                          <RiCheckboxCircleFill className='h-4 w-4 text-text-secondary'/>
+                        ) : (
+                          <RiCheckboxCircleLine
+                            className='h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary'
+                            onClick={() => handleResolve(c)}
                           />
-                        </div>
-                      ))}
-                      {remainingCount > 0 && (
-                        <div
-                          className='flex h-[18px] w-[18px] items-center justify-center rounded-full bg-components-panel-on-panel-item-bg text-[10px] leading-none text-text-secondary ring-2 ring-white'
-                          style={{ zIndex: 0 }}
-                        >
-                          +{remainingCount}
-                        </div>
-                      )}
+                        )}
+                      </div>
                     </div>
                   )
                 })()}
-                {/* Header row: creator + time + right-top status/action icons */}
-                <div className='flex items-start justify-between'>
+                {/* Header row: creator + time */}
+                <div className='flex items-start'>
                   <div className='flex min-w-0 items-center gap-2'>
                     <div className='system-sm-medium truncate text-text-primary'>{c.created_by_account.name}</div>
                     <div className='system-2xs-regular shrink-0 text-text-tertiary'>
                       {formatTimeFromNow(c.updated_at * 1000)}
                     </div>
                   </div>
-                  <div className='flex items-center gap-1'>
-                    {c.resolved ? (
-                      <RiCheckboxCircleFill className='h-4 w-4'/>
-                    ) : (
-                      <RiCheckboxCircleLine
-                        className='h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary'
-                        onClick={() => { handleResolve(c) }}
-                      />
-                    )}
-                  </div>
                 </div>
                 {/* Content */}
                 <div className='system-sm-regular mt-1 line-clamp-3 break-words text-text-secondary'>{c.content}</div>