github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(platform): Sync on new UI design (#8194)

Browse Source 
* feat(platform): Sync on new UI design

* simplify UI

* block list add border and remove padding

* add highlight on navbar button

---------

Co-authored-by: Swifty <craigswift13@gmail.com>
This commit is contained in:
Zamil Majdy
2024-09-27 03:31:44 -05:00
committed by GitHub
parent f607efd74f
commit 1286a1b034
15 changed files with 109 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
autogpt_platform/frontend/src/app/auth/callback/route.ts
View File

@@ -6,7 +6,7 @@ export async function GET(request: Request) {
const { searchParams, origin } = new URL(request.url);
const code = searchParams.get("code");
// if "next" is in param, use it as the redirect URL
const next = searchParams.get("next") ?? "/profile";
const next = searchParams.get("next") ?? "/";
if (code) {
const supabase = createServerClient();

2
autogpt_platform/frontend/src/app/build/page.tsx
View File

@@ -8,7 +8,7 @@ export default function Home() {
return (
<FlowEditor
className="flow-container w-full min-h-[86vh] border border-gray-300 dark:border-gray-700 rounded-lg"
className="flow-container"
flowID={query.get("flowID") ?? query.get("templateID") ?? undefined}
template={!!query.get("templateID")}
/>

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

@@ -34,7 +34,7 @@ export default function RootLayout({
>
<div className="flex min-h-screen flex-col">
<NavBar />
<main className="flex-1 overflow-hidden p-4">{children}</main>
<main className="flex-1 p-4">{children}</main>
<TallyPopupSimple />
</div>
<Toaster />

4
autogpt_platform/frontend/src/app/login/actions.ts
View File

@@ -30,7 +30,7 @@ export async function login(values: z.infer<typeof loginFormSchema>) {
}
revalidatePath("/", "layout");
redirect("/profile");
redirect("/");
});
}
@@ -61,7 +61,7 @@ export async function signup(values: z.infer<typeof loginFormSchema>) {
}
revalidatePath("/", "layout");
redirect("/profile");
redirect("/");
},
);
}

4
autogpt_platform/frontend/src/app/login/page.tsx
View File

@@ -48,8 +48,8 @@ export default function LoginPage() {
});
if (user) {
console.log("User exists, redirecting to profile");
router.push("/profile");
console.log("User exists, redirecting to home");
router.push("/");
}
if (isUserLoading || isSupabaseLoading || user) {

2
autogpt_platform/frontend/src/components/CustomNode.tsx
View File

@@ -585,7 +585,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
{blockCost && (
<div className="p-3 font-semibold">
<span className="ml-auto flex items-center">
<IconCoin /> {blockCost.cost_amount} per {blockCost.cost_type}
<IconCoin /> {blockCost.cost_amount} credits/{blockCost.cost_type}
</span>
</div>
)}

36
autogpt_platform/frontend/src/components/Flow.tsx
View File

@@ -579,21 +579,27 @@ const FlowEditor: React.FC<{
>
<Controls />
<Background />
<ControlPanel className="absolute z-10" controls={editorControls}>
<BlocksControl
pinBlocksPopover={pinBlocksPopover} // Pass the state to BlocksControl
blocks={availableNodes}
addBlock={addNode}
/>
<SaveControl
agentMeta={savedAgent}
onSave={(isTemplate) => requestSave(isTemplate ?? false)}
agentDescription={agentDescription}
onDescriptionChange={setAgentDescription}
agentName={agentName}
onNameChange={setAgentName}
/>
</ControlPanel>
<ControlPanel
className="absolute z-10"
controls={editorControls}
topChildren={
<BlocksControl
pinBlocksPopover={pinBlocksPopover} // Pass the state to BlocksControl
blocks={availableNodes}
addBlock={addNode}
/>
}
botChildren={
<SaveControl
agentMeta={savedAgent}
onSave={(isTemplate) => requestSave(isTemplate ?? false)}
agentDescription={agentDescription}
onDescriptionChange={setAgentDescription}
agentName={agentName}
onNameChange={setAgentName}
/>
}
></ControlPanel>
<PrimaryActionBar
onClickAgentOutputs={() => runnerUIRef.current?.openRunnerOutput()}
onClickRunAgent={() => {

56
autogpt_platform/frontend/src/components/NavBar.tsx
View File

@@ -5,19 +5,9 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import Image from "next/image";
import getServerUser from "@/hooks/getServerUser";
import ProfileDropdown from "./ProfileDropdown";
import {
IconCircleUser,
IconMenu,
IconPackage2,
IconRefresh,
IconSquareActivity,
IconWorkFlow,
} from "@/components/ui/icons";
import AutoGPTServerAPI from "@/lib/autogpt-server-api";
import { IconCircleUser, IconMenu } from "@/components/ui/icons";
import CreditButton from "@/components/CreditButton";
import { BsBoxes } from "react-icons/bs";
import { LuLaptop } from "react-icons/lu";
import { LuShoppingCart } from "react-icons/lu";
import { NavBarButtons } from "./NavBarButtons";
export async function NavBar() {
const isAvailable = Boolean(
@@ -27,7 +17,7 @@ export async function NavBar() {
const { user } = await getServerUser();
return (
<header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:rounded-b-3xl md:px-6 md:shadow-md">
<header className="sticky top-0 z-50 mx-4 flex h-16 items-center gap-4 border-b bg-background p-3 md:rounded-b-2xl md:px-6 md:shadow">
<div className="flex flex-1 items-center gap-4">
<Sheet>
<SheetTrigger asChild>
@@ -42,28 +32,11 @@ export async function NavBar() {
</SheetTrigger>
<SheetContent side="left">
<nav className="grid gap-6 text-lg font-medium">
<Link
href="/marketplace"
className="mt-4 flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
<LuShoppingCart /> Marketplace
</Link>
<Link
href="/"
className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
<LuLaptop /> Monitor
</Link>
<Link
href="/build"
className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
<BsBoxes /> Build
</Link>
<NavBarButtons className="flex flex-row items-center gap-2" />
</nav>
</SheetContent>
</Sheet>
<nav className="hidden md:flex md:flex-row md:items-center md:gap-7 lg:gap-8">
<nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-8">
<div className="flex h-10 w-20 flex-1 flex-row items-center justify-center gap-2">
<a href="https://agpt.co/">
<Image
@@ -75,24 +48,7 @@ export async function NavBar() {
/>
</a>
</div>
<Link
href="/marketplace"
className="text-basehover:text-foreground flex flex-row items-center gap-2 font-semibold text-foreground"
>
<LuShoppingCart /> Marketplace
</Link>
<Link
href="/"
className="text-basehover:text-foreground flex flex-row items-center gap-2 font-semibold text-foreground"
>
<LuLaptop className="mr-1" /> Monitor
</Link>
<Link
href="/build"
className="flex flex-row items-center gap-2 text-base font-semibold text-foreground hover:text-foreground"
>
<BsBoxes className="mr-1" /> Build
</Link>
<NavBarButtons className="flex flex-row items-center gap-1 border border-white font-semibold hover:border-gray-900" />
</nav>
</div>
<div className="flex flex-1 items-center justify-end gap-4">

49
autogpt_platform/frontend/src/components/NavBarButtons.tsx Normal file
View File

@@ -0,0 +1,49 @@
"use client";
import Link from "next/link";
import { BsBoxes } from "react-icons/bs";
import { LuLaptop } from "react-icons/lu";
import { LuShoppingCart } from "react-icons/lu";
import { cn } from "@/lib/utils";
import { usePathname } from "next/navigation";
export function NavBarButtons({ className }: { className?: string }) {
"use client";
const pathname = usePathname();
const buttons = [
{
href: "/marketplace",
text: "Marketplace",
icon: <LuShoppingCart />,
},
{
href: "/",
text: "Monitor",
icon: <LuLaptop />,
},
{
href: "/build",
text: "Build",
icon: <BsBoxes />,
},
];
const activeButton = buttons.find((button) => button.href === pathname);
console.log(">>>> ", activeButton);
return buttons.map((button) => (
<Link
key={button.href}
href={button.href}
className={cn(
className,
"rounded-xl p-3",
activeButton === button ? "button bg-gray-950 text-white" : "",
)}
>
{button.icon} {button.text}
</Link>
));
}

12
autogpt_platform/frontend/src/components/PrimaryActionButton.tsx
View File

@@ -32,7 +32,7 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
const runButtonOnClick = !isRunning ? onClickRunAgent : requestStopRun;
return (
<div className="absolute bottom-0 left-0 right-0 z-50 flex items-center justify-center p-4">
<div className="absolute bottom-0 left-1/2 z-50 flex w-fit -translate-x-1/2 transform items-center justify-center p-4">
<div className={`flex gap-4`}>
<Tooltip key="ViewOutputs" delayDuration={500}>
<TooltipTrigger asChild>
@@ -42,8 +42,10 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
size="primary"
variant="outline"
>
<LogOut className="h-5 w-5" />
<span className="text-lg font-medium">Agent Outputs </span>
<LogOut className="hidden h-5 w-5 md:flex" />
<span className="text-sm font-medium md:text-lg">
Agent Outputs{" "}
</span>
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -62,7 +64,9 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
}}
>
{runButtonIcon}
<span className="text-lg font-medium">{runButtonLabel}</span>
<span className="text-sm font-medium md:text-lg">
{runButtonLabel}
</span>
</Button>
</TooltipTrigger>
<TooltipContent>

2
autogpt_platform/frontend/src/components/TallyPopup.tsx
View File

@@ -47,7 +47,7 @@ const TallyPopupSimple = () => {
};
return (
<div className="fixed bottom-6 right-6 z-50 flex items-center gap-4 p-3 transition-all duration-300 ease-in-out">
<div className="fixed bottom-6 right-6 z-50 hidden items-center gap-4 p-3 transition-all duration-300 ease-in-out md:flex">
<Button variant="default" onClick={resetTutorial} className="mb-0">
Tutorial
</Button>

2
autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
View File

@@ -138,7 +138,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
))}
</div>
</CardHeader>
<CardContent className="p-1">
<CardContent className="border-t px-1 py-0">
<ScrollArea
className="h-[60vh]"
data-id="blocks-control-scroll-area"

14
autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx
View File

@@ -25,7 +25,8 @@ export type Control = {
interface ControlPanelProps {
controls: Control[];
children?: React.ReactNode;
topChildren?: React.ReactNode;
botChildren?: React.ReactNode;
className?: string;
}
@@ -39,14 +40,15 @@ interface ControlPanelProps {
*/
export const ControlPanel = ({
controls,
children,
topChildren,
botChildren,
className,
}: ControlPanelProps) => {
return (
<Card className={cn("w-14", className)}>
<Card className={cn("m-4 mt-24 w-14", className)}>
<CardContent className="p-0">
<div className="rounded-radius flex flex-col items-center gap-8 px-2 sm:py-5">
{children}
<div className="flex flex-col items-center gap-3 rounded-xl border py-3">
{topChildren}
<Separator />
{controls.map((control, index) => (
<Tooltip key={index} delayDuration={500}>
@@ -67,6 +69,8 @@ export const ControlPanel = ({
<TooltipContent side="right">{control.label}</TooltipContent>
</Tooltip>
))}
<Separator />
{botChildren}
</div>
</CardContent>
</Card>

7
autogpt_platform/frontend/src/components/flow.css
View File

@@ -111,6 +111,9 @@ textarea::placeholder {
}
.flow-container {
width: 100%;
height: 600px; /* Adjust this height as needed */
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

2
autogpt_platform/frontend/src/components/ui/button.tsx
View File

@@ -25,7 +25,7 @@ const buttonVariants = cva(
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
primary: "h-14 w-44 rounded-2xl",
primary: "md:h-14 md:w-44 rounded-2xl h-10 w-28",
icon: "h-9 w-9",
},
},