Add Agent Blocks to Flow

This commit adds the ability to add Agent blocks to the
flow.  Clicking on an agent in the My Agents menu will add
it to the flow.  The block includes the necessary
information such as input/output schemas.

autogpt_platform/frontend/src/components/builder/block-menu/default/MyAgentsContent.tsx

@@ -2,6 +2,13 @@ import React from "react";
 import UGCAgentBlock from "../UGCAgentBlock";
 import { usePagination } from "@/hooks/usePagination";
 import ErrorState from "../ErrorState";
+import {
+  Block,
+  BlockUIType,
+  LibraryAgent,
+  SpecialBlockID,
+} from "@/lib/autogpt-server-api";
+import { useBlockMenuContext } from "../block-menu-provider";
 
 const MyAgentsContent: React.FC = () => {
   const {
@@ -16,6 +23,32 @@ const MyAgentsContent: React.FC = () => {
     request: { apiType: "library-agents" },
     pageSize: 10,
   });
+  const { addNode } = useBlockMenuContext();
+
+  const handleAddAgent = (agent: LibraryAgent) => {
+    const block = {
+      id: SpecialBlockID.AGENT,
+      name: agent.name,
+      description:
+        `Ver.${agent.graph_version}` +
+        (agent.description ? ` | ${agent.description}` : ""),
+      categories: [{ category: "AGENT", description: "" }],
+      inputSchema: agent.input_schema,
+      outputSchema: agent.output_schema,
+      staticOutput: false,
+      uiType: BlockUIType.AGENT,
+      uiKey: agent.id,
+      costs: [],
+      hardcodedValues: {
+        graph_id: agent.graph_id,
+        graph_version: agent.graph_version,
+        input_schema: agent.input_schema,
+        output_schema: agent.output_schema,
+      },
+    } as Block;
+
+    addNode(block);
+  };
 
   if (loading) {
     return (
@@ -57,6 +90,7 @@ const MyAgentsContent: React.FC = () => {
             edited_time={agent.updated_at}
             version={agent.graph_version}
             image_url={agent.image_url}
+            onClick={() => handleAddAgent(agent)}
           />
         ))}
         {loadingMore && hasMore && (