feat: Add sub-graph component for workflow

web/app/components/sub-graph/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useAvailableNodesMetaData } from './use-available-nodes-meta-data'
+export { useSubGraphInit } from './use-sub-graph-init'
+export { useSubGraphNodes } from './use-sub-graph-nodes'
+export { useSubGraphPersistence } from './use-sub-graph-persistence'
+export type { SubGraphData } from './use-sub-graph-persistence'

web/app/components/sub-graph/hooks/use-available-nodes-meta-data.ts

@@ -0,0 +1,43 @@
+import type { AvailableNodesMetaData } from '@/app/components/workflow/hooks-store/store'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+export const useAvailableNodesMetaData = () => {
+  const { t } = useTranslation()
+
+  const availableNodesMetaData = useMemo(() => WORKFLOW_COMMON_NODES.map((node) => {
+    const { metaData } = node
+    const title = t(`blocks.${metaData.type}`, { ns: 'workflow' })
+    const description = t(`blocksAbout.${metaData.type}`, { ns: 'workflow' })
+    return {
+      ...node,
+      metaData: {
+        ...metaData,
+        title,
+        description,
+      },
+      defaultValue: {
+        ...node.defaultValue,
+        type: metaData.type,
+        title,
+      },
+    }
+  }), [t])
+
+  const availableNodesMetaDataMap = useMemo(() => availableNodesMetaData.reduce((acc, node) => {
+    acc![node.metaData.type] = node
+    return acc
+  }, {} as AvailableNodesMetaData['nodesMap']), [availableNodesMetaData])
+
+  return useMemo(() => {
+    return {
+      nodes: availableNodesMetaData,
+      nodesMap: {
+        ...availableNodesMetaDataMap,
+        [BlockEnum.VariableAssigner]: availableNodesMetaDataMap?.[BlockEnum.VariableAggregator],
+      },
+    }
+  }, [availableNodesMetaData, availableNodesMetaDataMap])
+}

web/app/components/sub-graph/hooks/use-sub-graph-init.ts

@@ -0,0 +1,90 @@
+import type { SubGraphProps } from '../types'
+import type { LLMNodeType } from '@/app/components/workflow/nodes/llm/types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import { useMemo } from 'react'
+import { BlockEnum, PromptRole } from '@/app/components/workflow/types'
+import { AppModeEnum } from '@/types/app'
+
+const SUBGRAPH_SOURCE_NODE_ID = 'subgraph-source'
+const SUBGRAPH_LLM_NODE_ID = 'subgraph-llm'
+
+export const useSubGraphInit = (props: SubGraphProps) => {
+  const { sourceVariable, agentName } = props
+
+  const initialNodes = useMemo((): Node[] => {
+    const sourceVarName = sourceVariable.length > 1
+      ? sourceVariable.slice(1).join('.')
+      : 'output'
+
+    const startNode: Node<StartNodeType> = {
+      id: SUBGRAPH_SOURCE_NODE_ID,
+      type: 'custom',
+      position: { x: 100, y: 150 },
+      data: {
+        type: BlockEnum.Start,
+        title: `${agentName}: ${sourceVarName}`,
+        desc: 'Source variable from agent',
+        _connectedSourceHandleIds: ['source'],
+        _connectedTargetHandleIds: [],
+        variables: [],
+      },
+    }
+
+    const llmNode: Node<LLMNodeType> = {
+      id: SUBGRAPH_LLM_NODE_ID,
+      type: 'custom',
+      position: { x: 450, y: 150 },
+      data: {
+        type: BlockEnum.LLM,
+        title: 'LLM',
+        desc: 'Transform the output',
+        _connectedSourceHandleIds: [],
+        _connectedTargetHandleIds: ['target'],
+        model: {
+          provider: '',
+          name: '',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.7,
+          },
+        },
+        prompt_template: [{
+          role: PromptRole.system,
+          text: '',
+        }],
+        context: {
+          enabled: false,
+          variable_selector: [],
+        },
+        vision: {
+          enabled: false,
+        },
+      },
+    }
+
+    return [startNode, llmNode]
+  }, [sourceVariable, agentName])
+
+  const initialEdges = useMemo((): Edge[] => {
+    return [
+      {
+        id: `${SUBGRAPH_SOURCE_NODE_ID}-${SUBGRAPH_LLM_NODE_ID}`,
+        source: SUBGRAPH_SOURCE_NODE_ID,
+        sourceHandle: 'source',
+        target: SUBGRAPH_LLM_NODE_ID,
+        targetHandle: 'target',
+        type: 'custom',
+        data: {
+          sourceType: BlockEnum.Start,
+          targetType: BlockEnum.LLM,
+        },
+      },
+    ]
+  }, [])
+
+  return {
+    initialNodes,
+    initialEdges,
+  }
+}

