Refactor sub-graph components structure

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

@@ -1,83 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { ConfigPanelProps, WhenOutputNoneOption } from './types'
-import { memo, useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Field from '@/app/components/workflow/nodes/_base/components/field'
-import { cn } from '@/utils/classnames'
-
-const outputVariables = [
-  { name: 'text', type: 'string' },
-  { name: 'structured_output', type: 'object' },
-]
-
-const ConfigPanel: FC<ConfigPanelProps> = ({
-  toolNodeId: _toolNodeId,
-  paramKey: _paramKey,
-  activeTab,
-}) => {
-  const { t } = useTranslation()
-  const [whenOutputNone, setWhenOutputNone] = useState<WhenOutputNoneOption>('skip')
-
-  const handleWhenOutputNoneChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    setWhenOutputNone(e.target.value as WhenOutputNoneOption)
-  }, [])
-
-  if (activeTab === 'lastRun') {
-    return (
-      <div className="flex h-full items-center justify-center p-4">
-        <div className="text-center">
-          <p className="system-sm-regular text-text-tertiary">
-            {t('subGraphModal.noRunHistory', { ns: 'workflow' })}
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-4 p-4">
-      <Field
-        title={t('subGraphModal.outputVariables', { ns: 'workflow' })}
-      >
-        <div className="space-y-2">
-          {outputVariables.map(variable => (
-            <div
-              key={variable.name}
-              className="flex items-center justify-between rounded-lg bg-components-input-bg-normal px-3 py-2"
-            >
-              <span className="system-sm-medium text-text-secondary">{variable.name}</span>
-              <span className="system-xs-regular text-text-tertiary">{variable.type}</span>
-            </div>
-          ))}
-        </div>
-      </Field>
-
-      <Field
-        title={t('subGraphModal.whenOutputIsNone', { ns: 'workflow' })}
-      >
-        <select
-          className={cn(
-            'w-full rounded-lg border border-components-input-border-active bg-components-input-bg-normal px-3 py-2',
-            'system-sm-regular text-text-secondary',
-            'focus:border-primary-600 focus:outline-none',
-          )}
-          value={whenOutputNone}
-          onChange={handleWhenOutputNoneChange}
-        >
-          <option value="skip">
-            {t('subGraphModal.whenOutputNone.skip', { ns: 'workflow' })}
-          </option>
-          <option value="error">
-            {t('subGraphModal.whenOutputNone.error', { ns: 'workflow' })}
-          </option>
-          <option value="default">
-            {t('subGraphModal.whenOutputNone.default', { ns: 'workflow' })}
-          </option>
-        </select>
-      </Field>
-    </div>
-  )
-}
-
-export default memo(ConfigPanel)

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

@@ -1,49 +0,0 @@
-import type { CreateSubGraphSlice, SubGraphSliceShape } from './types'
-
-const initialState: Omit<SubGraphSliceShape, 'setSubGraphContext' | 'setSubGraphNodes' | 'setSubGraphEdges' | 'setSelectedOutputVar' | 'setWhenOutputNone' | 'setDefaultValue' | 'setShowDebugPanel' | 'setIsRunning' | 'setParentAvailableVars' | 'resetSubGraph'> = {
-  parentToolNodeId: '',
-  parameterKey: '',
-  sourceAgentNodeId: '',
-  sourceVariable: [],
-
-  subGraphNodes: [],
-  subGraphEdges: [],
-
-  selectedOutputVar: [],
-  whenOutputNone: 'skip',
-  defaultValue: '',
-
-  showDebugPanel: false,
-  isRunning: false,
-
-  parentAvailableVars: [],
-}
-
-export const createSubGraphSlice: CreateSubGraphSlice = set => ({
-  ...initialState,
-
-  setSubGraphContext: context => set(() => ({
-    parentToolNodeId: context.parentToolNodeId,
-    parameterKey: context.parameterKey,
-    sourceAgentNodeId: context.sourceAgentNodeId,
-    sourceVariable: context.sourceVariable,
-  })),
-
-  setSubGraphNodes: nodes => set(() => ({ subGraphNodes: nodes })),
-
-  setSubGraphEdges: edges => set(() => ({ subGraphEdges: edges })),
-
-  setSelectedOutputVar: selector => set(() => ({ selectedOutputVar: selector })),
-
-  setWhenOutputNone: option => set(() => ({ whenOutputNone: option })),
-
-  setDefaultValue: value => set(() => ({ defaultValue: value })),
-
-  setShowDebugPanel: show => set(() => ({ showDebugPanel: show })),
-
-  setIsRunning: running => set(() => ({ isRunning: running })),
-
-  setParentAvailableVars: vars => set(() => ({ parentAvailableVars: vars })),
-
-  resetSubGraph: () => set(() => ({ ...initialState })),
-})

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

