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/components/message-input/next.tsx

@@ -103,7 +103,7 @@ export function NextMessageInput({
       </FileUploadDropzone>
       <form
         onSubmit={onSubmit}
-        className="relative flex w-full max-w-md flex-col gap-2.5 rounded-md border border-input px-3 py-2 outline-none focus-within:ring-1 focus-within:ring-ring/50"
+        className="relative flex w-full flex-col gap-2.5 rounded-md border border-input px-3 py-2 outline-none focus-within:ring-1 focus-within:ring-ring/50"
       >
         <FileUploadList
           orientation="horizontal"

web/src/hooks/use-agent-request.ts

@@ -382,7 +382,7 @@ export const useUploadCanvasFileWithProgress = (
         files.forEach((file) => {
           onError(file, error as Error);
         });
-        message.error('error', error.message);
+        message.error('error', error?.message);
       }
     },
   });
@@ -468,10 +468,15 @@ export const useFetchInputForm = (componentId?: string) => {
     initialData: {},
     enabled: !!id && !!componentId,
     queryFn: async () => {
-      const { data } = await agentService.inputForm({
-        id,
-        component_id: componentId,
-      });
+      const { data } = await agentService.inputForm(
+        {
+          params: {
+            id,
+            component_id: componentId,
+          },
+        },
+        true,
+      );
 
       return data.data;
     },

web/src/locales/pt-br.ts

@@ -587,7 +587,7 @@ export default {
       addFishAudioRefID: 'ID de referência do FishAudio',
       addFishAudioRefIDMessage:
         'Por favor, insira o ID de referência (deixe em branco para usar o modelo padrão).',
-       `Por favor, adicione tanto o modelo de incorporação quanto o LLM em <b>Configurações > Provedores de Modelo</b> primeiro. Depois, defina-os nas 'Configurações do modelo do sistema'.`,
+      modelProvidersWarn: `Por favor, adicione tanto o modelo de incorporação quanto o LLM em <b>Configurações > Provedores de Modelo</b> primeiro. Depois, defina-os nas 'Configurações do modelo do sistema'.`,
       apiVersion: 'Versão da API',
       apiVersionMessage: 'Por favor, insira a versão da API',
       add: 'Adicionar',

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);