feat: Pass workflow draft sync callback to sub-graph

web/app/components/sub-graph/components/sub-graph-main.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { Viewport } from 'reactflow'
+import type { SyncWorkflowDraft, SyncWorkflowDraftCallback } from '../types'
 import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store'
 import type { MentionConfig } from '@/app/components/workflow/nodes/_base/types'
 import type { Edge, Node } from '@/app/components/workflow/types'
@@ -22,6 +23,7 @@ type SubGraphMainProps = {
   mentionConfig: MentionConfig
   onMentionConfigChange: (config: MentionConfig) => void
   onSave?: (nodes: Node[], edges: Edge[]) => void
+  onSyncWorkflowDraft?: SyncWorkflowDraft
 }
 
 const SubGraphMain: FC<SubGraphMainProps> = ({
@@ -34,6 +36,7 @@ const SubGraphMain: FC<SubGraphMainProps> = ({
   mentionConfig,
   onMentionConfigChange,
   onSave,
+  onSyncWorkflowDraft,
 }) => {
   const reactFlowStore = useStoreApi()
   const availableNodesMetaData = useAvailableNodesMetaData()
@@ -53,17 +56,35 @@ const SubGraphMain: FC<SubGraphMainProps> = ({
     onSave?.(getNodes() as Node[], edges as Edge[])
   }, [onSave, reactFlowStore])
 
+  const handleSyncWorkflowDraft = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: SyncWorkflowDraftCallback,
+  ) => {
+    handleSyncSubGraphDraft()
+    if (onSyncWorkflowDraft) {
+      await onSyncWorkflowDraft(notRefreshWhenSyncError, callback)
+      return
+    }
+    try {
+      callback?.onSuccess?.()
+    }
+    catch {
+      callback?.onError?.()
+    }
+    finally {
+      callback?.onSettled?.()
+    }
+  }, [handleSyncSubGraphDraft, onSyncWorkflowDraft])
+
   const hooksStore = useMemo(() => ({
     interactionMode: 'subgraph',
     availableNodesMetaData,
     configsMap,
     fetchInspectVars,
     ...inspectVarsCrud,
-    doSyncWorkflowDraft: async () => {
-      handleSyncSubGraphDraft()
-    },
+    doSyncWorkflowDraft: handleSyncWorkflowDraft,
     syncWorkflowDraftWhenPageClose: handleSyncSubGraphDraft,
-  }), [availableNodesMetaData, configsMap, fetchInspectVars, handleSyncSubGraphDraft, inspectVarsCrud])
+  }), [availableNodesMetaData, configsMap, fetchInspectVars, handleSyncSubGraphDraft, handleSyncWorkflowDraft, inspectVarsCrud])
 
   return (
     <WorkflowWithInnerContext

web/app/components/sub-graph/index.tsx

@@ -43,6 +43,7 @@ const SubGraphContent: FC<SubGraphProps> = (props) => {
     parentAvailableVars,
     configsMap,
     onSave,
+    onSyncWorkflowDraft,
   } = props
 
   const setParentAvailableVars = useStore(state => state.setParentAvailableVars)
@@ -192,6 +193,7 @@ const SubGraphContent: FC<SubGraphProps> = (props) => {
         mentionConfig={mentionConfig}
         onMentionConfigChange={onMentionConfigChange}
         onSave={onSave}
+        onSyncWorkflowDraft={onSyncWorkflowDraft}
       />
     </WorkflowWithDefaultContext>
   )

web/app/components/sub-graph/types.ts

@@ -1,14 +1,27 @@
 import type { StateCreator } from 'zustand'
+import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store'
 import type { MentionConfig } from '@/app/components/workflow/nodes/_base/types'
 import type { LLMNodeType } from '@/app/components/workflow/nodes/llm/types'
 import type { Edge, Node, NodeOutPutVar, ValueSelector } from '@/app/components/workflow/types'
 
+export type SyncWorkflowDraftCallback = {
+  onSuccess?: () => void
+  onError?: () => void
+  onSettled?: () => void
+}
+
+export type SyncWorkflowDraft = (
+  notRefreshWhenSyncError?: boolean,
+  callback?: SyncWorkflowDraftCallback,
+) => Promise<void>
+
 export type SubGraphProps = {
   toolNodeId: string
   paramKey: string
   sourceVariable: ValueSelector
   agentNodeId: string
   agentName: string
+  configsMap?: HooksStoreShape['configsMap']
   mentionConfig: MentionConfig
   onMentionConfigChange: (config: MentionConfig) => void
   extractorNode?: Node<LLMNodeType>
@@ -16,6 +29,7 @@ export type SubGraphProps = {
   parentAvailableNodes?: Node[]
   parentAvailableVars?: NodeOutPutVar[]
   onSave?: (nodes: Node[], edges: Edge[]) => void
+  onSyncWorkflowDraft?: SyncWorkflowDraft
 }
 
 export type SubGraphSliceShape = {

web/app/components/workflow/nodes/tool/components/sub-graph-modal/index.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
 import { Agent } from '@/app/components/base/icons/src/vender/workflow'
 import { useIsChatMode, useNodesSyncDraft, useWorkflow, useWorkflowVariables } from '@/app/components/workflow/hooks'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
 import { VarKindType } from '@/app/components/workflow/nodes/_base/types'
 import { useStore as useWorkflowStore } from '@/app/components/workflow/store'
 import { BlockEnum, EditionType, PromptRole } from '@/app/components/workflow/types'
@@ -32,7 +33,8 @@ const SubGraphModal: FC<SubGraphModalProps> = ({
   const workflowNodes = useWorkflowStore(state => state.nodes)
   const workflowEdges = useReactFlowStore(state => state.edges)
   const setControlPromptEditorRerenderKey = useWorkflowStore(state => state.setControlPromptEditorRerenderKey)
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { handleSyncWorkflowDraft, doSyncWorkflowDraft } = useNodesSyncDraft()
+  const configsMap = useHooksStore(state => state.configsMap)
   const { getBeforeNodesInSameBranch } = useWorkflow()
   const { getNodeAvailableVars } = useWorkflowVariables()
   const isChatMode = useIsChatMode()
@@ -234,6 +236,7 @@ const SubGraphModal: FC<SubGraphModalProps> = ({
                     sourceVariable={sourceVariable}
                     agentNodeId={agentNodeId}
                     agentName={agentName}
+                    configsMap={configsMap}
                     mentionConfig={mentionConfig}
                     onMentionConfigChange={handleMentionConfigChange}
                     extractorNode={extractorNode}
@@ -241,6 +244,7 @@ const SubGraphModal: FC<SubGraphModalProps> = ({
                     parentAvailableNodes={parentAgentNodes}
                     parentAvailableVars={parentAvailableVars}
                     onSave={handleSave}
+                    onSyncWorkflowDraft={doSyncWorkflowDraft}
                   />
                 </div>
               </DialogPanel>

web/app/components/workflow/nodes/tool/components/sub-graph-modal/sub-graph-canvas.tsx

@@ -10,6 +10,7 @@ const SubGraphCanvas: FC<SubGraphCanvasProps> = ({
   sourceVariable,
   agentNodeId,
   agentName,
+  configsMap,
   mentionConfig,
   onMentionConfigChange,
   extractorNode,
@@ -17,6 +18,7 @@ const SubGraphCanvas: FC<SubGraphCanvasProps> = ({
   parentAvailableNodes,
   parentAvailableVars,
   onSave,
+  onSyncWorkflowDraft,
 }) => {
   return (
     <div className="h-full w-full">
@@ -26,6 +28,7 @@ const SubGraphCanvas: FC<SubGraphCanvasProps> = ({
         sourceVariable={sourceVariable}
         agentNodeId={agentNodeId}
         agentName={agentName}
+        configsMap={configsMap}
         mentionConfig={mentionConfig}
         onMentionConfigChange={onMentionConfigChange}
         extractorNode={extractorNode}
@@ -33,6 +36,7 @@ const SubGraphCanvas: FC<SubGraphCanvasProps> = ({
         parentAvailableNodes={parentAvailableNodes}
         parentAvailableVars={parentAvailableVars}
         onSave={onSave}
+        onSyncWorkflowDraft={onSyncWorkflowDraft}
       />
     </div>
   )

web/app/components/workflow/nodes/tool/components/sub-graph-modal/types.ts

@@ -1,3 +1,5 @@
+import type { SyncWorkflowDraft } from '@/app/components/sub-graph/types'
+import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store'
 import type { MentionConfig } from '@/app/components/workflow/nodes/_base/types'
 import type { LLMNodeType } from '@/app/components/workflow/nodes/llm/types'
 import type { NodeOutPutVar, Edge as WorkflowEdge, Node as WorkflowNode } from '@/app/components/workflow/types'
@@ -20,6 +22,7 @@ export type SubGraphCanvasProps = {
   sourceVariable: WorkflowValueSelector
   agentNodeId: string
   agentName: string
+  configsMap?: HooksStoreShape['configsMap']
   mentionConfig: MentionConfig
   onMentionConfigChange: (config: MentionConfig) => void
   extractorNode?: WorkflowNode<LLMNodeType>
@@ -27,4 +30,5 @@ export type SubGraphCanvasProps = {
   parentAvailableNodes?: WorkflowNode[]
   parentAvailableVars?: NodeOutPutVar[]
   onSave?: (nodes: WorkflowNode[], edges: WorkflowEdge[]) => void
+  onSyncWorkflowDraft?: SyncWorkflowDraft
 }