// whatsapp.jsx — WhatsApp chat UI (header, messages, bubbles, input) // All sizing tuned to the iPhone frame (402px wide). // Modern WhatsApp on iOS palette (2024+) const WA = { bg: '#EFE7DE', // warmer wallpaper base bgPattern: '#D9D3CA', headerBg: '#FFFFFF', // iOS-style: white header (light mode) headerText: '#111B21', bubbleIn: '#FFFFFF', bubbleOut: '#D9FDD3', // refreshed light green (modern WA) bubbleShadow: '0 1px 0.5px rgba(11,20,26,.13)', textDark: '#111B21', textMeta: '#667781', link: '#027EB5', accent: '#008069', // modern WA teal-green (CTAs, send) accentLight: '#1DAA61', inputBg: '#F0F2F5', divider: 'rgba(17,27,33,.08)', hairline: 'rgba(17,27,33,.10)', }; // Modern WhatsApp wallpaper — soft cream with subtle geometric doodles const WA_BG_URL = "data:image/svg+xml;utf8," + encodeURIComponent( ` ` ); // ───────────────────────────────────────────────────────────── // Chat header — name, avatar, back, actions // ───────────────────────────────────────────────────────────── function ChatHeader({ name = 'Anova', subtitle = 'online', avatars = 1, members, onBack, online = true }) { const stroke = '#008069'; return (
{/* back arrow (iOS chevron + small unread count) */} {/* avatar(s) — wrapped with online dot for 1:1 */}
{avatars === 1 ? : } {avatars === 1 && online && ( )}
{/* name + status */}
{name} {avatars === 1 && ( )}
{members ? members : subtitle}
{/* icons (iOS-style: video, call, ellipsis) */}
); } const iconBtn = { background: 'transparent', border: 'none', width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0, borderRadius: 8, transition: 'background 120ms ease', }; // ANOVA monogram avatar — circular (matches WA chat avatars), bold A mark function AnovaAvatar({ size = 40 }) { return (
A
); } // Client avatar (initials) function ClientAvatar({ size = 40, name = 'JM', tone = '#767676' }) { return (
{name}
); } // Group avatar — clean WA-style: large back avatar + small front avatar overlap function GroupAvatarStack({ size = 40 }) { const back = size * 0.78; const front = size * 0.58; return (
{/* back: client */}
JM
{/* front: anova */}
A
); } // ───────────────────────────────────────────────────────────── // Message bubble // ───────────────────────────────────────────────────────────── function Bubble({ from = 'in', children, time = '10:32', showTail = true, showStatus = false }) { const isOut = from === 'out'; return (
{/* tail */} {showTail && (
)}
{children}
{time} {isOut && showStatus && ( )}
); } // Text with WhatsApp-style formatting (*bold*, emojis preserved, line breaks) function WAText({ text }) { // split by *...* for bold const parts = []; const regex = /\*([^*]+)\*/g; let lastIdx = 0; let m; while ((m = regex.exec(text)) !== null) { if (m.index > lastIdx) parts.push(text.slice(lastIdx, m.index)); parts.push({m[1]}); lastIdx = m.index + m[0].length; } if (lastIdx < text.length) parts.push(text.slice(lastIdx)); return <>{parts}; } // In-bubble action button (CTA link — e.g. "Fazer meu cadastro") function ActionLink({ icon, label, onClick, href }) { const styleProps = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: 'calc(100% + 20px)', margin: '8px -10px -8px', padding: '11px 12px', background: 'transparent', border: 'none', borderTop: `1px solid ${WA.divider}`, color: WA.link, fontSize: 14.5, fontWeight: 500, fontFamily: '-apple-system, system-ui', cursor: 'pointer', textAlign: 'center', letterSpacing: -.1, transition: 'background 120ms ease', textDecoration: 'none', }; const onEnter = (e) => e.currentTarget.style.background = 'rgba(2,126,181,.06)'; const onLeave = (e) => e.currentTarget.style.background = 'transparent'; if (href) { return ( {icon && {icon}} {label} ); } return ( ); } // Quick-reply button row (below message) function QuickReplies({ options = [], onPick }) { return (
{options.map((opt, i) => ( ))}
); } // ───────────────────────────────────────────────────────────── // Date / phase separator // ───────────────────────────────────────────────────────────── function DateSeparator({ label }) { return (
{label}
); } // ANOVA-style phase marker (more distinctive, uses blueprint language) function PhaseMarker({ phase, label }) { return (
{phase} {label}
); } // System notice (e.g. "Você foi adicionado ao grupo") function SystemNotice({ children, icon }) { return (
{icon && {icon}} {children}
); } // ───────────────────────────────────────────────────────────── // Typing indicator (3 dots) // ───────────────────────────────────────────────────────────── function TypingBubble() { return (
{[0,1,2].map(i => ( ))}
); } // ───────────────────────────────────────────────────────────── // Input bar at bottom // ───────────────────────────────────────────────────────────── function ChatInput({ value = '', placeholder = 'Mensagem', typing = false }) { return (
{value || placeholder} {typing && }
); } // Image inside a bubble (for MSG 6 mocks) function MediaBubble({ from = 'in', caption, children, time = '10:40', showTail = true }) { const isOut = from === 'out'; return (
{showTail && !isOut && (
)}
{children}
{caption && (
)}
{time}
); } // ───────────────────────────────────────────────────────────── // Keyframes injected once // ───────────────────────────────────────────────────────────── if (typeof document !== 'undefined' && !document.getElementById('wa-keyframes')) { const s = document.createElement('style'); s.id = 'wa-keyframes'; s.textContent = ` @keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } } @keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } `; document.head.appendChild(s); } Object.assign(window, { WA, WA_BG_URL, ChatHeader, AnovaAvatar, ClientAvatar, GroupAvatarStack, Bubble, WAText, ActionLink, QuickReplies, DateSeparator, PhaseMarker, SystemNotice, TypingBubble, ChatInput, MediaBubble, });