fix: add http params focus & ui (#2611)

packages/web/components/common/Tabs/LightRowTabs.tsx

@@ -10,6 +10,7 @@ type Props<ValueType = string> = Omit<GridProps, 'onChange'> & {
   size?: 'sm' | 'md' | 'lg';
   inlineStyles?: FlexProps;
   activeColor?: string;
+  defaultColor?: string;
   onChange: (value: ValueType) => void;
 };
 
@@ -18,6 +19,7 @@ const LightRowTabs = <ValueType = string,>({
   size = 'md',
   value,
   activeColor = 'primary.600',
+  defaultColor = 'transparent',
   onChange,
   inlineStyles,
   ...props
@@ -63,7 +65,8 @@ const LightRowTabs = <ValueType = string,>({
             py={sizeMap.inlineP}
             alignItems={'center'}
             justifyContent={'center'}
-            borderBottom={'2px solid transparent'}
+            borderBottom={'2px solid'}
+            borderColor={defaultColor}
             px={3}
             whiteSpace={'nowrap'}
             {...(value === item.value

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'}
     >
       <LexicalComposer initialConfig={initialConfig} key={key}>
         <PlainTextPlugin

packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx

@@ -77,10 +77,7 @@ export default function VariableLabelPickerPlugin({
       onSelectOption={onSelectOption}
       triggerFn={checkForTriggerMatch}
       options={variableFilter(variables, queryString || '')}
-      menuRenderFn={(
-        anchorElementRef,
-        { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }
-      ) => {
+      menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp }) => {
         if (anchorElementRef.current == null) {
           return null;
         }

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",

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",

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 导入",

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

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

@@ -289,7 +289,8 @@ export function RenderHttpProps({
         </Flex>
         <LightRowTabs<TabEnum>
           width={'100%'}
-          mb={selectedTab === TabEnum.body ? 1 : 2}
+          mb={2}
+          defaultColor={'myGray.250'}
           list={[
             { label: <RenderPropsItem text="Params" num={paramsLength} />, value: TabEnum.params },
             ...(!['GET', 'DELETE'].includes(requestMethods)
@@ -298,7 +299,8 @@ export function RenderHttpProps({
                     label: (
                       <Flex alignItems={'center'}>
                         Body
-                        {jsonBody?.value && <Box ml={1}>✅</Box>}
+                        {(jsonBody?.value || !!formBody?.value?.length) &&
+                          contentType?.value !== ContentTypes.none && <Box ml={1}>✅</Box>}
                       </Flex>
                     ),
                     value: TabEnum.body
@@ -313,7 +315,7 @@ export function RenderHttpProps({
           value={selectedTab}
           onChange={setSelectedTab}
         />
-        <Box bg={'white'} borderRadius={'md'} minW={'560px'}>
+        <Box minW={'560px'}>
           {params &&
             headers &&
             jsonBody &&
@@ -494,7 +496,13 @@ const RenderForm = ({
 
   const Render = useMemo(() => {
     return (
-      <Box borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom={'none'}>
+      <Box
+        borderRadius={'md'}
+        overflow={'hidden'}
+        borderWidth={'1px'}
+        borderBottom={'none'}
+        bg={'white'}
+      >
         <TableContainer overflowY={'visible'} overflowX={'unset'}>
           <Table>
             <Thead>
@@ -508,16 +516,24 @@ const RenderForm = ({
               </Tr>
             </Thead>
             <Tbody>
-              {list.map((item, index) => (
+              {[...list, { key: '', value: '', label: '' }].map((item, index) => (
                 <Tr key={`${input.key}${index}`}>
-                  <Td p={0} w={'50%'}>
+                  <Td p={0} w={'50%'} borderRight={'1px solid'} borderColor={'myGray.200'}>
                     <HttpInput
-                      placeholder={t('common:core.module.http.Props name')}
+                      placeholder={
+                        index !== list.length
+                          ? t('common:core.module.http.Props name_and_tips')
+                          : t('common:core.module.http.Add props_and_tips')
+                      }
                       value={item.key}
                       variableLabels={variables}
                       variables={variables}
                       onBlur={(val) => {
                         handleKeyChange(index, val);
+                        if (index === list.length) {
+                          handleAddNewProps(val);
+                          setUpdateTrigger((prev) => !prev);
+                        }
                       }}
                       updateTrigger={updateTrigger}
                     />
@@ -525,7 +541,11 @@ const RenderForm = ({
                   <Td p={0} w={'50%'}>
                     <Box display={'flex'} alignItems={'center'}>
                       <HttpInput
-                        placeholder={t('common:core.module.http.Props value')}
+                        placeholder={
+                          index !== list.length
+                            ? t('common:core.module.http.Props value_and_tips')
+                            : ''
+                        }
                         value={item.value}
                         variables={variables}
                         variableLabels={variables}
@@ -538,40 +558,22 @@ const RenderForm = ({
                           setShouldUpdateNode(true);
                         }}
                       />
-                      <MyIcon
-                        name={'delete'}
-                        cursor={'pointer'}
-                        _hover={{ color: 'red.600' }}
-                        w={'14px'}
-                        onClick={() => {
-                          setList((prevlist) => prevlist.filter((val) => val.key !== item.key));
-                          setShouldUpdateNode(true);
-                        }}
-                      />
+                      {index !== list.length && (
+                        <MyIcon
+                          name={'delete'}
+                          cursor={'pointer'}
+                          _hover={{ color: 'red.600' }}
+                          w={'14px'}
+                          onClick={() => {
+                            setList((prevlist) => prevlist.filter((val) => val.key !== item.key));
+                            setShouldUpdateNode(true);
+                          }}
+                        />
+                      )}
                     </Box>
                   </Td>
                 </Tr>
               ))}
-              <Tr>
-                <Td p={0} w={'50%'}>
-                  <HttpInput
-                    placeholder={t('common:core.module.http.Add props')}
-                    value={''}
-                    variableLabels={variables}
-                    variables={variables}
-                    updateTrigger={updateTrigger}
-                    onBlur={(val) => {
-                      handleAddNewProps(val);
-                      setUpdateTrigger((prev) => !prev);
-                    }}
-                  />
-                </Td>
-                <Td p={0} w={'50%'}>
-                  <Box display={'flex'} alignItems={'center'}>
-                    <HttpInput />
-                  </Box>
-                </Td>
-              </Tr>
             </Tbody>
           </Table>
         </TableContainer>
@@ -662,19 +664,6 @@ const RenderBody = ({
             </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} />