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):
2025-08-12 02:59:03 +08:00 · 2024-10-09 19:39:04 +08:00 · 2024-10-09 19:39:04 +08:00 · e904c134e7
commit e904c134e7
parent 7fc3bb3241
49 changed files with 228 additions and 148 deletions
--- a/web/src/assets/svg/note.svg
+++ b/web/src/assets/svg/note.svg
@ -0,0 +1,9 @@
+<svg t="1728464420455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4344"
+    width="200" height="200">
+    <path
+        d="M864 64H704V32c0-17.066667-14.933333-32-32-32S640 14.933333 640 32V64H384V32c0-17.066667-14.933333-32-32-32S320 14.933333 320 32V64H160C142.933333 64 128 78.933333 128 96v896c0 17.066667 14.933333 32 32 32h704c17.066667 0 32-14.933333 32-32v-896c0-17.066667-14.933333-32-32-32zM832 960H192V128h128v64c0 17.066667 14.933333 32 32 32S384 209.066667 384 192V128h256v64c0 17.066667 14.933333 32 32 32S704 209.066667 704 192V128h128v832z"
+        fill="#3b76f4" p-id="4345"></path>
+    <path
+        d="M704 384H320c-17.066667 0-32 14.933333-32 32S302.933333 448 320 448h384c17.066667 0 32-14.933333 32-32S721.066667 384 704 384zM704 640H320c-17.066667 0-32 14.933333-32 32S302.933333 704 320 704h384c17.066667 0 32-14.933333 32-32S721.066667 640 704 640z"
+        fill="#3b76f4" p-id="4346"></path>
+</svg>
--- 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',
--- 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”',
--- 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',
--- 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)',
          },
