Refactor tasks into components

website/src/components/Dashboard/TaskOption.tsx

@@ -1,126 +1,57 @@
 import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Link from "next/link";
 
-const crTasks = [
-  {
-    label: "Create Initial Prompts",
-    desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
-    type: "create",
-    pathname: "/create/initial_prompt",
-  },
-  {
-    label: "Reply as User",
-    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
-    type: "create",
-    pathname: "/create/user_reply",
-  },
-  {
-    label: "Reply as Assistant",
-    desc: "Help Open Assistant improve its responses to conversations with other users.",
-    type: "create",
-    pathname: "/create/assistant_reply",
-  },
-];
+import { TaskTypes } from "../Tasks/TaskTypes";
 
-const evTasks = [
-  {
-    label: "Rank User Replies",
-    type: "eval",
-    desc: "Help Open Assistant improve its responses to conversations with other users.",
-    pathname: "/evaluate/rank_user_replies",
-  },
+const displayTaskCategories = ["create", "evaluate"];
 
-  {
-    label: "Rank Assistant Replies",
-    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
-    type: "eval",
-    pathname: "/evaluate/rank_assistant_replies",
-  },
-  {
-    label: "Rank Initial Prompts",
-    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
-    type: "eval;",
-    pathname: "/evaluate/rank_initial_prompts",
-  },
-];
+function capitalize(text: string) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
 
 export const TaskOption = () => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
   return (
     <Box className="flex flex-col gap-14" fontFamily="inter">
-      <div>
-        <Text className="text-2xl font-bold pb-4">Create</Text>
-        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-          {crTasks.map((item, itemIndex) => (
-            <Link key={itemIndex} href={item.pathname}>
-              <GridItem
-                bg={backgroundColor}
-                borderRadius="xl"
-                boxShadow="base"
-                className="flex flex-col justify-between h-full"
-              >
-                <Box className="p-6 pb-10">
-                  <Flex flexDir="column" gap="3">
-                    <Heading size="md" fontFamily="inter">
-                      {item.label}
-                    </Heading>
-                    <Text size="sm" opacity="80%">
-                      {item.desc}
-                    </Text>
-                  </Flex>
-                </Box>
-                <Box
-                  bg="blue.500"
-                  borderBottomRadius="xl"
-                  className="px-6 py-2 transition-colors duration-300"
-                  _hover={{ backgroundColor: "blue.600" }}
+      {displayTaskCategories.map((category, categoryIndex) => (
+        <div key={categoryIndex}>
+          <Text className="text-2xl font-bold pb-4">{capitalize(category)}</Text>
+          <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+            {TaskTypes.filter((task) => task.category == category).map((item, itemIndex) => (
+              <Link key={itemIndex} href={item.pathname}>
+                <GridItem
+                  bg={backgroundColor}
+                  borderRadius="xl"
+                  boxShadow="base"
+                  className="flex flex-col justify-between h-full"
                 >
-                  <Text fontWeight="bold" color="white">
-                    Go
-                  </Text>
-                </Box>
-              </GridItem>
-            </Link>
-          ))}
-        </SimpleGrid>
-      </div>
-      <div>
-        <Text className="text-2xl font-bold pb-4">Evaluate</Text>
-        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-          {evTasks.map((item, itemIndex) => (
-            <Link key={itemIndex} href={item.pathname}>
-              <GridItem
-                bg={backgroundColor}
-                borderRadius="xl"
-                boxShadow="base"
-                className="flex flex-col justify-between h-full"
-              >
-                <Box className="p-6 pb-10">
-                  <Flex flexDir="column" gap="3">
-                    <Heading size="md" fontFamily="inter">
-                      {item.label}
-                    </Heading>
-                    <Text size="sm" opacity="80%">
-                      {item.desc}
+                  <Box className="p-6 pb-10">
+                    <Flex flexDir="column" gap="3">
+                      <Heading size="md" fontFamily="inter">
+                        {item.label}
+                      </Heading>
+                      <Text size="sm" opacity="80%">
+                        {item.desc}
+                      </Text>
+                    </Flex>
+                  </Box>
+                  <Box
+                    bg="blue.500"
+                    borderBottomRadius="xl"
+                    className="px-6 py-2 transition-colors duration-300"
+                    _hover={{ backgroundColor: "blue.600" }}
+                  >
+                    <Text fontWeight="bold" color="white">
+                      Go
                     </Text>
-                  </Flex>
-                </Box>
-                <Box
-                  bg="blue.500"
-                  borderBottomRadius="xl"
-                  className="px-6 py-2 transition-colors duration-300"
-                  _hover={{ backgroundColor: "blue.600" }}
-                >
-                  <Text fontWeight="bold" color="white">
-                    Go
-                  </Text>
-                </Box>
-              </GridItem>
-            </Link>
-          ))}
-        </SimpleGrid>
-      </div>
+                  </Box>
+                </GridItem>
+              </Link>
+            ))}
+          </SimpleGrid>
+        </div>
+      ))}
     </Box>
   );
 };

