Feat: Modify the background color of the agent canvas #3221 (#9020)

### What problem does this PR solve?

Feat: Modify the background color of the agent canvas #3221
### Type of change


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

web/src/pages/agent/canvas/node/node-wrapper.tsx

@@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
   return (
     <section
       className={cn(
-        'bg-background-header-bar p-2.5 rounded-md w-[200px] text-xs',
+        'bg-text-title-invert p-2.5 rounded-md w-[200px] text-xs',
         { 'border border-background-checked': selected },
         className,
       )}

web/src/pages/agent/canvas/node/note-node/index.tsx

@@ -18,12 +18,16 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { NodeWrapper } from '../node-wrapper';
 import { ResizeIcon, controlStyle } from '../resize-icon';
-import { useChangeName, useWatchFormChange } from './use-watch-change';
+import { useWatchFormChange, useWatchNameFormChange } from './use-watch-change';
 
 const FormSchema = z.object({
   text: z.string(),
 });
 
+const NameFormSchema = z.object({
+  name: z.string(),
+});
+
 function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
   const { t } = useTranslation();
 
@@ -32,10 +36,15 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
     defaultValues: data.form,
   });
 
-  const { handleChangeName } = useChangeName(id);
+  const nameForm = useForm<z.infer<typeof NameFormSchema>>({
+    resolver: zodResolver(NameFormSchema),
+    defaultValues: { name: data.name },
+  });
 
   useWatchFormChange(id, form);
 
+  useWatchNameFormChange(id, nameForm);
+
   return (
     <NodeWrapper
       className="p-0  w-full h-full flex flex-col rounded-md "
@@ -46,14 +55,29 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
       </NodeResizeControl>
       <section className="px-1 py-2 flex gap-2 bg-background-highlight items-center note-drag-handle rounded-s-md">
         <NotebookPen className="size-4" />
-        <Input
-          type="text"
-          defaultValue={data.name}
-          onChange={handleChangeName}
-        ></Input>
+        <Form {...nameForm}>
+          <form>
+            <FormField
+              control={nameForm.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="h-full">
+                  <FormControl>
+                    <Input
+                      placeholder={t('flow.notePlaceholder')}
+                      {...field}
+                      type="text"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
       </section>
       <Form {...form}>
-        <form className="flex-1">
+        <form className="flex-1 p-1">
           <FormField
             control={form.control}
             name="text"
@@ -62,7 +86,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
                 <FormControl>
                   <Textarea
                     placeholder={t('flow.notePlaceholder')}
-                    className="resize-none rounded-none p-1 h-full overflow-auto bg-background-header-bar"
+                    className="resize-none rounded-none p-1 h-full overflow-auto bg-background-header-bar focus-visible:ring-0 border-none"
                     {...field}
                   />
                 </FormControl>

web/src/pages/agent/canvas/node/note-node/use-watch-change.ts

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