diff --git a/website/src/components/Messages/MessageTable.tsx b/website/src/components/Messages/MessageTable.tsx index ed98752c..acf92e05 100644 --- a/website/src/components/Messages/MessageTable.tsx +++ b/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 ( - {messages.map((item) => ( - + {messages.map((item, idx) => ( + ))} ); diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index 1205991e..77202c44 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/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 ( @@ -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" diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx index 6cbead52..d52c6bb8 100644 --- a/website/src/components/Tasks/CreateTask.tsx +++ b/website/src/components/Tasks/CreateTask.tsx @@ -36,7 +36,7 @@ export const CreateTask = ({ {task.conversation ? ( - + ) : null} diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx index 6ec92a96..497c57e3 100644 --- a/website/src/components/Tasks/EvaluateTask.tsx +++ b/website/src/components/Tasks/EvaluateTask.tsx @@ -38,7 +38,7 @@ export const EvaluateTask = ({ - + ) : ( diff --git a/website/styles/Theme/colors.tsx b/website/styles/Theme/colors.tsx index acadfa2b..7f82ebce 100644 --- a/website/styles/Theme/colors.tsx +++ b/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", }, };