Add instruction/overview to TaskType. Fix capitalize.

website/src/components/Tasks/CreateTask.tsx

@@ -4,7 +4,7 @@ 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 }) => {
+export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses }) => {
   const task = tasks[0].task;
 
   const [inputText, setInputText] = useState("");
@@ -33,12 +33,12 @@ export const CreateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
     <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>
+          <h5 className="text-lg font-semibold">{taskType.label}</h5>
+          <p className="text-lg py-1">{taskType.overview}</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>
+          <h5 className="text-lg font-semibold">{taskType.instruction}</h5>
           <TrackedTextarea
             text={inputText}
             onTextChange={textChangeHandler}

website/src/components/Tasks/Task.tsx

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

website/src/components/Tasks/TaskTypes.tsx

@@ -5,6 +5,8 @@ export const TaskTypes = [
     category: "create",
     pathname: "/create/initial_prompt",
     type: "initial_prompt",
+    overview: "Create an initial message to send to the assistant",
+    instruction: "Provide the initial prompt",
   },
   {
     label: "Reply as User",
@@ -12,6 +14,8 @@ export const TaskTypes = [
     category: "create",
     pathname: "/create/user_reply",
     type: "prompter_reply",
+    overview: "Given the following conversation, provide an adequate reply",
+    instruction: "Provide the user`s reply",
   },
   {
     label: "Reply as Assistant",
@@ -19,6 +23,8 @@ export const TaskTypes = [
     category: "create",
     pathname: "/create/assistant_reply",
     type: "assistant_reply",
+    overview: "Given the following conversation, provide an adequate reply",
+    instruction: "Provide the assistant`s reply",
   },
   {
     label: "Rank User Replies",