🚀 Update input fields

src/components/Badge.tsx

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

src/components/Button.tsx

@@ -33,7 +33,7 @@ const Button = forwardRef(
         disabled={loading || props.disabled}
         className={
           // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          "shadow-2xl transition-all " + props.className
+          "transition-all hover:shadow-2xl " + props.className
         }
         onClick={onClick}
       >

src/components/ChatWindow.tsx

@@ -5,11 +5,17 @@ import React from "react";
 
 interface ChatWindowProps {
   children?: ReactNode;
+  className: string;
 }
 
-const ChatWindow = ({ children }: ChatWindowProps) => {
+const ChatWindow = ({ children, className }: ChatWindowProps) => {
   return (
-    <div className="border-translucent flex h-80 w-full max-w-screen-md flex-col rounded-3xl bg-black/50 text-white drop-shadow-lg">
+    <div
+      className={
+        "border-translucent flex h-80 w-full max-w-screen-md flex-col rounded-3xl bg-black/50 text-white drop-shadow-lg " +
+        className
+      }
+    >
       <MacWindowHeader />
       <div className="overflow-y-scroll">{children}</div>
     </div>
@@ -33,7 +39,7 @@ const ChatMessage = ({ message }: { message: Message }) => {
     <div className="mx-4 my-1 rounded-lg border-[1px] border-transparent bg-white/20 p-3 font-mono hover:border-[#1E88E5]">
       <span>
         {message.type === "goal" ? "🌟 Embarking on a new goal: " : ""}
-        {message.type === "task" ? "📝 Adding to task list: " : ""}
+        {message.type === "task" ? "📝 Adding task: " : ""}
       </span>
       <span className="font-black">{message.value}</span>
     </div>

src/components/Input.tsx

@@ -1,18 +1,28 @@
 import React from "react";
 
 interface InputProps {
+  left: React.ReactNode;
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
 }
 
-const Input = ({ value, onChange }: InputProps) => {
+const Input = ({ placeholder, left, value, onChange }: InputProps) => {
   return (
-    <input
-      className="shadow-semibold border:black m-3 w-[60%] rounded-xl border-[2px] border-transparent bg-[#3a3a3a] px-2 py-5 font-mono text-lg tracking-wider text-white/75 outline-0 transition-all hover:border-[#1E88E5]/25 focus:border-[#1E88E5]"
-      type="text"
-      value={value}
-      onChange={onChange}
-    />
+    <div className="flex w-[60%] items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl transition-all">
+      {left != null ? (
+        <div className="center flex h-full items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 text-lg font-semibold tracking-wider">
+          {left}
+        </div>
+      ) : null}
+      <input
+        className="border:black w-full rounded-xl rounded-l-none border-[2px] border-white/10 bg-transparent px-2 py-5 tracking-wider outline-0 placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]"
+        placeholder={placeholder}
+        type="text"
+        value={value}
+        onChange={onChange}
+      />
+    </div>
   );
 };
 

src/pages/index.tsx

@@ -7,6 +7,8 @@ import axios from "axios";
 import Drawer from "../components/Drawer";
 import Input from "../components/Input";
 import Button from "../components/Button";
+import { AiFillRobot } from "react-icons/Ai";
+import { FaStar } from "react-icons/fa";
 
 export interface Message {
   type: "goal" | "thinking" | "task" | "action";
@@ -23,6 +25,7 @@ const TaskMessage = (task: string) => {
 
 const Home: NextPage = () => {
   const [loading, setLoading] = React.useState<boolean>(false);
+  const [name, setName] = React.useState<string>("");
   const [goalInput, setGoalInput] = React.useState<string>("");
   const [messages, setMessages] = React.useState<Message[]>([]);
   const [goal, setGoal] = React.useState<string>("");
@@ -50,16 +53,23 @@ const Home: NextPage = () => {
         <Drawer />
         <div
           id="content"
-          className="flex h-screen w-full flex-col items-center justify-center gap-10"
+          className="flex h-screen w-full flex-col items-center justify-center gap-3"
         >
-          <div id="title" className="flex items-center gap-4">
-            <div className="font-mono text-6xl font-bold text-[#C0C0C0]">
-              AgentGPT
+          <div
+            id="title"
+            className="flex flex-col items-center font-mono shadow-2xl"
+          >
+            <div className="flex items-center">
+              <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
+              <span className="mr-5 text-6xl font-bold text-white">GPT</span>
+              <Badge>Beta 🚀</Badge>
+            </div>
+            <div className="font-mono text-[0.8em] font-bold text-white">
+              Autonomous AI Agents in your browser
             </div>
-            <Badge>Beta 🚀</Badge>
           </div>
 
-          <ChatWindow>
+          <ChatWindow className="m-10">
             {messages.map((message, index) => (
               <ChatMessage key={`${index}-${message.type}`} message={message} />
             ))}
@@ -67,9 +77,29 @@ const Home: NextPage = () => {
           </ChatWindow>
 
           <Input
+            left={
+              <>
+                <AiFillRobot />
+                <span className="ml-2">Name:</span>
+              </>
+            }
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="AgentGPT (Note: this field doesn't do anything right now)"
+          />
+
+          <Input
+            left={
+              <>
+                <FaStar />
+                <span className="ml-2">Goal:</span>
+              </>
+            }
             value={goalInput}
             onChange={(e) => setGoalInput(e.target.value)}
+            placeholder="Make the world a better place."
           />
+
           {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
           <Button
             onClick={() => void handleNewGoal()}
@@ -77,6 +107,13 @@ const Home: NextPage = () => {
           >
             Deploy Agent
           </Button>
+
+          <Button
+            onClick={() => void handleNewGoal()}
+            className="font-bolder text-gray/50 rounded-lg bg-[#1E88E5]/70 px-10 py-5 font-bold text-black/60 hover:bg-[#0084f7] hover:text-white"
+          >
+            Next
+          </Button>
         </div>
       </main>
     </DefaultLayout>