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

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;