Feat: Save the agent tool data to the node #3221 (#8364)

### What problem does this PR solve?

Feat: Save the agent tool data to the node #3221

### Type of change


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

web/src/pages/agent/form/agent-form/tool-popover/index.tsx

@@ -3,33 +3,43 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import { IAgentForm } from '@/interfaces/database/agent';
 import { Operator } from '@/pages/agent/constant';
 import { AgentFormContext, AgentInstanceContext } from '@/pages/agent/context';
 import { Position } from '@xyflow/react';
-import { PropsWithChildren, useCallback, useContext } from 'react';
+import { get } from 'lodash';
+import { PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 import { ToolCommand } from './tool-command';
+import { useUpdateAgentNodeTools } from './use-update-tools';
 
 export function ToolPopover({ children }: PropsWithChildren) {
   const { addCanvasNode } = useContext(AgentInstanceContext);
   const node = useContext(AgentFormContext);
+  const { updateNodeTools } = useUpdateAgentNodeTools();
+
+  const toolNames = useMemo(() => {
+    const tools: IAgentForm['tools'] = get(node, 'data.form.tools', []);
+    return tools.map((x) => x.component_name);
+  }, [node]);
 
   const handleChange = useCallback(
     (value: string[]) => {
-      if (Array.isArray(value) && value.length > 0) {
+      if (Array.isArray(value) && value.length > 0 && node?.id) {
+        updateNodeTools(value);
         addCanvasNode(Operator.Tool, {
           position: Position.Bottom,
           nodeId: node?.id,
         })();
       }
     },
-    [addCanvasNode, node?.id],
+    [addCanvasNode, node?.id, updateNodeTools],
   );
 
   return (
     <Popover>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent className="w-80 p-0">
-        <ToolCommand onChange={handleChange}></ToolCommand>
+        <ToolCommand onChange={handleChange} value={toolNames}></ToolCommand>
       </PopoverContent>
     </Popover>
   );

web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx

@@ -45,11 +45,6 @@ const Menus = [
   },
 ];
 
-const Options = Menus.reduce<string[]>((pre, cur) => {
-  pre.push(...cur.list);
-  return pre;
-}, []);
-
 type ToolCommandProps = {
   value?: string[];
   onChange?(values: string[]): void;
@@ -57,7 +52,6 @@ type ToolCommandProps = {
 
 export function ToolCommand({ value, onChange }: ToolCommandProps) {
   const [currentValue, setCurrentValue] = useState<string[]>([]);
-  console.log('🚀 ~ ToolCommand ~ currentValue:', currentValue);
 
   const toggleOption = useCallback(
     (option: string) => {

web/src/pages/agent/form/agent-form/tool-popover/use-update-tools.ts

@@ -0,0 +1,29 @@
+import { IAgentForm } from '@/interfaces/database/agent';
+import { AgentFormContext } from '@/pages/agent/context';
+import useGraphStore from '@/pages/agent/store';
+import { get } from 'lodash';
+import { useCallback, useContext } from 'react';
+
+export function useUpdateAgentNodeTools() {
+  const { updateNodeForm } = useGraphStore((state) => state);
+  const node = useContext(AgentFormContext);
+
+  const updateNodeTools = useCallback(
+    (value: string[]) => {
+      if (node?.id) {
+        const tools: IAgentForm['tools'] = get(node, 'data.form.tools');
+
+        const nextValue = value.reduce<IAgentForm['tools']>((pre, cur) => {
+          const tool = tools.find((x) => x.component_name === cur);
+          pre.push(tool ? tool : { component_name: cur, params: {} });
+          return pre;
+        }, []);
+
+        updateNodeForm(node?.id, nextValue, ['tools']);
+      }
+    },
+    [node, updateNodeForm],
+  );
+
+  return { updateNodeTools };
+}