import * as React from "react";

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

export type MessageBubbleAlignment = "left" | "right";
export type MessageBubbleStatus = "sent" | "delivered" | "read";

export interface MessageBubbleProps {
  message: string;
  timestamp?: string;
  alignment?: MessageBubbleAlignment;
  status?: MessageBubbleStatus;
  className?: string;
}

export function MessageBubble({
  message,
  timestamp,
  alignment = "left",
  status = "sent",
  className,
}: MessageBubbleProps) {
  const isRight = alignment === "right";
  const bubbleTone = isRight ? "bg-card" : "bg-muted";
  const statusTone = status === "read" ? "text-primary" : "text-muted-foreground";
  const statusLabel =
    status === "read" ? "Read" : status === "delivered" ? "Delivered" : "Sent";

  return (
    <div className={cn("flex w-full", isRight ? "justify-end" : "justify-start", className)}>
      <div className={cn("max-w-[75%]", isRight ? "text-right" : "text-left")}>
        <div
          className={cn(
            "rounded-2xl border border-border px-4 py-3 text-sm text-foreground",
            bubbleTone
          )}
        >
          <p className="whitespace-pre-wrap break-words">{message}</p>
        </div>
        <div
          className={cn(
            "mt-2 flex items-center gap-2 text-xs text-muted-foreground",
            isRight ? "justify-end" : "justify-start"
          )}
        >
          {timestamp ? <span>{timestamp}</span> : null}
          <span className={cn("flex items-center gap-1", statusTone)}>
            <ReceiptIcon status={status} className="h-3.5 w-3.5" />
            <span className="sr-only">{statusLabel}</span>
          </span>
        </div>
      </div>
    </div>
  );
}

function ReceiptIcon({
  status,
  className,
}: {
  status: MessageBubbleStatus;
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 20 16"
      aria-hidden="true"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {status === "sent" ? (
        <path d="M3 8l4 4 10-10" />
      ) : (
        <>
          <path d="M2 9l4 4 10-10" />
          <path d="M8 9l4 4 6-6" />
        </>
      )}
    </svg>
  );
}
Message Bubble

Dependencies

Files

Installation
