Merge pull request #146 from Dogtiti/feature/task

Feature/task

Author: Dogtiti

public/locales/en/chat.json

@@ -30,5 +30,6 @@
   "web-search": "Web search",
   "signin-tips": "<0> Please <1>sign in</1> to deploy an Agent! 🤖 </0> ",
   "generating-response": "🧠 Generating response...",
-  "searching-web-for": "🌐 Searching the web for {{arg}} ..."
+  "searching-web-for": "🌐 Searching the web for {{arg}} ...",
+  "pause-mode": "Pause Mode"
 }

public/locales/en/common.json

@@ -33,5 +33,7 @@
   "donation": "Donation",
   "continue": "Continue",
   "placeholder-agent-goal": "Make the world a better place.",
-  "paused": "Paused"
+  "paused": "Paused",
+  "add-task": "Add Task",
+  "custom-task":"Custom Task"
 }

public/locales/zh/chat.json

@@ -30,5 +30,6 @@
   "web-search": "网络搜索",
   "signin-tips": "<0> 请 <1>登录</1> 以部署代理! 🤖 </0> ",
   "generating-response": "🧠  生成回复中...",
-  "searching-web-for": "🌐 正在搜索 {{arg}} ..."
+  "searching-web-for": "🌐 正在搜索 {{arg}} ...",
+  "pause-mode": "暂停模式"
 }

public/locales/zh/common.json

@@ -33,5 +33,7 @@
   "donation": "捐赠",
   "continue": "继续",
   "placeholder-agent-goal": "让世界变得更美好。",
-  "paused": "已暂停"
+  "paused": "已暂停",
+  "add-task": "新增任务",
+  "custom-task": "自定义任务"
 }

src/components/AutonomousAgent.ts

@@ -30,7 +30,7 @@ import type {
   Task,
   AgentPlaybackControl,
 } from "../types/agentTypes";
-import { useAgentStore } from "./stores";
+import { useAgentStore, useMessageStore } from "./stores";
 import { i18n } from "next-i18next";
 
 const TIMEOUT_LONG = 1000;
