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')} + + + +
+ +