Label Initial Prompt

website/src/components/Dashboard/TaskOption.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 import { TaskCategory, TaskTypes } from "../Tasks/TaskTypes";
 
-const displayTaskCategories = [TaskCategory.Create, TaskCategory.Evaluate];
+const displayTaskCategories = [TaskCategory.Create, TaskCategory.Evaluate, TaskCategory.Label];
 
 export const TaskOption = () => {
   const backgroundColor = useColorModeValue("white", "gray.700");
@@ -12,9 +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">{TaskCategory[category]}</Text>
+          <Text className="text-2xl font-bold pb-4">{category}</Text>
           <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-            {TaskTypes.filter((task) => task.category == category).map((item, itemIndex) => (
+            {TaskTypes.filter((task) => task.category === category).map((item, itemIndex) => (
               <Link key={itemIndex} href={item.pathname}>
                 <GridItem
                   bg={backgroundColor}

website/src/components/FlaggableElement.tsx

@@ -118,7 +118,8 @@ export const FlaggableElement = (props) => {
     </Popover>
   );
 };
-function FlagCheckbox(props: {
+
+export function FlagCheckbox(props: {
   option: textFlagLabels;
   idx: number;
   checkboxValues: boolean[];

website/src/components/Messages.tsx

@@ -1,5 +1,6 @@
 import { Grid } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import { FlaggableElement } from "./FlaggableElement";
 
@@ -8,29 +9,30 @@ export interface Message {
   is_assistant: boolean;
 }
 
-const getBgColor = (isAssistant: boolean, colorMode: "light" | "dark") => {
-  if (colorMode === "light") {
-    return isAssistant ? "bg-slate-800" : "bg-sky-900";
-  } else {
-    return isAssistant ? "bg-black" : "bg-sky-900";
-  }
-};
-
 export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
-  const { colorMode } = useColorMode();
+  const items = messages.map((messageProps: Message, i: number) => {
+    const { text } = messageProps;
 
-  const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
       <FlaggableElement text={text} post_id={post_id} key={i + text}>
-        <div
-          key={i + text}
-          className={`${getBgColor(is_assistant, colorMode)} p-4 rounded-md text-white whitespace-pre-wrap`}
-        >
-          {text}
-        </div>
+        <MessageView {...messageProps} />
       </FlaggableElement>
     );
   });
   // Maybe also show a legend of the colors?
   return <Grid gap={2}>{items}</Grid>;
 };
+
+export const MessageView = ({ is_assistant, text }: Message) => {
+  const { colorMode } = useColorMode();
+
+  const bgColor = useMemo(() => {
+    if (colorMode === "light") {
+      return is_assistant ? "bg-slate-800" : "bg-sky-900";
+    } else {
+      return is_assistant ? "bg-black" : "bg-sky-900";
+    }
+  }, [colorMode, is_assistant]);
+
+  return <div className={`${bgColor} p-4 rounded-md text-white whitespace-pre-wrap`}>{text}</div>;
+};

website/src/components/Tasks/TaskTypes.tsx

@@ -1,9 +1,11 @@
 export enum TaskCategory {
-  Create,
-  Evaluate,
+  Create = "Create",
+  Evaluate = "Evaluate",
+  Label = "Label",
 }
 
 export const TaskTypes = [
+  // create
   {
     label: "Create Initial Prompts",
     desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
@@ -31,6 +33,7 @@ export const TaskTypes = [
     overview: "Given the following conversation, provide an adequate reply",
     instruction: "Provide the assistant`s reply",
   },
+  // evaluate
   {
     label: "Rank User Replies",
     category: TaskCategory.Evaluate,
@@ -52,4 +55,12 @@ export const TaskTypes = [
     pathname: "/evaluate/rank_initial_prompts",
     type: "rank_initial_prompts",
   },
+  // label
+  {
+    label: "Label Initial Prompt",
+    desc: "Provide labels for a prompt.",
+    category: TaskCategory.Label,
+    pathname: "/label/label_initial_prompt",
+    type: "label_initial_prompt",
+  },
 ];