4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T31d2,"use client"; import * as React from "react"; import { Button } from "@base-ui/react/button"; import { cn } from "@/lib/utils"; import "@/components/ui/whatsapp/styles/whatsapp.css"; // ─── Types ──────────────────────────────────────────────────────────────────── type HeaderType = "text" | "image" | "video" | "document" | "location"; interface LocationHeader { name: string; address: string; imageUrl?: string; } interface TemplateHeader { type: HeaderType; text?: string; imageUrl?: string; videoUrl?: string; documentName?: string; location?: LocationHeader; } export type TemplateButton = // CTA — opens URL in browser | { type: "url"; label: string; url?: string } // CTA — initiates phone call | { type: "phone_number"; label: string; phone_number?: string } // User reply with pre-set text | { type: "quick_reply"; label: string } // Copies a coupon/promo code to clipboard | { type: "copy_code"; label?: string; code?: string } // Opens a WhatsApp Flow | { type: "flow"; label: string } // Opens a WhatsApp Catalog | { type: "catalog"; label?: string } // One-tap autofill OTP (authentication templates) | { type: "otp"; label?: string } // Calling permission request (custom display type) | { type: "call_permission"; bizName: string }; export interface TemplateBubbleProps extends React.HTMLAttributes { variant?: "incoming" | "outgoing"; header?: TemplateHeader; body: string; footer?: string; buttons?: TemplateButton[]; timestamp?: string; /** Override the default `` element for URL/phone buttons (e.g. Next.js Link) */ renderAction?: (props: { href: string; children: React.ReactNode; className: string; target?: string; rel?: string }) => React.ReactElement; } // ─── Variable highlighting ───────────────────────────────────────────────── function BodyText({ text }: { text: string }) { const parts = text.split(/(\{\{[^}]+\}\}|\{[^}]+\})/g); return ( <> {parts.map((part, i) => /^\{/.test(part) ? ( {part} ) : ( {part} ) )} ); } // ─── Header variants ────────────────────────────────────────────────────────── function ImageHeader({ imageUrl }: { imageUrl?: string }) { return (

Template Bubble

Installation

Files

components

public

Styles