chore: workflow sync with hash (#4250)

web/app/components/workflow/hooks/use-nodes-sync-draft.ts

   useWorkflowStore,
 } from '../store'
 import { BlockEnum } from '../types'
+import { useWorkflowUpdate } from '../hooks'
 import { useNodesReadOnly } from './use-workflow'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
   const workflowStore = useWorkflowStore()
   const featuresStore = useFeaturesStore()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const { handleRefreshWorkflowDraft } = useWorkflowUpdate()
   const debouncedSyncWorkflowDraft = useStore(s => s.debouncedSyncWorkflowDraft)
   const params = useParams()
 
-  const getPostParams = useCallback((appIdParams?: string) => {
+  const getPostParams = useCallback(() => {
     const {
       getNodes,
       edges,
       transform,
     } = store.getState()
     const [x, y, zoom] = transform
-    const appId = workflowStore.getState().appId
+    const {
+      appId,
+      syncWorkflowDraftHash,
+    } = workflowStore.getState()
 
-    if (appId || appIdParams) {
+    if (appId) {
       const nodes = getNodes()
       const hasStartNode = nodes.find(node => node.data.type === BlockEnum.Start)
 
         })
       })
       return {
-        url: `/apps/${appId || appIdParams}/workflows/draft`,
+        url: `/apps/${appId}/workflows/draft`,
         params: {
           graph: {
             nodes: producedNodes,
             sensitive_word_avoidance: features.moderation,
             file_upload: features.file,
           },
+          hash: syncWorkflowDraftHash,
         },
       }
     }
     }
   }, [getPostParams, params.appId, getNodesReadOnly])
 
-  const doSyncWorkflowDraft = useCallback(async (appId?: string) => {
+  const doSyncWorkflowDraft = useCallback(async (notRefreshWhenSyncError?: boolean) => {
     if (getNodesReadOnly())
       return
-    const postParams = getPostParams(appId)
+    const postParams = getPostParams()
 
     if (postParams) {
-      const res = await syncWorkflowDraft(postParams)
-      workflowStore.getState().setDraftUpdatedAt(res.updated_at)
+      const {
+        setSyncWorkflowDraftHash,
+        setDraftUpdatedAt,
+      } = workflowStore.getState()
+      try {
+        const res = await syncWorkflowDraft(postParams)
+        setSyncWorkflowDraftHash(res.hash)
+        setDraftUpdatedAt(res.updated_at)
+      }
+      catch (error: any) {
+        if (error && error.json && !error.bodyUsed) {
+          error.json().then((err: any) => {
+            if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
+              handleRefreshWorkflowDraft()
+          })
+        }
+      }
     }
-  }, [workflowStore, getPostParams, getNodesReadOnly])
+  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft])
 
