Skip to content

Commit c714515

Browse files
victordibiaekzhu
victordibia
and
ekzhu
authored
Add Component Gallery to AGS (#4693)
* fix message instance check error * general refactor, enable 3rd party gallery * format fixes * update detail view * improve detail view and test sync capabilities * minor tweaks, version bump * version bump * update uv.lock * update lockfile * update uv.lock * update uv lock * pin uv version * uv version * revert * revert * minor side bar and drag drop layout fixes * revert version numbering. --------- Co-authored-by: Eric Zhu <[email protected]>
1 parent 0bfc065 commit c714515

33 files changed

+2122
-566
lines changed

‎python/packages/autogen-studio/autogenstudio/web/managers/connection.py

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,16 @@
55
from uuid import UUID
66

77
from autogen_agentchat.base._task import TaskResult
8-
from autogen_agentchat.messages import AgentMessage, ChatMessage, MultiModalMessage, TextMessage
8+
from autogen_agentchat.messages import (
9+
AgentMessage,
10+
ChatMessage,
11+
HandoffMessage,
12+
MultiModalMessage,
13+
StopMessage,
14+
TextMessage,
15+
ToolCallMessage,
16+
ToolCallResultMessage,
17+
)
918
from autogen_core import CancellationToken
1019
from autogen_core import Image as AGImage
1120
from fastapi import WebSocket, WebSocketDisconnect
@@ -91,16 +100,22 @@ async def start_stream(self, run_id: UUID, task: str, team_config: dict) -> None
91100
if formatted_message:
92101
await self._send_message(run_id, formatted_message)
93102

94-
# Save message if it's a content message
95-
if isinstance(message, TextMessage):
96-
await self._save_message(run_id, message)
97-
elif isinstance(message, MultiModalMessage):
103+
# Save messages by concrete type
104+
if isinstance(
105+
message,
106+
(
107+
TextMessage,
108+
MultiModalMessage,
109+
StopMessage,
110+
HandoffMessage,
111+
ToolCallMessage,
112+
ToolCallResultMessage,
113+
),
114+
):
98115
await self._save_message(run_id, message)
99116
# Capture final result if it's a TeamResult
100117
elif isinstance(message, TeamResult):
101118
final_result = message.model_dump()
102-
elif isinstance(message, (AgentMessage, ChatMessage)):
103-
await self._save_message(run_id, message)
104119
if not cancellation_token.is_cancelled() and run_id not in self._closed_connections:
105120
if final_result:
106121
await self._update_run(run_id, RunStatus.COMPLETE, team_result=final_result)
@@ -301,19 +316,20 @@ def _format_message(self, message: Any) -> Optional[dict]:
301316
]
302317
return {"type": "message", "data": message_dump}
303318

304-
elif isinstance(message, TextMessage):
305-
return {"type": "message", "data": message.model_dump()}
306-
307319
elif isinstance(message, TeamResult):
308320
return {
309321
"type": "result",
310322
"data": message.model_dump(),
311323
"status": "complete",
312324
}
313-
elif isinstance(message, (AgentMessage, ChatMessage)):
325+
326+
elif isinstance(
327+
message, (TextMessage, StopMessage, HandoffMessage, ToolCallMessage, ToolCallResultMessage)
328+
):
314329
return {"type": "message", "data": message.model_dump()}
315330

