Interactive Button Bubble

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { cn } from "@/lib/utils";
6import { type MessageStatus, MessageStatusIcon } from "./message-status";
7import "@/components/ui/whatsapp/styles/whatsapp.css";
8 
9export interface InteractiveButton {
10  id?: string;
11  title: string;
12  disabled?: boolean;
13}
14 
15export interface InteractiveButtonBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
16  variant?: "incoming" | "outgoing";
17  /** Optional header — text string or media element */
18  header?: React.ReactNode;
19  body: string;
20  footer?: string;
21  /** Up to 3 reply buttons */
22  buttons: InteractiveButton[];
23  timestamp?: string;
24  status?: MessageStatus;
25  showTail?: boolean;
26  onButtonClick?: (button: InteractiveButton) => void;
27}
28 
29const InteractiveButtonBubble = React.forwardRef<HTMLDivElement, InteractiveButtonBubbleProps>(
30  (
31    {
32      className,
33      variant = "incoming",
34      header,
35      body,
36      footer,
37      buttons,
38      timestamp,
39      status,
40      showTail = false,
41      onButtonClick,
42      ...props
43    },
44    ref
45  ) => {
46    const isOutgoing = variant === "outgoing";
47    const capped = buttons.slice(0, 3);
48 
49    return (
50      <div
51        className={cn(
52          "flex w-full",
53          isOutgoing ? "justify-end" : "justify-start",
54          showTail ? "mb-[6px]" : "mb-[2px]",
55          className
56        )}
57        {...props}
58        ref={ref}
59      >
60        <div
61          className={cn(
62            "font-wa relative w-[320px] overflow-hidden rounded-lg",
63            isOutgoing ? "bg-wa-bubble-outgoing" : "bg-wa-bubble-incoming",
64            showTail && (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
65          )}
66        >
67          {showTail && isOutgoing && (
68            <svg viewBox="0 0 8 13" width="8" height="13" className="absolute bottom-0 -right-[8px]">
69              <path opacity="0.13" d="M5.188 12H0V0.807l6.467 8.625C7.526 10.844 6.958 12 5.188 12z" className="fill-wa-always-black" />
70              <path d="M5.188 13H0V1.807l6.467 8.625C7.526 11.844 6.958 13 5.188 13z" className="fill-wa-bubble-outgoing" />
71            </svg>
72          )}
73          {showTail && !isOutgoing && (
74            <svg viewBox="0 0 8 13" width="8" height="13" className="absolute bottom-0 -left-[8px]">
75              <path opacity="0.13" d="M2.812 12H8V0.807L1.533 9.432C0.474 10.844 1.042 12 2.812 12z" className="fill-wa-always-black" />
76// … truncated