iOS Message Bubbles

"use client";

import "./message-bubble.css";

import { cn } from "@/lib/cn";

export interface MessageBubbleProps {
	message: string;
	variant?: "sent" | "received";
	grouped?: "first" | "middle" | "last" | "none";
	className?: string;
	children?: React.ReactNode;
}

export function MessageBubble({
	message,
	variant = "received",
	grouped = "none",
	className,
	children,
}: MessageBubbleProps) {
	const groupedClasses =
		grouped === "first"
			? "imessage-grouped-first mb-1.5"
			: grouped === "last"
				? "imessage-grouped-last"
				: grouped === "middle"
					? "imessage-grouped-middle mb-1.5"
					: "";

	return (
		<div
			className={cn(
				"imessage-bubble",
				variant === "sent" ? "imessage-from-me" : "imessage-from-them",
				groupedClasses,
				className,
			)}
		>
			{children || <p className="whitespace-pre-wrap">{message}</p>}
		</div>
	);
}

export interface ChatMessageProps {
	timestamp?: string;
	messages: string[];
	variant?: "sent" | "received";
	className?: string;
	showTimestamp?: boolean;
}

export function ChatMessage({
	timestamp,
	messages,
	variant = "received",
	className,
	showTimestamp = true,
}: ChatMessageProps) {
	const hasMultipleMessages = messages.length > 1;

	const getGroupedType = (index: number, total: number) => {
		if (total === 1) return "none";
		if (index === 0) return "first";
		if (index === total - 1) return "last";
		return "middle";
	};

	return (
		<div className={cn("flex w-full flex-col", className)}>
			<div className="flex flex-col">
				{messages.map((message, index) => (
					<MessageBubble
						key={index}
						message={message}
						variant={variant}
						grouped={
							hasMultipleMessages
								? getGroupedType(index, messages.length)
								: "none"
						}
					/>
				))}
			</div>

			{showTimestamp && timestamp && (
				<span
					className={cn(
						"mt-1 px-2 text-xs text-muted-foreground",
						variant === "sent" && "text-right",
					)}
				>
					{timestamp}
				</span>
			)}
		</div>
	);
}