website: Add missing message features in label initial prompt

Now the backend passes a single message conversation for the label initial prompt task,
this allows us to just show the conversation the same way we do for the other labelling tasks.

The MessageView component was now no longer used and all messages shown are using MessageTableEntry.

website/src/components/Messages.tsx

@@ -1,23 +0,0 @@
-import { Box, forwardRef, useColorMode } from "@chakra-ui/react";
-import { useMemo } from "react";
-import { Message } from "src/types/Conversation";
-
-export const MessageView = forwardRef<Partial<Message>, "div">((message: Partial<Message>, ref) => {
-  const { colorMode } = useColorMode();
-
-  const bgColor = useMemo(() => {
-    if (colorMode === "light") {
-      return message.is_assistant ? "gray.800" : "blue.600";
-    } else {
-      return message.is_assistant ? "black" : "blue.600";
-    }
-  }, [colorMode, message.is_assistant]);
-
-  return (
-    <Box bg={bgColor} ref={ref} className={`p-4 rounded-md text-white whitespace-pre-wrap`}>
-      {message.text}
-    </Box>
-  );
-});
-
-MessageView.displayName = "MessageView";

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -1,13 +1,11 @@
 import { Box, useBoolean, useColorModeValue } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { useEffect, useState } from "react";
-import { MessageView } from "src/components/Messages";
 import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
-import { TaskType } from "src/types/Task";
 import { LabelTaskType } from "src/types/Tasks";
 
 const isRequired = (labelName: string, requiredLabels?: string[]) => {
@@ -56,15 +54,9 @@ export const LabelTask = ({
       <TwoColumnsWithCards>
         <>
           <TaskHeader taskType={taskType} />
-          {task.type !== TaskType.label_initial_prompt ? (
-            <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
-              <MessageTable messages={task.conversation.messages} highlightLastMessage />
-            </Box>
-          ) : (
-            <Box mt="4">
-              <MessageView text={task.prompt} is_assistant={false} id={task.message_id} emojis={{}} user_emojis={[]} />
-            </Box>
-          )}
+          <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
+            <MessageTable messages={task.conversation.messages} highlightLastMessage />
+          </Box>
         </>
         <LabelInputGroup
           labels={task.labels}

website/src/types/Tasks.ts

@@ -46,6 +46,7 @@ export interface Label {
 
 export interface BaseLabelTask extends BaseTask {
   message_id: string;
+  conversation: Conversation;
   labels: Label[];
   valid_labels: string[];
   disposition: "spam" | "quality";
@@ -55,14 +56,12 @@ export interface BaseLabelTask extends BaseTask {
 
 export interface LabelAssistantReplyTask extends BaseLabelTask {
   type: TaskType.label_assistant_reply;
-  conversation: Conversation;
   reply_message: Message;
   reply: string;
 }
 
 export interface LabelPrompterReplyTask extends BaseLabelTask {
   type: TaskType.label_prompter_reply;
-  conversation: Conversation;
   reply_message: Message;
   reply: string;
 }