Template Bubble

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { cn } from "@/lib/utils";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8// ─── Types ────────────────────────────────────────────────────────────────────
9 
10type HeaderType = "text" | "image" | "video" | "document" | "location";
11 
12interface LocationHeader {
13  name: string;
14  address: string;
15  imageUrl?: string;
16}
17 
18interface TemplateHeader {
19  type: HeaderType;
20  text?: string;
21  imageUrl?: string;
22  videoUrl?: string;
23  documentName?: string;
24  location?: LocationHeader;
25}
26 
27export type TemplateButton =
28  // CTA — opens URL in browser
29  | { type: "url";          label: string; url?: string }
30  // CTA — initiates phone call
31  | { type: "phone_number"; label: string; phone_number?: string }
32  // User reply with pre-set text
33  | { type: "quick_reply";  label: string }
34  // Copies a coupon/promo code to clipboard
35  | { type: "copy_code";    label?: string; code?: string }
36  // Opens a WhatsApp Flow
37  | { type: "flow";         label: string }
38  // Opens a WhatsApp Catalog
39  | { type: "catalog";      label?: string }
40  // One-tap autofill OTP (authentication templates)
41  | { type: "otp";          label?: string }
42  // Calling permission request (custom display type)
43  | { type: "call_permission"; bizName: string };
44 
45export interface TemplateBubbleProps
46  extends React.HTMLAttributes<HTMLDivElement> {
47  variant?: "incoming" | "outgoing";
48  header?: TemplateHeader;
49  body: string;
50  footer?: string;
51  buttons?: TemplateButton[];
52  timestamp?: string;
53  /** Override the default `<a>` element for URL/phone buttons (e.g. Next.js Link) */
54  renderAction?: (props: { href: string; children: React.ReactNode; className: string; target?: string; rel?: string }) => React.ReactElement;
55}
56 
57// ─── Variable highlighting ─────────────────────────────────────────────────
58 
59function BodyText({ text }: { text: string }) {
60  const parts = text.split(/(\{\{[^}]+\}\}|\{[^}]+\})/g);
61  return (
62    <>
63      {parts.map((part, i) =>
64        /^\{/.test(part) ? (
65          <span key={i} className="text-wa-emerald-600">
66            {part}
67          </span>
68        ) : (
69          <React.Fragment key={i}>{part}</React.Fragment>
70        )
71// … truncated