From e904c134e7d02e1e1e1678ff4d9d2b5bf735cc5f Mon Sep 17 00:00:00 2001 From: balibabu Date: Wed, 9 Oct 2024 19:39:04 +0800 Subject: [PATCH] feat: Add a note node to the agent canvas #2767 (#2768) ### What problem does this PR solve? feat: Add a note node to the agent canvas #2767 ### 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/src/assets/svg/note.svg | 9 +++ web/src/locales/en.ts | 3 + web/src/locales/zh-traditional.ts | 3 + web/src/locales/zh.ts | 3 + web/src/pages/flow/canvas/index.tsx | 23 +++----- web/src/pages/flow/canvas/node/index.less | 27 +++++++-- web/src/pages/flow/canvas/node/index.tsx | 15 +---- web/src/pages/flow/canvas/node/note-node.tsx | 46 +++++++++++++++ web/src/pages/flow/constant.tsx | 12 ++++ web/src/pages/flow/flow-drawer/index.tsx | 56 +++++++++---------- web/src/pages/flow/flow-sider/index.tsx | 21 ++++--- .../flow/{ => form}/akshare-form/index.tsx | 2 +- .../flow/{ => form}/answer-form/index.tsx | 0 .../flow/{ => form}/arxiv-form/index.tsx | 2 +- .../{ => form}/baidu-fanyi-form/index.tsx | 4 +- .../flow/{ => form}/baidu-form/index.tsx | 2 +- .../flow/{ => form}/begin-form/index.tsx | 2 +- .../pages/flow/{ => form}/bing-form/index.tsx | 4 +- .../categorize-form/dynamic-categorize.tsx | 4 +- .../flow/{ => form}/categorize-form/hooks.ts | 4 +- .../flow/{ => form}/categorize-form/index.tsx | 4 +- .../{ => form}/concentrator-form/index.tsx | 2 +- .../flow/{ => form}/deepl-form/index.tsx | 6 +- .../flow/{ => form}/duckduckgo-form/index.tsx | 4 +- .../flow/{ => form}/exesql-form/index.tsx | 4 +- .../generate-form/dynamic-parameters.tsx | 4 +- .../flow/{ => form}/generate-form/hooks.ts | 4 +- .../flow/{ => form}/generate-form/index.less | 0 .../flow/{ => form}/generate-form/index.tsx | 4 +- .../flow/{ => form}/github-form/index.tsx | 2 +- .../flow/{ => form}/google-form/index.tsx | 4 +- .../{ => form}/google-scholar-form/index.tsx | 4 +- .../flow/{ => form}/jin10-form/index.tsx | 4 +- .../{ => form}/keyword-extract-form/index.tsx | 4 +- .../flow/{ => form}/message-form/index.less | 0 .../flow/{ => form}/message-form/index.tsx | 2 +- .../flow/{ => form}/pubmed-form/index.tsx | 2 +- .../flow/{ => form}/qweather-form/index.tsx | 4 +- .../flow/{ => form}/relevant-form/hooks.ts | 4 +- .../flow/{ => form}/relevant-form/index.tsx | 8 +-- .../flow/{ => form}/retrieval-form/index.tsx | 2 +- .../rewrite-question-form/index.tsx | 4 +- .../flow/{ => form}/switch-form/index.tsx | 10 ++-- .../flow/{ => form}/tushare-form/index.tsx | 4 +- .../flow/{ => form}/wencai-form/index.tsx | 4 +- .../flow/{ => form}/wikipedia-form/index.tsx | 4 +- .../{ => form}/yahoo-finance-form/index.tsx | 2 +- web/src/pages/flow/hooks.ts | 2 + web/src/pages/flow/utils.ts | 32 ++++++----- 49 files changed, 228 insertions(+), 148 deletions(-) create mode 100644 web/src/assets/svg/note.svg create mode 100644 web/src/pages/flow/canvas/node/note-node.tsx rename web/src/pages/flow/{ => form}/akshare-form/index.tsx (89%) rename web/src/pages/flow/{ => form}/answer-form/index.tsx (100%) rename web/src/pages/flow/{ => form}/arxiv-form/index.tsx (94%) rename web/src/pages/flow/{ => form}/baidu-fanyi-form/index.tsx (96%) rename web/src/pages/flow/{ => form}/baidu-form/index.tsx (89%) rename web/src/pages/flow/{ => form}/begin-form/index.tsx (93%) rename web/src/pages/flow/{ => form}/bing-form/index.tsx (90%) rename web/src/pages/flow/{ => form}/categorize-form/dynamic-categorize.tsx (98%) rename web/src/pages/flow/{ => form}/categorize-form/hooks.ts (97%) rename web/src/pages/flow/{ => form}/categorize-form/index.tsx (91%) rename web/src/pages/flow/{ => form}/concentrator-form/index.tsx (87%) rename web/src/pages/flow/{ => form}/deepl-form/index.tsx (89%) rename web/src/pages/flow/{ => form}/duckduckgo-form/index.tsx (90%) rename web/src/pages/flow/{ => form}/exesql-form/index.tsx (95%) rename web/src/pages/flow/{ => form}/generate-form/dynamic-parameters.tsx (94%) rename web/src/pages/flow/{ => form}/generate-form/hooks.ts (95%) rename web/src/pages/flow/{ => form}/generate-form/index.less (100%) rename web/src/pages/flow/{ => form}/generate-form/index.tsx (94%) rename web/src/pages/flow/{ => form}/github-form/index.tsx (89%) rename web/src/pages/flow/{ => form}/google-form/index.tsx (93%) rename web/src/pages/flow/{ => form}/google-scholar-form/index.tsx (94%) rename web/src/pages/flow/{ => form}/jin10-form/index.tsx (98%) rename web/src/pages/flow/{ => form}/keyword-extract-form/index.tsx (89%) rename web/src/pages/flow/{ => form}/message-form/index.less (100%) rename web/src/pages/flow/{ => form}/message-form/index.tsx (97%) rename web/src/pages/flow/{ => form}/pubmed-form/index.tsx (93%) rename web/src/pages/flow/{ => form}/qweather-form/index.tsx (97%) rename web/src/pages/flow/{ => form}/relevant-form/hooks.ts (94%) rename web/src/pages/flow/{ => form}/relevant-form/index.tsx (86%) rename web/src/pages/flow/{ => form}/retrieval-form/index.tsx (96%) rename web/src/pages/flow/{ => form}/rewrite-question-form/index.tsx (90%) rename web/src/pages/flow/{ => form}/switch-form/index.tsx (95%) rename web/src/pages/flow/{ => form}/tushare-form/index.tsx (95%) rename web/src/pages/flow/{ => form}/wencai-form/index.tsx (89%) rename web/src/pages/flow/{ => form}/wikipedia-form/index.tsx (87%) rename web/src/pages/flow/{ => form}/yahoo-finance-form/index.tsx (95%) diff --git a/web/src/assets/svg/note.svg b/web/src/assets/svg/note.svg new file mode 100644 index 000000000..6613b7154 --- /dev/null +++ b/web/src/assets/svg/note.svg @@ -0,0 +1,9 @@ + + + + \ No newline at end of file diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index f116da469..8f292a953 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -985,6 +985,9 @@ The above is the content you need to summarize.`, startDate: 'Start date', endDate: 'End date', keyword: 'Keyword', + note: 'Note', + noteDescription: 'Note', + notePlaceholder: 'Please enter a note', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 932fb6b79..67a8fca29 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -937,6 +937,9 @@ export default { startDate: '開始日期', endDate: '結束日期', keyword: '關鍵字', + note: '註解', + noteDescription: '註解', + notePlaceholder: '請輸入註釋', }, footer: { profile: '“保留所有權利 @ react”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index dd9bdec9d..c2126a042 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -955,6 +955,9 @@ export default { startDate: '开始日期', endDate: '结束日期', keyword: '关键字', + note: '注释', + noteDescription: '注释', + notePlaceholder: '请输入注释', }, 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 0129e1faa..39cce7096 100644 --- a/web/src/pages/flow/canvas/index.tsx +++ b/web/src/pages/flow/canvas/index.tsx @@ -6,9 +6,8 @@ import ReactFlow, { NodeMouseHandler, } from 'reactflow'; import 'reactflow/dist/style.css'; - -import { ButtonEdge } from './edge'; - +import ChatDrawer from '../chat/drawer'; +import { Operator } from '../constant'; import FlowDrawer from '../flow-drawer'; import { useHandleDrop, @@ -18,13 +17,13 @@ import { useValidateConnection, useWatchNodeFormDataChange, } from '../hooks'; -import { RagNode } from './node'; - -import ChatDrawer from '../chat/drawer'; +import { ButtonEdge } from './edge'; import styles from './index.less'; +import { RagNode } from './node'; import { BeginNode } from './node/begin-node'; import { CategorizeNode } from './node/categorize-node'; import { LogicNode } from './node/logic-node'; +import NoteNode from './node/note-node'; import { RelevantNode } from './node/relevant-node'; const nodeTypes = { @@ -33,6 +32,7 @@ const nodeTypes = { beginNode: BeginNode, relevantNode: RelevantNode, logicNode: LogicNode, + noteNode: NoteNode, }; const edgeTypes = { @@ -60,7 +60,9 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) { const onNodeClick: NodeMouseHandler = useCallback( (e, node) => { - showDrawer(node); + if (node.data.label !== Operator.Note) { + showDrawer(node); + } }, [showDrawer], ); @@ -121,14 +123,7 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) { defaultEdgeOptions={{ type: 'buttonEdge', markerEnd: 'logo', - // markerEnd: { - // type: MarkerType.ArrowClosed, - // color: 'rgb(157 149 225)', - // width: 20, - // height: 20, - // }, style: { - // edge style strokeWidth: 2, stroke: 'rgb(202 197 245)', }, diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less index 704884f35..e41ab176c 100644 --- a/web/src/pages/flow/canvas/node/index.less +++ b/web/src/pages/flow/canvas/node/index.less @@ -1,9 +1,13 @@ -.ragNode { - position: relative; +.commonNode() { box-shadow: -6px 0 12px 0 rgba(179, 177, 177, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -6px 0 16px 6px rgba(0, 0, 0, 0.05); +} + +.ragNode { + position: relative; + .commonNode(); padding: 5px; border-radius: 5px; @@ -68,10 +72,7 @@ .logicNode { position: relative; - box-shadow: - -6px 0 12px 0 rgba(179, 177, 177, 0.08), - -3px 0 6px -4px rgba(0, 0, 0, 0.12), - -6px 0 16px 6px rgba(0, 0, 0, 0.05); + .commonNode(); padding: 5px; border-radius: 5px; @@ -116,3 +117,17 @@ white-space: nowrap; } } + +.noteNode { + .commonNode(); + width: 140px; + padding: 4px 6px 6px; + border-radius: 10px; + background-color: #dbf8f4; + .noteTitle { + font-size: 12px; + } + .noteForm { + margin-top: 4px; + } +} diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx index 054c2d4e8..5ba346933 100644 --- a/web/src/pages/flow/canvas/node/index.tsx +++ b/web/src/pages/flow/canvas/node/index.tsx @@ -1,4 +1,3 @@ -import { useTranslate } from '@/hooks/common-hooks'; import { Flex } from 'antd'; import classNames from 'classnames'; import pick from 'lodash/pick'; @@ -10,12 +9,6 @@ import NodeDropdown from './dropdown'; import styles from './index.less'; import NodePopover from './popover'; -const ZeroGapOperators = [ - Operator.RewriteQuestion, - Operator.KeywordExtract, - Operator.ArXiv, -]; - export function RagNode({ id, data, @@ -23,7 +16,6 @@ export function RagNode({ selected, }: NodeProps) { const style = operatorMap[data.label as Operator]; - const { t } = useTranslate('flow'); return ( @@ -51,12 +43,7 @@ export function RagNode({ id="b" > - x === data.label) ? 0 : 6} - > + diff --git a/web/src/pages/flow/canvas/node/note-node.tsx b/web/src/pages/flow/canvas/node/note-node.tsx new file mode 100644 index 000000000..1686255e0 --- /dev/null +++ b/web/src/pages/flow/canvas/node/note-node.tsx @@ -0,0 +1,46 @@ +import { Flex, Form, Input, Space } from 'antd'; +import { NodeProps } from 'reactflow'; +import { NodeData } from '../../interface'; +import NodeDropdown from './dropdown'; + +import SvgIcon from '@/components/svg-icon'; +import { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useHandleFormValuesChange } from '../../hooks'; +import styles from './index.less'; + +const { TextArea } = Input; + +function NoteNode({ data, id }: NodeProps) { + const { t } = useTranslation(); + const [form] = Form.useForm(); + + const { handleValuesChange } = useHandleFormValuesChange(id); + + useEffect(() => { + form.setFieldsValue(data?.form); + }, [form, data?.form]); + + return ( +
+ + + + {t('flow.note')} + + + +
+ +