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/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,13 +247,20 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
               </>
             ) : (
               <div className="flex items-center gap-2">
+                <div className="w-full  ">
+                  <div className="hidden">
+                    {" "}
                     <Link
                       to="/settings"
                       onClick={() =>
                         setHeader({
                           title: "Settings",
                           breadcrumbs: [
-                        { name: "Settings", href: "/settings", current: true },
+                            {
+                              name: "Settings",
+                              href: "/settings",
+                              current: true,
+                            },
                           ],
                         })
                       }
@@ -262,9 +269,17 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                       <Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
                       {showFull && "Settings"}
                     </Link>
+                  </div>
+                </div>
                 <div className="hidden md:block">
+                  <Tooltip
+                    title={`${isExpanded ? "Close Sidebar" : "Open Sidebar"}`}
+                    placement="right"
+                  >
                     <button
-                    onClick={() => setSidebarState({ isExpanded: !isExpanded })}
+                      onClick={() =>
+                        setSidebarState({ isExpanded: !isExpanded })
+                      }
                       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"
                     >
                       {isExpanded ? (
@@ -273,6 +288,7 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                         <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

@@ -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; */