➕ Add ability to add tasks (reworkd#460)

itsharex · May 6, 2023 · 2f302b0 · 2f302b0
1 parent 7a4a2f2
commit 2f302b0
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/src/components/Input.tsx b/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,
@@ -104,7 +106,8 @@ const Input = (props: InputProps) => {
           "border:black delay-50 w-full rounded-xl bg-[#3a3a3a] py-1 text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] sm:py-3 md:text-lg",
           !isTypeRange() && "border-[2px] border-white/10 px-2",
           disabled && " cursor-not-allowed hover:border-white/10",
-          left && "md:rounded-l-none"
+          left && "md:rounded-l-none",
+          small && "text-sm sm:py-[0]"
         )}
         ref={inputRef}
         placeholder={placeholder}
@@ -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} />

diff --git a/src/components/TaskWindow.tsx b/src/components/TaskWindow.tsx
@@ -1,28 +1,63 @@
 import React from "react";
 import FadeIn from "./motions/FadeIn";
 import Expand from "./motions/expand";
-import { Task } from "../types/agentTypes";
+import {
+  MESSAGE_TYPE_TASK,
+  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 { useTranslation } from "react-i18next";
 import { useAgentStore } from "./stores";
 import clsx from "clsx";
+import Input from "./Input";
+import Button from "./Button";
+import { v1 } from "uuid";
 
 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 /> {t("Current tasks")}
       </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={"Custom task"}
+            small
+          />
+          <Button
+            className="font-sm px-2 py-[0] text-sm sm:px-2 sm:py-[0]"
+            onClick={handleAddTask}
+            disabled={!customTask}
+          >
+            Add
+          </Button>
+        </div>
       </div>
     </Expand>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -288,7 +288,7 @@ const Home: NextPage = () => {
                 openSorryDialog={() => setShowSorryDialog(true)}
                 setAgentRun={setAgentRun}
               />
-              {tasks.length > 0 && <TaskWindow />}
+              {(agent || tasks.length > 0) && <TaskWindow />}
             </Expand>
 
             <div className="flex w-full flex-col gap-2 md:m-4 ">