feat: add form input node (#2773)

* add node

* dispatch

* extract InputTypeConfig component

* question tip

* fix build

* fix

* fix

packages/global/core/ai/type.d.ts

@@ -9,8 +9,7 @@ import type {
   ChatCompletionUserMessageParam as SdkChatCompletionUserMessageParam
 } from 'openai/resources';
 import { ChatMessageTypeEnum } from './constants';
-import { InteractiveNodeResponseItemType } from '../workflow/template/system/userSelect/type';
-
+import { InteractiveNodeResponseItemType } from '../workflow/template/system/interactive/type';
 export * from 'openai/resources';
 
 // Extension of ChatCompletionMessageParam, Add file url type

packages/global/core/chat/type.d.ts

@@ -15,7 +15,7 @@ import type { AppSchema as AppType } from '@fastgpt/global/core/app/type.d';
 import { DatasetSearchModeEnum } from '../dataset/constants';
 import { DispatchNodeResponseType } from '../workflow/runtime/type.d';
 import { ChatBoxInputType } from '../../../../projects/app/src/components/core/chat/ChatContainer/ChatBox/type';
-import { InteractiveNodeResponseItemType } from '../workflow/template/system/userSelect/type';
+import { InteractiveNodeResponseItemType } from '../workflow/template/system/interactive/type';
 
 export type ChatSchema = {
   _id: string;

packages/global/core/workflow/constants.ts

@@ -148,7 +148,10 @@ export enum NodeInputKeyEnum {
   // loop start
   loopStartInput = 'loopStartInput',
   // loop end
-  loopEndInput = 'loopEndInput'
+  loopEndInput = 'loopEndInput',
+
+  // form input
+  userInputForms = 'userInputForms'
 }
 
 export enum NodeOutputKeyEnum {
@@ -197,7 +200,10 @@ export enum NodeOutputKeyEnum {
   loopArray = 'loopArray',
 
   // loop start
-  loopStartInput = 'loopStartInput'
+  loopStartInput = 'loopStartInput',
+
+  // form input
+  formInputResult = 'formInputResult'
 }
 
 export enum VariableInputEnum {

packages/global/core/workflow/node/constant.ts

@@ -128,7 +128,8 @@ export enum FlowNodeTypeEnum {
   userSelect = 'userSelect',
   loop = 'loop',
   loopStart = 'loopStart',
-  loopEnd = 'loopEnd'
+  loopEnd = 'loopEnd',
+  formInput = 'formInput'
 }
 
 // node IO value type

packages/global/core/workflow/runtime/type.d.ts

@@ -182,6 +182,9 @@ export type DispatchNodeResponseType = {
   loopInputValue?: any;
   // loop end
   loopOutputValue?: any;
+
+  // form input
+  formInputResult?: string;
 };
 
 export type DispatchNodeResultType<T = {}> = {

packages/global/core/workflow/runtime/utils.ts

@@ -54,6 +54,11 @@ export const getLastInteractiveValue = (histories: ChatItemType[]) => {
     ) {
       return lastValue.interactive;
     }
+
+    // Check is user input
+    if (lastValue.interactive.type === 'userInput' && !lastValue.interactive.params.submitted) {
+      return lastValue.interactive;
+    }
   }
 
   return null;

packages/global/core/workflow/template/constants.ts

@@ -28,10 +28,11 @@ import { CodeNode } from './system/sandbox';
 import { TextEditorNode } from './system/textEditor';
 import { CustomFeedbackNode } from './system/customFeedback';
 import { ReadFilesNode } from './system/readFiles';
-import { UserSelectNode } from './system/userSelect/index';
+import { UserSelectNode } from './system/interactive/userSelect';
 import { LoopNode } from './system/loop/loop';
 import { LoopStartNode } from './system/loop/loopStart';
 import { LoopEndNode } from './system/loop/loopEnd';
+import { FormInputNode } from './system/interactive/formInput';
 
 const systemNodes: FlowNodeTemplateType[] = [
   AiChatModule,
@@ -58,7 +59,8 @@ export const appSystemModuleTemplates: FlowNodeTemplateType[] = [
   WorkflowStart,
   ...systemNodes,
   CustomFeedbackNode,
-  UserSelectNode
+  UserSelectNode,
+  FormInputNode
 ];
 /* plugin flow module templates */
 export const pluginSystemModuleTemplates: FlowNodeTemplateType[] = [

packages/global/core/workflow/template/system/interactive/formInput.ts

+import { i18nT } from '../../../../../../web/i18n/utils';
+import {
+  FlowNodeTemplateTypeEnum,
+  NodeInputKeyEnum,
+  NodeOutputKeyEnum,
+  WorkflowIOValueTypeEnum
+} from '../../../constants';
+import {
+  FlowNodeInputTypeEnum,
+  FlowNodeOutputTypeEnum,
+  FlowNodeTypeEnum
+} from '../../../node/constant';
+import { FlowNodeTemplateType } from '../../../type/node';
+import { getHandleConfig } from '../../utils';
+
+export const FormInputNode: FlowNodeTemplateType = {
+  id: FlowNodeTypeEnum.formInput,
+  templateType: FlowNodeTemplateTypeEnum.interactive,
+  flowNodeType: FlowNodeTypeEnum.formInput,
+  sourceHandle: getHandleConfig(true, true, true, true),
+  targetHandle: getHandleConfig(true, true, true, true),
+  avatar: 'core/workflow/template/formInput',
+  name: i18nT('app:workflow.form_input'),
+  intro: i18nT(`app:workflow.form_input_tip`),
+  showStatus: true,
+  version: '4811',
+  inputs: [
+    {
+      key: NodeInputKeyEnum.description,
+      renderTypeList: [FlowNodeInputTypeEnum.textarea],
+      valueType: WorkflowIOValueTypeEnum.string,
+      label: i18nT('app:workflow.select_description'),
+      description: i18nT('app:workflow.input_description_tip'),
+      placeholder: i18nT('app:workflow.form_input_description_placeholder')
+    },
+    {
+      key: NodeInputKeyEnum.userInputForms,
+      renderTypeList: [FlowNodeInputTypeEnum.custom],
+      valueType: WorkflowIOValueTypeEnum.any,
+      label: '',
+      value: []
+    }
+  ],
+  outputs: [
+    {
+      id: NodeOutputKeyEnum.formInputResult,
+      key: NodeOutputKeyEnum.formInputResult,
+      required: true,
+      label: i18nT('app:workflow.form_input_result'),
+      description: i18nT('app:workflow.form_input_result_tip'),
+      valueType: WorkflowIOValueTypeEnum.object,
+      type: FlowNodeOutputTypeEnum.static
+    }
+  ]
+};

packages/global/core/workflow/template/system/userSelect/type.d.ts → packages/global/core/workflow/template/system/interactive/type.d.ts

 import { NodeOutputItemType } from '../../../../chat/type';
 import { FlowNodeOutputItemType } from '../../../type/io';
 import { RuntimeEdgeItemType } from '../../../runtime/type';
+import { FlowNodeInputTypeEnum } from 'core/workflow/node/constant';
+import { WorkflowIOValueTypeEnum } from 'core/workflow/constants';
 
 export type UserSelectOptionItemType = {
   key: string;
   value: string;
 };
 
+export type UserInputFormItemType = {
+  type: FlowNodeInputTypeEnum;
+  key: string;
+  label: string;
+  value: any;
+  valueType: WorkflowIOValueTypeEnum;
+  description?: string;
+  defaultValue?: any;
+  required: boolean;
+
+  // input & textarea
+  maxLength?: number;
+  // numberInput
+  max?: number;
+  min?: number;
+  // select
+  list?: { label: string; value: string }[];
+};
+
 type InteractiveBasicType = {
   entryNodeIds: string[];
   memoryEdges: RuntimeEdgeItemType[];
   nodeOutputs: NodeOutputItemType[];
 };
+
 type UserSelectInteractive = {
   type: 'userSelect';
   params: {
@@ -21,4 +43,14 @@ type UserSelectInteractive = {
   };
 };
 
-export type InteractiveNodeResponseItemType = InteractiveBasicType & UserSelectInteractive;
+type UserInputInteractive = {
+  type: 'userInput';
+  params: {
+    description: string;
+    inputForm: UserInputFormItemType[];
+    submitted?: boolean;
+  };
+};
+
+export type InteractiveNodeResponseItemType = InteractiveBasicType &
+  (UserSelectInteractive | UserInputInteractive);

packages/service/core/chat/saveChat.ts

@@ -121,7 +121,7 @@ export const updateInteractiveChat = async ({
   appId,
   teamId,
   tmbId,
-  userSelectedVal,
+  userInteractiveVal,
   aiResponse,
   newVariables,
   newTitle
@@ -130,7 +130,7 @@ export const updateInteractiveChat = async ({
   appId: string;
   teamId: string;
   tmbId: string;
-  userSelectedVal: string;
+  userInteractiveVal: string;
   aiResponse: AIChatItemType & { dataId?: string };
   newVariables?: Record<string, any>;
   newTitle: string;
@@ -153,13 +153,38 @@ export const updateInteractiveChat = async ({
     return;
   }
 
-  interactiveValue.interactive = {
-    ...interactiveValue.interactive,
-    params: {
-      ...interactiveValue.interactive.params,
-      userSelectedVal
+  const parsedUserInteractiveVal = (() => {
+    try {
+      return JSON.parse(userInteractiveVal);
+    } catch (err) {
+      return userInteractiveVal;
     }
-  };
+  })();
+  interactiveValue.interactive =
+    interactiveValue.interactive.type === 'userSelect'
+      ? {
+          ...interactiveValue.interactive,
+          params: {
+            ...interactiveValue.interactive.params,
+            userSelectedVal: userInteractiveVal
+          }
+        }
+      : {
+          ...interactiveValue.interactive,
+          params: {
+            ...interactiveValue.interactive.params,
+            inputForm: interactiveValue.interactive.params.inputForm.map((item) => {
+              const itemValue = parsedUserInteractiveVal[item.label];
+              return itemValue !== undefined
+                ? {
+                    ...item,
+                    value: itemValue
+                  }
+                : item;
+            }),
+            submitted: true
+          }
+        };
 
   if (aiResponse.customFeedbacks) {
     chatItem.customFeedbacks = chatItem.customFeedbacks

packages/service/core/workflow/dispatch/index.ts

@@ -64,11 +64,12 @@ import { dispatchUserSelect } from './interactive/userSelect';
 import {
   InteractiveNodeResponseItemType,
   UserSelectInteractive
-} from '@fastgpt/global/core/workflow/template/system/userSelect/type';
+} from '@fastgpt/global/core/workflow/template/system/interactive/type';
 import { dispatchRunAppNode } from './plugin/runApp';
 import { dispatchLoop } from './loop/runLoop';
 import { dispatchLoopEnd } from './loop/runLoopEnd';
 import { dispatchLoopStart } from './loop/runLoopStart';
+import { dispatchFormInput } from './interactive/formInput';
 
 const callbackMap: Record<FlowNodeTypeEnum, Function> = {
   [FlowNodeTypeEnum.workflowStart]: dispatchWorkflowStart,
@@ -97,6 +98,7 @@ const callbackMap: Record<FlowNodeTypeEnum, Function> = {
   [FlowNodeTypeEnum.loop]: dispatchLoop,
   [FlowNodeTypeEnum.loopStart]: dispatchLoopStart,
   [FlowNodeTypeEnum.loopEnd]: dispatchLoopEnd,
+  [FlowNodeTypeEnum.formInput]: dispatchFormInput,
 
   // none
   [FlowNodeTypeEnum.systemConfig]: dispatchSystemConfig,
@@ -584,7 +586,10 @@ export async function dispatchWorkFlow(data: Props): Promise<DispatchFlowRespons
   // reset entry
   runtimeNodes.forEach((item) => {
     // Interactive node is not the entry node, return interactive result
-    if (item.flowNodeType !== FlowNodeTypeEnum.userSelect) {
+    if (
+      item.flowNodeType !== FlowNodeTypeEnum.userSelect &&
+      item.flowNodeType !== FlowNodeTypeEnum.formInput
+    ) {
       item.isEntry = false;
     }
   });

packages/service/core/workflow/dispatch/interactive/formInput.ts

+import { chatValue2RuntimePrompt } from '@fastgpt/global/core/chat/adapt';
+import { NodeInputKeyEnum, NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
+import { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runtime/constants';
+import {
+  DispatchNodeResultType,
+  ModuleDispatchProps
+} from '@fastgpt/global/core/workflow/runtime/type';
+import {
+  UserInputFormItemType,
+  UserInputInteractive
+} from '@fastgpt/global/core/workflow/template/system/interactive/type';
+
+type Props = ModuleDispatchProps<{
+  [NodeInputKeyEnum.description]: string;
+  [NodeInputKeyEnum.userInputForms]: UserInputFormItemType[];
+}>;
+type FormInputResponse = DispatchNodeResultType<{
+  [DispatchNodeResponseKeyEnum.interactive]?: UserInputInteractive;
+  [NodeOutputKeyEnum.formInputResult]?: Record<string, any>;
+}>;
+
+export const dispatchFormInput = async (props: Props): Promise<FormInputResponse> => {
+  const {
+    histories,
+    node,
+    params: { description, userInputForms },
+    query
+  } = props;
+  const { isEntry } = node;
+
+  // Interactive node is not the entry node, return interactive result
+  if (!isEntry) {
+    return {
+      [DispatchNodeResponseKeyEnum.interactive]: {
+        type: 'userInput',
+        params: {
+          description,
+          inputForm: userInputForms
+        }
+      }
+    };
+  }
+
+  node.isEntry = false;
+
+  const { text } = chatValue2RuntimePrompt(query);
+  const userInputVal = (() => {
+    try {
+      return JSON.parse(text);
+    } catch (error) {
+      return text;
+    }
+  })();
+
+  return {
+    [DispatchNodeResponseKeyEnum.rewriteHistories]: histories.slice(0, -2), // Removes the current session record as the history of subsequent nodes
+    ...userInputVal,
+    [NodeOutputKeyEnum.formInputResult]: userInputVal,
+    [DispatchNodeResponseKeyEnum.nodeResponse]: {
+      formInputResult: userInputVal
+    }
+  };
+};

packages/service/core/workflow/dispatch/interactive/userSelect.ts

@@ -8,7 +8,7 @@ import { getHandleId } from '@fastgpt/global/core/workflow/utils';
 import type {
   UserSelectInteractive,
   UserSelectOptionItemType
-} from '@fastgpt/global/core/workflow/template/system/userSelect/type';
+} from '@fastgpt/global/core/workflow/template/system/interactive/type';
 import { chatValue2RuntimePrompt } from '@fastgpt/global/core/chat/adapt';
 
 type Props = ModuleDispatchProps<{

packages/web/components/common/Icon/constants.ts

@@ -223,6 +223,7 @@ export const iconPaths = {
   'core/workflow/template/extractJson': () =>
     import('./icons/core/workflow/template/extractJson.svg'),
   'core/workflow/template/fetchUrl': () => import('./icons/core/workflow/template/fetchUrl.svg'),
+  'core/workflow/template/formInput': () => import('./icons/core/workflow/template/formInput.svg'),
   'core/workflow/template/getTime': () => import('./icons/core/workflow/template/getTime.svg'),
   'core/workflow/template/httpRequest': () =>
     import('./icons/core/workflow/template/httpRequest.svg'),

packages/web/components/common/Icon/icons/core/workflow/template/formInput.svg

+<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" fill="url(#paint0_linear_11162_4294)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.36796 9.26856C9.11482 8.45433 10.1818 8 11.44 8H23.8326C24.823 8 25.6206 8.26373 26.2442 8.70079C26.8592 9.13267 27.2548 9.69699 27.5058 10.2279C27.717 10.6799 27.8628 11.1595 27.9389 11.6525C27.9728 11.8685 27.993 12.0861 27.9999 12.3044V27.1497C27.9999 27.4296 27.8606 27.691 27.6262 27.8499C27.5105 27.9281 27.3778 27.9775 27.2392 27.9939C27.1005 28.0103 26.96 27.9933 26.8292 27.9444L19.4263 25.1631L12.0216 27.9438C11.8908 27.9929 11.7501 28.0099 11.6114 27.9935C11.4727 27.977 11.3399 27.9276 11.2241 27.8494C11.1093 27.7721 11.0152 27.6679 10.9501 27.5458C10.8849 27.4237 10.8507 27.2875 10.8504 27.1492V16.6531H8.13475C7.65796 16.6531 7.271 16.2719 7.271 15.802V12.3262C7.271 11.1573 7.63204 10.0719 8.36796 9.26856ZM9.45745 11.8145C9.40413 11.942 9.37669 12.0786 9.37669 12.2166L11.4984 12.2166C11.4984 12.0786 11.4709 11.942 11.4176 11.8145C11.3643 11.687 11.2862 11.5712 11.1877 11.4736C11.0892 11.3761 10.9722 11.2987 10.8435 11.2459C10.7148 11.1931 10.5768 11.1659 10.4375 11.1659C10.2982 11.1659 10.1603 11.1931 10.0316 11.2459C9.90286 11.2987 9.78592 11.3761 9.68741 11.4736C9.5889 11.5712 9.51076 11.687 9.45745 11.8145ZM15.3083 14.2538C14.7359 14.2538 14.2718 14.7178 14.2718 15.2903C14.2718 15.8627 14.7359 16.3268 15.3083 16.3268H24.0624C24.6349 16.3268 25.0989 15.8627 25.0989 15.2903C25.0989 14.7178 24.6349 14.2538 24.0624 14.2538H15.3083ZM14.2718 19.9206C14.2718 19.3482 14.7359 18.8841 15.3083 18.8841H21.1221C21.6945 18.8841 22.1586 19.3482 22.1586 19.9206C22.1586 20.4931 21.6945 20.9571 21.1221 20.9571H15.3083C14.7359 20.9571 14.2718 20.4931 14.2718 19.9206Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_11162_4294" x1="18" y1="0" x2="5.5" y2="33" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CE91FE"/>
+<stop offset="1" stop-color="#BA84FF"/>
+</linearGradient>
+</defs>
+</svg>

packages/web/i18n/en/app.json

@@ -142,6 +142,12 @@
   "week.Wednesday": "Wednesday",
   "workflow.Input guide": "Input Guide",
   "workflow.file_url": "Document Link",
+  "workflow.form_input": "Form input",
+  "workflow.form_input_description_placeholder": "For example: \nAdd your information",
+  "workflow.form_input_result": "Full input result",
+  "workflow.form_input_result_tip": "An object of full result",
+  "workflow.form_input_tip": "  This module can configure multiple inputs to guide users in entering specific content.",
+  "workflow.input_description_tip": "You can add a description to explain to users what they need to input",
   "workflow.read_files": "Document Parsing",
   "workflow.read_files_result": "Document Parsing Result",
   "workflow.read_files_result_desc": "Original document text, consisting of file names and document content, separated by hyphens between multiple files.",

packages/web/i18n/en/common.json

@@ -24,6 +24,7 @@
   "Rename": "Rename",
   "Resume": "Resume",
   "Running": "Running",
+  "Submit": "Submit",
   "UnKnow": "Unknown",
   "Warning": "Warning",
   "add_new": "Add New",
@@ -82,6 +83,7 @@
   "common.Add": "Add",
   "common.Add New": "Add New",
   "common.Add Success": "Added Successfully",
+  "common.Add_new_input": "Add new input",
   "common.All": "All",
   "common.Cancel": "Cancel",
   "common.Choose": "Choose",
@@ -93,6 +95,7 @@
   "common.Confirm Move": "Move Here",
   "common.Confirm Update": "Confirm Update",
   "common.Confirm to leave the page": "Confirm to Leave This Page?",
+  "common.Continue_Adding": "Continue adding",
   "common.Copy": "Copy",
   "common.Copy Successful": "Copied Successfully",
   "common.Copy_failed": "Copy Failed, Please Copy Manually",
@@ -426,6 +429,11 @@
   "core.chat.response.Read complete response tips": "Click to View Detailed Process",
   "core.chat.response.Tool call tokens": "Tool Call Tokens Consumption",
   "core.chat.response.context total length": "Total Context Length",
+  "core.chat.response.form_input_result": "Form input result",
+  "core.chat.response.loop_input": "Loop Input Array",
+  "core.chat.response.loop_input_element": "Loop Input Element",
+  "core.chat.response.loop_output": "Loop Output Array",
+  "core.chat.response.loop_output_element": "Loop Output Element",
   "core.chat.response.module cq": "Question Classification List",
   "core.chat.response.module cq result": "Classification Result",
   "core.chat.response.module extract description": "Extract Background Description",
@@ -448,10 +456,6 @@
   "core.chat.response.text output": "Text Output",
   "core.chat.response.update_var_result": "Variable Update Result (Displays Multiple Variable Update Results in Order)",
   "core.chat.response.user_select_result": "User Selection Result",
-  "core.chat.response.loop_input": "Loop Input Array",
-  "core.chat.response.loop_output": "Loop Output Array",
-  "core.chat.response.loop_input_element": "Loop Input Element",
-  "core.chat.response.loop_output_element": "Loop Output Element",
   "core.chat.retry": "Regenerate",
   "core.chat.tts.Stop Speech": "Stop",
   "core.common.tip.leave page": "Content has been modified, confirm to leave the page?",
@@ -701,6 +705,10 @@
   "core.module.input.label.chat history": "Chat History",
   "core.module.input.label.user question": "User Question",
   "core.module.input.placeholder.Classify background": "For example:\n1. AIGC (Artificial Intelligence Generated Content) refers to the use of artificial intelligence technology to automatically or semi-automatically generate digital content, such as text, images, music, videos, etc.\n2. AIGC technology includes but is not limited to natural language processing, computer vision, machine learning, and deep learning. These technologies can create new content or modify existing content to meet specific creative, educational, entertainment, or informational needs.",
+  "core.module.input_description": "Description",
+  "core.module.input_form": "Input form",
+  "core.module.input_name": "Input name",
+  "core.module.input_type": "Input type",
   "core.module.laf.Select laf function": "Select LAF Function",
   "core.module.output.description.Ai response content": "Will be triggered after the stream reply is completed",
   "core.module.output.description.New context": "Splice the current reply content with the history records and return it as the new context",
@@ -729,6 +737,7 @@
   "core.module.template.system_config_info": "Can configure application system parameters",
   "core.module.template.work_start": "Process starts",
   "core.module.templates.Load plugin error": "Failed to Load Plugin",
+  "core.module.variable add option": "Add Option",
   "core.module.variable.Custom type": "Custom Variable",
   "core.module.variable.add option": "Add Option",
   "core.module.variable.input type": "Text",
@@ -743,7 +752,6 @@
   "core.module.variable.variable option is required": "Options Cannot Be All Empty",
   "core.module.variable.variable option is value is required": "Option Content Cannot Be Empty",
   "core.module.variable.variable options": "Options",
-  "core.module.variable add option": "Add Option",
   "core.plugin.Custom headers": "Custom Request Headers",
   "core.plugin.Free": "This plugin does not consume points",
   "core.plugin.Get Plugin Module Detail Failed": "Failed to Retrieve Plugin Information",
@@ -841,12 +849,12 @@
   "dataset.deleteFolderTips": "Confirm to Delete This Folder and All Its Contained Datasets? Data Cannot Be Recovered After Deletion, Please Confirm!",
   "dataset.test.noResult": "No Search Results",
   "error.Create failed": "Create failed",
+  "error.code_error": "Verification code error",
   "error.fileNotFound": "File not found~",
   "error.inheritPermissionError": "Inherit permission Error",
   "error.missingParams": "Insufficient parameters",
   "error.upload_file_error_filename": "{{name}} Upload Failed",
   "error.username_empty": "Account cannot be empty",
-  "error.code_error": "Verification code error",
   "extraction_results": "Extraction Results",
   "field_name": "Field Name",
   "free": "Free",
@@ -1187,4 +1195,4 @@
   "verification": "Verification",
   "xx_search_result": "{{key}} Search Results",
   "yes": "Yes"
-}
\ No newline at end of file
+}

packages/web/i18n/zh/app.json

@@ -143,6 +143,12 @@
   "week.Wednesday": "星期三",
   "workflow.Input guide": "填写说明",
   "workflow.file_url": "文档链接",
+  "workflow.form_input": "表单输入",
+  "workflow.form_input_description_placeholder": "例如：\n补充您的信息",
+  "workflow.form_input_result": "完整输入结果",
+  "workflow.form_input_result_tip": "一个包含完整结果的对象",
+  "workflow.form_input_tip": "该模块可以配置多种输入，引导用户输入特定内容。",
+  "workflow.input_description_tip": "你可以添加一段说明文字，用以向用户说明需要输入的内容",
   "workflow.read_files": "文档解析",
   "workflow.read_files_result": "文档解析结果",
   "workflow.read_files_result_desc": "文档原文，由文件名和文档内容组成，多个文件之间通过横线隔开。",

packages/web/i18n/zh/common.json

@@ -24,6 +24,7 @@
   "Rename": "重命名",
   "Resume": "恢复",
   "Running": "运行中",
+  "Submit": "提交",
   "UnKnow": "未知",
   "Warning": "提示",
   "add_new": "新增",
@@ -82,6 +83,7 @@
   "common.Add": "添加",
   "common.Add New": "新增",
   "common.Add Success": "添加成功",
+  "common.Add_new_input": "新增输入",
   "common.All": "全部",
   "common.Cancel": "取消",
   "common.Choose": "选择",
@@ -93,6 +95,7 @@
   "common.Confirm Move": "移动到这",
   "common.Confirm Update": "确认更新",
   "common.Confirm to leave the page": "确认离开该页面？",
+  "common.Continue_Adding": "继续添加",
   "common.Copy": "复制",
   "common.Copy Successful": "复制成功",
   "common.Copy_failed": "复制失败，请手动复制",
@@ -426,6 +429,7 @@
   "core.chat.response.Read complete response tips": "点击查看详细流程",
   "core.chat.response.Tool call tokens": "工具调用 tokens 消耗",
   "core.chat.response.context total length": "上下文总长度",
+  "core.chat.response.form_input_result": "表单输入结果",
   "core.chat.response.loop_input": "输入数组",
   "core.chat.response.loop_input_element": "输入数组元素",
   "core.chat.response.loop_output": "输出数组",
@@ -701,6 +705,10 @@
   "core.module.input.label.chat history": "聊天记录",
   "core.module.input.label.user question": "用户问题",
   "core.module.input.placeholder.Classify background": "例如：\n1. AIGC（人工智能生成内容）是指使用人工智能技术自动或半自动地生成数字内容，如文本、图像、音乐、视频等。\n2. AIGC 技术包括但不限于自然语言处理、计算机视觉、机器学习和深度学习。这些技术可以创建新内容或修改现有内容，以满足特定的创意、教育、娱乐或信息需求。",
+  "core.module.input_description": "输入描述",
+  "core.module.input_form": "输入字段",
+  "core.module.input_name": "输入名",
+  "core.module.input_type": "输入类型",
   "core.module.laf.Select laf function": "选择 laf 函数",
   "core.module.output.description.Ai response content": "将在 stream 回复完毕后触发",
   "core.module.output.description.New context": "将本次回复内容拼接上历史记录，作为新的上下文返回",
@@ -730,6 +738,7 @@
   "core.module.template.system_config_info": "可以配置应用的系统参数",
   "core.module.template.work_start": "流程开始",
   "core.module.templates.Load plugin error": "加载插件失败",
+  "core.module.variable add option": "添加选项",
   "core.module.variable.Custom type": "自定义变量",
   "core.module.variable.add option": "添加选项",
   "core.module.variable.input type": "文本",
@@ -744,7 +753,6 @@
   "core.module.variable.variable option is required": "选项不能全空",
   "core.module.variable.variable option is value is required": "选项内容不能为空",
   "core.module.variable.variable options": "选项",
-  "core.module.variable add option": "添加选项",
   "core.plugin.Custom headers": "自定义请求头",
   "core.plugin.Free": "该插件无需积分消耗～",
   "core.plugin.Get Plugin Module Detail Failed": "加载插件异常",
@@ -842,12 +850,12 @@
   "dataset.deleteFolderTips": "确认删除该文件夹及其包含的所有知识库？删除后数据无法恢复，请确认！",
   "dataset.test.noResult": "搜索结果为空",
   "error.Create failed": "创建失败",
+  "error.code_error": "验证码错误",
   "error.fileNotFound": "文件找不到了~",
   "error.inheritPermissionError": "权限继承错误",
   "error.missingParams": "参数缺失",
   "error.upload_file_error_filename": "{{name}} 上传失败",
   "error.username_empty": "账号不能为空",
-  "error.code_error": "验证码错误",
   "extraction_results": "提取结果",
   "field_name": "字段名",
   "free": "免费",

projects/app/src/components/core/chat/ChatContainer/ChatBox/utils.ts

@@ -50,18 +50,26 @@ export const checkIsInteractiveByHistories = (chatHistories: ChatSiteItemType[])
     lastAIHistory.value.length - 1
   ] as AIChatItemValueItemType;
 
-  return (
+  if (
     lastMessageValue &&
     lastMessageValue.type === ChatItemValueTypeEnum.interactive &&
-    !!lastMessageValue?.interactive?.params &&
+    !!lastMessageValue?.interactive?.params
+  ) {
+    const params = lastMessageValue.interactive.params;
     // 如果用户选择了，则不认为是交互模式（可能是上一轮以交互结尾，发起的新的一轮对话）
-    !lastMessageValue?.interactive?.params?.userSelectedVal
-  );
+    if ('userSelectOptions' in params && 'userSelectedVal' in params) {
+      return !params.userSelectedVal;
+    } else if ('inputForm' in params && 'submitted' in params) {
+      return !params.submitted;
+    }
+  }
+
+  return false;
 };
 
 export const setUserSelectResultToHistories = (
   histories: ChatSiteItemType[],
-  selectVal: string
+  interactiveVal: string
 ): ChatSiteItemType[] => {
   if (histories.length === 0) return histories;
 
@@ -77,18 +85,33 @@ export const setUserSelectResultToHistories = (
       )
         return val;
 
-      return {
-        ...val,
-        interactive: {
-          ...val.interactive,
-          params: {
-            ...val.interactive.params,
-            userSelectedVal: val.interactive.params.userSelectOptions.find(
-              (item) => item.value === selectVal
-            )?.value
+      if (val.interactive.type === 'userSelect') {
+        return {
+          ...val,
+          interactive: {
+            ...val.interactive,
+            params: {
+              ...val.interactive.params,
+              userSelectedVal: val.interactive.params.userSelectOptions.find(
+                (item) => item.value === interactiveVal
+              )?.value
+            }
+          }
+        };
+      }
+
+      if (val.interactive.type === 'userInput') {
+        return {
+          ...val,
+          interactive: {
+            ...val.interactive,
+            params: {
+              ...val.interactive.params,
+              submitted: true
+            }
           }
-        }
-      };
+        };
+      }
     });
 
     return {

projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/renderPluginInput.tsx

@@ -6,7 +6,6 @@ import {
   NumberInput,
   NumberInputField,
   NumberInputStepper,
-  Select,
   Switch,
   Textarea
 } from '@chakra-ui/react';

projects/app/src/components/core/chat/ChatContainer/type.d.ts

 import { StreamResponseType } from '@/web/common/api/fetch';
 import { ChatCompletionMessageParam } from '@fastgpt/global/core/ai/type';
 import { ChatSiteItemType, ToolModuleResponseItemType } from '@fastgpt/global/core/chat/type';
-import { InteractiveNodeResponseItemType } from '@fastgpt/global/core/workflow/template/system/userSelect/type';
+import { InteractiveNodeResponseItemType } from '@fastgpt/global/core/workflow/template/system/interactive/type';
 
 export type generatingMessageProps = {
   event: SseResponseEventEnum;

projects/app/src/components/core/chat/components/AIResponseBox.tsx

@@ -7,7 +7,14 @@ import {
   AccordionPanel,
   Box,
   Button,
-  Flex
+  Flex,
+  Input,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  Textarea
 } from '@chakra-ui/react';
 import { ChatItemValueTypeEnum } from '@fastgpt/global/core/chat/constants';
 import {
@@ -15,12 +22,22 @@ import {
   ToolModuleResponseItemType,
   UserChatItemValueItemType
 } from '@fastgpt/global/core/chat/type';
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import Avatar from '@fastgpt/web/components/common/Avatar';
-import { InteractiveNodeResponseItemType } from '@fastgpt/global/core/workflow/template/system/userSelect/type';
+import {
+  InteractiveBasicType,
+  UserInputInteractive,
+  UserSelectInteractive
+} from '@fastgpt/global/core/workflow/template/system/interactive/type';
 import { isEqual } from 'lodash';
 import { onSendPrompt } from '../ChatContainer/useChat';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import MySelect from '@fastgpt/web/components/common/MySelect';
 
 type props = {
   value: UserChatItemValueItemType | AIChatItemValueItemType;
@@ -123,10 +140,10 @@ ${toolResponse}`}
   },
   (prevProps, nextProps) => isEqual(prevProps, nextProps)
 );
-const RenderInteractive = React.memo(function RenderInteractive({
+const RenderUserSelectInteractive = React.memo(function RenderInteractive({
   interactive
 }: {
-  interactive: InteractiveNodeResponseItemType;
+  interactive: InteractiveBasicType & UserSelectInteractive;
 }) {
   return (
     <>
@@ -166,6 +183,114 @@ const RenderInteractive = React.memo(function RenderInteractive({
     </>
   );
 });
+const RenderUserFormInteractive = React.memo(function RenderFormInput({
+  interactive
+}: {
+  interactive: InteractiveBasicType & UserInputInteractive;
+}) {
+  const { t } = useTranslation();
+  const { register, setValue, handleSubmit: handleSubmitChat, control, reset } = useForm();
+
+  const onSubmit = useCallback((data: any) => {
+    onSendPrompt({
+      text: JSON.stringify(data),
+      isInteractivePrompt: true
+    });
+  }, []);
+
+  useEffect(() => {
+    if (interactive.type === 'userInput') {
+      const defaultValues = interactive.params.inputForm?.reduce(
+        (acc: Record<string, any>, item) => {
+          acc[item.label] = !!item.value ? item.value : item.defaultValue;
+          return acc;
+        },
+        {}
+      );
+      reset(defaultValues);
+    }
+  }, []);
+
+  return (
+    <Flex flexDirection={'column'} gap={2} w={'250px'}>
+      {interactive.params.inputForm?.map((input) => (
+        <Box key={input.label}>
+          <Flex mb={1}>
+            <FormLabel required={input.required}>{input.label}</FormLabel>
+            <QuestionTip ml={1} label={input.description} />
+          </Flex>
+          {input.type === FlowNodeInputTypeEnum.input && (
+            <Input
+              bg={'white'}
+              maxLength={input.maxLength}
+              isDisabled={interactive.params.submitted}
+              {...register(input.label, {
+                required: input.required
+              })}
+            />
+          )}
+          {input.type === FlowNodeInputTypeEnum.textarea && (
+            <Textarea
+              isDisabled={interactive.params.submitted}
+              bg={'white'}
+              {...register(input.label, {
+                required: input.required
+              })}
+              rows={5}
+              maxLength={input.maxLength || 4000}
+            />
+          )}
+          {input.type === FlowNodeInputTypeEnum.numberInput && (
+            <NumberInput
+              step={1}
+              min={input.min}
+              max={input.max}
+              isDisabled={interactive.params.submitted}
+              bg={'white'}
+            >
+              <NumberInputField
+                bg={'white'}
+                {...register(input.label, {
+                  required: input.required
+                })}
+              />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </NumberInput>
+          )}
+          {input.type === FlowNodeInputTypeEnum.select && (
+            <Controller
+              key={input.label}
+              control={control}
+              name={input.label}
+              rules={{ required: input.required }}
+              render={({ field: { ref, value } }) => {
+                if (!input.list) return <></>;
+                return (
+                  <MySelect
+                    ref={ref}
+                    width={'100%'}
+                    list={input.list}
+                    value={value}
+                    isDisabled={interactive.params.submitted}
+                    onchange={(e) => setValue(input.label, e)}
+                  />
+                );
+              }}
+            />
+          )}
+        </Box>
+      ))}
+      {!interactive.params.submitted && (
+        <Flex w={'full'} justifyContent={'end'}>
+          <Button onClick={handleSubmitChat(onSubmit)}>{t('common:Submit')}</Button>
+        </Flex>
+      )}
+    </Flex>
+  );
+});
 
 const AIResponseBox = ({ value, isLastResponseValue, isChatting }: props) => {
   if (value.type === ChatItemValueTypeEnum.text && value.text)
@@ -179,7 +304,13 @@ const AIResponseBox = ({ value, isLastResponseValue, isChatting }: props) => {
     value.interactive &&
     value.interactive.type === 'userSelect'
   )
-    return <RenderInteractive interactive={value.interactive} />;
+    return <RenderUserSelectInteractive interactive={value.interactive} />;
+  if (
+    value.type === ChatItemValueTypeEnum.interactive &&
+    value.interactive &&
+    value.interactive?.type === 'userInput'
+  )
+    return <RenderUserFormInteractive interactive={value.interactive} />;
 };
 
 export default React.memo(AIResponseBox);

projects/app/src/components/core/chat/components/WholeResponseModal.tsx

@@ -352,6 +352,12 @@ export const WholeResponseContent = ({
         label={t('common:core.chat.response.loop_output_element')}
         value={activeModule?.loopOutputValue}
       />
+
+      {/* form input */}
+      <Row
+        label={t('common:core.chat.response.form_input_result')}
+        value={activeModule?.formInputResult}
+      />
     </Box>
   ) : null;
 };

projects/app/src/pages/api/v1/chat/completions.ts

@@ -293,7 +293,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
       })();
 
       const isInteractiveRequest = !!getLastInteractiveValue(histories);
-      const { text: userSelectedVal } = chatValue2RuntimePrompt(userQuestion.value);
+      const { text: userInteractiveVal } = chatValue2RuntimePrompt(userQuestion.value);
 
       const newTitle = isPlugin
         ? variables.cTime ?? getSystemTime(user.timezone)
@@ -312,7 +312,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
           appId: app._id,
           teamId,
           tmbId: tmbId,
-          userSelectedVal,
+          userInteractiveVal,
           aiResponse,
           newVariables,
           newTitle

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/index.tsx

@@ -55,7 +55,8 @@ const nodeTypes: Record<FlowNodeTypeEnum, any> = {
   [FlowNodeTypeEnum.userSelect]: dynamic(() => import('./nodes/NodeUserSelect')),
   [FlowNodeTypeEnum.loop]: dynamic(() => import('./nodes/Loop/NodeLoop')),
   [FlowNodeTypeEnum.loopStart]: dynamic(() => import('./nodes/Loop/NodeLoopStart')),
-  [FlowNodeTypeEnum.loopEnd]: dynamic(() => import('./nodes/Loop/NodeLoopEnd'))
+  [FlowNodeTypeEnum.loopEnd]: dynamic(() => import('./nodes/Loop/NodeLoopEnd')),
+  [FlowNodeTypeEnum.formInput]: dynamic(() => import('./nodes/NodeFormInput'))
 };
 const edgeTypes = {
   [EDGE_TYPE]: ButtonEdge

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/InputFormEditModal.tsx

+import { Box, Flex, FormLabel, Stack } from '@chakra-ui/react';
+import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
+import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { UserInputFormItemType } from '@fastgpt/global/core/workflow/template/system/interactive/type';
+import { useForm } from 'react-hook-form';
+import { useToast } from '@fastgpt/web/hooks/useToast';
+import InputTypeConfig from '../NodePluginIO/InputTypeConfig';
+
+export const defaultFormInput: UserInputFormItemType = {
+  type: FlowNodeInputTypeEnum.input,
+  key: '',
+  label: '',
+  value: '',
+  valueType: WorkflowIOValueTypeEnum.string,
+  required: false
+};
+
+// Modal for add or edit user input form items
+const InputFormEditModal = ({
+  defaultValue,
+  onClose,
+  onSubmit,
+  keys
+}: {
+  defaultValue: UserInputFormItemType;
+  onClose: () => void;
+  onSubmit: (data: UserInputFormItemType) => void;
+  keys: string[];
+}) => {
+  const isEdit = !!defaultValue.key;
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const form = useForm({
+    defaultValues: {
+      ...defaultValue,
+      list: defaultValue.list?.length ? defaultValue.list : [{ label: '', value: '' }]
+    }
+  });
+  const { setValue, watch, reset } = form;
+
+  const inputType = watch('type') || FlowNodeInputTypeEnum.input;
+
+  const maxLength = watch('maxLength');
+  const max = watch('max');
+  const min = watch('min');
+
+  const inputTypeList = [
+    {
+      icon: 'core/workflow/inputType/input',
+      label: t('common:core.workflow.inputType.input'),
+      value: FlowNodeInputTypeEnum.input,
+      defaultValueType: WorkflowIOValueTypeEnum.string
+    },
+    {
+      icon: 'core/workflow/inputType/textarea',
+      label: t('common:core.workflow.inputType.textarea'),
+      value: FlowNodeInputTypeEnum.textarea,
+      defaultValueType: WorkflowIOValueTypeEnum.string
+    },
+    {
+      icon: 'core/workflow/inputType/numberInput',
+      label: t('common:core.workflow.inputType.number input'),
+      value: FlowNodeInputTypeEnum.numberInput,
+      defaultValueType: WorkflowIOValueTypeEnum.number
+    },
+    {
+      icon: 'core/workflow/inputType/option',
+      label: t('common:core.workflow.inputType.select'),
+      value: FlowNodeInputTypeEnum.select,
+      defaultValueType: WorkflowIOValueTypeEnum.string
+    }
+  ];
+
+  const onSubmitSuccess = useCallback(
+    (data: UserInputFormItemType, action: 'confirm' | 'continue') => {
+      const isChangeKey = defaultValue.key !== data.key;
+      if (keys.includes(data.key)) {
+        if (!isEdit || isChangeKey) {
+          toast({
+            status: 'warning',
+            title: t('workflow:field_name_already_exists')
+          });
+          return;
+        }
+      }
+
+      data.key = data.label;
+
+      if (action === 'confirm') {
+        onSubmit(data);
+        onClose();
+      } else if (action === 'continue') {
+        onSubmit(data);
+        toast({
+          status: 'success',
+          title: t('common:common.Add Success')
+        });
+        reset(defaultFormInput);
+      }
+    },
+    [toast, t, reset, onSubmit, onClose, defaultFormInput]
+  );
+
+  const onSubmitError = useCallback(
+    (e: Object) => {
+      for (const item of Object.values(e)) {
+        if (item.message) {
+          toast({
+            status: 'warning',
+            title: item.message
+          });
+          break;
+        }
+      }
+    },
+    [toast]
+  );
+
+  return (
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      iconSrc="file/fill/manual"
+      title={isEdit ? t('workflow:edit_input') : t('workflow:add_new_input')}
+      maxW={['90vw', '878px']}
+      w={'100%'}
+      isCentered
+    >
+      <Flex h={'494px'}>
+        <Stack gap={4} p={8}>
+          <FormLabel color={'myGray.600'} fontWeight={'medium'}>
+            {t('common:core.module.Input Type')}
+          </FormLabel>
+          <Flex flexDirection={'column'} gap={4}>
+            <Box display={'grid'} gridTemplateColumns={'repeat(2, 1fr)'} gap={4}>
+              {inputTypeList.map((item) => {
+                const isSelected = inputType === item.value;
+                return (
+                  <Box
+                    display={'flex'}
+                    key={item.label}
+                    border={isSelected ? '1px solid #3370FF' : '1px solid #DFE2EA'}
+                    p={3}
+                    rounded={'6px'}
+                    fontWeight={'medium'}
+                    fontSize={'14px'}
+                    alignItems={'center'}
+                    cursor={'pointer'}
+                    boxShadow={isSelected ? '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)' : 'none'}
+                    _hover={{
+                      '& > svg': {
+                        color: 'primary.600'
+                      },
+                      '& > span': {
+                        color: 'myGray.900'
+                      },
+                      border: '1px solid #3370FF',
+                      boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
+                    }}
+                    onClick={() => {
+                      setValue('type', item.value);
+                    }}
+                  >
+                    <MyIcon
+                      name={item.icon as any}
+                      w={'20px'}
+                      mr={1.5}
+                      color={isSelected ? 'primary.600' : 'myGray.400'}
+                    />
+                    <Box as="span" color={isSelected ? 'myGray.900' : 'inherit'} pr={4}>
+                      {item.label}
+                    </Box>
+                  </Box>
+                );
+              })}
+            </Box>
+          </Flex>
+        </Stack>
+        <InputTypeConfig
+          form={form}
+          type={'formInput'}
+          isEdit={isEdit}
+          inputType={inputType}
+          maxLength={maxLength}
+          max={max}
+          min={min}
+          onClose={onClose}
+          onSubmitSuccess={onSubmitSuccess}
+          onSubmitError={onSubmitError}
+        />
+      </Flex>
+    </MyModal>
+  );
+};
+
+export default React.memo(InputFormEditModal);

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx

+import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node';
+import React, { useMemo, useState } from 'react';
+import { NodeProps } from 'reactflow';
+import NodeCard from '../render/NodeCard';
+import Container from '../../components/Container';
+import RenderInput from '../render/RenderInput';
+import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
+import {
+  FlowNodeInputItemType,
+  FlowNodeOutputItemType
+} from '@fastgpt/global/core/workflow/type/io';
+import {
+  Box,
+  Button,
+  Flex,
+  FormLabel,
+  HStack,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from '@chakra-ui/react';
+import { UserInputFormItemType } from '@fastgpt/global/core/workflow/template/system/interactive/type';
+import { useTranslation } from 'react-i18next';
+import {
+  FlowNodeInputMap,
+  FlowNodeInputTypeEnum,
+  FlowNodeOutputTypeEnum
+} from '@fastgpt/global/core/workflow/node/constant';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { SmallAddIcon } from '@chakra-ui/icons';
+import IOTitle from '../../components/IOTitle';
+import { useContextSelector } from 'use-context-selector';
+import { WorkflowContext } from '../../../context';
+import InputFormEditModal, { defaultFormInput } from './InputFormEditModal';
+import RenderOutput from '../render/RenderOutput';
+
+const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
+  const { nodeId, inputs, outputs } = data;
+  const { t } = useTranslation();
+  const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
+
+  const [editField, setEditField] = useState<UserInputFormItemType>();
+
+  const CustomComponent = useMemo(
+    () => ({
+      [NodeInputKeyEnum.userInputForms]: ({ value, key, ...props }: FlowNodeInputItemType) => {
+        const inputs = value as UserInputFormItemType[];
+
+        const onSubmit = (data: UserInputFormItemType) => {
+          if (!editField?.key) {
+            onChangeNode({
+              nodeId,
+              type: 'updateInput',
+              key,
+              value: {
+                ...props,
+                key,
+                value: inputs.concat(data)
+              }
+            });
+            onChangeNode({
+              nodeId,
+              type: 'addOutput',
+              value: {
+                id: data.key,
+                valueType: data.valueType,
+                key: data.key,
+                label: data.label,
+                type: FlowNodeOutputTypeEnum.static
+              }
+            });
+          } else {
+            const output = outputs.find((output) => output.key === editField.key);
+            onChangeNode({
+              nodeId,
+              type: 'updateInput',
+              key,
+              value: {
+                ...props,
+                key,
+                value: inputs.map((input) => (input.key === editField.key ? data : input))
+              }
+            });
+            onChangeNode({
+              nodeId,
+              type: 'replaceOutput',
+              key: editField.key,
+              value: {
+                ...(output as FlowNodeOutputItemType),
+                valueType: data.valueType,
+                key: data.key,
+                label: data.label
+              }
+            });
+          }
+        };
+
+        const onDelete = (valueKey: string) => {
+          onChangeNode({
+            nodeId,
+            type: 'updateInput',
+            key,
+            value: {
+              ...props,
+              key,
+              value: inputs.filter((input) => input.key !== valueKey)
+            }
+          });
+          onChangeNode({
+            nodeId,
+            type: 'delOutput',
+            key: valueKey
+          });
+        };
+
+        return (
+          <Box>
+            <HStack className="nodrag" cursor={'default'} mb={3}>
+              <FormLabel>{t('common:core.module.input_form')}</FormLabel>
+              <Box flex={'1 0 0'} />
+              <Button
+                variant={'ghost'}
+                leftIcon={<SmallAddIcon />}
+                iconSpacing={1}
+                size={'sm'}
+                onClick={() => {
+                  setEditField(defaultFormInput);
+                }}
+              >
+                {t('common:common.Add_new_input')}
+              </Button>
+              {!!editField && (
+                <InputFormEditModal
+                  defaultValue={editField}
+                  keys={inputs.map((item) => item.key)}
+                  onClose={() => {
+                    setEditField(undefined);
+                  }}
+                  onSubmit={onSubmit}
+                />
+              )}
+            </HStack>
+
+            <TableContainer>
+              <Table bg={'white'}>
+                <Thead>
+                  <Tr>
+                    <Th borderBottomLeftRadius={'none !important'}>
+                      {t('common:core.module.input_name')}
+                    </Th>
+                    <Th>{t('common:core.module.input_description')}</Th>
+                    <Th>{t('common:common.Require Input')}</Th>
+                    <Th borderBottomRightRadius={'none !important'}>{t('user:operations')}</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {inputs.map((item, index) => {
+                    const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
+                    return (
+                      <Tr key={index}>
+                        <Td>
+                          <Flex alignItems={'center'}>
+                            {!!icon && (
+                              <MyIcon name={icon as any} w={'14px'} mr={1} color={'primary.600'} />
+                            )}
+                            {item.label}
+                          </Flex>
+                        </Td>
+                        <Td>{item.description}</Td>
+                        <Td>{item.required ? '✅' : ''}</Td>
+                        <Td>
+                          <MyIcon
+                            mr={3}
+                            name={'common/settingLight'}
+                            w={'16px'}
+                            cursor={'pointer'}
+                            _hover={{ color: 'primary.600' }}
+                            onClick={() => setEditField(item)}
+                          />
+                          <MyIcon
+                            className="delete"
+                            name={'delete'}
+                            w={'16px'}
+                            color={'myGray.600'}
+                            cursor={'pointer'}
+                            ml={2}
+                            _hover={{ color: 'red.500' }}
+                            onClick={() => {
+                              onDelete(item.key);
+                            }}
+                          />
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </Box>
+        );
+      }
+    }),
+    [nodeId, editField, t, setEditField, onChangeNode]
+  );
+
+  return (
+    <NodeCard minW={'400px'} selected={selected} {...data}>
+      <Container>
+        <IOTitle text={t('common:common.Input')} />
+        <RenderInput nodeId={nodeId} flowInputList={inputs} CustomComponent={CustomComponent} />
+      </Container>
+      <Container>
+        <IOTitle text={t('common:common.Output')} />
+        <RenderOutput nodeId={nodeId} flowOutputList={outputs} />
+      </Container>
+    </NodeCard>
+  );
+};
+
+export default React.memo(NodeFormInput);

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/PluginInput.tsx

@@ -40,7 +40,7 @@ const NodePluginInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
 
   const [editField, setEditField] = useState<FlowNodeInputItemType>();
 
-  const onSubmit = ({ data }: { data: FlowNodeInputItemType; isChangeKey: boolean }) => {
+  const onSubmit = (data: FlowNodeInputItemType) => {
     if (!editField) return;
 
     if (editField?.key) {

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx

@@ -15,7 +15,7 @@ import { SourceHandle } from './render/Handle';
 import { getHandleId } from '@fastgpt/global/core/workflow/utils';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../context';
-import { UserSelectOptionItemType } from '@fastgpt/global/core/workflow/template/system/userSelect/type';
+import { UserSelectOptionItemType } from '@fastgpt/global/core/workflow/template/system/interactive/type';
 import IOTitle from '../components/IOTitle';
 import RenderOutput from './render/RenderOutput';