Interactive Reply Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { type MessageStatus, MessageStatusIcon } from "./message-status";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8export type InteractiveReplyType =
9  | "button_reply"
10  | "list_reply"
11  | "nfm_reply"
12  | "button"
13  | string;
14 
15export interface InteractiveReplyBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
16  variant?: "incoming" | "outgoing";
17  /** The reply title or text shown by the user */
18  title: string;
19  /** Subtype label — e.g. "button_reply", "list_reply", "nfm_reply" */
20  replyType?: InteractiveReplyType;
21  /** Optional description (for list replies) */
22  description?: string;
23  timestamp?: string;
24  status?: MessageStatus;
25  showTail?: boolean;
26}
27 
28const REPLY_TYPE_LABELS: Record<string, string> = {
29  button_reply: "Button reply",
30  list_reply: "List reply",
31  nfm_reply: "Flow reply",
32  button: "Button reply",
33};
34 
35function ReplyIcon() {
36  return (
37    <svg
38      width="16"
39      height="16"
40      viewBox="0 0 24 24"
41      fill="none"
42      stroke="white"
43      strokeWidth="2"
44      strokeLinecap="round"
45      strokeLinejoin="round"
46    >
47      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
48      <polyline points="14 2 14 8 20 8" />
49    </svg>
50  );
51}
52 
53const InteractiveReplyBubble = React.forwardRef<HTMLDivElement, InteractiveReplyBubbleProps>(
54  (
55    {
56      className,
57      variant = "incoming",
58      title,
59      replyType,
60      description,
61      timestamp,
62      status,
63      showTail = false,
64      ...props
65    },
66    ref
67  ) => {
68    const isOutgoing = variant === "outgoing";
69    const label = (replyType && REPLY_TYPE_LABELS[replyType]) || "Reply";
70 
71    return (
72      <div
73        className={cn(
74          "flex w-full",
75          isOutgoing ? "justify-end" : "justify-start",
76          showTail ? "mb-[6px]" : "mb-[2px]",
77          className
78        )}
79        {...props}
80        ref={ref}
81      >
82        <div
83          className={cn(
84            "font-wa relative max-w-[60%] overflow-visible rounded-lg px-3 pb-[7px] pt-[6px]",
85            isOutgoing ? "bg-wa-bubble-outgoing" : "bg-wa-bubble-incoming",
86            showTail && (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
87          )}
88        >
89          {showTail && isOutgoing && (
90            <svg viewBox="0 0 8 13" width="8" height="13" className="absolute bottom-0 -right-[8px]">
91// … truncated