Add v1 Drag and Drop Team Composition to AGS

python/packages/autogen-agentchat/src/autogen_agentchat/teams/_group_chat/_magentic_one/_magentic_one_orchestrator.py

@@ -22,7 +22,6 @@
     ToolCallMessage,
     ToolCallResultMessage,
 )
-
 from ....state import MagenticOneOrchestratorState
 from .._base_group_chat_manager import BaseGroupChatManager
 from .._events import (

python/packages/autogen-studio/autogenstudio/database/component_factory.py

@@ -7,12 +7,21 @@
 import aiofiles
 import yaml
 from autogen_agentchat.agents import AssistantAgent, UserProxyAgent
-from autogen_agentchat.conditions import MaxMessageTermination, StopMessageTermination, TextMentionTermination
-from autogen_agentchat.teams import RoundRobinGroupChat, SelectorGroupChat, MagenticOneGroupChat
+from autogen_agentchat.conditions import (
+    ExternalTermination,
+    HandoffTermination,
+    MaxMessageTermination,
+    SourceMatchTermination,
+    StopMessageTermination,
+    TextMentionTermination,
+    TimeoutTermination,
+    TokenUsageTermination,
+)
+from autogen_agentchat.teams import MagenticOneGroupChat, RoundRobinGroupChat, SelectorGroupChat
 from autogen_core.components.tools import FunctionTool
-from autogen_ext.agents.web_surfer import MultimodalWebSurfer
 from autogen_ext.agents.file_surfer import FileSurfer
 from autogen_ext.agents.magentic_one import MagenticOneCoderAgent
+from autogen_ext.agents.web_surfer import MultimodalWebSurfer
 from autogen_ext.models import OpenAIChatCompletionClient
 
 from ..datamodel.types import (
@@ -38,7 +47,17 @@
 AgentComponent = Union[AssistantAgent, MultimodalWebSurfer, UserProxyAgent, FileSurfer, MagenticOneCoderAgent]
 ModelComponent = Union[OpenAIChatCompletionClient]
 ToolComponent = Union[FunctionTool]  # Will grow with more tool types
-TerminationComponent = Union[MaxMessageTermination, StopMessageTermination, TextMentionTermination]
+TerminationComponent = Union[
+    MaxMessageTermination,
+    StopMessageTermination,
+    TextMentionTermination,
+    TimeoutTermination,
+    ExternalTermination,
+    TokenUsageTermination,
+    HandoffTermination,
+    SourceMatchTermination,
+    StopMessageTermination,
+]
 
 Component = Union[TeamComponent, AgentComponent, ModelComponent, ToolComponent, TerminationComponent]
 

python/packages/autogen-studio/autogenstudio/version.py

@@ -1,3 +1,3 @@
-VERSION = "0.4.0.dev38"
+VERSION = "0.4.0.dev39"
 __version__ = VERSION
 APP_NAME = "autogenstudio"

python/packages/autogen-studio/frontend/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
+    "@dnd-kit/core": "^6.2.0",
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.0.18",
     "@mdx-js/react": "^3.1.0",

python/packages/autogen-studio/frontend/src/components/contentheader.tsx

@@ -48,7 +48,7 @@ const ContentHeader = ({
         </button>
 
         {/* Desktop Sidebar Toggle - Hidden on Mobile */}
-        <div className="hidden md:block">
+        {/* <div className="hidden md:block">
           <Tooltip title={isExpanded ? "Close Sidebar" : "Open Sidebar"}>
             <button
               onClick={() => setSidebarState({ isExpanded: !isExpanded })}
@@ -65,7 +65,7 @@ const ContentHeader = ({
               )}
             </button>
           </Tooltip>
-        </div>
+        </div> */}
 
         <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
           {/* Breadcrumbs */}

python/packages/autogen-studio/frontend/src/components/layout.tsx

@@ -7,6 +7,7 @@ import Footer from "./footer";
 import "antd/dist/reset.css";
 import SideBar from "./sidebar";
 import ContentHeader from "./contentheader";
+import { ConfigProvider, theme } from "antd";
 
 const classNames = (...classes: (string | undefined | boolean)[]) => {
   return classes.filter(Boolean).join(" ");
@@ -91,13 +92,21 @@ const Layout = ({
       >
         {showHeader && (
           <ContentHeader
-            title={title}
             isMobileMenuOpen={isMobileMenuOpen}
             onMobileMenuToggle={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
           />
         )}
 
-        <main className="flex-1 p-2 text-primary">{children}</main>
+        <ConfigProvider
+          theme={{
+            algorithm:
+              darkMode === "dark"
+                ? theme.darkAlgorithm
+                : theme.defaultAlgorithm,
+          }}
+        >
+          <main className="flex-1 p-2 text-primary">{children}</main>
+        </ConfigProvider>
 
         <Footer />
       </div>

python/packages/autogen-studio/frontend/src/components/sidebar.tsx

@@ -2,7 +2,14 @@ import React from "react";
 import { Link } from "gatsby";
 import { useConfigStore } from "../hooks/store";
 import { Tooltip } from "antd";
-import { Settings, MessagesSquare } from "lucide-react";
+import {
+  Settings,
+  MessagesSquare,
+  Blocks,
+  Bot,
+  PanelLeftClose,
+  PanelLeftOpen,
+} from "lucide-react";
 import Icon from "./icons";
 
 interface INavItem {
@@ -23,6 +30,12 @@ const navigation: INavItem[] = [
     icon: MessagesSquare,
     breadcrumbs: [{ name: "Playground", href: "/", current: true }],
   },
+  {
+    name: "Agent Teams",
+    href: "/build",
+    icon: Bot,
+    breadcrumbs: [{ name: "Build", href: "/build", current: true }],
+  },
 ];
 
 const classNames = (...classes: (string | undefined | boolean)[]) => {
@@ -51,9 +64,9 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
   const showFull = isMobile || isExpanded;
 
   const handleNavClick = (item: INavItem) => {
-    if (!isExpanded) {
-      setSidebarState({ isExpanded: true });
-    }
+    // if (!isExpanded) {
+    //   setSidebarState({ isExpanded: true });
+    // }
     setHeader({
       title: item.name,
       breadcrumbs: item.breadcrumbs,
@@ -165,11 +178,53 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
           <li
             className={classNames(
               "mt-auto -mx-2 mb-4",
-              !showFull && "flex justify-center"
+              !showFull && "flex flex-col items-center gap-1"
             )}
           >
             {!showFull && !isMobile ? (
-              <Tooltip title="Settings" placement="right">
+              <>
+                <Tooltip title="Settings" placement="right">
+                  <Link
+                    to="/settings"
+                    onClick={() =>
+                      setHeader({
+                        title: "Settings",
+                        breadcrumbs: [
+                          {
+                            name: "Settings",
+                            href: "/settings",
+                            current: true,
+                          },
+                        ],
+                      })
+                    }
+                    className="group flex gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary justify-center"
+                  >
+                    <Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
+                  </Link>
+                </Tooltip>
+                <div className="hidden md:block">
+                  <Tooltip
+                    title={isExpanded ? "Close Sidebar" : "Open Sidebar"}
+                    placement="right"
+                  >
+                    <button
+                      onClick={() =>
+                        setSidebarState({ isExpanded: !isExpanded })
+                      }
+                      className="p-2 rounded-md hover:bg-secondary hover:text-accent text-secondary transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50"
+                    >
+                      {isExpanded ? (
+                        <PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
+                      ) : (
+                        <PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
+                      )}
+                    </button>
+                  </Tooltip>
+                </div>
+              </>
+            ) : (
+              <div className="flex items-center gap-2">
                 <Link
                   to="/settings"
                   onClick={() =>
@@ -180,31 +235,24 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                       ],
                     })
                   }
-                  className={classNames(
-                    "group flex gap-x-3 rounded-md p-2 text-sm font-medium",
-                    "text-primary hover:text-accent hover:bg-secondary",
-                    !showFull && "justify-center"
-                  )}
+                  className="group flex flex-1 gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
                 >
                   <Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
+                  {showFull && "Settings"}
                 </Link>
-              </Tooltip>
-            ) : (
-              <Link
-                to="/settings"
-                onClick={() =>
-                  setHeader({
-                    title: "Settings",
-                    breadcrumbs: [
-                      { name: "Settings", href: "/settings", current: true },
-                    ],
-                  })
-                }
-                className="group flex gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
-              >
-                <Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
-                {showFull && "Settings"}
-              </Link>
+                <div className="hidden md:block">
+                  <button
+                    onClick={() => setSidebarState({ isExpanded: !isExpanded })}
+                    className="p-2 rounded-md hover:bg-secondary hover:text-accent text-secondary transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50"
+                  >
+                    {isExpanded ? (
+                      <PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
+                    ) : (
+                      <PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
+                    )}
+                  </button>
+                </div>
+              </div>
             )}
           </li>
         </ul>

python/packages/autogen-studio/frontend/src/components/types/datamodel.ts

@@ -91,6 +91,10 @@ export interface Session extends DBModel {
   team_id?: number;
 }
 
+export interface SessionRuns {
+  runs: Run[];
+}
+
 export interface BaseConfig {
   component_type: string;
   version?: string;
@@ -114,11 +118,17 @@ export type ModelTypes = "OpenAIChatCompletionClient";
 export type AgentTypes =
   | "AssistantAgent"
   | "CodingAssistantAgent"
+  | "UserProxyAgent"
   | "MultimodalWebSurfer"
   | "FileSurfer"
   | "MagenticOneCoderAgent";
 
-export type TeamTypes = "RoundRobinGroupChat" | "SelectorGroupChat" | "MagenticOneGroupChat";
+export type ToolTypes = "PythonFunction";
+
+export type TeamTypes =
+  | "RoundRobinGroupChat"
+  | "SelectorGroupChat"
+  | "MagenticOneGroupChat";
 
 // class ComponentType(str, Enum):
 //     TEAM = "team"
@@ -129,7 +139,9 @@ export type TeamTypes = "RoundRobinGroupChat" | "SelectorGroupChat" | "MagenticO
 export type TerminationTypes =
   | "MaxMessageTermination"
   | "StopMessageTermination"
-  | "TextMentionTermination";
+  | "TextMentionTermination"
+  | "TimeoutTermination"
+  | "CombinationTermination";
 
 export type ComponentTypes =
   | "team"
@@ -138,6 +150,13 @@ export type ComponentTypes =
   | "tool"
   | "termination";
 
+export type ComponentConfigTypes =
+  | TeamConfig
+  | AgentConfig
+  | ModelConfig
+  | ToolConfig
+  | TerminationConfig;
+
 export interface ModelConfig extends BaseConfig {
   model: string;
   model_type: ModelTypes;
@@ -149,7 +168,7 @@ export interface ToolConfig extends BaseConfig {
   name: string;
   description: string;
   content: string;
-  tool_type: string;
+  tool_type: ToolTypes;
 }
 export interface AgentConfig extends BaseConfig {
   name: string;
@@ -171,7 +190,7 @@ export interface TeamConfig extends BaseConfig {
   team_type: TeamTypes;
   model_client?: ModelConfig;
   termination_condition?: TerminationConfig;
-  selector_config?: string;
+  selector_prompt?: string;
 }
 
 export interface Team extends DBModel {
@@ -187,6 +206,7 @@ export interface TeamResult {
 export interface Run {
   id: string;
   created_at: string;
+  updated_at?: string;
   status: RunStatus;
   task: AgentMessageConfig;
   team_result: TeamResult | null;

python/packages/autogen-studio/frontend/src/components/views/playground/chat/agentflow/agentflow.tsx

@@ -15,6 +15,7 @@ import {
   ReactFlowProvider,
   NodeChange,
   applyNodeChanges,
+  MiniMap,
 } from "@xyflow/react";
 import Dagre from "@dagrejs/dagre";
 import "@xyflow/react/dist/style.css";
@@ -564,6 +565,7 @@ const AgentFlow: React.FC<AgentFlowProps> = ({ teamConfig, run }) => {
 
       <ReactFlow {...reactFlowProps}>
         {settings.showGrid && <Background />}
+        {settings.showMiniMap && <MiniMap />}
         <div className="absolute top-0 right-0 z-50">
           <AgentFlowToolbar {...toolbarProps} />
         </div>

python/packages/autogen-studio/frontend/src/components/views/playground/chat/agentflow/toolbar.tsx

@@ -14,6 +14,7 @@ import {
   MessageSquare,
   LayoutGrid,
   RotateCcw,
+  MapIcon,
 } from "lucide-react";
 import { useConfigStore } from "../../../../../hooks/store";
 
@@ -55,6 +56,12 @@ export const AgentFlowToolbar: React.FC<AgentFlowToolbarProps> = ({
     //   icon: <MessageSquare size={16} />,
     //   onClick: toggleSetting("showMessages"),
     // },
+    {
+      key: "miniMap",
+      label: "Mini Map",
+      icon: <MapIcon size={16} />,
+      onClick: toggleSetting("showMiniMap"),
+    },
     {
       type: "divider",
     },