feat: Add tooltip to clean_html item #2908 (#3183)

### What problem does this PR solve?

feat: Add tooltip to clean_html item #2908

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/.umirc.ts

@@ -31,7 +31,7 @@ export default defineConfig({
   proxy: [
     {
       context: ['/api', '/v1'],
-      target: 'http://127.0.0.1:9380/',
+      target: 'http://127.0.0.1:9456/',
       changeOrigin: true,
       ws: true,
       logger: console,

web/src/locales/en.ts

@@ -1025,9 +1025,12 @@ The above is the content you need to summarize.`,
       method: 'Method',
       timeout: 'Timeout',
       headers: 'Headers',
-      cleanHtml: 'Clean html',
+      cleanHtml: 'Clean HTML',
+      cleanHtmlTip:
+        'If the response is HTML formatted and only the primary content wanted, please toggle it on.',
       reference: 'Reference',
       input: 'Input',
+      parameter: 'Parameter',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -974,9 +974,11 @@ export default {
       method: '方法',
       timeout: '超時',
       headers: '請求頭',
-      cleanHtml: '清除 html',
+      cleanHtml: '清除 HTML',
+      cleanHtmlTip: '如果回應是 HTML 格式並且只需要主要內容，請將其開啟。',
       reference: '引用',
       input: '輸入',
+      parameter: '參數',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -994,9 +994,11 @@ export default {
       method: '方法',
       timeout: '超时',
       headers: '请求头',
-      cleanHtml: '清除 html',
+      cleanHtml: '清除 HTML',
+      cleanHtmlTip: '如果响应是 HTML 格式且只需要主要内容，请将其打开。',
       reference: '引用',
       input: '输入',
+      parameter: '参数',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/form/invoke-form/dynamic-variables.tsx

@@ -1,7 +1,7 @@
 import { EditableCell, EditableRow } from '@/components/editable-cell';
 import { useTranslate } from '@/hooks/common-hooks';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Button, Flex, Input, Select, Table, TableProps } from 'antd';
+import { Button, Collapse, Flex, Input, Select, Table, TableProps } from 'antd';
 import { useBuildComponentIdSelectOptions } from '../../hooks';
 import { IInvokeVariable } from '../../interface';
 import { useHandleOperateParameters } from './hooks';
@@ -20,7 +20,7 @@ const components = {
   },
 };
 
-const DynamicVariables = ({ nodeId }: IProps) => {
+const DynamicVariablesForm = ({ nodeId }: IProps) => {
   const { t } = useTranslate('flow');
 
   const options = useBuildComponentIdSelectOptions(nodeId);
@@ -95,24 +95,35 @@ const DynamicVariables = ({ nodeId }: IProps) => {
   ];
 
   return (
-    <section>
-      <Flex justify="end">
-        <Button size="small" onClick={handleAdd}>
-          {t('add')}
-        </Button>
-      </Flex>
-      <Table
-        dataSource={dataSource}
-        columns={columns}
-        rowKey={'id'}
-        className={styles.variableTable}
-        components={components}
-        rowClassName={() => styles.editableRow}
-        scroll={{ x: true }}
-        bordered
-      />
-    </section>
+    <Collapse
+      className={styles.dynamicParameterVariable}
+      defaultActiveKey={['1']}
+      items={[
+        {
+          key: '1',
+          label: (
+            <Flex justify={'space-between'}>
+              <span className={styles.title}>{t('parameter')}</span>
+              <Button size="small" onClick={handleAdd}>
+                {t('add')}
+              </Button>
+            </Flex>
+          ),
+          children: (
+            <Table
+              dataSource={dataSource}
+              columns={columns}
+              rowKey={'id'}
+              components={components}
+              rowClassName={() => styles.editableRow}
+              scroll={{ x: true }}
+              bordered
+            />
+          ),
+        },
+      ]}
+    />
   );
 };
 
-export default DynamicVariables;
+export default DynamicVariablesForm;

web/src/pages/flow/form/invoke-form/hooks.ts

@@ -1,5 +1,10 @@
 import get from 'lodash/get';
-import { ChangeEventHandler, useCallback, useMemo } from 'react';
+import {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+} from 'react';
 import { v4 as uuid } from 'uuid';
 import { IGenerateParameter, IInvokeVariable } from '../../interface';
 import useGraphStore from '../../store';
@@ -50,19 +55,24 @@ export const useHandleOperateParameters = (nodeId: string) => {
     [updateNodeForm, nodeId, dataSource],
   );
 
-  const handleAdd = useCallback(() => {
-    updateNodeForm(nodeId, {
-      variables: [
-        ...dataSource,
-        {
-          id: uuid(),
-          key: '',
-          component_id: undefined,
-          value: '',
-        },
-      ],
-    });
-  }, [dataSource, nodeId, updateNodeForm]);
+  const handleAdd: MouseEventHandler = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      updateNodeForm(nodeId, {
+        variables: [
+          ...dataSource,
+          {
+            id: uuid(),
+            key: '',
+            component_id: undefined,
+            value: '',
+          },
+        ],
+      });
+    },
+    [dataSource, nodeId, updateNodeForm],
+  );
 
   const handleSave = (row: IGenerateParameter) => {
     const newData = [...dataSource];

web/src/pages/flow/form/invoke-form/index.less

@@ -1,6 +1,3 @@
-.variableTable {
-  margin-top: 14px;
-}
 .editableRow {
   :global(.editable-cell) {
     position: relative;
@@ -19,3 +16,29 @@
     }
   }
 }
+
+.dynamicParameterVariable {
+  background-color: #ebe9e9;
+  :global(.ant-collapse-content) {
+    background-color: #f6f6f6;
+  }
+  :global(.ant-collapse-content-box) {
+    padding: 0 !important;
+  }
+  margin-bottom: 20px;
+  .title {
+    font-weight: 600;
+    font-size: 16px;
+  }
+  .variableType {
+    width: 30%;
+  }
+  .variableValue {
+    flex: 1;
+  }
+
+  .addButton {
+    color: rgb(22, 119, 255);
+    font-weight: 600;
+  }
+}

web/src/pages/flow/form/invoke-form/index.tsx

@@ -3,7 +3,7 @@ import { Form, Input, InputNumber, Select, Space, Switch } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useSetLlmSetting } from '../../hooks';
 import { IOperatorForm } from '../../interface';
-import DynamicVariables from './dynamic-variables';
+import DynamicVariablesForm from './dynamic-variables';
 
 enum Method {
   GET = 'GET',
@@ -63,10 +63,14 @@ const InvokeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
         <Form.Item name={'proxy'} label={t('flow.proxy')}>
           <Input />
         </Form.Item>
-        <Form.Item name={'clean_html'} label={t('flow.cleanHtml')}>
+        <Form.Item
+          name={'clean_html'}
+          label={t('flow.cleanHtml')}
+          tooltip={t('flow.cleanHtmlTip')}
+        >
           <Switch />
         </Form.Item>
-        <DynamicVariables nodeId={node?.id}></DynamicVariables>
+        <DynamicVariablesForm nodeId={node?.id}></DynamicVariablesForm>
       </Form>
     </>
   );