Improve Gallery Editor UX in AGS (#5613)

<!-- Thank you for your contribution! Please review
https://microsoft.github.io/autogen/docs/Contribute before opening a
pull request. -->

<!-- Please add a reviewer to the assignee section when you create a PR.
If you don't have the access to it, we will shortly find a reviewer and
assign them to your PR. -->

## Why are these changes needed? 

Fixes the problem where Gallery items could only be modified via JSON 

This PR does the following

- Refactor TeamBuilder to have modular component editor UI primarily
focused on editing each component type.
- Refactor the Gallery UX 
   - improve layout to use tabs for each component type 
- enable editing of each component item by reusing the component editor
- Enable switching between form editing and UI editing for coponent
editor view

This way, gallery items can be readily modified and then reused in the
component library in team builder.
It also implements an upate to the Gallery data structure to make it
more intuitive - it has a components field that has teams, agents,
models ...

<img width="1598" alt="image"
src="https://github.com/user-attachments/assets/3c3a228a-0bd2-4fc1-85ec-c9685c80bf72"
/>
<img width="1614" alt="image"
src="https://github.com/user-attachments/assets/5b6ed840-9c48-47bc-8c17-2aa50c7dcb99"
/>


<!-- Please give a short summary of the change and the problem this
solves. -->

## Related issue number

<!-- For example: "Closes #1234" -->

Closes #5465 
Closes #5047
 
cc @nour-bouzid @balakreshnan @EItanya @joslat @IustinT @LeonG7
## Checks

- [ ] I've included any doc changes needed for
<https://microsoft.github.io/autogen/>. See
<https://github.com/microsoft/autogen/blob/main/CONTRIBUTING.md> to
build and test documentation locally.
- [ ] I've added tests (if relevant) corresponding to the changes
introduced in this PR.
- [ ] I've made sure all auto checks have passed.

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 =