CTA URL 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 CtaUrlBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
10  variant?: "incoming" | "outgoing";
11  body?: string;
12  footer?: string;
13  /** Button display text */
14  displayText: string;
15  /** Target URL — renders as <a> when provided */
16  url?: string;
17  timestamp?: string;
18  status?: MessageStatus;
19  showTail?: boolean;
20  /** Override the default `<a>` element for the CTA button (e.g. Next.js Link) */
21  renderAction?: (props: { href: string; children: React.ReactNode; className: string; target?: string; rel?: string }) => React.ReactElement;
22}
23 
24const CtaUrlBubble = React.forwardRef<HTMLDivElement, CtaUrlBubbleProps>(
25  (
26    {
27      className,
28      variant = "incoming",
29      body,
30      footer,
31      displayText,
32      url,
33      timestamp,
34      status,
35      showTail = false,
36      renderAction,
37      ...props
38    },
39    ref
40  ) => {
41    const isOutgoing = variant === "outgoing";
42 
43    return (
44      <div
45        className={cn(
46          "flex w-full",
47          isOutgoing ? "justify-end" : "justify-start",
48          showTail ? "mb-[6px]" : "mb-[2px]",
49          className
50        )}
51        {...props}
52        ref={ref}
53      >
54        <div
55          className={cn(
56            "font-wa relative w-[320px] overflow-hidden rounded-lg",
57            isOutgoing ? "bg-wa-bubble-outgoing" : "bg-wa-bubble-incoming",
58            showTail && (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
59          )}
60        >
61          <div className="px-[9px] pb-[7px] pt-[6px]">
62            {body && <p className="text-[14.2px] leading-[19px] text-wa-text-primary">{body}</p>}
63            {footer && (
64              <p className="mt-[4px] text-[12.5px] leading-[17px] text-wa-text-secondary">{footer}</p>
65            )}
66            <div className="mt-[2px] flex items-center justify-end gap-[3px]">
67              {timestamp && <span className="text-[11px] leading-[15px] text-wa-bubble-meta">{timestamp}</span>}
68              {isOutgoing && status && <MessageStatusIcon status={status} />}
69            </div>
70          </div>
71 
72          <div className="border-t border-wa-border">
73            {renderAction && url ? (
74              renderAction({
75                href: url,
76// … truncated