@@ -50,9 +50,8 @@ class AutonomousAgent {
   mode: AgentMode;
   playbackControl: AgentPlaybackControl;
 
-  tasks: Task[] = [];
   completedTasks: string[] = [];
-  isRunning = true;
+  isRunning = false;
   numLoops = 0;
   currentTask?: Task;
 
@@ -88,6 +87,18 @@ class AutonomousAgent {
   }
 
   async run() {
+    if (!this.isRunning) {
+      this.isRunning = true;
+      await this.startGoal();
+    }
+
+    await this.loop();
+    if (this.mode === PAUSE_MODE && !this.isRunning) {
+      this.handlePause({ agentPlaybackControl: this.playbackControl });
+    }
+  }
+
+  async startGoal() {
     const { isGuestMode, isValidGuest } = this.guestSettings;
     if (isGuestMode && !isValidGuest && !this.modelSettings.customApiKey) {
       this.sendErrorMessage(
@@ -96,49 +107,38 @@ class AutonomousAgent {
       this.stopAgent();
       return;
     }
-    if (this.tasks.length === 0) {
-      this.sendGoalMessage();
-      this.sendThinkingMessage();
-
-      // Initialize by getting tasks
-      try {
-        const taskValues = await this.getInitialTasks();
-        for (const value of taskValues) {
-          await new Promise((r) => setTimeout(r, TIMOUT_SHORT));
-          const task: Task = {
-            taskId: v1().toString(),
-            value,
-            status: TASK_STATUS_STARTED,
-            type: MESSAGE_TYPE_TASK,
-          };
-          this.sendMessage(task);
-          this.tasks.push(task);
-        }
-      } catch (e) {
-        console.log(e);
-        this.sendErrorMessage(getMessageFromError(e));
-        this.shutdown();
-        return;
-      }
-    }
+    this.sendGoalMessage();
+    this.sendThinkingMessage();
 
-    await this.loop();
-    if (this.mode === PAUSE_MODE && !this.isRunning) {
-      this.handlePause({ agentPlaybackControl: this.playbackControl });
+    // Initialize by getting taskValues
+    try {
+      const taskValues = await this.getInitialTasks();
+      for (const value of taskValues) {
+        await new Promise((r) => setTimeout(r, TIMOUT_SHORT));
+        const task: Task = {
+          taskId: v1().toString(),
+          value,
+          status: TASK_STATUS_STARTED,
+          type: MESSAGE_TYPE_TASK,
+        };
+        this.sendMessage(task);
+      }
+    } catch (e) {
+      console.log(e);
+      this.sendErrorMessage(getMessageFromError(e));
+      this.shutdown();
+      return;
     }
   }
 
   async loop() {
-    console.log(`Loop ${this.numLoops}`);
-    console.log(this.tasks);
-
     this.conditionalPause();
 
     if (!this.isRunning) {
       return;
     }
 
-    if (this.tasks.length === 0) {
+    if (this.getRemainingTasks().length === 0) {
       this.sendCompletedMessage();
       this.shutdown();
       return;
@@ -155,7 +155,9 @@ class AutonomousAgent {
     // Wait before starting
     await new Promise((r) => setTimeout(r, TIMEOUT_LONG));
 
-    const currentTask = this.tasks.shift() as Task;
+    // Start with first task
+    const currentTask = this.getRemainingTasks()[0] as Task;
+    this.sendMessage({ ...currentTask, status: TASK_STATUS_EXECUTING });
 
     this.currentTask = currentTask;
 
@@ -171,19 +173,15 @@ class AutonomousAgent {
       this.sendAnalysisMessage(analysis, currentTask.taskId);
     }
 
-    // Execute first task
-    // Get and remove first task
-    this.completedTasks.push(this.tasks[0]?.value || "");
-
-    this.sendMessage({ ...currentTask, status: TASK_STATUS_EXECUTING });
-
     const result = await this.executeTask(currentTask.value, analysis);
     this.sendMessage({
       ...currentTask,
       info: result,
       status: TASK_STATUS_COMPLETED,
     });
 
+    this.completedTasks.push(currentTask.value || "");
+
     // Wait before adding tasks
     await new Promise((r) => setTimeout(r, TIMEOUT_LONG));
     this.sendThinkingMessage(currentTask.taskId);
@@ -202,10 +200,9 @@ class AutonomousAgent {
         };
         return task;
       });
-      this.tasks = newTasks.concat(this.tasks);
+
       for (const task of newTasks) {
         await new Promise((r) => setTimeout(r, TIMOUT_SHORT));
-        // this.tasks.push(task);
         this.sendMessage(task);
       }
 
@@ -223,8 +220,13 @@ class AutonomousAgent {
     await this.loop();
   }
 
+  getRemainingTasks() {
+    const tasks = useMessageStore.getState().tasks;
+    return tasks.filter((task: Task) => task.status === TASK_STATUS_STARTED);
+  }
+
   private conditionalPause() {
-    if (this.mode !== PAUSE_MODE) {
+    if (this.mode != PAUSE_MODE) {
       return;
     }
 
@@ -275,7 +277,7 @@ class AutonomousAgent {
     currentTask: string,
     result: string
   ): Promise<string[]> {
-    const taskValues = this.tasks.map((task) => task.value);
+    const taskValues = this.getRemainingTasks().map((task) => task.value);
 
     if (this.shouldRunClientSide()) {
       return await AgentService.createTasksAgent(

src/components/ChatWindow.tsx

@@ -20,6 +20,7 @@ import {
   TASK_STATUS_COMPLETED,
   TASK_STATUS_FINAL,
   PAUSE_MODE,
+  AUTOMATIC_MODE,
 } from "../types/agentTypes";
 import clsx from "clsx";
 import { getMessageContainerStyle, getTaskStatusIcon } from "./utils/helpers";
@@ -61,6 +62,7 @@ const ChatWindow = ({
   const agent = useAgentStore.use.agent();
   const isWebSearchEnabled = useAgentStore.use.isWebSearchEnabled();
   const setIsWebSearchEnabled = useAgentStore.use.setIsWebSearchEnabled();
+  const updateAgentMode = useAgentStore.use.updateAgentMode();
 
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
@@ -116,6 +118,10 @@ const ChatWindow = ({
     return depth;
   };
 
+  const handleUpdateAgentMode = (value: boolean) => {
+    updateAgentMode(value ? PAUSE_MODE : AUTOMATIC_MODE);
+  };
+
   return (
     <div
       className={
@@ -178,20 +184,42 @@ const ChatWindow = ({
         )}
       </div>
       {displaySettings && (
-        <div className="flex items-center justify-center">
-          <div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
-            <p className="font-mono text-sm">{t("web-search")}</p>
+        <div className="flex flex-col items-center justify-center md:flex-row">
+          <SwitchContainer label={t("web-search")}>
             <Switch
+              disabled={agent !== null}
               value={isWebSearchEnabled}
               onChange={handleChangeWebSearch}
             />
-          </div>
+          </SwitchContainer>
+          <SwitchContainer label={t("pause-mode")}>
+            <Switch
+              disabled={agent !== null}
+              value={agentMode === PAUSE_MODE}
+              onChange={handleUpdateAgentMode}
+            />
+          </SwitchContainer>
         </div>
       )}
     </div>
   );
 };
 
+const SwitchContainer = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div className="m-1 flex w-36 items-center justify-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
+      <p className="font-mono text-sm">{label}</p>
+      {children}
+    </div>
+  );
+};
+
 interface HeaderProps {
   title?: string | ReactNode;
   messages: Message[];

src/components/Input.tsx

@@ -6,6 +6,7 @@ import { isArrayOfType } from "../utils/helpers";
 import type { toolTipProperties } from "./types";
 
 interface InputProps {
+  small?: boolean; // Will lower padding and font size. Currently only works for the default input
   left?: React.ReactNode;
   value: string | number | undefined;
   onChange: (
@@ -30,6 +31,7 @@ interface InputProps {
 
 const Input = (props: InputProps) => {
   const {
+    small,
     placeholder,
     left,
     value,
@@ -85,9 +87,10 @@ const Input = (props: InputProps) => {
     inputElement = (
       <textarea
         className={clsx(
-          "border:black delay-50 h-20 w-full resize-none rounded-xl border-[2px] border-white/10 bg-[#3a3a3a] p-2 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] md:text-lg",
+          "border:black delay-50 h-15 w-full resize-none rounded-xl border-[2px] border-white/10 bg-[#3a3a3a] p-2 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] sm:h-20 md:text-lg",
           disabled && " cursor-not-allowed hover:border-white/10",
-          left && "md:rounded-l-none"
+          left && "md:rounded-l-none",
+          small && "text-sm sm:py-[0]"
         )}
         placeholder={placeholder}
         value={value}
@@ -120,9 +123,11 @@ const Input = (props: InputProps) => {
 
   return (
     <div
-      className={`items-left z-5 flex w-full flex-col rounded-xl font-mono text-lg text-white/75 shadow-xl md:flex-row md:items-center md:bg-[#3a3a3a] ${
-        isTypeRange() ? "md: border-white/10 md:border-[2px]" : ""
-      } shadow-xl md:flex-row md:items-center`}
+      className={clsx(
+        `items-left z-5 flex h-fit w-full flex-col rounded-xl font-mono text-lg text-white/75 shadow-xl md:flex-row md:items-center md:bg-[#3a3a3a]`,
+        isTypeRange() && "md: border-white/10 md:border-[2px]",
+        `shadow-xl md:flex-row md:items-center`
+      )}
     >
       {left && (
         <Label left={left} type={type} toolTipProperties={toolTipProperties} />

src/components/SettingsDialog.tsx

@@ -10,7 +10,6 @@ import {
   FaCoins,
   FaCode,
   FaServer,
-  FaTachometerAlt,
 } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
@@ -19,8 +18,6 @@ import Accordion from "./Accordion";
 import type { ModelSettings, SettingModel } from "../utils/types";
 import { useGuestMode } from "../hooks/useGuestMode";
 import clsx from "clsx";
-import { AUTOMATIC_MODE, PAUSE_MODE } from "../types/agentTypes";
-import { useAgentStore } from "./stores";
 
 export const SettingsDialog: React.FC<{
   show: boolean;
@@ -32,9 +29,6 @@ export const SettingsDialog: React.FC<{
   });
   const { isGuestMode } = useGuestMode(settings.customGuestKey);
   const { t } = useTranslation(["settings", "common"]);
-  const agent = useAgentStore.use.agent();
-  const agentMode = useAgentStore.use.agentMode();
-  const updateAgentMode = useAgentStore.use.updateAgentMode();
 
   useEffect(() => {
     setSettings(customSettings.settings);
@@ -253,24 +247,6 @@ export const SettingsDialog: React.FC<{
             type="password"
           />
         )}
-        <Input
-          left={
-            <>
-              <FaTachometerAlt />
-              <span className="ml-2">{t("mode")}</span>
-            </>
-          }
-          value={agentMode}
-          disabled={agent !== null}
-          onChange={() => null}
-          setValue={updateAgentMode as (agentMode: string) => void}
-          type="combobox"
-          toolTipProperties={{
-            message: t("mode-tips") as string,
-            disabled: false,
-          }}
-          attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
-        />
         <Accordion
           child={advancedSettings}
           name={t("advanced-settings")}