Feat: Downstream operators can get the variables defined by the user input operator #3221 (#9036)

### What problem does this PR solve?

Feat: Downstream operators can get the variables defined by the user
input operator #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/node/index.tsx

@@ -2,6 +2,7 @@ import { IRagNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
+import { needsSingleStepDebugging } from '../../utils';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
@@ -15,7 +16,12 @@ function InnerRagNode({
   selected,
 }: NodeProps<IRagNode>) {
   return (
-    <ToolBar selected={selected} id={id} label={data.label}>
+    <ToolBar
+      selected={selected}
+      id={id}
+      label={data.label}
+      showRun={needsSingleStepDebugging(data.label)}
+    >
       <NodeWrapper selected={selected}>
         <CommonHandle
           id={NodeHandleId.End}

web/src/pages/agent/constant.tsx

@@ -582,6 +582,7 @@ export const initialUserFillUpValues = {
   enable_tips: true,
   tips: '',
   inputs: [],
+  outputs: {},
 };
 
 export enum StringTransformMethod {
@@ -835,6 +836,7 @@ export const NoDebugOperatorsList = [
   Operator.RewriteQuestion,
   Operator.Switch,
   Operator.Iteration,
+  Operator.UserFillUp,
 ];
 
 export enum NodeHandleId {

web/src/pages/agent/form/user-fill-up-form/index.tsx

@@ -17,10 +17,11 @@ import { memo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { INextOperatorForm } from '../../interface';
+import { BeginQuery, INextOperatorForm } from '../../interface';
 import { ParameterDialog } from '../begin-form/parameter-dialog';
 import { QueryTable } from '../begin-form/query-table';
 import { useEditQueryRecord } from '../begin-form/use-edit-query';
+import { Output } from '../components/output';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
@@ -53,7 +54,15 @@ function UserFillUpForm({ node }: INextOperatorForm) {
 
   useWatchFormChange(node?.id, form);
 
-  const inputs = useWatch({ control: form.control, name: 'inputs' });
+  const inputs: BeginQuery[] = useWatch({
+    control: form.control,
+    name: 'inputs',
+  });
+
+  const outputList = inputs?.map((item) => ({
+    title: item.name,
+    type: item.type,
+  }));
 
   const {
     ok,
@@ -149,6 +158,7 @@ function UserFillUpForm({ node }: INextOperatorForm) {
           ></ParameterDialog>
         )}
       </Form>
+      <Output list={outputList}></Output>
     </section>
   );
 }

web/src/pages/agent/form/user-fill-up-form/use-watch-change.ts

@@ -21,9 +21,12 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn) {
     if (id) {
       values = form?.getValues() || {};
 
+      const inputs = transferInputsArrayToObject(values.inputs);
+
       const nextValues = {
         ...values,
-        inputs: transferInputsArrayToObject(values.inputs),
+        inputs,
+        outputs: inputs,
       };
 
       updateNodeForm(id, nextValues);