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/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;