Add v1 Drag and Drop Team Composition to AGS

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

@@ -7,13 +7,22 @@
 import aiofiles
 import yaml
 from autogen_agentchat.agents import AssistantAgent, UserProxyAgent
-from autogen_agentchat.conditions import MaxMessageTermination, StopMessageTermination, TextMentionTermination
+from autogen_agentchat.conditions import (
+    ExternalTermination,
+    HandoffTermination,
+    MaxMessageTermination,
+    SourceMatchTermination,
+    StopMessageTermination,
+    TextMentionTermination,
+    TimeoutTermination,
+    TokenUsageTermination,
+)
 from autogen_agentchat.teams import MagenticOneGroupChat, RoundRobinGroupChat, SelectorGroupChat
-from autogen_core.tools import FunctionTool
+from autogen_core.components.tools import FunctionTool
 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.openai import OpenAIChatCompletionClient
+from autogen_ext.models import OpenAIChatCompletionClient
 
 from ..datamodel.types import (
     AgentConfig,
@@ -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.dev41"
 __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,
@@ -126,12 +139,12 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                     onClick={() => handleNavClick(item)}
                     className={classNames(
                       // Base styles
-                      "group flex gap-x-3 rounded-md p-2 text-sm font-medium",
+                      "group flex gap-x-3 rounded-md mr-2  p-2 text-sm font-medium",
                       !showFull && "justify-center",
                       // Color states
                       isActive
-                        ? "bg-secondary/50 text-accent"
-                        : "text-secondary hover:bg-secondary/50 hover:text-accent"
+                        ? "bg-tertiary text-accent "
+                        : "text-secondary hover:bg-tertiary hover:text-accent"
                     )}
                   >
                     <IconComponent
@@ -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>