feat: add task

Author: 汤圆

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/common.json

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

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,
@@ -87,7 +89,8 @@ const Input = (props: InputProps) => {
         className={clsx(
           "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/TaskWindow.tsx

@@ -1,29 +1,63 @@
 import React from "react";
 import FadeIn from "./motions/FadeIn";
 import Expand from "./motions/expand";
-import { Task } from "../types/agentTypes";
+import {
+  Task,
+  MESSAGE_TYPE_TASK,
+  TASK_STATUS_STARTED,
+} from "../types/agentTypes";
 import { getMessageContainerStyle, getTaskStatusIcon } from "./utils/helpers";
 import { useMessageStore } from "./stores";
 import { FaListAlt, FaTimesCircle } from "react-icons/fa";
 import { useAgentStore } from "./stores";
 import clsx from "clsx";
+import Input from "./Input";
+import Button from "./Button";
+import { v1 } from "uuid";
 import { useTranslation } from "next-i18next";
 
 export const TaskWindow = () => {
+  const [customTask, setCustomTask] = React.useState("");
   const tasks = useMessageStore.use.tasks();
+  const addMessage = useMessageStore.use.addMessage();
   const { t } = useTranslation();
 
+  const handleAddTask = () => {
+    addMessage({
+      taskId: v1().toString(),
+      value: customTask,
+      status: TASK_STATUS_STARTED,
+      type: MESSAGE_TYPE_TASK,
+    });
+    setCustomTask("");
+  };
+
   return (
     <Expand className="xl mx-2 mt-4 hidden w-[20rem] flex-col items-center rounded-2xl border-2 border-white/20 bg-zinc-900 px-1 font-mono shadow-2xl xl:flex">
       <div className="sticky top-0 my-2 flex items-center justify-center gap-2 bg-zinc-900 p-2 text-gray-300 ">
         <FaListAlt /> <span>{t("current-tasks")}</span>
       </div>
-      <div className="window-heights mb-2 w-full px-1 ">
-        <div className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden">
+      <div className="flex h-full w-full flex-col gap-2 px-1 py-1">
+        <div className="window-heights flex w-full flex-col gap-2 overflow-y-auto overflow-x-hidden pr-1">
           {tasks.map((task, i) => (
             <Task key={i} task={task} />
           ))}
         </div>
+        <div className="flex flex-row gap-1">
+          <Input
+            value={customTask}
+            onChange={(e) => setCustomTask(e.target.value)}
+            placeholder={t("custom-task") as string}
+            small
+          />
+          <Button
+            className="font-sm px-2 py-[0] text-sm sm:px-2 sm:py-[0]"
+            onClick={handleAddTask}
+            disabled={!customTask}
+          >
+            {t("add-task")}
+          </Button>
+        </div>
       </div>
     </Expand>
   );

src/pages/index.tsx

@@ -292,7 +292,7 @@ const Home: NextPage = () => {
                 displaySettings
                 openSorryDialog={() => setShowSorryDialog(true)}
               />
-              {tasks.length > 0 && <TaskWindow />}
+              {(agent || tasks.length > 0) && <TaskWindow />}
             </Expand>
 
             <div className="flex w-full flex-col gap-2 sm:mt-4 md:mt-10">