Fix error in labeling tasks

website/src/components/Messages/MessageTableEntry.tsx

@@ -34,7 +34,7 @@ interface MessageTableEntryProps {
 
 export function MessageTableEntry({ message, enabled, highlight }: MessageTableEntryProps) {
   const router = useRouter();
-  const [emojis, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
+  const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
   useEffect(() => {
     setEmojis({ emojis: message.emojis, user_emojis: message.user_emojis });
   }, [message.emojis, message.user_emojis]);
@@ -93,17 +93,17 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
           style={{ float: "right", position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
           onClick={(e) => e.stopPropagation()}
         >
-          {Object.entries(emojis.emojis).map(([emoji, count]) => (
+          {Object.entries(emojiState.emojis).map(([emoji, count]) => (
             <MessageEmojiButton
               key={emoji}
               emoji={{ name: emoji, count }}
-              checked={emojis.user_emojis.includes(emoji)}
-              onClick={() => react(emoji, !emojis.user_emojis.includes(emoji))}
+              checked={emojiState.user_emojis.includes(emoji)}
+              onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
             />
           ))}
           <MessageActions
             react={react}
-            userEmoji={emojis.user_emojis}
+            userEmoji={emojiState.user_emojis}
             onLabel={showLabelPopup}
             onReport={showReportPopup}
             messageId={message.id}

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

@@ -1,11 +1,13 @@
 import { Box, Button, Flex, HStack, Text, useColorModeValue } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { LabelInputGroup } from "src/components/Survey/LabelInputGroup";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
+import { Message } from "src/types/Conversation";
 import { TaskType } from "src/types/Task";
 
 export const LabelTask = ({
@@ -15,6 +17,7 @@ export const LabelTask = ({
   onReplyChanged,
   onValidityChanged,
 }: TaskSurveyProps<{ text: string; labels: Record<string, number>; message_id: string }>) => {
+  const { i18n } = useTranslation();
   const [sliderValues, setSliderValues] = useState<number[]>(new Array(task.valid_labels.length).fill(null));
 
   useEffect(() => {
@@ -27,6 +30,23 @@ export const LabelTask = ({
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const isSpamTask = task.mode === "simple" && task.valid_labels.length === 1 && task.valid_labels[0] === "spam";
 
+  // TODO: remove as soon as the backend delivers
+  // real information about the current message
+  const additionMessage: Message = useMemo(
+    () => ({
+      text: task.reply,
+      is_assistant: task.type === TaskType.label_assistant_reply,
+      message_id: task.message_id,
+      created_date: new Date().toISOString(),
+      emojis: {},
+      user_emojis: [],
+      id: "dummy",
+      lang: i18n.language,
+      parent_id: "dummy",
+    }),
+    [task.reply, task.type, task.message_id, i18n.language]
+  );
+
   return (
     <div data-cy="task" data-task-type={isSpamTask ? "spam-task" : "label-task"}>
       <TwoColumnsWithCards>
@@ -34,17 +54,7 @@ export const LabelTask = ({
           <TaskHeader taskType={taskType} />
           {task.conversation ? (
             <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
-              <MessageTable
-                messages={[
-                  ...(task.conversation?.messages ?? []),
-                  {
-                    text: task.reply,
-                    is_assistant: task.type === TaskType.label_assistant_reply,
-                    message_id: task.message_id,
-                  },
-                ]}
-                highlightLastMessage
-              />
+              <MessageTable messages={[...(task.conversation?.messages ?? []), additionMessage]} highlightLastMessage />
             </Box>
           ) : (
             <Box mt="4">