Merge branch 'feat/collaboration' into feat/collaboration2

web/app/components/workflow/header/header-in-normal.tsx

@@ -18,6 +18,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'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import ScrollToSelectedNodeButton from './scroll-to-selected-node-button'
 import GlobalVariableButton from './global-variable-button'
@@ -72,8 +73,11 @@ const HeaderInNormal = ({
         <ScrollToSelectedNodeButton />
       </div>
       <div className='flex items-center gap-2'>
+        <OnlineUsers />
         {components?.left}
         <Divider type='vertical' className='mx-auto h-3.5' />
+        <EnvButton disabled={nodesReadOnly} />
+        <Divider type='vertical' className='mx-auto h-3.5' />
         <RunAndHistory {...runAndHistoryProps} />
         <div className='shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]'>
           {components?.chatVariableTrigger}

web/app/components/workflow/header/header-in-restoring.tsx

@@ -19,8 +19,10 @@ import RestoringTitle from './restoring-title'
 import Button from '@/app/components/base/button'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { useHooksStore } from '../hooks-store'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import useTheme from '@/hooks/use-theme'
 import cn from '@/utils/classnames'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
@@ -31,6 +33,7 @@ const HeaderInRestoring = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
+  const appDetail = useAppStore.getState().appDetail
   const configsMap = useHooksStore(s => s.configsMap)
   const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId)
   const {
@@ -60,6 +63,9 @@ const HeaderInRestoring = ({
           type: 'success',
           message: t('workflow.versionHistory.action.restoreSuccess'),
         })
+        // Notify other collaboration clients about the workflow restore
+        if (appDetail)
+          collaborationManager.emitWorkflowUpdate(appDetail.id)
       },
       onError: () => {
         Toast.notify({
@@ -70,10 +76,10 @@ const HeaderInRestoring = ({
       onSettled: () => {
         onRestoreSettled?.()
       },
-    })
+    }, true) // Enable forceUpload for restore operation
     deleteAllInspectVars()
     invalidAllLastRun()
-  }, [setShowWorkflowVersionHistoryPanel, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled])
+  }, [setShowWorkflowVersionHistoryPanel, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled, appDetail])
 
   return (
     <>

web/app/components/workflow/header/online-users.tsx

@@ -0,0 +1,238 @@
+'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 { ChevronDownIcon } from '@heroicons/react/20/solid'
+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, isEnabled: isCollaborationEnabled } = useCollaboration(appId as string)
+  const { userProfile } = useAppContext()
+  const reactFlow = useReactFlow()
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const avatarUrls = useAvatarUrls(onlineUsers || [])
+
+  const currentUserId = userProfile?.id
+
+  const renderDisplayName = (
+    user: any,
+    baseClassName: string,
+    suffixClassName: string,
+  ) => {
+    const baseName = user.username || 'User'
+    const isCurrentUser = user.user_id === currentUserId
+
+    return (
+      <span className={cn('inline-flex items-center gap-1', baseClassName)}>
+        <span>{baseName}</span>
+        {isCurrentUser && (
+          <span className={suffixClassName}>
+            (You)
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  // 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 (!isCollaborationEnabled || !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
+  }
+
+  const hasCounter = remainingCount > 0
+
+  return (
+    <div
+      className={cn(
+        'flex h-8 items-center rounded-full border-[0.5px] border-components-panel-border',
+        'bg-components-panel-bg py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]',
+        hasCounter ? 'min-w-[87px] gap-px pl-1 pr-1.5' : 'gap-1 px-1.5',
+      )}
+    >
+      <div className="flex h-6 items-center">
+        <div className="flex items-center">
+          {visibleUsers.map((user, index) => {
+            const isCurrentUser = user.user_id === currentUserId
+            const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+            return (
+              <Tooltip
+                key={`${user.sid}-${index}`}
+                popupContent={renderDisplayName(
+                  user,
+                  'system-xs-medium text-text-secondary',
+                  'text-text-quaternary',
+                )}
+                position="bottom"
+                triggerMethod="hover"
+                needsDelay={false}
+                asChild
+                popupClassName="flex h-[28px] w-[85px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
+                noDecoration
+              >
+                <div
+                  className={cn(
+                    'relative flex size-6 items-center justify-center',
+                    index > 0 && '-ml-1.5',
+                    !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={24}
+                    className="ring-1 ring-components-panel-bg"
+                    backgroundColor={userColor}
+                  />
+                </div>
+              </Tooltip>
+            )
+          })}
+          {remainingCount > 0 && (
+            <PortalToFollowElem
+              open={dropdownOpen}
+              onOpenChange={setDropdownOpen}
+              placement="bottom-start"
+              offset={{
+                mainAxis: 8,
+                crossAxis: -48,
+              }}
+            >
+              <PortalToFollowElemTrigger
+                onClick={() => setDropdownOpen(prev => !prev)}
+                asChild
+              >
+                <div className="flex items-center gap-1">
+                  <div
+                    className={cn(
+                      'flex h-6 w-6 cursor-pointer select-none items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-[10px] font-semibold uppercase leading-[12px] text-white ring-1 ring-components-panel-bg',
+                      visibleUsers.length > 0 && '-ml-1',
+                    )}
+                  >
+                    +{remainingCount}
+                  </div>
+                  <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
+                </div>
+              </PortalToFollowElemTrigger>
+              <PortalToFollowElemContent
+                className="z-[9999]"
+              >
+                <div
+                  className={cn(
+                    'mt-1.5',
+                    'flex flex-col',
+                    'max-h-[200px] w-[240px] overflow-y-auto',
+                    'rounded-xl border-[0.5px] border-components-panel-border',
+                    'bg-components-panel-bg-blur p-1',
+                    'shadow-lg shadow-shadow-shadow-5',
+                    'backdrop-blur-[10px]',
+                  )}
+                >
+                  {onlineUsers.map((user) => {
+                    const isCurrentUser = user.user_id === currentUserId
+                    const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+                    return (
+                      <div
+                        key={user.sid}
+                        className={cn(
+                          'flex items-center gap-2 rounded-lg px-3 py-1.5',
+                          !isCurrentUser && 'cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover',
+                        )}
+                        onClick={() => {
+                          if (!isCurrentUser) {
+                            jumpToUserCursor(user.user_id)
+                            setDropdownOpen(false)
+                          }
+                        }}
+                      >
+                        <div className="relative">
+                          <Avatar
+                            name={user.username || 'User'}
+                            avatar={getAvatarUrl(user)}
+                            size={24}
+                            backgroundColor={userColor}
+                          />
+                        </div>
+                        {renderDisplayName(
+                          user,
+                          'system-xs-medium text-text-secondary',
+                          'text-text-tertiary',
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </PortalToFollowElemContent>
+            </PortalToFollowElem>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OnlineUsers

web/app/components/workflow/header/undo-redo.tsx

@@ -6,27 +6,39 @@ import {
   RiArrowGoForwardFill,
 } from '@remixicon/react'
 import TipPopup from '../operator/tip-popup'
-import { useWorkflowHistoryStore } from '../workflow-history-store'
 import Divider from '../../base/divider'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks'
 import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import classNames from '@/utils/classnames'
 
 export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
 const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
   const { t } = useTranslation()
-  const { store } = useWorkflowHistoryStore()
   const [buttonsDisabled, setButtonsDisabled] = useState({ undo: true, redo: true })
 
   useEffect(() => {
-    const unsubscribe = store.temporal.subscribe((state) => {
+    // Update button states based on Loro's UndoManager
+    const updateButtonStates = () => {
       setButtonsDisabled({
-        undo: state.pastStates.length === 0,
-        redo: state.futureStates.length === 0,
+        undo: !collaborationManager.canUndo(),
+        redo: !collaborationManager.canRedo(),
+      })
+    }
+
+    // Initial state
+    updateButtonStates()
+
+    // Listen for undo/redo state changes
+    const unsubscribe = collaborationManager.onUndoRedoStateChange((state) => {
+      setButtonsDisabled({
+        undo: !state.canUndo,
+        redo: !state.canRedo,
       })
     })
+
     return () => unsubscribe()
-  }, [store])
+  }, [])
 
   const { nodesReadOnly } = useNodesReadOnly()