List Message Bubble

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { Drawer } from "@base-ui/react/drawer";
6import { cn } from "@/lib/utils";
7import { type MessageStatus, MessageStatusIcon } from "./message-status";
8import "@/components/ui/whatsapp/styles/whatsapp.css";
9 
10export interface ListRow {
11  id?: string;
12  title: string;
13  description?: string;
14}
15 
16export interface ListSection {
17  title?: string;
18  rows: ListRow[];
19}
20 
21export interface ListMessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
22  variant?: "incoming" | "outgoing";
23  body: string;
24  footer?: string;
25  /** CTA button label */
26  buttonLabel: string;
27  sections: ListSection[];
28  timestamp?: string;
29  status?: MessageStatus;
30  showTail?: boolean;
31  onRowSelect?: (row: ListRow) => void;
32}
33 
34const ListMessageBubble = React.forwardRef<HTMLDivElement, ListMessageBubbleProps>(
35  (
36    {
37      className,
38      variant = "incoming",
39      body,
40      footer,
41      buttonLabel,
42      sections,
43      timestamp,
44      status,
45      showTail = false,
46      onRowSelect,
47      ...props
48    },
49    ref
50  ) => {
51    const isOutgoing = variant === "outgoing";
52    const [open, setOpen] = React.useState(false);
53 
54    return (
55      <div
56        className={cn(
57          "flex w-full",
58          isOutgoing ? "justify-end" : "justify-start",
59          showTail ? "mb-[6px]" : "mb-[2px]",
60          className
61        )}
62        {...props}
63        ref={ref}
64      >
65        <div
66          className={cn(
67            "font-wa relative w-[320px] overflow-hidden rounded-lg",
68            isOutgoing ? "bg-wa-bubble-outgoing" : "bg-wa-bubble-incoming",
69            showTail && (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
70          )}
71        >
72          <div className="px-[9px] pb-[7px] pt-[6px]">
73            <p className="text-[14.2px] leading-[19px] text-wa-text-primary">{body}</p>
74            {footer && (
75              <p className="mt-[4px] text-[12.5px] leading-[17px] text-wa-text-secondary">{footer}</p>
76            )}
77            <div className="mt-[2px] flex items-center justify-end gap-[3px]">
78              {timestamp && <span className="text-[11px] leading-[15px] text-wa-bubble-meta">{timestamp}</span>}
79              {isOutgoing && status && <MessageStatusIcon status={status} />}
80            </div>
81          </div>
82 
83          <div className="border-t border-wa-border">
84            <Button
85              onClick={() => setOpen(true)}
86// … truncated