Add instruction/overview to TaskType. Fix capitalize.

website/src/components/Dashboard/TaskOption.tsx

@@ -5,10 +5,6 @@ import { TaskTypes } from "../Tasks/TaskTypes";
 
 const displayTaskCategories = ["create", "evaluate"];
 
-function capitalize(text: string) {
-  return text.charAt(0).toUpperCase() + text.slice(1);
-}
-
 export const TaskOption = () => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
@@ -16,7 +12,9 @@ export const TaskOption = () => {
     <Box className="flex flex-col gap-14" fontFamily="inter">
       {displayTaskCategories.map((category, categoryIndex) => (
         <div key={categoryIndex}>
-          <Text className="text-2xl font-bold pb-4">{capitalize(category)}</Text>
+          <Text className="text-2xl font-bold pb-4" style={{ textTransform: "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}>

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",