Feat: Use react-hook-form to synchronize the data of the categorize form to the agent node. #3221 (#5665)

### What problem does this PR solve?

Feat: Use react-hook-form to synchronize the data of the categorize form
to the agent node. #3221

### Type of change

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

web/src/pages/agent/form/categorize-form/hooks.ts

@@ -1,45 +0,0 @@
-import {
-  ICategorizeItem,
-  ICategorizeItemResult,
-} from '@/interfaces/database/flow';
-import omit from 'lodash/omit';
-import { useCallback } from 'react';
-import { IOperatorForm } from '../../interface';
-
-/**
-   * Convert the list in the following form into an object
-   * {
-    "items": [
-      {
-        "name": "Categorize 1",
-        "description": "111",
-        "examples": "ddd",
-        "to": "Retrieval:LazyEelsStick"
-      }
-     ]
-    }
-*/
-const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
-  return list.reduce<ICategorizeItemResult>((pre, cur) => {
-    if (cur?.name) {
-      pre[cur.name] = omit(cur, 'name');
-    }
-    return pre;
-  }, {});
-};
-
-export const useHandleFormValuesChange = ({
-  onValuesChange,
-}: IOperatorForm) => {
-  const handleValuesChange = useCallback(
-    (changedValues: any, values: any) => {
-      onValuesChange?.(changedValues, {
-        ...omit(values, 'items'),
-        category_description: buildCategorizeObjectFromList(values.items),
-      });
-    },
-    [onValuesChange],
-  );
-
-  return { handleValuesChange };
-};

web/src/pages/agent/form/categorize-form/index.tsx

@@ -6,17 +6,8 @@ import { DynamicInputVariable } from '../components/next-dynamic-input-variable'
 import DynamicCategorize from './dynamic-categorize';
 
 const CategorizeForm = ({ form, node }: INextOperatorForm) => {
-  // const { handleValuesChange } = useHandleFormValuesChange({
-  //   form,
-  //   nodeId: node?.id,
-  //   onValuesChange,
-  // });
-
   return (
-    <Form
-      // onValuesChange={handleValuesChange}
-      {...form}
-    >
+    <Form {...form}>
       <form
         className="space-y-6 p-5 overflow-auto max-h-[76vh]"
         onSubmit={(e) => {