Merge pull request #897 from othrayte/highlight-target-message

website: Highlight target message

website/src/components/Messages/MessageTable.tsx

@@ -5,13 +5,19 @@ import { Message } from "src/types/Conversation";
 interface MessageTableProps {
   messages: Message[];
   enableLink?: boolean;
+  highlightLastMessage?: boolean;
 }
 
-export function MessageTable({ messages, enableLink }: MessageTableProps) {
+export function MessageTable({ messages, enableLink, highlightLastMessage }: MessageTableProps) {
   return (
     <Stack spacing="4">
-      {messages.map((item) => (
-        <MessageTableEntry enabled={enableLink} item={item} key={item.id + item.frontend_message_id} />
+      {messages.map((item, idx) => (
+        <MessageTableEntry
+          enabled={enableLink}
+          item={item}
+          key={item.id + item.frontend_message_id}
+          highlight={highlightLastMessage && idx === messages.length - 1}
+        />
       ))}
     </Stack>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -1,14 +1,15 @@
-import { Avatar, Box, HStack, LinkBox, useBreakpoint, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
+import { Avatar, Box, HStack, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useMemo } from "react";
 import { FlaggableElement } from "src/components/FlaggableElement";
 import { Message } from "src/types/Conversation";
+import { colors } from "styles/Theme/colors";
 
 interface MessageTableEntryProps {
   item: Message;
   enabled?: boolean;
+  highlight?: boolean;
 }
 
 export function MessageTableEntry(props: MessageTableEntryProps) {
@@ -37,6 +38,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
     ),
     [borderColor, inlineAvatar, item.is_assistant]
   );
+  const highlightColor = useColorModeValue(colors.light.highlight, colors.dark.highlight);
 
   return (
     <FlaggableElement message={item}>
@@ -48,6 +50,8 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
           p="4"
           borderRadius="md"
           bg={item.is_assistant ? backgroundColor : backgroundColor2}
+          outline={props.highlight && "2px solid black"}
+          outlineColor={highlightColor}
           onClick={props.enabled && goToMessage}
           _hover={props.enabled && { cursor: "pointer", opacity: 0.9 }}
           whiteSpace="pre-wrap"

website/src/components/Tasks/CreateTask.tsx

@@ -36,7 +36,7 @@ export const CreateTask = ({
           <TaskHeader taskType={taskType} />
           {task.conversation ? (
             <Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
-              <MessageTable messages={task.conversation.messages} />
+              <MessageTable messages={task.conversation.messages} highlightLastMessage />
             </Box>
           ) : null}
         </>

website/src/components/Tasks/EvaluateTask.tsx

@@ -38,7 +38,7 @@ export const EvaluateTask = ({
         <SurveyCard>
           <TaskHeader taskType={taskType} />
           <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
-            <MessageTable messages={messages} />
+            <MessageTable messages={messages} highlightLastMessage />
           </Box>
           <Sortable
             items={task[sortables]}

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

@@ -53,6 +53,7 @@ export const LabelTask = ({
                     message_id: task.message_id,
                   },
                 ]}
+                highlightLastMessage
               />
             </Box>
           ) : (

website/styles/Theme/colors.tsx

@@ -4,11 +4,13 @@ export const colors = {
     btn: "gray.50",
     div: "white",
     text: "black",
+    highlight: "blue.400",
   },
   dark: {
     bg: "gray.900",
     btn: "gray.600",
     div: "gray.700",
     text: "gray.200",
+    highlight: "blue.500",
   },
 };