website/src/components/Tasks/CreateTask.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { Messages } from "src/components/Messages";
+import { TaskControls } from "src/components/Survey/TaskControls";
+import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+
+export const CreateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
+  const task = tasks[0].task;
+
+  const [inputText, setInputText] = useState("");
+
+  const submitResponse = (task: { id: string }) => {
+    const text = inputText.trim();
+    trigger({
+      id: task.id,
+      update_type: "text_reply_to_message",
+      content: {
+        text,
+      },
+    });
+  };
+
+  const fetchNextTask = () => {
+    setInputText("");
+    mutate();
+  };
+
+  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputText(event.target.value);
+  };
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <TwoColumnsWithCards>
+        <>
+          <h5 className="text-lg font-semibold">Reply as the assistant</h5>
+          <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
+          {task.conversation ? <Messages messages={task.conversation.messages} post_id={task.id} /> : null}
+        </>
+        <>
+          <h5 className="text-lg font-semibold">Provide the assistant`s reply</h5>
+          <TrackedTextarea
+            text={inputText}
+            onTextChange={textChangeHandler}
+            thresholds={{ low: 20, medium: 40, goal: 50 }}
+            textareaProps={{ placeholder: "Reply..." }}
+          />
+        </>
+      </TwoColumnsWithCards>
+
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
+  );
+};

website/src/components/Tasks/EvaluateTask.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { ContextMessages } from "src/components/ContextMessages";
+import { Sortable } from "src/components/Sortable/Sortable";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
+
+export const EvaluateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
+  const [ranking, setRanking] = useState<number[]>([]);
+  const submitResponse = (task) => {
+    trigger({
+      id: task.id,
+      update_type: "message_ranking",
+      content: {
+        ranking,
+      },
+    });
+  };
+
+  const fetchNextTask = () => {
+    setRanking([]);
+    mutate();
+  };
+
+  const sortables = tasks[0].task.replies ? "replies" : "prompts";
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
+        <h5 className="text-lg font-semibold mb-4">Instructions</h5>
+        <p className="text-lg py-1">
+          Given the following {sortables}, sort them from best to worst, best being first, worst being last.
+        </p>
+        {tasks[0].task.conversation ? <ContextMessages messages={tasks[0].task.conversation.messages} /> : null}
+        <Sortable items={tasks[0].task[sortables]} onChange={setRanking} className="my-8" />
+      </SurveyCard>
+
+      <TaskControlsOverridable
+        tasks={tasks}
+        isValid={ranking.length == tasks[0].task[sortables].length}
+        prepareForSubmit={() => setRanking(tasks[0].task[sortables].map((_, idx) => idx))}
+        onSubmitResponse={submitResponse}
+        onSkip={fetchNextTask}
+      />
+    </div>
+  );
+};

website/src/components/Tasks/Task.tsx

@@ -0,0 +1,20 @@
+import { CreateTask } from "./CreateTask";
+import { EvaluateTask } from "./EvaluateTask";
+import { TaskTypes } from "./TaskTypes";
+
+export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
+  const task = tasks[0].task;
+
+  function taskTypeComponent(type) {
+    const category = TaskTypes.find((taskType) => taskType.type === type).category;
+
+    switch (category) {
+      case "create":
+        return <CreateTask tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />;
+      case "evaluate":
+        return <EvaluateTask tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />;
+    }
+  }
+
+  return taskTypeComponent(task.type);
+};

website/src/components/Tasks/TaskTypes.tsx

@@ -0,0 +1,44 @@
+export const TaskTypes = [
+  {
+    label: "Create Initial Prompts",
+    desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
+    category: "create",
+    pathname: "/create/initial_prompt",
+    type: "initial_prompt",
+  },
+  {
+    label: "Reply as User",
+    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
+    category: "create",
+    pathname: "/create/user_reply",
+    type: "prompter_reply",
+  },
+  {
+    label: "Reply as Assistant",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    category: "create",
+    pathname: "/create/assistant_reply",
+    type: "assistant_reply",
+  },
+  {
+    label: "Rank User Replies",
+    category: "evaluate",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    pathname: "/evaluate/rank_user_replies",
+    type: "rank_prompter_replies",
+  },
+  {
+    label: "Rank Assistant Replies",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    category: "evaluate",
+    pathname: "/evaluate/rank_assistant_replies",
+    type: "rank_assistant_replies",
+  },
+  {
+    label: "Rank Initial Prompts",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    category: "evaluate",
+    pathname: "/evaluate/rank_initial_prompts",
+    type: "rank_initial_prompts",
+  },
+];