-  const handleSyncWorkflowDraft = useCallback((sync?: boolean, appId?: string) => {
+  const handleSyncWorkflowDraft = useCallback((sync?: boolean, notRefreshWhenSyncError?: boolean) => {
     if (getNodesReadOnly())
       return
 
     if (sync)
-      doSyncWorkflowDraft(appId)
+      doSyncWorkflowDraft(notRefreshWhenSyncError)
     else
       debouncedSyncWorkflowDraft(doSyncWorkflowDraft)
   }, [debouncedSyncWorkflowDraft, doSyncWorkflowDraft, getNodesReadOnly])

web/app/components/workflow/hooks/use-workflow-interactions.ts

 import { useEdgesInteractions } from './use-edges-interactions'
 import { useNodesInteractions } from './use-nodes-interactions'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { fetchWorkflowDraft } from '@/service/workflow'
 
 export const useWorkflowInteractions = () => {
-  const reactflow = useReactFlow()
   const workflowStore = useWorkflowStore()
   const { handleNodeCancelRunningStatus } = useNodesInteractions()
   const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
-  const { eventEmitter } = useEventEmitterContextContext()
 
   const handleCancelDebugAndPreviewPanel = useCallback(() => {
     workflowStore.setState({
     handleEdgeCancelRunningStatus()
   }, [workflowStore, handleNodeCancelRunningStatus, handleEdgeCancelRunningStatus])
 
+  return {
+    handleCancelDebugAndPreviewPanel,
+  }
+}
+
+export const useWorkflowUpdate = () => {
+  const reactflow = useReactFlow()
+  const workflowStore = useWorkflowStore()
+  const { eventEmitter } = useEventEmitterContextContext()
+
   const handleUpdateWorkflowCanvas = useCallback((payload: WorkflowDataUpdator) => {
     const {
       nodes,
     setViewport(viewport)
   }, [eventEmitter, reactflow])
 
+  const handleRefreshWorkflowDraft = useCallback(() => {
+    const {
+      appId,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+    fetchWorkflowDraft(`/apps/${appId}/workflows/draft`).then((response) => {
+      handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdator)
+      setSyncWorkflowDraftHash(response.hash)
+    })
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
   return {
-    handleCancelDebugAndPreviewPanel,
     handleUpdateWorkflowCanvas,
+    handleRefreshWorkflowDraft,
   }
 }

web/app/components/workflow/hooks/use-workflow-run.ts

   NodeRunningStatus,
   WorkflowRunningStatus,
 } from '../types'
-import { useWorkflowInteractions } from './use-workflow-interactions'
+import { useWorkflowUpdate } from './use-workflow-interactions'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { IOtherOptions } from '@/service/base'
 import { ssePost } from '@/service/base'
   const reactflow = useReactFlow()
   const featuresStore = useFeaturesStore()
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
-  const { handleUpdateWorkflowCanvas } = useWorkflowInteractions()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
 
   const handleBackupDraft = useCallback(() => {
     const {

web/app/components/workflow/hooks/use-workflow.ts

   } = useWorkflowTemplate()
   const { handleFetchAllTools } = useFetchToolsData()
   const appDetail = useAppStore(state => state.appDetail)!
+  const setSyncWorkflowDraftHash = useStore(s => s.setSyncWorkflowDraftHash)
   const [data, setData] = useState<FetchWorkflowDraftResponse>()
   const [isLoading, setIsLoading] = useState(true)
   workflowStore.setState({ appId: appDetail.id })
       const res = await fetchWorkflowDraft(`/apps/${appDetail.id}/workflows/draft`)
 
       setData(res)
+      setSyncWorkflowDraftHash(res.hash)
       setIsLoading(false)
     }
     catch (error: any) {
         })
       }
     }
-  }, [appDetail, nodesTemplate, edgesTemplate, workflowStore])
+  }, [appDetail, nodesTemplate, edgesTemplate, workflowStore, setSyncWorkflowDraftHash])
 
   useEffect(() => {
     handleGetInitialWorkflowData()

web/app/components/workflow/index.tsx

   useWorkflowInit,
   useWorkflowReadOnly,
   useWorkflowStartRun,
+  useWorkflowUpdate,
 } from './hooks'
 import Header from './header'
 import CustomNode from './nodes'
 
   useEffect(() => {
     return () => {
-      handleSyncWorkflowDraft(true)
+      handleSyncWorkflowDraft(true, true)
     }
   }, [])
 
+  const { handleRefreshWorkflowDraft } = useWorkflowUpdate()
   const handleSyncWorkflowDraftWhenPageClose = useCallback(() => {
     if (document.visibilityState === 'hidden')
       syncWorkflowDraftWhenPageClose()
-  }, [syncWorkflowDraftWhenPageClose])
+    else if (document.visibilityState === 'visible')
+      handleRefreshWorkflowDraft()
+  }, [syncWorkflowDraftWhenPageClose, handleRefreshWorkflowDraft])
 
   useEffect(() => {
     document.addEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)

web/app/components/workflow/store.ts

   setNodeMenu: (nodeMenu: Shape['nodeMenu']) => void
   mousePosition: { pageX: number; pageY: number; elementX: number; elementY: number }
   setMousePosition: (mousePosition: Shape['mousePosition']) => void
+  syncWorkflowDraftHash: string
+  setSyncWorkflowDraftHash: (hash: string) => void
 }
 
 export const createWorkflowStore = () => {
     setNodeMenu: nodeMenu => set(() => ({ nodeMenu })),
     mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
     setMousePosition: mousePosition => set(() => ({ mousePosition })),
+    syncWorkflowDraftHash: '',
+    setSyncWorkflowDraftHash: syncWorkflowDraftHash => set(() => ({ syncWorkflowDraftHash })),
   }))
 }
 

web/service/workflow.ts

 } from '@/types/workflow'
 import type { BlockEnum } from '@/app/components/workflow/types'
 
-export const fetchWorkflowDraft: Fetcher<FetchWorkflowDraftResponse, string> = (url) => {
-  return get<FetchWorkflowDraftResponse>(url, {}, { silent: true })
+export const fetchWorkflowDraft = (url: string) => {
+  return get(url, {}, { silent: true }) as Promise<FetchWorkflowDraftResponse>
 }
 
 export const syncWorkflowDraft = ({ url, params }: { url: string; params: Pick<FetchWorkflowDraftResponse, 'graph' | 'features'> }) => {
-  return post<CommonResponse & { updated_at: number }>(url, { body: params })
+  return post<CommonResponse & { updated_at: number; hash: string }>(url, { body: params }, { silent: true })
 }
 
 export const fetchNodesDefaultConfigs: Fetcher<NodesDefaultConfigsResponse, string> = (url) => {

web/types/workflow.ts

     name: string
     email: string
   }
+  hash: string
   updated_at: number
 }