Improve Gallery Editor UX in AGS

python/packages/autogen-studio/autogenstudio/datamodel/__init__.py

@@ -2,7 +2,6 @@
 from .types import (
     Gallery,
     GalleryComponents,
-    GalleryItems,
     GalleryMetadata,
     LLMCallEventMessage,
     MessageConfig,
@@ -24,4 +23,7 @@
     "Response",
     "SocketMessage",
     "LLMCallEventMessage",
+    "Gallery",
+    "GalleryComponents",
+    "GalleryMetadata",
 ]

python/packages/autogen-studio/autogenstudio/datamodel/types.py

@@ -52,19 +52,15 @@ class GalleryComponents(BaseModel):
     models: List[ComponentModel]
     tools: List[ComponentModel]
     terminations: List[ComponentModel]
-
-
-class GalleryItems(BaseModel):
     teams: List[ComponentModel]
-    components: GalleryComponents
 
 
 class Gallery(BaseModel):
     id: str
     name: str
     url: Optional[str] = None
     metadata: GalleryMetadata
-    items: GalleryItems
+    components: GalleryComponents
 
 
 # web request/response data models

python/packages/autogen-studio/autogenstudio/gallery/builder.py

@@ -10,7 +10,7 @@
 from autogen_ext.models.openai import OpenAIChatCompletionClient
 from autogen_ext.models.openai._openai_client import AzureOpenAIChatCompletionClient
 
-from autogenstudio.datamodel import Gallery, GalleryComponents, GalleryItems, GalleryMetadata
+from autogenstudio.datamodel import Gallery, GalleryComponents, GalleryMetadata
 
 from . import tools as tools
 
@@ -119,11 +119,12 @@ def build(self) -> Gallery:
             name=self.name,
             url=self.url,
             metadata=self.metadata,
-            items=GalleryItems(
+            components=GalleryComponents(
                 teams=self.teams,
-                components=GalleryComponents(
-                    agents=self.agents, models=self.models, tools=self.tools, terminations=self.terminations
-                ),
+                agents=self.agents,
+                models=self.models,
+                tools=self.tools,
+                terminations=self.terminations,
             ),
         )
 
@@ -195,7 +196,11 @@ def create_default_gallery() -> Gallery:
 
     builder.add_termination(calc_text_term.dump_component())
     builder.add_termination(calc_max_term.dump_component())
-    builder.add_termination(calc_or_term.dump_component())
+    builder.add_termination(
+        calc_or_term.dump_component(),
+        label="OR Termination",
+        description="Termination condition that ends the conversation when either a message contains 'TERMINATE' or the maximum number of messages is reached.",
+    )
 
     # Create calculator team
     calc_team = RoundRobinGroupChat(participants=[calc_assistant], termination_condition=calc_or_term)
@@ -227,7 +232,11 @@ def create_default_gallery() -> Gallery:
         model_client=base_model,
         headless=True,
     )
-    builder.add_agent(websurfer_agent.dump_component())
+    builder.add_agent(
+        websurfer_agent.dump_component(),
+        label="Web Surfer Agent",
+        description="An agent that solves tasks by browsing the web using a headless browser.",
+    )
 
     # Create verification assistant
     verification_assistant = AssistantAgent(
@@ -236,7 +245,11 @@ def create_default_gallery() -> Gallery:
         system_message="You are a task verification assistant who is working with a web surfer agent to solve tasks. At each point, check if the task has been completed as requested by the user. If the websurfer_agent responds and the task has not yet been completed, respond with what is left to do and then say 'keep going'. If and only when the task has been completed, summarize and present a final answer that directly addresses the user task in detail and then respond with TERMINATE.",
         model_client=base_model,
     )
-    builder.add_agent(verification_assistant.dump_component())
+    builder.add_agent(
+        verification_assistant.dump_component(),
+        label="Verification Assistant",
+        description="an agent that verifies and summarizes information",
+    )
 
     # Create user proxy
     web_user_proxy = UserProxyAgent(

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

@@ -105,7 +105,7 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
   return (
     <div
       className={classNames(
-        "flex grow flex-col gap-y-5 overflow-y-auto border-r border-secondary bg-primary",
+        "flex grow border z-50  flex-col gap-y-5 overflow-y-auto border-r border-secondary bg-primary",
         "transition-all duration-300 ease-in-out",
         showFull ? "w-72 px-6" : "w-16 px-2"
       )}

python/packages/autogen-studio/frontend/src/components/views/atoms.tsx

@@ -57,6 +57,13 @@ export const LoadingDots = ({ size = 8 }) => {
 // import { Minimize2, Maximize2, ArrowsMaximize, X } from 'lucide-react';
 // import { Tooltip } from 'antd';
 
+function safeJsonStringify(input: any): string {
+  if (typeof input === "object" && input !== null) {
+    return JSON.stringify(input);
+  }
+  return input;
+}
+
 export const TruncatableText = memo(
   ({
     content = "",
@@ -76,10 +83,12 @@ export const TruncatableText = memo(
     const [isExpanded, setIsExpanded] = useState(false);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const threshold = isJson ? jsonThreshold : textThreshold;
+    content = safeJsonStringify(content) + "";
     const shouldTruncate = content.length > threshold;
 
-    const toggleExpand = () => {
+    const toggleExpand = (e: React.MouseEvent) => {
       setIsExpanded(!isExpanded);
+      e.stopPropagation();
     };
 
     const displayContent =