mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 01:48:04 +08:00
Merge branch 'p254' into p284
This commit is contained in:
hjlarry
@ -1,11 +1,19 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useFeaturesStore } from '@/app/components/base/features/hooks'
|
||||
import type { Features as FeaturesData } from '@/app/components/base/features/types'
|
||||
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
|
||||
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
|
||||
import { WorkflowWithInnerContext } from '@/app/components/workflow'
|
||||
import type { WorkflowProps } from '@/app/components/workflow'
|
||||
import WorkflowChildren from './workflow-children'
|
||||
import UserCursors from '@/app/components/workflow/collaboration/components/user-cursors'
|
||||
|
||||
import {
|
||||
useAvailableNodesMetaData,
|
||||
useConfigsMap,
|
||||
@ -18,7 +26,11 @@ import {
|
||||
useWorkflowRun,
|
||||
useWorkflowStartRun,
|
||||
} from '../hooks'
|
||||
import { useWorkflowStore } from '@/app/components/workflow/store'
|
||||
import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
|
||||
import { useCollaboration } from '@/app/components/workflow/collaboration'
|
||||
import { collaborationManager } from '@/app/components/workflow/collaboration'
|
||||
import { fetchWorkflowDraft } from '@/service/workflow'
|
||||
import { useStoreApi } from 'reactflow'
|
||||
|
||||
type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
|
||||
const WorkflowMain = ({
|
||||
@ -28,6 +40,20 @@ const WorkflowMain = ({
|
||||
}: WorkflowMainProps) => {
|
||||
const featuresStore = useFeaturesStore()
|
||||
const workflowStore = useWorkflowStore()
|
||||
const appId = useStore(s => s.appId)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const store = useStoreApi()
|
||||
const { startCursorTracking, stopCursorTracking, onlineUsers } = useCollaboration(appId, store)
|
||||
|
||||
useEffect(() => {
|
||||
if (containerRef.current)
|
||||
startCursorTracking(containerRef as React.RefObject<HTMLElement>)
|
||||
|
||||
return () => {
|
||||
stopCursorTracking()
|
||||
}
|
||||
}, [startCursorTracking, stopCursorTracking])
|
||||
|
||||
const handleWorkflowDataUpdate = useCallback((payload: any) => {
|
||||
const {
|
||||
@ -38,7 +64,33 @@ const WorkflowMain = ({
|
||||
if (features && featuresStore) {
|
||||
const { setFeatures } = featuresStore.getState()
|
||||
|
||||
setFeatures(features)
|
||||
const transformedFeatures: FeaturesData = {
|
||||
file: {
|
||||
image: {
|
||||
enabled: !!features.file_upload?.image?.enabled,
|
||||
number_limits: features.file_upload?.image?.number_limits || 3,
|
||||
transfer_methods: features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
|
||||
},
|
||||
enabled: !!(features.file_upload?.enabled || features.file_upload?.image?.enabled),
|
||||
allowed_file_types: features.file_upload?.allowed_file_types || [SupportUploadFileTypes.image],
|
||||
allowed_file_extensions: features.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
|
||||
allowed_file_upload_methods: features.file_upload?.allowed_file_upload_methods || features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
|
||||
number_limits: features.file_upload?.number_limits || features.file_upload?.image?.number_limits || 3,
|
||||
},
|
||||
opening: {
|
||||
enabled: !!features.opening_statement,
|
||||
opening_statement: features.opening_statement,
|
||||
suggested_questions: features.suggested_questions,
|
||||
},
|
||||
suggested: features.suggested_questions_after_answer || { enabled: false },
|
||||
speech2text: features.speech_to_text || { enabled: false },
|
||||
text2speech: features.text_to_speech || { enabled: false },
|
||||
citation: features.retriever_resource || { enabled: false },
|
||||
moderation: features.sensitive_word_avoidance || { enabled: false },
|
||||
annotationReply: features.annotation_reply || { enabled: false },
|
||||
}
|
||||
|
||||
setFeatures(transformedFeatures)
|
||||
}
|
||||
if (conversation_variables) {
|
||||
const { setConversationVariables } = workflowStore.getState()
|
||||
@ -50,6 +102,22 @@ const WorkflowMain = ({
|
||||
}
|
||||
}, [featuresStore, workflowStore])
|
||||
|
||||
useEffect(() => {
|
||||
if (!appId) return
|
||||
|
||||
const unsubscribe = collaborationManager.onVarsAndFeaturesUpdate(async (update: any) => {
|
||||
try {
|
||||
const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
|
||||
handleWorkflowDataUpdate(response)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('workflow vars and features update failed:', error)
|
||||
}
|
||||
})
|
||||
|
||||
return unsubscribe
|
||||
}, [appId, handleWorkflowDataUpdate])
|
||||
|
||||
const {
|
||||
doSyncWorkflowDraft,
|
||||
syncWorkflowDraftWhenPageClose,
|
||||
@ -75,6 +143,19 @@ const WorkflowMain = ({
|
||||
} = useDSL()
|
||||
|
||||
const configsMap = useConfigsMap()
|
||||
|
||||
const { cursors, isConnected } = useCollaboration(appId)
|
||||
const [myUserId, setMyUserId] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (isConnected)
|
||||
setMyUserId('current-user')
|
||||
}, [isConnected])
|
||||
|
||||
const filteredCursors = Object.fromEntries(
|
||||
Object.entries(cursors).filter(([userId]) => userId !== myUserId),
|
||||
)
|
||||
|
||||
const { fetchInspectVars } = useSetWorkflowVarsWithValue({
|
||||
...configsMap,
|
||||
})
|
||||
@ -164,15 +245,21 @@ const WorkflowMain = ({
|
||||
])
|
||||
|
||||
return (
|
||||
<WorkflowWithInnerContext
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
viewport={viewport}
|
||||
onWorkflowDataUpdate={handleWorkflowDataUpdate}
|
||||
hooksStore={hooksStore as any}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative h-full w-full"
|
||||
>
|
||||
<WorkflowChildren />
|
||||
</WorkflowWithInnerContext>
|
||||
<WorkflowWithInnerContext
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
viewport={viewport}
|
||||
onWorkflowDataUpdate={handleWorkflowDataUpdate}
|
||||
hooksStore={hooksStore as any}
|
||||
>
|
||||
<WorkflowChildren />
|
||||
</WorkflowWithInnerContext>
|
||||
<UserCursors cursors={filteredCursors} myUserId={myUserId} onlineUsers={onlineUsers} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@ import { syncWorkflowDraft } from '@/service/workflow'
|
||||
import { useFeaturesStore } from '@/app/components/base/features/hooks'
|
||||
import { API_PREFIX } from '@/config'
|
||||
import { useWorkflowRefreshDraft } from '.'
|
||||
import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
|
||||
|
||||
export const useNodesSyncDraft = () => {
|
||||
const store = useStoreApi()
|
||||
@ -21,6 +22,7 @@ export const useNodesSyncDraft = () => {
|
||||
const { getNodesReadOnly } = useNodesReadOnly()
|
||||
const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
|
||||
const params = useParams()
|
||||
const { isLeader } = useCollaboration(params.appId as string)
|
||||
|
||||
const getPostParams = useCallback(() => {
|
||||
const {
|
||||
@ -85,13 +87,14 @@ export const useNodesSyncDraft = () => {
|
||||
environment_variables: environmentVariables,
|
||||
conversation_variables: conversationVariables,
|
||||
hash: syncWorkflowDraftHash,
|
||||
_is_collaborative: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
}, [store, featuresStore, workflowStore])
|
||||
|
||||
const syncWorkflowDraftWhenPageClose = useCallback(() => {
|
||||
if (getNodesReadOnly())
|
||||
if (getNodesReadOnly() || !isLeader)
|
||||
return
|
||||
const postParams = getPostParams()
|
||||
|
||||
@ -111,8 +114,10 @@ export const useNodesSyncDraft = () => {
|
||||
onSettled?: () => void
|
||||
},
|
||||
) => {
|
||||
if (getNodesReadOnly())
|
||||
if (getNodesReadOnly() || !isLeader)
|
||||
return
|
||||
|
||||
console.log('I am the leader, saving draft...')
|
||||
const postParams = getPostParams()
|
||||
|
||||
if (postParams) {
|
||||
@ -130,7 +135,9 @@ export const useNodesSyncDraft = () => {
|
||||
if (error && error.json && !error.bodyUsed) {
|
||||
error.json().then((err: any) => {
|
||||
if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
|
||||
handleRefreshWorkflowDraft()
|
||||
// TODO: hjlarry test collaboration
|
||||
// handleRefreshWorkflowDraft()
|
||||
console.error('draft_workflow_not_sync', err)
|
||||
})
|
||||
}
|
||||
callback?.onError && callback.onError()
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useWorkflowStore } from '@/app/components/workflow/store'
|
||||
import { fetchWorkflowDraft } from '@/service/workflow'
|
||||
import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
|
||||
import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
|
||||
|
||||
export const useWorkflowRefreshDraft = () => {
|
||||
@ -19,7 +18,8 @@ export const useWorkflowRefreshDraft = () => {
|
||||
} = workflowStore.getState()
|
||||
setIsSyncingWorkflowDraft(true)
|
||||
fetchWorkflowDraft(`/apps/${appId}/workflows/draft`).then((response) => {
|
||||
handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdater)
|
||||
// TODO: hjlarry test collaboration
|
||||
// handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdater)
|
||||
setSyncWorkflowDraftHash(response.hash)
|
||||
setEnvSecrets((response.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
|
||||
acc[env.id] = env.value
|
||||
|
||||
@ -25,6 +25,7 @@ import {
|
||||
import type { InjectWorkflowStoreSliceFn } from '@/app/components/workflow/store'
|
||||
import { createWorkflowSlice } from './store/workflow/workflow-slice'
|
||||
import WorkflowAppMain from './components/workflow-main'
|
||||
import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
|
||||
|
||||
const WorkflowAppWithAdditionalContext = () => {
|
||||
const {
|
||||
@ -35,15 +36,20 @@ const WorkflowAppWithAdditionalContext = () => {
|
||||
const { isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
|
||||
|
||||
const nodesData = useMemo(() => {
|
||||
if (data)
|
||||
return initialNodes(data.graph.nodes, data.graph.edges)
|
||||
|
||||
if (data) {
|
||||
const processedNodes = initialNodes(data.graph.nodes, data.graph.edges)
|
||||
collaborationManager.setNodes([], processedNodes)
|
||||
return processedNodes
|
||||
}
|
||||
return []
|
||||
}, [data])
|
||||
const edgesData = useMemo(() => {
|
||||
if (data)
|
||||
return initialEdges(data.graph.edges, data.graph.nodes)
|
||||
|
||||
const edgesData = useMemo(() => {
|
||||
if (data) {
|
||||
const processedEdges = initialEdges(data.graph.edges, data.graph.nodes)
|
||||
collaborationManager.setEdges([], processedEdges)
|
||||
return processedEdges
|
||||
}
|
||||
return []
|
||||
}, [data])
|
||||
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
import type { FC } from 'react'
|
||||
import type { CursorPosition, OnlineUser } from '@/app/components/workflow/collaboration/types'
|
||||
|
||||
type UserCursorsProps = {
|
||||
cursors: Record<string, CursorPosition>
|
||||
myUserId: string | null
|
||||
onlineUsers: OnlineUser[]
|
||||
}
|
||||
|
||||
const getUserColor = (id: string) => {
|
||||
const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
|
||||
const hash = id.split('').reduce((a, b) => {
|
||||
a = ((a << 5) - a) + b.charCodeAt(0)
|
||||
return a & a
|
||||
}, 0)
|
||||
return colors[Math.abs(hash) % colors.length]
|
||||
}
|
||||
|
||||
const UserCursors: FC<UserCursorsProps> = ({
|
||||
cursors,
|
||||
myUserId,
|
||||
onlineUsers,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{Object.entries(cursors || {}).map(([userId, cursor]) => {
|
||||
if (userId === myUserId)
|
||||
return null
|
||||
|
||||
const userInfo = onlineUsers.find(user => user.user_id === userId)
|
||||
const userName = userInfo?.username || `User ${userId.slice(-4)}`
|
||||
const userColor = getUserColor(userId)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={userId}
|
||||
className="pointer-events-none absolute z-[10000] -translate-x-0.5 -translate-y-0.5 transition-all duration-150 ease-out"
|
||||
style={{
|
||||
left: cursor.x,
|
||||
top: cursor.y,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="drop-shadow-md"
|
||||
>
|
||||
<path
|
||||
d="M3 3L16 8L9 10L7 17L3 3Z"
|
||||
fill={userColor}
|
||||
stroke="white"
|
||||
strokeWidth="1"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div
|
||||
className="absolute -top-0.5 left-[18px] max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium text-white shadow-sm"
|
||||
style={{
|
||||
backgroundColor: userColor,
|
||||
}}
|
||||
>
|
||||
{userName}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserCursors
|
||||
@ -0,0 +1,273 @@
|
||||
import { LoroDoc } from 'loro-crdt'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import { webSocketClient } from './websocket-manager'
|
||||
import { CRDTProvider } from './crdt-provider'
|
||||
import { EventEmitter } from './event-emitter'
|
||||
import type { Edge, Node } from '../../types'
|
||||
import type { CollaborationState, CursorPosition, OnlineUser } from '../types/collaboration'
|
||||
|
||||
export class CollaborationManager {
|
||||
private doc: LoroDoc | null = null
|
||||
private provider: CRDTProvider | null = null
|
||||
private nodesMap: any = null
|
||||
private edgesMap: any = null
|
||||
private eventEmitter = new EventEmitter()
|
||||
private currentAppId: string | null = null
|
||||
private reactFlowStore: any = null
|
||||
private isLeader = false
|
||||
private leaderId: string | null = null
|
||||
private cursors: Record<string, CursorPosition> = {}
|
||||
|
||||
init = (appId: string, reactFlowStore: any): void => {
|
||||
if (!reactFlowStore) {
|
||||
console.warn('CollaborationManager.init called without reactFlowStore, deferring to connect()')
|
||||
return
|
||||
}
|
||||
this.connect(appId, reactFlowStore)
|
||||
}
|
||||
|
||||
setNodes = (oldNodes: Node[], newNodes: Node[]): void => {
|
||||
this.syncNodes(oldNodes, newNodes)
|
||||
if (this.doc)
|
||||
this.doc.commit()
|
||||
}
|
||||
|
||||
setEdges = (oldEdges: Edge[], newEdges: Edge[]): void => {
|
||||
this.syncEdges(oldEdges, newEdges)
|
||||
if (this.doc)
|
||||
this.doc.commit()
|
||||
}
|
||||
|
||||
destroy = (): void => {
|
||||
this.disconnect()
|
||||
}
|
||||
|
||||
async connect(appId: string, reactFlowStore: any): Promise<void> {
|
||||
if (this.currentAppId === appId && this.doc) return
|
||||
|
||||
this.disconnect()
|
||||
|
||||
this.currentAppId = appId
|
||||
this.reactFlowStore = reactFlowStore
|
||||
|
||||
const socket = webSocketClient.connect(appId)
|
||||
this.doc = new LoroDoc()
|
||||
this.nodesMap = this.doc.getMap('nodes')
|
||||
this.edgesMap = this.doc.getMap('edges')
|
||||
this.provider = new CRDTProvider(socket, this.doc)
|
||||
|
||||
this.setupSubscriptions()
|
||||
this.setupSocketEventListeners(socket)
|
||||
}
|
||||
|
||||
disconnect = (): void => {
|
||||
if (this.currentAppId)
|
||||
webSocketClient.disconnect(this.currentAppId)
|
||||
|
||||
this.provider?.destroy()
|
||||
this.doc = null
|
||||
this.provider = null
|
||||
this.nodesMap = null
|
||||
this.edgesMap = null
|
||||
this.currentAppId = null
|
||||
this.reactFlowStore = null
|
||||
this.cursors = {}
|
||||
this.eventEmitter.removeAllListeners()
|
||||
}
|
||||
|
||||
isConnected(): boolean {
|
||||
return this.currentAppId ? webSocketClient.isConnected(this.currentAppId) : false
|
||||
}
|
||||
|
||||
getNodes(): Node[] {
|
||||
return this.nodesMap ? Array.from(this.nodesMap.values()) : []
|
||||
}
|
||||
|
||||
getEdges(): Edge[] {
|
||||
return this.edgesMap ? Array.from(this.edgesMap.values()) : []
|
||||
}
|
||||
|
||||
emitCursorMove(position: CursorPosition): void {
|
||||
if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
|
||||
|
||||
const socket = webSocketClient.getSocket(this.currentAppId)
|
||||
if (socket) {
|
||||
socket.emit('collaboration_event', {
|
||||
type: 'mouseMove',
|
||||
userId: socket.id,
|
||||
data: { x: position.x, y: position.y },
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onStateChange(callback: (state: Partial<CollaborationState>) => void): () => void {
|
||||
return this.eventEmitter.on('stateChange', callback)
|
||||
}
|
||||
|
||||
onCursorUpdate(callback: (cursors: Record<string, CursorPosition>) => void): () => void {
|
||||
return this.eventEmitter.on('cursors', callback)
|
||||
}
|
||||
|
||||
onOnlineUsersUpdate(callback: (users: OnlineUser[]) => void): () => void {
|
||||
return this.eventEmitter.on('onlineUsers', callback)
|
||||
}
|
||||
|
||||
onVarsAndFeaturesUpdate(callback: (update: any) => void): () => void {
|
||||
return this.eventEmitter.on('varsAndFeaturesUpdate', callback)
|
||||
}
|
||||
|
||||
onLeaderChange(callback: (isLeader: boolean) => void): () => void {
|
||||
return this.eventEmitter.on('leaderChange', callback)
|
||||
}
|
||||
|
||||
private syncNodes(oldNodes: Node[], newNodes: Node[]): void {
|
||||
if (!this.nodesMap) return
|
||||
|
||||
const oldNodesMap = new Map(oldNodes.map(node => [node.id, node]))
|
||||
const newNodesMap = new Map(newNodes.map(node => [node.id, node]))
|
||||
|
||||
oldNodes.forEach((oldNode) => {
|
||||
if (!newNodesMap.has(oldNode.id))
|
||||
this.nodesMap.delete(oldNode.id)
|
||||
})
|
||||
|
||||
newNodes.forEach((newNode) => {
|
||||
const oldNode = oldNodesMap.get(newNode.id)
|
||||
if (!oldNode) {
|
||||
const persistentData = this.getPersistentNodeData(newNode)
|
||||
const clonedData = JSON.parse(JSON.stringify(persistentData))
|
||||
this.nodesMap.set(newNode.id, clonedData)
|
||||
}
|
||||
else {
|
||||
const oldPersistentData = this.getPersistentNodeData(oldNode)
|
||||
const newPersistentData = this.getPersistentNodeData(newNode)
|
||||
if (!isEqual(oldPersistentData, newPersistentData)) {
|
||||
const clonedData = JSON.parse(JSON.stringify(newPersistentData))
|
||||
this.nodesMap.set(newNode.id, clonedData)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private syncEdges(oldEdges: Edge[], newEdges: Edge[]): void {
|
||||
if (!this.edgesMap) return
|
||||
|
||||
const oldEdgesMap = new Map(oldEdges.map(edge => [edge.id, edge]))
|
||||
const newEdgesMap = new Map(newEdges.map(edge => [edge.id, edge]))
|
||||
|
||||
oldEdges.forEach((oldEdge) => {
|
||||
if (!newEdgesMap.has(oldEdge.id))
|
||||
this.edgesMap.delete(oldEdge.id)
|
||||
})
|
||||
|
||||
newEdges.forEach((newEdge) => {
|
||||
const oldEdge = oldEdgesMap.get(newEdge.id)
|
||||
if (!oldEdge) {
|
||||
const clonedEdge = JSON.parse(JSON.stringify(newEdge))
|
||||
this.edgesMap.set(newEdge.id, clonedEdge)
|
||||
}
|
||||
else if (!isEqual(oldEdge, newEdge)) {
|
||||
const clonedEdge = JSON.parse(JSON.stringify(newEdge))
|
||||
this.edgesMap.set(newEdge.id, clonedEdge)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private getPersistentNodeData(node: Node): any {
|
||||
const { data, ...rest } = node
|
||||
const filteredData = Object.fromEntries(
|
||||
Object.entries(data).filter(([key]) => !key.startsWith('_')),
|
||||
)
|
||||
return { ...rest, data: filteredData }
|
||||
}
|
||||
|
||||
private setupSubscriptions(): void {
|
||||
this.nodesMap?.subscribe((event: any) => {
|
||||
if (event.by === 'import' && this.reactFlowStore) {
|
||||
requestAnimationFrame(() => {
|
||||
const { setNodes } = this.reactFlowStore.getState()
|
||||
const updatedNodes = Array.from(this.nodesMap.values())
|
||||
setNodes(updatedNodes)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.edgesMap?.subscribe((event: any) => {
|
||||
if (event.by === 'import' && this.reactFlowStore) {
|
||||
requestAnimationFrame(() => {
|
||||
const { setEdges } = this.reactFlowStore.getState()
|
||||
const updatedEdges = Array.from(this.edgesMap.values())
|
||||
setEdges(updatedEdges)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private setupSocketEventListeners(socket: any): void {
|
||||
console.log('Setting up socket event listeners for collaboration')
|
||||
|
||||
socket.on('collaboration_update', (update: any) => {
|
||||
if (update.type === 'mouseMove') {
|
||||
console.log('Processing mouseMove event:', update)
|
||||
|
||||
// Update cursor state for this user
|
||||
this.cursors[update.userId] = {
|
||||
x: update.data.x,
|
||||
y: update.data.y,
|
||||
userId: update.userId,
|
||||
timestamp: update.timestamp,
|
||||
}
|
||||
|
||||
// Emit the complete cursor state
|
||||
console.log('Emitting complete cursor state:', this.cursors)
|
||||
this.eventEmitter.emit('cursors', { ...this.cursors })
|
||||
}
|
||||
else if (update.type === 'varsAndFeaturesUpdate') {
|
||||
console.log('Processing varsAndFeaturesUpdate event:', update)
|
||||
this.eventEmitter.emit('varsAndFeaturesUpdate', update)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('online_users', (data: { users: OnlineUser[]; leader: string }) => {
|
||||
const onlineUserIds = new Set(data.users.map(user => user.user_id))
|
||||
|
||||
// Remove cursors for offline users
|
||||
Object.keys(this.cursors).forEach((userId) => {
|
||||
if (!onlineUserIds.has(userId))
|
||||
delete this.cursors[userId]
|
||||
})
|
||||
|
||||
console.log('Updated online users and cleaned offline cursors:', data.users)
|
||||
this.leaderId = data.leader
|
||||
this.eventEmitter.emit('onlineUsers', data.users)
|
||||
this.eventEmitter.emit('cursors', { ...this.cursors })
|
||||
})
|
||||
|
||||
socket.on('status', (data: { isLeader: boolean }) => {
|
||||
if (this.isLeader !== data.isLeader) {
|
||||
this.isLeader = data.isLeader
|
||||
console.log(`Collaboration: I am now the ${this.isLeader ? 'Leader' : 'Follower'}.`)
|
||||
this.eventEmitter.emit('leaderChange', this.isLeader)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('status', (data: { isLeader: boolean }) => {
|
||||
if (this.isLeader !== data.isLeader) {
|
||||
this.isLeader = data.isLeader
|
||||
console.log(`Collaboration: I am now the ${this.isLeader ? 'Leader' : 'Follower'}.`)
|
||||
this.eventEmitter.emit('leaderChange', this.isLeader)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('connect', () => {
|
||||
this.eventEmitter.emit('stateChange', { isConnected: true })
|
||||
})
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
this.eventEmitter.emit('stateChange', { isConnected: false })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const collaborationManager = new CollaborationManager()
|
||||
@ -0,0 +1,36 @@
|
||||
import type { LoroDoc } from 'loro-crdt'
|
||||
import type { Socket } from 'socket.io-client'
|
||||
|
||||
export class CRDTProvider {
|
||||
private doc: LoroDoc
|
||||
private socket: Socket
|
||||
|
||||
constructor(socket: Socket, doc: LoroDoc) {
|
||||
this.socket = socket
|
||||
this.doc = doc
|
||||
this.setupEventListeners()
|
||||
}
|
||||
|
||||
private setupEventListeners(): void {
|
||||
this.doc.subscribe((event: any) => {
|
||||
if (event.by === 'local') {
|
||||
const update = this.doc.export({ mode: 'update' })
|
||||
this.socket.emit('graph_event', update)
|
||||
}
|
||||
})
|
||||
|
||||
this.socket.on('graph_update', (updateData: Uint8Array) => {
|
||||
try {
|
||||
const data = new Uint8Array(updateData)
|
||||
this.doc.import(data)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error importing graph update:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.socket.off('graph_update')
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
export type EventHandler<T = any> = (data: T) => void
|
||||
|
||||
export class EventEmitter {
|
||||
private events: Map<string, Set<EventHandler>> = new Map()
|
||||
|
||||
on<T = any>(event: string, handler: EventHandler<T>): () => void {
|
||||
if (!this.events.has(event))
|
||||
this.events.set(event, new Set())
|
||||
|
||||
this.events.get(event)!.add(handler)
|
||||
|
||||
return () => this.off(event, handler)
|
||||
}
|
||||
|
||||
off<T = any>(event: string, handler?: EventHandler<T>): void {
|
||||
if (!this.events.has(event)) return
|
||||
|
||||
const handlers = this.events.get(event)!
|
||||
if (handler)
|
||||
handlers.delete(handler)
|
||||
else
|
||||
handlers.clear()
|
||||
|
||||
if (handlers.size === 0)
|
||||
this.events.delete(event)
|
||||
}
|
||||
|
||||
emit<T = any>(event: string, data: T): void {
|
||||
if (!this.events.has(event)) return
|
||||
|
||||
const handlers = this.events.get(event)!
|
||||
handlers.forEach((handler) => {
|
||||
try {
|
||||
handler(data)
|
||||
}
|
||||
catch (error) {
|
||||
console.error(`Error in event handler for ${event}:`, error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
removeAllListeners(): void {
|
||||
this.events.clear()
|
||||
}
|
||||
|
||||
getListenerCount(event: string): number {
|
||||
return this.events.get(event)?.size || 0
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,119 @@
|
||||
import type { Socket } from 'socket.io-client'
|
||||
import { io } from 'socket.io-client'
|
||||
import type { DebugInfo, WebSocketConfig } from '../types/websocket'
|
||||
|
||||
export class WebSocketClient {
|
||||
private connections: Map<string, Socket> = new Map()
|
||||
private connecting: Set<string> = new Set()
|
||||
private config: WebSocketConfig
|
||||
|
||||
constructor(config: WebSocketConfig = {}) {
|
||||
this.config = {
|
||||
url: config.url || process.env.NEXT_PUBLIC_SOCKET_URL || 'ws://localhost:5001',
|
||||
transports: config.transports || ['websocket'],
|
||||
withCredentials: config.withCredentials !== false,
|
||||
...config,
|
||||
}
|
||||
}
|
||||
|
||||
connect(appId: string): Socket {
|
||||
const existingSocket = this.connections.get(appId)
|
||||
if (existingSocket?.connected)
|
||||
return existingSocket
|
||||
|
||||
if (this.connecting.has(appId)) {
|
||||
const pendingSocket = this.connections.get(appId)
|
||||
if (pendingSocket)
|
||||
return pendingSocket
|
||||
}
|
||||
|
||||
if (existingSocket && !existingSocket.connected) {
|
||||
existingSocket.disconnect()
|
||||
this.connections.delete(appId)
|
||||
}
|
||||
|
||||
this.connecting.add(appId)
|
||||
|
||||
const authToken = localStorage.getItem('console_token')
|
||||
const socket = io(this.config.url!, {
|
||||
path: '/socket.io',
|
||||
transports: this.config.transports,
|
||||
auth: { token: authToken },
|
||||
withCredentials: this.config.withCredentials,
|
||||
})
|
||||
|
||||
this.connections.set(appId, socket)
|
||||
this.setupBaseEventListeners(socket, appId)
|
||||
|
||||
return socket
|
||||
}
|
||||
|
||||
disconnect(appId?: string): void {
|
||||
if (appId) {
|
||||
const socket = this.connections.get(appId)
|
||||
if (socket) {
|
||||
socket.disconnect()
|
||||
this.connections.delete(appId)
|
||||
this.connecting.delete(appId)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.connections.forEach(socket => socket.disconnect())
|
||||
this.connections.clear()
|
||||
this.connecting.clear()
|
||||
}
|
||||
}
|
||||
|
||||
getSocket(appId: string): Socket | null {
|
||||
return this.connections.get(appId) || null
|
||||
}
|
||||
|
||||
isConnected(appId: string): boolean {
|
||||
return this.connections.get(appId)?.connected || false
|
||||
}
|
||||
|
||||
getConnectedApps(): string[] {
|
||||
const connectedApps: string[] = []
|
||||
this.connections.forEach((socket, appId) => {
|
||||
if (socket.connected)
|
||||
connectedApps.push(appId)
|
||||
})
|
||||
return connectedApps
|
||||
}
|
||||
|
||||
getDebugInfo(): DebugInfo {
|
||||
const info: DebugInfo = {}
|
||||
this.connections.forEach((socket, appId) => {
|
||||
info[appId] = {
|
||||
connected: socket.connected,
|
||||
connecting: this.connecting.has(appId),
|
||||
socketId: socket.id,
|
||||
}
|
||||
})
|
||||
return info
|
||||
}
|
||||
|
||||
private setupBaseEventListeners(socket: Socket, appId: string): void {
|
||||
socket.on('connect', () => {
|
||||
this.connecting.delete(appId)
|
||||
socket.emit('user_connect', { workflow_id: appId })
|
||||
})
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
this.connecting.delete(appId)
|
||||
})
|
||||
|
||||
socket.on('connect_error', () => {
|
||||
this.connecting.delete(appId)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const webSocketClient = new WebSocketClient()
|
||||
|
||||
export const fetchAppsOnlineUsers = async (appIds: string[]) => {
|
||||
const response = await fetch(`/api/online-users?${new URLSearchParams({
|
||||
app_ids: appIds.join(','),
|
||||
})}`)
|
||||
return response.json()
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { collaborationManager } from '../core/collaboration-manager'
|
||||
import { CursorService } from '../services/cursor-service'
|
||||
import type { CollaborationState } from '../types/collaboration'
|
||||
|
||||
export function useCollaboration(appId: string, reactFlowStore?: any) {
|
||||
const [state, setState] = useState<Partial<CollaborationState & { isLeader: boolean }>>({
|
||||
isConnected: false,
|
||||
onlineUsers: [],
|
||||
cursors: {},
|
||||
isLeader: false,
|
||||
})
|
||||
|
||||
const cursorServiceRef = useRef<CursorService | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!appId) return
|
||||
|
||||
if (!cursorServiceRef.current) {
|
||||
cursorServiceRef.current = new CursorService({
|
||||
minMoveDistance: 10,
|
||||
throttleMs: 300,
|
||||
})
|
||||
}
|
||||
|
||||
const initCollaboration = async () => {
|
||||
await collaborationManager.connect(appId, reactFlowStore)
|
||||
setState((prev: any) => ({ ...prev, appId, isConnected: collaborationManager.isConnected() }))
|
||||
}
|
||||
|
||||
initCollaboration()
|
||||
|
||||
const unsubscribeStateChange = collaborationManager.onStateChange((newState: any) => {
|
||||
console.log('Collaboration state change:', newState)
|
||||
setState((prev: any) => ({ ...prev, ...newState }))
|
||||
})
|
||||
|
||||
const unsubscribeCursors = collaborationManager.onCursorUpdate((cursors: any) => {
|
||||
console.log('Cursor update received:', cursors)
|
||||
setState((prev: any) => ({ ...prev, cursors }))
|
||||
})
|
||||
|
||||
const unsubscribeUsers = collaborationManager.onOnlineUsersUpdate((users: any) => {
|
||||
console.log('Online users update:', users)
|
||||
setState((prev: any) => ({ ...prev, onlineUsers: users }))
|
||||
})
|
||||
|
||||
const unsubscribeLeaderChange = collaborationManager.onLeaderChange((isLeader: boolean) => {
|
||||
setState((prev: any) => ({ ...prev, isLeader }))
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubscribeStateChange()
|
||||
unsubscribeCursors()
|
||||
unsubscribeUsers()
|
||||
unsubscribeLeaderChange()
|
||||
cursorServiceRef.current?.stopTracking()
|
||||
collaborationManager.disconnect()
|
||||
}
|
||||
}, [appId, reactFlowStore])
|
||||
|
||||
const startCursorTracking = (containerRef: React.RefObject<HTMLElement>) => {
|
||||
if (cursorServiceRef.current) {
|
||||
cursorServiceRef.current.startTracking(containerRef, (position) => {
|
||||
collaborationManager.emitCursorMove(position)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const stopCursorTracking = () => {
|
||||
cursorServiceRef.current?.stopTracking()
|
||||
}
|
||||
|
||||
return {
|
||||
isConnected: state.isConnected || false,
|
||||
onlineUsers: state.onlineUsers || [],
|
||||
cursors: state.cursors || {},
|
||||
isLeader: state.isLeader || false,
|
||||
startCursorTracking,
|
||||
stopCursorTracking,
|
||||
}
|
||||
}
|
||||
5
web/app/components/workflow/collaboration/index.ts
Normal file
5
web/app/components/workflow/collaboration/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export { collaborationManager } from './core/collaboration-manager'
|
||||
export { webSocketClient, fetchAppsOnlineUsers } from './core/websocket-manager'
|
||||
export { CursorService } from './services/cursor-service'
|
||||
export { useCollaboration } from './hooks/use-collaboration'
|
||||
export * from './types'
|
||||
@ -0,0 +1,84 @@
|
||||
import type { RefObject } from 'react'
|
||||
import type { CursorPosition } from '../types/collaboration'
|
||||
|
||||
export type CursorServiceConfig = {
|
||||
minMoveDistance?: number
|
||||
throttleMs?: number
|
||||
}
|
||||
|
||||
export class CursorService {
|
||||
private containerRef: RefObject<HTMLElement> | null = null
|
||||
private isTracking = false
|
||||
private onCursorUpdate: ((cursors: Record<string, CursorPosition>) => void) | null = null
|
||||
private onEmitPosition: ((position: CursorPosition) => void) | null = null
|
||||
private lastEmitTime = 0
|
||||
private lastPosition: { x: number; y: number } | null = null
|
||||
private config: Required<CursorServiceConfig>
|
||||
|
||||
constructor(config: CursorServiceConfig = {}) {
|
||||
this.config = {
|
||||
minMoveDistance: config.minMoveDistance ?? 5,
|
||||
throttleMs: config.throttleMs ?? 300,
|
||||
}
|
||||
}
|
||||
|
||||
startTracking(
|
||||
containerRef: RefObject<HTMLElement>,
|
||||
onEmitPosition: (position: CursorPosition) => void,
|
||||
): void {
|
||||
if (this.isTracking) this.stopTracking()
|
||||
|
||||
this.containerRef = containerRef
|
||||
this.onEmitPosition = onEmitPosition
|
||||
this.isTracking = true
|
||||
|
||||
if (containerRef.current)
|
||||
containerRef.current.addEventListener('mousemove', this.handleMouseMove)
|
||||
}
|
||||
|
||||
stopTracking(): void {
|
||||
if (this.containerRef?.current)
|
||||
this.containerRef.current.removeEventListener('mousemove', this.handleMouseMove)
|
||||
|
||||
this.containerRef = null
|
||||
this.onEmitPosition = null
|
||||
this.isTracking = false
|
||||
this.lastPosition = null
|
||||
}
|
||||
|
||||
setCursorUpdateHandler(handler: (cursors: Record<string, CursorPosition>) => void): void {
|
||||
this.onCursorUpdate = handler
|
||||
}
|
||||
|
||||
updateCursors(cursors: Record<string, CursorPosition>): void {
|
||||
if (this.onCursorUpdate)
|
||||
this.onCursorUpdate(cursors)
|
||||
}
|
||||
|
||||
private handleMouseMove = (event: MouseEvent): void => {
|
||||
if (!this.containerRef?.current || !this.onEmitPosition) return
|
||||
|
||||
const rect = this.containerRef.current.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
|
||||
if (x >= 0 && y >= 0 && x <= rect.width && y <= rect.height) {
|
||||
const now = Date.now()
|
||||
const timeThrottled = now - this.lastEmitTime > this.config.throttleMs
|
||||
const distanceThrottled = !this.lastPosition
|
||||
|| (Math.abs(x - this.lastPosition.x) > this.config.minMoveDistance
|
||||
|| Math.abs(y - this.lastPosition.y) > this.config.minMoveDistance)
|
||||
|
||||
if (timeThrottled && distanceThrottled) {
|
||||
this.lastPosition = { x, y }
|
||||
this.lastEmitTime = now
|
||||
this.onEmitPosition({
|
||||
x,
|
||||
y,
|
||||
userId: '',
|
||||
timestamp: now,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import type { Edge, Node } from '../../types'
|
||||
|
||||
export type OnlineUser = {
|
||||
user_id: string
|
||||
username: string
|
||||
avatar: string
|
||||
sid: string
|
||||
}
|
||||
|
||||
export type WorkflowOnlineUsers = {
|
||||
workflow_id: string
|
||||
users: OnlineUser[]
|
||||
}
|
||||
|
||||
export type OnlineUserListResponse = {
|
||||
data: WorkflowOnlineUsers[]
|
||||
}
|
||||
|
||||
export type CursorPosition = {
|
||||
x: number
|
||||
y: number
|
||||
userId: string
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export type CollaborationState = {
|
||||
appId: string
|
||||
isConnected: boolean
|
||||
onlineUsers: OnlineUser[]
|
||||
cursors: Record<string, CursorPosition>
|
||||
}
|
||||
|
||||
export type GraphSyncData = {
|
||||
nodes: Node[]
|
||||
edges: Edge[]
|
||||
}
|
||||
|
||||
export type CollaborationUpdate = {
|
||||
type: 'mouseMove' | 'graphUpdate' | 'userJoin' | 'userLeave'
|
||||
userId: string
|
||||
data: any
|
||||
timestamp: number
|
||||
}
|
||||
38
web/app/components/workflow/collaboration/types/events.ts
Normal file
38
web/app/components/workflow/collaboration/types/events.ts
Normal file
@ -0,0 +1,38 @@
|
||||
export type CollaborationEvent = {
|
||||
type: string
|
||||
data: any
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export type GraphUpdateEvent = {
|
||||
type: 'graph_update'
|
||||
data: Uint8Array
|
||||
} & CollaborationEvent
|
||||
|
||||
export type CursorMoveEvent = {
|
||||
type: 'cursor_move'
|
||||
data: {
|
||||
x: number
|
||||
y: number
|
||||
userId: string
|
||||
}
|
||||
} & CollaborationEvent
|
||||
|
||||
export type UserConnectEvent = {
|
||||
type: 'user_connect'
|
||||
data: {
|
||||
workflow_id: string
|
||||
}
|
||||
} & CollaborationEvent
|
||||
|
||||
export type OnlineUsersEvent = {
|
||||
type: 'online_users'
|
||||
data: {
|
||||
users: Array<{
|
||||
user_id: string
|
||||
username: string
|
||||
avatar: string
|
||||
sid: string
|
||||
}>
|
||||
}
|
||||
} & CollaborationEvent
|
||||
3
web/app/components/workflow/collaboration/types/index.ts
Normal file
3
web/app/components/workflow/collaboration/types/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from './websocket'
|
||||
export * from './collaboration'
|
||||
export * from './events'
|
||||
16
web/app/components/workflow/collaboration/types/websocket.ts
Normal file
16
web/app/components/workflow/collaboration/types/websocket.ts
Normal file
@ -0,0 +1,16 @@
|
||||
export type WebSocketConfig = {
|
||||
url?: string
|
||||
token?: string
|
||||
transports?: string[]
|
||||
withCredentials?: boolean
|
||||
}
|
||||
|
||||
export type ConnectionInfo = {
|
||||
connected: boolean
|
||||
connecting: boolean
|
||||
socketId?: string
|
||||
}
|
||||
|
||||
export type DebugInfo = {
|
||||
[appId: string]: ConnectionInfo
|
||||
}
|
||||
@ -14,14 +14,15 @@ import useConfig from './nodes/start/use-config'
|
||||
import type { StartNodeType } from './nodes/start/types'
|
||||
import type { PromptVariable } from '@/models/debug'
|
||||
import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
|
||||
import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
|
||||
|
||||
const Features = () => {
|
||||
const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
|
||||
const appId = useStore(s => s.appId)
|
||||
const isChatMode = useIsChatMode()
|
||||
const { nodesReadOnly } = useNodesReadOnly()
|
||||
const { handleSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const { doSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const nodes = useNodes<CommonNodeType>()
|
||||
|
||||
const startNode = nodes.find(node => node.data.type === 'start')
|
||||
const { id, data } = startNode as Node<StartNodeType>
|
||||
const { handleAddVariable } = useConfig(id, data)
|
||||
@ -40,9 +41,20 @@ const Features = () => {
|
||||
}
|
||||
|
||||
const handleFeaturesChange = useCallback(() => {
|
||||
handleSyncWorkflowDraft()
|
||||
doSyncWorkflowDraft(false, {
|
||||
onSuccess() {
|
||||
if (appId) {
|
||||
const socket = webSocketClient.getSocket(appId)
|
||||
if (socket) {
|
||||
socket.emit('collaboration_event', {
|
||||
type: 'varsAndFeaturesUpdate',
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
setShowFeaturesPanel(true)
|
||||
}, [handleSyncWorkflowDraft, setShowFeaturesPanel])
|
||||
}, [doSyncWorkflowDraft, setShowFeaturesPanel, appId])
|
||||
|
||||
return (
|
||||
<NewFeaturePanel
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useStoreApi } from 'reactflow'
|
||||
import type { Edge, Node } from '../types'
|
||||
import { collaborationManager } from '../collaboration/core/collaboration-manager'
|
||||
|
||||
export const useCollaborativeWorkflow = () => {
|
||||
const store = useStoreApi()
|
||||
const { setNodes: collabSetNodes, setEdges: collabSetEdges } = collaborationManager
|
||||
|
||||
const setNodes = useCallback((newNodes: Node[], shouldBroadcast: boolean = true) => {
|
||||
const { getNodes, setNodes: reactFlowSetNodes } = store.getState()
|
||||
if (shouldBroadcast) {
|
||||
const oldNodes = getNodes()
|
||||
collabSetNodes(oldNodes, newNodes)
|
||||
}
|
||||
reactFlowSetNodes(newNodes)
|
||||
}, [store, collabSetNodes])
|
||||
|
||||
const setEdges = useCallback((newEdges: Edge[], shouldBroadcast: boolean = true) => {
|
||||
const { edges, setEdges: reactFlowSetEdges } = store.getState()
|
||||
if (shouldBroadcast)
|
||||
collabSetEdges(edges, newEdges)
|
||||
|
||||
reactFlowSetEdges(newEdges)
|
||||
}, [store, collabSetEdges])
|
||||
|
||||
const collaborativeStore = useCallback(() => {
|
||||
const state = store.getState()
|
||||
return {
|
||||
|
||||
nodes: state.getNodes(),
|
||||
edges: state.edges,
|
||||
|
||||
setNodes,
|
||||
setEdges,
|
||||
|
||||
}
|
||||
}, [store, setNodes, setEdges])
|
||||
|
||||
return {
|
||||
getState: collaborativeStore,
|
||||
setNodes,
|
||||
setEdges,
|
||||
}
|
||||
}
|
||||
@ -4,9 +4,7 @@ import type {
|
||||
EdgeMouseHandler,
|
||||
OnEdgesChange,
|
||||
} from 'reactflow'
|
||||
import {
|
||||
useStoreApi,
|
||||
} from 'reactflow'
|
||||
|
||||
import type {
|
||||
Node,
|
||||
} from '../types'
|
||||
@ -14,61 +12,55 @@ import { getNodesConnectedSourceOrTargetHandleIdsMap } from '../utils'
|
||||
import { useNodesSyncDraft } from './use-nodes-sync-draft'
|
||||
import { useNodesReadOnly } from './use-workflow'
|
||||
import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
|
||||
import { useCollaborativeWorkflow } from './use-collaborative-workflow'
|
||||
|
||||
export const useEdgesInteractions = () => {
|
||||
const store = useStoreApi()
|
||||
const { handleSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const { getNodesReadOnly } = useNodesReadOnly()
|
||||
const { saveStateToHistory } = useWorkflowHistory()
|
||||
const collaborativeWorkflow = useCollaborativeWorkflow()
|
||||
|
||||
const handleEdgeEnter = useCallback<EdgeMouseHandler>((_, edge) => {
|
||||
if (getNodesReadOnly())
|
||||
return
|
||||
|
||||
const {
|
||||
edges,
|
||||
setEdges,
|
||||
} = store.getState()
|
||||
const { edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const newEdges = produce(edges, (draft) => {
|
||||
const currentEdge = draft.find(e => e.id === edge.id)!
|
||||
|
||||
currentEdge.data._hovering = true
|
||||
})
|
||||
setEdges(newEdges)
|
||||
}, [store, getNodesReadOnly])
|
||||
setEdges(newEdges, false)
|
||||
}, [collaborativeWorkflow, getNodesReadOnly])
|
||||
|
||||
const handleEdgeLeave = useCallback<EdgeMouseHandler>((_, edge) => {
|
||||
if (getNodesReadOnly())
|
||||
return
|
||||
|
||||
const {
|
||||
edges,
|
||||
setEdges,
|
||||
} = store.getState()
|
||||
const { edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const newEdges = produce(edges, (draft) => {
|
||||
const currentEdge = draft.find(e => e.id === edge.id)!
|
||||
|
||||
currentEdge.data._hovering = false
|
||||
})
|
||||
setEdges(newEdges)
|
||||
}, [store, getNodesReadOnly])
|
||||
setEdges(newEdges, false)
|
||||
}, [collaborativeWorkflow, getNodesReadOnly])
|
||||
|
||||
const handleEdgeDeleteByDeleteBranch = useCallback((nodeId: string, branchId: string) => {
|
||||
if (getNodesReadOnly())
|
||||
return
|
||||
|
||||
const {
|
||||
getNodes,
|
||||
nodes,
|
||||
setNodes,
|
||||
edges,
|
||||
setEdges,
|
||||
} = store.getState()
|
||||
} = collaborativeWorkflow.getState()
|
||||
const edgeWillBeDeleted = edges.filter(edge => edge.source === nodeId && edge.sourceHandle === branchId)
|
||||
|
||||
if (!edgeWillBeDeleted.length)
|
||||
return
|
||||
|
||||
const nodes = getNodes()
|
||||
const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
|
||||
edgeWillBeDeleted.map(edge => ({ type: 'remove', edge })),
|
||||
nodes,
|
||||
@ -90,24 +82,23 @@ export const useEdgesInteractions = () => {
|
||||
setEdges(newEdges)
|
||||
handleSyncWorkflowDraft()
|
||||
saveStateToHistory(WorkflowHistoryEvent.EdgeDeleteByDeleteBranch)
|
||||
}, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
|
||||
}, [getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory])
|
||||
|
||||
const handleEdgeDelete = useCallback(() => {
|
||||
if (getNodesReadOnly())
|
||||
return
|
||||
|
||||
const {
|
||||
getNodes,
|
||||
nodes,
|
||||
setNodes,
|
||||
edges,
|
||||
setEdges,
|
||||
} = store.getState()
|
||||
} = collaborativeWorkflow.getState()
|
||||
const currentEdgeIndex = edges.findIndex(edge => edge.selected)
|
||||
|
||||
if (currentEdgeIndex < 0)
|
||||
return
|
||||
const currentEdge = edges[currentEdgeIndex]
|
||||
const nodes = getNodes()
|
||||
const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
|
||||
[
|
||||
{ type: 'remove', edge: currentEdge },
|
||||
@ -131,7 +122,7 @@ export const useEdgesInteractions = () => {
|
||||
setEdges(newEdges)
|
||||
handleSyncWorkflowDraft()
|
||||
saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
|
||||
}, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
|
||||
}, [getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory])
|
||||
|
||||
const handleEdgesChange = useCallback<OnEdgesChange>((changes) => {
|
||||
if (getNodesReadOnly())
|
||||
@ -140,7 +131,7 @@ export const useEdgesInteractions = () => {
|
||||
const {
|
||||
edges,
|
||||
setEdges,
|
||||
} = store.getState()
|
||||
} = collaborativeWorkflow.getState()
|
||||
|
||||
const newEdges = produce(edges, (draft) => {
|
||||
changes.forEach((change) => {
|
||||
@ -149,7 +140,7 @@ export const useEdgesInteractions = () => {
|
||||
})
|
||||
})
|
||||
setEdges(newEdges)
|
||||
}, [store, getNodesReadOnly])
|
||||
}, [collaborativeWorkflow, getNodesReadOnly])
|
||||
|
||||
return {
|
||||
handleEdgeEnter,
|
||||
|
||||
@ -14,7 +14,6 @@ import {
|
||||
getConnectedEdges,
|
||||
getOutgoers,
|
||||
useReactFlow,
|
||||
useStoreApi,
|
||||
} from 'reactflow'
|
||||
import type { ToolDefaultValue } from '../block-selector/types'
|
||||
import type { Edge, Node, OnNodeAdd } from '../types'
|
||||
@ -46,7 +45,7 @@ import { CUSTOM_LOOP_START_NODE } from '../nodes/loop-start/constants'
|
||||
import type { VariableAssignerNodeType } from '../nodes/variable-assigner/types'
|
||||
import { useNodeIterationInteractions } from '../nodes/iteration/use-interactions'
|
||||
import { useNodeLoopInteractions } from '../nodes/loop/use-interactions'
|
||||
import { useWorkflowHistoryStore } from '../workflow-history-store'
|
||||
import { collaborationManager } from '../collaboration/core/collaboration-manager'
|
||||
import { useNodesSyncDraft } from './use-nodes-sync-draft'
|
||||
import { useHelpline } from './use-helpline'
|
||||
import {
|
||||
@ -62,13 +61,13 @@ import { useNodesMetaData } from './use-nodes-meta-data'
|
||||
import type { RAGPipelineVariables } from '@/models/pipeline'
|
||||
import useInspectVarsCrud from './use-inspect-vars-crud'
|
||||
import { getNodeUsedVars } from '../nodes/_base/components/variable/utils'
|
||||
import { useCollaborativeWorkflow } from './use-collaborative-workflow'
|
||||
|
||||
export const useNodesInteractions = () => {
|
||||
const { t } = useTranslation()
|
||||
const store = useStoreApi()
|
||||
const collaborativeWorkflow = useCollaborativeWorkflow()
|
||||
const workflowStore = useWorkflowStore()
|
||||
const reactflow = useReactFlow()
|
||||
const { store: workflowHistoryStore } = useWorkflowHistoryStore()
|
||||
const { handleSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const { checkNestedParallelLimit, getAfterNodesInSameBranch } = useWorkflow()
|
||||
const { getNodesReadOnly } = useNodesReadOnly()
|
||||
@ -120,50 +119,42 @@ export const useNodesInteractions = () => {
|
||||
|
||||
if (node.type === CUSTOM_LOOP_START_NODE) return
|
||||
|
||||
const { getNodes, setNodes } = store.getState()
|
||||
e.stopPropagation()
|
||||
e.stopPropagation()
|
||||
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes } = collaborativeWorkflow.getState()
|
||||
|
||||
const { restrictPosition } = handleNodeIterationChildDrag(node)
|
||||
const { restrictPosition: restrictLoopPosition }
|
||||
= handleNodeLoopChildDrag(node)
|
||||
const { restrictPosition } = handleNodeIterationChildDrag(node)
|
||||
const { restrictPosition: restrictLoopPosition }
|
||||
= handleNodeLoopChildDrag(node)
|
||||
|
||||
const { showHorizontalHelpLineNodes, showVerticalHelpLineNodes }
|
||||
= handleSetHelpline(node)
|
||||
const showHorizontalHelpLineNodesLength
|
||||
= showHorizontalHelpLineNodes.length
|
||||
const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
|
||||
const { showHorizontalHelpLineNodes, showVerticalHelpLineNodes }
|
||||
= handleSetHelpline(node)
|
||||
const showHorizontalHelpLineNodesLength
|
||||
= showHorizontalHelpLineNodes.length
|
||||
const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
|
||||
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
const currentNode = draft.find(n => n.id === node.id)!
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
const currentNode = draft.find(n => n.id === node.id)!
|
||||
|
||||
if (showVerticalHelpLineNodesLength > 0)
|
||||
currentNode.position.x = showVerticalHelpLineNodes[0].position.x
|
||||
else if (restrictPosition.x !== undefined)
|
||||
currentNode.position.x = restrictPosition.x
|
||||
else if (restrictLoopPosition.x !== undefined)
|
||||
currentNode.position.x = restrictLoopPosition.x
|
||||
else currentNode.position.x = node.position.x
|
||||
if (showVerticalHelpLineNodesLength > 0)
|
||||
currentNode.position.x = showVerticalHelpLineNodes[0].position.x
|
||||
else if (restrictPosition.x !== undefined)
|
||||
currentNode.position.x = restrictPosition.x
|
||||
else if (restrictLoopPosition.x !== undefined)
|
||||
currentNode.position.x = restrictLoopPosition.x
|
||||
else currentNode.position.x = node.position.x
|
||||
|
||||
if (showHorizontalHelpLineNodesLength > 0)
|
||||
currentNode.position.y = showHorizontalHelpLineNodes[0].position.y
|
||||
else if (restrictPosition.y !== undefined)
|
||||
currentNode.position.y = restrictPosition.y
|
||||
else if (restrictLoopPosition.y !== undefined)
|
||||
currentNode.position.y = restrictLoopPosition.y
|
||||
else currentNode.position.y = node.position.y
|
||||
})
|
||||
setNodes(newNodes)
|
||||
},
|
||||
[
|
||||
getNodesReadOnly,
|
||||
store,
|
||||
handleNodeIterationChildDrag,
|
||||
handleNodeLoopChildDrag,
|
||||
handleSetHelpline,
|
||||
],
|
||||
)
|
||||
if (showHorizontalHelpLineNodesLength > 0)
|
||||
currentNode.position.y = showHorizontalHelpLineNodes[0].position.y
|
||||
else if (restrictPosition.y !== undefined)
|
||||
currentNode.position.y = restrictPosition.y
|
||||
else if (restrictLoopPosition.y !== undefined)
|
||||
currentNode.position.y = restrictLoopPosition.y
|
||||
else
|
||||
currentNode.position.y = node.position.y
|
||||
})
|
||||
setNodes(newNodes)
|
||||
}, [getNodesReadOnly, collaborativeWorkflow, handleNodeIterationChildDrag, handleNodeLoopChildDrag, handleSetHelpline])
|
||||
|
||||
const handleNodeDragStop = useCallback<NodeDragHandler>(
|
||||
(_, node) => {
|
||||
@ -210,62 +201,62 @@ export const useNodesInteractions = () => {
|
||||
)
|
||||
return
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { connectingNodePayload, setEnteringNodePayload }
|
||||
= workflowStore.getState()
|
||||
const { nodes, edges, setNodes, setEdges } = collaborativeWorkflow.getState()
|
||||
const {
|
||||
connectingNodePayload,
|
||||
setEnteringNodePayload,
|
||||
} = workflowStore.getState()
|
||||
if (connectingNodePayload) {
|
||||
if (connectingNodePayload.nodeId === node.id) return
|
||||
const connectingNode: Node = nodes.find(
|
||||
n => n.id === connectingNodePayload.nodeId,
|
||||
)!
|
||||
const sameLevel = connectingNode.parentId === node.parentId
|
||||
|
||||
if (connectingNodePayload) {
|
||||
if (connectingNodePayload.nodeId === node.id) return
|
||||
const connectingNode: Node = nodes.find(
|
||||
n => n.id === connectingNodePayload.nodeId,
|
||||
)!
|
||||
const sameLevel = connectingNode.parentId === node.parentId
|
||||
|
||||
if (sameLevel) {
|
||||
setEnteringNodePayload({
|
||||
nodeId: node.id,
|
||||
nodeData: node.data as VariableAssignerNodeType,
|
||||
})
|
||||
const fromType = connectingNodePayload.handleType
|
||||
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
draft.forEach((n) => {
|
||||
if (
|
||||
n.id === node.id
|
||||
&& fromType === 'source'
|
||||
&& (node.data.type === BlockEnum.VariableAssigner
|
||||
|| node.data.type === BlockEnum.VariableAggregator)
|
||||
) {
|
||||
if (!node.data.advanced_settings?.group_enabled)
|
||||
n.data._isEntering = true
|
||||
}
|
||||
if (
|
||||
n.id === node.id
|
||||
&& fromType === 'target'
|
||||
&& (connectingNode.data.type === BlockEnum.VariableAssigner
|
||||
|| connectingNode.data.type === BlockEnum.VariableAggregator)
|
||||
&& node.data.type !== BlockEnum.IfElse
|
||||
&& node.data.type !== BlockEnum.QuestionClassifier
|
||||
)
|
||||
n.data._isEntering = true
|
||||
})
|
||||
})
|
||||
setNodes(newNodes)
|
||||
}
|
||||
}
|
||||
const newEdges = produce(edges, (draft) => {
|
||||
const connectedEdges = getConnectedEdges([node], edges)
|
||||
|
||||
connectedEdges.forEach((edge) => {
|
||||
const currentEdge = draft.find(e => e.id === edge.id)
|
||||
if (currentEdge) currentEdge.data._connectedNodeIsHovering = true
|
||||
if (sameLevel) {
|
||||
setEnteringNodePayload({
|
||||
nodeId: node.id,
|
||||
nodeData: node.data as VariableAssignerNodeType,
|
||||
})
|
||||
const fromType = connectingNodePayload.handleType
|
||||
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
draft.forEach((n) => {
|
||||
if (
|
||||
n.id === node.id
|
||||
&& fromType === 'source'
|
||||
&& (node.data.type === BlockEnum.VariableAssigner
|
||||
|| node.data.type === BlockEnum.VariableAggregator)
|
||||
) {
|
||||
if (!node.data.advanced_settings?.group_enabled)
|
||||
n.data._isEntering = true
|
||||
}
|
||||
if (
|
||||
n.id === node.id
|
||||
&& fromType === 'target'
|
||||
&& (connectingNode.data.type === BlockEnum.VariableAssigner
|
||||
|| connectingNode.data.type === BlockEnum.VariableAggregator)
|
||||
&& node.data.type !== BlockEnum.IfElse
|
||||
&& node.data.type !== BlockEnum.QuestionClassifier
|
||||
)
|
||||
n.data._isEntering = true
|
||||
})
|
||||
})
|
||||
setNodes(newNodes, false)
|
||||
}
|
||||
}
|
||||
const newEdges = produce(edges, (draft) => {
|
||||
const connectedEdges = getConnectedEdges([node], edges)
|
||||
|
||||
connectedEdges.forEach((edge) => {
|
||||
const currentEdge = draft.find(e => e.id === edge.id)
|
||||
if (currentEdge) currentEdge.data._connectedNodeIsHovering = true
|
||||
})
|
||||
setEdges(newEdges)
|
||||
},
|
||||
[store, workflowStore, getNodesReadOnly],
|
||||
)
|
||||
})
|
||||
setEdges(newEdges, false)
|
||||
},
|
||||
[collaborativeWorkflow, workflowStore, getNodesReadOnly],
|
||||
)
|
||||
|
||||
const handleNodeLeave = useCallback<NodeMouseHandler>(
|
||||
(_, node) => {
|
||||
@ -285,21 +276,21 @@ export const useNodesInteractions = () => {
|
||||
|
||||
const { setEnteringNodePayload } = workflowStore.getState()
|
||||
setEnteringNodePayload(undefined)
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const newNodes = produce(getNodes(), (draft) => {
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
draft.forEach((node) => {
|
||||
node.data._isEntering = false
|
||||
})
|
||||
})
|
||||
setNodes(newNodes)
|
||||
setNodes(newNodes, false)
|
||||
const newEdges = produce(edges, (draft) => {
|
||||
draft.forEach((edge) => {
|
||||
edge.data._connectedNodeIsHovering = false
|
||||
})
|
||||
})
|
||||
setEdges(newEdges)
|
||||
setEdges(newEdges, false)
|
||||
},
|
||||
[store, workflowStore, getNodesReadOnly],
|
||||
[collaborativeWorkflow, workflowStore, getNodesReadOnly],
|
||||
)
|
||||
|
||||
const handleNodeSelect = useCallback(
|
||||
@ -310,9 +301,7 @@ export const useNodesInteractions = () => {
|
||||
) => {
|
||||
if (initShowLastRunTab)
|
||||
workflowStore.setState({ initShowLastRunTab: true })
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const selectedNode = nodes.find(node => node.data.selected)
|
||||
|
||||
if (!cancelSelection && selectedNode?.id === nodeId) return
|
||||
@ -347,10 +336,8 @@ export const useNodesInteractions = () => {
|
||||
})
|
||||
setEdges(newEdges)
|
||||
|
||||
handleSyncWorkflowDraft()
|
||||
},
|
||||
[store, handleSyncWorkflowDraft],
|
||||
)
|
||||
handleSyncWorkflowDraft()
|
||||
}, [collaborativeWorkflow, handleSyncWorkflowDraft])
|
||||
|
||||
const handleNodeClick = useCallback<NodeMouseHandler>(
|
||||
(_, node) => {
|
||||
@ -367,10 +354,9 @@ export const useNodesInteractions = () => {
|
||||
if (source === target) return
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const targetNode = nodes.find(node => node.id === target!)
|
||||
const sourceNode = nodes.find(node => node.id === source!)
|
||||
const { nodes, edges, setNodes, setEdges } = collaborativeWorkflow.getState()
|
||||
const targetNode = nodes.find(node => node.id === target!)
|
||||
const sourceNode = nodes.find(node => node.id === source!)
|
||||
|
||||
if (targetNode?.parentId !== sourceNode?.parentId) return
|
||||
|
||||
@ -454,7 +440,7 @@ export const useNodesInteractions = () => {
|
||||
},
|
||||
[
|
||||
getNodesReadOnly,
|
||||
store,
|
||||
collaborativeWorkflow,
|
||||
workflowStore,
|
||||
handleSyncWorkflowDraft,
|
||||
saveStateToHistory,
|
||||
@ -468,8 +454,8 @@ export const useNodesInteractions = () => {
|
||||
|
||||
if (nodeId && handleType) {
|
||||
const { setConnectingNodePayload } = workflowStore.getState()
|
||||
const { getNodes } = store.getState()
|
||||
const node = getNodes().find(n => n.id === nodeId)!
|
||||
const { nodes } = collaborativeWorkflow.getState()
|
||||
const node = nodes.find(n => n.id === nodeId)!
|
||||
|
||||
if (node.type === CUSTOM_NOTE_NODE) return
|
||||
|
||||
@ -479,16 +465,14 @@ export const useNodesInteractions = () => {
|
||||
)
|
||||
if (handleType === 'target') return
|
||||
|
||||
setConnectingNodePayload({
|
||||
nodeId,
|
||||
nodeType: node.data.type,
|
||||
handleType,
|
||||
handleId,
|
||||
})
|
||||
}
|
||||
},
|
||||
[store, workflowStore, getNodesReadOnly],
|
||||
)
|
||||
setConnectingNodePayload({
|
||||
nodeId,
|
||||
nodeType: node.data.type,
|
||||
handleType,
|
||||
handleId,
|
||||
})
|
||||
}
|
||||
}, [collaborativeWorkflow, workflowStore, getNodesReadOnly])
|
||||
|
||||
const handleNodeConnectEnd = useCallback<OnConnectEnd>(
|
||||
(e: any) => {
|
||||
@ -504,8 +488,7 @@ export const useNodesInteractions = () => {
|
||||
const { setShowAssignVariablePopup, hoveringAssignVariableGroupId }
|
||||
= workflowStore.getState()
|
||||
const { screenToFlowPosition } = reactflow
|
||||
const { getNodes, setNodes } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes } = collaborativeWorkflow.getState()
|
||||
const fromHandleType = connectingNodePayload.handleType
|
||||
const fromHandleId = connectingNodePayload.handleId
|
||||
const fromNode = nodes.find(
|
||||
@ -562,7 +545,7 @@ export const useNodesInteractions = () => {
|
||||
setConnectingNodePayload(undefined)
|
||||
setEnteringNodePayload(undefined)
|
||||
},
|
||||
[store, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow],
|
||||
[collaborativeWorkflow, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow],
|
||||
)
|
||||
|
||||
const { deleteNodeInspectorVars } = useInspectVarsCrud()
|
||||
@ -571,9 +554,7 @@ export const useNodesInteractions = () => {
|
||||
(nodeId: string) => {
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
|
||||
const currentNode = nodes[currentNodeIndex]
|
||||
|
||||
@ -728,7 +709,7 @@ export const useNodesInteractions = () => {
|
||||
},
|
||||
[
|
||||
getNodesReadOnly,
|
||||
store,
|
||||
collaborativeWorkflow,
|
||||
handleSyncWorkflowDraft,
|
||||
saveStateToHistory,
|
||||
workflowStore,
|
||||
@ -750,8 +731,7 @@ export const useNodesInteractions = () => {
|
||||
) => {
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const nodesWithSameType = nodes.filter(
|
||||
node => node.data.type === nodeType,
|
||||
)
|
||||
@ -1292,7 +1272,7 @@ export const useNodesInteractions = () => {
|
||||
},
|
||||
[
|
||||
getNodesReadOnly,
|
||||
store,
|
||||
collaborativeWorkflow,
|
||||
handleSyncWorkflowDraft,
|
||||
saveStateToHistory,
|
||||
workflowStore,
|
||||
@ -1311,8 +1291,7 @@ export const useNodesInteractions = () => {
|
||||
) => {
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const currentNode = nodes.find(node => node.id === currentNodeId)!
|
||||
const connectedEdges = getConnectedEdges([currentNode], edges)
|
||||
const nodesWithSameType = nodes.filter(
|
||||
@ -1390,7 +1369,7 @@ export const useNodesInteractions = () => {
|
||||
},
|
||||
[
|
||||
getNodesReadOnly,
|
||||
store,
|
||||
collaborativeWorkflow,
|
||||
handleSyncWorkflowDraft,
|
||||
saveStateToHistory,
|
||||
nodesMetaDataMap,
|
||||
@ -1398,16 +1377,14 @@ export const useNodesInteractions = () => {
|
||||
)
|
||||
|
||||
const handleNodesCancelSelected = useCallback(() => {
|
||||
const { getNodes, setNodes } = store.getState()
|
||||
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes } = collaborativeWorkflow.getState()
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
draft.forEach((node) => {
|
||||
node.data.selected = false
|
||||
})
|
||||
})
|
||||
setNodes(newNodes)
|
||||
}, [store])
|
||||
}, [collaborativeWorkflow])
|
||||
|
||||
const handleNodeContextMenu = useCallback(
|
||||
(e: MouseEvent, node: Node) => {
|
||||
@ -1444,9 +1421,7 @@ export const useNodesInteractions = () => {
|
||||
|
||||
const { setClipboardElements } = workflowStore.getState()
|
||||
|
||||
const { getNodes } = store.getState()
|
||||
|
||||
const nodes = getNodes()
|
||||
const { nodes } = collaborativeWorkflow.getState()
|
||||
|
||||
if (nodeId) {
|
||||
// If nodeId is provided, copy that specific node
|
||||
@ -1485,7 +1460,7 @@ export const useNodesInteractions = () => {
|
||||
if (selectedNode) setClipboardElements([selectedNode])
|
||||
}
|
||||
},
|
||||
[getNodesReadOnly, store, workflowStore],
|
||||
[getNodesReadOnly, collaborativeWorkflow, workflowStore],
|
||||
)
|
||||
|
||||
const handleNodesPaste = useCallback(() => {
|
||||
@ -1493,11 +1468,10 @@ export const useNodesInteractions = () => {
|
||||
|
||||
const { clipboardElements, mousePosition } = workflowStore.getState()
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
|
||||
const nodesToPaste: Node[] = []
|
||||
const edgesToPaste: Edge[] = []
|
||||
const nodes = getNodes()
|
||||
|
||||
if (clipboardElements.length) {
|
||||
const { x, y } = getTopLeftNodePosition(clipboardElements)
|
||||
@ -1649,7 +1623,7 @@ export const useNodesInteractions = () => {
|
||||
}, [
|
||||
getNodesReadOnly,
|
||||
workflowStore,
|
||||
store,
|
||||
collaborativeWorkflow,
|
||||
reactflow,
|
||||
saveStateToHistory,
|
||||
handleSyncWorkflowDraft,
|
||||
@ -1671,9 +1645,8 @@ export const useNodesInteractions = () => {
|
||||
const handleNodesDelete = useCallback(() => {
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, edges } = store.getState()
|
||||
const { nodes, edges } = collaborativeWorkflow.getState()
|
||||
|
||||
const nodes = getNodes()
|
||||
const bundledNodes = nodes.filter(
|
||||
node => node.data._isBundled && node.data.type !== BlockEnum.Start,
|
||||
)
|
||||
@ -1692,16 +1665,15 @@ export const useNodesInteractions = () => {
|
||||
)
|
||||
|
||||
if (selectedNode) handleNodeDelete(selectedNode.id)
|
||||
}, [store, getNodesReadOnly, handleNodeDelete])
|
||||
}, [collaborativeWorkflow, getNodesReadOnly, handleNodeDelete])
|
||||
|
||||
const handleNodeResize = useCallback(
|
||||
(nodeId: string, params: ResizeParamsWithDirection) => {
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, setNodes } = store.getState()
|
||||
const { nodes, setNodes } = collaborativeWorkflow.getState()
|
||||
const { x, y, width, height } = params
|
||||
|
||||
const nodes = getNodes()
|
||||
const currentNode = nodes.find(n => n.id === nodeId)!
|
||||
const childrenNodes = nodes.filter(n =>
|
||||
currentNode.data._children?.find((c: any) => c.nodeId === n.id),
|
||||
@ -1760,15 +1732,14 @@ export const useNodesInteractions = () => {
|
||||
handleSyncWorkflowDraft()
|
||||
saveStateToHistory(WorkflowHistoryEvent.NodeResize, { nodeId })
|
||||
},
|
||||
[getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory],
|
||||
[getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory],
|
||||
)
|
||||
|
||||
const handleNodeDisconnect = useCallback(
|
||||
(nodeId: string) => {
|
||||
if (getNodesReadOnly()) return
|
||||
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
const currentNode = nodes.find(node => node.id === nodeId)!
|
||||
const connectedEdges = getConnectedEdges([currentNode], edges)
|
||||
const nodesConnectedSourceOrTargetHandleIdsMap
|
||||
@ -1799,24 +1770,24 @@ export const useNodesInteractions = () => {
|
||||
handleSyncWorkflowDraft()
|
||||
saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
|
||||
},
|
||||
[store, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory],
|
||||
[collaborativeWorkflow, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory],
|
||||
)
|
||||
|
||||
const handleHistoryBack = useCallback(() => {
|
||||
if (getNodesReadOnly() || getWorkflowReadOnly()) return
|
||||
|
||||
const { setEdges, setNodes } = store.getState()
|
||||
undo()
|
||||
// Use collaborative undo from Loro
|
||||
const undoResult = collaborationManager.undo()
|
||||
|
||||
const { edges, nodes } = workflowHistoryStore.getState()
|
||||
if (edges.length === 0 && nodes.length === 0) return
|
||||
|
||||
setEdges(edges)
|
||||
setNodes(nodes)
|
||||
if (undoResult) {
|
||||
// The undo operation will automatically trigger subscriptions
|
||||
// which will update the nodes and edges through setupSubscriptions
|
||||
console.log('Collaborative undo performed')
|
||||
}
|
||||
else {
|
||||
console.log('Nothing to undo')
|
||||
}
|
||||
}, [
|
||||
store,
|
||||
undo,
|
||||
workflowHistoryStore,
|
||||
getNodesReadOnly,
|
||||
getWorkflowReadOnly,
|
||||
])
|
||||
@ -1824,18 +1795,17 @@ export const useNodesInteractions = () => {
|
||||
const handleHistoryForward = useCallback(() => {
|
||||
if (getNodesReadOnly() || getWorkflowReadOnly()) return
|
||||
|
||||
const { setEdges, setNodes } = store.getState()
|
||||
redo()
|
||||
// Use collaborative redo from Loro
|
||||
const redoResult = collaborationManager.redo()
|
||||
|
||||
const { edges, nodes } = workflowHistoryStore.getState()
|
||||
if (edges.length === 0 && nodes.length === 0) return
|
||||
|
||||
setEdges(edges)
|
||||
setNodes(nodes)
|
||||
if (redoResult) {
|
||||
// The redo operation will automatically trigger subscriptions
|
||||
// which will update the nodes and edges through setupSubscriptions
|
||||
console.log('Collaborative redo performed')
|
||||
} else {
|
||||
console.log('Nothing to redo')
|
||||
}
|
||||
}, [
|
||||
redo,
|
||||
store,
|
||||
workflowHistoryStore,
|
||||
getNodesReadOnly,
|
||||
getWorkflowReadOnly,
|
||||
])
|
||||
@ -1844,8 +1814,7 @@ export const useNodesInteractions = () => {
|
||||
/** Add opacity-30 to all nodes except the nodeId */
|
||||
const dimOtherNodes = useCallback(() => {
|
||||
if (isDimming) return
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
|
||||
const selectedNode = nodes.find(n => n.data.selected)
|
||||
if (!selectedNode) return
|
||||
@ -1938,12 +1907,11 @@ export const useNodesInteractions = () => {
|
||||
draft.push(...tempEdges)
|
||||
})
|
||||
setEdges(newEdges)
|
||||
}, [isDimming, store])
|
||||
}, [isDimming, collaborativeWorkflow])
|
||||
|
||||
/** Restore all nodes to full opacity */
|
||||
const undimAllNodes = useCallback(() => {
|
||||
const { getNodes, setNodes, edges, setEdges } = store.getState()
|
||||
const nodes = getNodes()
|
||||
const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
|
||||
setIsDimming(false)
|
||||
|
||||
const newNodes = produce(nodes, (draft) => {
|
||||
@ -1963,7 +1931,7 @@ export const useNodesInteractions = () => {
|
||||
},
|
||||
)
|
||||
setEdges(newEdges)
|
||||
}, [store])
|
||||
}, [collaborativeWorkflow])
|
||||
|
||||
return {
|
||||
handleNodeDragStart,
|
||||
|
||||
@ -21,6 +21,7 @@ import type {
|
||||
import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||
import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
import cn from '@/utils/classnames'
|
||||
import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
|
||||
@ -32,6 +33,7 @@ const ChatVariablePanel = () => {
|
||||
const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
|
||||
const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
|
||||
const updateChatVarList = useStore(s => s.setConversationVariables)
|
||||
const appId = useStore(s => s.appId)
|
||||
const { doSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const {
|
||||
invalidateConversationVarValues,
|
||||
@ -40,9 +42,17 @@ const ChatVariablePanel = () => {
|
||||
doSyncWorkflowDraft(false, {
|
||||
onSuccess() {
|
||||
invalidateConversationVarValues()
|
||||
if (appId) {
|
||||
const socket = webSocketClient.getSocket(appId)
|
||||
if (socket) {
|
||||
socket.emit('collaboration_event', {
|
||||
type: 'varsAndFeaturesUpdate',
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}, [doSyncWorkflowDraft, invalidateConversationVarValues])
|
||||
}, [doSyncWorkflowDraft, invalidateConversationVarValues, appId])
|
||||
|
||||
const [showTip, setShowTip] = useState(true)
|
||||
const [showVariableModal, setShowVariableModal] = useState(false)
|
||||
|
||||
@ -18,6 +18,8 @@ import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/node
|
||||
import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
|
||||
import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
|
||||
import { useStore as useWorkflowStore } from '@/app/components/workflow/store'
|
||||
|
||||
const EnvPanel = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -28,6 +30,7 @@ const EnvPanel = () => {
|
||||
const updateEnvList = useStore(s => s.setEnvironmentVariables)
|
||||
const setEnvSecrets = useStore(s => s.setEnvSecrets)
|
||||
const { doSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const appId = useWorkflowStore(s => s.appId)
|
||||
|
||||
const [showVariableModal, setShowVariableModal] = useState(false)
|
||||
const [currentVar, setCurrentVar] = useState<EnvironmentVariable>()
|
||||
@ -65,18 +68,28 @@ const EnvPanel = () => {
|
||||
setShowVariableModal(true)
|
||||
}
|
||||
|
||||
const handleDelete = useCallback((env: EnvironmentVariable) => {
|
||||
const handleDelete = useCallback(async (env: EnvironmentVariable) => {
|
||||
removeUsedVarInNodes(env)
|
||||
updateEnvList(envList.filter(e => e.id !== env.id))
|
||||
setCacheForDelete(undefined)
|
||||
setShowRemoveConfirm(false)
|
||||
doSyncWorkflowDraft()
|
||||
await doSyncWorkflowDraft()
|
||||
|
||||
// Emit update event to other connected clients
|
||||
const socket = webSocketClient.getSocket(appId)
|
||||
if (socket?.connected) {
|
||||
socket.emit('collaboration_event', {
|
||||
type: 'varsAndFeaturesUpdate',
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
}
|
||||
|
||||
if (env.value_type === 'secret') {
|
||||
const newMap = { ...envSecrets }
|
||||
delete newMap[env.id]
|
||||
setEnvSecrets(newMap)
|
||||
}
|
||||
}, [doSyncWorkflowDraft, envList, envSecrets, removeUsedVarInNodes, setEnvSecrets, updateEnvList])
|
||||
}, [doSyncWorkflowDraft, envList, envSecrets, removeUsedVarInNodes, setEnvSecrets, updateEnvList, appId])
|
||||
|
||||
const deleteCheck = useCallback((env: EnvironmentVariable) => {
|
||||
const effectedNodes = getEffectedNodes(env)
|
||||
@ -102,6 +115,12 @@ const EnvPanel = () => {
|
||||
const newList = [env, ...envList]
|
||||
updateEnvList(newList)
|
||||
await doSyncWorkflowDraft()
|
||||
const socket = webSocketClient.getSocket(appId)
|
||||
if (socket) {
|
||||
socket.emit('collaboration_event', {
|
||||
type: 'varsAndFeaturesUpdate',
|
||||
})
|
||||
}
|
||||
updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
|
||||
return
|
||||
}
|
||||
@ -143,8 +162,14 @@ const EnvPanel = () => {
|
||||
setNodes(newNodes)
|
||||
}
|
||||
await doSyncWorkflowDraft()
|
||||
const socket = webSocketClient.getSocket(appId)
|
||||
if (socket) {
|
||||
socket.emit('collaboration_event', {
|
||||
type: 'varsAndFeaturesUpdate',
|
||||
})
|
||||
}
|
||||
updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
|
||||
}, [currentVar, doSyncWorkflowDraft, envList, envSecrets, getEffectedNodes, setEnvSecrets, store, updateEnvList])
|
||||
}, [currentVar, doSyncWorkflowDraft, envList, envSecrets, getEffectedNodes, setEnvSecrets, store, updateEnvList, appId])
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@ -26,9 +26,10 @@ export type WorkflowDraftSliceShape = {
|
||||
export const createWorkflowDraftSlice: StateCreator<WorkflowDraftSliceShape> = set => ({
|
||||
backupDraft: undefined,
|
||||
setBackupDraft: backupDraft => set(() => ({ backupDraft })),
|
||||
// TODO: hjlarry test collaboration
|
||||
debouncedSyncWorkflowDraft: debounce((syncWorkflowDraft) => {
|
||||
syncWorkflowDraft()
|
||||
}, 5000),
|
||||
}, 500000),
|
||||
syncWorkflowDraftHash: '',
|
||||
setSyncWorkflowDraftHash: syncWorkflowDraftHash => set(() => ({ syncWorkflowDraftHash })),
|
||||
isSyncingWorkflowDraft: false,
|
||||
|
||||
Reference in New Issue
Block a user