From 20320f3a27162fbd5aee3d804aef72cfbf2cc21a Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Sat, 6 Sep 2025 00:08:17 +0800
Subject: [PATCH] show online users on the canvas

---
 .../workflow/header/header-in-normal.tsx      |  3 ++
 .../workflow/header/online-users.tsx          | 50 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 web/app/components/workflow/header/online-users.tsx

diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 5768e6bc06..bfce06aca9 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -17,6 +17,7 @@ import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
 import EnvButton from './env-button'
 import VersionHistoryButton from './version-history-button'
+import OnlineUsers from './online-users'
 
 export type HeaderInNormalProps = {
   components?: {
@@ -60,6 +61,8 @@ const HeaderInNormal = ({
       </div>
       <div className='flex items-center gap-2'>
         {components?.left}
+        <OnlineUsers />
+        <Divider type='vertical' className='mx-auto h-3.5' />
         <EnvButton disabled={nodesReadOnly} />
         <Divider type='vertical' className='mx-auto h-3.5' />
         <RunAndHistory />
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
new file mode 100644
index 0000000000..4d868cf57f
--- /dev/null
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -0,0 +1,50 @@
+'use client'
+import Avatar from '@/app/components/base/avatar'
+import { useCollaboration } from '../collaboration/hooks/use-collaboration'
+import { useStore } from '../store'
+import cn from '@/utils/classnames'
+
+const OnlineUsers = () => {
+  const appId = useStore(s => s.appId)
+  const { onlineUsers } = useCollaboration(appId)
+
+  if (!onlineUsers || onlineUsers.length === 0)
+    return null
+
+  // Show max 2 avatars directly, rest as count
+  const visibleUsers = onlineUsers.slice(0, 2)
+  const remainingCount = onlineUsers.length - 2
+
+  return (
+    <div className="flex items-center -space-x-2">
+      {visibleUsers.map((user, index) => (
+        <div
+          key={`${user.sid}-${index}`}
+          className="relative"
+          style={{ zIndex: visibleUsers.length - index }}
+        >
+          <Avatar
+            name={user.username || 'User'}
+            avatar={user.avatar}
+            size={28}
+            className="ring-2 ring-white"
+          />
+        </div>
+      ))}
+      {remainingCount > 0 && (
+        <div
+          className={cn(
+            'flex items-center justify-center',
+            'h-7 w-7 rounded-full bg-gray-300',
+            'text-xs font-medium text-gray-700',
+            'ring-2 ring-white',
+          )}
+        >
+          +{remainingCount}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default OnlineUsers