Ensure FlaggableElement always has the set of labels

website/src/components/Messages/MessageTable.tsx

@@ -1,11 +1,12 @@
 import { Stack, StackDivider } from "@chakra-ui/react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 
-export function MessageTable({ messages }) {
+export function MessageTable({ messages, valid_labels }) {
+  console.log(messages);
   return (
     <Stack divider={<StackDivider />} spacing="4">
       {messages.map((item, idx) => (
-        <MessageTableEntry item={item} idx={idx} key={item.id} />
+        <MessageTableEntry item={item} idx={idx} key={item.message_id} valid_labels={valid_labels} />
       ))}
     </Stack>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -2,6 +2,7 @@ import { Avatar, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
 import NextLink from "next/link";
 import { FlaggableElement } from "src/components/FlaggableElement";
+import type { ValidLabel } from "src/components/Messages";
 
 interface Message {
   text: string;
@@ -11,13 +12,14 @@ interface Message {
 interface MessageTableEntryProps {
   item: Message;
   idx: number;
+  valid_labels: ValidLabel[];
 }
 export function MessageTableEntry(props: MessageTableEntryProps) {
-  const { item, idx } = props;
+  const { item, idx, valid_labels } = props;
   const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900");
 
   return (
-    <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`}>
+    <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`} flaggable_labels={valid_labels}>
       <HStack>
         <Avatar
           name={`${boolean(item.is_assistant) ? "Assitant" : "User"}`}

website/src/components/Tasks/EvaluateTask.tsx

@@ -33,6 +33,7 @@ export const EvaluateTask = ({ tasks, trigger, onSkipTask, onNextTask, mainBgCla
     messages = messages.map((message, index) => ({ ...message, id: index }));
   }
 
+  const valid_labels = tasks[0].valid_labels;
   const sortables = tasks[0].task.replies ? "replies" : "prompts";
 
   return (
@@ -42,7 +43,7 @@ export const EvaluateTask = ({ tasks, trigger, onSkipTask, onNextTask, mainBgCla
         <p className="text-lg py-1">
           Given the following {sortables}, sort them from best to worst, best being first, worst being last.
         </p>
-        {messages ? <MessageTable messages={messages} /> : null}
+        {messages ? <MessageTable messages={messages} valid_labels={valid_labels} /> : null}
         <Sortable items={tasks[0].task[sortables]} onChange={setRanking} className="my-8" />
       </SurveyCard>