Spaces:
Running
Running
File size: 3,394 Bytes
16b7924 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import { ActionIcon, Group, Paper, Stack, Tooltip } from "@mantine/core";
import { IconPencil, IconRefresh } from "@tabler/icons-react";
import { memo } from "react";
import type { ChatMessage } from "../../modules/types";
import FormattedMarkdown from "./FormattedMarkdown";
interface MessageListProps {
messages: ChatMessage[];
onEditMessage: (absoluteIndex: number) => void;
onRegenerate: () => void;
isGenerating: boolean;
}
interface MessageProps {
message: ChatMessage;
index: number;
absoluteIndex: number;
isLastAssistant: boolean;
isGenerating: boolean;
onEditMessage: (absoluteIndex: number) => void;
onRegenerate: () => void;
}
const Message = memo(
({
message,
index,
absoluteIndex,
isLastAssistant,
isGenerating,
onEditMessage,
onRegenerate,
}: MessageProps) => {
const canEdit = message.role === "user";
const canRegenerate = isLastAssistant && message.role === "assistant";
const iconSize = 16;
const iconVariant: "subtle" = "subtle";
return (
<Group
gap="xs"
align="center"
w="100%"
justify={message.role === "user" ? "flex-end" : "flex-start"}
>
{canEdit && (
<Tooltip label="Edit" withArrow position="right" openDelay={300}>
<ActionIcon
aria-label="Edit message"
color="gray"
variant={iconVariant}
disabled={isGenerating}
onClick={() => onEditMessage(absoluteIndex)}
>
<IconPencil size={iconSize} />
</ActionIcon>
</Tooltip>
)}
<Paper
key={`${message.role}-${index}`}
shadow="xs"
radius="xl"
p="sm"
style={{ flex: 1, overflow: "auto" }}
>
<FormattedMarkdown>{message.content}</FormattedMarkdown>
</Paper>
{canRegenerate && (
<Tooltip
label="Re-generate response"
withArrow
position="left"
openDelay={300}
>
<ActionIcon
aria-label="Re-generate response"
color="gray"
variant={iconVariant}
disabled={isGenerating}
onClick={() => onRegenerate()}
>
<IconRefresh size={iconSize} />
</ActionIcon>
</Tooltip>
)}
</Group>
);
},
);
const MessageList = memo(function MessageList({
messages,
onEditMessage,
onRegenerate,
isGenerating,
}: MessageListProps) {
if (messages.length <= 2) return null;
return (
<Stack gap="md">
{messages
.slice(2)
.filter((message) => message.content.length > 0)
.map((message, index) => {
const absoluteIndex = index + 2;
const isLastAssistant =
absoluteIndex === messages.length - 1 &&
message.role === "assistant";
return (
<Message
key={`${message.role}-${index}`}
message={message}
index={index}
absoluteIndex={absoluteIndex}
isLastAssistant={isLastAssistant}
isGenerating={isGenerating}
onEditMessage={onEditMessage}
onRegenerate={onRegenerate}
/>
);
})}
</Stack>
);
});
export default MessageList;
|