feat(frontend): new navbar design (#10341)

## Changes 🏗️ <img width="900" height="327" alt="Screenshot 2025-07-10 at 20 12 38" src="https://github.com/user-attachments/assets/044f00ed-7e05-46b7-a821-ce1cb0ee9298" /> <br /><br /> Navbar updated to look pretty from the new designs: - the logo is now centred instead of on the left - menu items have been updated to a smaller font-size and less radius - icons have been updated I also generated the API files ( _sorry for the noise_ ). I had to do some border-radius and button updates on the atoms/tokens for it to look good. ## Checklist 📋 ## For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Login/logout - [x] The new navbar looks good across screens ## For configuration changes No config changes
2026-02-10 14:55:16 -05:00 · 2025-07-10 22:06:12 +04:00
parent 22c76eab61
commit 2fda8dfd32
32 changed files with 923 additions and 1516 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx
@@ -1,12 +1,13 @@
 "use client";

-import { useSearchParams } from "next/navigation";
-import { GraphID } from "@/lib/autogpt-server-api/types";
 import FlowEditor from "@/components/Flow";
 import { useOnboarding } from "@/components/onboarding/onboarding-provider";
-import { useEffect } from "react";
+import LoadingBox from "@/components/ui/loading";
+import { GraphID } from "@/lib/autogpt-server-api/types";
+import { useSearchParams } from "next/navigation";
+import { Suspense, useEffect } from "react";

-export default function BuilderPage() {
+function BuilderContent() {
  const query = useSearchParams();
  const { completeStep } = useOnboarding();

@@ -15,12 +16,20 @@ export default function BuilderPage() {
  }, [completeStep]);

  const _graphVersion = query.get("flowVersion");
-  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined
+  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;
  return (
    <FlowEditor
      className="flow-container"
-      flowID={query.get("flowID") as GraphID | null ?? undefined}
+      flowID={(query.get("flowID") as GraphID | null) ?? undefined}
      flowVersion={graphVersion}
    />
  );
 }
+
+export default function BuilderPage() {
+  return (
+    <Suspense fallback={<LoadingBox className="h-[80vh]" />}>
+      <BuilderContent />
+    </Suspense>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/layout.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/layout.tsx
@@ -1,67 +1,10 @@
+import { Navbar } from "@/components/layout/Navbar/Navbar";
 import { ReactNode } from "react";
-import { Navbar } from "@/components/agptui/Navbar";
-import { IconType } from "@/components/ui/icons";

 export default function PlatformLayout({ children }: { children: ReactNode }) {
  return (
    <>
-      <Navbar
-        links={[
-          {
-            name: "Marketplace",
-            href: "/marketplace",
-          },
-          {
-            name: "Library",
-            href: "/library",
-          },
-          {
-            name: "Build",
-            href: "/build",
-          },
-        ]}
-        menuItemGroups={[
-          {
-            items: [
-              {
-                icon: IconType.Edit,
-                text: "Edit profile",
-                href: "/profile",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                icon: IconType.LayoutDashboard,
-                text: "Creator Dashboard",
-                href: "/profile/dashboard",
-              },
-              {
-                icon: IconType.UploadCloud,
-                text: "Publish an agent",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                icon: IconType.Settings,
-                text: "Settings",
-                href: "/profile/settings",
-              },
-            ],
-          },
-          {
-            items: [
-              {
-                icon: IconType.LogOut,
-                text: "Log out",
-              },
-            ],
-          },
-        ]}
-      />
+      <Navbar />
      <main>{children}</main>
    </>
  );
--- a/autogpt_platform/frontend/src/app/(platform)/library/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 import Link from "next/link";

+import { Alert, AlertDescription } from "@/components/ui/alert";
 import {
  ArrowBottomRightIcon,
  QuestionMarkCircledIcon,
 } from "@radix-ui/react-icons";
-import { Alert, AlertDescription } from "@/components/ui/alert";

-import { LibraryPageStateProvider } from "./components/state-provider";
 import LibraryActionHeader from "./components/LibraryActionHeader/LibraryActionHeader";
 import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
+import { LibraryPageStateProvider } from "./components/state-provider";

 /**
 * LibraryPage Component
@@ -17,7 +17,7 @@ import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
 */
 export default function LibraryPage() {
  return (
-    <main className="container min-h-screen space-y-4 pb-20 sm:px-8 md:px-12">
+    <main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
      <LibraryPageStateProvider>
        <LibraryActionHeader />
        <LibraryAgentList />
--- a/autogpt_platform/frontend/src/app/api/generated/endpoints/integrations/integrations.ts
+++ b/autogpt_platform/frontend/src/app/api/generated/endpoints/integrations/integrations.ts
--- a/autogpt_platform/frontend/src/app/api/generated/models/credentialsMetaInput.ts
+++ b/autogpt_platform/frontend/src/app/api/generated/models/credentialsMetaInput.ts
@@ -6,12 +6,12 @@
 * OpenAPI spec version: 0.1
 */
 import type { CredentialsMetaInputTitle } from "./credentialsMetaInputTitle";
+import type { ProviderName } from "./providerName";
 import type { CredentialsMetaInputType } from "./credentialsMetaInputType";

 export interface CredentialsMetaInput {
  id: string;
  title?: CredentialsMetaInputTitle;
-  /** Provider name for integrations. Can be any string value, including custom provider names. */
-  provider: string;
+  provider: ProviderName;
  type: CredentialsMetaInputType;
 }
--- a/autogpt_platform/frontend/src/app/api/generated/models/libraryAgentTriggerInfo.ts
+++ b/autogpt_platform/frontend/src/app/api/generated/models/libraryAgentTriggerInfo.ts
@@ -5,12 +5,12 @@
 * This server is used to execute agents that are created by the AutoGPT system.
 * OpenAPI spec version: 0.1
 */
+import type { ProviderName } from "./providerName";
 import type { LibraryAgentTriggerInfoConfigSchema } from "./libraryAgentTriggerInfoConfigSchema";
 import type { LibraryAgentTriggerInfoCredentialsInputName } from "./libraryAgentTriggerInfoCredentialsInputName";

 export interface LibraryAgentTriggerInfo {
-  /** Provider name for integrations. Can be any string value, including custom provider names. */
-  provider: string;
+  provider: ProviderName;
  /** Input schema for the trigger block */
  config_schema: LibraryAgentTriggerInfoConfigSchema;
  credentials_input_name: LibraryAgentTriggerInfoCredentialsInputName;
--- a/autogpt_platform/frontend/src/app/api/generated/models/providerName.ts
+++ b/autogpt_platform/frontend/src/app/api/generated/models/providerName.ts
@@ -0,0 +1,53 @@
+/**
+ * Generated by orval v7.10.0 🍺
+ * Do not edit manually.
+ * AutoGPT Agent Server
+ * This server is used to execute agents that are created by the AutoGPT system.
+ * OpenAPI spec version: 0.1
+ */
+
+export type ProviderName = (typeof ProviderName)[keyof typeof ProviderName];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ProviderName = {
+  aiml_api: "aiml_api",
+  anthropic: "anthropic",
+  apollo: "apollo",
+  compass: "compass",
+  discord: "discord",
+  d_id: "d_id",
+  e2b: "e2b",
+  exa: "exa",
+  fal: "fal",
+  generic_webhook: "generic_webhook",
+  github: "github",
+  google: "google",
+  google_maps: "google_maps",
+  groq: "groq",
+  http: "http",
+  hubspot: "hubspot",
+  ideogram: "ideogram",
+  jina: "jina",
+  linear: "linear",
+  llama_api: "llama_api",
+  medium: "medium",
+  mem0: "mem0",
+  notion: "notion",
+  nvidia: "nvidia",
+  ollama: "ollama",
+  openai: "openai",
+  openweathermap: "openweathermap",
+  open_router: "open_router",
+  pinecone: "pinecone",
+  reddit: "reddit",
+  replicate: "replicate",
+  revid: "revid",
+  screenshotone: "screenshotone",
+  slant3d: "slant3d",
+  smartlead: "smartlead",
+  smtp: "smtp",
+  twitter: "twitter",
+  todoist: "todoist",
+  unreal_speech: "unreal_speech",
+  zerobounce: "zerobounce",
+} as const;
--- a/autogpt_platform/frontend/src/app/api/generated/models/webhook.ts
+++ b/autogpt_platform/frontend/src/app/api/generated/models/webhook.ts
@@ -5,13 +5,13 @@
 * This server is used to execute agents that are created by the AutoGPT system.
 * OpenAPI spec version: 0.1
 */
+import type { ProviderName } from "./providerName";
 import type { WebhookConfig } from "./webhookConfig";

 export interface Webhook {
  id?: string;
  user_id: string;
-  /** Provider name for integrations. Can be any string value, including custom provider names. */
-  provider: string;
+  provider: ProviderName;
  credentials_id: string;
  webhook_type: string;
  resource: string;
--- a/autogpt_platform/frontend/src/app/api/openapi.json
+++ b/autogpt_platform/frontend/src/app/api/openapi.json
@@ -18,9 +18,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "The provider to initiate an OAuth flow for",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "The provider to initiate an OAuth flow for"
            }
          },
          {
@@ -65,9 +64,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "The target provider for this OAuth exchange",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "The target provider for this OAuth exchange"
            }
          }
        ],
@@ -135,9 +133,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "The provider to list credentials for",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "The provider to list credentials for"
            }
          }
        ],
@@ -176,9 +173,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "The provider to create credentials for",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "The provider to create credentials for"
            }
          }
        ],
