Chat Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { type MessageStatus, MessageStatusIcon } from "./message-status";
6import { type Reaction, ReactionsDisplay } from "./reaction";
7import "@/components/ui/whatsapp/styles/whatsapp.css";
8 
9export type { MessageStatus, Reaction };
10 
11interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
12  variant?: "incoming" | "outgoing";
13  timestamp?: string;
14  status?: MessageStatus;
15  sender?: string;
16  showTail?: boolean;
17  isGroupChat?: boolean;
18  senderColor?: string;
19  /** Emoji reactions shown on the bottom corner of the bubble */
20  reactions?: Reaction[];
21}
22 
23 
24 
25const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
26  (
27    {
28      className,
29      variant = "incoming",
30      timestamp,
31      status,
32      sender,
33      showTail = false,
34      isGroupChat = false,
35      senderColor,
36      reactions,
37      children,
38      ...props
39    },
40    ref
41  ) => {
42    const isOutgoing = variant === "outgoing";
43    const hasReactions = reactions && reactions.length > 0;
44 
45    return (
46      <div
47        className={cn(
48          "relative flex w-full",
49          isOutgoing ? "justify-end" : "justify-start",
50          showTail ? "mb-[6px]" : "mb-[2px]",
51          hasReactions && "mb-[24px]",
52          className
53        )}
54        {...props}
55        ref={ref}
56      >
57        <div
58          className={cn(
59            "font-wa relative min-w-[80px] max-w-[var(--wa-msg-max-width)] overflow-visible rounded-lg px-3 pb-[7px] pt-[6px]",
60            isOutgoing
61              ? "bg-wa-bubble-outgoing"
62              : "bg-wa-bubble-incoming",
63            showTail &&
64              (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
65          )}
66        >
67          {/* Tail: based on actual WhatsApp Web SVG paths, flipped for bottom positioning */}
68          {showTail && isOutgoing && (
69            <svg
70              viewBox="0 0 8 13"
71              width="8"
72              height="13"
73              className="absolute bottom-0 -right-[8px]"
74            >
75              <path
76                opacity="0.13"
77                d="M5.188 12H0V0.807l6.467 8.625C7.526 10.844 6.958 12 5.188 12z"
78                className="fill-wa-always-black"
79              />
80              <path
81                d="M5.188 13H0V1.807l6.467 8.625C7.526 11.844 6.958 13 5.188 13z"
82                className="fill-wa-bubble-outgoing"
83              />
84            </svg>
85          )}
86// … truncated