From b442ba8b2ba150c590837c1326af05f4d76d4f4a Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Fri, 19 Sep 2025 12:07:07 +0800
Subject: [PATCH] fix UserAvatarList background color

---
 .../base/user-avatar-list/index.tsx           | 40 ++++++++++++-------
 .../workflow/header/online-users.tsx          |  2 +-
 .../_base/components/workflow-panel/index.tsx |  2 +-
 .../components/workflow/nodes/_base/node.tsx  |  2 +-
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
index 5b3724bd58..e9325a985d 100644
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -1,5 +1,7 @@
 import type { FC } from 'react'
 import { memo } from 'react'
+import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
+import { useAppContext } from '@/context/app-context'
 import Avatar from '@/app/components/base/avatar'
 
 type User = {
@@ -23,6 +25,7 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
   className = '',
   showCount = true,
 }) => {
+  const { userProfile } = useAppContext()
   if (!users.length) return null
 
   const shouldShowCount = showCount && users.length > maxVisible
@@ -30,22 +33,31 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
   const visibleUsers = users.slice(0, actualMaxVisible)
   const remainingCount = users.length - actualMaxVisible
 
+  const currentUserId = userProfile?.id
+
   return (
     <div className={`flex items-center -space-x-1 ${className}`}>
-      {visibleUsers.map((user, index) => (
-        <div
-          key={`${user.id}-${index}`}
-          className='relative'
-          style={{ zIndex: visibleUsers.length - index }}
-        >
-          <Avatar
-            name={user.name}
-            avatar={user.avatar_url || null}
-            size={size}
-            className='ring-2 ring-white'
-          />
-        </div>
-      ))}
+      {visibleUsers.map((user, index) => {
+        const isCurrentUser = user.id === currentUserId
+        const userColor = isCurrentUser ? undefined : getUserColor(user.id)
+        return (
+          <div
+            key={`${user.id}-${index}`}
+            className='relative'
+            style={{ zIndex: visibleUsers.length - index }}
+          >
+            <Avatar
+              name={user.name}
+              avatar={user.avatar_url || null}
+              size={size}
+              className='ring-2 ring-white'
+              backgroundColor={userColor}
+            />
+          </div>
+        )
+      },
+
+      )}
       {shouldShowCount && remainingCount > 0 && (
         <div
           className={'flex items-center justify-center rounded-full bg-components-panel-on-panel-item-bg text-[10px] leading-none text-text-secondary ring-2 ring-white'}
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index 42643ad626..6d4860e809 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -50,7 +50,7 @@ const useAvatarUrls = (users: any[]) => {
 
 const OnlineUsers = () => {
   const appId = useStore(s => s.appId)
-  const { onlineUsers, cursors } = useCollaboration(appId)
+  const { onlineUsers, cursors } = useCollaboration(appId as string)
   const { userProfile } = useAppContext()
   const reactFlow = useReactFlow()
   const [dropdownOpen, setDropdownOpen] = useState(false)
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 06b0fd8ee6..48257e0972 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -140,7 +140,7 @@ const BasePanel: FC<BasePanelProps> = ({
     return Object.values(presence)
       .filter(viewer => viewer.userId && viewer.userId !== currentUserPresence.userId)
       .map(viewer => ({
-        id: viewer.clientId,
+        id: viewer.userId,
         name: viewer.username,
         avatar_url: viewer.avatar || null,
       }))
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index f09126fd37..5e774f7d31 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -93,7 +93,7 @@ const BaseNode: FC<BaseNodeProps> = ({
     return Object.values(presence)
       .filter(viewer => viewer.userId && viewer.userId !== currentUserPresence.userId)
       .map(viewer => ({
-        id: viewer.clientId,
+        id: viewer.userId,
         name: viewer.username,
         avatar_url: viewer.avatar || null,
       }))