feat: http body type & http input support editor variable (#2603)

* feat: http body type & http input support editor variable

* fix type

* chore: code

* code

packages/global/core/workflow/constants.ts

@@ -108,6 +108,8 @@ export enum NodeInputKeyEnum {
   httpMethod = 'system_httpMethod',
   httpParams = 'system_httpParams',
   httpJsonBody = 'system_httpJsonBody',
+  httpFormBody = 'system_httpFormBody',
+  httpContentType = 'system_httpContentType',
   httpTimeout = 'system_httpTimeout',
   abandon_httpUrl = 'url',
 
@@ -217,3 +219,13 @@ export enum RuntimeEdgeStatusEnum {
 
 export const VARIABLE_NODE_ID = 'VARIABLE_NODE_ID';
 export const DYNAMIC_INPUT_REFERENCE_KEY = 'DYNAMIC_INPUT_REFERENCE_KEY';
+
+// http node body content type
+export enum ContentTypes {
+  none = 'none',
+  formData = 'form-data',
+  xWwwFormUrlencoded = 'x-www-form-urlencoded',
+  json = 'json',
+  xml = 'xml',
+  raw = 'raw-text'
+}

packages/global/core/workflow/template/system/http468.ts

@@ -8,7 +8,8 @@ import {
   WorkflowIOValueTypeEnum,
   NodeInputKeyEnum,
   NodeOutputKeyEnum,
-  FlowNodeTemplateTypeEnum
+  FlowNodeTemplateTypeEnum,
+  ContentTypes
 } from '../../constants';
 import { Input_Template_DynamicInput } from '../input';
 import { Output_Template_AddOutput } from '../output';
@@ -82,6 +83,7 @@ export const HttpNode468: FlowNodeTemplateType = {
       label: '',
       required: false
     },
+    // json body data
     {
       key: NodeInputKeyEnum.httpJsonBody,
       renderTypeList: [FlowNodeInputTypeEnum.hidden],
@@ -89,6 +91,24 @@ export const HttpNode468: FlowNodeTemplateType = {
       value: '',
       label: '',
       required: false
+    },
+    // form body data
+    {
+      key: NodeInputKeyEnum.httpFormBody,
+      renderTypeList: [FlowNodeInputTypeEnum.hidden],
+      valueType: WorkflowIOValueTypeEnum.any,
+      value: [],
+      label: '',
+      required: false
+    },
+    // body data type
+    {
+      key: NodeInputKeyEnum.httpContentType,
+      renderTypeList: [FlowNodeInputTypeEnum.hidden],
+      valueType: WorkflowIOValueTypeEnum.string,
+      value: ContentTypes.json,
+      label: '',
+      required: false
     }
   ],
   outputs: [

packages/service/core/workflow/dispatch/tools/http468.ts

@@ -16,6 +16,8 @@ import { DispatchNodeResultType } from '@fastgpt/global/core/workflow/runtime/ty
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { textAdaptGptResponse } from '@fastgpt/global/core/workflow/runtime/utils';
 import { getSystemPluginCb } from '../../../../../plugins/register';
+import { ContentTypes } from '@fastgpt/global/core/workflow/constants';
+import { replaceEditorVariable } from '@fastgpt/global/core/workflow/utils';
 
 type PropsArrType = {
   key: string;
@@ -29,6 +31,8 @@ type HttpRequestProps = ModuleDispatchProps<{
   [NodeInputKeyEnum.httpHeaders]: PropsArrType[];
   [NodeInputKeyEnum.httpParams]: PropsArrType[];
   [NodeInputKeyEnum.httpJsonBody]: string;
+  [NodeInputKeyEnum.httpFormBody]: PropsArrType[];
+  [NodeInputKeyEnum.httpContentType]: ContentTypes;
   [NodeInputKeyEnum.addInputParam]: Record<string, any>;
   [NodeInputKeyEnum.httpTimeout]?: number;
   [key: string]: any;
@@ -40,13 +44,23 @@ type HttpResponse = DispatchNodeResultType<{
 
 const UNDEFINED_SIGN = 'UNDEFINED_SIGN';
 
+const contentTypeMap = {
+  [ContentTypes.none]: '',
+  [ContentTypes.formData]: '',
+  [ContentTypes.xWwwFormUrlencoded]: 'application/x-www-form-urlencoded',
+  [ContentTypes.json]: 'application/json',
+  [ContentTypes.xml]: 'application/xml',
+  [ContentTypes.raw]: 'text/plain'
+};
+
 export const dispatchHttp468Request = async (props: HttpRequestProps): Promise<HttpResponse> => {
   let {
     runningAppInfo: { id: appId },
     chatId,
     responseChatItemId,
     variables,
-    node: { outputs },
+    node,
+    runtimeNodes,
     histories,
     workflowStreamResponse,
     params: {
@@ -55,6 +69,8 @@ export const dispatchHttp468Request = async (props: HttpRequestProps): Promise<H
       system_httpHeader: httpHeader,
       system_httpParams: httpParams = [],
       system_httpJsonBody: httpJsonBody,
+      system_httpFormBody: httpFormBody,
+      system_httpContentType: httpContentType = ContentTypes.json,
       system_httpTimeout: httpTimeout = 60,
       [NodeInputKeyEnum.addInputParam]: dynamicInput,
       ...body
@@ -77,21 +93,41 @@ export const dispatchHttp468Request = async (props: HttpRequestProps): Promise<H
     // ...dynamicInput,
     ...systemVariables
   };
-
   const allVariables = {
     [NodeInputKeyEnum.addInputParam]: concatVariables,
     ...concatVariables
   };
-
   httpReqUrl = replaceVariable(httpReqUrl, allVariables);
+
   // parse header
   const headers = await (() => {
     try {
+      const contentType = contentTypeMap[httpContentType];
+      if (contentType) {
+        httpHeader = [{ key: 'Content-Type', value: contentType, type: 'string' }, ...httpHeader];
+      }
+
       if (!httpHeader || httpHeader.length === 0) return {};
       // array
       return httpHeader.reduce((acc: Record<string, string>, item) => {
-        const key = replaceVariable(item.key, allVariables);
-        const value = replaceVariable(item.value, allVariables);
+        const key = replaceVariable(
+          replaceEditorVariable({
+            text: item.key,
+            nodes: runtimeNodes,
+            variables,
+            runningNode: node
+          }),
+          allVariables
+        );
+        const value = replaceVariable(
+          replaceEditorVariable({
+            text: item.value,
+            nodes: runtimeNodes,
+            variables,
+            runningNode: node
+          }),
+          allVariables
+        );
         acc[key] = valueTypeFormat(value, WorkflowIOValueTypeEnum.string);
         return acc;
       }, {});
@@ -99,28 +135,109 @@ export const dispatchHttp468Request = async (props: HttpRequestProps): Promise<H
       return Promise.reject('Header 为非法 JSON 格式');
     }
   })();
+
   const params = httpParams.reduce((acc: Record<string, string>, item) => {
-    const key = replaceVariable(item.key, allVariables);
-    const value = replaceVariable(item.value, allVariables);
+    const key = replaceVariable(
+      replaceEditorVariable({
+        text: item.key,
+        nodes: runtimeNodes,
+        variables,
+        runningNode: node
+      }),
+      allVariables
+    );
+    const value = replaceVariable(
+      replaceEditorVariable({
+        text: item.value,
+        nodes: runtimeNodes,
+        variables,
+        runningNode: node
+      }),
+      allVariables
+    );
     acc[key] = valueTypeFormat(value, WorkflowIOValueTypeEnum.string);
     return acc;
   }, {});
 
   const requestBody = await (() => {
-    if (!httpJsonBody) return {};
+    if (httpContentType === ContentTypes.none) return {};
     try {
-      // Replace all variables in the string body
-      httpJsonBody = replaceVariable(httpJsonBody, allVariables);
-
-      // Text body, return directly
-      if (headers['Content-Type']?.includes('text/plain')) {
-        return httpJsonBody?.replaceAll(UNDEFINED_SIGN, 'null');
+      if (httpContentType === ContentTypes.formData) {
+        if (!Array.isArray(httpFormBody)) return {};
+        httpFormBody = httpFormBody.map((item) => ({
+          key: replaceVariable(
+            replaceEditorVariable({
+              text: item.key,
+              nodes: runtimeNodes,
+              variables,
+              runningNode: node
+            }),
+            allVariables
+          ),
+          type: item.type,
+          value: replaceVariable(
+            replaceEditorVariable({
+              text: item.value,
+              nodes: runtimeNodes,
+              variables,
+              runningNode: node
+            }),
+            allVariables
+          )
+        }));
+        const formData = new FormData();
+        for (const { key, value } of httpFormBody) {
+          formData.append(key, value);
+        }
+        return formData;
       }
-
-      // Json body, parse and return
-      const jsonParse = JSON.parse(httpJsonBody);
-      const removeSignJson = removeUndefinedSign(jsonParse);
-      return removeSignJson;
+      if (httpContentType === ContentTypes.xWwwFormUrlencoded) {
+        if (!Array.isArray(httpFormBody)) return {};
+        httpFormBody = httpFormBody.map((item) => ({
+          key: replaceVariable(
+            replaceEditorVariable({
+              text: item.key,
+              nodes: runtimeNodes,
+              variables,
+              runningNode: node
+            }),
+            allVariables
+          ),
+          type: item.type,
+          value: replaceVariable(
+            replaceEditorVariable({
+              text: item.value,
+              nodes: runtimeNodes,
+              variables,
+              runningNode: node
+            }),
+            allVariables
+          )
+        }));
+        const urlSearchParams = new URLSearchParams();
+        for (const { key, value } of httpFormBody) {
+          urlSearchParams.append(key, value);
+        }
+        return urlSearchParams;
+      }
+      if (!httpJsonBody) return {};
+      if (httpContentType === ContentTypes.json) {
+        httpJsonBody = replaceVariable(httpJsonBody, allVariables);
+        // Json body, parse and return
+        const jsonParse = JSON.parse(httpJsonBody);
+        const removeSignJson = removeUndefinedSign(jsonParse);
+        return removeSignJson;
+      }
+      httpJsonBody = replaceVariable(
+        replaceEditorVariable({
+          text: httpJsonBody,
+          nodes: runtimeNodes,
+          variables,
+          runningNode: node
+        }),
+        allVariables
+      );
+      return httpJsonBody.replaceAll(UNDEFINED_SIGN, 'null');
     } catch (error) {
       console.log(error);
       return Promise.reject(`Invalid JSON body: ${httpJsonBody}`);
@@ -150,7 +267,7 @@ export const dispatchHttp468Request = async (props: HttpRequestProps): Promise<H
     // format output value type
     const results: Record<string, any> = {};
     for (const key in formatResponse) {
-      const output = outputs.find((item) => item.key === key);
+      const output = node.outputs.find((item) => item.key === key);
       if (!output) continue;
       results[key] = valueTypeFormat(formatResponse[key], output.valueType);
     }
@@ -213,7 +330,6 @@ async function fetchData({
     baseURL: `http://${SERVICE_LOCAL_HOST}`,
     url,
     headers: {
-      'Content-Type': 'application/json',
       ...headers
     },
     timeout: timeout * 1000,

packages/web/components/common/Input/HttpInput/Editor.tsx

@@ -17,39 +17,40 @@ import { Box, Flex } from '@chakra-ui/react';
 import styles from './index.module.scss';
 import { EditorState, LexicalEditor } from 'lexical';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
-import { EditorVariablePickerType } from '../../Textarea/PromptEditor/type';
+import {
+  EditorVariableLabelPickerType,
+  EditorVariablePickerType
+} from '../../Textarea/PromptEditor/type';
 import { VariableNode } from '../../Textarea/PromptEditor/plugins/VariablePlugin/node';
 import { textToEditorState } from '../../Textarea/PromptEditor/utils';
-import DropDownMenu from '../../Textarea/PromptEditor/modules/DropDownMenu';
 import { SingleLinePlugin } from '../../Textarea/PromptEditor/plugins/SingleLinePlugin';
 import OnBlurPlugin from '../../Textarea/PromptEditor/plugins/OnBlurPlugin';
 import VariablePlugin from '../../Textarea/PromptEditor/plugins/VariablePlugin';
 import VariablePickerPlugin from '../../Textarea/PromptEditor/plugins/VariablePickerPlugin';
 import FocusPlugin from '../../Textarea/PromptEditor/plugins/FocusPlugin';
+import VariableLabelPlugin from '../../Textarea/PromptEditor/plugins/VariableLabelPlugin';
+import { VariableLabelNode } from '../../Textarea/PromptEditor/plugins/VariableLabelPlugin/node';
+import VariableLabelPickerPlugin from '../../Textarea/PromptEditor/plugins/VariableLabelPickerPlugin';
 
 export default function Editor({
   h = 40,
-  hasVariablePlugin = true,
-  hasDropDownPlugin = false,
   variables,
+  variableLabels,
   onChange,
   onBlur,
   value,
   currentValue,
   placeholder = '',
-  setDropdownValue,
   updateTrigger
 }: {
   h?: number;
-  hasVariablePlugin?: boolean;
-  hasDropDownPlugin?: boolean;
   variables: EditorVariablePickerType[];
+  variableLabels: EditorVariableLabelPickerType[];
   onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
   onBlur?: (editor: LexicalEditor) => void;
   value?: string;
   currentValue?: string;
   placeholder?: string;
-  setDropdownValue?: (value: string) => void;
   updateTrigger?: boolean;
 }) {
   const [key, setKey] = useState(getNanoid(6));
@@ -58,7 +59,7 @@ export default function Editor({
 
   const initialConfig = {
     namespace: 'HttpInput',
-    nodes: [VariableNode],
+    nodes: [VariableNode, VariableLabelNode],
     editorState: textToEditorState(value),
     onError: (error: Error) => {
       throw error;
@@ -75,16 +76,6 @@ export default function Editor({
     setFocus(false);
   }, [updateTrigger]);
 
-  const dropdownVariables = useMemo(
-    () =>
-      variables.filter((item) => {
-        const key = item.key.toLowerCase();
-        const current = currentValue?.toLowerCase();
-        return key.includes(current || '') && item.key !== currentValue;
-      }),
-    [currentValue, variables]
-  );
-
   return (
     <Flex
       position={'relative'}
@@ -133,14 +124,12 @@ export default function Editor({
             });
           }}
         />
-        {hasVariablePlugin ? <VariablePickerPlugin variables={variables} /> : ''}
         <VariablePlugin variables={variables} />
+        <VariableLabelPlugin variables={variableLabels} />
+        <VariableLabelPickerPlugin variables={variableLabels} isFocus={focus} />
         <OnBlurPlugin onBlur={onBlur} />
         <SingleLinePlugin />
       </LexicalComposer>
-      {focus && hasDropDownPlugin && (
-        <DropDownMenu variables={dropdownVariables} setDropdownValue={setDropdownValue} />
-      )}
     </Flex>
   );
 }

packages/web/components/common/Input/HttpInput/index.tsx

@@ -1,58 +1,61 @@
-import React, { useEffect } from 'react';
-import { $getRoot, EditorState, type LexicalEditor } from 'lexical';
+import React from 'react';
+import { EditorState, type LexicalEditor } from 'lexical';
 import { useCallback } from 'react';
 import { editorStateToText } from '../../Textarea/PromptEditor/utils';
-import { EditorVariablePickerType } from '../../Textarea/PromptEditor/type';
+import {
+  EditorVariableLabelPickerType,
+  EditorVariablePickerType
+} from '../../Textarea/PromptEditor/type';
 import Editor from './Editor';
 
 const HttpInput = ({
-  hasVariablePlugin = true,
-  hasDropDownPlugin = false,
   variables = [],
+  variableLabels = [],
   value,
   onChange,
   onBlur,
   h,
   placeholder,
-  setDropdownValue,
   updateTrigger
 }: {
-  hasVariablePlugin?: boolean;
-  hasDropDownPlugin?: boolean;
   variables?: EditorVariablePickerType[];
+  variableLabels?: EditorVariableLabelPickerType[];
   value?: string;
   onChange?: (text: string) => void;
   onBlur?: (text: string) => void;
   h?: number;
   placeholder?: string;
-  setDropdownValue?: (value: string) => void;
   updateTrigger?: boolean;
 }) => {
   const [currentValue, setCurrentValue] = React.useState(value);
 
-  const onChangeInput = useCallback((editorState: EditorState, editor: LexicalEditor) => {
-    const text = editorStateToText(editor).replaceAll('}}{{', '}} {{');
-    setCurrentValue(text);
-    onChange?.(text);
-  }, []);
-  const onBlurInput = useCallback((editor: LexicalEditor) => {
-    const text = editorStateToText(editor).replaceAll('}}{{', '}} {{');
-    onBlur?.(text);
-  }, []);
+  const onChangeInput = useCallback(
+    (editorState: EditorState, editor: LexicalEditor) => {
+      const text = editorStateToText(editor).replaceAll('}}{{', '}} {{');
+      setCurrentValue(text);
+      onChange?.(text);
+    },
+    [onChange]
+  );
+  const onBlurInput = useCallback(
+    (editor: LexicalEditor) => {
+      const text = editorStateToText(editor).replaceAll('}}{{', '}} {{');
+      onBlur?.(text);
+    },
+    [onBlur]
+  );
 
   return (
     <>
       <Editor
-        hasVariablePlugin={hasVariablePlugin}
-        hasDropDownPlugin={hasDropDownPlugin}
         variables={variables}
+        variableLabels={variableLabels}
         h={h}
         value={value}
         currentValue={currentValue}
         onChange={onChangeInput}
         onBlur={onBlurInput}
         placeholder={placeholder}
-        setDropdownValue={setDropdownValue}
         updateTrigger={updateTrigger}
       />
     </>

packages/web/i18n/en/common.json

@@ -866,7 +866,7 @@
         "Key already exists": "Key already exists",
         "Key cannot be empty": "Parameter name cannot be empty",
         "Props name": "Parameter name",
-        "Props tip": "Can set HTTP request related parameters\nCan use {{key}} to call global variables or external parameter input, currently available variables:\n{{variable}}",
+        "Props tip": "Can set HTTP request related parameters\nCan use / to call variables, currently available variables:\n{{variable}}",
         "Props value": "Parameter value",
         "ResponseChatItemId": "AI response ID",
         "Url and params have been split": "Path parameters have been automatically added to Params",

packages/web/i18n/en/workflow.json

@@ -58,6 +58,9 @@
   "greater_than": "greater than",
   "greater_than_or_equal_to": "Greater than or equal to",
   "greeting": "greet",
+  "http": {
+    "body_none": "This request has no body parameters."
+  },
   "http_raw_response_description": "The raw response of the HTTP request. \nOnly string or JSON type response data can be accepted.",
   "http_request": "HTTP request",
   "http_request_error_info": "HTTP request error information, returns empty when successful",

packages/web/i18n/zh/common.json

@@ -112,7 +112,6 @@
   "common": {
     "Action": "操作",
     "Add": "添加",
-    "copy_to_clipboard": "复制到剪贴板",
     "Add New": "新增",
     "Add Success": "添加成功",
     "All": "全部",
@@ -123,7 +122,6 @@
     "Confirm": "确认",
     "Confirm Create": "确认创建",
     "Confirm Import": "确认导入",
-    "export_to_json": "导出为 JSON",
     "Confirm Move": "移动到这",
     "Confirm Update": "确认更新",
     "Confirm to leave the page": "确认离开该页面？",
@@ -195,7 +193,6 @@
     "Save Success": "保存成功",
     "Save_and_exit": "保存并退出",
     "Search": "搜索",
-    "json_config": "JSON 配置",
     "Select File Failed": "选择文件异常",
     "Select template": "选择模板",
     "Set Avatar": "点击设置头像",
@@ -230,6 +227,7 @@
     "confirm": {
       "Common Tip": "操作确认"
     },
+    "copy_to_clipboard": "复制到剪贴板",
     "course": {
       "Read Course": "查看教程"
     },
@@ -241,6 +239,7 @@
       "too_many_request": "请求太频繁了，请稍后重试。",
       "unKnow": "出现了点意外~"
     },
+    "export_to_json": "导出为 JSON",
     "failed": "失败",
     "folder": {
       "Drag Tip": "点我可拖动",
@@ -260,6 +259,7 @@
     "jsonEditor": {
       "Parse error": "JSON 可能有误，请仔细检查"
     },
+    "json_config": "JSON 配置",
     "link": {
       "UnValid": "无效的链接"
     },
@@ -647,7 +647,8 @@
             "success": "开始同步"
           }
         },
-        "training": {}
+        "training": {
+        }
       },
       "data": {
         "Auxiliary Data": "辅助数据",
@@ -865,7 +866,7 @@
         "Key already exists": "Key 已经存在",
         "Key cannot be empty": "参数名不能为空",
         "Props name": "参数名",
-        "Props tip": "可以设置 HTTP 请求的相关参数\n可通过 {{key}} 来调用全局变量或外部参数输入，当前可使用变量：\n{{variable}}",
+        "Props tip": "可以设置 HTTP 请求的相关参数\n可通过输入 / 来调用变量，当前可使用变量：\n{{variable}}",
         "Props value": "参数值",
         "ResponseChatItemId": "AI 回复的 ID",
         "Url and params have been split": "路径参数已被自动加入 Params 中",

packages/web/i18n/zh/workflow.json

@@ -58,6 +58,9 @@
   "greater_than": "大于",
   "greater_than_or_equal_to": "大于等于",
   "greeting": "打招呼",
+  "http": {
+    "body_none": "该请求没有 Body 体"
+  },
   "http_raw_response_description": "HTTP请求的原始响应。只能接受字符串或JSON类型响应数据。",
   "http_request": "HTTP 请求",
   "http_request_error_info": "HTTP请求错误信息，成功时返回空",

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

@@ -24,15 +24,18 @@ import {
   NumberDecrementStepper,
   NumberInput
 } from '@chakra-ui/react';
-import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
+import {
+  ContentTypes,
+  NodeInputKeyEnum,
+  WorkflowIOValueTypeEnum
+} from '@fastgpt/global/core/workflow/constants';
 import { useTranslation } from 'next-i18next';
 import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import JSONEditor from '@fastgpt/web/components/common/Textarea/JsonEditor';
-import { formatEditorVariablePickerIcon } from '@fastgpt/global/core/workflow/utils';
-import { EditorVariablePickerType } from '@fastgpt/web/components/common/Textarea/PromptEditor/type';
+import { EditorVariableLabelPickerType } from '@fastgpt/web/components/common/Textarea/PromptEditor/type';
 import HttpInput from '@fastgpt/web/components/common/Input/HttpInput';
 import dynamic from 'next/dynamic';
 import MySelect from '@fastgpt/web/components/common/MySelect';
@@ -40,52 +43,22 @@ import RenderToolInput from '../render/RenderToolInput';
 import IOTitle from '../../components/IOTitle';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../../context';
-import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
-import { useMemoizedFn } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import { AppContext } from '@/pages/app/detail/components/context';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
+import { getEditorVariables } from '../../../utils';
+import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
 const CurlImportModal = dynamic(() => import('./CurlImportModal'));
 
-export const HttpHeaders = [
-  { key: 'A-IM', label: 'A-IM' },
-  { key: 'Accept', label: 'Accept' },
-  { key: 'Accept-Charset', label: 'Accept-Charset' },
-  { key: 'Accept-Encoding', label: 'Accept-Encoding' },
-  { key: 'Accept-Language', label: 'Accept-Language' },
-  { key: 'Accept-Datetime', label: 'Accept-Datetime' },
-  { key: 'Access-Control-Request-Method', label: 'Access-Control-Request-Method' },
-  { key: 'Access-Control-Request-Headers', label: 'Access-Control-Request-Headers' },
-  { key: 'Authorization', label: 'Authorization' },
-  { key: 'Cache-Control', label: 'Cache-Control' },
-  { key: 'Connection', label: 'Connection' },
-  { key: 'Content-Length', label: 'Content-Length' },
-  { key: 'Content-Type', label: 'Content-Type' },
-  { key: 'Cookie', label: 'Cookie' },
-  { key: 'Date', label: 'Date' },
-  { key: 'Expect', label: 'Expect' },
-  { key: 'Forwarded', label: 'Forwarded' },
-  { key: 'From', label: 'From' },
-  { key: 'Host', label: 'Host' },
-  { key: 'If-Match', label: 'If-Match' },
-  { key: 'If-Modified-Since', label: 'If-Modified-Since' },
-  { key: 'If-None-Match', label: 'If-None-Match' },
-  { key: 'If-Range', label: 'If-Range' },
-  { key: 'If-Unmodified-Since', label: 'If-Unmodified-Since' },
-  { key: 'Max-Forwards', label: 'Max-Forwards' },
-  { key: 'Origin', label: 'Origin' },
-  { key: 'Pragma', label: 'Pragma' },
-  { key: 'Proxy-Authorization', label: 'Proxy-Authorization' },
-  { key: 'Range', label: 'Range' },
-  { key: 'Referer', label: 'Referer' },
-  { key: 'TE', label: 'TE' },
-  { key: 'User-Agent', label: 'User-Agent' },
-  { key: 'Upgrade', label: 'Upgrade' },
-  { key: 'Via', label: 'Via' },
-  { key: 'Warning', label: 'Warning' },
-  { key: 'Dnt', label: 'Dnt' },
-  { key: 'X-Requested-With', label: 'X-Requested-With' },
-  { key: 'X-CSRF-Token', label: 'X-CSRF-Token' }
-];
+const defaultFormBody = {
+  key: NodeInputKeyEnum.httpFormBody,
+  renderTypeList: [FlowNodeInputTypeEnum.hidden],
+  valueType: WorkflowIOValueTypeEnum.any,
+  value: [],
+  label: '',
+  required: false
+};
 
 enum TabEnum {
   params = 'params',
@@ -260,7 +233,7 @@ export function RenderHttpProps({
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState(TabEnum.params);
   const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
-  const getNodeDynamicInputs = useContextSelector(WorkflowContext, (v) => v.getNodeDynamicInputs);
+  const edges = useContextSelector(WorkflowContext, (v) => v.edges);
 
   const { appDetail } = useContextSelector(AppContext, (v) => v);
 
@@ -268,21 +241,23 @@ export function RenderHttpProps({
   const params = inputs.find((item) => item.key === NodeInputKeyEnum.httpParams);
   const headers = inputs.find((item) => item.key === NodeInputKeyEnum.httpHeaders);
   const jsonBody = inputs.find((item) => item.key === NodeInputKeyEnum.httpJsonBody);
+  const formBody =
+    inputs.find((item) => item.key === NodeInputKeyEnum.httpFormBody) || defaultFormBody;
+  const contentType = inputs.find((item) => item.key === NodeInputKeyEnum.httpContentType);
 
   const paramsLength = params?.value?.length || 0;
   const headersLength = headers?.value?.length || 0;
 
   // get variable
-  const variables = useMemo(() => {
-    const globalVariables = getWorkflowGlobalVariables({
-      nodes: nodeList,
-      chatConfig: appDetail.chatConfig
+  const variables = useCreation(() => {
+    return getEditorVariables({
+      nodeId,
+      nodeList,
+      edges,
+      appDetail,
+      t
     });
-
-    const nodeVariables = formatEditorVariablePickerIcon(getNodeDynamicInputs(nodeId));
-
-    return [...nodeVariables, ...globalVariables];
-  }, [appDetail.chatConfig, getNodeDynamicInputs, nodeId, nodeList]);
+  }, [nodeList, edges, inputs, t]);
 
   const variableText = useMemo(() => {
     return variables
@@ -310,10 +285,11 @@ export function RenderHttpProps({
           <QuestionTip
             ml={1}
             label={t('common:core.module.http.Props tip', { variable: variableText })}
-          ></QuestionTip>
+          />
         </Flex>
         <LightRowTabs<TabEnum>
           width={'100%'}
+          mb={selectedTab === TabEnum.body ? 1 : 2}
           list={[
             { label: <RenderPropsItem text="Params" num={paramsLength} />, value: TabEnum.params },
             ...(!['GET', 'DELETE'].includes(requestMethods)
@@ -337,33 +313,31 @@ export function RenderHttpProps({
           value={selectedTab}
           onChange={setSelectedTab}
         />
-        <Box bg={'white'} borderRadius={'md'}>
+        <Box bg={'white'} borderRadius={'md'} minW={'560px'}>
           {params &&
             headers &&
             jsonBody &&
             {
-              [TabEnum.params]: (
-                <RenderForm
+              [TabEnum.params]: <RenderForm nodeId={nodeId} input={params} variables={variables} />,
+              [TabEnum.body]: (
+                <RenderBody
                   nodeId={nodeId}
-                  input={params}
                   variables={variables}
-                  tabType={TabEnum.params}
+                  jsonBody={jsonBody}
+                  formBody={formBody}
+                  typeInput={contentType}
                 />
               ),
-              [TabEnum.body]: <RenderJson nodeId={nodeId} variables={variables} input={jsonBody} />,
               [TabEnum.headers]: (
-                <RenderForm
-                  nodeId={nodeId}
-                  input={headers}
-                  variables={variables}
-                  tabType={TabEnum.headers}
-                />
+                <RenderForm nodeId={nodeId} input={headers} variables={variables} />
               )
             }[selectedTab]}
         </Box>
       </Box>
     );
   }, [
+    contentType,
+    formBody,
     headersLength,
     nodeId,
     paramsLength,
@@ -433,13 +407,11 @@ const RenderHttpTimeout = ({
 const RenderForm = ({
   nodeId,
   input,
-  variables,
-  tabType
+  variables
 }: {
   nodeId: string;
   input: FlowNodeInputItemType;
-  variables: EditorVariablePickerType[];
-  tabType?: TabEnum;
+  variables: EditorVariableLabelPickerType[];
 }) => {
   const { t } = useTranslation();
   const { toast } = useToast();
@@ -449,13 +421,6 @@ const RenderForm = ({
   const [updateTrigger, setUpdateTrigger] = useState(false);
   const [shouldUpdateNode, setShouldUpdateNode] = useState(false);
 
-  const leftVariables = useMemo(() => {
-    return (tabType === TabEnum.headers ? HttpHeaders : variables).filter((variable) => {
-      const existVariables = list.map((item) => item.key);
-      return !existVariables.includes(variable.key);
-    });
-  }, [list, tabType, variables]);
-
   useEffect(() => {
     setList(input.value || []);
   }, [input.value]);
@@ -529,7 +494,7 @@ const RenderForm = ({
 
   const Render = useMemo(() => {
     return (
-      <Box mt={2} borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom={'none'}>
+      <Box borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom={'none'}>
         <TableContainer overflowY={'visible'} overflowX={'unset'}>
           <Table>
             <Thead>
@@ -545,29 +510,25 @@ const RenderForm = ({
             <Tbody>
               {list.map((item, index) => (
                 <Tr key={`${input.key}${index}`}>
-                  <Td p={0} w={'150px'}>
+                  <Td p={0} w={'50%'}>
                     <HttpInput
-                      hasVariablePlugin={false}
-                      hasDropDownPlugin={tabType === TabEnum.headers}
-                      setDropdownValue={(value) => {
-                        handleKeyChange(index, value);
-                        setUpdateTrigger((prev) => !prev);
-                      }}
                       placeholder={t('common:core.module.http.Props name')}
                       value={item.key}
-                      variables={leftVariables}
+                      variableLabels={variables}
+                      variables={variables}
                       onBlur={(val) => {
                         handleKeyChange(index, val);
                       }}
                       updateTrigger={updateTrigger}
                     />
                   </Td>
-                  <Td p={0}>
+                  <Td p={0} w={'50%'}>
                     <Box display={'flex'} alignItems={'center'}>
                       <HttpInput
                         placeholder={t('common:core.module.http.Props value')}
                         value={item.value}
                         variables={variables}
+                        variableLabels={variables}
                         onBlur={(val) => {
                           setList((prevList) =>
                             prevList.map((item, i) =>
@@ -592,17 +553,12 @@ const RenderForm = ({
                 </Tr>
               ))}
               <Tr>
-                <Td p={0} w={'150px'}>
+                <Td p={0} w={'50%'}>
                   <HttpInput
-                    hasVariablePlugin={false}
-                    hasDropDownPlugin={tabType === TabEnum.headers}
-                    setDropdownValue={(val) => {
-                      handleAddNewProps(val);
-                      setUpdateTrigger((prev) => !prev);
-                    }}
                     placeholder={t('common:core.module.http.Add props')}
                     value={''}
-                    variables={leftVariables}
+                    variableLabels={variables}
+                    variables={variables}
                     updateTrigger={updateTrigger}
                     onBlur={(val) => {
                       handleAddNewProps(val);
@@ -610,7 +566,7 @@ const RenderForm = ({
                     }}
                   />
                 </Td>
-                <Td p={0}>
+                <Td p={0} w={'50%'}>
                   <Box display={'flex'} alignItems={'center'}>
                     <HttpInput />
                   </Box>
@@ -621,63 +577,158 @@ const RenderForm = ({
         </TableContainer>
       </Box>
     );
-  }, [
-    handleAddNewProps,
-    handleKeyChange,
-    input.key,
-    leftVariables,
-    list,
-    t,
-    tabType,
-    updateTrigger,
-    variables
-  ]);
+  }, [handleAddNewProps, handleKeyChange, input.key, list, t, updateTrigger, variables]);
 
   return Render;
 };
-const RenderJson = ({
+const RenderBody = ({
   nodeId,
-  input,
+  jsonBody,
+  formBody,
+  typeInput,
   variables
 }: {
   nodeId: string;
-  input: FlowNodeInputItemType;
-  variables: EditorVariablePickerType[];
+  jsonBody: FlowNodeInputItemType;
+  formBody: FlowNodeInputItemType;
+  typeInput: FlowNodeInputItemType | undefined;
+  variables: EditorVariableLabelPickerType[];
 }) => {
   const { t } = useTranslation();
   const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
   const [_, startSts] = useTransition();
 
+  useEffect(() => {
+    if (typeInput === undefined) {
+      onChangeNode({
+        nodeId,
+        type: 'addInput',
+        value: {
+          key: NodeInputKeyEnum.httpContentType,
+          renderTypeList: [FlowNodeInputTypeEnum.hidden],
+          valueType: WorkflowIOValueTypeEnum.string,
+          value: ContentTypes.json,
+          label: '',
+          required: false
+        }
+      });
+    }
+  }, [nodeId, onChangeNode, typeInput]);
+
   const Render = useMemo(() => {
     return (
-      <Box mt={1}>
-        <JSONEditor
-          bg={'white'}
-          defaultHeight={200}
-          resize
-          value={input.value}
-          placeholder={t('common:core.module.template.http body placeholder')}
-          onChange={(e) => {
-            startSts(() => {
-              onChangeNode({
-                nodeId,
-                type: 'updateInput',
-                key: input.key,
-                value: {
-                  ...input,
-                  value: e
-                }
+      <Box>
+        <Flex bg={'myGray.50'}>
+          {Object.values(ContentTypes).map((item) => (
+            <Box
+              key={item}
+              as={'span'}
+              px={3}
+              py={1.5}
+              mb={2}
+              borderRadius={'6px'}
+              border={'1px solid'}
+              {...(typeInput?.value === item
+                ? {
+                    bg: 'white',
+                    borderColor: 'myGray.200',
+                    color: 'primary.700'
+                  }
+                : {
+                    bg: 'myGray.50',
+                    borderColor: 'transparent',
+                    color: 'myGray.500'
+                  })}
+              _hover={{ bg: 'white', borderColor: 'myGray.200', color: 'primary.700' }}
+              onClick={() => {
+                onChangeNode({
+                  nodeId,
+                  type: 'updateInput',
+                  key: NodeInputKeyEnum.httpContentType,
+                  value: {
+                    key: NodeInputKeyEnum.httpContentType,
+                    renderTypeList: [FlowNodeInputTypeEnum.hidden],
+                    valueType: WorkflowIOValueTypeEnum.string,
+                    value: item,
+                    label: '',
+                    required: false
+                  }
+                });
+              }}
+              cursor={'pointer'}
+              whiteSpace={'nowrap'}
+            >
+              {item}
+            </Box>
+          ))}
+        </Flex>
+        {typeInput?.value === ContentTypes.none && (
+          <Box
+            px={4}
+            py={12}
+            bg={'white'}
+            color={'myGray.400'}
+            borderRadius={'6px'}
+            border={'1px solid'}
+            borderColor={'myGray.200'}
+          >
+            {t('workflow:http.body_none')}
+          </Box>
+        )}
+        {(typeInput?.value === ContentTypes.formData ||
+          typeInput?.value === ContentTypes.xWwwFormUrlencoded) && (
+          <RenderForm nodeId={nodeId} input={formBody} variables={variables} />
+        )}
+        {typeInput?.value === ContentTypes.json && (
+          <JSONEditor
+            bg={'white'}
+            defaultHeight={200}
+            resize
+            value={jsonBody.value}
+            placeholder={t('common:core.module.template.http body placeholder')}
+            onChange={(e) => {
+              startSts(() => {
+                onChangeNode({
+                  nodeId,
+                  type: 'updateInput',
+                  key: jsonBody.key,
+                  value: {
+                    ...jsonBody,
+                    value: e
+                  }
+                });
               });
-            });
-          }}
-          variables={variables}
-        />
+            }}
+            variables={variables}
+          />
+        )}
+        {(typeInput?.value === ContentTypes.xml || typeInput?.value === ContentTypes.raw) && (
+          <PromptEditor
+            value={jsonBody.value}
+            onChange={(e) => {
+              startSts(() => {
+                onChangeNode({
+                  nodeId,
+                  type: 'updateInput',
+                  key: jsonBody.key,
+                  value: {
+                    ...jsonBody,
+                    value: e
+                  }
+                });
+              });
+            }}
+            showOpenModal={false}
+            variableLabels={variables}
+            h={200}
+          />
+        )}
       </Box>
     );
-  }, [input, nodeId, onChangeNode, t, variables]);
-
+  }, [typeInput?.value, t, nodeId, formBody, variables, jsonBody, onChangeNode]);
   return Render;
 };
+
 const RenderPropsItem = ({ text, num }: { text: string; num: number }) => {
   return (
     <Flex alignItems={'center'}>
@@ -709,7 +760,7 @@ const NodeHttp = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
       [NodeInputKeyEnum.httpHeaders]: Headers,
       [NodeInputKeyEnum.httpTimeout]: HttpTimeout
     };
-  }, [Headers, HttpMethodAndUrl]);
+  }, [Headers, HttpMethodAndUrl, HttpTimeout]);
 
   return (
     <NodeCard minW={'350px'} selected={selected} {...data}>

projects/app/src/pages/app/list/components/HttpPluginEditModal.tsx

@@ -34,7 +34,6 @@ import { str2OpenApiSchema } from '@fastgpt/global/core/app/httpPlugin/utils';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import HttpInput from '@fastgpt/web/components/common/Input/HttpInput';
-import { HttpHeaders } from '../../detail/components/WorkflowComponents/Flow/nodes/NodeHttp';
 import { OpenApiJsonSchema } from '@fastgpt/global/core/app/httpPlugin/type';
 import { AppSchema } from '@fastgpt/global/core/app/type';
 import { useContextSelector } from 'use-context-selector';
@@ -168,15 +167,6 @@ const HttpPluginEditModal = ({
     errorToast: t('common:plugin.Invalid Schema')
   });
 
-  const leftVariables = useMemo(
-    () =>
-      HttpHeaders.filter((variable) => {
-        const existVariables = customHeaders.map((item) => item.key);
-        return !existVariables.includes(variable.key);
-      }),
-    [customHeaders]
-  );
-
   useEffect(() => {
     (async () => {
       if (!apiSchemaStr) {
@@ -315,28 +305,8 @@ const HttpPluginEditModal = ({
                       <Tr key={`${index}`}>
                         <Td p={0} w={'150px'}>
                           <HttpInput
-                            hasVariablePlugin={false}
-                            hasDropDownPlugin={true}
-                            setDropdownValue={(val) => {
-                              setCustomHeaders((prev) => {
-                                const newHeaders = prev.map((item, i) =>
-                                  i === index ? { ...item, key: val } : item
-                                );
-                                setValue(
-                                  'pluginData.customHeaders',
-                                  '{\n' +
-                                    newHeaders
-                                      .map((item) => `"${item.key}":"${item.value}"`)
-                                      .join(',\n') +
-                                    '\n}'
-                                );
-                                return newHeaders;
-                              });
-                              setUpdateTrigger((prev) => !prev);
-                            }}
                             placeholder={t('common:core.module.http.Props name')}
                             value={item.key}
-                            variables={leftVariables}
                             onBlur={(val) => {
                               setCustomHeaders((prev) => {
                                 const newHeaders = prev.map((item, i) =>
@@ -360,7 +330,6 @@ const HttpPluginEditModal = ({
                           <Box display={'flex'} alignItems={'center'}>
                             <HttpInput
                               placeholder={t('common:core.module.http.Props value')}
-                              hasVariablePlugin={false}
                               value={item.value}
                               onBlur={(val) =>
                                 setCustomHeaders((prev) => {
@@ -406,26 +375,8 @@ const HttpPluginEditModal = ({
                     <Tr>
                       <Td p={0} w={'150px'}>
                         <HttpInput
-                          hasVariablePlugin={false}
-                          hasDropDownPlugin={true}
-                          setDropdownValue={(val) => {
-                            setCustomHeaders((prev) => {
-                              const newHeaders = [...prev, { key: val, value: '' }];
-                              setValue(
-                                'pluginData.customHeaders',
-                                '{\n' +
-                                  newHeaders
-                                    .map((item) => `"${item.key}":"${item.value}"`)
-                                    .join(',\n') +
-                                  '\n}'
-                              );
-                              return newHeaders;
-                            });
-                            setUpdateTrigger((prev) => !prev);
-                          }}
                           placeholder={t('common:core.module.http.Add props')}
                           value={''}
-                          variables={leftVariables}
                           updateTrigger={updateTrigger}
                           onBlur={(val) => {
                             if (!val) return;