feat: last run frontend (#21369)

The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699). Co-authored-by: jZonG <jzongcode@gmail.com>
2025-06-24 09:10:30 +08:00
parent 10b738a296
commit 1a1bfd4048
122 changed files with 5888 additions and 2061 deletions
--- a/web/app/components/workflow/nodes/loop/panel.tsx
+++ b/web/app/components/workflow/nodes/loop/panel.tsx
@@ -1,9 +1,8 @@
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiAddLine } from '@remixicon/react'
 import Split from '../_base/components/split'
-import ResultPanel from '../../run/result-panel'
 import InputNumberWithSlider from '../_base/components/input-number-with-slider'
 import type { LoopNodeType } from './types'
 import useConfig from './use-config'
@@ -11,10 +10,7 @@ import ConditionWrap from './components/condition-wrap'
 import LoopVariable from './components/loop-variables'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
-import formatTracing from '@/app/components/workflow/run/utils/format-log'

-import { useLogs } from '@/app/components/workflow/run/hooks'
 import { LOOP_NODE_MAX_COUNT } from '@/config'

 const i18nPrefix = 'workflow.nodes.loop'
@@ -30,13 +26,6 @@ const Panel: FC<NodePanelProps<LoopNodeType>> = ({
    inputs,
    childrenNodeVars,
    loopChildrenNodes,
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runResult,
-    loopRunResult,
    handleAddCondition,
    handleUpdateCondition,
    handleRemoveCondition,
@@ -51,23 +40,6 @@ const Panel: FC<NodePanelProps<LoopNodeType>> = ({
    handleUpdateLoopVariable,
  } = useConfig(id, data)

-  const nodeInfo = useMemo(() => {
-    const formattedNodeInfo = formatTracing(loopRunResult, t)[0]
-
-    if (runResult && formattedNodeInfo) {
-      return {
-        ...formattedNodeInfo,
-        execution_metadata: {
-          ...runResult.execution_metadata,
-          ...formattedNodeInfo.execution_metadata,
-        },
-      }
-    }
-
-    return formattedNodeInfo
-  }, [runResult, loopRunResult, t])
-  const logsParams = useLogs()
-
  return (
    <div className='mt-2'>
      <div>
@@ -139,20 +111,6 @@ const Panel: FC<NodePanelProps<LoopNodeType>> = ({
          </Select>
        </Field>
      </div> */}
-      {isShowSingleRun && (
-        <BeforeRunForm
-          nodeName={inputs.title}
-          onHide={hideSingleRun}
-          forms={[]}
-          runningStatus={runningStatus}
-          onRun={handleRun}
-          onStop={handleStop}
-          {...logsParams}
-          result={
-            <ResultPanel {...runResult} showSteps={false} nodeInfo={nodeInfo} {...logsParams} />
-          }
-        />
-      )}
    </div>
  )
 }
--- a/web/app/components/workflow/nodes/loop/use-config.ts
+++ b/web/app/components/workflow/nodes/loop/use-config.ts
@@ -3,7 +3,6 @@ import {
  useRef,
 } from 'react'
 import produce from 'immer'
-import { useBoolean } from 'ahooks'
 import { v4 as uuid4 } from 'uuid'
 import {
  useIsChatMode,
@@ -12,10 +11,9 @@ import {
  useWorkflow,
 } from '../../hooks'
 import { ValueType, VarType } from '../../types'
-import type { ErrorHandleMode, ValueSelector, Var } from '../../types'
+import type { ErrorHandleMode, Var } from '../../types'
 import useNodeCrud from '../_base/hooks/use-node-crud'
-import { getNodeInfoById, getNodeUsedVarPassToServerKey, getNodeUsedVars, isSystemVar, toNodeOutputVars } from '../_base/components/variable/utils'
-import useOneStepRun from '../_base/hooks/use-one-step-run'
+import { toNodeOutputVars } from '../_base/components/variable/utils'
 import { getOperators } from './utils'
 import { LogicalOperator } from './types'
 import type { HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition, LoopNodeType } from './types'
@@ -47,140 +45,12 @@ const useConfig = (id: string, payload: LoopNodeType) => {
  const canChooseVarNodes = [...beforeNodes, ...loopChildrenNodes]
  const childrenNodeVars = toNodeOutputVars(loopChildrenNodes, isChatMode, undefined, [], conversationVariables)

-  // single run
-  const loopInputKey = `${id}.input_selector`
-  const {
-    isShowSingleRun,
-    showSingleRun,
-    hideSingleRun,
-    toVarInputs,
-    runningStatus,
-    handleRun: doHandleRun,
-    handleStop,
-    runInputData,
-    setRunInputData,
-    runResult,
-    loopRunResult,
-  } = useOneStepRun<LoopNodeType>({
-    id,
-    data: inputs,
-    loopInputKey,
-    defaultRunInputData: {
-      [loopInputKey]: [''],
-    },
-  })
-
-  const [isShowLoopDetail, {
-    setTrue: doShowLoopDetail,
-    setFalse: doHideLoopDetail,
-  }] = useBoolean(false)
-
-  const hideLoopDetail = useCallback(() => {
-    hideSingleRun()
-    doHideLoopDetail()
-  }, [doHideLoopDetail, hideSingleRun])
-
-  const showLoopDetail = useCallback(() => {
-    doShowLoopDetail()
-  }, [doShowLoopDetail])
-
-  const backToSingleRun = useCallback(() => {
-    hideLoopDetail()
-    showSingleRun()
-  }, [hideLoopDetail, showSingleRun])
-
  const {
    getIsVarFileAttribute,
  } = useIsVarFileAttribute({
    nodeId: id,
  })

-  const { usedOutVars, allVarObject } = (() => {
-    const vars: ValueSelector[] = []
-    const varObjs: Record<string, boolean> = {}
-    const allVarObject: Record<string, {
-      inSingleRunPassedKey: string
-    }> = {}
-    loopChildrenNodes.forEach((node) => {
-      const nodeVars = getNodeUsedVars(node).filter(item => item && item.length > 0)
-      nodeVars.forEach((varSelector) => {
-        if (varSelector[0] === id) { // skip Loop node itself variable: item, index
-          return
-        }
-        const isInLoop = isNodeInLoop(varSelector[0])
-        if (isInLoop) // not pass loop inner variable
-          return
-
-        const varSectorStr = varSelector.join('.')
-        if (!varObjs[varSectorStr]) {
-          varObjs[varSectorStr] = true
-          vars.push(varSelector)
-        }
-        let passToServerKeys = getNodeUsedVarPassToServerKey(node, varSelector)
-        if (typeof passToServerKeys === 'string')
-          passToServerKeys = [passToServerKeys]
-
-        passToServerKeys.forEach((key: string, index: number) => {
-          allVarObject[[varSectorStr, node.id, index].join(DELIMITER)] = {
-            inSingleRunPassedKey: key,
-          }
-        })
-      })
-    })
-    const res = toVarInputs(vars.map((item) => {
-      const varInfo = getNodeInfoById(canChooseVarNodes, item[0])
-      return {
-        label: {
-          nodeType: varInfo?.data.type,
-          nodeName: varInfo?.data.title || canChooseVarNodes[0]?.data.title, // default start node title
-          variable: isSystemVar(item) ? item.join('.') : item[item.length - 1],
-        },
-        variable: `${item.join('.')}`,
-        value_selector: item,
-      }
-    }))
-    return {
-      usedOutVars: res,
-      allVarObject,
-    }
-  })()
-
-  const handleRun = useCallback((data: Record<string, any>) => {
-    const formattedData: Record<string, any> = {}
-    Object.keys(allVarObject).forEach((key) => {
-      const [varSectorStr, nodeId] = key.split(DELIMITER)
-      formattedData[`${nodeId}.${allVarObject[key].inSingleRunPassedKey}`] = data[varSectorStr]
-    })
-    formattedData[loopInputKey] = data[loopInputKey]
-    doHandleRun(formattedData)
-  }, [allVarObject, doHandleRun, loopInputKey])
-
-  const inputVarValues = (() => {
-    const vars: Record<string, any> = {}
-    Object.keys(runInputData)
-      .filter(key => ![loopInputKey].includes(key))
-      .forEach((key) => {
-        vars[key] = runInputData[key]
-      })
-    return vars
-  })()
-
-  const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
-    const newVars = {
-      ...newPayload,
-      [loopInputKey]: runInputData[loopInputKey],
-    }
-    setRunInputData(newVars)
-  }, [loopInputKey, runInputData, setRunInputData])
-
-  const loop = runInputData[loopInputKey]
-  const setLoop = useCallback((newLoop: string[]) => {
-    setRunInputData({
-      ...runInputData,
-      [loopInputKey]: newLoop,
-    })
-  }, [loopInputKey, runInputData, setRunInputData])
-
  const changeErrorResponseMode = useCallback((item: { value: unknown }) => {
    const newInputs = produce(inputs, (draft) => {
      draft.error_handle_mode = item.value as ErrorHandleMode
@@ -342,24 +212,6 @@ const useConfig = (id: string, payload: LoopNodeType) => {
    filterInputVar,
    childrenNodeVars,
    loopChildrenNodes,
-    isShowSingleRun,
-    showSingleRun,
-    hideSingleRun,
-    isShowLoopDetail,
-    showLoopDetail,
-    hideLoopDetail,
-    backToSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runResult,
-    inputVarValues,
-    setInputVarValues,
-    usedOutVars,
-    loop,
-    setLoop,
-    loopInputKey,
-    loopRunResult,
    handleAddCondition,
    handleRemoveCondition,
    handleUpdateCondition,
--- a/web/app/components/workflow/nodes/loop/use-single-run-form-params.ts
+++ b/web/app/components/workflow/nodes/loop/use-single-run-form-params.ts
@@ -0,0 +1,221 @@
+import type { NodeTracing } from '@/types/workflow'
+import { useCallback, useMemo } from 'react'
+import formatTracing from '@/app/components/workflow/run/utils/format-log'
+import { useTranslation } from 'react-i18next'
+import { useIsNodeInLoop, useWorkflow } from '../../hooks'
+import { getNodeInfoById, getNodeUsedVarPassToServerKey, getNodeUsedVars, isSystemVar } from '../_base/components/variable/utils'
+import type { InputVar, ValueSelector, Variable } from '../../types'
+import type { CaseItem, Condition, LoopNodeType } from './types'
+import { ValueType } from '@/app/components/workflow/types'
+import { VALUE_SELECTOR_DELIMITER as DELIMITER } from '@/config'
+
+type Params = {
+  id: string
+  payload: LoopNodeType
+  runInputData: Record<string, any>
+  runResult: NodeTracing
+  loopRunResult: NodeTracing[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+  varSelectorsToVarInputs: (variables: ValueSelector[]) => InputVar[]
+}
+
+const useSingleRunFormParams = ({
+  id,
+  payload,
+  runInputData,
+  runResult,
+  loopRunResult,
+  setRunInputData,
+  toVarInputs,
+  varSelectorsToVarInputs,
+}: Params) => {
+  const { t } = useTranslation()
+
+  const { isNodeInLoop } = useIsNodeInLoop(id)
+
+  const { getLoopNodeChildren, getBeforeNodesInSameBranch } = useWorkflow()
+  const loopChildrenNodes = getLoopNodeChildren(id)
+  const beforeNodes = getBeforeNodesInSameBranch(id)
+  const canChooseVarNodes = [...beforeNodes, ...loopChildrenNodes]
+
+  const { usedOutVars, allVarObject } = (() => {
+    const vars: ValueSelector[] = []
+    const varObjs: Record<string, boolean> = {}
+    const allVarObject: Record<string, {
+      inSingleRunPassedKey: string
+    }> = {}
+    loopChildrenNodes.forEach((node) => {
+      const nodeVars = getNodeUsedVars(node).filter(item => item && item.length > 0)
+      nodeVars.forEach((varSelector) => {
+        if (varSelector[0] === id) { // skip loop node itself variable: item, index
+          return
+        }
+        const isInLoop = isNodeInLoop(varSelector[0])
+        if (isInLoop) // not pass loop inner variable
+          return
+
+        const varSectorStr = varSelector.join('.')
+        if (!varObjs[varSectorStr]) {
+          varObjs[varSectorStr] = true
+          vars.push(varSelector)
+        }
+        let passToServerKeys = getNodeUsedVarPassToServerKey(node, varSelector)
+        if (typeof passToServerKeys === 'string')
+          passToServerKeys = [passToServerKeys]
+
+        passToServerKeys.forEach((key: string, index: number) => {
+          allVarObject[[varSectorStr, node.id, index].join(DELIMITER)] = {
+            inSingleRunPassedKey: key,
+          }
+        })
+      })
+    })
+
+    const res = toVarInputs(vars.map((item) => {
+      const varInfo = getNodeInfoById(canChooseVarNodes, item[0])
+      return {
+        label: {
+          nodeType: varInfo?.data.type,
+          nodeName: varInfo?.data.title || canChooseVarNodes[0]?.data.title, // default start node title
+          variable: isSystemVar(item) ? item.join('.') : item[item.length - 1],
+        },
+        variable: `${item.join('.')}`,
+        value_selector: item,
+      }
+    }))
+    return {
+      usedOutVars: res,
+      allVarObject,
+    }
+  })()
+
+  const nodeInfo = useMemo(() => {
+    const formattedNodeInfo = formatTracing(loopRunResult, t)[0]
+
+    if (runResult && formattedNodeInfo) {
+      return {
+        ...formattedNodeInfo,
+        execution_metadata: {
+          ...runResult.execution_metadata,
+          ...formattedNodeInfo.execution_metadata,
+        },
+      }
+    }
+
+    return formattedNodeInfo
+  }, [runResult, loopRunResult, t])
+
+  const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
+      setRunInputData(newPayload)
+  }, [setRunInputData])
+
+  const inputVarValues = (() => {
+    const vars: Record<string, any> = {}
+    Object.keys(runInputData)
+      .forEach((key) => {
+        vars[key] = runInputData[key]
+      })
+    return vars
+  })()
+
+  const getVarSelectorsFromCase = (caseItem: CaseItem): ValueSelector[] => {
+    const vars: ValueSelector[] = []
+    if (caseItem.conditions && caseItem.conditions.length) {
+      caseItem.conditions.forEach((condition) => {
+        // eslint-disable-next-line ts/no-use-before-define
+        const conditionVars = getVarSelectorsFromCondition(condition)
+        vars.push(...conditionVars)
+      })
+    }
+    return vars
+  }
+
+  const getVarSelectorsFromCondition = (condition: Condition) => {
+    const vars: ValueSelector[] = []
+    if (condition.variable_selector)
+      vars.push(condition.variable_selector)
+
+    if (condition.sub_variable_condition && condition.sub_variable_condition.conditions?.length)
+      vars.push(...getVarSelectorsFromCase(condition.sub_variable_condition))
+    return vars
+  }
+
+  const forms = (() => {
+    const allInputs: ValueSelector[] = []
+    payload.break_conditions?.forEach((condition) => {
+      const vars = getVarSelectorsFromCondition(condition)
+      allInputs.push(...vars)
+    })
+
+    payload.loop_variables?.forEach((loopVariable) => {
+      if(loopVariable.value_type === ValueType.variable)
+        allInputs.push(loopVariable.value)
+    })
+    const inputVarsFromValue: InputVar[] = []
+    const varInputs = [...varSelectorsToVarInputs(allInputs), ...inputVarsFromValue]
+
+    const existVarsKey: Record<string, boolean> = {}
+    const uniqueVarInputs: InputVar[] = []
+    varInputs.forEach((input) => {
+      if(!input)
+        return
+      if (!existVarsKey[input.variable]) {
+        existVarsKey[input.variable] = true
+        uniqueVarInputs.push(input)
+      }
+    })
+    return [
+      {
+        inputs: [...usedOutVars, ...uniqueVarInputs],
+        values: inputVarValues,
+        onChange: setInputVarValues,
+      },
+    ]
+  })()
+
+  const getVarFromCaseItem = (caseItem: CaseItem): ValueSelector[] => {
+    const vars: ValueSelector[] = []
+    if (caseItem.conditions && caseItem.conditions.length) {
+      caseItem.conditions.forEach((condition) => {
+        // eslint-disable-next-line ts/no-use-before-define
+        const conditionVars = getVarFromCondition(condition)
+        vars.push(...conditionVars)
+      })
+    }
+    return vars
+  }
+
+  const getVarFromCondition = (condition: Condition): ValueSelector[] => {
+    const vars: ValueSelector[] = []
+    if (condition.variable_selector)
+      vars.push(condition.variable_selector)
+
+    if(condition.sub_variable_condition && condition.sub_variable_condition.conditions?.length)
+      vars.push(...getVarFromCaseItem(condition.sub_variable_condition))
+    return vars
+  }
+
+  const getDependentVars = () => {
+    const vars: ValueSelector[] = usedOutVars.map(item => item.variable.split('.'))
+    payload.break_conditions?.forEach((condition) => {
+      const conditionVars = getVarFromCondition(condition)
+      vars.push(...conditionVars)
+    })
+    payload.loop_variables?.forEach((loopVariable) => {
+      if(loopVariable.value_type === ValueType.variable)
+        vars.push(loopVariable.value)
+    })
+    const hasFilterLoopVars = vars.filter(item => item[0] !== id)
+    return hasFilterLoopVars
+  }
+
+  return {
+    forms,
+    nodeInfo,
+    allVarObject,
+    getDependentVars,
+  }
+}
+
+export default useSingleRunFormParams