Spaces:
Sleeping
Sleeping
File size: 2,220 Bytes
05c5ed5 | 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 | import {
ChatExportCommentWithUser,
ChatExportWithUser,
} from "app-types/chat-export";
import { PreviewMessage } from "../message";
import { Avatar, AvatarFallback, AvatarImage } from "ui/avatar";
import { Tooltip, TooltipContent, TooltipTrigger } from "ui/tooltip";
import { formatDate } from "date-fns";
import Particles from "ui/particles";
import Comments from "./comments";
export default function ChatPreview({
thread,
comments,
}: { thread: ChatExportWithUser; comments: ChatExportCommentWithUser[] }) {
return (
<div
className="flex flex-col min-w-0 h-full relative"
data-testid="export-preview"
>
<div className="absolute top-0 left-0 w-full h-full -z-10">
<Particles particleCount={400} particleBaseSize={10} />
</div>
<div className="fixed top-0 right-0 p-4">
<Comments id={thread.id} defaultComments={comments} />
</div>
<div className="flex flex-col gap-2 overflow-y-auto pb-20">
<div className="w-full mx-auto max-w-3xl px-6 py-8">
<h1 className="text-3xl font-bold mb-2" data-testid="export-title">
{thread.title}
</h1>
<div className="text-xs text-muted-foreground flex items-center gap-2">
{formatDate(thread.exportedAt, "MMM d, yyyy")}
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-2 text-xs">
<Avatar className="size-4 rounded-full">
<AvatarImage src={thread.exporterImage} />
<AvatarFallback>
{thread.exporterName?.[0]?.toUpperCase()}
</AvatarFallback>
</Avatar>
</div>
</TooltipTrigger>
<TooltipContent>{thread.exporterName}</TooltipContent>
</Tooltip>
</div>
</div>
{thread.messages.map((message, index) => {
return (
<PreviewMessage
key={message.id}
message={message}
isLastMessage={index === thread.messages.length - 1}
readonly={true}
/>
);
})}
</div>
</div>
);
}
|