109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
import * as React from "react";
|
|
import type { RawMessage } from "../values";
|
|
import Text from "@tensamin/markdown/text";
|
|
import { AlertTriangle } from "lucide-react";
|
|
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
cn,
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@tensamin/ui";
|
|
import Wrapper from "@tensamin/user/wrapper";
|
|
import { useChat } from "../context";
|
|
import MessageContextMenu from "./messageContextMenu";
|
|
|
|
function MessageComponent({
|
|
grouped,
|
|
message,
|
|
}: {
|
|
grouped: boolean;
|
|
message: RawMessage & {
|
|
failed?: boolean;
|
|
};
|
|
}) {
|
|
const { userId } = useChat();
|
|
const actuallyFailed = message.failed && message.message_state === "awaiting";
|
|
|
|
return (
|
|
<div
|
|
// pt-3 is to get a gap between messages
|
|
className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
|
|
>
|
|
<MessageContextMenu
|
|
content={message.content}
|
|
messageId={message.send_time}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"group hover:bg-muted/50 select-text! justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
|
|
{
|
|
"bg-(--destructive)/15 text-destructive-foreground":
|
|
actuallyFailed,
|
|
},
|
|
)}
|
|
>
|
|
<Wrapper
|
|
loading={"State not achievable"}
|
|
userId={message.sent_by_self ? "own" : userId}
|
|
component={(user) => (
|
|
<>
|
|
{grouped ? (
|
|
<p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
|
|
{new Date(message.send_time).toLocaleString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
) : (
|
|
<Avatar className="mr-1 mb-auto mt-1 w-10">
|
|
<AvatarImage src={user.avatar} />
|
|
<AvatarFallback>
|
|
{user.display.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
)}
|
|
{message.failed && message.message_state === "awaiting" && (
|
|
<Tooltip>
|
|
<TooltipContent>
|
|
<p>Failed to send message</p>
|
|
</TooltipContent>
|
|
<TooltipTrigger render={<AlertTriangle size={17} />} />
|
|
</Tooltip>
|
|
)}
|
|
<div className="flex flex-col">
|
|
{!grouped && (
|
|
<div className="flex items-center gap-1">
|
|
<p className="font-medium">{user.display}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{new Date(message.send_time).toLocaleString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
<Text value={message.content} />
|
|
</div>
|
|
</>
|
|
)}
|
|
/>
|
|
</div>
|
|
</MessageContextMenu>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default React.memo(MessageComponent, (prev, next) => {
|
|
return (
|
|
prev.message.send_time === next.message.send_time &&
|
|
prev.message.content === next.message.content &&
|
|
prev.message.height === next.message.height &&
|
|
prev.message.sent_by_self === next.message.sent_by_self &&
|
|
prev.message.message_state === next.message.message_state &&
|
|
prev.message.failed === next.message.failed
|
|
);
|
|
});
|