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/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请求错误信息，成功时返回空",