From 3ed096fd3f0b8178d4f187b5ee2c2f28cfd91286 Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 29 Oct 2024 16:39:56 +0800 Subject: [PATCH] feat: Add InvokeNode #1908 (#3081) ### What problem does this PR solve? feat: Add InvokeNode #1908 ### Type of change - [ ] Bug Fix (non-breaking change which fixes an issue) - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/editable-cell.tsx | 4 +- web/src/locales/en.ts | 1 + web/src/locales/zh-traditional.ts | 1 + web/src/locales/zh.ts | 1 + web/src/pages/flow/canvas/index.tsx | 2 + .../pages/flow/canvas/node/invoke-node.tsx | 56 +++++++++++++++++++ web/src/pages/flow/constant.tsx | 3 +- web/src/pages/flow/flow-drawer/index.tsx | 6 +- .../form/invoke-form/dynamic-variables.tsx | 1 - web/src/pages/flow/form/invoke-form/index.tsx | 5 +- 10 files changed, 72 insertions(+), 8 deletions(-) create mode 100644 web/src/pages/flow/canvas/node/invoke-node.tsx diff --git a/web/src/components/editable-cell.tsx b/web/src/components/editable-cell.tsx index 03bf88317..f8e367ff7 100644 --- a/web/src/components/editable-cell.tsx +++ b/web/src/components/editable-cell.tsx @@ -78,7 +78,7 @@ export const EditableCell: React.FC = ({ if (editable) { childNode = editing ? ( = ({ // style={{ paddingRight: 24 }} onClick={toggleEdit} > - + {children} diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index e47823b91..b1e2fcab9 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -1023,6 +1023,7 @@ The above is the content you need to summarize.`, method: 'Method', timeout: 'Timeout', headers: 'Headers', + cleanHtml: 'Clean html', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index cee0e361d..8afd6c5f5 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -972,6 +972,7 @@ export default { method: '方法', timeout: '超時', headers: '請求頭', + cleanHtml: '清除 html', }, footer: { profile: '“保留所有權利 @ react”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index 3e12ab833..10ac06912 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -992,6 +992,7 @@ export default { method: '方法', timeout: '超时', headers: '请求头', + cleanHtml: '清除 html', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx index 8d6751c07..eb45b1c0d 100644 --- a/web/src/pages/flow/canvas/index.tsx +++ b/web/src/pages/flow/canvas/index.tsx @@ -23,6 +23,7 @@ import { RagNode } from './node'; import { BeginNode } from './node/begin-node'; import { CategorizeNode } from './node/categorize-node'; import { GenerateNode } from './node/generate-node'; +import { InvokeNode } from './node/invoke-node'; import { KeywordNode } from './node/keyword-node'; import { LogicNode } from './node/logic-node'; import { MessageNode } from './node/message-node'; @@ -45,6 +46,7 @@ const nodeTypes = { messageNode: MessageNode, rewriteNode: RewriteNode, keywordNode: KeywordNode, + invokeNode: InvokeNode, }; const edgeTypes = { diff --git a/web/src/pages/flow/canvas/node/invoke-node.tsx b/web/src/pages/flow/canvas/node/invoke-node.tsx new file mode 100644 index 000000000..c69ccb35b --- /dev/null +++ b/web/src/pages/flow/canvas/node/invoke-node.tsx @@ -0,0 +1,56 @@ +import { Flex } from 'antd'; +import classNames from 'classnames'; +import { get } from 'lodash'; +import { useTranslation } from 'react-i18next'; +import { Handle, NodeProps, Position } from 'reactflow'; +import { NodeData } from '../../interface'; +import { LeftHandleStyle, RightHandleStyle } from './handle-icon'; +import styles from './index.less'; +import NodeHeader from './node-header'; +import NodePopover from './popover'; + +export function InvokeNode({ + id, + data, + isConnectable = true, + selected, +}: NodeProps) { + const { t } = useTranslation(); + const url = get(data, 'form.url'); + return ( + +
+ + + + +
{t('flow.url')}
+
{url}
+ +
+ + ); +} diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx index 3329cd7c7..d6d711e5e 100644 --- a/web/src/pages/flow/constant.tsx +++ b/web/src/pages/flow/constant.tsx @@ -528,6 +528,7 @@ export const initialInvokeValues = { "Connection": "keep-alive" }`, proxy: 'http://', + clean_html: false, }; export const CategorizeAnchorPointPositions = [ @@ -643,7 +644,7 @@ export const NodeMap = { [Operator.TuShare]: 'ragNode', [Operator.Note]: 'noteNode', [Operator.Crawler]: 'ragNode', - [Operator.Invoke]: 'ragNode', + [Operator.Invoke]: 'invokeNode', }; export const LanguageOptions = [ diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx index 979e6e44a..4304146f2 100644 --- a/web/src/pages/flow/flow-drawer/index.tsx +++ b/web/src/pages/flow/flow-drawer/index.tsx @@ -76,8 +76,8 @@ const FormMap = { [Operator.TuShare]: TuShareForm, [Operator.Crawler]: CrawlerForm, [Operator.Invoke]: InvokeForm, - [Operator.Concentrator]: <>, - [Operator.Note]: <>, + [Operator.Concentrator]: () => <>, + [Operator.Note]: () => <>, }; const EmptyContent = () =>
; @@ -135,7 +135,7 @@ const FlowDrawer = ({ open={visible} getContainer={false} mask={false} - width={470} + width={500} closeIcon={null} >
diff --git a/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx b/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx index edb6ed9b0..beb09662f 100644 --- a/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx +++ b/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx @@ -38,7 +38,6 @@ const DynamicVariables = ({ nodeId }: IProps) => { title: t('key'), dataIndex: 'key', key: 'key', - // width: 40, onCell: (record: IInvokeVariable) => ({ record, editable: true, diff --git a/web/src/pages/flow/form/invoke-form/index.tsx b/web/src/pages/flow/form/invoke-form/index.tsx index cca759416..a3ea7205e 100644 --- a/web/src/pages/flow/form/invoke-form/index.tsx +++ b/web/src/pages/flow/form/invoke-form/index.tsx @@ -1,5 +1,5 @@ import Editor from '@monaco-editor/react'; -import { Form, Input, InputNumber, Select, Space } from 'antd'; +import { Form, Input, InputNumber, Select, Space, Switch } from 'antd'; import { useTranslation } from 'react-i18next'; import { useSetLlmSetting } from '../../hooks'; import { IOperatorForm } from '../../interface'; @@ -63,6 +63,9 @@ const InvokeForm = ({ onValuesChange, form, node }: IOperatorForm) => { + + +