Chat Message

1"use client";
2 
3import {
4	Check,
5	ChevronRight,
6	Copy,
7	SparklesIcon,
8	UserIcon,
9} from "lucide-react";
10import { type ComponentProps, type ReactNode, useState } from "react";
11import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
12import { Button } from "@/components/ui/button";
13import { Card } from "@/components/ui/card";
14import {
15	Tooltip,
16	TooltipContent,
17	TooltipProvider,
18	TooltipTrigger,
19} from "@/components/ui/tooltip";
20import { cn } from "@/lib/utils";
21import { MarkdownContent } from "@/registry/ui/markdown-content";
22 
23function ChatMessage({ className, ...props }: ComponentProps<"div">) {
24	return (
25		<TooltipProvider>
26			<div
27				className={cn(
28					"group/chat-message relative flex w-full gap-2.5 py-2 px-3 rounded-md hover:bg-muted/50",
29					className,
30				)}
31				{...props}
32			/>
33		</TooltipProvider>
34	);
35}
36 
37function ChatMessageContainer({ className, ...props }: ComponentProps<"div">) {
38	return (
39		<div
40			className={cn("flex w-full flex-col items-start gap-1", className)}
41			{...props}
42		/>
43	);
44}
45 
46function ChatMessageHeader({ className, ...props }: ComponentProps<"div">) {
47	return (
48		<div
49			className={cn("flex items-center gap-2 px-2 text-sm", className)}
50			{...props}
51		/>
52	);
53}
54 
55function ChatMessageAuthor({ className, ...props }: ComponentProps<"span">) {
56	return (
57		<span
58			className={cn("font-medium text-foreground", className)}
59			{...props}
60		/>
61	);
62}
63 
64interface ChatMessageTimestampProps extends ComponentProps<"span"> {
65	createdAt: number | Date | string;
66	format?: Intl.DateTimeFormatOptions;
67}
68 
69function ChatMessageTimestamp({
70	className,
71	createdAt,
72	format = { hour: "numeric", minute: "numeric" },
73	...props
74}: ChatMessageTimestampProps) {
75	const date = createdAt instanceof Date ? createdAt : new Date(createdAt);
76 
77	return (
78		<Tooltip>
79			<TooltipTrigger asChild>
80				<span
81					className={cn(
82						"text-xs text-muted-foreground cursor-default",
83						className,
84					)}
85					{...props}
86				>
87					{date.toLocaleTimeString("en-US", format)}
88				</span>
89			</TooltipTrigger>
90			<TooltipContent>
91				<p>{date.toLocaleString()}</p>
92			</TooltipContent>
93		</Tooltip>
94	);
95}
96 
97function ChatMessageContent({ className, ...props }: ComponentProps<"div">) {
98	return (
99		<div
100			className={cn("w-full flex flex-col gap-2 p-2", className)}
101			{...props}
102		/>
103	);
104}
105 
106interface ChatMessageMarkdownProps {
107	content: string;
108	className?: string;
109}
110 
111function ChatMessageMarkdown({ content, className }: ChatMessageMarkdownProps) {
112// … truncated