From d6233cd7b10562e4ee22c49d4c3defe52a2e1fd7 Mon Sep 17 00:00:00 2001 From: heheer Date: Wed, 4 Sep 2024 13:37:29 +0800 Subject: [PATCH] fix: add http params focus & ui (#2611) --- .../components/common/Tabs/LightRowTabs.tsx | 5 +- .../common/Textarea/PromptEditor/Editor.tsx | 1 + .../VariableLabelPickerPlugin/index.tsx | 5 +- packages/web/i18n/en/common.json | 3 + packages/web/i18n/en/workflow.json | 3 - packages/web/i18n/zh/common.json | 3 + packages/web/i18n/zh/workflow.json | 3 - .../Flow/nodes/NodeHttp/index.tsx | 91 ++++++++----------- 8 files changed, 52 insertions(+), 62 deletions(-) diff --git a/packages/web/components/common/Tabs/LightRowTabs.tsx b/packages/web/components/common/Tabs/LightRowTabs.tsx index 1a9ca5ffadc3..45f7859e13f8 100644 --- a/packages/web/components/common/Tabs/LightRowTabs.tsx +++ b/packages/web/components/common/Tabs/LightRowTabs.tsx @@ -10,6 +10,7 @@ type Props = Omit & { size?: 'sm' | 'md' | 'lg'; inlineStyles?: FlexProps; activeColor?: string; + defaultColor?: string; onChange: (value: ValueType) => void; }; @@ -18,6 +19,7 @@ const LightRowTabs = ({ size = 'md', value, activeColor = 'primary.600', + defaultColor = 'transparent', onChange, inlineStyles, ...props @@ -63,7 +65,8 @@ const LightRowTabs = ({ py={sizeMap.inlineP} alignItems={'center'} justifyContent={'center'} - borderBottom={'2px solid transparent'} + borderBottom={'2px solid'} + borderColor={defaultColor} px={3} whiteSpace={'nowrap'} {...(value === item.value diff --git a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx index 053f04b2255a..c4064ca41e8a 100644 --- a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx +++ b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx @@ -106,6 +106,7 @@ export default function Editor({ cursor={'text'} color={'myGray.700'} bg={focus ? 'white' : bg} + borderRadius={'md'} > { + menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp }) => { if (anchorElementRef.current == null) { return null; } diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json index 644fab1f53a5..5c0ce82526ce 100644 --- a/packages/web/i18n/en/common.json +++ b/packages/web/i18n/en/common.json @@ -858,6 +858,7 @@ }, "http": { "Add props": "Add parameters", + "Add props_and_tips": "Add parameter, enter \"/\" to call variable list", "AppId": "Application ID", "AppSecret": "AppSecret", "ChatId": "Current chat ID", @@ -866,8 +867,10 @@ "Key already exists": "Key already exists", "Key cannot be empty": "Parameter name cannot be empty", "Props name": "Parameter name", + "Props name_and_tips": "Parameter name, enter \"/\" to call variables list", "Props tip": "Can set HTTP request related parameters\nCan use / to call variables, currently available variables:\n{{variable}}", "Props value": "Parameter value", + "Props value_and_tips": "Parameter value, enter \"/\" to call variables list", "ResponseChatItemId": "AI response ID", "Url and params have been split": "Path parameters have been automatically added to Params", "curl import": "curl import", diff --git a/packages/web/i18n/en/workflow.json b/packages/web/i18n/en/workflow.json index 6fba464dc1e7..a9e3f36b272b 100644 --- a/packages/web/i18n/en/workflow.json +++ b/packages/web/i18n/en/workflow.json @@ -58,9 +58,6 @@ "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", diff --git a/packages/web/i18n/zh/common.json b/packages/web/i18n/zh/common.json index 8a86bd9dc35a..16c679215746 100644 --- a/packages/web/i18n/zh/common.json +++ b/packages/web/i18n/zh/common.json @@ -858,6 +858,7 @@ }, "http": { "Add props": "添加参数", + "Add props_and_tips": "添加参数，输入“/”唤起变量列表", "AppId": "应用 ID", "AppSecret": "AppSecret", "ChatId": "当前对话 ID", @@ -866,8 +867,10 @@ "Key already exists": "Key 已经存在", "Key cannot be empty": "参数名不能为空", "Props name": "参数名", + "Props name_and_tips": "参数名，输入”/“唤起变量列表", "Props tip": "可以设置 HTTP 请求的相关参数\n可通过输入 / 来调用变量，当前可使用变量：\n{{variable}}", "Props value": "参数值", + "Props value_and_tips": "参数值，输入“/”唤起变量列表", "ResponseChatItemId": "AI 回复的 ID", "Url and params have been split": "路径参数已被自动加入 Params 中", "curl import": "cURL 导入", diff --git a/packages/web/i18n/zh/workflow.json b/packages/web/i18n/zh/workflow.json index a5ee946e373f..476823b2e973 100644 --- a/packages/web/i18n/zh/workflow.json +++ b/packages/web/i18n/zh/workflow.json @@ -58,9 +58,6 @@ "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请求错误信息，成功时返回空", diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx index 2db01bfabe83..2ad8551e5329 100644 --- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx +++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx @@ -289,7 +289,8 @@ export function RenderHttpProps({ width={'100%'} - mb={selectedTab === TabEnum.body ? 1 : 2} + mb={2} + defaultColor={'myGray.250'} list={[ { label: , value: TabEnum.params }, ...(!['GET', 'DELETE'].includes(requestMethods) @@ -298,7 +299,8 @@ export function RenderHttpProps({ label: ( Body - {jsonBody?.value && ✅} + {(jsonBody?.value || !!formBody?.value?.length) && + contentType?.value !== ContentTypes.none && ✅} ), value: TabEnum.body @@ -313,7 +315,7 @@ export function RenderHttpProps({ value={selectedTab} onChange={setSelectedTab} /> - + {params && headers && jsonBody && @@ -494,7 +496,13 @@ const RenderForm = ({ const Render = useMemo(() => { return ( - + @@ -508,16 +516,24 @@ const RenderForm = ({ - {list.map((item, index) => ( + {[...list, { key: '', value: '', label: '' }].map((item, index) => ( - ))} - - - -
+ { handleKeyChange(index, val); + if (index === list.length) { + handleAddNewProps(val); + setUpdateTrigger((prev) => !prev); + } }} updateTrigger={updateTrigger} /> @@ -525,7 +541,11 @@ const RenderForm = ({ - { - setList((prevlist) => prevlist.filter((val) => val.key !== item.key)); - setShouldUpdateNode(true); - }} - /> + {index !== list.length && ( + { + setList((prevlist) => prevlist.filter((val) => val.key !== item.key)); + setShouldUpdateNode(true); + }} + /> + )}
- { - handleAddNewProps(val); - setUpdateTrigger((prev) => !prev); - }} - /> - - - - -
@@ -662,19 +664,6 @@ const RenderBody = ({ ))} - {typeInput?.value === ContentTypes.none && ( - - {t('workflow:http.body_none')} - - )} {(typeInput?.value === ContentTypes.formData || typeInput?.value === ContentTypes.xWwwFormUrlencoded) && (