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/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',

web/src/locales/zh-traditional.ts

@@ -937,6 +937,9 @@ export default {
       startDate: '開始日期',
       endDate: '結束日期',
       keyword: '關鍵字',
+      note: '註解',
+      noteDescription: '註解',
+      notePlaceholder: '請輸入註釋',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -955,6 +955,9 @@ export default {
       startDate: '开始日期',
       endDate: '结束日期',
       keyword: '关键字',
+      note: '注释',
+      noteDescription: '注释',
+      notePlaceholder: '请输入注释',
     },
     footer: {
       profile: 'All rights reserved @ React',

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

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;
+  }
+}

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,20 +9,13 @@ 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,
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
   const style = operatorMap[data.label as Operator];
-  const { t } = useTranslate('flow');
 
   return (
     <NodePopover nodeId={id}>
@@ -51,12 +43,7 @@ export function RagNode({
           id="b"
         ></Handle>
         <Handle type="source" position={Position.Bottom} id="a" isConnectable />
-        <Flex
-          vertical
-          align="center"
-          justify={'space-around'}
-          // gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
-        >
+        <Flex vertical align="center" justify={'space-around'}>
           <Flex flex={1} justify="center" align="center">
             <label htmlFor=""> </label>
           </Flex>

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<NodeData>) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const { handleValuesChange } = useHandleFormValuesChange(id);
+
+  useEffect(() => {
+    form.setFieldsValue(data?.form);
+  }, [form, data?.form]);
+
+  return (
+    <section className={styles.noteNode}>
+      <Flex justify={'space-between'}>
+        <Space size={'small'}>
+          <SvgIcon name="note" width={14}></SvgIcon>
+          <span className={styles.noteTitle}>{t('flow.note')}</span>
+        </Space>
+        <NodeDropdown id={id}></NodeDropdown>
+      </Flex>
+      <Form
+        onValuesChange={handleValuesChange}
+        form={form}
+        className={styles.noteForm}
+      >
+        <Form.Item name="text" noStyle>
+          <TextArea rows={3} placeholder={t('flow.notePlaceholder')} />
+        </Form.Item>
+      </Form>
+    </section>
+  );
+}
+
+export default NoteNode;

web/src/pages/flow/constant.tsx

@@ -12,6 +12,7 @@ import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar
 import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
 import { ReactComponent as Jin10Icon } from '@/assets/svg/jin10.svg';
 import { ReactComponent as KeywordIcon } from '@/assets/svg/keyword.svg';
+import { ReactComponent as NoteIcon } from '@/assets/svg/note.svg';
 import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
 import { ReactComponent as QWeatherIcon } from '@/assets/svg/qweather.svg';
 import { ReactComponent as SwitchIcon } from '@/assets/svg/switch.svg';
@@ -71,6 +72,7 @@ export enum Operator {
   Jin10 = 'Jin10',
   Concentrator = 'Concentrator',
   TuShare = 'TuShare',
+  Note = 'Note',
 }
 
 export const operatorIconMap = {
@@ -103,6 +105,7 @@ export const operatorIconMap = {
   [Operator.Jin10]: Jin10Icon,
   [Operator.Concentrator]: ConcentratorIcon,
   [Operator.TuShare]: TuShareIcon,
+  [Operator.Note]: NoteIcon,
 };
 
 export const operatorMap: Record<
@@ -225,6 +228,7 @@ export const operatorMap: Record<
     iconFontSize: 16,
   },
   [Operator.TuShare]: { backgroundColor: '#f8cfa0' },
+  [Operator.Note]: { backgroundColor: '#f8cfa0' },
 };
 
 export const componentMenuList = [
@@ -258,6 +262,9 @@ export const componentMenuList = [
   {
     name: Operator.Concentrator,
   },
+  {
+    name: Operator.Note,
+  },
   {
     name: Operator.DuckDuckGo,
   },
@@ -480,6 +487,10 @@ export const initialTuShareValues = {
   start_date: '2024-01-01 09:00:00',
 };
 
+export const initialNoteValues = {
+  text: '',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -588,6 +599,7 @@ export const NodeMap = {
   [Operator.YahooFinance]: 'ragNode',
   [Operator.Jin10]: 'ragNode',
   [Operator.TuShare]: 'ragNode',
+  [Operator.Note]: 'noteNode',
 };
 
 export const LanguageOptions = [

web/src/pages/flow/flow-drawer/index.tsx

@@ -3,38 +3,38 @@ import { IModalProps } from '@/interfaces/common';
 import { Drawer, Flex, Form, Input } from 'antd';
 import { useEffect } from 'react';
 import { Node } from 'reactflow';
-import AkShareForm from '../akshare-form';
-import AnswerForm from '../answer-form';
-import ArXivForm from '../arxiv-form';
-import BaiduFanyiForm from '../baidu-fanyi-form';
-import BaiduForm from '../baidu-form';
-import BeginForm from '../begin-form';
-import BingForm from '../bing-form';
-import CategorizeForm from '../categorize-form';
 import { Operator } from '../constant';
-import DeepLForm from '../deepl-form';
-import DuckDuckGoForm from '../duckduckgo-form';
-import ExeSQLForm from '../exesql-form';
-import GenerateForm from '../generate-form';
-import GithubForm from '../github-form';
-import GoogleForm from '../google-form';
-import GoogleScholarForm from '../google-scholar-form';
+import AkShareForm from '../form/akshare-form';
+import AnswerForm from '../form/answer-form';
+import ArXivForm from '../form/arxiv-form';
+import BaiduFanyiForm from '../form/baidu-fanyi-form';
+import BaiduForm from '../form/baidu-form';
+import BeginForm from '../form/begin-form';
+import BingForm from '../form/bing-form';
+import CategorizeForm from '../form/categorize-form';
+import DeepLForm from '../form/deepl-form';
+import DuckDuckGoForm from '../form/duckduckgo-form';
+import ExeSQLForm from '../form/exesql-form';
+import GenerateForm from '../form/generate-form';
+import GithubForm from '../form/github-form';
+import GoogleForm from '../form/google-form';
+import GoogleScholarForm from '../form/google-scholar-form';
+import Jin10Form from '../form/jin10-form';
+import KeywordExtractForm from '../form/keyword-extract-form';
+import MessageForm from '../form/message-form';
+import PubMedForm from '../form/pubmed-form';
+import QWeatherForm from '../form/qweather-form';
+import RelevantForm from '../form/relevant-form';
+import RetrievalForm from '../form/retrieval-form';
+import RewriteQuestionForm from '../form/rewrite-question-form';
+import SwitchForm from '../form/switch-form';
+import TuShareForm from '../form/tushare-form';
+import WenCaiForm from '../form/wencai-form';
+import WikipediaForm from '../form/wikipedia-form';
+import YahooFinanceForm from '../form/yahoo-finance-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
-import KeywordExtractForm from '../keyword-extract-form';
-import MessageForm from '../message-form';
 import OperatorIcon from '../operator-icon';
-import PubMedForm from '../pubmed-form';
-import QWeatherForm from '../qweather-form';
-import RelevantForm from '../relevant-form';
-import RetrievalForm from '../retrieval-form';
-import RewriteQuestionForm from '../rewrite-question-form';
-import SwitchForm from '../switch-form';
-import TuShareForm from '../tushare-form';
-import WenCaiForm from '../wencai-form';
-import WikipediaForm from '../wikipedia-form';
 
-import Jin10Form from '../jin10-form';
-import YahooFinanceForm from '../yahoo-finance-form';
 import styles from './index.less';
 
 interface IProps {