Merge pull request #1048 from LAION-AI/missing-message-functions-initial-label-task

website: Add missing message features in label initial prompt

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;
 }