Feat: Add note node #3221 (#8728)

### What problem does this PR solve?

Feat: Add note node #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/index.tsx

@@ -1,11 +1,21 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 import {
   Background,
   ConnectionMode,
+  ControlButton,
+  Controls,
   NodeTypes,
   ReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { useEffect } from 'react';
+import { NotebookPen } from 'lucide-react';
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ChatSheet } from '../chat/chat-sheet';
 import {
   AgentChatContext,
@@ -21,6 +31,7 @@ import {
 import { useAddNode } from '../hooks/use-add-node';
 import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useCacheChatLog } from '../hooks/use-cache-chat-log';
+import { useMoveNote } from '../hooks/use-move-note';
 import { useShowDrawer, useShowLogSheet } from '../hooks/use-show-drawer';
 import { LogSheet } from '../log-sheet';
 import RunSheet from '../run-sheet';
@@ -77,6 +88,7 @@ interface IProps {
 }
 
 function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
+  const { t } = useTranslation();
   const {
     nodes,
     edges,
@@ -94,7 +106,6 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
 
   const {
     onNodeClick,
-    onPaneClick,
     clickedNode,
     formDrawerVisible,
     hideFormDrawer,
@@ -124,7 +135,17 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
 
   const { handleBeforeDelete } = useBeforeDelete();
 
-  const { addCanvasNode } = useAddNode(reactFlowInstance);
+  const { addCanvasNode, addNoteNode } = useAddNode(reactFlowInstance);
+
+  const { ref, showImage, hideImage, imgVisible, mouse } = useMoveNote();
+
+  const onPaneClick = useCallback(() => {
+    hideFormDrawer();
+    if (imgVisible) {
+      addNoteNode(mouse);
+      hideImage();
+    }
+  }, [addNoteNode, hideFormDrawer, hideImage, imgVisible, mouse]);
 
   useEffect(() => {
     if (!chatVisible) {
@@ -176,6 +197,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           onEdgeMouseEnter={onEdgeMouseEnter}
           onEdgeMouseLeave={onEdgeMouseLeave}
           className="h-full"
+          colorMode="dark"
           defaultEdgeOptions={{
             type: 'buttonEdge',
             markerEnd: 'logo',
@@ -189,8 +211,22 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           onBeforeDelete={handleBeforeDelete}
         >
           <Background />
+          <Controls position={'bottom-center'} orientation="horizontal">
+            <ControlButton>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <NotebookPen className="!fill-none" onClick={showImage} />
+                </TooltipTrigger>
+                <TooltipContent>{t('flow.note')}</TooltipContent>
+              </Tooltip>
+            </ControlButton>
+          </Controls>
         </ReactFlow>
       </AgentInstanceContext.Provider>
+      <NotebookPen
+        className={cn('hidden absolute size-6', { block: imgVisible })}
+        ref={ref}
+      ></NotebookPen>
       {formDrawerVisible && (
         <AgentInstanceContext.Provider value={{ addCanvasNode }}>
           <FormSheet