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",
},
};