@@ -257,9 +253,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "The provider to retrieve credentials for",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "The provider to retrieve credentials for"
            }
          },
          {
@@ -320,9 +315,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "The provider to delete credentials for",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "The provider to delete credentials for"
            }
          },
          {
@@ -386,9 +380,8 @@
            "in": "path",
            "required": true,
            "schema": {
-              "type": "string",
-              "title": "Provider where the webhook was registered",
-              "description": "Provider name for integrations. Can be any string value, including custom provider names."
+              "$ref": "#/components/schemas/ProviderName",
+              "title": "Provider where the webhook was registered"
            }
          },
          {
@@ -443,86 +436,6 @@
        }
      }
    },
-    "/api/integrations/providers": {
-      "get": {
-        "tags": ["v1", "integrations"],
-        "summary": "List Providers",
-        "description": "Get a list of all available provider names.\n\nReturns both statically defined providers (from ProviderName enum)\nand dynamically registered providers (from SDK decorators).\n\nNote: The complete list of provider names is also available as a constant\nin the generated TypeScript client via PROVIDER_NAMES.",
-        "operationId": "getV1ListProviders",
-        "responses": {
-          "200": {
-            "description": "Successful Response",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "items": { "type": "string" },
-                  "type": "array",
-                  "title": "Response Getv1Listproviders"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "/api/integrations/providers/names": {
-      "get": {
-        "tags": ["v1", "integrations"],
-        "summary": "Get Provider Names",
-        "description": "Get all provider names in a structured format.\n\nThis endpoint is specifically designed to expose the provider names\nin the OpenAPI schema so that code generators like Orval can create\nappropriate TypeScript constants.",
-        "operationId": "getV1GetProviderNames",
-        "responses": {
-          "200": {
-            "description": "Successful Response",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/ProviderNamesResponse"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "/api/integrations/providers/constants": {
-      "get": {
-        "tags": ["v1", "integrations"],
-        "summary": "Get Provider Constants",
-        "description": "Get provider names as constants.\n\nThis endpoint returns a model with provider names as constants,\nspecifically designed for OpenAPI code generation tools to create\nTypeScript constants.",
-        "operationId": "getV1GetProviderConstants",
-        "responses": {
-          "200": {
-            "description": "Successful Response",
-            "content": {
-              "application/json": {
-                "schema": { "$ref": "#/components/schemas/ProviderConstants" }
-              }
-            }
-          }
-        }
-      }
-    },
-    "/api/integrations/providers/enum-example": {
-      "get": {
-        "tags": ["v1", "integrations"],
-        "summary": "Get Provider Enum Example",
-        "description": "Example endpoint that uses the CompleteProviderNames enum.\n\nThis endpoint exists to ensure that the CompleteProviderNames enum is included\nin the OpenAPI schema, which will cause Orval to generate it as a\nTypeScript enum/constant.",
-        "operationId": "getV1GetProviderEnumExample",
-        "responses": {
-          "200": {
-            "description": "Successful Response",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/ProviderEnumResponse"
-                }
-              }
-            }
-          }
-        }
-      }
-    },
    "/api/analytics/log_raw_metric": {
      "post": {
        "tags": ["v1", "analytics"],
@@ -3373,6 +3286,48 @@
        }
      }
    },
+    "/api/library/agents/by-graph/{graph_id}": {
+      "get": {
+        "tags": ["v2", "library", "private"],
+        "summary": "Get Library Agent By Graph Id",
+        "operationId": "getV2GetLibraryAgentByGraphId",
+        "parameters": [
+          {
+            "name": "graph_id",
+            "in": "path",
+            "required": true,
+            "schema": { "type": "string", "title": "Graph Id" }
+          },
+          {
+            "name": "version",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "anyOf": [{ "type": "integer" }, { "type": "null" }],
+              "title": "Version"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/LibraryAgent" }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      }
+    },
    "/api/library/agents/marketplace/{store_listing_version_id}": {
      "get": {
        "tags": ["v2", "library", "private", "store, library"],
@@ -4146,11 +4101,7 @@
            "anyOf": [{ "type": "string" }, { "type": "null" }],
            "title": "Title"
          },
-          "provider": {
-            "type": "string",
-            "title": "Provider",
-            "description": "Provider name for integrations. Can be any string value, including custom provider names."
-          },
+          "provider": { "$ref": "#/components/schemas/ProviderName" },
          "type": {
            "type": "string",
            "enum": ["api_key", "oauth2", "user_password", "host_scoped"],
@@ -4160,8 +4111,8 @@
        "type": "object",
        "required": ["id", "provider", "type"],
        "title": "CredentialsMetaInput",
-        "credentials_provider": ["string"],
-        "credentials_types": ["api_key", "oauth2", "user_password"]
+        "credentials_provider": [],
+        "credentials_types": []
      },
      "CredentialsMetaResponse": {
        "properties": {
@@ -4869,11 +4820,7 @@
      },
      "LibraryAgentTriggerInfo": {
        "properties": {
-          "provider": {
-            "type": "string",
-            "title": "Provider",
-            "description": "Provider name for integrations. Can be any string value, including custom provider names."
-          },
+          "provider": { "$ref": "#/components/schemas/ProviderName" },
          "config_schema": {
            "additionalProperties": true,
            "type": "object",
@@ -5288,6 +5235,7 @@
          "AGENT_INPUT",
          "CONGRATS",
          "GET_RESULTS",
+          "RUN_AGENTS",
          "MARKETPLACE_VISIT",
          "MARKETPLACE_ADD_AGENT",
          "MARKETPLACE_RUN_AGENT",
@@ -5675,44 +5623,51 @@
        "required": ["name", "username", "description", "links"],
        "title": "ProfileDetails"
      },
-      "ProviderConstants": {
-        "properties": {
-          "PROVIDER_NAMES": {
-            "additionalProperties": { "type": "string" },
-            "type": "object",
-            "title": "Provider Names",
-            "description": "All available provider names as a constant mapping"
-          }
-        },
-        "type": "object",
-        "title": "ProviderConstants",
-        "description": "Model that exposes all provider names as a constant in the OpenAPI schema.\nThis is designed to be converted by Orval into a TypeScript constant."
-      },
-      "ProviderEnumResponse": {
-        "properties": {
-          "provider": {
-            "type": "string",
-            "title": "Provider",
-            "description": "A provider name from the complete list of providers"
-          }
-        },
-        "type": "object",
-        "required": ["provider"],
-        "title": "ProviderEnumResponse",
-        "description": "Response containing a provider from the enum."
-      },
-      "ProviderNamesResponse": {
-        "properties": {
-          "providers": {
-            "items": { "type": "string" },
-            "type": "array",
-            "title": "Providers",
-            "description": "List of all available provider names"
-          }
-        },
-        "type": "object",
-        "title": "ProviderNamesResponse",
-        "description": "Response containing list of all provider names."
+      "ProviderName": {
+        "type": "string",
+        "enum": [
+          "aiml_api",
+          "anthropic",
+          "apollo",
+          "compass",
+          "discord",
+          "d_id",
+          "e2b",
+          "exa",
+          "fal",
+          "generic_webhook",
+          "github",
+          "google",
+          "google_maps",
+          "groq",
+          "http",
+          "hubspot",
+          "ideogram",
+          "jina",
+          "linear",
+          "llama_api",
+          "medium",
+          "mem0",
+          "notion",
+          "nvidia",
+          "ollama",
+          "openai",
+          "openweathermap",
+          "open_router",
+          "pinecone",
+          "reddit",
+          "replicate",
+          "revid",
+          "screenshotone",
+          "slant3d",
+          "smartlead",
+          "smtp",
+          "twitter",
+          "todoist",
+          "unreal_speech",
+          "zerobounce"
+        ],
+        "title": "ProviderName"
      },
      "RefundRequest": {
        "properties": {
@@ -6486,11 +6441,7 @@
        "properties": {
          "id": { "type": "string", "title": "Id" },
          "user_id": { "type": "string", "title": "User Id" },
-          "provider": {
-            "type": "string",
-            "title": "Provider",
-            "description": "Provider name for integrations. Can be any string value, including custom provider names."
-          },
+          "provider": { "$ref": "#/components/schemas/ProviderName" },
          "credentials_id": { "type": "string", "title": "Credentials Id" },
          "webhook_type": { "type": "string", "title": "Webhook Type" },
          "resource": { "type": "string", "title": "Resource" },