brainerce 1.31.0 → 1.33.0

package/README.md

@@ -4865,12 +4865,26 @@ Add the store's AI shopping assistant with one line. All configuration (name, av
 // or mount from the SDK (client-side only)
 import { BrainerceBot } from 'brainerce/bot';
 
-const bot = await BrainerceBot.mount({ connectionId: 'vc_abc123' });
+const bot = await BrainerceBot.mount({
+  connectionId: 'vc_abc123',
+  // Optional: make cart adds (card buttons, the in-card variant picker, and
+  // bot-initiated adds) go through YOUR cart so your header count stays in
+  // sync. variantId is null for simple products. Return false to make the
+  // widget fall back to navigating to the product page.
+  onAddToCart: async ({ productId, variantId, quantity }) => {
+    await client.smartAddToCart({ productId, variantId: variantId ?? undefined, quantity });
+    return true;
+  },
+});
 // resolves to null when the bot is disabled — safe to call unconditionally
 bot?.destroy(); // optional teardown
 ```
 
-The widget persists an anonymous session in `localStorage`, restores conversations on revisit, streams answers, shows product recommendation cards (linking to `/products/<slug>`), and includes a leave-a-message form that lands in the merchant's Inquiries inbox. It is read-only by design — shoppers can never mutate the store through it.
+The widget persists an anonymous session in `localStorage`, restores conversations on revisit, streams answers, and shows product recommendation cards (image, price, add-to-cart / view buttons). Multi-variant products get an **in-card variant picker** (attribute chips, live variant price/image) so shoppers can choose options and add without leaving the chat; shoppers can also just ask the assistant to add an item ("add the moka to my cart") and it happens through the same chain. A leave-a-message form lands in the merchant's Inquiries inbox, and zero-result searches feed the merchant's "unmet demand" analytics.
+
+**Add to cart resolution** (never a dead button): the widget first calls your `onAddToCart` option; without one it dispatches a cancelable `brainerce:bot:add-to-cart` `CustomEvent` on `window` (`detail: { productId, variantId, quantity, connectionId }` — call `preventDefault()` after handling it); if nothing handles either, it navigates to the product page. Products too complex for in-chat picking (3+ attribute dimensions or 25+ variants) always navigate. Aside from your own cart handler, the widget is read-only by design — shoppers can never mutate the store through it.
+
+Merchant-side display controls (Studio → Storefront Bot): chat size (compact / full screen / shopper's choice), auto-open, position, and whether shoppers may expand the window (`allowExpand`).
 
 ## Webhooks
 

package/dist/bot/bootstrap.global.js

@@ -1,57 +1,251 @@
-"use strict";(()=>{var N="https://api.brainerce.com",U=new Set(["he","ar"]),M={en:{online:"Online",placeholder:"Ask anything\u2026",error:"Something went wrong \u2014 please try again.",leaveMessage:"Leave a message for the team",yourEmail:"Your email",yourMessage:"Your message",send:"Send",sent:"Thanks! The team will get back to you by email.",close:"Close"},he:{online:"\u05DE\u05D7\u05D5\u05D1\u05E8",placeholder:"\u05E9\u05D0\u05DC\u05D5 \u05D0\u05D5\u05EA\u05D9 \u05D4\u05DB\u05DC\u2026",error:"\u05DE\u05E9\u05D4\u05D5 \u05D4\u05E9\u05EA\u05D1\u05E9 \u2014 \u05E0\u05E1\u05D5 \u05E9\u05D5\u05D1.",leaveMessage:"\u05D4\u05E9\u05D0\u05D9\u05E8\u05D5 \u05D4\u05D5\u05D3\u05E2\u05D4 \u05DC\u05E6\u05D5\u05D5\u05EA",yourEmail:"\u05D4\u05D0\u05D9\u05DE\u05D9\u05D9\u05DC \u05E9\u05DC\u05DB\u05DD",yourMessage:"\u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E9\u05DC\u05DB\u05DD",send:"\u05E9\u05DC\u05D9\u05D7\u05D4",sent:"\u05EA\u05D5\u05D3\u05D4! \u05D4\u05E6\u05D5\u05D5\u05EA \u05D9\u05D7\u05D6\u05D5\u05E8 \u05D0\u05DC\u05D9\u05DB\u05DD \u05D1\u05DE\u05D9\u05D9\u05DC.",close:"\u05E1\u05D2\u05D9\u05E8\u05D4"}};function $(r){let e=new Uint8Array(16);crypto.getRandomValues(e);let t=btoa(String.fromCharCode(...e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"");return`${r}${t}`}var S=class r{constructor(e){this.settings={enabled:!1};this.locale="en";this.sessionId=null;this.conversationId=null;this.busy=!1;this.opened=!1;this.destroyed=!1;this.connectionId=e.connectionId,this.baseUrl=(e.baseUrl||N).replace(/\/$/,""),this.storageKey=`brainerce-bot:${this.connectionId}`}static async mount(e){if(!e?.connectionId)return console.warn("[BrainerceBot] connectionId is required"),null;let t=new r(e);return await t.boot(e.target??document.body)?t:null}destroy(){this.destroyed=!0,this.host?.remove()}async boot(e){try{let t=await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/settings`);if(!t.ok)return!1;this.settings=await t.json()}catch{return!1}return this.settings.enabled?(this.locale=this.settings.languages?.[0]??"en",this.restoreIds(),this.render(e),this.settings.displayMode==="auto_open"&&setTimeout(()=>!this.destroyed&&this.open(),3e3),!0):!1}t(e){return(M[this.locale]??M.en)[e]??M.en[e]??e}restoreIds(){try{let e=localStorage.getItem(this.storageKey);if(e){let t=JSON.parse(e);this.sessionId=t.sessionId??null,this.conversationId=t.conversationId??null}}catch{}}persistIds(){try{localStorage.setItem(this.storageKey,JSON.stringify({sessionId:this.sessionId,conversationId:this.conversationId}))}catch{}}render(e){let t=this.settings.accentColor||"#6366F1",n=U.has(this.locale)?"rtl":"ltr",d=this.settings.bubbleShape==="square"?"8px":"16px",s=this.settings.position==="start"?"left":"right",l=n==="rtl"?s==="left"?"right":"left":s;this.host=document.createElement("div"),this.host.setAttribute("data-brainerce-bot",this.connectionId),this.root=this.host.attachShadow({mode:"open"});let x=document.createElement("style");x.textContent=`
+"use strict";(()=>{var R="https://api.brainerce.com",O=new Set(["he","ar"]),S={en:{online:"Online",placeholder:"Ask anything\u2026",error:"Something went wrong \u2014 please try again.",leaveMessage:"Leave a message for the team",yourEmail:"Your email",yourMessage:"Your message",send:"Send",sent:"Thanks! The team will get back to you by email.",close:"Close",expand:"Expand",collapse:"Collapse",searching:"Searching the store\u2026",addToCart:"Add to cart",added:"Added",view:"View",chooseOptions:"View product",results:"From the store",poweredBy:"Powered by Brainerce",addFailed:"I couldn\u2019t add that to the cart \u2014 try the button on the product card."},he:{online:"\u05DE\u05D7\u05D5\u05D1\u05E8",placeholder:"\u05E9\u05D0\u05DC\u05D5 \u05D0\u05D5\u05EA\u05D9 \u05D4\u05DB\u05DC\u2026",error:"\u05DE\u05E9\u05D4\u05D5 \u05D4\u05E9\u05EA\u05D1\u05E9 \u2014 \u05E0\u05E1\u05D5 \u05E9\u05D5\u05D1.",leaveMessage:"\u05D4\u05E9\u05D0\u05D9\u05E8\u05D5 \u05D4\u05D5\u05D3\u05E2\u05D4 \u05DC\u05E6\u05D5\u05D5\u05EA",yourEmail:"\u05D4\u05D0\u05D9\u05DE\u05D9\u05D9\u05DC \u05E9\u05DC\u05DB\u05DD",yourMessage:"\u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E9\u05DC\u05DB\u05DD",send:"\u05E9\u05DC\u05D9\u05D7\u05D4",sent:"\u05EA\u05D5\u05D3\u05D4! \u05D4\u05E6\u05D5\u05D5\u05EA \u05D9\u05D7\u05D6\u05D5\u05E8 \u05D0\u05DC\u05D9\u05DB\u05DD \u05D1\u05DE\u05D9\u05D9\u05DC.",close:"\u05E1\u05D2\u05D9\u05E8\u05D4",expand:"\u05D4\u05E8\u05D7\u05D1\u05D4",collapse:"\u05DB\u05D9\u05D5\u05D5\u05E5",searching:"\u05DE\u05D7\u05E4\u05E9 \u05D1\u05D7\u05E0\u05D5\u05EA\u2026",addToCart:"\u05D4\u05D5\u05E1\u05E4\u05D4 \u05DC\u05E1\u05DC",added:"\u05E0\u05D5\u05E1\u05E3",view:"\u05E6\u05E4\u05D9\u05D9\u05D4",chooseOptions:"\u05DC\u05E6\u05E4\u05D5\u05EA \u05D1\u05DE\u05D5\u05E6\u05E8",results:"\u05DE\u05EA\u05D5\u05DA \u05D4\u05D7\u05E0\u05D5\u05EA",poweredBy:"\u05DE\u05D5\u05E4\u05E2\u05DC \u05E2\u05DC \u05D9\u05D3\u05D9 Brainerce",addFailed:"\u05DC\u05D0 \u05D4\u05E6\u05DC\u05D7\u05EA\u05D9 \u05DC\u05D4\u05D5\u05E1\u05D9\u05E3 \u05DC\u05E1\u05DC \u2014 \u05E0\u05E1\u05D5 \u05D3\u05E8\u05DA \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 \u05D1\u05DB\u05E8\u05D8\u05D9\u05E1 \u05D4\u05DE\u05D5\u05E6\u05E8."}},H={chat:'<svg viewBox="0 0 24 24" fill="none"><path d="M12 3C7.03 3 3 6.58 3 11c0 2.04.86 3.9 2.28 5.32-.15 1.23-.62 2.39-1.1 3.21-.13.23.05.52.31.47 1.56-.27 3.07-.93 4.13-1.62A10.6 10.6 0 0 0 12 19c4.97 0 9-3.58 9-8s-4.03-8-9-8Z" fill="currentColor"/></svg>',close:'<svg viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',expand:'<svg viewBox="0 0 24 24" fill="none"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',collapse:'<svg viewBox="0 0 24 24" fill="none"><path d="M20 10h-6V4M4 14h6v6M20 4l-6 6M4 20l6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',mail:'<svg viewBox="0 0 24 24" fill="none"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke="currentColor" stroke-width="1.7"/><path d="m4.5 7.5 7.5 5.5 7.5-5.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>',send:'<svg viewBox="0 0 24 24" fill="none"><path d="M4.4 11.2 19 4.6c.7-.3 1.4.4 1.1 1.1l-6.6 14.6c-.3.7-1.3.6-1.5-.1l-1.7-5.4a1 1 0 0 0-.6-.6l-5.4-1.7c-.7-.2-.8-1.2-.1-1.5Z" fill="currentColor"/></svg>',cart:'<svg viewBox="0 0 24 24" fill="none"><path d="M3 4h2l2.4 11.2A2 2 0 0 0 9.36 17H17.5a2 2 0 0 0 1.95-1.55L21 8H6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="20.5" r="1.4" fill="currentColor"/><circle cx="17" cy="20.5" r="1.4" fill="currentColor"/></svg>',check:'<svg viewBox="0 0 24 24" fill="none"><path d="m5 12.5 4.5 4.5L19 7.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>',arrow:'<svg viewBox="0 0 24 24" fill="none"><path d="M7 17 17 7M9 7h8v8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',brand:'<svg viewBox="0 0 24 24"><defs><linearGradient id="bb-brand-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#34d399"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient></defs><rect x="1.5" y="1.5" width="21" height="21" rx="6" fill="url(#bb-brand-g)"/><text x="12" y="17" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="14" font-weight="700" fill="#fff">B</text></svg>'},z=typeof DOMParser<"u"?new DOMParser:null;function m(b){let e=(H[b]??H.chat).replace("<svg ",'<svg xmlns="http://www.w3.org/2000/svg" '),t=z?.parseFromString(e,"image/svg+xml")?.documentElement;return!t||t.nodeName==="parsererror"?document.createTextNode(""):(t.setAttribute("aria-hidden","true"),t.setAttribute("class","bb-ic"),t)}function P(b){let e=new Uint8Array(16);crypto.getRandomValues(e);let n=btoa(String.fromCharCode(...e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"");return`${b}${n}`}function T(b){return/^\/(?!\/)/.test(b)||/^https?:\/\//i.test(b)}var $=/\*\*([^*\n]+)\*\*|\[([^\]\n]+)\]\(([^)\s]+)\)/g;function A(b,e){let n=0;$.lastIndex=0;for(let t=$.exec(e);t;t=$.exec(e)){if(t.index>n&&b.appendChild(document.createTextNode(e.slice(n,t.index))),t[1]!==void 0){let i=document.createElement("strong");i.textContent=t[1],b.appendChild(i)}else if(T(t[3])){let i=document.createElement("a");i.href=t[3],i.target="_blank",i.rel="noopener noreferrer",i.textContent=t[2],b.appendChild(i)}else b.appendChild(document.createTextNode(t[2]));n=t.index+t[0].length}n<e.length&&b.appendChild(document.createTextNode(e.slice(n)))}function U(b,e){b.replaceChildren();let n=e.split(`
+`),t=null,i=null;for(let o of n){let r=/^\s*[-•*]\s+(.*)$/.exec(o);if(r){i=null,t||(t=document.createElement("ul"),b.appendChild(t));let d=document.createElement("li");A(d,r[1]),t.appendChild(d);continue}if(t=null,!o.trim()){i=null;continue}i?i.appendChild(document.createElement("br")):(i=document.createElement("p"),b.appendChild(i)),A(i,o)}}var M=class b{constructor(e){this.settings={enabled:!1};this.locale="en";this.sessionId=null;this.conversationId=null;this.busy=!1;this.opened=!1;this.expanded=!1;this.destroyed=!1;this.pendingText="";this.cardsRow=null;this.cardIds=new Set;this.prevBodyOverflow=null;this.connectionId=e.connectionId,this.baseUrl=(e.baseUrl||R).replace(/\/$/,""),this.storageKey=`brainerce-bot:${this.connectionId}`,this.onAddToCart=e.onAddToCart}static async mount(e){if(!e?.connectionId)return console.warn("[BrainerceBot] connectionId is required"),null;let n=new b(e);return await n.boot(e.target??document.body)?n:null}destroy(){this.destroyed=!0,this.prevBodyOverflow!==null&&(document.body.style.overflow=this.prevBodyOverflow,this.prevBodyOverflow=null),this.host?.remove()}async boot(e){try{let n=await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/settings`);if(!n.ok)return!1;this.settings=await n.json()}catch{return!1}return this.settings.enabled?(this.locale=this.settings.languages?.[0]??"en",this.restoreIds(),this.render(e),this.settings.displayMode==="auto_open"&&setTimeout(()=>!this.destroyed&&this.open(),3e3),!0):!1}t(e){return(S[this.locale]??S.en)[e]??S.en[e]??e}restoreIds(){try{let e=localStorage.getItem(this.storageKey);if(e){let n=JSON.parse(e);this.sessionId=n.sessionId??null,this.conversationId=n.conversationId??null}}catch{}}persistIds(){try{localStorage.setItem(this.storageKey,JSON.stringify({sessionId:this.sessionId,conversationId:this.conversationId}))}catch{}}css(e,n,t){let i=this.settings.bubbleShape==="square",o=i?"14px":"22px",r=i?"8px":"15px",d="5px",a=this.settings.displayMode??"floating",l=a==="side_rail",s=a==="full_screen";return`
       :host { all: initial; }
-      * { box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
-      .bb-root { position: fixed; bottom: 20px; ${l}: 20px; z-index: 2147483000; direction: ${n}; }
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;
+        font-family: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
+        -webkit-font-smoothing: antialiased; }
+      button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
+      .bb { position: fixed; bottom: 24px; ${t}: 24px; z-index: 2147483000; direction: ${n};
+        /* product-card density scales with the window size */
+        --bb-card-w: 148px; --bb-img-h: 84px; --bb-title-fs: 11.5px; --bb-price-fs: 12.5px; --bb-btn-h: 27px; }
+      /* .big = any large surface (expanded, full-screen mode, mobile takeover) */
+      .bb.big { --bb-card-w: 216px; --bb-img-h: 132px; --bb-title-fs: 13px; --bb-price-fs: 14px; --bb-btn-h: 33px; }
+      .bb.big .bb-msgs, .bb.big .bb-chips, .bb.big .bb-esc {
+        padding-inline: max(20px, calc((100% - 1340px) / 2)); }
+      .bb.big .bb-msgs { gap: 12px; padding-top: 22px; }
+      .bb.big .bb-msg { font-size: 14px; padding: 11px 15px; }
+      .bb.big .bb-header { padding: 15px 22px; }
+      /* Big-surface composer: a full-width message box with the send inside */
+      .bb.big .bb-composer { position: relative; padding: 16px 20px 20px; }
+      .bb.big .bb-input { min-height: 116px; border-radius: 18px; background: #fff;
+        border: 1px solid #e3e5ec; padding: 16px 20px 52px; font-size: 15px;
+        overflow-y: auto; box-shadow: 0 2px 8px -2px rgba(15,18,34,.06); }
+      .bb.big .bb-send { position: absolute; bottom: 34px; inset-inline-end: 36px;
+        width: 42px; height: 42px; }
+      .bb.big .bb-send .bb-ic { width: 19px; height: 19px; }
+      /* Backdrop for the large dialog: dim + blur the storefront behind it */
+      .bb-scrim { position: fixed; inset: 0; background: rgba(15,18,34,.35);
+        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
+        opacity: 0; pointer-events: none; transition: opacity .25s ease; }
+      .bb.open.big .bb-scrim { opacity: 1; pointer-events: auto; }
+
+      /* ---- launcher ------------------------------------------------------ */
       .bb-launcher {
-        width: 56px; height: 56px; border: none; cursor: pointer; display: flex;
-        align-items: center; justify-content: center; color: #fff; background: ${t};
-        border-radius: ${this.settings.bubbleShape==="square"?"14px":"9999px"};
-        box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s ease;
-        overflow: hidden; padding: 0;
+        width: 58px; height: 58px; position: relative; display: flex; align-items: center;
+        justify-content: center; color: #fff; background: ${e};
+        border-radius: ${i?"16px":"999px"}; overflow: hidden;
+        box-shadow: 0 6px 16px -4px color-mix(in srgb, ${e} 55%, rgba(10,12,30,.4)), 0 2px 6px rgba(10,12,30,.18);
+        transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
       }
-      .bb-launcher:hover { transform: scale(1.06); }
-      .bb-launcher img { width: 100%; height: 100%; object-fit: cover; }
+      .bb-launcher:hover { transform: scale(1.07) translateY(-1px); }
+      .bb-launcher:active { transform: scale(.96); }
+      .bb-launcher img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
+        transition: opacity .18s ease, transform .25s ease; }
+      .bb-launcher .bb-ic { width: 26px; height: 26px; position: absolute;
+        transition: opacity .18s ease, transform .25s ease; }
+      .bb-launcher .bb-l-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
+      .bb.open .bb-launcher .bb-l-chat, .bb.open .bb-launcher img { opacity: 0; transform: rotate(90deg) scale(.6); }
+      .bb.open .bb-launcher img { transform: scale(1.15); }
+      .bb.open .bb-launcher .bb-l-close { opacity: 1; transform: rotate(0) scale(1); }
+
+      /* ---- window -------------------------------------------------------- */
       .bb-window {
-        position: absolute; bottom: 70px; ${l}: 0; width: 360px; max-width: calc(100vw - 32px);
-        height: 540px; max-height: calc(100vh - 110px); display: none; flex-direction: column;
-        background: #fff; border-radius: 16px; overflow: hidden;
-        box-shadow: 0 16px 48px rgba(0,0,0,.24); border: 1px solid rgba(0,0,0,.06);
+        position: absolute; bottom: 74px; ${t}: 0;
+        width: 384px; max-width: calc(100vw - 32px);
+        height: min(620px, calc(100vh - 122px));
+        display: flex; flex-direction: column; background: #fff;
+        border-radius: ${o}; overflow: hidden;
+        box-shadow: 0 24px 64px -16px rgba(15,18,34,.28), 0 6px 20px -6px rgba(15,18,34,.14), 0 0 0 1px rgba(15,18,34,.05);
+        opacity: 0; transform: translateY(10px) scale(.97);
+        transform-origin: bottom ${t==="left"?"left":"right"};
+        pointer-events: none;
+        transition: opacity .2s ease, transform .24s cubic-bezier(.22,1.2,.36,1);
       }
-      .bb-window.open { display: flex; }
-      .bb-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: ${t}; color: #fff; }
-      .bb-avatar { width: 34px; height: 34px; border-radius: 9999px; background: rgba(255,255,255,.25);
-        display: flex; align-items: center; justify-content: center; font-weight: 600; overflow: hidden; flex-shrink: 0; }
-      .bb-avatar img { width: 100%; height: 100%; object-fit: cover; }
+      .bb.open .bb-window { opacity: 1; transform: none; pointer-events: auto; }
+      /* Shopper-expanded = the large centered dialog (same as full-screen mode) */
+      .bb.expanded .bb-window { position: fixed;
+        inset: min(6vh, 60px) max(24px, calc((100vw - 1680px) / 2));
+        width: auto; max-width: none; height: auto; }
+      ${l?`.bb-window { bottom: 0; top: auto; ${t}: 0; height: calc(100vh - 98px); border-end-start-radius: ${o}; }
+             .bb.expanded .bb-window { width: min(560px, calc(100vw - 40px)); }`:""}
+      ${s?`.bb.open .bb-window { position: fixed;
+               inset: min(6vh, 60px) max(24px, calc((100vw - 1680px) / 2));
+               width: auto; max-width: none; height: auto; }
+             .bb.open .bb-launcher { opacity: 0; pointer-events: none; }`:""}
+      @media (max-width: 520px) {
+        .bb { bottom: 16px; ${t}: 16px; }
+        .bb.open .bb-window { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
+        .bb.open .bb-launcher { opacity: 0; pointer-events: none; }
+      }
+
+      /* ---- header -------------------------------------------------------- */
+      .bb-header { display: flex; align-items: center; gap: 11px; padding: 13px 16px;
+        background: #fff; border-bottom: 1px solid #eef0f4; flex-shrink: 0; }
+      .bb-avatar { width: 38px; height: 38px; position: relative; flex-shrink: 0;
+        border-radius: 999px; background: color-mix(in srgb, ${e} 14%, #fff);
+        color: ${e}; font-size: 15px; font-weight: 700;
+        display: flex; align-items: center; justify-content: center;
+        box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, ${e} 35%, #fff); }
+      .bb-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+      .bb-avatar::after { content: ''; position: absolute; bottom: -1px; inset-inline-end: -1px;
+        width: 10px; height: 10px; border-radius: 999px; background: #22c55e; border: 2px solid #fff; }
       .bb-head-main { flex: 1; min-width: 0; }
-      .bb-name { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-      .bb-status { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 5px; }
-      .bb-dot { width: 6px; height: 6px; border-radius: 9999px; background: #34d399; }
-      .bb-iconbtn { background: none; border: none; color: #fff; cursor: pointer; opacity: .85; font-size: 16px; padding: 4px; }
-      .bb-iconbtn:hover { opacity: 1; }
-      .bb-messages { flex: 1; overflow-y: auto; padding: 14px; background: #f7f7f9; display: flex; flex-direction: column; gap: 8px; }
-      .bb-msg { max-width: 80%; padding: 9px 12px; border-radius: ${d}; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
-      .bb-msg.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.07); border-end-start-radius: 4px; }
-      .bb-msg.user { align-self: flex-end; background: ${t}; color: #fff; border-end-end-radius: 4px; }
-      .bb-msg.err { align-self: flex-start; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
-      .bb-typing { align-self: flex-start; font-size: 11.5px; color: #6b7280; padding: 2px 4px; }
-      .bb-card { align-self: flex-start; width: 230px; background: #fff; border: 1px solid rgba(0,0,0,.08);
-        border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
-      .bb-card img { width: 100%; height: 120px; object-fit: cover; display: block; background: #eee; }
-      .bb-card-body { padding: 9px 11px; }
-      .bb-card-title { font-size: 13px; font-weight: 600; margin: 0 0 3px; }
-      .bb-card-price { font-size: 13px; color: ${t}; font-weight: 600; }
-      .bb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: #f7f7f9; }
-      .bb-chip { border: 1px solid ${t}; color: ${t}; background: #fff; border-radius: 9999px;
-        font-size: 12px; padding: 5px 11px; cursor: pointer; }
-      .bb-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(0,0,0,.07); background: #fff; }
-      .bb-input { flex: 1; border: none; outline: none; font-size: 13.5px; background: #f1f1f4; border-radius: 9999px; padding: 9px 14px; }
-      .bb-send { border: none; background: ${t}; color: #fff; width: 36px; height: 36px; border-radius: 9999px; cursor: pointer; font-size: 15px; flex-shrink: 0; }
-      .bb-send:disabled { opacity: .5; cursor: default; }
-      .bb-esc { padding: 12px 14px; background: #fff; border-top: 1px solid rgba(0,0,0,.07); display: none; flex-direction: column; gap: 8px; }
-      .bb-esc.open { display: flex; }
-      .bb-esc input, .bb-esc textarea { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; resize: none; }
-      .bb-esc button { border: none; background: ${t}; color: #fff; border-radius: 8px; padding: 8px; font-size: 13px; cursor: pointer; }
-      .bb-esc-note { font-size: 12px; color: #047857; }
-    `,this.root.appendChild(x);let o=document.createElement("div");o.className="bb-root",this.root.appendChild(o),this.windowEl=document.createElement("div"),this.windowEl.className="bb-window",o.appendChild(this.windowEl);let m=this.settings.displayName||"Assistant",a=document.createElement("div");a.className="bb-header";let c=document.createElement("span");if(c.className="bb-avatar",this.settings.avatarUrl&&k(this.settings.avatarUrl)){let i=document.createElement("img");i.src=this.settings.avatarUrl,i.alt="",c.appendChild(i)}else c.textContent=m.charAt(0).toUpperCase();let p=document.createElement("span");p.className="bb-head-main";let b=document.createElement("span");b.className="bb-name",b.textContent=m;let v=document.createElement("span");v.className="bb-status";let T=document.createElement("span");T.className="bb-dot",v.appendChild(T),v.appendChild(document.createTextNode(this.t("online"))),p.appendChild(b),p.appendChild(v);let g=document.createElement("button");g.className="bb-iconbtn",g.dataset.act="esc",g.title=this.t("leaveMessage"),g.textContent="\u2709";let f=document.createElement("button");f.className="bb-iconbtn",f.dataset.act="close",f.title=this.t("close"),f.textContent="\u2715",a.appendChild(c),a.appendChild(p),a.appendChild(g),a.appendChild(f),this.windowEl.appendChild(a),a.querySelector('[data-act="close"]')?.addEventListener("click",()=>this.close()),a.querySelector('[data-act="esc"]')?.addEventListener("click",()=>this.toggleEscalation()),this.messagesEl=document.createElement("div"),this.messagesEl.className="bb-messages",this.windowEl.appendChild(this.messagesEl),this.chipsEl=document.createElement("div"),this.chipsEl.className="bb-chips";for(let i of this.settings.starterQuestions??[]){let I=document.createElement("button");I.className="bb-chip",I.textContent=i,I.addEventListener("click",()=>this.send(i)),this.chipsEl.appendChild(I)}this.windowEl.appendChild(this.chipsEl);let h=document.createElement("div");h.className="bb-esc";let E=document.createElement("input");E.type="email",E.name="email",E.placeholder=this.t("yourEmail");let y=document.createElement("textarea");y.name="message",y.rows=2,y.placeholder=this.t("yourMessage");let L=document.createElement("button");L.type="button",L.textContent=this.t("send"),h.appendChild(E),h.appendChild(y),h.appendChild(L),h.querySelector("button")?.addEventListener("click",()=>this.submitEscalation(h)),this.windowEl.appendChild(h);let w=document.createElement("div");w.className="bb-inputrow",this.inputEl=document.createElement("input"),this.inputEl.className="bb-input",this.inputEl.placeholder=this.t("placeholder"),this.inputEl.addEventListener("keydown",i=>{i.key==="Enter"&&this.send(this.inputEl?.value??"")});let C=document.createElement("button");C.className="bb-send",C.textContent="\u27A4",C.addEventListener("click",()=>this.send(this.inputEl?.value??"")),w.appendChild(this.inputEl),w.appendChild(C),this.windowEl.appendChild(w);let u=document.createElement("button");if(u.className="bb-launcher",u.setAttribute("aria-label",m),this.settings.avatarUrl&&k(this.settings.avatarUrl)){let i=document.createElement("img");i.src=this.settings.avatarUrl,i.alt="",u.appendChild(i)}else u.textContent="\u{1F4AC}";u.addEventListener("click",()=>this.opened?this.close():this.open()),o.appendChild(u),e.appendChild(this.host)}open(){!this.windowEl||this.opened||(this.opened=!0,this.windowEl.classList.add("open"),this.messagesEl&&this.messagesEl.childElementCount===0&&this.primeThread(),this.inputEl?.focus())}close(){this.opened=!1,this.windowEl?.classList.remove("open")}async primeThread(){if(this.conversationId&&this.sessionId)try{let e=await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/conversations/${encodeURIComponent(this.conversationId)}?limit=50`,{headers:{"X-Bot-Session":this.sessionId}});if(e.ok){let t=await e.json();for(let n of t.data)this.appendMessage(n.role==="assistant"?"bot":"user",n.content);if(t.data.length>0){this.chipsEl?.remove();return}}else this.conversationId=null,this.sessionId=null,this.persistIds()}catch{}this.settings.greeting&&this.appendMessage("bot",this.settings.greeting)}async send(e){let t=e.trim();if(!t||this.busy)return;this.busy=!0,this.inputEl&&(this.inputEl.value=""),this.chipsEl?.remove(),this.appendMessage("user",t);let n=this.appendTyping(),d=null;try{let s=await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/chat`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:t,turnId:$("trn_"),...this.conversationId?{conversationId:this.conversationId}:{},...this.sessionId?{anonymousSessionId:this.sessionId}:{},locale:this.locale})});if(!s.ok||!s.body)throw new Error(`chat failed (${s.status})`);let l=s.body.getReader(),x=new TextDecoder,o="";for(;;){let{value:m,done:a}=await l.read();if(a)break;o+=x.decode(m,{stream:!0});let c;for(;(c=o.indexOf(`
-
-`))>=0;){let p=o.slice(0,c);if(o=o.slice(c+2),!p.startsWith("data: "))continue;let b;try{b=JSON.parse(p.slice(6))}catch{continue}d=this.handleFrame(b,n,d)}}}catch{this.appendMessage("err",this.t("error"))}finally{n.remove(),this.busy=!1}}handleFrame(e,t,n){switch(e.type){case"connected":return this.conversationId=e.conversationId||this.conversationId,this.sessionId=e.anonymousSessionId||this.sessionId,this.persistIds(),n;case"token":return n||(t.remove(),n=this.appendMessage("bot","")),n.textContent=(n.textContent??"")+e.text,this.scrollDown(),n;case"tool":return t.textContent=e.status==="running"?"\u22EF":"",n;case"card":return this.appendCard(e.card),n;case"error":return this.appendMessage("err",e.message||this.t("error")),n;case"done":default:return n}}toggleEscalation(){this.root?.querySelector(".bb-esc")?.classList.toggle("open")}async submitEscalation(e){let t=e.querySelector('input[name="email"]')?.value.trim(),n=e.querySelector('textarea[name="message"]')?.value.trim();if(!(!t||!n||!this.conversationId||!this.sessionId))try{if((await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/escalate`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:t,message:n,conversationId:this.conversationId,anonymousSessionId:this.sessionId,locale:this.locale})})).ok){let s=document.createElement("span");s.className="bb-esc-note",s.textContent=this.t("sent"),e.replaceChildren(s)}}catch{}}appendCard(e){if(!this.messagesEl)return;let t=document.createElement("a");if(t.className="bb-card",t.href=k(e.url)?e.url:"#",e.imageUrl&&k(e.imageUrl)){let l=document.createElement("img");l.src=e.imageUrl,l.alt="",t.appendChild(l)}let n=document.createElement("span");n.className="bb-card-body";let d=document.createElement("p");d.className="bb-card-title",d.textContent=e.title;let s=document.createElement("span");s.className="bb-card-price",s.textContent=e.price.formatted,n.appendChild(d),n.appendChild(s),t.appendChild(n),t.addEventListener("click",()=>{try{navigator.sendBeacon?.(`${this.baseUrl}/api/storefront-bot/attribution/click`,new Blob([JSON.stringify({botRef:e.botRef})],{type:"application/json"}))}catch{}}),this.messagesEl.appendChild(t),this.scrollDown()}appendMessage(e,t){let n=document.createElement("div");return n.className=`bb-msg ${e}`,n.textContent=t,this.messagesEl?.appendChild(n),this.scrollDown(),n}appendTyping(){let e=document.createElement("div");return e.className="bb-typing",e.textContent="\u22EF",this.messagesEl?.appendChild(e),this.scrollDown(),e}scrollDown(){this.messagesEl&&(this.messagesEl.scrollTop=this.messagesEl.scrollHeight)}};function k(r){return/^\/(?!\/)/.test(r)||/^https?:\/\//i.test(r)}(()=>{let r=document.currentScript,e=r?.dataset.connectionId;if(!e){console.warn("[BrainerceBot] missing data-connection-id on the bot.js script tag");return}let t=r?.dataset.apiBase||void 0,n=()=>void S.mount({connectionId:e,baseUrl:t});document.readyState==="loading"?document.addEventListener("DOMContentLoaded",n,{once:!0}):n()})();})();
+      .bb-name { display: block; font-size: 13.5px; font-weight: 650; color: #14161f;
+        letter-spacing: -.01em; line-height: 1.25;
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .bb-status { display: block; font-size: 11px; color: #8a8f9e; line-height: 1.3; }
+      .bb-actions { display: flex; align-items: center; gap: 2px; }
+      .bb-iconbtn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
+        border-radius: 8px; color: #9aa0ae; transition: background .12s ease, color .12s ease; }
+      .bb-iconbtn:hover { background: #f3f4f7; color: #4d5260; }
+      .bb-iconbtn .bb-ic { width: 17px; height: 17px; }
+
+      /* ---- messages ------------------------------------------------------ */
+      .bb-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain;
+        padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 10px;
+        background: linear-gradient(color-mix(in srgb, ${e} 4%, #f7f8fa), #f7f8fa 140px); }
+      .bb-msgs::-webkit-scrollbar { width: 5px; }
+      .bb-msgs::-webkit-scrollbar-thumb { background: rgba(20,22,31,.12); border-radius: 99px; }
+      .bb-msg { max-width: 84%; padding: 9px 13px; font-size: 13px; line-height: 1.55;
+        word-break: break-word; animation: bb-in .2s ease both; unicode-bidi: plaintext; }
+      .bb-msg p + p, .bb-msg p + ul, .bb-msg ul + p { margin-top: 6px; }
+      .bb-msg ul { padding-inline-start: 18px; }
+      .bb-msg li { margin: 2px 0; }
+      .bb-msg a { color: ${e}; font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }
+      .bb-msg.bot { align-self: flex-start; background: #fff; color: #232633;
+        border: 1px solid #eceef3; border-radius: ${r}; border-end-start-radius: ${d};
+        box-shadow: 0 1px 2px rgba(15,18,34,.04); }
+      .bb-msg.user { align-self: flex-end; background: ${e}; color: #fff;
+        border-radius: ${r}; border-end-end-radius: ${d};
+        box-shadow: 0 2px 6px -2px color-mix(in srgb, ${e} 50%, rgba(10,12,30,.3)); }
+      .bb-msg.err { align-self: flex-start; background: #fef2f2; color: #b91c1c;
+        border: 1px solid #fecaca; border-radius: ${r}; }
+      @keyframes bb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+      /* typing / tool status */
+      .bb-typing { align-self: flex-start; display: flex; align-items: center; gap: 8px;
+        background: #fff; border: 1px solid #eceef3; border-radius: ${r};
+        border-end-start-radius: ${d}; padding: 10px 13px; animation: bb-in .2s ease both; }
+      .bb-typing .bb-dots { display: flex; gap: 4px; }
+      .bb-typing .bb-dots i { width: 6px; height: 6px; border-radius: 99px;
+        background: color-mix(in srgb, ${e} 65%, #aab); animation: bb-bounce 1.2s ease-in-out infinite; }
+      .bb-typing .bb-dots i:nth-child(2) { animation-delay: .15s; }
+      .bb-typing .bb-dots i:nth-child(3) { animation-delay: .3s; }
+      .bb-typing .bb-tool { font-size: 11.5px; color: #8a8f9e; display: none; }
+      .bb-typing.searching .bb-tool { display: block; }
+      @keyframes bb-bounce { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
+
+      /* ---- product cards ------------------------------------------------- */
+      .bb-shelf { align-self: stretch; animation: bb-in .25s ease both; }
+      .bb-shelf-cap { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
+        color: #9aa0ae; padding: 2px 4px 6px; }
+      .bb-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
+        scroll-snap-type: x proximity; scrollbar-width: none; }
+      .bb-cards::-webkit-scrollbar { display: none; }
+      .bb-card { flex: 0 0 var(--bb-card-w); scroll-snap-align: start; background: #fff;
+        border: 1px solid #eceef3; border-radius: 12px; overflow: hidden;
+        display: flex; flex-direction: column;
+        box-shadow: 0 1px 2px rgba(15,18,34,.04);
+        transition: transform .16s ease, box-shadow .16s ease; }
+      .bb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(15,18,34,.18); }
+      .bb-card-img { display: flex; width: 100%; height: var(--bb-img-h); flex: 0 0 var(--bb-img-h); overflow: hidden; background: #f1f2f5; cursor: pointer; }
+      .bb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+      .bb-card-img .bb-ic { width: 22px; height: 22px; color: #c6c9d4; margin: auto; }
+      .bb-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
+      .bb-card-title { font-size: var(--bb-title-fs); font-weight: 600; color: #1c1e29; line-height: 1.35;
+        letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+        overflow: hidden; min-height: 2.7em; cursor: pointer; unicode-bidi: plaintext; }
+      .bb-card-title:hover { color: ${e}; }
+      .bb-card-price { font-size: var(--bb-price-fs); font-weight: 700; color: #14161f;
+        font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+      .bb-card-cta { display: flex; gap: 5px; margin-top: auto; }
+      .bb-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
+        height: var(--bb-btn-h); border-radius: 8px; font-size: 11px; font-weight: 650;
+        white-space: nowrap; padding: 0 6px;
+        transition: filter .12s ease, background .12s ease, color .12s ease; }
+      .bb-btn .bb-ic { width: 13px; height: 13px; }
+      .bb-btn-add { background: ${e}; color: #fff; }
+      .bb-btn-add:hover { filter: brightness(1.08); }
+      .bb-btn-add[data-state="busy"] { opacity: .65; pointer-events: none; }
+      .bb-btn-add[data-state="done"] { background: #059669; pointer-events: none; }
+      .bb-btn-ghost { background: #fff; border: 1px solid #e3e5ec; color: #3c4150; flex: 0 0 auto; padding: 0 11px; }
+      .bb-btn-ghost:hover { background: #f6f7f9; border-color: #d5d8e1; }
+      .bb-btn-ghost.bb-wide { flex: 1; color: ${e}; border-color: color-mix(in srgb, ${e} 35%, #e3e5ec); }
+      .bb-btn-ghost.bb-wide:hover { background: color-mix(in srgb, ${e} 6%, #fff); }
+      .bb-btn:disabled { opacity: .45; pointer-events: none; }
+
+      /* in-card variant picker */
+      .bb-card.picking .bb-card-cta { display: none; }
+      .bb-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
+        padding-top: 8px; border-top: 1px dashed #e9ebf0; position: relative; }
+      .bb-pick-close { position: absolute; top: 6px; inset-inline-end: 0;
+        width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
+        border-radius: 6px; color: #9aa0ae; }
+      .bb-pick-close:hover { background: #f3f4f7; color: #4d5260; }
+      .bb-pick-close .bb-ic { width: 11px; height: 11px; }
+      .bb-pick-key { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
+        letter-spacing: .06em; color: #9aa0ae; unicode-bidi: plaintext; }
+      .bb-pick-vals { display: flex; flex-wrap: wrap; gap: 4px; }
+      .bb-chipv { border: 1px solid #e3e5ec; border-radius: 7px; padding: 3px 9px;
+        font-size: 11px; font-weight: 550; color: #3c4150; background: #fff;
+        transition: border-color .12s ease, background .12s ease, color .12s ease; }
+      .bb-chipv:hover { border-color: color-mix(in srgb, ${e} 50%, #e3e5ec); }
+      .bb-chipv.sel { background: ${e}; border-color: ${e}; color: #fff; }
+      .bb-chipv.off { opacity: .35; pointer-events: none; }
+      .bb-pick-foot { display: flex; align-items: center; justify-content: space-between;
+        gap: 6px; margin-top: 2px; }
+      .bb-pick-foot .bb-btn { flex: 0 0 auto; padding: 0 11px; }
+      .bb-pick-price { font-size: 12.5px; font-weight: 700; color: #14161f;
+        font-variant-numeric: tabular-nums; }
+
+      /* ---- starter chips -------------------------------------------------- */
+      .bb-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 14px 12px; background: #f7f8fa; }
+      .bb-chip { border: 1px solid color-mix(in srgb, ${e} 30%, #e3e5ec);
+        color: color-mix(in srgb, ${e} 85%, #000); background: #fff; border-radius: 999px;
+        font-size: 12px; font-weight: 550; padding: 6px 13px;
+        transition: background .12s ease, transform .12s ease; }
+      .bb-chip:hover { background: color-mix(in srgb, ${e} 7%, #fff); transform: translateY(-1px); }
+
+      /* ---- escalation sheet ----------------------------------------------- */
+      .bb-esc { display: none; flex-direction: column; gap: 8px; padding: 12px 14px;
+        background: #fff; border-top: 1px solid #eef0f4; flex-shrink: 0; }
+      .bb-esc.open { display: flex; animation: bb-in .18s ease both; }
+      .bb-esc-title { font-size: 12px; font-weight: 650; color: #3c4150; }
+      .bb-esc input, .bb-esc textarea { border: 1px solid #e3e5ec; border-radius: 10px;
+        padding: 8px 11px; font-size: 12.5px; color: #1c1e29; outline: none; resize: none; background: #fbfbfd; }
+      .bb-esc input:focus, .bb-esc textarea:focus { border-color: color-mix(in srgb, ${e} 55%, #e3e5ec);
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${e} 12%, transparent); background: #fff; }
+      .bb-esc-send { height: 33px; border-radius: 10px; background: ${e}; color: #fff;
+        font-size: 12.5px; font-weight: 650; }
+      .bb-esc-send:hover { filter: brightness(1.08); }
+      .bb-esc-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #047857; font-weight: 550; }
+      .bb-esc-note .bb-ic { width: 15px; height: 15px; }
+
+      /* ---- composer ------------------------------------------------------- */
+      .bb-composer { display: flex; align-items: center; gap: 8px; padding: 11px 12px;
+        background: #fff; border-top: 1px solid #eef0f4; flex-shrink: 0; }
+      .bb-input { flex: 1; border: 1px solid transparent; outline: none; font-size: 13px; color: #1c1e29;
+        background: #f1f2f5; border-radius: 999px; padding: 9px 15px; min-width: 0;
+        resize: none; overflow-y: hidden; height: 38px; line-height: 1.45;
+        transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; }
+      .bb-input::placeholder { color: #9aa0ae; }
+      .bb-input:focus { background: #fff; border-color: color-mix(in srgb, ${e} 55%, #e3e5ec);
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${e} 12%, transparent); }
+      .bb-send { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center;
+        justify-content: center; border-radius: 999px; background: ${e}; color: #fff;
+        transition: transform .15s cubic-bezier(.34,1.56,.64,1), opacity .12s ease, filter .12s ease; }
+      .bb-send .bb-ic { width: 17px; height: 17px; ${n==="rtl"?"transform: scaleX(-1);":""} }
+      .bb-send:hover { filter: brightness(1.08); transform: scale(1.06); }
+      .bb-send:disabled { opacity: .4; pointer-events: none; }
+
+      /* Powered-by footer */
+      .bb-foot { flex-shrink: 0; display: flex; justify-content: center; align-items: center;
+        padding: 5px 12px 7px; background: #fff; }
+      .bb-foot a { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
+        font-weight: 500; color: #aab0bd; text-decoration: none; letter-spacing: .005em;
+        transition: color .12s ease; }
+      .bb-foot a:hover { color: #6b7280; }
+      .bb-foot .bb-ic { width: 13px; height: 13px; border-radius: 4px; }
+    `}render(e){let n=this.settings.accentColor||"#6366F1",t=O.has(this.locale)?"rtl":"ltr",i=this.settings.position==="start"?"left":"right",o=t==="rtl"?i==="left"?"right":"left":i,r=this.settings.displayName||"Assistant";this.host=document.createElement("div"),this.host.setAttribute("data-brainerce-bot",this.connectionId),this.root=this.host.attachShadow({mode:"open"});let d=document.createElement("style");d.textContent=this.css(n,t,o),this.root.appendChild(d);let a=document.createElement("div");a.className="bb",this.root.appendChild(a);let l=document.createElement("div");l.className="bb-scrim",l.addEventListener("click",()=>{this.expanded?this.toggleExpand():this.close()}),a.appendChild(l),this.windowEl=document.createElement("div"),this.windowEl.className="bb-window",a.appendChild(this.windowEl);let s=document.createElement("div");s.className="bb-header";let h=document.createElement("span");if(h.className="bb-avatar",this.settings.avatarUrl&&T(this.settings.avatarUrl)){let p=document.createElement("img");p.src=this.settings.avatarUrl,p.alt="",h.appendChild(p)}else h.appendChild(document.createTextNode(r.charAt(0).toUpperCase()));let u=document.createElement("span");u.className="bb-head-main";let g=document.createElement("span");g.className="bb-name",g.textContent=r;let w=document.createElement("span");w.className="bb-status",w.textContent=this.t("online"),u.appendChild(g),u.appendChild(w);let v=document.createElement("span");v.className="bb-actions",(this.settings.displayMode??"floating")!=="full_screen"&&this.settings.allowExpand!==!1&&(this.expandBtn=this.iconButton("expand",this.t("expand"),()=>this.toggleExpand()),v.appendChild(this.expandBtn)),v.appendChild(this.iconButton("mail",this.t("leaveMessage"),()=>this.toggleEscalation())),v.appendChild(this.iconButton("close",this.t("close"),()=>this.close())),s.appendChild(h),s.appendChild(u),s.appendChild(v),this.windowEl.appendChild(s),this.messagesEl=document.createElement("div"),this.messagesEl.className="bb-msgs",this.windowEl.appendChild(this.messagesEl),this.chipsEl=document.createElement("div"),this.chipsEl.className="bb-chips";for(let p of this.settings.starterQuestions??[]){let N=document.createElement("button");N.className="bb-chip",N.textContent=p,N.addEventListener("click",()=>this.send(p)),this.chipsEl.appendChild(N)}this.windowEl.appendChild(this.chipsEl);let c=document.createElement("div");c.className="bb-esc";let C=document.createElement("span");C.className="bb-esc-title",C.textContent=this.t("leaveMessage");let E=document.createElement("input");E.type="email",E.name="email",E.placeholder=this.t("yourEmail");let k=document.createElement("textarea");k.name="message",k.rows=2,k.placeholder=this.t("yourMessage");let I=document.createElement("button");I.type="button",I.className="bb-esc-send",I.textContent=this.t("send"),I.addEventListener("click",()=>this.submitEscalation(c)),c.appendChild(C),c.appendChild(E),c.appendChild(k),c.appendChild(I),this.windowEl.appendChild(c);let f=document.createElement("div");f.className="bb-composer",this.inputEl=document.createElement("textarea"),this.inputEl.className="bb-input",this.inputEl.rows=1,this.inputEl.placeholder=this.t("placeholder"),this.inputEl.addEventListener("keydown",p=>{p.key==="Enter"&&!p.shiftKey&&(p.preventDefault(),this.send(this.inputEl?.value??""))}),this.inputEl.addEventListener("input",()=>this.syncSendState()),this.sendBtn=document.createElement("button"),this.sendBtn.className="bb-send",this.sendBtn.disabled=!0,this.sendBtn.setAttribute("aria-label",this.t("send")),this.sendBtn.appendChild(m("send")),this.sendBtn.addEventListener("click",()=>this.send(this.inputEl?.value??"")),f.appendChild(this.inputEl),f.appendChild(this.sendBtn),this.windowEl.appendChild(f);let B=document.createElement("div");B.className="bb-foot";let x=document.createElement("a");if(x.href="https://brainerce.com",x.target="_blank",x.rel="noopener noreferrer",x.appendChild(m("brand")),x.appendChild(document.createTextNode(this.t("poweredBy"))),B.appendChild(x),this.windowEl.appendChild(B),this.launcherEl=document.createElement("button"),this.launcherEl.className="bb-launcher",this.launcherEl.setAttribute("aria-label",r),this.settings.avatarUrl&&T(this.settings.avatarUrl)){let p=document.createElement("img");p.src=this.settings.avatarUrl,p.alt="",this.launcherEl.appendChild(p)}else{let p=m("chat");p.classList.add("bb-l-chat"),this.launcherEl.appendChild(p)}let L=m("close");L.classList.add("bb-l-close"),this.launcherEl.appendChild(L),this.launcherEl.addEventListener("click",()=>this.opened?this.close():this.open()),a.appendChild(this.launcherEl),e.appendChild(this.host)}iconButton(e,n,t){let i=document.createElement("button");return i.className="bb-iconbtn",i.title=n,i.setAttribute("aria-label",n),i.appendChild(m(e)),i.addEventListener("click",t),i}syncSendState(){this.sendBtn&&(this.sendBtn.disabled=!(this.inputEl?.value??"").trim()||this.busy)}open(){if(!this.windowEl||this.opened)return;this.opened=!0;let e=this.root?.querySelector(".bb");e?.classList.add("open");let n=(this.settings.displayMode??"floating")==="full_screen"||window.innerWidth<=520;e?.classList.toggle("big",n||this.expanded),this.syncBodyScroll(),this.messagesEl&&this.messagesEl.childElementCount===0&&this.primeThread(),this.inputEl?.focus()}close(){this.opened=!1;let e=this.root?.querySelector(".bb");e?.classList.remove("open"),this.expanded||e?.classList.remove("big"),this.syncBodyScroll()}syncBodyScroll(){let e=this.opened&&!!this.root?.querySelector(".bb")?.classList.contains("big");e&&this.prevBodyOverflow===null?(this.prevBodyOverflow=document.body.style.overflow||"",document.body.style.overflow="hidden"):!e&&this.prevBodyOverflow!==null&&(document.body.style.overflow=this.prevBodyOverflow,this.prevBodyOverflow=null)}toggleExpand(){if(this.expanded=!this.expanded,this.root?.querySelector(".bb")?.classList.toggle("expanded",this.expanded),this.root?.querySelector(".bb")?.classList.toggle("big",this.expanded),this.syncBodyScroll(),this.expandBtn){this.expandBtn.replaceChildren(m(this.expanded?"collapse":"expand"));let e=this.t(this.expanded?"collapse":"expand");this.expandBtn.title=e,this.expandBtn.setAttribute("aria-label",e)}}async primeThread(){if(this.conversationId&&this.sessionId)try{let e=await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/conversations/${encodeURIComponent(this.conversationId)}?limit=50`,{headers:{"X-Bot-Session":this.sessionId}});if(e.ok){let n=await e.json();for(let t of n.data){let i=this.appendMessage(t.role==="assistant"?"bot":"user","");U(i,t.content)}if(n.data.length>0){this.chipsEl?.remove();return}}else this.conversationId=null,this.sessionId=null,this.persistIds()}catch{}if(this.settings.greeting){let e=this.appendMessage("bot","");U(e,this.settings.greeting)}}async send(e){let n=e.trim();if(!n||this.busy)return;this.busy=!0,this.inputEl&&(this.inputEl.value=""),this.syncSendState(),this.chipsEl?.remove(),this.appendMessage("user",n);let t=this.appendTyping();this.pendingText="",this.cardsRow=null,this.cardIds=new Set;let i=null;try{let o=await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/chat`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:n,turnId:P("trn_"),...this.conversationId?{conversationId:this.conversationId}:{},...this.sessionId?{anonymousSessionId:this.sessionId}:{},locale:this.locale})});if(!o.ok||!o.body)throw new Error(`chat failed (${o.status})`);let r=o.body.getReader(),d=new TextDecoder,a="";for(;;){let{value:l,done:s}=await r.read();if(s)break;a+=d.decode(l,{stream:!0});let h;for(;(h=a.indexOf(`
+
+`))>=0;){let u=a.slice(0,h);if(a=a.slice(h+2),!u.startsWith("data: "))continue;let g;try{g=JSON.parse(u.slice(6))}catch{continue}i=this.handleFrame(g,t,i)}}i&&this.pendingText&&U(i,this.pendingText)}catch{this.appendMessage("err",this.t("error"))}finally{t.remove(),this.busy=!1,this.syncSendState()}}handleFrame(e,n,t){switch(e.type){case"connected":return this.conversationId=e.conversationId||this.conversationId,this.sessionId=e.anonymousSessionId||this.sessionId,this.persistIds(),t;case"token":return t||(n.remove(),t=this.appendMessage("bot","")),this.pendingText+=e.text,t.textContent=this.pendingText,this.scrollDown(),t;case"tool":return n.classList.toggle("searching",e.status==="running"),t;case"card":return this.appendCard(e.card),t;case"action":return this.handleAction(e),t;case"error":return this.appendMessage("err",e.message||this.t("error")),t;case"done":default:return t}}appendCard(e){if(!this.messagesEl||this.cardIds.has(e.productId))return;if(this.cardIds.add(e.productId),!this.cardsRow){let s=document.createElement("div");s.className="bb-shelf";let h=document.createElement("div");h.className="bb-shelf-cap",h.textContent=this.t("results"),this.cardsRow=document.createElement("div"),this.cardsRow.className="bb-cards",s.appendChild(h),s.appendChild(this.cardsRow),this.messagesEl.appendChild(s)}let n=T(e.url)?e.url:null,t=document.createElement("div");t.className="bb-card";let i=()=>{this.beacon(e.botRef),n&&(window.location.href=n)},o=document.createElement("span");if(o.className="bb-card-img",e.imageUrl&&T(e.imageUrl)){let s=document.createElement("img");s.src=e.imageUrl,s.alt="",s.loading="lazy",o.appendChild(s)}else o.appendChild(m("cart"));o.addEventListener("click",i),t.appendChild(o);let r=document.createElement("span");r.className="bb-card-body";let d=document.createElement("span");d.className="bb-card-title",d.textContent=e.title,d.addEventListener("click",i);let a=document.createElement("span");a.className="bb-card-price",a.textContent=e.price.formatted,r.appendChild(d),r.appendChild(a);let l=document.createElement("span");if(l.className="bb-card-cta",e.requiresOptions){let s=document.createElement("button");s.className="bb-btn bb-btn-add",s.setAttribute("aria-label",this.t("addToCart")),s.appendChild(m("cart")),e.variants?.length?s.addEventListener("click",()=>this.togglePicker(r,e,o)):s.addEventListener("click",i),l.appendChild(s)}else{let s=document.createElement("button");s.className="bb-btn bb-btn-add",s.appendChild(m("cart")),s.appendChild(document.createTextNode(this.t("addToCart"))),s.addEventListener("click",()=>void this.addToCart(e,s));let h=document.createElement("button");h.className="bb-btn bb-btn-ghost",h.appendChild(document.createTextNode(this.t("view"))),h.addEventListener("click",i),l.appendChild(s),l.appendChild(h)}r.appendChild(l),t.appendChild(r),this.cardsRow.appendChild(t),this.scrollDown()}togglePicker(e,n,t){let i=e.parentElement,o=e.querySelector(".bb-pick");if(o){o.remove(),i?.classList.remove("picking");return}i?.classList.add("picking");let r=n.variants??[],d=[];for(let u of r)for(let g of Object.keys(u.attributes))d.includes(g)||d.push(g);let a={},l=document.createElement("span");l.className="bb-pick";let s=()=>r.find(u=>d.every(g=>a[g]&&u.attributes[g]===a[g]))??null,h=()=>{l.replaceChildren();for(let c of d){let C=document.createElement("span");C.className="bb-pick-key",C.textContent=c;let E=document.createElement("span");E.className="bb-pick-vals";let k=new Set;for(let I of r){let f=I.attributes[c];if(!f||k.has(f))continue;k.add(f);let B=r.some(L=>L.attributes[c]===f&&d.every(p=>p===c||!a[p]||L.attributes[p]===a[p])),x=document.createElement("button");x.className=`bb-chipv${a[c]===f?" sel":""}${B?"":" off"}`,x.textContent=f,x.addEventListener("click",()=>{a[c]===f?delete a[c]:a[c]=f,h()}),E.appendChild(x)}l.appendChild(C),l.appendChild(E)}let u=document.createElement("button");u.className="bb-pick-close",u.setAttribute("aria-label",this.t("close")),u.appendChild(m("close")),u.addEventListener("click",()=>{l.remove(),i?.classList.remove("picking")}),l.appendChild(u);let g=s(),w=document.createElement("span");w.className="bb-pick-foot";let v=document.createElement("span");v.className="bb-pick-price",v.textContent=g?g.price.formatted:"";let y=document.createElement("button");if(y.className="bb-btn bb-btn-add",y.appendChild(m("cart")),y.appendChild(document.createTextNode(this.t("addToCart"))),g||(y.disabled=!0),y.addEventListener("click",()=>{let c=s();c&&this.addToCart(n,y,c.id)}),w.appendChild(v),w.appendChild(y),l.appendChild(w),g?.imageUrl&&T(g.imageUrl)){let c=t.querySelector("img");c&&(c.src=g.imageUrl)}this.scrollDown()};h(),e.appendChild(l),this.scrollDown()}async addToCart(e,n,t){this.beacon(e.botRef),n.dataset.state="busy",await this.dispatchAdd(e.productId,t??null)?(n.dataset.state="done",n.replaceChildren(m("check"),document.createTextNode(this.t("added"))),setTimeout(()=>{!this.destroyed&&n.isConnected&&(delete n.dataset.state,n.replaceChildren(m("cart"),document.createTextNode(this.t("addToCart"))))},2200)):(delete n.dataset.state,T(e.url)&&(window.location.href=e.url))}async dispatchAdd(e,n){try{if(this.onAddToCart)return await this.onAddToCart({productId:e,variantId:n,quantity:1})!==!1;let t=new CustomEvent("brainerce:bot:add-to-cart",{detail:{productId:e,variantId:n,quantity:1,connectionId:this.connectionId},cancelable:!0,bubbles:!0,composed:!0});return!window.dispatchEvent(t)}catch{return!1}}async handleAction(e){if(e.action!=="add_to_cart")return;e.botRef&&this.beacon(e.botRef),await this.dispatchAdd(e.productId,e.variantId)||this.appendMessage("err",this.t("addFailed"))}beacon(e){try{navigator.sendBeacon?.(`${this.baseUrl}/api/storefront-bot/attribution/click`,new Blob([JSON.stringify({botRef:e})],{type:"application/json"}))}catch{}}toggleEscalation(){this.root?.querySelector(".bb-esc")?.classList.toggle("open")}async submitEscalation(e){let n=e.querySelector('input[name="email"]')?.value.trim(),t=e.querySelector('textarea[name="message"]')?.value.trim();if(!(!n||!t||!this.conversationId||!this.sessionId))try{if((await fetch(`${this.baseUrl}/api/storefront-bot/${encodeURIComponent(this.connectionId)}/escalate`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:n,message:t,conversationId:this.conversationId,anonymousSessionId:this.sessionId,locale:this.locale})})).ok){let o=document.createElement("span");o.className="bb-esc-note",o.appendChild(m("check")),o.appendChild(document.createTextNode(this.t("sent"))),e.replaceChildren(o)}}catch{}}appendMessage(e,n){let t=document.createElement("div");return t.className=`bb-msg ${e}`,t.setAttribute("dir","auto"),t.textContent=n,this.messagesEl?.appendChild(t),this.scrollDown(),t}appendTyping(){let e=document.createElement("div");e.className="bb-typing";let n=document.createElement("span");n.className="bb-dots";for(let i=0;i<3;i++)n.appendChild(document.createElement("i"));let t=document.createElement("span");return t.className="bb-tool",t.textContent=this.t("searching"),e.appendChild(n),e.appendChild(t),this.messagesEl?.appendChild(e),this.scrollDown(),e}scrollDown(){this.messagesEl&&(this.messagesEl.scrollTop=this.messagesEl.scrollHeight)}};(()=>{let b=document.currentScript,e=b?.dataset.connectionId;if(!e){console.warn("[BrainerceBot] missing data-connection-id on the bot.js script tag");return}let n=b?.dataset.apiBase||void 0,t=()=>void M.mount({connectionId:e,baseUrl:n});document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t,{once:!0}):t()})();})();

