Feat: Add tool nodes and tool drop-down menu #3221 (#8335)

### What problem does this PR solve?

Feat: Add tool nodes and tool drop-down menu #3221

### Type of change


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

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

@@ -21,7 +21,8 @@ import { AgentInstanceContext } from '../../context';
 import { INextOperatorForm } from '../../interface';
 import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
-import { useValues } from './use-values';
+import { ToolPopover } from './tool-popover';
+import { useToolOptions, useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
 const FormSchema = z.object({
@@ -66,6 +67,8 @@ const AgentForm = ({ node }: INextOperatorForm) => {
 
   const { addCanvasNode } = useContext(AgentInstanceContext);
 
+  const toolOptions = useToolOptions();
+
   return (
     <Form {...form}>
       <form
@@ -110,6 +113,9 @@ const AgentForm = ({ node }: INextOperatorForm) => {
             )}
           />
         </FormContainer>
+        <ToolPopover>
+          <BlockButton>Add Tool</BlockButton>
+        </ToolPopover>
         <BlockButton
           onClick={addCanvasNode(Operator.Agent, {
             nodeId: node?.id,