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:T1899,"use client"; import * as React from "react"; import { Button } from "@base-ui/react/button"; import { cn } from "@/lib/utils"; import { type MessageStatus, MessageStatusIcon } from "./message-status"; import "@/components/ui/whatsapp/styles/whatsapp.css"; export interface ContactItem { /** Formatted display name */ name: string; phones?: string[]; avatar?: string; company?: string; } export interface ContactBubbleProps extends React.HTMLAttributes { variant?: "incoming" | "outgoing"; contacts: ContactItem[]; timestamp?: string; status?: MessageStatus; showTail?: boolean; onMessageContact?: (contact: ContactItem) => void; onAddContact?: (contact: ContactItem) => void; } const AVATAR_COLORS = [ "#dba685","#53a6fd","#25d366","#fc9775", "#ff72a1","#a791ff","#fb5061","#53bdeb", "#42c7b8","#ffd279", ]; function getAvatarColor(name: string) { let hash = 0; for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash); return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length]; } function getInitials(name: string) { return name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase(); } function ContactRow({ contact }: { contact: ContactItem }) { return (

{contact.avatar ?

: getInitials(contact.name) }

{contact.name}

{contact.company && (

{contact.company}

)} {contact.phones?.[0] && (

{contact.phones[0]}

)}

); } const ContactBubble = React.forwardRef( ( { className, variant = "incoming", contacts, timestamp, status, showTail = false, onMessageContact, onAddContact, ...props }, ref ) => { const isOutgoing = variant === "outgoing"; const primary = contacts[0]; const extra = contacts.length - 1; return (

{showTail && isOutgoing && ( )} {showTail && !isOutgoing && ( )} {/* Primary contact */} {/* +N more */} {extra > 0 && (

+{extra} more contact{extra > 1 ? "s" : ""}

)} {/* Timestamp */}

{timestamp && {timestamp}} {isOutgoing && status && }

{/* Actions */} {(onMessageContact || onAddContact) && (

{onMessageContact && ( )} {onAddContact && ( )}

)}

); } ); ContactBubble.displayName = "ContactBubble"; export { ContactBubble }; 52:T8bf,"use client"; import * as React from "react"; import "@/components/ui/whatsapp/styles/whatsapp.css"; export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed"; function CheckIcon({ className }: { className?: string }) { return ( ); } function DoubleCheckIcon({ className }: { className?: string }) { return ( ); } /** Renders the appropriate status icon for a given MessageStatus. */ export function MessageStatusIcon({ status }: { status: MessageStatus }) { switch (status) { case "sending": case "sent": return ; case "delivered": return ; case "read": return ; case "failed": return ( ); } } 53:T3681,/* * WhatsApp UI Design Tokens * Extracted from web.whatsapp.com WDS (WhatsApp Design System) */ @theme inline { /* === Primary Brand Colors === */ --color-wa-green-50: var(--wa-green-50); --color-wa-green-75: var(--wa-green-75); --color-wa-green-100: var(--wa-green-100); --color-wa-green-200: var(--wa-green-200); --color-wa-green-300: var(--wa-green-300); --color-wa-green-400: var(--wa-green-400); --color-wa-green-450: var(--wa-green-450); --color-wa-green-500: var(--wa-green-500); --color-wa-green-600: var(--wa-green-600); --color-wa-green-700: var(--wa-green-700); --color-wa-green-750: var(--wa-green-750); --color-wa-green-800: var(--wa-green-800); /* === Emerald (Teal) === */ --color-wa-emerald-400: var(--wa-emerald-400); --color-wa-emerald-500: var(--wa-emerald-500); --color-wa-emerald-600: var(--wa-emerald-600); /* === Neutral Gray === */ --color-wa-gray-50: var(--wa-gray-50); --color-wa-gray-75: var(--wa-gray-75); --color-wa-gray-100: var(--wa-gray-100); --color-wa-gray-200: var(--wa-gray-200); --color-wa-gray-300: var(--wa-gray-300); --color-wa-gray-400: var(--wa-gray-400); --color-wa-gray-500: var(--wa-gray-500); --color-wa-gray-600: var(--wa-gray-600); --color-wa-gray-700: var(--wa-gray-700); --color-wa-gray-800: var(--wa-gray-800); --color-wa-gray-850: var(--wa-gray-850); --color-wa-gray-900: var(--wa-gray-900); --color-wa-gray-1000: var(--wa-gray-1000); /* === Sky Blue (Read Receipts) === */ --color-wa-sky-blue-300: var(--wa-sky-blue-300); --color-wa-sky-blue-400: var(--wa-sky-blue-400); /* === Red (Destructive/Negative) === */ --color-wa-red-300: var(--wa-red-300); --color-wa-red-400: var(--wa-red-400); /* === Cobalt === */ --color-wa-cobalt-300: var(--wa-cobalt-300); --color-wa-cobalt-400: var(--wa-cobalt-400); /* === Persistent/Brand === */ --color-wa-verified: var(--wa-verified); --color-wa-always-white: var(--wa-always-white); --color-wa-always-black: var(--wa-always-black); /* === Profile Photo Avatars === */ --color-wa-avatar-brown: var(--wa-avatar-brown); --color-wa-avatar-cobalt: var(--wa-avatar-cobalt); --color-wa-avatar-green: var(--wa-avatar-green); --color-wa-avatar-orange: var(--wa-avatar-orange); --color-wa-avatar-pink: var(--wa-avatar-pink); --color-wa-avatar-purple: var(--wa-avatar-purple); --color-wa-avatar-red: var(--wa-avatar-red); --color-wa-avatar-sky-blue: var(--wa-avatar-sky-blue); --color-wa-avatar-teal: var(--wa-avatar-teal); --color-wa-avatar-yellow: var(--wa-avatar-yellow); /* === Semantic Colors (theme-aware) === */ --color-wa-bg: var(--wa-bg); --color-wa-bg-deeper: var(--wa-bg-deeper); --color-wa-bg-wash: var(--wa-bg-wash); --color-wa-panel-bg: var(--wa-panel-bg); --color-wa-panel-header-bg: var(--wa-panel-header-bg); --color-wa-conversation-bg: var(--wa-conversation-bg); --color-wa-compose-bg: var(--wa-compose-bg); --color-wa-text-primary: var(--wa-text-primary); --color-wa-text-secondary: var(--wa-text-secondary); --color-wa-text-deemphasized: var(--wa-text-deemphasized); --color-wa-bubble-outgoing: var(--wa-bubble-outgoing); --color-wa-bubble-incoming: var(--wa-bubble-incoming); --color-wa-bubble-system: var(--wa-bubble-system); --color-wa-bubble-meta: var(--wa-bubble-meta); --color-wa-border: var(--wa-border); --color-wa-divider: var(--wa-divider); --color-wa-primary: var(--wa-primary); --color-wa-primary-hover: var(--wa-primary-hover); --color-wa-icon-default: var(--wa-icon-default); --color-wa-icon-lighter: var(--wa-icon-lighter); --color-wa-hover: var(--wa-hover); --color-wa-active: var(--wa-active); --color-wa-read: var(--wa-read); --color-wa-delivered: var(--wa-delivered); --color-wa-unread-marker: var(--wa-unread-marker); --color-wa-typing-dot: var(--wa-typing-dot); --color-wa-input-bg: var(--wa-input-bg); --color-wa-input-border: var(--wa-input-border); --color-wa-wallpaper-bg: var(--wa-wallpaper-bg); --color-wa-wallpaper-fg: var(--wa-wallpaper-fg); /* === Additional Color Scales === */ --color-wa-teal-300: var(--wa-teal-300); --color-wa-teal-400: var(--wa-teal-400); --color-wa-teal-500: var(--wa-teal-500); --color-wa-purple-300: var(--wa-purple-300); --color-wa-purple-400: var(--wa-purple-400); --color-wa-orange-300: var(--wa-orange-300); --color-wa-orange-400: var(--wa-orange-400); --color-wa-yellow-300: var(--wa-yellow-300); --color-wa-yellow-400: var(--wa-yellow-400); --color-wa-pink-300: var(--wa-pink-300); --color-wa-pink-400: var(--wa-pink-400); /* === Attachment Type Colors === */ --color-wa-attachment-document: var(--wa-attachment-document); --color-wa-attachment-audio: var(--wa-attachment-audio); --color-wa-attachment-photo: var(--wa-attachment-photo); --color-wa-attachment-contact: var(--wa-attachment-contact); --color-wa-attachment-camera: var(--wa-attachment-camera); --color-wa-attachment-sticker: var(--wa-attachment-sticker); --color-wa-attachment-poll: var(--wa-attachment-poll); --color-wa-attachment-catalog: var(--wa-attachment-catalog); /* === Semantic Text === */ --color-wa-text-disabled: var(--wa-text-disabled); --color-wa-text-critical: var(--wa-text-critical); --color-wa-text-success: var(--wa-text-success); --color-wa-text-action: var(--wa-text-action); --color-wa-system-msg: var(--wa-system-msg); --color-wa-primary-title: var(--wa-primary-title); /* === Typography === */ --font-wa: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; /* === Layout Constants === */ --spacing-wa-sidebar-width: var(--wa-sidebar-width); --spacing-wa-sidebar-min-width: var(--wa-sidebar-min-width); --spacing-wa-header-height: var(--wa-header-height); --spacing-wa-compose-height: var(--wa-compose-height); --spacing-wa-chat-spacing: var(--wa-chat-spacing); --spacing-wa-avatar-sm: var(--wa-avatar-size-sm); --spacing-wa-avatar-md: var(--wa-avatar-size-md); --spacing-wa-avatar-lg: var(--wa-avatar-size-lg); /* === Border Radius === */ --radius-wa-bubble: var(--wa-bubble-radius); /* === Animation === */ --animate-wa-typing-bounce: wa-typing-bounce 1.2s ease-in-out infinite; } @keyframes wa-typing-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } } :root { /* === Primary Brand Colors === */ --wa-green-50: #f2fdf0; --wa-green-75: #e7fce3; --wa-green-100: #d9fdd3; --wa-green-200: #acfcac; --wa-green-300: #71eb85; --wa-green-400: #25d366; --wa-green-450: #21c063; --wa-green-500: #1daa61; --wa-green-600: #1b8755; --wa-green-700: #15603e; --wa-green-750: #144d37; --wa-green-800: #103529; /* === Emerald (Teal) === */ --wa-emerald-400: #06cf9c; --wa-emerald-500: #00a884; --wa-emerald-600: #008069; /* === Neutral Gray === */ --wa-gray-50: #fafafa; --wa-gray-75: #f4f4f4; --wa-gray-100: #eeeeee; --wa-gray-200: #d8d8d8; --wa-gray-300: #bdbdbd; --wa-gray-400: #959393; --wa-gray-500: #757778; --wa-gray-600: #606263; --wa-gray-700: #424445; --wa-gray-800: #242626; --wa-gray-850: #1d1f1f; --wa-gray-900: #161717; --wa-gray-1000: #0a0a0a; /* === Sky Blue (Read Receipts) === */ --wa-sky-blue-300: #53bdeb; --wa-sky-blue-400: #009de2; /* === Red (Destructive/Negative) === */ --wa-red-300: #fb5061; --wa-red-400: #f53947; /* === Cobalt === */ --wa-cobalt-300: #53a6fd; --wa-cobalt-400: #007bfc; /* === Persistent/Brand === */ --wa-verified: #0085f4; --wa-always-white: #ffffff; --wa-always-black: #000000; /* === Profile Photo Avatars === */ --wa-avatar-brown: #dba685; --wa-avatar-cobalt: #53a6fd; --wa-avatar-green: #25d366; --wa-avatar-orange: #fc9775; --wa-avatar-pink: #ff72a1; --wa-avatar-purple: #a791ff; --wa-avatar-red: #fb5061; --wa-avatar-sky-blue: #53bdeb; --wa-avatar-teal: #42c7b8; --wa-avatar-yellow: #ffd279; } /* === Light Mode (WhatsApp Default) === */ :root, [data-theme="light"] { /* Surfaces */ --wa-bg: #ffffff; --wa-bg-deeper: #f0f2f5; --wa-bg-wash: #f7f8fa; --wa-panel-bg: #ffffff; --wa-panel-header-bg: #ffffff; --wa-conversation-bg: #f5f0e8; --wa-compose-bg: #f0f2f5; /* Content */ --wa-text-primary: #111b21; --wa-text-secondary: #667781; --wa-text-deemphasized: rgba(17, 27, 33, 0.4); /* Chat Bubbles */ --wa-bubble-outgoing: #e7ffdb; --wa-bubble-incoming: #ffffff; --wa-bubble-system: #ffecd2; --wa-bubble-radius: 7.5px; --wa-bubble-meta: rgba(17, 27, 33, 0.45); /* Lines */ --wa-border: #e9edef; --wa-divider: rgba(134, 150, 160, 0.15); /* Interactive */ --wa-primary: #008069; --wa-primary-hover: #017561; --wa-icon-default: #54656f; --wa-icon-lighter: #8696a0; --wa-hover: rgba(17, 27, 33, 0.05); --wa-active: rgba(17, 27, 33, 0.1); /* Read Receipts */ --wa-read: #53bdeb; --wa-delivered: #8696a0; /* Misc */ --wa-unread-marker: #25d366; --wa-typing-dot: #8696a0; --wa-input-bg: #ffffff; --wa-input-border: #e4e6eb; /* Chat Wallpaper */ --wa-wallpaper-bg: #f5f0e8; --wa-wallpaper-fg: rgba(17, 27, 33, 0.05); --wa-wallpaper-image: url("/wa-wallpaper.png"); --wa-wallpaper-tint: rgba(229, 221, 213, 0.85); /* Template header placeholder */ --wa-placeholder-bg: #ccd0d5; --wa-placeholder-icon: brightness(0) saturate(100%) invert(42%) sepia(9%) saturate(621%) hue-rotate(155deg) brightness(94%) contrast(87%); /* Template button icon — converts PNG to wa-emerald-500 (#00a884) */ --wa-btn-icon-filter: brightness(0) saturate(100%) invert(50%) sepia(97%) saturate(372%) hue-rotate(128deg) brightness(97%); /* === Additional Color Scales === */ --wa-teal-300: #42c7b8; --wa-teal-400: #02a698; --wa-teal-500: #028377; --wa-purple-300: #a791ff; --wa-purple-400: #7f66ff; --wa-orange-300: #fc9775; --wa-orange-400: #fa6533; --wa-yellow-300: #ffd279; --wa-yellow-400: #ffb938; --wa-pink-300: #ff72a1; --wa-pink-400: #ff2e74; /* === Attachment Type Colors === */ --wa-attachment-document: #7f66ff; --wa-attachment-audio: #fa6533; --wa-attachment-photo: #007bfc; --wa-attachment-contact: #009de2; --wa-attachment-camera: #ff2e74; --wa-attachment-sticker: #02a698; --wa-attachment-poll: #ffbc38; --wa-attachment-catalog: #3a5564; /* === Semantic Text === */ --wa-text-disabled: #d1d7db; --wa-text-critical: #ea0038; --wa-text-success: #1fa855; --wa-text-action: #008069; --wa-system-msg: #54656f; --wa-primary-title: #41525d; /* === Shadows === */ --wa-shadow-light: rgba(11, 20, 26, .08); --wa-shadow-medium: rgba(11, 20, 26, .15); --wa-border-bubble: rgba(17, 27, 33, .06); /* === Button States === */ --wa-button-primary-hover: #017561; --wa-filter-text: #54656f; --wa-filter-active: #008069; --wa-filter-bg-active: #d9fdd3; /* === Spacing === */ --wa-text-size-small: 12.6px; --wa-bubble-padding-start: 9px; --wa-bubble-padding-end: 7px; } /* === Dark Mode === */ [data-theme="dark"], .dark { /* Surfaces */ --wa-bg: #111b21; --wa-bg-deeper: #0b141a; --wa-bg-wash: #161717; --wa-panel-bg: #111b21; --wa-panel-header-bg: #202c33; --wa-conversation-bg: #0b141a; --wa-compose-bg: #202c33; /* Content */ --wa-text-primary: #e9edef; --wa-text-secondary: #8696a0; --wa-text-deemphasized: rgba(233, 237, 239, 0.4); /* Chat Bubbles */ --wa-bubble-outgoing: #005c4b; --wa-bubble-incoming: #202c33; --wa-bubble-system: #182229; --wa-bubble-meta: rgba(255, 255, 255, 0.6); /* Lines */ --wa-border: rgba(233, 237, 239, 0.12); --wa-divider: rgba(134, 150, 160, 0.15); /* Interactive */ --wa-primary: #00a884; --wa-primary-hover: #06cf9c; --wa-icon-default: #aebac1; --wa-icon-lighter: #8696a0; --wa-hover: rgba(233, 237, 239, 0.05); --wa-active: rgba(233, 237, 239, 0.1); /* Read Receipts */ --wa-read: #53bdeb; --wa-delivered: #aebac1; /* Misc */ --wa-unread-marker: #00a884; --wa-typing-dot: #8696a0; --wa-input-bg: #2a3942; --wa-input-border: rgba(233, 237, 239, 0.12); /* Chat Wallpaper */ --wa-wallpaper-bg: #0b141a; --wa-wallpaper-fg: rgba(255, 255, 255, 0.06); --wa-wallpaper-image: url("/wa-wallpaper.png"); --wa-wallpaper-tint: rgba(11, 20, 26, 0.88); /* Template header placeholder */ --wa-placeholder-bg: #2a3942; --wa-placeholder-icon: brightness(0) saturate(100%) invert(62%) sepia(10%) saturate(400%) hue-rotate(155deg) brightness(95%) contrast(85%); /* Template button icon — converts PNG to wa-emerald-400 (#06cf9c) */ --wa-btn-icon-filter: brightness(0) saturate(100%) invert(68%) sepia(60%) saturate(400%) hue-rotate(118deg) brightness(100%); /* === Semantic Text (dark) === */ --wa-text-disabled: #3b4a54; --wa-text-critical: #ff6b7a; --wa-text-success: #25d366; --wa-text-action: #00a884; --wa-system-msg: #8696a0; --wa-primary-title: #8696a0; /* === Shadows (dark) === */ --wa-shadow-light: rgba(0, 0, 0, .3); --wa-shadow-medium: rgba(0, 0, 0, .4); --wa-border-bubble: rgba(255, 255, 255, .06); /* === Button States (dark) === */ --wa-button-primary-hover: #06cf9c; --wa-filter-text: #8696a0; --wa-filter-active: #00a884; --wa-filter-bg-active: #005c4b; } /* === Wallpaper === */ .wa-wallpaper { position: relative; background-color: var(--wa-wallpaper-bg); background-image: var(--wa-wallpaper-image); background-repeat: repeat; background-size: 412px auto; background-blend-mode: overlay; } .dark .wa-wallpaper, [data-theme="dark"] .wa-wallpaper { background-blend-mode: soft-light; } /* === Layout Constants === */ :root { --wa-sidebar-width: 440px; --wa-sidebar-min-width: 340px; --wa-header-height: 59px; --wa-compose-height: 62px; --wa-chat-spacing: 15px; --wa-avatar-size-sm: 40px; --wa-avatar-size-md: 49px; --wa-avatar-size-lg: 200px; --wa-msg-max-width: 60%; } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@base-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.meta-cloud-api.site/r/contact-bubble.json","proxyUrl":"https://shadcnregistry.com/r/wa-ui/contact-bubble","itemId":"@wa-ui/contact-bubble"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/ui/whatsapp/contact-bubble.tsx","content":"$51","type":"registry:component","target":"components/ui/whatsapp/contact-bubble.tsx"},{"path":"components/ui/whatsapp/message-status.tsx","content":"$52","type":"registry:component","target":"components/ui/whatsapp/message-status.tsx"},{"path":"components/ui/whatsapp/styles/whatsapp.css","content":"$53","type":"registry:file","target":"components/ui/whatsapp/styles/whatsapp.css"}]}]]}],"$L54"]}]

Contact Bubble

Installation

Files

components

Styles