Skip to content

Commit 85cf942

Browse files
victordibiarysweet
victordibia
and
rysweet
authored
Add v1 Drag and Drop Team Composition to AGS (#4609)
* v1 progress on drag_drop * add v1 for node deletions * major refactor, add sidebar to teams and session playground * format updates * formatting updates * update formatting * formatting and other checks * add mangentic one deps * general refactor, fix new team creation bug etc... * minor bugfix * update uv lock --------- Co-authored-by: Ryan Sweet <[email protected]>
1 parent b776c53 commit 85cf942

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+4438
-1257
lines changed

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

+23-4
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,22 @@
77
import aiofiles
88
import yaml
99
from autogen_agentchat.agents import AssistantAgent, UserProxyAgent
10-
from autogen_agentchat.conditions import MaxMessageTermination, StopMessageTermination, TextMentionTermination
10+
from autogen_agentchat.conditions import (
11+
ExternalTermination,
12+
HandoffTermination,
13+
MaxMessageTermination,
14+
SourceMatchTermination,
15+
StopMessageTermination,
16+
TextMentionTermination,
17+
TimeoutTermination,
18+
TokenUsageTermination,
19+
)
1120
from autogen_agentchat.teams import MagenticOneGroupChat, RoundRobinGroupChat, SelectorGroupChat
12-
from autogen_core.tools import FunctionTool
21+
from autogen_core.components.tools import FunctionTool
1322
from autogen_ext.agents.file_surfer import FileSurfer
1423
from autogen_ext.agents.magentic_one import MagenticOneCoderAgent
1524
from autogen_ext.agents.web_surfer import MultimodalWebSurfer
16-
from autogen_ext.models.openai import OpenAIChatCompletionClient
25+
from autogen_ext.models import OpenAIChatCompletionClient
1726

1827
from ..datamodel.types import (
1928
AgentConfig,
@@ -38,7 +47,17 @@
3847
AgentComponent = Union[AssistantAgent, MultimodalWebSurfer, UserProxyAgent, FileSurfer, MagenticOneCoderAgent]
3948
ModelComponent = Union[OpenAIChatCompletionClient]
4049
ToolComponent = Union[FunctionTool] # Will grow with more tool types
41-
TerminationComponent = Union[MaxMessageTermination, StopMessageTermination, TextMentionTermination]
50+
TerminationComponent = Union[
51+
MaxMessageTermination,
52+
StopMessageTermination,
53+
TextMentionTermination,
54+
TimeoutTermination,
55+
ExternalTermination,
56+
TokenUsageTermination,
57+
HandoffTermination,
58+
SourceMatchTermination,
59+
StopMessageTermination,
60+
]
4261

4362
Component = Union[TeamComponent, AgentComponent, ModelComponent, ToolComponent, TerminationComponent]
4463

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
VERSION = "0.4.0.dev38"
1+
VERSION = "0.4.0.dev41"
22
__version__ = VERSION
33
APP_NAME = "autogenstudio"

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

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
},
1919
"dependencies": {
2020
"@dagrejs/dagre": "^1.1.4",
21+
"@dnd-kit/core": "^6.2.0",
2122
"@headlessui/react": "^2.2.0",
2223
"@heroicons/react": "^2.0.18",
2324
"@mdx-js/react": "^3.1.0",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ContentHeader = ({
4848
</button>
4949

5050
{/* Desktop Sidebar Toggle - Hidden on Mobile */}
51-
<div className="hidden md:block">
51+
{/* <div className="hidden md:block">
5252
<Tooltip title={isExpanded ? "Close Sidebar" : "Open Sidebar"}>
5353
<button
5454
onClick={() => setSidebarState({ isExpanded: !isExpanded })}
@@ -65,7 +65,7 @@ const ContentHeader = ({
6565
)}
6666
</button>
6767
</Tooltip>
68-
</div>
68+
</div> */}
6969

7070
<div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
7171
{/* Breadcrumbs */}

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

+11-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Footer from "./footer";
77
import "antd/dist/reset.css";
88
import SideBar from "./sidebar";
99
import ContentHeader from "./contentheader";
10+
import { ConfigProvider, theme } from "antd";
1011

1112
const classNames = (...classes: (string | undefined | boolean)[]) => {
1213
return classes.filter(Boolean).join(" ");
@@ -91,13 +92,21 @@ const Layout = ({
9192
>
9293
{showHeader && (
9394
<ContentHeader
94-
title={title}
9595
isMobileMenuOpen={isMobileMenuOpen}
9696
onMobileMenuToggle={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
9797
/>
9898
)}
9999

100-
<main className="flex-1 p-2 text-primary">{children}</main>
100+
<ConfigProvider
101+
theme={{
102+
algorithm:
103+
darkMode === "dark"
104+
? theme.darkAlgorithm
105+
: theme.defaultAlgorithm,
106+
}}
107+
>
108+
<main className="flex-1 p-2 text-primary">{children}</main>
109+
</ConfigProvider>
101110

102111
<Footer />
103112
</div>

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

+79-31
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import React from "react";
22
import { Link } from "gatsby";
33
import { useConfigStore } from "../hooks/store";
44
import { Tooltip } from "antd";
5-
import { Settings, MessagesSquare } from "lucide-react";
5+
import {
6+
Settings,
7+
MessagesSquare,
8+
Blocks,
9+
Bot,
10+
PanelLeftClose,
11+
PanelLeftOpen,
12+
} from "lucide-react";
613
import Icon from "./icons";
714

815
interface INavItem {
@@ -23,6 +30,12 @@ const navigation: INavItem[] = [
2330
icon: MessagesSquare,
2431
breadcrumbs: [{ name: "Playground", href: "/", current: true }],
2532
},
33+
{
34+
name: "Agent Teams",
35+
href: "/build",
36+
icon: Bot,
37+
breadcrumbs: [{ name: "Build", href: "/build", current: true }],
38+
},
2639
];
2740

2841
const classNames = (...classes: (string | undefined | boolean)[]) => {
@@ -51,9 +64,9 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
5164
const showFull = isMobile || isExpanded;
5265

5366
const handleNavClick = (item: INavItem) => {
54-
if (!isExpanded) {
55-
setSidebarState({ isExpanded: true });
56-
}
67+
// if (!isExpanded) {
68+
// setSidebarState({ isExpanded: true });
69+
// }
5770
setHeader({
5871
title: item.name,
5972
breadcrumbs: item.breadcrumbs,
@@ -126,12 +139,12 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
126139
onClick={() => handleNavClick(item)}
127140
className={classNames(
128141
// Base styles
129-
"group flex gap-x-3 rounded-md p-2 text-sm font-medium",
142+
"group flex gap-x-3 rounded-md mr-2 p-2 text-sm font-medium",
130143
!showFull && "justify-center",
131144
// Color states
132145
isActive
133-
? "bg-secondary/50 text-accent"
134-
: "text-secondary hover:bg-secondary/50 hover:text-accent"
146+
? "bg-tertiary text-accent "
147+
: "text-secondary hover:bg-tertiary hover:text-accent"
135148
)}
136149
>
137150
<IconComponent
@@ -165,11 +178,53 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
165178
<li
166179
className={classNames(
167180
"mt-auto -mx-2 mb-4",
168-
!showFull && "flex justify-center"
181+
!showFull && "flex flex-col items-center gap-1"
169182
)}
170183
>
171184
{!showFull && !isMobile ? (
172-
<Tooltip title="Settings" placement="right">
185+
<>
186+
<Tooltip title="Settings" placement="right">
187+
<Link
188+
to="/settings"
189+
onClick={() =>
190+
setHeader({
191+
title: "Settings",
192+
breadcrumbs: [
193+
{
194+
name: "Settings",
195+
href: "/settings",
196+
current: true,
197+
},
198+
],
199+
})
200+
}
201+
className="group flex gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary justify-center"
202+
>
203+
<Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
204+
</Link>
205+
</Tooltip>
206+
<div className="hidden md:block">
207+
<Tooltip
208+
title={isExpanded ? "Close Sidebar" : "Open Sidebar"}
209+
placement="right"
210+
>
211+
<button
212+
onClick={() =>
213+
setSidebarState({ isExpanded: !isExpanded })
214+
}
215+
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"
216+
>
217+
{isExpanded ? (
218+
<PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
219+
) : (
220+
<PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
221+
)}
222+
</button>
223+
</Tooltip>
224+
</div>
225+
</>
226+
) : (
227+
<div className="flex items-center gap-2">
173228
<Link
174229
to="/settings"
175230
onClick={() =>
@@ -180,31 +235,24 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
180235
],
181236
})
182237
}
183-
className={classNames(
184-
"group flex gap-x-3 rounded-md p-2 text-sm font-medium",
185-
"text-primary hover:text-accent hover:bg-secondary",
186-
!showFull && "justify-center"
187-
)}
238+
className="group flex flex-1 gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
188239
>
189240
<Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
241+
{showFull && "Settings"}
190242
</Link>
191-
</Tooltip>
192-
) : (
193-
<Link
194-
to="/settings"
195-
onClick={() =>
196-
setHeader({
197-
title: "Settings",
198-
breadcrumbs: [
199-
{ name: "Settings", href: "/settings", current: true },
200-
],
201-
})
202-
}
203-
className="group flex gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
204-
>
205-
<Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
206-
{showFull && "Settings"}
207-
</Link>
243+
<div className="hidden md:block">
244+
<button
245+
onClick={() => setSidebarState({ isExpanded: !isExpanded })}
246+
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"
247+
>
248+
{isExpanded ? (
249+
<PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
250+
) : (
251+
<PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
252+
)}
253+
</button>
254+
</div>
255+
</div>
208256
)}
209257
</li>
210258
</ul>

0 commit comments

Comments
 (0)