balibabu commited on
Commit
eadfd19
·
1 Parent(s): 19e6d59

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

Browse files

### 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 CHANGED
@@ -31,7 +31,7 @@ export default defineConfig({
31
  proxy: [
32
  {
33
  context: ['/api', '/v1'],
34
- target: 'http://127.0.0.1:9380/',
35
  changeOrigin: true,
36
  ws: true,
37
  logger: console,
 
31
  proxy: [
32
  {
33
  context: ['/api', '/v1'],
34
+ target: 'http://127.0.0.1:9456/',
35
  changeOrigin: true,
36
  ws: true,
37
  logger: console,
web/src/locales/en.ts CHANGED
@@ -1025,9 +1025,12 @@ The above is the content you need to summarize.`,
1025
  method: 'Method',
1026
  timeout: 'Timeout',
1027
  headers: 'Headers',
1028
- cleanHtml: 'Clean html',
 
 
1029
  reference: 'Reference',
1030
  input: 'Input',
 
1031
  },
1032
  footer: {
1033
  profile: 'All rights reserved @ React',
 
1025
  method: 'Method',
1026
  timeout: 'Timeout',
1027
  headers: 'Headers',
1028
+ cleanHtml: 'Clean HTML',
1029
+ cleanHtmlTip:
1030
+ 'If the response is HTML formatted and only the primary content wanted, please toggle it on.',
1031
  reference: 'Reference',
1032
  input: 'Input',
1033
+ parameter: 'Parameter',
1034
  },
1035
  footer: {
1036
  profile: 'All rights reserved @ React',
web/src/locales/zh-traditional.ts CHANGED
@@ -974,9 +974,11 @@ export default {
974
  method: '方法',
975
  timeout: '超時',
976
  headers: '請求頭',
977
- cleanHtml: '清除 html',
 
978
  reference: '引用',
979
  input: '輸入',
 
980
  },
981
  footer: {
982
  profile: '“保留所有權利 @ react”',
 
974
  method: '方法',
975
  timeout: '超時',
976
  headers: '請求頭',
977
+ cleanHtml: '清除 HTML',
978
+ cleanHtmlTip: '如果回應是 HTML 格式並且只需要主要內容,請將其開啟。',
979
  reference: '引用',
980
  input: '輸入',
981
+ parameter: '參數',
982
  },
983
  footer: {
984
  profile: '“保留所有權利 @ react”',
web/src/locales/zh.ts CHANGED
@@ -994,9 +994,11 @@ export default {
994
  method: '方法',
995
  timeout: '超时',
996
  headers: '请求头',
997
- cleanHtml: '清除 html',
 
998
  reference: '引用',
999
  input: '输入',
 
1000
  },
1001
  footer: {
1002
  profile: 'All rights reserved @ React',
 
994
  method: '方法',
995
  timeout: '超时',
996
  headers: '请求头',
997
+ cleanHtml: '清除 HTML',
998
+ cleanHtmlTip: '如果响应是 HTML 格式且只需要主要内容,请将其打开。',
999
  reference: '引用',
1000
  input: '输入',
1001
+ parameter: '参数',
1002
  },
1003
  footer: {
1004
  profile: 'All rights reserved @ React',
web/src/pages/flow/form/invoke-form/dynamic-variables.tsx CHANGED
@@ -1,7 +1,7 @@
1
  import { EditableCell, EditableRow } from '@/components/editable-cell';
2
  import { useTranslate } from '@/hooks/common-hooks';
3
  import { DeleteOutlined } from '@ant-design/icons';
4
- import { Button, Flex, Input, Select, Table, TableProps } from 'antd';
5
  import { useBuildComponentIdSelectOptions } from '../../hooks';
6
  import { IInvokeVariable } from '../../interface';
7
  import { useHandleOperateParameters } from './hooks';
@@ -20,7 +20,7 @@ const components = {
20
  },
21
  };
22
 
23
- const DynamicVariables = ({ nodeId }: IProps) => {
24
  const { t } = useTranslate('flow');
25
 
26
  const options = useBuildComponentIdSelectOptions(nodeId);
@@ -95,24 +95,35 @@ const DynamicVariables = ({ nodeId }: IProps) => {
95
  ];
96
 
97
  return (
98
- <section>
99
- <Flex justify="end">
100
- <Button size="small" onClick={handleAdd}>
101
- {t('add')}
102
- </Button>
103
- </Flex>
104
- <Table
105
- dataSource={dataSource}
106
- columns={columns}
107
- rowKey={'id'}
108
- className={styles.variableTable}
109
- components={components}
110
- rowClassName={() => styles.editableRow}
111
- scroll={{ x: true }}
112
- bordered
113
- />
114
- </section>
 
 
 
 
 
 
 
 
 
 
 
115
  );
116
  };
117
 
118
- export default DynamicVariables;
 
1
  import { EditableCell, EditableRow } from '@/components/editable-cell';
2
  import { useTranslate } from '@/hooks/common-hooks';
3
  import { DeleteOutlined } from '@ant-design/icons';
4
+ import { Button, Collapse, Flex, Input, Select, Table, TableProps } from 'antd';
5
  import { useBuildComponentIdSelectOptions } from '../../hooks';
6
  import { IInvokeVariable } from '../../interface';
7
  import { useHandleOperateParameters } from './hooks';
 
20
  },
21
  };
22
 
23
+ const DynamicVariablesForm = ({ nodeId }: IProps) => {
24
  const { t } = useTranslate('flow');
25
 
26
  const options = useBuildComponentIdSelectOptions(nodeId);
 
95
  ];
96
 
97
  return (
98
+ <Collapse
99
+ className={styles.dynamicParameterVariable}
100
+ defaultActiveKey={['1']}
101
+ items={[
102
+ {
103
+ key: '1',
104
+ label: (
105
+ <Flex justify={'space-between'}>
106
+ <span className={styles.title}>{t('parameter')}</span>
107
+ <Button size="small" onClick={handleAdd}>
108
+ {t('add')}
109
+ </Button>
110
+ </Flex>
111
+ ),
112
+ children: (
113
+ <Table
114
+ dataSource={dataSource}
115
+ columns={columns}
116
+ rowKey={'id'}
117
+ components={components}
118
+ rowClassName={() => styles.editableRow}
119
+ scroll={{ x: true }}
120
+ bordered
121
+ />
122
+ ),
123
+ },
124
+ ]}
125
+ />
126
  );
127
  };
128
 
129
+ export default DynamicVariablesForm;
web/src/pages/flow/form/invoke-form/hooks.ts CHANGED
@@ -1,5 +1,10 @@
1
  import get from 'lodash/get';
2
- import { ChangeEventHandler, useCallback, useMemo } from 'react';
 
 
 
 
 
3
  import { v4 as uuid } from 'uuid';
4
  import { IGenerateParameter, IInvokeVariable } from '../../interface';
5
  import useGraphStore from '../../store';
@@ -50,19 +55,24 @@ export const useHandleOperateParameters = (nodeId: string) => {
50
  [updateNodeForm, nodeId, dataSource],
51
  );
52
 
53
- const handleAdd = useCallback(() => {
54
- updateNodeForm(nodeId, {
55
- variables: [
56
- ...dataSource,
57
- {
58
- id: uuid(),
59
- key: '',
60
- component_id: undefined,
61
- value: '',
62
- },
63
- ],
64
- });
65
- }, [dataSource, nodeId, updateNodeForm]);
 
 
 
 
 
66
 
67
  const handleSave = (row: IGenerateParameter) => {
68
  const newData = [...dataSource];
 
1
  import get from 'lodash/get';
2
+ import {
3
+ ChangeEventHandler,
4
+ MouseEventHandler,
5
+ useCallback,
6
+ useMemo,
7
+ } from 'react';
8
  import { v4 as uuid } from 'uuid';
9
  import { IGenerateParameter, IInvokeVariable } from '../../interface';
10
  import useGraphStore from '../../store';
 
55
  [updateNodeForm, nodeId, dataSource],
56
  );
57
 
58
+ const handleAdd: MouseEventHandler = useCallback(
59
+ (e) => {
60
+ e.preventDefault();
61
+ e.stopPropagation();
62
+ updateNodeForm(nodeId, {
63
+ variables: [
64
+ ...dataSource,
65
+ {
66
+ id: uuid(),
67
+ key: '',
68
+ component_id: undefined,
69
+ value: '',
70
+ },
71
+ ],
72
+ });
73
+ },
74
+ [dataSource, nodeId, updateNodeForm],
75
+ );
76
 
77
  const handleSave = (row: IGenerateParameter) => {
78
  const newData = [...dataSource];
web/src/pages/flow/form/invoke-form/index.less CHANGED
@@ -1,6 +1,3 @@
1
- .variableTable {
2
- margin-top: 14px;
3
- }
4
  .editableRow {
5
  :global(.editable-cell) {
6
  position: relative;
@@ -19,3 +16,29 @@
19
  }
20
  }
21
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  .editableRow {
2
  :global(.editable-cell) {
3
  position: relative;
 
16
  }
17
  }
18
  }
19
+
20
+ .dynamicParameterVariable {
21
+ background-color: #ebe9e9;
22
+ :global(.ant-collapse-content) {
23
+ background-color: #f6f6f6;
24
+ }
25
+ :global(.ant-collapse-content-box) {
26
+ padding: 0 !important;
27
+ }
28
+ margin-bottom: 20px;
29
+ .title {
30
+ font-weight: 600;
31
+ font-size: 16px;
32
+ }
33
+ .variableType {
34
+ width: 30%;
35
+ }
36
+ .variableValue {
37
+ flex: 1;
38
+ }
39
+
40
+ .addButton {
41
+ color: rgb(22, 119, 255);
42
+ font-weight: 600;
43
+ }
44
+ }
web/src/pages/flow/form/invoke-form/index.tsx CHANGED
@@ -3,7 +3,7 @@ import { Form, Input, InputNumber, Select, Space, Switch } from 'antd';
3
  import { useTranslation } from 'react-i18next';
4
  import { useSetLlmSetting } from '../../hooks';
5
  import { IOperatorForm } from '../../interface';
6
- import DynamicVariables from './dynamic-variables';
7
 
8
  enum Method {
9
  GET = 'GET',
@@ -63,10 +63,14 @@ const InvokeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
63
  <Form.Item name={'proxy'} label={t('flow.proxy')}>
64
  <Input />
65
  </Form.Item>
66
- <Form.Item name={'clean_html'} label={t('flow.cleanHtml')}>
 
 
 
 
67
  <Switch />
68
  </Form.Item>
69
- <DynamicVariables nodeId={node?.id}></DynamicVariables>
70
  </Form>
71
  </>
72
  );
 
3
  import { useTranslation } from 'react-i18next';
4
  import { useSetLlmSetting } from '../../hooks';
5
  import { IOperatorForm } from '../../interface';
6
+ import DynamicVariablesForm from './dynamic-variables';
7
 
8
  enum Method {
9
  GET = 'GET',
 
63
  <Form.Item name={'proxy'} label={t('flow.proxy')}>
64
  <Input />
65
  </Form.Item>
66
+ <Form.Item
67
+ name={'clean_html'}
68
+ label={t('flow.cleanHtml')}
69
+ tooltip={t('flow.cleanHtmlTip')}
70
+ >
71
  <Switch />
72
  </Form.Item>
73
+ <DynamicVariablesForm nodeId={node?.id}></DynamicVariablesForm>
74
  </Form>
75
  </>
76
  );