feat: last run frontend (#21369)

The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699).

Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/workflow/nodes/agent/panel.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { memo, useMemo } from 'react'
+import { memo } from 'react'
 import type { NodePanelProps } from '../../types'
 import { AgentFeature, type AgentNodeType } from './types'
 import Field from '../_base/components/field'
@@ -9,16 +9,10 @@ import { useTranslation } from 'react-i18next'
 import OutputVars, { VarItem } from '../_base/components/output-vars'
 import type { StrategyParamItem } from '@/app/components/plugins/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
-import ResultPanel from '@/app/components/workflow/run/result-panel'
-import formatTracing from '@/app/components/workflow/run/utils/format-log'
-import { useLogs } from '@/app/components/workflow/run/hooks'
-import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 import { toType } from '@/app/components/tools/utils/to-form-schema'
 import { useStore } from '../../store'
 import Split from '../_base/components/split'
 import MemoryConfig from '../_base/components/memory-config'
-
 const i18nPrefix = 'workflow.nodes.agent'
 
 export function strategyParamToCredientialForm(param: StrategyParamItem): CredentialFormSchema {
@@ -42,41 +36,10 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
     availableNodesWithParent,
     availableVars,
     readOnly,
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runResult,
-    runInputData,
-    setRunInputData,
-    varInputs,
     outputSchema,
     handleMemoryChange,
   } = useConfig(props.id, props.data)
   const { t } = useTranslation()
-  const nodeInfo = useMemo(() => {
-    if (!runResult)
-      return
-    return formatTracing([runResult], t)[0]
-  }, [runResult, t])
-  const logsParams = useLogs()
-  const singleRunForms = (() => {
-    const forms: FormProps[] = []
-
-    if (varInputs.length > 0) {
-      forms.push(
-        {
-          label: t(`${i18nPrefix}.singleRun.variable`)!,
-          inputs: varInputs,
-          values: runInputData,
-          onChange: setRunInputData,
-        },
-      )
-    }
-
-    return forms
-  })()
 
   const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
 
@@ -154,21 +117,6 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
         ))}
       </OutputVars>
     </div>
-    {
-      isShowSingleRun && (
-        <BeforeRunForm
-          nodeName={inputs.title}
-          nodeType={inputs.type}
-          onHide={hideSingleRun}
-          forms={singleRunForms}
-          runningStatus={runningStatus}
-          onRun={handleRun}
-          onStop={handleStop}
-          {...logsParams}
-          result={<ResultPanel {...runResult} nodeInfo={nodeInfo} showSteps={false} {...logsParams} />}
-        />
-      )
-    }
   </div>
 }
 

web/app/components/workflow/nodes/agent/use-config.ts

@@ -1,7 +1,6 @@
 import { useStrategyProviderDetail } from '@/service/use-strategy'
 import useNodeCrud from '../_base/hooks/use-node-crud'
 import useVarList from '../_base/hooks/use-var-list'
-import useOneStepRun from '../_base/hooks/use-one-step-run'
 import type { AgentNodeType } from './types'
 import {
   useIsChatMode,
@@ -131,35 +130,6 @@ const useConfig = (id: string, payload: AgentNodeType) => {
   })
 
   // single run
-  const {
-    isShowSingleRun,
-    showSingleRun,
-    hideSingleRun,
-    toVarInputs,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runInputData,
-    setRunInputData,
-    runResult,
-    getInputVars,
-  } = useOneStepRun<AgentNodeType>({
-    id,
-    data: inputs,
-    defaultRunInputData: {},
-  })
-  const allVarStrArr = (() => {
-    const arr = currentStrategy?.parameters.filter(item => item.type === 'string').map((item) => {
-      return formData[item.name]
-    }) || []
-
-    return arr
-  })()
-  const varInputs = (() => {
-    const vars = getInputVars(allVarStrArr)
-
-    return vars
-  })()
 
   const outputSchema = useMemo(() => {
     const res: any[] = []
@@ -199,18 +169,6 @@ const useConfig = (id: string, payload: AgentNodeType) => {
     pluginDetail: pluginDetail.data?.plugins.at(0),
     availableVars,
     availableNodesWithParent,
-
-    isShowSingleRun,
-    showSingleRun,
-    hideSingleRun,
-    toVarInputs,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runInputData,
-    setRunInputData,
-    runResult,
-    varInputs,
     outputSchema,
     handleMemoryChange,
     isChatMode,

web/app/components/workflow/nodes/agent/use-single-run-form-params.ts

@@ -0,0 +1,90 @@
+import type { MutableRefObject } from 'react'
+import type { InputVar, Variable } from '@/app/components/workflow/types'
+import { useMemo } from 'react'
+import useNodeCrud from '../_base/hooks/use-node-crud'
+import type { AgentNodeType } from './types'
+import { useTranslation } from 'react-i18next'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
+import { useStrategyInfo } from './use-config'
+import type { NodeTracing } from '@/types/workflow'
+import formatTracing from '@/app/components/workflow/run/utils/format-log'
+
+type Params = {
+  id: string,
+  payload: AgentNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: MutableRefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+  runResult: NodeTracing
+}
+const useSingleRunFormParams = ({
+  id,
+  payload,
+  runInputData,
+  getInputVars,
+  setRunInputData,
+  runResult,
+}: Params) => {
+  const { t } = useTranslation()
+  const { inputs } = useNodeCrud<AgentNodeType>(id, payload)
+
+  const formData = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(inputs.agent_parameters || {}).map(([key, value]) => {
+        return [key, value.value]
+      }),
+    )
+  }, [inputs.agent_parameters])
+
+  const {
+    strategy: currentStrategy,
+  } = useStrategyInfo(
+    inputs.agent_strategy_provider_name,
+    inputs.agent_strategy_name,
+  )
+
+  const allVarStrArr = (() => {
+    const arr = currentStrategy?.parameters.filter(item => item.type === 'string').map((item) => {
+      return formData[item.name]
+    }) || []
+    return arr
+  })()
+
+  const varInputs = getInputVars?.(allVarStrArr)
+
+  const forms = useMemo(() => {
+    const forms: FormProps[] = []
+
+    if (varInputs!.length > 0) {
+      forms.push(
+        {
+          label: t('workflow.nodes.llm.singleRun.variable')!,
+          inputs: varInputs!,
+          values: runInputData,
+          onChange: setRunInputData,
+        },
+      )
+    }
+    return forms
+  }, [runInputData, setRunInputData, t, varInputs])
+
+  const nodeInfo = useMemo(() => {
+    if (!runResult)
+      return
+    return formatTracing([runResult], t)[0]
+  }, [runResult, t])
+
+    const getDependentVars = () => {
+    return varInputs.map(item => item.variable.slice(1, -1).split('.'))
+  }
+
+  return {
+    forms,
+    nodeInfo,
+    getDependentVars,
+  }
+}
+
+export default useSingleRunFormParams