diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx index 873a824eff..1e487ce649 100644 --- a/web/app/components/workflow/comment/comment-icon.tsx +++ b/web/app/components/workflow/comment/comment-icon.tsx @@ -137,8 +137,17 @@ export const CommentIcon: FC = memo(({ comment, onClick, isAct setShowPreview(false) }, []) + const participants = useMemo(() => { + const list = comment.participants ?? [] + const author = comment.created_by_account + if (!author) + return [...list] + const rest = list.filter(user => user.id !== author.id) + return [author, ...rest] + }, [comment.created_by_account, comment.participants]) + // Calculate dynamic width based on number of participants - const participantCount = comment.participants?.length || 0 + const participantCount = participants.length const maxVisible = Math.min(3, participantCount) const showCount = participantCount > 3 const avatarSize = 24 @@ -184,7 +193,7 @@ export const CommentIcon: FC = memo(({ comment, onClick, isAct }`}>
diff --git a/web/app/components/workflow/comment/comment-preview.tsx b/web/app/components/workflow/comment/comment-preview.tsx index 94b356edd8..65909a7e89 100644 --- a/web/app/components/workflow/comment/comment-preview.tsx +++ b/web/app/components/workflow/comment/comment-preview.tsx @@ -1,7 +1,7 @@ 'use client' import type { FC } from 'react' -import { memo } from 'react' +import { memo, useMemo } from 'react' import { UserAvatarList } from '@/app/components/base/user-avatar-list' import type { WorkflowCommentList } from '@/service/workflow-comment' import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now' @@ -13,6 +13,14 @@ type CommentPreviewProps = { const CommentPreview: FC = ({ comment, onClick }) => { const { formatTimeFromNow } = useFormatTimeFromNow() + const participants = useMemo(() => { + const list = comment.participants ?? [] + const author = comment.created_by_account + if (!author) + return [...list] + const rest = list.filter(user => user.id !== author.id) + return [author, ...rest] + }, [comment.created_by_account, comment.participants]) return (
= ({ comment, onClick }) => { >