From 47095012a02a9c938edf38f17dfc24e31a7abae1 Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Sun, 9 Apr 2023 13:49:32 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8=20Add=20option=20to=20manually=20s?=
 =?UTF-8?q?hutdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutonomousAgent.ts | 17 +++++++++
 src/components/Button.tsx         |  7 ++--
 src/pages/index.tsx               | 59 +++++++++++++++++++++++--------
 3 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/src/components/AutonomousAgent.ts b/src/components/AutonomousAgent.ts
index 7529524..4b10220 100644
--- a/src/components/AutonomousAgent.ts
+++ b/src/components/AutonomousAgent.ts
@@ -62,6 +62,12 @@ class AutonomousAgent {
       return;
     }
 
+    if (!this.isRunning) {
+      this.sendManualShutdownMessage();
+      this.shutdown();
+      return;
+    }
+
     // Wait before starting
     await new Promise((r) => setTimeout(r, 1000));
 
@@ -132,6 +138,10 @@ class AutonomousAgent {
     return res.data.response as string;
   }
 
+  stopAgent() {
+    this.isRunning = false;
+  }
+
   sendGoalMessage() {
     this.sendMessage({ type: "goal", value: this.goal });
   }
@@ -143,6 +153,13 @@ class AutonomousAgent {
     });
   }
 
+  sendManualShutdownMessage() {
+    this.sendMessage({
+      type: "system",
+      value: `The agent has been manually shutdown.`,
+    });
+  }
+
   sendCompletedMessage() {
     this.sendMessage({
       type: "system",
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 622b5f1..be4bc02 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -10,6 +10,7 @@ export interface ButtonProps {
   children?: React.ReactNode;
   loader?: boolean;
   disabled?: boolean;
+  enabledClassName?: string;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
 }
 
@@ -33,10 +34,12 @@ const Button = forwardRef(
         disabled={loading || props.disabled}
         className={clsx(
           "text-gray/50 rounded-lg border-[2px] border-white/30 px-10 py-3 font-bold transition-all",
-          props.className,
           props.disabled
             ? " cursor-not-allowed border-white/10 bg-zinc-900 text-white/30"
-            : " mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl"
+            : ` mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl ${
+                props.enabledClassName || ""
+              }`,
+          props.className
         )}
         onClick={onClick}
       >
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3527e55..ec931fe 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,10 +18,12 @@ const Home: NextPage = () => {
   const [name, setName] = React.useState<string>("");
   const [goalInput, setGoalInput] = React.useState<string>("");
   const [agent, setAgent] = React.useState<AutonomousAgent | null>(null);
+  const [stoppingAgent, setStoppingAgent] = React.useState(false);
 
   const [messages, setMessages] = React.useState<Message[]>([]);
 
   const [showModal, setShowModal] = React.useState(false);
+
   useEffect(() => {
     const key = "agentgpt-modal-opened";
     const savedModalData = localStorage.getItem(key);
@@ -33,6 +35,12 @@ const Home: NextPage = () => {
     localStorage.setItem(key, JSON.stringify(true));
   }, []);
 
+  useEffect(() => {
+    if (agent == null) {
+      setStoppingAgent(false);
+    }
+  }, [agent]);
+
   const handleNewGoal = () => {
     const addMessage = (message: Message) =>
       setMessages((prev) => [...prev, message]);
@@ -43,6 +51,11 @@ const Home: NextPage = () => {
     agent.run().then(console.log).catch(console.error);
   };
 
+  const handleStopAgent = () => {
+    setStoppingAgent(true);
+    agent?.stopAgent();
+  };
+
   return (
     <DefaultLayout>
       <Dialog showModal={showModal} setShowModal={setShowModal} />
@@ -109,20 +122,38 @@ const Home: NextPage = () => {
               />
             </div>
 
-            <Button
-              disabled={agent != null || name === "" || goalInput === ""}
-              onClick={handleNewGoal}
-              className="mt-10"
-            >
-              {agent == null ? (
-                "Deploy Agent"
-              ) : (
-                <>
-                  <VscLoading className="animate-spin" size={20} />
-                  <span className="ml-2">Agent running</span>
-                </>
-              )}
-            </Button>
+            <div className="flex gap-2">
+              <Button
+                disabled={agent != null || name === "" || goalInput === ""}
+                onClick={handleNewGoal}
+                className="mt-10"
+              >
+                {agent == null ? (
+                  "Deploy Agent"
+                ) : (
+                  <>
+                    <VscLoading className="animate-spin" size={20} />
+                    <span className="ml-2">Agent running</span>
+                  </>
+                )}
+              </Button>
+
+              <Button
+                disabled={agent == null}
+                onClick={handleStopAgent}
+                className="mt-10"
+                enabledClassName={"bg-red-600 hover:bg-red-400"}
+              >
+                {stoppingAgent ? (
+                  <>
+                    <VscLoading className="animate-spin" size={20} />
+                    <span className="ml-2">Stopping agent</span>
+                  </>
+                ) : (
+                  "Stop agent"
+                )}
+              </Button>
+            </div>
           </div>
         </div>
       </main>