316331
return None
332+
317333
except Exception as e:
318334
logger.error(f"Message formatting error: {e}")
319335
return None

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@ const Layout = ({
9999

100100
<ConfigProvider
101101
theme={{
102+
token: {
103+
borderRadius: 4,
104+
colorBgBase: darkMode === "dark" ? "#05080C" : "#ffffff",
105+
},
102106
algorithm:
103107
darkMode === "dark"
104108
? theme.darkAlgorithm

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

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Bot,
1010
PanelLeftClose,
1111
PanelLeftOpen,
12+
GalleryHorizontalEnd,
1213
} from "lucide-react";
1314
import Icon from "./icons";
1415

@@ -24,17 +25,23 @@ interface INavItem {
2425
}
2526

2627
const navigation: INavItem[] = [
28+
{
29+
name: "Team Builder",
30+
href: "/build",
31+
icon: Bot,
32+
breadcrumbs: [{ name: "Team Builder", href: "/build", current: true }],
33+
},
2734
{
2835
name: "Playground",
2936
href: "/",
3037
icon: MessagesSquare,
3138
breadcrumbs: [{ name: "Playground", href: "/", current: true }],
3239
},
3340
{
34-
name: "Agent Teams",
35-
href: "/build",
36-
icon: Bot,
37-
breadcrumbs: [{ name: "Build", href: "/build", current: true }],
41+
name: "Gallery",
42+
href: "/gallery",
43+
icon: GalleryHorizontalEnd,
44+
breadcrumbs: [{ name: "Gallery", href: "/gallery", current: true }],
3845
},
3946
];
4047

@@ -134,29 +141,37 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
134141
const IconComponent = item.icon;
135142

136143
const navLink = (
137-
<Link
138-
to={item.href}
139-
onClick={() => handleNavClick(item)}
140-
className={classNames(
141-
// Base styles
142-
"group flex gap-x-3 rounded-md mr-2 p-2 text-sm font-medium",
143-
!showFull && "justify-center",
144-
// Color states
145-
isActive
146-
? "bg-tertiary text-accent "
147-
: "text-secondary hover:bg-tertiary hover:text-accent"
144+
<div className="relative">
145+
{isActive && (
146+
<div className="bg-accent absolute top-1 left-0.5 z-50 h-8 w-1 bg-opacity-80 rounded">
147+
{" "}
148+
</div>
148149
)}
149-
>
150-
<IconComponent
150+
<Link
151+
to={item.href}
152+
onClick={() => handleNavClick(item)}
151153
className={classNames(
152-
"h-6 w-6 shrink-0",
154+
// Base styles
155+
"group ml-1 flex gap-x-3 rounded-md mr-2 p-2 text-sm font-medium",
156+
!showFull && "justify-center",
157+
// Color states
153158
isActive
154-
? "text-accent"
155-
: "text-secondary group-hover:text-accent"
159+
? "bg-secondary text-primary "
160+
: "text-secondary hover:bg-tertiary hover:text-accent"
156161
)}
157-
/>
158-
{showFull && item.name}
159-
</Link>
162+
>
163+
{" "}
164+
<IconComponent
165+
className={classNames(
166+
"h-6 w-6 shrink-0",
167+
isActive
168+
? "text-accent"
169+
: "text-secondary group-hover:text-accent"
170+
)}
171+
/>
172+
{showFull && item.name}
173+
</Link>
174+
</div>
160175
);
161176

162177
return (

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

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export interface SessionRuns {
9898
export interface BaseConfig {
9999
component_type: string;
100100
version?: string;
101+
description?: string;
101102
}
102103

103104
export interface WebSocketMessage {
@@ -119,7 +120,6 @@ export type ModelTypes =
119120

120121
export type AgentTypes =
121122
| "AssistantAgent"
122-
| "CodingAssistantAgent"
123123
| "UserProxyAgent"
124124
| "MultimodalWebSurfer"
125125
| "FileSurfer"
@@ -132,12 +132,6 @@ export type TeamTypes =
132132
| "SelectorGroupChat"
133133
| "MagenticOneGroupChat";
134134

135-
// class ComponentType(str, Enum):
136-
// TEAM = "team"
137-
// AGENT = "agent"
138-
// MODEL = "model"
139-
// TOOL = "tool"
140-
// TERMINATION = "termination"
141135
export type TerminationTypes =
142136
| "MaxMessageTermination"
143137
| "StopMessageTermination"
@@ -153,11 +147,11 @@ export type ComponentTypes =
153147
| "termination";
154148

155149
export type ComponentConfigTypes =
156-
| TeamConfigTypes
150+
| TeamConfig
157151
| AgentConfig
158-
| ModelConfigTypes
152+
| ModelConfig
159153
| ToolConfig
160-
| TerminationConfigTypes;
154+
| TerminationConfig;
161155

162156
export interface BaseModelConfig extends BaseConfig {
163157
model: string;
@@ -178,22 +172,57 @@ export interface OpenAIModelConfig extends BaseModelConfig {
178172
model_type: "OpenAIChatCompletionClient";
179173
}
180174

181-
export type ModelConfigTypes = AzureOpenAIModelConfig | OpenAIModelConfig;
175+
export type ModelConfig = AzureOpenAIModelConfig | OpenAIModelConfig;
182176

183-
export interface ToolConfig extends BaseConfig {
177+
export interface BaseToolConfig extends BaseConfig {
184178
name: string;
185179
description: string;
186180
content: string;
187181
tool_type: ToolTypes;
188182
}
189-
export interface AgentConfig extends BaseConfig {
183+
184+
export interface PythonFunctionToolConfig extends BaseToolConfig {
185+
tool_type: "PythonFunction";
186+
}
187+
188+
export type ToolConfig = PythonFunctionToolConfig;
189+
190+
export interface BaseAgentConfig extends BaseConfig {
190191
name: string;
191192
agent_type: AgentTypes;
192193
system_message?: string;
193-
model_client?: ModelConfigTypes;
194+
model_client?: ModelConfig;
194195
tools?: ToolConfig[];
195196
description?: string;
196197
}
198+
199+
export interface AssistantAgentConfig extends BaseAgentConfig {
200+
agent_type: "AssistantAgent";
201+
}
202+
203+
export interface UserProxyAgentConfig extends BaseAgentConfig {
204+
agent_type: "UserProxyAgent";
205+
}
206+
207+
export interface MultimodalWebSurferAgentConfig extends BaseAgentConfig {
208+
agent_type: "MultimodalWebSurfer";
209+
}
210+
211+
export interface FileSurferAgentConfig extends BaseAgentConfig {
212+
agent_type: "FileSurfer";
213+
}
214+
215+
export interface MagenticOneCoderAgentConfig extends BaseAgentConfig {
216+
agent_type: "MagenticOneCoderAgent";
217+
}
218+
219+
export type AgentConfig =
220+
| AssistantAgentConfig
221+
| UserProxyAgentConfig
222+
| MultimodalWebSurferAgentConfig
223+
| FileSurferAgentConfig
224+
| MagenticOneCoderAgentConfig;
225+
197226
// export interface TerminationConfig extends BaseConfig {
198227
// termination_type: TerminationTypes;
199228
// max_messages?: number;
@@ -217,28 +246,19 @@ export interface TextMentionTerminationConfig extends BaseTerminationConfig {
217246
export interface CombinationTerminationConfig extends BaseTerminationConfig {
218247
termination_type: "CombinationTermination";
219248
operator: "and" | "or";
220-
conditions: TerminationConfigTypes[];
249+
conditions: TerminationConfig[];
221250
}
222251

223-
export type TerminationConfigTypes =
252+
export type TerminationConfig =
224253
| MaxMessageTerminationConfig
225254
| TextMentionTerminationConfig
226255
| CombinationTerminationConfig;
227256

228-
// export interface TeamConfig extends BaseConfig {
229-
// name: string;
230-
// participants: AgentConfig[];
231-
// team_type: TeamTypes;
232-
// model_client?: ModelConfig;
233-
// termination_condition?: TerminationConfig;
234-
// selector_prompt?: string;
235-
// }
236-
237257
export interface BaseTeamConfig extends BaseConfig {
238258
name: string;
239259
participants: AgentConfig[];
240260
team_type: TeamTypes;
241-
termination_condition?: TerminationConfigTypes;
261+
termination_condition?: TerminationConfig;
242262
}
243263

244264
export interface RoundRobinGroupChatConfig extends BaseTeamConfig {
@@ -248,15 +268,13 @@ export interface RoundRobinGroupChatConfig extends BaseTeamConfig {
248268
export interface SelectorGroupChatConfig extends BaseTeamConfig {
249269
team_type: "SelectorGroupChat";
250270
selector_prompt: string;
251-
model_client: ModelConfigTypes;
271+
model_client: ModelConfig;
252272
}
253273

254-
export type TeamConfigTypes =
255-
| RoundRobinGroupChatConfig
256-
| SelectorGroupChatConfig;
274+
export type TeamConfig = RoundRobinGroupChatConfig | SelectorGroupChatConfig;
257275

258276
export interface Team extends DBModel {
259-
config: TeamConfigTypes;
277+
config: TeamConfig;
260278
}
261279

262280
export interface TeamResult {

0 commit comments

Comments
 (0)