Improve AGS Documentation (#5065)

* update deps to address dependabot issues.

* fill screen width, closes #5050

* documentation improvements

python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md

@@ -77,27 +77,27 @@ You have two options for installing from source: manually or using a dev contain
 2. Clone the AutoGen Studio repository and install its Python dependencies using `pip install -e .`
 3. Navigate to the `python/packages/autogen-studio/frontend` directory, install the dependencies, and build the UI:
 
-  ```bash
+```bash
-  npm install -g gatsby-cli
+npm install -g gatsby-cli
-  npm install --global yarn
+npm install --global yarn
-  cd frontend
+cd frontend
-  yarn install
+yarn install
-  yarn build
+yarn build
-  # Windows users may need alternative commands to build the frontend:
+# Windows users may need alternative commands to build the frontend:
-  gatsby clean && rmdir /s /q ..\\autogenstudio\\web\\ui 2>nul & (set \"PREFIX_PATH_VALUE=\" || ver>nul) && gatsby build --prefix-paths && xcopy /E /I /Y public ..\\autogenstudio\\web\\ui
+gatsby clean && rmdir /s /q ..\\autogenstudio\\web\\ui 2>nul & (set \"PREFIX_PATH_VALUE=\" || ver>nul) && gatsby build --prefix-paths && xcopy /E /I /Y public ..\\autogenstudio\\web\\ui
-  ```
+```
 
-### B)  Install from source using a dev container
+### B) Install from source using a dev container
 
 1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install VS Code, Docker and relevant extensions.
 2. Clone the AutoGen Studio repository.
 3. Open `python/packages/autogen-studio/`in VS Code. Click the blue button in bottom the corner or press F1 and select _"Dev Containers: Reopen in Container"_.
 4. Build the UI:
 
-  ```bash
+```bash
-  cd frontend
+cd frontend
-  yarn build
+yarn build
-  ```
+```
 
 ## Running the Application
 

python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/usage.md

@@ -71,11 +71,15 @@ Team Builder Operations:
     - Agents: Add models and tools
 - Save team configurations
 
-Component Library Management:
+## Gallery - Sharing and Reusing Components
+
+A Gallery is a collection of components - teams, agents, models, tools, and terminations - that can be shared and reused across projects.
+
+Users can create a local gallery or import a gallery (from a URL, a JSON file import or simply by copying and pasting the JSON). At any given time, users can select any of the current Gallery items as a **default gallery**. This **default gallery** will be used to populate the Team Builder sidebar with components.
 
 - Create new galleries via Gallery -> New Gallery
 - Edit gallery JSON as needed
-- Set a **default** gallery (click pin icon in sidebar) to make components available in Team Builder
+- Set a **default** gallery (click pin icon in sidebar) to make components available in Team Builder.
 
 ## Interactively Running Teams
 

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

@@ -16,6 +16,10 @@
     "clean": "gatsby clean",
     "typecheck": "tsc --noEmit"
   },
+  "resolutions": {
+    "cookie": "^0.7.1",
+    "path-to-regexp": "^0.1.12"
+  },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@dnd-kit/core": "^6.2.0",

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

@@ -247,32 +247,48 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
               </>
             ) : (
               <div className="flex items-center gap-2">
-                <Link
+                <div className="w-full  ">
-                  to="/settings"
+                  <div className="hidden">
-                  onClick={() =>
+                    {" "}
-                    setHeader({
+                    <Link
-                      title: "Settings",
+                      to="/settings"
-                      breadcrumbs: [
+                      onClick={() =>
-                        { name: "Settings", href: "/settings", current: true },
+                        setHeader({
-                      ],
+                          title: "Settings",
-                    })
+                          breadcrumbs: [
-                  }
+                            {
-                  className="group flex flex-1 gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
+                              name: "Settings",
-                >
+                              href: "/settings",
-                  <Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
+                              current: true,
-                  {showFull && "Settings"}
+                            },
-                </Link>
+                          ],
+                        })
+                      }
+                      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>
+                  </div>
+                </div>
                 <div className="hidden md:block">
-                  <button
+                  <Tooltip
-                    onClick={() => setSidebarState({ isExpanded: !isExpanded })}
+                    title={`${isExpanded ? "Close Sidebar" : "Open Sidebar"}`}
-                    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"
+                    placement="right"
                   >
-                    {isExpanded ? (
+                    <button
-                      <PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
+                      onClick={() =>
-                    ) : (
+                        setSidebarState({ isExpanded: !isExpanded })
-                      <PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
+                      }
-                    )}
+                      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"
-                  </button>
+                    >
+                      {isExpanded ? (
+                        <PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
+                      ) : (
+                        <PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
+                      )}
+                    </button>
+                  </Tooltip>
                 </div>
               </div>
             )}

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

@@ -5,7 +5,7 @@ import { Download } from "lucide-react";
 
 const PythonGuide: React.FC = () => {
   return (
-    <div className="max-w-4xl">
+    <div className="">
       <h1 className="tdext-2xl font-bold mb-6">
         Using AutoGen Studio Teams in Python Code and REST API
       </h1>

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

@@ -31,10 +31,10 @@ export const DeployManager: React.FC = () => {
   }, [guides, currentGuide]);
 
   return (
-    <div className="relative flex h-full w-full">
+    <div className="relative    flex h-full w-full">
       {/* Sidebar */}
       <div
-        className={`absolute left-0 top-0 h-full transition-all duration-200 ease-in-out ${
+        className={`absolute  left-0 top-0 h-full transition-all duration-200 ease-in-out ${
           isSidebarOpen ? "w-64" : "w-12"
         }`}
       >
@@ -50,7 +50,7 @@ export const DeployManager: React.FC = () => {
 
       {/* Main Content */}
       <div
-        className={`flex-1 transition-all -mr-6 duration-200 ${
+        className={`flex-1 transition-all max-w-5xl  -mr-6 duration-200 ${
           isSidebarOpen ? "ml-64" : "ml-12"
         }`}
       >

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

@@ -166,7 +166,7 @@ export const GalleryManager: React.FC = () => {
 
       {/* Main Content */}
       <div
-        className={`flex-1 transition-all -mr-6 duration-200 ${
+        className={`flex-1 transition-all max-w-5xl -mr-6 duration-200 ${
           isSidebarOpen ? "ml-64" : "ml-12"
         }`}
       >

python/packages/autogen-studio/frontend/src/styles/global.css

@@ -44,10 +44,10 @@ html {
 
 body {
   padding: 0px 64px 0px 64px;
-  @apply px-4 md:px-8 lg:px-16 w-full !important;
+  @apply px-4 md:px-4 lg:px-8 w-full !important;
   margin: 0px auto;
   min-width: 300px;
-  max-width: 1900px;
+  /* max-width: 1900px; */
   background: transparent;
   height: 100%;
   /* border: 2px solid green; */