Merge pull request #656 from Klotske/message-id-fix

#614 - Consistent message ID & FlaggableElement fix

website/src/components/FlaggableElement.tsx

@@ -25,6 +25,7 @@ import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useEffect, useState } from "react";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
+import { Message } from "src/types/Conversation";
 import { colors } from "styles/Theme/colors";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
@@ -35,7 +36,12 @@ interface textFlagLabels {
   additionalExplanation?: string;
 }
 
-export const FlaggableElement = (props) => {
+interface FlaggableElementProps {
+  children: React.ReactNode;
+  message: Message;
+}
+
+export const FlaggableElement = (props: FlaggableElementProps) => {
   const [labels, setLabels] = useState([]);
   const [checkboxValues, setCheckboxValues] = useState([]);
   const [sliderValues, setSliderValues] = useState([]);
@@ -72,10 +78,9 @@ export const FlaggableElement = (props) => {
       }
     });
     trigger({
-      message_id: props.message_id,
-      post_id: props.post_id,
+      message_id: props.message.id,
       label_map: Object.fromEntries(label_map),
-      text: props.text,
+      text: props.message.text,
     });
   };
 
@@ -151,14 +156,16 @@ export const FlaggableElement = (props) => {
   );
 };
 
-export function FlagCheckbox(props: {
+interface FlagCheckboxProps {
   option: textFlagLabels;
   idx: number;
   checkboxValues: boolean[];
   sliderValues: number[];
   checkboxHandler: (newVal: boolean, idx: number) => void;
   sliderHandler: (newVal: number, idx: number) => void;
-}): JSX.Element {
+}
+
+export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element {
   let AdditionalExplanation = null;
   if (props.option.additionalExplanation) {
     AdditionalExplanation = (

website/src/components/Messages.tsx

@@ -4,11 +4,14 @@ import { Message } from "src/types/Conversation";
 
 import { FlaggableElement } from "./FlaggableElement";
 
-export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
+interface MessagesProps {
+  messages: Message[];
+}
+
+export const Messages = ({ messages }: MessagesProps) => {
   const items = messages.map((messageProps: Message, i: number) => {
-    const { message_id, text } = messageProps;
     return (
-      <FlaggableElement text={text} post_id={post_id} message_id={message_id} key={i + text}>
+      <FlaggableElement message={messageProps} key={i + messageProps.id}>
         <MessageView {...messageProps} />
       </FlaggableElement>
     );
@@ -17,20 +20,20 @@ export const Messages = ({ messages, post_id }: { messages: Message[]; post_id:
   return <Grid gap={2}>{items}</Grid>;
 };
 
-export const MessageView = forwardRef<Message, "div">(({ is_assistant, text }: Message, ref) => {
+export const MessageView = forwardRef<Message, "div">((message: Message, ref) => {
   const { colorMode } = useColorMode();
 
   const bgColor = useMemo(() => {
     if (colorMode === "light") {
-      return is_assistant ? "gray.800" : "blue.600";
+      return message.is_assistant ? "gray.800" : "blue.600";
     } else {
-      return is_assistant ? "black" : "blue.600";
+      return message.is_assistant ? "black" : "blue.600";
     }
-  }, [colorMode, is_assistant]);
+  }, [colorMode, message.is_assistant]);
 
   return (
     <Box bg={bgColor} ref={ref} className={`p-4 rounded-md text-white whitespace-pre-wrap`}>
-      {text}
+      {message.text}
     </Box>
   );
 });

website/src/components/Messages/MessageTable.tsx

@@ -1,11 +1,16 @@
 import { Stack, StackDivider } from "@chakra-ui/react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
+import { Message } from "src/types/Conversation";
 
-export function MessageTable({ messages }) {
+interface MessageTableProps {
+  messages: Message[];
+}
+
+export function MessageTable({ messages }: MessageTableProps) {
   return (
     <Stack divider={<StackDivider />} spacing="4">
       {messages.map((item) => (
-        <MessageTableEntry item={item} key={item.message_id || item.id} />
+        <MessageTableEntry item={item} key={item.id || item.frontend_message_id} />
       ))}
     </Stack>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -1,24 +1,20 @@
-import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra-ui/react";
+import { Avatar, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
 import Link from "next/link";
 import { FlaggableElement } from "src/components/FlaggableElement";
+import { Message } from "src/types/Conversation";
 
-interface Message {
-  text: string;
-  id: string;
-  message_id: string;
-  is_assistant: boolean;
-}
 interface MessageTableEntryProps {
   item: Message;
 }
+
 export function MessageTableEntry(props: MessageTableEntryProps) {
   const { item } = props;
   const backgroundColor = useColorModeValue("gray.50", "gray.800");
 
   return (
     <div>
-      <FlaggableElement text={item.text} message_id={item.message_id} post_id={item.id} key={`flag_${item.id}`}>
+      <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>
         <HStack>
           <Avatar
             size="sm"
@@ -28,7 +24,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
 
           <Link href={`/messages/${item.id}`}>
             <LinkBox bg={backgroundColor} className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
-              <LinkOverlay>{item.text}</LinkOverlay>
+              {item.text}
             </LinkBox>
           </Link>
         </HStack>

website/src/components/Tasks/CreateTask.tsx

@@ -1,11 +1,12 @@
 import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import { useState } from "react";
-import { Messages } from "src/components/Messages";
 import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
+import { MessageTable } from "../Messages/MessageTable";
 
 export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ text: string }>) => {
+  const cardColor = useColorModeValue("gray.100", "gray.700");
   const titleColor = useColorModeValue("gray.800", "gray.300");
   const labelColor = useColorModeValue("gray.600", "gray.400");
 
@@ -30,8 +31,8 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{
             </Text>
           </Stack>
           {task.conversation ? (
-            <Box mt="4">
-              <Messages messages={task.conversation.messages} post_id={task.id} />
+            <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+              <MessageTable messages={task.conversation.messages} />
             </Box>
           ) : null}
         </>

website/src/components/Tasks/LabelTask.tsx

@@ -60,7 +60,7 @@ export const LabelTask = ({
             </Box>
           ) : (
             <Box mt="4">
-              <MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
+              <MessageView text={task.prompt} is_assistant={false} id={task.message_id} />
             </Box>
           )}
         </>

website/src/pages/api/set_label.ts

@@ -5,8 +5,8 @@ import { withoutRole } from "src/lib/auth";
  *
  */
 const handler = withoutRole("banned", async (req, res, token) => {
-  // Parse out the local message_id, task ID and the interaction contents.
-  const { message_id, post_id, label_map, text } = await JSON.parse(req.body);
+  // Parse out the local message_id, and the interaction contents.
+  const { message_id, label_map, text } = await JSON.parse(req.body);
 
   const interactionRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/text_labels`, {
     method: "POST",
@@ -16,7 +16,7 @@ const handler = withoutRole("banned", async (req, res, token) => {
     },
     body: JSON.stringify({
       type: "text_labels",
-      message_id: message_id || post_id,
+      message_id: message_id,
       labels: label_map,
       text: text,
       user: {

website/src/types/Conversation.ts

@@ -1,7 +1,8 @@
 export interface Message {
   text: string;
   is_assistant: boolean;
-  message_id: string;
+  id: string;
+  frontend_message_id?: string;
 }
 
 export interface Conversation {