iOS Message Bubbles

1"use client";
2 
3import "./message-bubble.css";
4 
5import { cn } from "@/lib/utils";
6 
7export interface MessageBubbleProps {
8	message: string;
9	variant?: "sent" | "received";
10	grouped?: "first" | "middle" | "last" | "none";
11	className?: string;
12	children?: React.ReactNode;
13}
14 
15export function MessageBubble({
16	message,
17	variant = "received",
18	grouped = "none",
19	className,
20	children,
21}: MessageBubbleProps) {
22	const groupedClasses =
23		grouped === "first"
24			? "imessage-grouped-first mb-1.5"
25			: grouped === "last"
26				? "imessage-grouped-last"
27				: grouped === "middle"
28					? "imessage-grouped-middle mb-1.5"
29					: "";
30 
31	return (
32		<div
33			className={cn(
34				"imessage-bubble",
35				variant === "sent" ? "imessage-from-me" : "imessage-from-them",
36				groupedClasses,
37				className,
38			)}
39		>
40			{children || <p className="whitespace-pre-wrap">{message}</p>}
41		</div>
42	);
43}
44 
45export interface ChatMessageProps {
46	timestamp?: string;
47	messages: string[];
48	variant?: "sent" | "received";
49	className?: string;
50	showTimestamp?: boolean;
51}
52 
53export function ChatMessage({
54	timestamp,
55	messages,
56	variant = "received",
57	className,
58	showTimestamp = true,
59}: ChatMessageProps) {
60	const hasMultipleMessages = messages.length > 1;
61 
62	const getGroupedType = (index: number, total: number) => {
63		if (total === 1) return "none";
64		if (index === 0) return "first";
65		if (index === total - 1) return "last";
66		return "middle";
67	};
68 
69	return (
70		<div className={cn("flex w-full flex-col", className)}>
71			<div className="flex flex-col">
72				{messages.map((message, index) => (
73					<MessageBubble
74						key={index}
75						message={message}
76						variant={variant}
77						grouped={
78							hasMultipleMessages
79								? getGroupedType(index, messages.length)
80								: "none"
81						}
82					/>
83				))}
84			</div>
85 
86			{showTimestamp && timestamp && (
87				<span
88					className={cn(
89						"mt-1 px-2 text-xs text-muted-foreground",
90						variant === "sent" && "text-right",
91					)}
92				>
93					{timestamp}
94				</span>
95			)}
96		</div>
97	);
98}