package/dist/bot/index.d.mts

@@ -11,6 +11,10 @@
  * anonymousSessionId (localStorage). The server re-validates it on every call
  * and silently replaces it when stale — the widget always adopts whatever ids
  * arrive on the `connected` frame.
+ *
+ * Rendering safety: server/model strings NEVER pass through innerHTML. Text
+ * renders via textContent; the markdown-lite renderer builds DOM with
+ * createElement only; URLs pass the isSafeUrl gate before reaching href/src.
  */
 interface BrainerceBotOptions {
     /** Public vc_* connection id of the storefront. */
@@ -19,24 +23,43 @@ interface BrainerceBotOptions {
     baseUrl?: string;
     /** Mount target. Defaults to document.body. */
     target?: HTMLElement;
+    /**
+     * Host-provided add-to-cart. When present the widget calls it instead of
+     * navigating, so the host's own cart state/UI stays in sync. Return (or
+     * resolve) false to signal failure — the widget then falls back to the PDP.
+     */
+    onAddToCart?: (item: {
+        productId: string;
+        variantId?: string | null;
+        quantity: number;
+    }) => boolean | Promise<boolean>;
 }
 declare class BrainerceBot {
     private readonly connectionId;
     private readonly baseUrl;
     private readonly storageKey;
+    private readonly onAddToCart?;
     private host?;
     private root?;
     private windowEl?;
     private messagesEl?;
     private inputEl?;
+    private sendBtn?;
     private chipsEl?;
+    private launcherEl?;
+    private expandBtn?;
     private settings;
     private locale;
     private sessionId;
     private conversationId;
     private busy;
     private opened;
+    private expanded;
     private destroyed;
+    /** Per-turn streaming state. */
+    private pendingText;
+    private cardsRow;
+    private cardIds;
     private constructor();
     /** Boot the widget. Resolves to null when the bot is disabled server-side. */
     static mount(options: BrainerceBotOptions): Promise<BrainerceBot | null>;
@@ -45,16 +68,49 @@ declare class BrainerceBot {
     private t;
     private restoreIds;
     private persistIds;
+    private css;
     private render;
+    private iconButton;
+    private syncSendState;
     private open;
     private close;
+    /**
+     * The large dialog owns the screen — the page behind must not scroll.
+     * Locks <body> while a big surface is open; restores on close/collapse.
+     */
+    private prevBodyOverflow;
+    private syncBodyScroll;
+    private toggleExpand;
     /** First open: restore the server thread, or show the greeting. */
     private primeThread;
     private send;
     private handleFrame;
+    private appendCard;
+    /**
+     * In-card variant picker: one chip-row per attribute; a complete selection
+     * resolves to a variantId and becomes a real add-to-cart. Variant image and
+     * price update live. Built entirely with createElement (no innerHTML).
+     */
+    private togglePicker;
+    /**
+     * Add-to-cart resolution chain — must never be a dead button:
+     * 1. host `onAddToCart` option (scaffolded stores: syncs their cart UI)
+     * 2. cancelable `brainerce:bot:add-to-cart` CustomEvent (custom embeds)
+     * 3. fallback: navigate to the product page
+     */
+    private addToCart;
+    /**
+     * The host-cart chain shared by card buttons and bot-initiated actions:
+     * onAddToCart option -> cancelable CustomEvent. Returns whether a host
+     * took the add.
+     */
+    private dispatchAdd;
+    /** Bot-initiated widget actions (the model called the addToCart tool). */
+    private handleAction;
+    /** The durable conversion signal — fire-and-forget, never blocks. */
+    private beacon;
     private toggleEscalation;
     private submitEscalation;
-    private appendCard;
     private appendMessage;
     private appendTyping;
     private scrollDown;