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/start/use-config.ts

@@ -10,6 +10,7 @@ import {
   useNodesReadOnly,
   useWorkflow,
 } from '@/app/components/workflow/hooks'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const useConfig = (id: string, payload: StartNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
@@ -18,6 +19,13 @@ const useConfig = (id: string, payload: StartNodeType) => {
 
   const { inputs, setInputs } = useNodeCrud<StartNodeType>(id, payload)
 
+  const {
+    deleteNodeInspectorVars,
+    renameInspectVarName,
+    nodesWithInspectVars,
+    deleteInspectVar,
+  } = useInspectVarsCrud()
+
   const [isShowAddVarModal, {
     setTrue: showAddVarModal,
     setFalse: hideAddVarModal,
@@ -31,6 +39,12 @@ const useConfig = (id: string, payload: StartNodeType) => {
   const [removedIndex, setRemoveIndex] = useState(0)
   const handleVarListChange = useCallback((newList: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => {
     if (moreInfo?.payload?.type === ChangeType.remove) {
+      const varId = nodesWithInspectVars.find(node => node.nodeId === id)?.vars.find((varItem) => {
+        return varItem.name === moreInfo?.payload?.payload?.beforeKey
+      })?.id
+      if(varId)
+        deleteInspectVar(id, varId)
+
       if (isVarUsedInNodes([id, moreInfo?.payload?.payload?.beforeKey || ''])) {
         showRemoveVarConfirm()
         setRemovedVar([id, moreInfo?.payload?.payload?.beforeKey || ''])
@@ -46,8 +60,12 @@ const useConfig = (id: string, payload: StartNodeType) => {
     if (moreInfo?.payload?.type === ChangeType.changeVarName) {
       const changedVar = newList[moreInfo.index]
       handleOutVarRenameChange(id, [id, inputs.variables[moreInfo.index].variable], [id, changedVar.variable])
+      renameInspectVarName(id, inputs.variables[moreInfo.index].variable, changedVar.variable)
     }
-  }, [handleOutVarRenameChange, id, inputs, isVarUsedInNodes, setInputs, showRemoveVarConfirm])
+    else if(moreInfo?.payload?.type !== ChangeType.remove) { // edit var type
+      deleteNodeInspectorVars(id)
+    }
+  }, [deleteInspectVar, deleteNodeInspectorVars, handleOutVarRenameChange, id, inputs, isVarUsedInNodes, nodesWithInspectVars, renameInspectVarName, setInputs, showRemoveVarConfirm])
 
   const removeVarInNode = useCallback(() => {
     const newInputs = produce(inputs, (draft) => {

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

@@ -0,0 +1,87 @@
+import type { MutableRefObject } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
+import type { ValueSelector } from '@/app/components/workflow/types'
+import { type InputVar, InputVarType, type Variable } from '@/app/components/workflow/types'
+import type { StartNodeType } from './types'
+import { useIsChatMode } from '../../hooks'
+
+type Params = {
+  id: string,
+  payload: StartNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: MutableRefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+}
+const useSingleRunFormParams = ({
+  id,
+  payload,
+  runInputData,
+  setRunInputData,
+}: Params) => {
+  const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
+
+  const forms = (() => {
+    const forms: FormProps[] = []
+    const inputs: InputVar[] = payload.variables.map((item) => {
+      return {
+        ...item,
+        getVarValueFromDependent: true,
+      }
+    })
+
+    if (isChatMode) {
+      inputs.push({
+        label: 'sys.query',
+        variable: '#sys.query#',
+        type: InputVarType.textInput,
+        required: true,
+      })
+    }
+
+    inputs.push({
+      label: 'sys.files',
+      variable: '#sys.files#',
+      type: InputVarType.multiFiles,
+      required: false,
+    })
+
+    forms.push(
+      {
+        label: t('workflow.nodes.llm.singleRun.variable')!,
+        inputs,
+        values: runInputData,
+        onChange: setRunInputData,
+      },
+    )
+
+    return forms
+  })()
+
+  const getDependentVars = () => {
+    const inputVars = payload.variables.map((item) => {
+      return [id, item.variable]
+    })
+    const vars: ValueSelector[] = [...inputVars, ['sys', 'files']]
+
+    if (isChatMode)
+      vars.push(['sys', 'query'])
+
+    return vars
+  }
+
+  const getDependentVar = (variable: string) => {
+    return [id, variable]
+  }
+
+  return {
+    forms,
+    getDependentVars,
+    getDependentVar,
+  }
+}
+
+export default useSingleRunFormParams