{/* Avatar circle */}

{/* Play button */} {/* Waveform */}

{Array.from({ length: 22 }).map((_, i) => { const heights = [3, 5, 8, 12, 7, 10, 14, 9, 11, 6, 13, 15, 8, 10, 5, 7, 11, 9, 6, 4, 3, 2]; const playedThreshold = playing ? 14 : 6; const played = i < playedThreshold; return (

); })}

{duration}

); }; // ─── Voice transcript (caption appearing under voice note) ────────────────── const WAVoiceTranscript = ({ text }) => (

📝{text}

); // ─── Typing indicator ─────────────────────────────────────────────────────── const WATyping = () => (

{[0, 1, 2].map(i => (

))}

); // ─── Date separator pill ─────────────────────────────────────────────────── const WADayPill = ({ text = t("wa_day_pill_today") }) => (

{text}

); // ─── Product card bubble (rich) ──────────────────────────────────────────── const WAProductCard = ({ image, title, desc, price, sku, time = t("wa_time_default_1031am"), from = 'agent' }) => { const isUser = from === 'user'; return (

{!image && '📷'}

{title}

{desc &&

{desc}

}

{price}

{sku &&

{sku}

}

{time}

); }; // ─── Coupon card bubble ──────────────────────────────────────────────────── const WACouponCard = ({ code, discount, validity, time = t("wa_time_default_1032am") }) => (

{t("wa_coupon_label")}

{code}

{t("wa_coupon_discount_prefix")} {discount}

⏰ {validity}

{time}

); // ─── Order/shipping card ──────────────────────────────────────────────────── const WAShippingCard = ({ carrier, recipient, city, tracking, time = t("wa_time_default_1031am") }) => (

📦

{t("wa_shipping_card_title_prefix")} — {carrier}

{t("wa_shipping_recipient_label")}: {recipient}

{t("wa_shipping_city_label")}: {city}

{t("wa_shipping_tracking_label")}: {tracking}

{time}

); // ─── PDF file attachment (WhatsApp-style) ───────────────────────────────── const WAPDFCard = ({ filename = t("wa_pdf_default_filename"), pages = t("wa_pdf_default_pages"), size = t("wa_pdf_default_size"), time = t("wa_time_default_1043am") }) => (

PDF

{filename}

{pages} • {size} • PDF

{time}

); // ─── Time skip indicator ─────────────────────────────────────────────────── const WATimeSkip = ({ text = t("wa_time_skip_two_hours_later") }) => (

{text}

); // ─── Input bar ────────────────────────────────────────────────────────────── const WAInput = () => (

{t("wa_input_placeholder")}

); // ─── Frame: full WhatsApp chat container ─────────────────────────────────── // width/height in screen coords. children = messages. const WAChat = ({ width = 470, height = 720, headerTitle = t("wa_header_title_owner_agent"), headerSubtitle = t("wa_header_subtitle_online_now"), showLogo = true, children, hideInput = false, }) => (

{/* Pattern background using SVG */}

")`, }}/>

{children}

{!hideInput && }

); // ─── Web chat widget — overlays the store page (Sales Agent on storefront) ─ const WC_BG = '#FFFFFF'; const WC_AGENT_BUBBLE = '#F5F6F7'; const WC_USER_BUBBLE = '#0B1A1F'; const WC_TEXT = '#0B1A1F'; const WC_MUTED = '#6B7280'; const WC_ACCENT = '#73FCD7'; const WCWidget = ({ width = 380, height = 520, agentName = t("wa_wc_default_agent_name"), children }) => (

{/* Minimal header */}

{agentName}

{t("wa_wc_online_now")}

{/* Messages */}

{children}

{/* Input bar — matches screenshot */}

{t("wa_wc_input_placeholder")}

); // Closed-state launcher pill — small floating button on the store const WCLauncher = ({ label = t("wa_wc_launcher_label") }) => (

{label}

); const WCBubble = ({ from = 'agent', children, time }) => { const isUser = from === 'user'; return (

{children} {time && (

{time}

)}

); }; const WCTyping = () => (

{[0, 1, 2].map(i => (

))}

); const WCProductSuggest = ({ title, price, rating, glyph = '☕', accent = '#FBBF24' }) => (

{glyph}

{t("wa_wc_most_ordered_badge")}

{title}

★ {rating} ({toLocaleDigits(127)} {t("wa_wc_reviews_count_suffix")})

{price}

); Object.assign(window, { WAChat, WAHeader, WABubble, WAVoiceNote, WAVoiceTranscript, WATyping, WADayPill, WAProductCard, WACouponCard, WAShippingCard, WAPDFCard, WATimeSkip, WAInput, WCWidget, WCBubble, WCTyping, WCProductSuggest, WCLauncher, });