web/app/components/sub-graph/hooks/use-sub-graph-nodes.ts

@@ -0,0 +1,20 @@
+import type { Edge, Node } from '@/app/components/workflow/types'
+import { useMemo } from 'react'
+import { initialEdges, initialNodes } from '@/app/components/workflow/utils'
+
+export const useSubGraphNodes = (nodes: Node[], edges: Edge[]) => {
+  const processedNodes = useMemo(
+    () => initialNodes(nodes, edges),
+    [nodes, edges],
+  )
+
+  const processedEdges = useMemo(
+    () => initialEdges(edges, nodes),
+    [edges, nodes],
+  )
+
+  return {
+    nodes: processedNodes,
+    edges: processedEdges,
+  }
+}

web/app/components/sub-graph/hooks/use-sub-graph-persistence.ts

@@ -0,0 +1,128 @@
+import type { SubGraphConfig } from '../types'
+import type { ToolNodeType } from '@/app/components/workflow/nodes/tool/types'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import { useCallback } from 'react'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { VarKindType } from '@/app/components/workflow/nodes/_base/types'
+
+type SubGraphPersistenceProps = {
+  toolNodeId: string
+  paramKey: string
+}
+
+export type SubGraphData = {
+  nodes: Node[]
+  edges: Edge[]
+  config: SubGraphConfig
+}
+
+const SUB_GRAPH_DATA_PREFIX = '__subgraph__'
+
+export const useSubGraphPersistence = ({
+  toolNodeId,
+  paramKey,
+}: SubGraphPersistenceProps) => {
+  const { inputs, setInputs } = useNodeCrud<ToolNodeType>(toolNodeId, {} as ToolNodeType)
+
+  const getSubGraphDataKey = useCallback(() => {
+    return `${SUB_GRAPH_DATA_PREFIX}${paramKey}`
+  }, [paramKey])
+
+  const loadSubGraphData = useCallback((): SubGraphData | null => {
+    const dataKey = getSubGraphDataKey()
+    const toolParameters = inputs.tool_parameters || {}
+    const storedData = toolParameters[dataKey]
+
+    if (!storedData || storedData.type !== VarKindType.constant) {
+      return null
+    }
+
+    try {
+      const parsed = typeof storedData.value === 'string'
+        ? JSON.parse(storedData.value)
+        : storedData.value
+
+      return parsed as SubGraphData
+    }
+    catch {
+      return null
+    }
+  }, [getSubGraphDataKey, inputs.tool_parameters])
+
+  const saveSubGraphData = useCallback((data: SubGraphData) => {
+    const dataKey = getSubGraphDataKey()
+    const newToolParameters = {
+      ...inputs.tool_parameters,
+      [dataKey]: {
+        type: VarKindType.constant,
+        value: JSON.stringify(data),
+      },
+    }
+
+    setInputs({
+      ...inputs,
+      tool_parameters: newToolParameters,
+    })
+  }, [getSubGraphDataKey, inputs, setInputs])
+
+  const clearSubGraphData = useCallback(() => {
+    const dataKey = getSubGraphDataKey()
+    const newToolParameters = { ...inputs.tool_parameters }
+    delete newToolParameters[dataKey]
+
+    setInputs({
+      ...inputs,
+      tool_parameters: newToolParameters,
+    })
+  }, [getSubGraphDataKey, inputs, setInputs])
+
+  const hasSubGraphData = useCallback(() => {
+    const dataKey = getSubGraphDataKey()
+    const toolParameters = inputs.tool_parameters || {}
+    return !!toolParameters[dataKey]
+  }, [getSubGraphDataKey, inputs.tool_parameters])
+
+  const updateSubGraphConfig = useCallback((
+    config: Partial<SubGraphConfig>,
+  ) => {
+    const existingData = loadSubGraphData()
+    if (!existingData)
+      return
+
+    saveSubGraphData({
+      ...existingData,
+      config: {
+        ...existingData.config,
+        ...config,
+      },
+    })
+  }, [loadSubGraphData, saveSubGraphData])
+
+  const updateSubGraphNodes = useCallback((
+    nodes: Node[],
+    edges: Edge[],
+  ) => {
+    const existingData = loadSubGraphData()
+    const defaultConfig: SubGraphConfig = {
+      enabled: true,
+      startNodeId: nodes[0]?.id || '',
+      selectedOutputVar: [],
+      whenOutputNone: 'skip',
+    }
+
+    saveSubGraphData({
+      nodes,
+      edges,
+      config: existingData?.config || defaultConfig,
+    })
+  }, [loadSubGraphData, saveSubGraphData])
+
+  return {
+    loadSubGraphData,
+    saveSubGraphData,
+    clearSubGraphData,
+    hasSubGraphData,
+    updateSubGraphConfig,
+    updateSubGraphNodes,
+  }
+}