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/hooks/use-move-note.ts

@@ -0,0 +1,35 @@
+import { useMouse } from 'ahooks';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useMoveNote() {
+  const ref = useRef<SVGSVGElement>(null);
+  const mouse = useMouse();
+  const [imgVisible, setImgVisible] = useState(false);
+
+  const toggleVisible = useCallback((visible: boolean) => {
+    setImgVisible(visible);
+  }, []);
+
+  const showImage = useCallback(() => {
+    toggleVisible(true);
+  }, [toggleVisible]);
+
+  const hideImage = useCallback(() => {
+    toggleVisible(false);
+  }, [toggleVisible]);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.style.top = `${mouse.clientY - 70}px`;
+      ref.current.style.left = `${mouse.clientX + 10}px`;
+    }
+  }, [mouse.clientX, mouse.clientY]);
+
+  return {
+    ref,
+    showImage,
+    hideImage,
+    mouse,
+    imgVisible,
+  };
+}