🚀 Styling

src/components/ChatWindow.tsx

@@ -1,6 +1,7 @@
 import cx from "classnames";
 import type { ReactNode } from "react";
 import React, { useEffect, useRef } from "react";
+import { FaBrain, FaListAlt, FaPlayCircle, FaStar } from "react-icons/fa";
 
 interface ChatWindowProps {
   children?: ReactNode;
@@ -34,6 +35,8 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
           <ChatMessage key={`${index}-${message.type}`} message={message} />
         ))}
         {children}
+
+        <ChatMessage message={{ type: "thinking", value: "" }} />
       </div>
     </div>
   );
@@ -53,16 +56,42 @@ const MacWindowHeader = () => {
 
 const ChatMessage = ({ message }: { message: Message }) => {
   return (
-    <div className="mx-4 my-1 rounded-lg border-[1px] border-transparent bg-white/20 p-3 font-mono hover:border-[#1E88E5]">
+    <div className="mx-4 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-3 font-mono hover:border-[#1E88E5]">
-      <span>
+      <div className="mr-2 inline-block h-[0.9em]">
-        {message.type === "goal" ? "🌟 Embarking on a new goal: " : ""}
+        {getMessageIcon(message)}
-        {message.type === "task" ? "📝 Adding task: " : ""}
+      </div>
-      </span>
+      <span className="mr-2 font-bold">{getMessagePrefix(message)}</span>
-      <span className="font-black">{message.value}</span>
+      <span>{message.value}</span>
     </div>
   );
 };
 
+const getMessageIcon = (message: Message) => {
+  switch (message.type) {
+    case "goal":
+      return <FaStar />;
+    case "task":
+      return <FaListAlt />;
+    case "thinking":
+      return <FaBrain className="mt-[0.1em]" />;
+    case "action":
+      return <FaPlayCircle />;
+  }
+};
+
+const getMessagePrefix = (message: Message) => {
+  switch (message.type) {
+    case "goal":
+      return "Embarking on a new goal:";
+    case "task":
+      return "Added task:";
+    case "thinking":
+      return "Thinking...";
+    case "action":
+      return "Executing action:";
+  }
+};
+
 export interface Message {
   type: "goal" | "thinking" | "task" | "action";
   value: string;

src/components/Input.tsx

@@ -5,9 +5,16 @@ interface InputProps {
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
+  disabled?: boolean;
 }
 
-const Input = ({ placeholder, left, value, onChange }: InputProps) => {
+const Input = ({
+  placeholder,
+  left,
+  value,
+  onChange,
+  disabled,
+}: InputProps) => {
   return (
     <div className="flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
       {left != null ? (
@@ -16,11 +23,15 @@ const Input = ({ placeholder, left, value, onChange }: InputProps) => {
         </div>
       ) : null}
       <input
-        className="border:black delay-50 w-full rounded-xl rounded-l-none border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]"
+        className={
+          "border:black delay-50 w-full rounded-xl rounded-l-none border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]" +
+          (disabled ? " cursor-not-allowed hover:border-white/10" : "")
+        }
         placeholder={placeholder}
         type="text"
         value={value}
         onChange={onChange}
+        disabled={disabled}
       />
     </div>
   );

src/pages/index.tsx

@@ -4,7 +4,6 @@ import DefaultLayout from "../layout/default";
 import React from "react";
 import type { Message } from "../components/ChatWindow";
 import ChatWindow, {
-  ChatMessage,
   CreateGoalMessage,
   CreateTaskMessage,
 } from "../components/ChatWindow";
@@ -13,29 +12,24 @@ import Drawer from "../components/Drawer";
 import Input from "../components/Input";
 import Button from "../components/Button";
 import { FaRobot, FaStar } from "react-icons/fa";
+import { VscLoading } from "react-icons/vsc";
+import type AutonomousAgent from "../components/AutonomousAgent";
 
 const Home: NextPage = () => {
-  const [loading, setLoading] = React.useState<boolean>(false);
   const [name, setName] = React.useState<string>("");
   const [goalInput, setGoalInput] = React.useState<string>("");
+  const [agent, setAgent] = React.useState<AutonomousAgent | null>(null);
+
   const [messages, setMessages] = React.useState<Message[]>([]);
-  const [goal, setGoal] = React.useState<string>("");
 
   const handleNewGoal = async () => {
-    setLoading(true);
-    setGoal(goalInput);
     setMessages([...messages, CreateGoalMessage(goalInput)]);
 
-    const res = await axios.post(
+    const res = await axios.post(`/api/chain`, { prompt: goalInput });
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/chain?prompt=test`,
-      { prompt: goalInput }
-    );
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
     const tasks: string[] = JSON.parse(res.data.tasks);
     setMessages((prev) => [...prev, ...tasks.map(CreateTaskMessage)]);
-    setLoading(false);
   };
 
   return (
@@ -62,13 +56,7 @@ const Home: NextPage = () => {
               </div>
             </div>
 
-            <ChatWindow className="m-10" messages={messages}>
+            <ChatWindow className="m-10" messages={messages} />
-              {loading ? (
-                <ChatMessage
-                  message={{ type: "action", value: "🧠 Thinking..." }}
-                />
-              ) : null}
-            </ChatWindow>
 
             <Input
               left={
@@ -78,6 +66,7 @@ const Home: NextPage = () => {
                 </>
               }
               value={name}
+              disabled={agent != null}
               onChange={(e) => setName(e.target.value)}
               placeholder="AgentGPT (Note: this field doesn't do anything right now)"
             />
@@ -89,17 +78,25 @@ const Home: NextPage = () => {
                   <span className="ml-2">Goal:</span>
                 </>
               }
+              disabled={agent != null}
               value={goalInput}
               onChange={(e) => setGoalInput(e.target.value)}
               placeholder="Make the world a better place."
             />
 
             <Button
-              disabled={goalInput === ""}
+              disabled={agent != null || name === "" || goalInput === ""}
               onClick={() => void handleNewGoal()}
               className="mt-10"
             >
-              Deploy Agent
+              {agent == null ? (
+                "Deploy Agent"
+              ) : (
+                <>
+                  <VscLoading className="animate-spin" size={20} />
+                  <span className="ml-2">Agent running</span>
+                </>
+              )}
             </Button>
           </div>
         </div>