opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-13 22:57:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve the icon display on canvas

Browse Source
This commit is contained in:
hjlarry 2025-09-18 11:49:43 +08:00
parent 088ccf8b8d
commit 6432d98469
1 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/app/components/workflow/comment/icon.tsx
View File

@ -1,7 +1,7 @@
import type { FC } from 'react'
import { memo, useMemo } from 'react'
import { useReactFlow, useViewport } from 'reactflow'
import Avatar from '@/app/components/base/avatar'
import { UserAvatarList } from '@/app/components/base/user-avatar-list'
import type { WorkflowCommentList } from '@/service/workflow-comment'
type CommentIconProps = {
@ -20,6 +20,18 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick }) =>
})
}, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
// Calculate dynamic width based on number of participants
const participantCount = comment.participants?.length || 0
const maxVisible = Math.min(3, participantCount)
const showCount = participantCount > 3
const avatarSize = 24
const avatarSpacing = 4 // -space-x-1 is about 4px overlap
// Width calculation: first avatar + (additional avatars * (size - spacing)) + padding
const dynamicWidth = Math.max(40, // minimum width
8 + avatarSize + Math.max(0, (showCount ? 2 : maxVisible - 1)) * (avatarSize - avatarSpacing) + 8,
)
return (
<div
className="absolute z-10 cursor-pointer"
@ -30,17 +42,17 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick }) =>
}}
onClick={onClick}
>
<div className="relative h-10 w-10 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full">
<div
className={'relative h-10 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full'}
style={{ width: dynamicWidth }}
>
<div className="absolute inset-1 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full bg-white">
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 overflow-hidden rounded-full">
<Avatar
avatar={comment.created_by_account.avatar_url || null}
name={comment.created_by_account.name}
size={24}
className="h-full w-full"
/>
</div>
<div className="flex h-full w-full items-center justify-center px-1">
<UserAvatarList
users={comment.participants}
maxVisible={3}
size={24}
/>
</div>
</div>
</div>