github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-10 07:38:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): debug preview stealing dev

Browse Source
This commit is contained in:
Lluis Agusti
2025-11-21 10:26:17 +07:00
parent e64d3d9b99
commit 0edc669874
7 changed files with 96 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
autogpt_platform/frontend/src/app/(platform)/library/page.tsx
View File

@@ -1,5 +1,7 @@
"use client";
import { environment } from "@/services/environment";
import { useEffect } from "react";
import FavoritesSection from "./components/FavoritesSection/FavoritesSection";
import LibraryActionHeader from "./components/LibraryActionHeader/LibraryActionHeader";
import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
@@ -10,6 +12,11 @@ import { LibraryPageStateProvider } from "./components/state-provider";
* Main component that manages the library interface including agent listing and actions
*/
export default function LibraryPage() {
useEffect(() => {
const appEnv = environment.getAppEnv();
console.log("branch", process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV);
console.log("appEnv", appEnv);
}, []);
return (
<main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
<LibraryPageStateProvider>

6
autogpt_platform/frontend/src/app/layout.tsx
View File

@@ -6,12 +6,10 @@ import "./globals.css";
import { Providers } from "@/app/providers";
import { CookieConsentBanner } from "@/components/molecules/CookieConsentBanner/CookieConsentBanner";
import { PreviewBanner } from "@/components/molecules/PreviewBanner/PreviewBanner";
import TallyPopupSimple from "@/components/molecules/TallyPoup/TallyPopup";
import { Toaster } from "@/components/molecules/Toast/toaster";
import { SetupAnalytics } from "@/services/analytics";
import { VercelAnalyticsWrapper } from "@/services/analytics/VercelAnalyticsWrapper";
import { environment } from "@/services/environment";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { headers } from "next/headers";
@@ -27,7 +25,6 @@ export default async function RootLayout({
}>) {
const headersList = await headers();
const host = headersList.get("host") || "";
const previewStealingDev = environment.getPreviewStealingDev();
return (
<html
@@ -52,9 +49,6 @@ export default async function RootLayout({
disableTransitionOnChange
>
<div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
{previewStealingDev ? (
<PreviewBanner branchName={previewStealingDev} />
) : null}
{children}
<TallyPopupSimple />
<VercelAnalyticsWrapper />

7
autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
View File

@@ -1,8 +1,13 @@
import { environment } from "@/services/environment";
import { NavbarView } from "./components/NavbarView";
import { getNavbarAccountData } from "./data";
export async function Navbar() {
const { isLoggedIn } = await getNavbarAccountData();
const previewBranchName = environment.getPreviewStealingDev();
return <NavbarView isLoggedIn={isLoggedIn} />;
return (
<NavbarView isLoggedIn={isLoggedIn} previewBranchName={previewBranchName} />
);
}

103
autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarView.tsx
View File

@@ -2,6 +2,7 @@
import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
import { IconAutoGPTLogo, IconType } from "@/components/__legacy__/ui/icons";
import { PreviewBanner } from "@/components/layout/Navbar/components/PreviewBanner/PreviewBanner";
import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
@@ -15,9 +16,10 @@ import { NavbarLink } from "./NavbarLink";
import { Wallet } from "./Wallet/Wallet";
interface NavbarViewProps {
isLoggedIn: boolean;
previewBranchName?: string | null;
}
export const NavbarView = ({ isLoggedIn }: NavbarViewProps) => {
export function NavbarView({ isLoggedIn, previewBranchName }: NavbarViewProps) {
const { user } = useSupabase();
const breakpoint = useBreakpoint();
const isSmallScreen = breakpoint === "sm" || breakpoint === "base";
@@ -36,56 +38,63 @@ export const NavbarView = ({ isLoggedIn }: NavbarViewProps) => {
return isChatEnabled ? [...loggedInLinks, chatLink] : loggedInLinks;
}, [isChatEnabled]);
const shouldShowPreviewBanner = Boolean(isLoggedIn && previewBranchName);
return (
<>
<nav className="sticky top-0 z-40 inline-flex h-[60px] w-full items-center border border-white/50 bg-[#f3f4f6]/20 p-3 backdrop-blur-[26px]">
{/* Left section */}
{!isSmallScreen ? (
<div className="flex flex-1 items-center gap-5">
{isLoggedIn
? linksWithChat.map((link) => (
<NavbarLink
key={link.name}
name={link.name}
href={link.href}
/>
))
: loggedOutLinks.map((link) => (
<NavbarLink
key={link.name}
name={link.name}
href={link.href}
/>
))}
</div>
<div className="sticky top-0 z-40 w-full">
{shouldShowPreviewBanner && previewBranchName ? (
<PreviewBanner branchName={previewBranchName} />
) : null}
{/* Centered logo */}
<div className="static h-auto w-[4.5rem] md:absolute md:left-1/2 md:top-1/2 md:w-[5.5rem] md:-translate-x-1/2 md:-translate-y-1/2">
<IconAutoGPTLogo className="h-full w-full" />
</div>
{/* Right section */}
{isLoggedIn && !isSmallScreen ? (
<div className="flex flex-1 items-center justify-end gap-4">
<div className="flex items-center gap-4">
<AgentActivityDropdown />
{profile && <Wallet key={profile.username} />}
<AccountMenu
userName={profile?.username}
userEmail={profile?.name}
avatarSrc={profile?.avatar_url ?? ""}
menuItemGroups={dynamicMenuItems}
/>
<nav className="inline-flex h-[60px] w-full items-center border border-white/50 bg-[#f3f4f6]/20 p-3 backdrop-blur-[26px]">
{/* Left section */}
{!isSmallScreen ? (
<div className="flex flex-1 items-center gap-5">
{isLoggedIn
? linksWithChat.map((link) => (
<NavbarLink
key={link.name}
name={link.name}
href={link.href}
/>
))
: loggedOutLinks.map((link) => (
<NavbarLink
key={link.name}
name={link.name}
href={link.href}
/>
))}
</div>
) : null}
{/* Centered logo */}
<div className="static h-auto w-[4.5rem] md:absolute md:left-1/2 md:top-1/2 md:w-[5.5rem] md:-translate-x-1/2 md:-translate-y-1/2">
<IconAutoGPTLogo className="h-full w-full" />
</div>
) : !isLoggedIn ? (
<div className="flex w-full items-center justify-end">
<LoginButton />
</div>
) : null}
{/* <ThemeToggle /> */}
</nav>
{/* Right section */}
{isLoggedIn && !isSmallScreen ? (
<div className="flex flex-1 items-center justify-end gap-4">
<div className="flex items-center gap-4">
<AgentActivityDropdown />
{profile && <Wallet key={profile.username} />}
<AccountMenu
userName={profile?.username}
userEmail={profile?.name}
avatarSrc={profile?.avatar_url ?? ""}
menuItemGroups={dynamicMenuItems}
/>
</div>
</div>
) : !isLoggedIn ? (
<div className="flex w-full items-center justify-end">
<LoginButton />
</div>
) : null}
{/* <ThemeToggle /> */}
</nav>
</div>
{/* Mobile Navbar - Adjust positioning */}
<>
{isLoggedIn && isSmallScreen ? (
@@ -123,4 +132,4 @@ export const NavbarView = ({ isLoggedIn }: NavbarViewProps) => {
</>
</>
);
};
}

14
autogpt_platform/frontend/src/components/layout/Navbar/components/PreviewBanner/PreviewBanner.tsx Normal file
View File

@@ -0,0 +1,14 @@
type Props = {
branchName: string;
};
export function PreviewBanner({ branchName }: Props) {
if (!branchName) return null;
return (
<div className="w-full bg-green-500 px-4 py-2 text-center text-sm font-medium text-white">
This is a Preview build for the branch:{" "}
<span className="font-mono text-xs font-semibold">{branchName}</span>
</div>
);
}

16
autogpt_platform/frontend/src/components/molecules/PreviewBanner/PreviewBanner.tsx
View File

@@ -1,16 +0,0 @@
type Props = {
branchName: string;
};
export function PreviewBanner({ branchName }: Props) {
if (!branchName) {
return null;
}
return (
<div className="sticky top-0 z-50 w-full bg-green-500 px-4 py-2 text-center text-sm font-medium text-white">
This is a Preview build for the branch:{" "}
<span className="font-mono font-semibold">{branchName}</span>
</div>
);
}

14
autogpt_platform/frontend/src/services/environment/index.ts
View File

@@ -61,7 +61,19 @@ function getEnvironmentStr() {
}
function getPreviewStealingDev() {
return process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV || "";
const branch = process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV || "";
const appEnv = getAppEnv();
if (
!branch ||
branch === "dev" ||
branch === "refs/heads/dev" ||
appEnv !== AppEnv.DEV
) {
return null;
}
return branch;
}
function isProductionBuild() {