--- 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;
+  }
+}
--- 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<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>
--- a/web/src/pages/flow/canvas/node/note-node.tsx
+++ 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<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;
--- a/web/src/pages/flow/constant.tsx
+++ b/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 = [
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/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 {
--- a/web/src/pages/flow/flow-sider/index.tsx
+++ b/web/src/pages/flow/flow-sider/index.tsx
@ -15,6 +15,14 @@ interface IProps {
  collapsed: boolean;
 }

+const dividerProps = {
+  marginTop: 10,
+  marginBottom: 10,
+  padding: 0,
+  borderBlockColor: '#b4afaf',
+  borderStyle: 'dotted',
+};
+
 const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
  const { handleDragStart } = useHandleDrag();
  const { t } = useTranslate('flow');
@ -31,16 +39,11 @@ const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
        {componentMenuList.map((x) => {
          return (
            <React.Fragment key={x.name}>
+              {x.name === Operator.Note && (
+                <Divider style={dividerProps}></Divider>
+              )}
              {x.name === Operator.DuckDuckGo && (
-                <Divider
-                  style={{
-                    marginTop: 10,
-                    marginBottom: 10,
-                    padding: 0,
-                    borderBlockColor: '#b4afaf',
-                    borderStyle: 'dotted',
-                  }}
-                ></Divider>
+                <Divider style={dividerProps}></Divider>
              )}
              <Card
                key={x.name}
--- a/web/src/pages/flow/form/akshare-form/index.tsx
+++ b/web/src/pages/flow/form/akshare-form/index.tsx
@ -1,6 +1,6 @@
 import TopNItem from '@/components/top-n-item';
 import { Form } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const AkShareForm = ({ onValuesChange, form }: IOperatorForm) => {
  return (
--- a/web/src/pages/flow/form/answer-form/index.tsx
+++ b/web/src/pages/flow/form/answer-form/index.tsx
--- a/web/src/pages/flow/form/arxiv-form/index.tsx
+++ b/web/src/pages/flow/form/arxiv-form/index.tsx
@ -2,7 +2,7 @@ import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Select } from 'antd';
 import { useMemo } from 'react';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const ArXivForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/baidu-fanyi-form/index.tsx
+++ b/web/src/pages/flow/form/baidu-fanyi-form/index.tsx
@ -4,8 +4,8 @@ import { useMemo } from 'react';
 import {
  BaiduFanyiDomainOptions,
  BaiduFanyiSourceLangOptions,
-} from '../constant';
-import { IOperatorForm } from '../interface';
+} from '../../constant';
+import { IOperatorForm } from '../../interface';

 const BaiduFanyiForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/baidu-form/index.tsx
+++ b/web/src/pages/flow/form/baidu-form/index.tsx
@ -1,6 +1,6 @@
 import TopNItem from '@/components/top-n-item';
 import { Form } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const BaiduForm = ({ onValuesChange, form }: IOperatorForm) => {
  return (
--- a/web/src/pages/flow/form/begin-form/index.tsx
+++ b/web/src/pages/flow/form/begin-form/index.tsx
@ -1,6 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Input } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 type FieldType = {
  prologue?: string;
--- a/web/src/pages/flow/form/bing-form/index.tsx
+++ b/web/src/pages/flow/form/bing-form/index.tsx
@ -2,8 +2,8 @@ import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Input, Select } from 'antd';
 import { useMemo } from 'react';
-import { BingCountryOptions, BingLanguageOptions } from '../constant';
-import { IOperatorForm } from '../interface';
+import { BingCountryOptions, BingLanguageOptions } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const BingForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
@ -12,8 +12,8 @@ import {
  useState,
 } from 'react';
 import { useUpdateNodeInternals } from 'reactflow';
-import { Operator } from '../constant';
-import { useBuildFormSelectOptions } from '../form-hooks';
+import { Operator } from '../../constant';
+import { useBuildFormSelectOptions } from '../../form-hooks';

 interface IProps {
  nodeId?: string;
--- a/web/src/pages/flow/form/categorize-form/hooks.ts
+++ b/web/src/pages/flow/form/categorize-form/hooks.ts
@ -5,8 +5,8 @@ import {
  ICategorizeItem,
  ICategorizeItemResult,
  IOperatorForm,
-} from '../interface';
-import useGraphStore from '../store';
+} from '../../interface';
+import useGraphStore from '../../store';

 /**
   * convert the following object into a list
--- a/web/src/pages/flow/form/categorize-form/index.tsx
+++ b/web/src/pages/flow/form/categorize-form/index.tsx
@ -1,8 +1,8 @@
 import LLMSelect from '@/components/llm-select';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form } from 'antd';
-import { useSetLlmSetting } from '../hooks';
-import { IOperatorForm } from '../interface';
+import { useSetLlmSetting } from '../../hooks';
+import { IOperatorForm } from '../../interface';
 import DynamicCategorize from './dynamic-categorize';
 import { useHandleFormValuesChange } from './hooks';

--- a/web/src/pages/flow/form/concentrator-form/index.tsx
+++ b/web/src/pages/flow/form/concentrator-form/index.tsx
@ -1,5 +1,5 @@
 import { Form } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const ConcentratorForm = ({ onValuesChange, form }: IOperatorForm) => {
  return (
--- a/web/src/pages/flow/form/deepl-form/index.tsx
+++ b/web/src/pages/flow/form/deepl-form/index.tsx
@ -1,9 +1,9 @@
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Select } from 'antd';
-import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../constant';
-import { useBuildSortOptions } from '../form-hooks';
-import { IOperatorForm } from '../interface';
+import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../../constant';
+import { useBuildSortOptions } from '../../form-hooks';
+import { IOperatorForm } from '../../interface';

 const DeepLForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/duckduckgo-form/index.tsx
+++ b/web/src/pages/flow/form/duckduckgo-form/index.tsx
@ -2,8 +2,8 @@ import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Select } from 'antd';
 import { useMemo } from 'react';
-import { Channel } from '../constant';
-import { IOperatorForm } from '../interface';
+import { Channel } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const DuckDuckGoForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/exesql-form/index.tsx
+++ b/web/src/pages/flow/form/exesql-form/index.tsx
@ -3,8 +3,8 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { useTestDbConnect } from '@/hooks/flow-hooks';
 import { Button, Flex, Form, Input, InputNumber, Select } from 'antd';
 import { useCallback } from 'react';
-import { ExeSQLOptions } from '../constant';
-import { IOperatorForm } from '../interface';
+import { ExeSQLOptions } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const ExeSQLForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/generate-form/dynamic-parameters.tsx
+++ b/web/src/pages/flow/form/generate-form/dynamic-parameters.tsx
@ -2,9 +2,9 @@ import { EditableCell, EditableRow } from '@/components/editable-cell';
 import { useTranslate } from '@/hooks/common-hooks';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Flex, Select, Table, TableProps } from 'antd';
-import { IGenerateParameter } from '../interface';
+import { IGenerateParameter } from '../../interface';

-import { useBuildComponentIdSelectOptions } from '../hooks';
+import { useBuildComponentIdSelectOptions } from '../../hooks';
 import { useHandleOperateParameters } from './hooks';
 import styles from './index.less';

--- a/web/src/pages/flow/form/generate-form/hooks.ts
+++ b/web/src/pages/flow/form/generate-form/hooks.ts
@ -1,8 +1,8 @@
 import get from 'lodash/get';
 import { useCallback, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
-import { IGenerateParameter } from '../interface';
-import useGraphStore from '../store';
+import { IGenerateParameter } from '../../interface';
+import useGraphStore from '../../store';

 export const useHandleOperateParameters = (nodeId: string) => {
  const { getNode, updateNodeForm } = useGraphStore((state) => state);
--- a/web/src/pages/flow/form/generate-form/index.less
+++ b/web/src/pages/flow/form/generate-form/index.less
--- a/web/src/pages/flow/form/generate-form/index.tsx
+++ b/web/src/pages/flow/form/generate-form/index.tsx
@ -1,8 +1,8 @@
 import LLMSelect from '@/components/llm-select';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Input, InputNumber, Switch } from 'antd';
-import { useSetLlmSetting } from '../hooks';
-import { IOperatorForm } from '../interface';
+import { useSetLlmSetting } from '../../hooks';
+import { IOperatorForm } from '../../interface';
 import DynamicParameters from './dynamic-parameters';

 const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
--- a/web/src/pages/flow/form/github-form/index.tsx
+++ b/web/src/pages/flow/form/github-form/index.tsx
@ -1,6 +1,6 @@
 import TopNItem from '@/components/top-n-item';
 import { Form } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const GithubForm = ({ onValuesChange, form }: IOperatorForm) => {
  return (
--- a/web/src/pages/flow/form/google-form/index.tsx
+++ b/web/src/pages/flow/form/google-form/index.tsx
@ -1,8 +1,8 @@
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Input, Select } from 'antd';
-import { GoogleCountryOptions, GoogleLanguageOptions } from '../constant';
-import { IOperatorForm } from '../interface';
+import { GoogleCountryOptions, GoogleLanguageOptions } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const GoogleForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/google-scholar-form/index.tsx
+++ b/web/src/pages/flow/form/google-scholar-form/index.tsx
@ -3,8 +3,8 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { DatePicker, DatePickerProps, Form, Select, Switch } from 'antd';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
-import { useBuildSortOptions } from '../form-hooks';
-import { IOperatorForm } from '../interface';
+import { useBuildSortOptions } from '../../form-hooks';
+import { IOperatorForm } from '../../interface';

 const YearPicker = ({
  onChange,
--- a/web/src/pages/flow/form/jin10-form/index.tsx
+++ b/web/src/pages/flow/form/jin10-form/index.tsx
@ -8,8 +8,8 @@ import {
  Jin10SymbolsDatatypeOptions,
  Jin10SymbolsTypeOptions,
  Jin10TypeOptions,
-} from '../constant';
-import { IOperatorForm } from '../interface';
+} from '../../constant';
+import { IOperatorForm } from '../../interface';

 const Jin10Form = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/keyword-extract-form/index.tsx
+++ b/web/src/pages/flow/form/keyword-extract-form/index.tsx
@ -2,8 +2,8 @@ import LLMSelect from '@/components/llm-select';
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form } from 'antd';
-import { useSetLlmSetting } from '../hooks';
-import { IOperatorForm } from '../interface';
+import { useSetLlmSetting } from '../../hooks';
+import { IOperatorForm } from '../../interface';

 const KeywordExtractForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/message-form/index.less
+++ b/web/src/pages/flow/form/message-form/index.less
--- a/web/src/pages/flow/form/message-form/index.tsx
+++ b/web/src/pages/flow/form/message-form/index.tsx
@ -1,7 +1,7 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Form, Input } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 import styles from './index.less';

--- a/web/src/pages/flow/form/pubmed-form/index.tsx
+++ b/web/src/pages/flow/form/pubmed-form/index.tsx
@ -1,7 +1,7 @@
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Input } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const PubMedForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/qweather-form/index.tsx
+++ b/web/src/pages/flow/form/qweather-form/index.tsx
@ -6,8 +6,8 @@ import {
  QWeatherTimePeriodOptions,
  QWeatherTypeOptions,
  QWeatherUserTypeOptions,
-} from '../constant';
-import { IOperatorForm } from '../interface';
+} from '../../constant';
+import { IOperatorForm } from '../../interface';

 const QWeatherForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/relevant-form/hooks.ts
+++ b/web/src/pages/flow/form/relevant-form/hooks.ts
@ -1,8 +1,8 @@
 import pick from 'lodash/pick';
 import { useCallback, useEffect } from 'react';
 import { Edge } from 'reactflow';
-import { IOperatorForm } from '../interface';
-import useGraphStore from '../store';
+import { IOperatorForm } from '../../interface';
+import useGraphStore from '../../store';

 export const useBuildRelevantOptions = () => {
  const nodes = useGraphStore((state) => state.nodes);
--- a/web/src/pages/flow/form/relevant-form/index.tsx
+++ b/web/src/pages/flow/form/relevant-form/index.tsx
@ -1,10 +1,10 @@
 import LLMSelect from '@/components/llm-select';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Select } from 'antd';
-import { Operator } from '../constant';
-import { useBuildFormSelectOptions } from '../form-hooks';
-import { useSetLlmSetting } from '../hooks';
-import { IOperatorForm } from '../interface';
+import { Operator } from '../../constant';
+import { useBuildFormSelectOptions } from '../../form-hooks';
+import { useSetLlmSetting } from '../../hooks';
+import { IOperatorForm } from '../../interface';
 import { useWatchConnectionChanges } from './hooks';

 const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
--- a/web/src/pages/flow/form/retrieval-form/index.tsx
+++ b/web/src/pages/flow/form/retrieval-form/index.tsx
@ -5,7 +5,7 @@ import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import type { FormProps } from 'antd';
 import { Form, Input } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 type FieldType = {
  top_n?: number;
--- a/web/src/pages/flow/form/rewrite-question-form/index.tsx
+++ b/web/src/pages/flow/form/rewrite-question-form/index.tsx
@ -1,8 +1,8 @@
 import LLMSelect from '@/components/llm-select';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, InputNumber } from 'antd';
-import { useSetLlmSetting } from '../hooks';
-import { IOperatorForm } from '../interface';
+import { useSetLlmSetting } from '../../hooks';
+import { IOperatorForm } from '../../interface';

 const RewriteQuestionForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('chat');
--- a/web/src/pages/flow/form/switch-form/index.tsx
+++ b/web/src/pages/flow/form/switch-form/index.tsx
@ -7,11 +7,11 @@ import {
  SwitchElseTo,
  SwitchLogicOperatorOptions,
  SwitchOperatorOptions,
-} from '../constant';
-import { useBuildFormSelectOptions } from '../form-hooks';
-import { useBuildComponentIdSelectOptions } from '../hooks';
-import { IOperatorForm, ISwitchForm } from '../interface';
-import { getOtherFieldValues } from '../utils';
+} from '../../constant';
+import { useBuildFormSelectOptions } from '../../form-hooks';
+import { useBuildComponentIdSelectOptions } from '../../hooks';
+import { IOperatorForm, ISwitchForm } from '../../interface';
+import { getOtherFieldValues } from '../../utils';

 const subLabelCol = {
  span: 11,
--- a/web/src/pages/flow/form/tushare-form/index.tsx
+++ b/web/src/pages/flow/form/tushare-form/index.tsx
@ -2,8 +2,8 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { DatePicker, DatePickerProps, Form, Input, Select } from 'antd';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
-import { TuShareSrcOptions } from '../constant';
-import { IOperatorForm } from '../interface';
+import { TuShareSrcOptions } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const DateTimePicker = ({
  onChange,
--- a/web/src/pages/flow/form/wencai-form/index.tsx
+++ b/web/src/pages/flow/form/wencai-form/index.tsx
@ -2,8 +2,8 @@ import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Select } from 'antd';
 import { useMemo } from 'react';
-import { WenCaiQueryTypeOptions } from '../constant';
-import { IOperatorForm } from '../interface';
+import { WenCaiQueryTypeOptions } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const WenCaiForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/form/wikipedia-form/index.tsx
+++ b/web/src/pages/flow/form/wikipedia-form/index.tsx
@ -1,8 +1,8 @@
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Select } from 'antd';
-import { LanguageOptions } from '../constant';
-import { IOperatorForm } from '../interface';
+import { LanguageOptions } from '../../constant';
+import { IOperatorForm } from '../../interface';

 const WikipediaForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('common');
--- a/web/src/pages/flow/form/yahoo-finance-form/index.tsx
+++ b/web/src/pages/flow/form/yahoo-finance-form/index.tsx
@ -1,6 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Switch } from 'antd';
-import { IOperatorForm } from '../interface';
+import { IOperatorForm } from '../../interface';

 const YahooFinanceForm = ({ onValuesChange, form }: IOperatorForm) => {
  const { t } = useTranslate('flow');
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@ -49,6 +49,7 @@ import {
  initialJin10Values,
  initialKeywordExtractValues,
  initialMessageValues,
+  initialNoteValues,
  initialPubMedValues,
  initialQWeatherValues,
  initialRelevantValues,
@ -125,6 +126,7 @@ export const useInitializeOperatorParams = () => {
      [Operator.Jin10]: initialJin10Values,
      [Operator.Concentrator]: initialConcentratorValues,
      [Operator.TuShare]: initialTuShareValues,
+      [Operator.Note]: initialNoteValues,
    };
  }, [llmId]);

--- a/web/src/pages/flow/utils.ts
+++ b/web/src/pages/flow/utils.ts
@ -122,21 +122,23 @@ export const buildDslComponentsByGraph = (
 ): DSLComponents => {
  const components: DSLComponents = {};

-  nodes.forEach((x) => {
-    const id = x.id;
-    const operatorName = x.data.label;
-    components[id] = {
-      obj: {
-        component_name: operatorName,
-        params:
-          buildOperatorParams(operatorName)(
-            x.data.form as Record<string, unknown>,
-          ) ?? {},
-      },
-      downstream: buildComponentDownstreamOrUpstream(edges, id, true),
-      upstream: buildComponentDownstreamOrUpstream(edges, id, false),
-    };
-  });
+  nodes
+    .filter((x) => x.data.label !== Operator.Note)
+    .forEach((x) => {
+      const id = x.id;
+      const operatorName = x.data.label;
+      components[id] = {
+        obj: {
+          component_name: operatorName,
+          params:
+            buildOperatorParams(operatorName)(
+              x.data.form as Record<string, unknown>,
+            ) ?? {},
+        },
+        downstream: buildComponentDownstreamOrUpstream(edges, id, true),
+        upstream: buildComponentDownstreamOrUpstream(edges, id, false),
+      };
+    });

  return components;
 };