@@ -1,44 +1,4 @@
-import type { StateCreator } from 'zustand'
-import type { Edge, Node, NodeOutPutVar, ValueSelector, VarType } from '@/app/components/workflow/types'
-
-export type SubGraphNodeData = {
-  isInSubGraph: boolean
-  subGraph_id: string
-  subGraphParamKey: string
-}
-
-export type SubGraphNode = Node & {
-  data: Node['data'] & SubGraphNodeData
-}
-
-export type SubGraphSourceNodeData = {
-  title: string
-  sourceAgentNodeId: string
-  sourceVariable: ValueSelector
-  sourceVarType: VarType
-  isReadOnly: true
-  isInSubGraph: true
-  subGraph_id: string
-  subGraphParamKey: string
-}
-
-export type WhenOutputNoneOption = 'skip' | 'error' | 'default'
-
-export type SubGraphConfig = {
-  enabled: boolean
-  startNodeId: string
-  selectedOutputVar: ValueSelector
-  whenOutputNone: WhenOutputNoneOption
-  defaultValue?: string
-}
-
-export type SubGraphOutputVariable = {
-  nodeId: string
-  nodeName: string
-  variable: string
-  type: VarType
-  description?: string
-}
+import type { ValueSelector } from '@/app/components/workflow/types'
 
 export type SubGraphModalProps = {
   isOpen: boolean
@@ -50,13 +10,6 @@ export type SubGraphModalProps = {
   agentNodeId: string
 }
 
-export type ConfigPanelProps = {
-  toolNodeId: string
-  paramKey: string
-  activeTab: 'settings' | 'lastRun'
-  onTabChange: (tab: 'settings' | 'lastRun') => void
-}
-
 export type SubGraphCanvasProps = {
   toolNodeId: string
   paramKey: string
@@ -64,40 +17,3 @@ export type SubGraphCanvasProps = {
   agentNodeId: string
   agentName: string
 }
-
-export type SubGraphSliceShape = {
-  parentToolNodeId: string
-  parameterKey: string
-  sourceAgentNodeId: string
-  sourceVariable: ValueSelector
-
-  subGraphNodes: SubGraphNode[]
-  subGraphEdges: Edge[]
-
-  selectedOutputVar: ValueSelector
-  whenOutputNone: WhenOutputNoneOption
-  defaultValue: string
-
-  showDebugPanel: boolean
-  isRunning: boolean
-
-  parentAvailableVars: NodeOutPutVar[]
-
-  setSubGraphContext: (context: {
-    parentToolNodeId: string
-    parameterKey: string
-    sourceAgentNodeId: string
-    sourceVariable: ValueSelector
-  }) => void
-  setSubGraphNodes: (nodes: SubGraphNode[]) => void
-  setSubGraphEdges: (edges: Edge[]) => void
-  setSelectedOutputVar: (selector: ValueSelector) => void
-  setWhenOutputNone: (option: WhenOutputNoneOption) => void
-  setDefaultValue: (value: string) => void
-  setShowDebugPanel: (show: boolean) => void
-  setIsRunning: (running: boolean) => void
-  setParentAvailableVars: (vars: NodeOutPutVar[]) => void
-  resetSubGraph: () => void
-}
-
-export type CreateSubGraphSlice = StateCreator<SubGraphSliceShape>