Refactor tasks into components

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",
+  },
+];