🔥 Mobile god

src/components/ChatWindow.tsx

@@ -32,7 +32,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
     >
       <MacWindowHeader />
       <div
-        className="mb-3 mr-3 h-[10em] overflow-y-auto 2xl:h-[20em] "
+        className="mb-3 mr-3 h-[10em] overflow-y-auto sm-h:h-[15em] md-h:h-[20em] lg-h:h-[30em] "
         ref={scrollRef}
       >
         {messages.map((message, index) => (
@@ -40,7 +40,11 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
         ))}
         {children}
 
-        <ChatMessage message={{ type: "thinking", value: "" }} />
+        {messages.length != 0 ? (
+          <ChatMessage message={{ type: "thinking", value: "" }} />
+        ) : (
+          ""
+        )}
       </div>
     </div>
   );

src/components/Header.tsx

@@ -1,20 +1,17 @@
 import { FaGithub } from "react-icons/fa";
-import PopIn from "./motions/popin";
 import { AnimatePresence } from "framer-motion";
 
 const Header: React.FC = () => {
   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">AgentGPT on GitHub</span>
-            <FaGithub size="25" />
-          </a>
-        </PopIn>
+        <a
+          href="https://github.com/reworkd/AgentGPT"
+          className="right-0 ml-0 block block text-white hover:text-[#1E88E5]"
+        >
+          <span className="sr-only">AgentGPT on GitHub</span>
+          <FaGithub size="25" />
+        </a>
       </AnimatePresence>
     </header>
   );

src/pages/index.tsx

@@ -48,8 +48,12 @@ const Home: NextPage = () => {
               className="relative flex flex-col items-center font-mono"
             >
               <div className="flex flex-row items-start shadow-2xl">
-                <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
-                <span className="text-6xl font-bold text-white">GPT</span>
+                <span className="text-4xl font-bold text-[#C0C0C0] sm:text-6xl xs:text-5xl">
+                  Agent
+                </span>
+                <span className="text-4xl font-bold text-white sm:text-6xl xs:text-5xl">
+                  GPT
+                </span>
                 <PopIn delay={0.5}>
                   <Badge>Beta 🚀</Badge>
                 </PopIn>

tailwind.config.cjs

@@ -1,8 +1,15 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        "xs": "350px",
+        "sm-h": { "raw": "(min-height: 700px)" },
+        "md-h": { "raw": "(min-height: 900px)" },
+        "lg-h": { "raw": "(min-height: 1000px)" }
+      }
+    }
   },
-  plugins: [],
+  plugins: []
 };