feat: implement agent global state

src/components/Accordion.tsx

@@ -11,7 +11,7 @@ const Accordion = ({ child, name }: AccordionProps) => {
     <AccordionPrimitive>
       {({ open }) => (
         <>
-          <AccordionPrimitive.Button className="border:black delay-50 flex w-full items-center justify-between rounded-xl bg-[#4a4a4a] px-3 py-2 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 hover:bg-[#6b6b6b] focus:border-[#1E88E5] focus-visible:ring sm:py-2  md:text-lg">
+          <AccordionPrimitive.Button className="border:black delay-50 flex w-full items-center justify-between rounded-xl bg-[#4a4a4a] px-3 py-2 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 hover:bg-[#6b6b6b] focus:border-[#1E88E5] focus-visible:ring  md:text-lg">
             {name}
             <FaChevronDown
               className={`${open ? "rotate-180 transform" : ""} h-5 w-5`}

src/components/ChatWindow.tsx

@@ -37,7 +37,6 @@ interface ChatWindowProps extends HeaderProps {
   showDonation: boolean;
   fullscreen?: boolean;
   scrollToBottom?: boolean;
-  isAgentStopped?: boolean;
 }
 
 const messageListId = "chat-window-message-list";
@@ -51,7 +50,6 @@ const ChatWindow = ({
   onSave,
   fullscreen,
   scrollToBottom,
-  isAgentStopped,
 }: ChatWindowProps) => {
   const [t] = useTranslation();
   const [hasUserScrolled, setHasUserScrolled] = useState(false);
@@ -99,7 +97,7 @@ const ChatWindow = ({
 
           return (
             <FadeIn key={`${index}-${message.type}`}>
-              <ChatMessage message={message} isAgentStopped={isAgentStopped} />
+              <ChatMessage message={message} />
             </FadeIn>
           );
         })}
@@ -259,12 +257,10 @@ const MacWindowHeader = (props: HeaderProps) => {
 };
 const ChatMessage = ({
   message,
-  isAgentStopped,
   className,
 }: {
   message: Message;
   className?: string;
-  isAgentStopped?: boolean;
 }) => {
   const [t] = useTranslation();
   const [showCopy, setShowCopy] = useState(false);
@@ -299,7 +295,7 @@ const ChatMessage = ({
         // Avoid for system messages as they do not have an icon and will cause a weird space
         <>
           <div className="mr-2 inline-block h-[0.9em]">
-            {getTaskStatusIcon(message, { isAgentStopped })}
+            {getTaskStatusIcon(message, {})}
           </div>
           <span className="mr-2 font-bold">{getMessagePrefix(message, t)}</span>
         </>

src/components/TaskWindow.tsx

@@ -3,11 +3,12 @@ import FadeIn from "./motions/FadeIn";
 import Expand from "./motions/expand";
 import { Task } from "../types/agentTypes";
 import { getMessageContainerStyle, getTaskStatusIcon } from "./utils/helpers";
-import { useMessageStore } from "../components/store";
+import { useMessageStore } from "../components/stores";
 import { FaListAlt } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
+import { useAgentStore } from "../components/stores";
 
-export const TaskWindow = ({ isAgentStopped }: { isAgentStopped: boolean }) => {
+export const TaskWindow = () => {
   const tasks = useMessageStore.use.tasks();
   const [t] = useTranslation();
   return (
@@ -18,21 +19,16 @@ export const TaskWindow = ({ isAgentStopped }: { isAgentStopped: boolean }) => {
       <div className="window-heights mb-2 w-full px-1 ">
         <div className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden">
           {tasks.map((task, i) => (
-            <Task key={i} task={task} isAgentStopped={isAgentStopped} />
+            <Task key={i} task={task} />
           ))}
         </div>
       </div>
     </Expand>
   );
 };
 
-const Task = ({
-  task,
-  isAgentStopped,
-}: {
-  task: Task;
-  isAgentStopped: boolean;
-}) => {
+const Task = ({ task }: { task: Task }) => {
+  const isAgentStopped = useAgentStore.use.isAgentStopped();
   return (
     <FadeIn>
       <div

src/components/stores/agentStore.ts

@@ -0,0 +1,38 @@
+import { createSelectors } from "./helpers";
+import type { StateCreator } from "zustand";
+import { create } from "zustand";
+import type AutonomousAgent from "../AutonomousAgent";
+
+const initialAgentState = {
+  agent: null,
+  isAgentStopped: true,
+};
+
+interface AgentSlice {
+  agent: AutonomousAgent | null;
+  isAgentStopped: boolean;
+  updateIsAgentStopped: () => void;
+  setAgent: (newAgent: AutonomousAgent | null) => void;
+}
+
+const createAgentSlice: StateCreator<AgentSlice> = (set, get) => {
+  return {
+    ...initialAgentState,
+    updateIsAgentStopped: () => {
+      set((state) => ({
+        isAgentStopped: !state.agent?.isRunning,
+      }));
+    },
+    setAgent: (newAgent) => {
+      set(() => ({
+        agent: newAgent,
+      }));
+    },
+  };
+};
+
+export const useAgentStore = createSelectors(
+  create<AgentSlice>()((...a) => ({
+    ...createAgentSlice(...a),
+  }))
+);

src/components/store/index.ts → src/components/stores/index.ts

@@ -1 +1,2 @@
 export * from "./messageStore";
+export * from "./agentStore";

src/components/store/messageStore.ts → src/components/stores/messageStore.ts

@@ -103,4 +103,5 @@ export const useMessageStore = createSelectors(
   }))
 );
 
-export const resetAllSlices = () => resetters.forEach((resetter) => resetter());
+export const resetAllMessageSlices = () =>
+  resetters.forEach((resetter) => resetter());

src/pages/index.tsx

@@ -19,25 +19,33 @@ import { useAuth } from "../hooks/useAuth";
 import type { Message } from "../types/agentTypes";
 import { useAgent } from "../hooks/useAgent";
 import { isEmptyOrBlank } from "../utils/whitespace";
-import { useMessageStore, resetAllSlices } from "../components/store";
+import {
+  useMessageStore,
+  useAgentStore,
+  resetAllMessageSlices,
+} from "../components/stores";
 import { isTask } from "../types/agentTypes";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useSettings } from "../hooks/useSettings";
 
 const Home: NextPage = () => {
   const [t] = useTranslation();
-  // zustand states
+  // zustand states with state dependencies
+  const addMessage = useMessageStore.use.addMessage();
   const messages = useMessageStore.use.messages();
   const tasks = useMessageStore.use.tasks();
-  const addMessage = useMessageStore.use.addMessage();
   const updateTaskStatus = useMessageStore.use.updateTaskStatus();
 
+  const setAgent = useAgentStore.use.setAgent();
+  const isAgentStopped = useAgentStore.use.isAgentStopped();
+  const updateIsAgentStopped = useAgentStore.use.updateIsAgentStopped();
+  const agent = useAgentStore.use.agent();
+
   const { session, status } = useAuth();
   const [name, setName] = React.useState<string>("");
   const [goalInput, setGoalInput] = React.useState<string>("");
-  const [agent, setAgent] = React.useState<AutonomousAgent | null>(null);
   const settingsModel = useSettings();
-  const [shouldAgentStop, setShouldAgentStop] = React.useState(false);
+
   const [showHelpDialog, setShowHelpDialog] = React.useState(false);
   const [showSettingsDialog, setShowSettingsDialog] = React.useState(false);
   const [hasSaved, setHasSaved] = React.useState(false);
@@ -62,10 +70,8 @@ const Home: NextPage = () => {
   }, []);
 
   useEffect(() => {
-    if (agent == null) {
-      setShouldAgentStop(false);
-    }
-  }, [agent]);
+    updateIsAgentStopped();
+  }, [agent, updateIsAgentStopped]);
 
   const handleAddMessage = (message: Message) => {
     if (isTask(message)) {
@@ -78,21 +84,19 @@ const Home: NextPage = () => {
   const disableDeployAgent =
     agent != null || isEmptyOrBlank(name) || isEmptyOrBlank(goalInput);
 
-  const isAgentStopped = () => !agent?.isRunning || agent === null;
-
   const handleNewGoal = () => {
-    const agent = new AutonomousAgent(
+    const newAgent = new AutonomousAgent(
       name.trim(),
       goalInput.trim(),
       handleAddMessage,
       () => setAgent(null),
       settingsModel.settings,
       session ?? undefined
     );
-    setAgent(agent);
+    setAgent(newAgent);
     setHasSaved(false);
-    resetAllSlices();
-    agent.run().then(console.log).catch(console.error);
+    resetAllMessageSlices();
+    newAgent?.run().then(console.log).catch(console.error);
   };
 
   const handleKeyPress = (
@@ -109,7 +113,6 @@ const Home: NextPage = () => {
   };
 
   const handleStopAgent = () => {
-    setShouldAgentStop(true);
     agent?.stopAgent();
   };
 
@@ -121,7 +124,7 @@ const Home: NextPage = () => {
 
   const shouldShowSave =
     status === "authenticated" &&
-    !agent?.isRunning &&
+    isAgentStopped &&
     messages.length &&
     !hasSaved;
 
@@ -194,11 +197,8 @@ const Home: NextPage = () => {
                     : undefined
                 }
                 scrollToBottom
-                isAgentStopped={isAgentStopped()}
               />
-              {tasks.length > 0 && (
-                <TaskWindow isAgentStopped={isAgentStopped()} />
-              )}
+              {tasks.length > 0 && <TaskWindow />}
             </Expand>
 
             <div className="flex w-full flex-col gap-2 sm:m-4 ">
@@ -248,11 +248,11 @@ const Home: NextPage = () => {
                 )}
               </Button>
               <Button
-                disabled={agent == null}
+                disabled={agent === null}
                 onClick={handleStopAgent}
                 enabledClassName={"bg-red-600 hover:bg-red-400"}
               >
-                {shouldAgentStop ? (
+                {!isAgentStopped && agent === null ? (
                   <>
                     <VscLoading className="animate-spin" size={20} />
                     <span className="ml-2">{t("Stopping")}</span>

src/types/agentTypes.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+/* Message & Task Type */
 export const [
   MESSAGE_TYPE_GOAL,
   MESSAGE_TYPE_THINKING,
@@ -65,6 +66,20 @@ export const messageSchema = z.union([taskSchema, nonTaskScehma]);
 export type Task = z.infer<typeof taskSchema>;
 export type Message = z.infer<typeof messageSchema>;
 
+/* Agent Type */
+export const [AGENT_STATUS_RUNNING, AGENT_STATUS_STOPPED] = [
+  "running" as const,
+  "stopped" as const,
+];
+
+const AgentStatusSchema = z.union([
+  z.literal(AGENT_STATUS_RUNNING),
+  z.literal(AGENT_STATUS_STOPPED),
+  z.literal(""),
+]);
+
+export type AgentStatus = z.infer<typeof AgentStatusSchema>;
+
 /* Type Predicates */
 export const isTask = (value: unknown): value is Task => {
   try {