Feat: Add a tool operator node from the agent form #3221 (#8344)

### What problem does this PR solve?
Feat: Add a tool operator node from the agent form #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,15 +3,33 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
-import { PropsWithChildren } from 'react';
+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 { ToolCommand } from './tool-command';
 
 export function ToolPopover({ children }: PropsWithChildren) {
+  const { addCanvasNode } = useContext(AgentInstanceContext);
+  const node = useContext(AgentFormContext);
+
+  const handleChange = useCallback(
+    (value: string[]) => {
+      if (Array.isArray(value) && value.length > 0) {
+        addCanvasNode(Operator.Tool, {
+          position: Position.Bottom,
+          nodeId: node?.id,
+        })();
+      }
+    },
+    [addCanvasNode, node?.id],
+  );
+
   return (
     <Popover>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent className="w-80 p-0">
-        <ToolCommand></ToolCommand>
+        <ToolCommand onChange={handleChange}></ToolCommand>
       </PopoverContent>
     </Popover>
   );