collaborate conversation vars

web/app/components/workflow-app/components/workflow-main.tsx

@@ -23,6 +23,7 @@ import { useWebSocketStore } from '@/app/components/workflow/store/websocket-sto
 import { useCollaborativeCursors } from '../hooks'
 import type { OnlineUser } from '@/service/demo/online-user'
 import { collaborationManager } from '@/app/components/workflow/collaboration/manage'
+import { fetchWorkflowDraft } from '@/service/workflow'
 import { useStoreApi } from 'reactflow'
 
 type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
@@ -44,7 +45,7 @@ const WorkflowMain = ({
     collaborationManager.init(appId, store)
   }, [appId, store])
 
-  const { emit, getSocket } = useWebSocketStore()
+  const { emit, getSocket, on } = useWebSocketStore()
 
   const handleWorkflowDataUpdate = useCallback((payload: any) => {
     const {
@@ -67,6 +68,24 @@ const WorkflowMain = ({
     }
   }, [featuresStore, workflowStore])
 
+  useEffect(() => {
+    if (!appId) return
+
+    const unsubscribeConversationVarsUpdate = on('vars-features-update', async () => {
+      try {
+        const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
+        handleWorkflowDataUpdate(response)
+      }
+ catch (error) {
+        console.error('workflow vars and features update failed:', error)
+      }
+    })
+
+    return () => {
+      unsubscribeConversationVarsUpdate()
+    }
+  }, [appId, on])
+
   const handleMouseMove = useCallback((event: MouseEvent) => {
     if (!containerRef.current) return
 

web/app/components/workflow/panel/chat-variable-panel/index.tsx

@@ -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 { useWebSocketStore } from '@/app/components/workflow/store/websocket-store'
 import { useDocLink } from '@/context/i18n'
 import cn from '@/utils/classnames'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
@@ -36,10 +37,14 @@ const ChatVariablePanel = () => {
   const {
     invalidateConversationVarValues,
   } = useInspectVarsCrud()
+  const { emit } = useWebSocketStore()
   const handleVarChanged = useCallback(() => {
     doSyncWorkflowDraft(false, {
       onSuccess() {
         invalidateConversationVarValues()
+        emit('vars-features-update', {
+          timestamp: Date.now(),
+        })
       },
     })
   }, [doSyncWorkflowDraft, invalidateConversationVarValues])