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/node/note-node/use-watch-change.ts

@@ -0,0 +1,31 @@
+import useGraphStore from '@/pages/agent/store';
+import { useCallback, useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id) {
+      values = form?.getValues() || {};
+      let nextValues: any = values;
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [id, updateNodeForm, values]);
+}
+
+export function useChangeName(id: string) {
+  const updateNodeName = useGraphStore((state) => state.updateNodeName);
+
+  const handleChangeName = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      updateNodeName(id, e.target.value.trim());
+    },
+    [id, updateNodeName],
+  );
+
+  return { handleChangeName };
+}