Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 85a11d08 by heheer Committed by GitHub
Options

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

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

* fix type

* chore: code

* code
parent a7569037
Showing with 407 additions and 258 deletions
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
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment