aljaz/AgentGPT
1
0
Fork 0
mirror of https://github.com/aljazceru/AgentGPT.git synced 2025-12-17 14:04:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Improve responsiveness

Browse Source
This commit is contained in:
adam.watkins
2023-04-08 08:04:26 +03:00
parent 611b9f06c3
commit f27577b179
7 changed files with 38 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Badge.tsx
View File

@@ -6,7 +6,7 @@ interface BadgeProps {
const Badge = ({ children }: BadgeProps) => {
return (
<div className="text-md h-max rounded-full bg-[#1E88E5] px-3 py-1 font-semibold text-gray-100 transition-all hover:scale-110">
<div className="rounded-full bg-[#1E88E5] px-3 py-1 text-sm font-semibold text-gray-100 transition-all hover:scale-110">
{children}
</div>
);

4
src/components/ChatWindow.tsx
View File

@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from "react";
interface ChatWindowProps {
children?: ReactNode;
className: string;
className?: string;
messages: Message[];
}
@@ -22,7 +22,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
<div
className={
"border-translucent flex w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
className
(className ?? "")
}
>
<MacWindowHeader />

2
src/components/Drawer.tsx
View File

@@ -6,7 +6,7 @@ const Drawer = () => {
return (
<div
id="drawer-example"
className="z-50 m-0 flex h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 font-mono text-white backdrop-blur-sm"
className="z-50 m-0 hidden h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 font-mono text-white backdrop-blur-sm md:flex"
>
<NewAgent />
<DrawerItem icon={<FaRobot />} text="HustleGPT" />

89
src/components/Header.tsx
View File

@@ -1,90 +1,21 @@
// import { AnimatePresence, motion } from "framer-motion";
import Link from "next/link";
import { useRouter } from "next/router";
import {
FaAngleDown,
FaGithub,
FaHome,
FaLink,
FaSignOutAlt,
} from "react-icons/fa";
import Image from "next/image";
// import { Dropdown, DropdownItem } from "@/ui/dropdown";
// import Loader from "@/ui/loader";
//
// import { useAuth } from "@/hooks/useAuth";
import { FaGithub } from "react-icons/fa";
import PopIn from "./popin";
import { AnimatePresence } from "framer-motion";
const Header: React.FC = () => {
// const { signOut, session, status } = useAuth();
const router = useRouter();
// const authenticated = status == "authenticated" && (
// <Dropdown
// title={session?.user?.name || ""}
// icon={<FaAngleDown className="h-5 text-inherit" />}
// loader={false}
// >
// <h1 className="border-white/5 border-b-2 font-bold px-3 pb-1 text-md">
// {session?.user?.name}
// </h1>
//
// <DropdownItem
// icon={<FaSignOutAlt className="h-4 text-inherit text-white" />}
// onClick={signOut}
// >
// Sign Out
// </DropdownItem>
// {router.route != "/" && (
// <DropdownItem icon={<FaHome className="h-4 text-inherit" />}>
// <Link href="/">Home</Link>
// </DropdownItem>
// )}
// <DropdownItem icon={<FaLink className="h-4 text-inherit" />}>
// <a
// href="https://github.com/awtkns/confetti/issues/new"
// target="_blank"
// rel="noreferrer"
// >
// Report a bug
// </a>
// </DropdownItem>
// </Dropdown>
// );
// const loading = status == "loading" && <Loader />;
//
// const unauthenticated =
// status == "unauthenticated" && router.route != "/auth" ? (
// <Link href="/auth">Sign In</Link>
// ) : (
// <Link href="/">Home</Link>
// );
const github = (
return (
<header className="absolute z-50 flex w-full flex-row items-center justify-end p-2 align-middle">
<AnimatePresence>
<PopIn delay={0.5}>
<a
href="https://github.com/reworkd/AgentGPT"
className="right-0 ml-0 block block text-white hover:text-yellow-500"
>
<span className="sr-only">Confetti on GitHub</span>
<span className="sr-only">AgentGPT on GitHub</span>
<FaGithub size="25" />
</a>
);
return (
<header className="z-50 w-full p-2 relative flex flex-row items-center justify-between align-middle">
<Image src="logo-white.svg" alt="yes" width={30} height={0} />
{/*<AnimatePresence>*/}
{/* <motion.div*/}
{/* initial={{ opacity: 0 }}*/}
{/* animate={{ opacity: 1 }}*/}
{/* transition={{ duration: 1, type: "spring" }}*/}
{/* className="ml-auto pr-4 text-lg text-white hover:text-yellow-500"*/}
{/* >*/}
{/* {authenticated || loading || unauthenticated}*/}
{/* </motion.div>*/}
{/*</AnimatePresence>*/}
{github}
</PopIn>
</AnimatePresence>
</header>
);
};

3
src/components/popin.tsx
View File

@@ -3,13 +3,14 @@ import type { PropsWithChildren } from "react";
interface MotionProps extends PropsWithChildren {
className?: string;
delay?: number;
}
const PopIn = (props: MotionProps) => (
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5, type: "spring" }}
transition={{ duration: 0.5, type: "spring", delay: props.delay ?? 0 }}
{...props}
>
{props.children}

6
src/layout/default.tsx
View File

@@ -1,6 +1,7 @@
import { type ReactNode } from "react";
import Head from "next/head";
import DottedGridBackground from "../components/DottedGridBackground";
import Header from "../components/Header";
interface LayoutProps {
children: ReactNode;
@@ -27,7 +28,10 @@ const DefaultLayout = (props: LayoutProps) => {
content="https://raw.githubusercontent.com/reworkd/extension/main/assets/icon512.png"
/>
</Head>
<DottedGridBackground>{props.children}</DottedGridBackground>
<DottedGridBackground>
<Header />
{props.children}
</DottedGridBackground>
{/*<Footer />*/}
</div>
);

14
src/pages/index.tsx
View File

@@ -13,6 +13,7 @@ import Drawer from "../components/Drawer";
import Input from "../components/Input";
import Button from "../components/Button";
import { FaRobot, FaStar } from "react-icons/fa";
import PopIn from "../components/popin";
const Home: NextPage = () => {
const [loading, setLoading] = React.useState<boolean>(false);
@@ -48,13 +49,20 @@ const Home: NextPage = () => {
>
<div
id="layout"
className="flex h-full w-full max-w-screen-lg flex-col items-center justify-center gap-3 py-10"
className="flex h-full w-full max-w-screen-lg flex-col items-center gap-3 py-10 md:justify-center"
>
<div
id="title"
className="relative flex flex-col items-center font-mono"
>
<div id="title" className="flex flex-col items-center font-mono">
<div className="flex items-center shadow-2xl">
<span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
<span className="mr-5 text-6xl font-bold text-white">GPT</span>
<span className="hidden md:flex">
<PopIn delay={0.5} className="absolute right-12 top-0 ">
<Badge>Beta 🚀</Badge>
</PopIn>
</span>
</div>
<div className="mt-1 font-mono text-[0.8em] font-bold text-white">
Assemble, configure, and deploy autonomous AI Agents in your
@@ -62,7 +70,7 @@ const Home: NextPage = () => {
</div>
</div>
<ChatWindow className="m-10" messages={messages}>
<ChatWindow messages={messages} className="mt-4">
{loading ? (
<ChatMessage
message={{ type: "action", value: "🧠 Thinking..." }}