Merge remote-tracking branch 'origin/p254' into p284

2026-05-06 02:18:08 +08:00 · 2025-09-18 15:14:55 +08:00
parent 847d257366 687662cf1f
commit 81c6e52401
64 changed files with 11839 additions and 1363 deletions
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@ -0,0 +1,195 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useReactFlow } from 'reactflow'
+import Avatar from '@/app/components/base/avatar'
+import { useCollaboration } from '../collaboration/hooks/use-collaboration'
+import { useStore } from '../store'
+import cn from '@/utils/classnames'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/solid/arrows'
+import { getUserColor } from '../collaboration/utils/user-color'
+import Tooltip from '@/app/components/base/tooltip'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useAppContext } from '@/context/app-context'
+import { getAvatar } from '@/service/common'
+
+const useAvatarUrls = (users: any[]) => {
+  const [avatarUrls, setAvatarUrls] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    const fetchAvatars = async () => {
+      const newAvatarUrls: Record<string, string> = {}
+
+      await Promise.all(
+        users.map(async (user) => {
+          if (user.avatar) {
+            try {
+              const response = await getAvatar({ avatar: user.avatar })
+              newAvatarUrls[user.sid] = response.avatar_url
+            }
+            catch (error) {
+              console.error('Failed to fetch avatar:', error)
+              newAvatarUrls[user.sid] = user.avatar
+            }
+          }
+        }),
+      )
+
+      setAvatarUrls(newAvatarUrls)
+    }
+
+    if (users.length > 0)
+      fetchAvatars()
+  }, [users])
+
+  return avatarUrls
+}
+
+const OnlineUsers = () => {
+  const appId = useStore(s => s.appId)
+  const { onlineUsers, cursors } = useCollaboration(appId)
+  const { userProfile } = useAppContext()
+  const reactFlow = useReactFlow()
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const avatarUrls = useAvatarUrls(onlineUsers || [])
+
+  const currentUserId = userProfile?.id
+
+  // Function to jump to user's cursor position
+  const jumpToUserCursor = (userId: string) => {
+    const cursor = cursors[userId]
+    if (!cursor) return
+
+    // Convert world coordinates to center the view on the cursor
+    reactFlow.setCenter(cursor.x, cursor.y, { zoom: 1, duration: 800 })
+  }
+
+  if (!onlineUsers || onlineUsers.length === 0)
+    return null
+
+  // Display logic:
+  // 1-3 users: show all avatars
+  // 4+ users: show 2 avatars + count + arrow
+  const shouldShowCount = onlineUsers.length >= 4
+  const maxVisible = shouldShowCount ? 2 : 3
+  const visibleUsers = onlineUsers.slice(0, maxVisible)
+  const remainingCount = onlineUsers.length - maxVisible
+
+  const getAvatarUrl = (user: any) => {
+    return avatarUrls[user.sid] || user.avatar
+  }
+
+  return (
+    <div className="flex items-center rounded-full bg-white px-1 py-1">
+      <div className="flex items-center">
+        <div className="flex items-center -space-x-2">
+          {visibleUsers.map((user, index) => {
+            const isCurrentUser = user.user_id === currentUserId
+            const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+            const displayName = isCurrentUser
+              ? `${user.username || 'User'} (You)`
+              : (user.username || 'User')
+
+            return (
+              <Tooltip
+                key={`${user.sid}-${index}`}
+                popupContent={displayName}
+                position="bottom"
+                triggerMethod="hover"
+                needsDelay={false}
+                asChild
+              >
+                <div
+                  className={cn(
+                    'relative',
+                    !isCurrentUser && 'cursor-pointer transition-transform hover:scale-110',
+                  )}
+                  style={{ zIndex: visibleUsers.length - index }}
+                  onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
+                >
+                  <Avatar
+                    name={user.username || 'User'}
+                    avatar={getAvatarUrl(user)}
+                    size={28}
+                    className="ring-2 ring-white"
+                    backgroundColor={userColor}
+                  />
+                </div>
+              </Tooltip>
+            )
+          })}
+          {remainingCount > 0 && (
+            <PortalToFollowElem
+              open={dropdownOpen}
+              onOpenChange={setDropdownOpen}
+              placement="bottom-start"
+            >
+              <PortalToFollowElemTrigger
+                onMouseEnter={() => setDropdownOpen(true)}
+                onMouseLeave={() => setDropdownOpen(false)}
+                asChild
+              >
+                <div className="flex items-center">
+                  <div
+                    className={cn(
+                      'flex h-7 w-7 items-center justify-center',
+                      'cursor-pointer rounded-full bg-gray-300',
+                      'text-xs font-medium text-gray-700',
+                      'ring-2 ring-white',
+                    )}
+                  >
+                    +{remainingCount}
+                  </div>
+                  <ChevronDown className="ml-1 h-3 w-3 text-gray-500" />
+                </div>
+              </PortalToFollowElemTrigger>
+              <PortalToFollowElemContent
+                onMouseEnter={() => setDropdownOpen(true)}
+                onMouseLeave={() => setDropdownOpen(false)}
+                className="z-[9999]"
+              >
+                <div className="mt-2 min-w-[200px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
+                  {onlineUsers.map((user) => {
+                    const isCurrentUser = user.user_id === currentUserId
+                    const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+                    const displayName = isCurrentUser
+                      ? `${user.username || 'User'} (You)`
+                      : (user.username || 'User')
+
+                    return (
+                      <div
+                        key={user.sid}
+                        className={cn(
+                          'flex items-center gap-2 rounded-lg px-3 py-2',
+                          !isCurrentUser && 'cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover',
+                        )}
+                        onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
+                      >
+                        <div className="relative">
+                          <Avatar
+                            name={user.username || 'User'}
+                            avatar={getAvatarUrl(user)}
+                            size={24}
+                            backgroundColor={userColor}
+                          />
+                        </div>
+                        <span className="text-sm text-text-secondary">
+                          {displayName}
+                        </span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </PortalToFollowElemContent>
+            </PortalToFollowElem>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OnlineUsers