copilot-chat-widget 0.1.32 → 0.1.33

package/dist/index.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k="http://localhost:3000",w=64,C=720,E=({iframeUrl:h,launcherIcon:u})=>{const d=document.querySelector("[data-copilot-widget-root]");d&&d.remove();const g=s=>{const o=document.querySelector("[data-copilot-checkout-toast]");o&&o.remove();const r=document.createElement("div");r.setAttribute("data-copilot-checkout-toast","true"),r.innerText=s,Object.assign(r.style,{position:"fixed",top:"20px",left:"50%",transform:"translateX(-50%)",padding:"12px 16px",background:"#0f172a",color:"white",borderRadius:"12px",boxShadow:"0 8px 24px rgba(0,0,0,0.25)",zIndex:2147483647,fontSize:"14px",fontWeight:"600",maxWidth:"420px",lineHeight:"1.4",textAlign:"center"}),document.body.appendChild(r),setTimeout(()=>{r.remove()},4500)},c=document.createElement("div");c.setAttribute("data-copilot-widget-root","true");const n=c.attachShadow({mode:"open"});document.body.appendChild(c);const t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Open Copilot chat"),t.innerHTML=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N="http://localhost:3000",k=64,T=720,$=({iframeUrl:f,launcherIcon:x})=>{const u=document.querySelector("[data-copilot-widget-root]");u&&u.remove();const y=t=>{const e=document.querySelector("[data-copilot-checkout-toast]");e&&e.remove();const n=document.createElement("div");n.setAttribute("data-copilot-checkout-toast","true"),n.innerText=t,Object.assign(n.style,{position:"fixed",top:"20px",left:"50%",transform:"translateX(-50%)",padding:"12px 16px",background:"#0f172a",color:"white",borderRadius:"12px",boxShadow:"0 8px 24px rgba(0,0,0,0.25)",zIndex:2147483647,fontSize:"14px",fontWeight:"600",maxWidth:"420px",lineHeight:"1.4",textAlign:"center"}),document.body.appendChild(n),setTimeout(()=>{n.remove()},4500)},w=document.createElement("div");w.setAttribute("data-copilot-widget-root","true");const a=w.attachShadow({mode:"open"});document.body.appendChild(w);const o=document.createElement("button");o.type="button",o.setAttribute("aria-label","Open Copilot chat"),o.innerHTML=`
       <img
-        src="${u}"
+        src="${x}"
         alt="Copilot chat launcher"
         style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
       />
-    `,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${w}px`,height:`${w}px`,borderRadius:"50%",border:"none",background:"linear-gradient(135deg, #0078ff, #00c6ff)",color:"white",cursor:"pointer",zIndex:999998,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 6px 14px rgba(0,0,0,0.25)",transition:"all 0.25s ease"}),t.onmouseover=()=>{t.style.transform="scale(1.12)",t.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},t.onmouseout=()=>{t.style.transform="scale(1)",t.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const e=document.createElement("div");e.setAttribute("data-copilot-widget-root","true"),Object.assign(e.style,{display:"none",position:"fixed",bottom:`${w+36}px`,right:"24px",zIndex:"999999",transformOrigin:"bottom right",transform:"scale(0.8) translateY(20px)",opacity:"0",transition:"all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"});const l=document.createElement("div"),f=document.createElement("div"),x=document.createElement("div");Object.assign(l.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(f.style,{position:"absolute",bottom:"0",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"15px solid transparent",borderRight:"15px solid transparent",borderTop:"15px solid rgba(15,23,42,0.1)"}),Object.assign(x.style,{position:"absolute",bottom:"2px",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"13px solid transparent",borderRight:"13px solid transparent",borderTop:"13px solid white",boxShadow:"0 6px 16px rgba(15,23,42,0.12)",borderRadius:"2px"}),l.appendChild(f),l.appendChild(x);const p=document.createElement("div");Object.assign(p.style,{width:`${C}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(C,Math.max(320,window.innerHeight-140))}px`,maxHeight:"calc(100vh - 150px)",borderRadius:"20px",background:"white",border:"1px solid rgba(15,23,42,0.12)",boxShadow:"0 18px 45px rgba(15,23,42,0.16)",overflow:"hidden"}),n.appendChild(p);const i=document.createElement("iframe");i.src=h,i.title="Copilot chat widget",i.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",i.setAttribute("scrolling","no"),Object.assign(i.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),n.appendChild(p),p.appendChild(i),e.appendChild(l),e.appendChild(p),document.body.appendChild(t),document.body.appendChild(e);let a=!1;const m=()=>{a&&(a=!1,e.style.opacity="0",e.style.transform="scale(0.8) translateY(20px)",l.style.display="none",setTimeout(()=>{e.style.display="none"},250),t.style.transform="scale(1)")},v=s=>{const{data:o,source:r}=s||{};if(o?.type){if(o.type==="CART_CHECKOUT"&&r===i.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",o),g("Checkout message received from chat widget. Check console for payload.");return}if(o.type==="WIDGET_READY"&&r===i.contentWindow){i.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}o.type==="CHAT_CLOSED"&&m()}};window.addEventListener("message",v),t.onclick=s=>{s.stopPropagation(),a=!a,a?(e.style.display="block",l.style.display="block",requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1) translateY(0)"})):m()},document.addEventListener("click",s=>{const o=s.target;o&&a&&!e.contains(o)&&o!==t&&m()});const b={close:m,open:()=>{a||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=b.close,window.CopilotChat.open=b.open,window.CopilotChat.controls=b,b};async function y(h={}){if(typeof window>"u"||typeof document>"u")return null;const u=window.CopilotChatConfig||{},d=h.token||u.token||typeof window<"u"&&window.localStorage?.getItem("copilotChatToken")||null;if(!d)return console.error("[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."),null;const g=h.baseUrl||u.baseUrl||k,c=`${g.replace(/\/$/,"")}/api/chat-widget/config?token=${encodeURIComponent(d)}`;try{const n=await fetch(c,{credentials:"omit",mode:"cors"});if(!n.ok)throw new Error(`Server responded with ${n.status}`);const t=await n.json();if(!t?.iframeUrl||!t?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.token=d,window.CopilotChat.baseUrl=g,E({iframeUrl:t.iframeUrl,launcherIcon:t.launcherIcon})}catch(n){return console.error("[CopilotChat] Error during widget bootstrap:",n instanceof Error?n.message:n),null}}exports.default=y;exports.loadCopilotChatWidget=y;
+    `,Object.assign(o.style,{position:"fixed",bottom:"24px",right:"24px",width:`${k}px`,height:`${k}px`,borderRadius:"50%",border:"none",background:"linear-gradient(135deg, #0078ff, #00c6ff)",color:"white",cursor:"pointer",zIndex:999998,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 6px 14px rgba(0,0,0,0.25)",transition:"all 0.25s ease"}),o.onmouseover=()=>{o.style.transform="scale(1.12)",o.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},o.onmouseout=()=>{o.style.transform="scale(1)",o.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const i=document.createElement("div");i.setAttribute("data-copilot-widget-root","true"),Object.assign(i.style,{display:"none",position:"fixed",bottom:`${k+36}px`,right:"24px",zIndex:"999999",transformOrigin:"bottom right",transform:"scale(0.8) translateY(20px)",opacity:"0",transition:"all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"});const g=document.createElement("div"),E=document.createElement("div"),v=document.createElement("div");Object.assign(g.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(E.style,{position:"absolute",bottom:"0",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"15px solid transparent",borderRight:"15px solid transparent",borderTop:"15px solid rgba(15,23,42,0.1)"}),Object.assign(v.style,{position:"absolute",bottom:"2px",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"13px solid transparent",borderRight:"13px solid transparent",borderTop:"13px solid white",boxShadow:"0 6px 16px rgba(15,23,42,0.12)",borderRadius:"2px"}),g.appendChild(E),g.appendChild(v);const b=document.createElement("div");Object.assign(b.style,{width:`${T}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(T,Math.max(320,window.innerHeight-140))}px`,maxHeight:"calc(100vh - 150px)",borderRadius:"20px",background:"white",border:"1px solid rgba(15,23,42,0.12)",boxShadow:"0 18px 45px rgba(15,23,42,0.16)",overflow:"hidden"}),a.appendChild(b);const r=document.createElement("iframe");r.src=f,r.title="Copilot chat widget",r.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",r.setAttribute("scrolling","no"),Object.assign(r.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),a.appendChild(b),b.appendChild(r),i.appendChild(g),i.appendChild(b),document.body.appendChild(o),document.body.appendChild(i);let d=!1;const C=()=>{d&&(d=!1,i.style.opacity="0",i.style.transform="scale(0.8) translateY(20px)",g.style.display="none",setTimeout(()=>{i.style.display="none"},250),o.style.transform="scale(1)")},P=(t,e=null)=>{if(!t)return e;try{return JSON.parse(t)}catch{return e}},A=t=>String(t).toLowerCase().trim().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,""),s=(t,e)=>({value:t,currency:e,__typename:"Money"}),R=(t,e)=>({maximum_price:{discount:{amount_off:0,percent_off:0,__typename:"ProductDiscount"},final_price:s(t,e),fixed_product_taxes:[],regular_price:s(t,e),__typename:"ProductPrice"},minimum_price:{discount:{amount_off:0,percent_off:0,__typename:"ProductDiscount"},final_price:s(t,e),fixed_product_taxes:[],regular_price:s(t,e),__typename:"ProductPrice"},__typename:"PriceRange"}),W=(t,e)=>{const n=Number(t?.quantity||0),m=Number(t?.price||t?.unitPrice||0),c=m*n,p=t?.name||"Chat widget product",S=t?.image||t?.thumbnail||"",h=Number(t?.productId||t?.id||0),l=String(t?.sku||t?.id||h||"chat-widget");return{id:String(t?.id||l||h||Date.now()),quantity:n,product:{id:h||Date.now(),sku:l,name:p,url_key:t?.url_key||A(p),url_suffix:".html",stock_status:"IN_STOCK",brand:null,has_gift:null,price_range:R(m,e),thumbnail:{disabled:null,label:p,position:null,url:S,__typename:"ProductImage"},small_image:{disabled:null,label:p,position:null,url:S,__typename:"ProductImage"},categories:[],special_from_date:null,special_price:null,special_to_date:null,__typename:"SimpleProduct"},prices:{discounts:null,price:s(m,e),row_total:s(c,e),row_total_including_tax:s(c,e),total_item_discount:s(0,e),__typename:"CartItemPrices"},__typename:"SimpleCartItem",itemTotal:c}},U=t=>{const e=P(window.localStorage.getItem("web-cart")),n=Array.isArray(t?.cart)?t.cart:[],m=t?.currency||"VND",c=n.map(l=>W(l,m)),p=c.reduce((l,I)=>l+(I.quantity||0),0),S=Number(t?.totalPrice||0)||c.reduce((l,I)=>l+(I.itemTotal||0),0),h={totalItems:p,total:s(S,m),id:e?.id||`chat-widget-${Date.now()}`,is_virtual:!1,shipping_addresses:Array.isArray(e?.shipping_addresses)?e.shipping_addresses:[],total_quantity:p,items:c,isCartIdLoading:!1,isFetchingCart:!1};window.localStorage.setItem("web-cart",JSON.stringify(h)),window.dispatchEvent(new StorageEvent("storage",{key:"web-cart",newValue:JSON.stringify(h)}))},j=t=>{const{data:e,source:n}=t||{};if(e?.type){if(e.type==="CART_CHECKOUT"&&n===r.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",e),U(e?.data),y("Cart updated on KidsPlaza demo. Open cart to see changes.");return}if(e.type==="WIDGET_READY"&&n===r.contentWindow){r.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}e.type==="CHAT_CLOSED"&&C()}};window.addEventListener("message",j),o.onclick=t=>{t.stopPropagation(),d=!d,d?(i.style.display="block",g.style.display="block",requestAnimationFrame(()=>{i.style.opacity="1",i.style.transform="scale(1) translateY(0)"})):C()},document.addEventListener("click",t=>{const e=t.target;e&&d&&!i.contains(e)&&e!==o&&C()});const _={close:C,open:()=>{d||o.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=_.close,window.CopilotChat.open=_.open,window.CopilotChat.controls=_,_};async function O(f={}){if(typeof window>"u"||typeof document>"u")return null;const x=window.CopilotChatConfig||{},u=f.token||x.token||typeof window<"u"&&window.localStorage?.getItem("copilotChatToken")||null;if(!u)return console.error("[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."),null;const y=f.baseUrl||x.baseUrl||N,w=`${y.replace(/\/$/,"")}/api/chat-widget/config?token=${encodeURIComponent(u)}`;try{const a=await fetch(w,{credentials:"omit",mode:"cors"});if(!a.ok)throw new Error(`Server responded with ${a.status}`);const o=await a.json();if(!o?.iframeUrl||!o?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.token=u,window.CopilotChat.baseUrl=y,$({iframeUrl:o.iframeUrl,launcherIcon:o.launcherIcon})}catch(a){return console.error("[CopilotChat] Error during widget bootstrap:",a instanceof Error?a.message:a),null}}exports.default=O;exports.loadCopilotChatWidget=O;

package/dist/index.mjs

@@ -1,12 +1,12 @@
-const C = "http://localhost:3000";
-const y = ({ iframeUrl: h, launcherIcon: u }) => {
-  const d = document.querySelector("[data-copilot-widget-root]");
-  d && d.remove();
-  const g = (s) => {
-    const o = document.querySelector("[data-copilot-checkout-toast]");
-    o && o.remove();
-    const r = document.createElement("div");
-    r.setAttribute("data-copilot-checkout-toast", "true"), r.innerText = s, Object.assign(r.style, {
+const U = "http://localhost:3000";
+const N = ({ iframeUrl: b, launcherIcon: x }) => {
+  const u = document.querySelector("[data-copilot-widget-root]");
+  u && u.remove();
+  const y = (t) => {
+    const e = document.querySelector("[data-copilot-checkout-toast]");
+    e && e.remove();
+    const n = document.createElement("div");
+    n.setAttribute("data-copilot-checkout-toast", "true"), n.innerText = t, Object.assign(n.style, {
       position: "fixed",
       top: "20px",
       left: "50%",
@@ -22,21 +22,21 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
       maxWidth: "420px",
       lineHeight: "1.4",
       textAlign: "center"
-    }), document.body.appendChild(r), setTimeout(() => {
-      r.remove();
+    }), document.body.appendChild(n), setTimeout(() => {
+      n.remove();
     }, 4500);
-  }, c = document.createElement("div");
-  c.setAttribute("data-copilot-widget-root", "true");
-  const n = c.attachShadow({ mode: "open" });
-  document.body.appendChild(c);
-  const t = document.createElement("button");
-  t.type = "button", t.setAttribute("aria-label", "Open Copilot chat"), t.innerHTML = `
+  }, w = document.createElement("div");
+  w.setAttribute("data-copilot-widget-root", "true");
+  const a = w.attachShadow({ mode: "open" });
+  document.body.appendChild(w);
+  const o = document.createElement("button");
+  o.type = "button", o.setAttribute("aria-label", "Open Copilot chat"), o.innerHTML = `
       <img
-        src="${u}"
+        src="${x}"
         alt="Copilot chat launcher"
         style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
       />
-    `, Object.assign(t.style, {
+    `, Object.assign(o.style, {
     position: "fixed",
     bottom: "24px",
     right: "24px",
@@ -53,13 +53,13 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
     justifyContent: "center",
     boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
     transition: "all 0.25s ease"
-  }), t.onmouseover = () => {
-    t.style.transform = "scale(1.12)", t.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
-  }, t.onmouseout = () => {
-    t.style.transform = "scale(1)", t.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
+  }), o.onmouseover = () => {
+    o.style.transform = "scale(1.12)", o.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
+  }, o.onmouseout = () => {
+    o.style.transform = "scale(1)", o.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
   };
-  const e = document.createElement("div");
-  e.setAttribute("data-copilot-widget-root", "true"), Object.assign(e.style, {
+  const i = document.createElement("div");
+  i.setAttribute("data-copilot-widget-root", "true"), Object.assign(i.style, {
     display: "none",
     position: "fixed",
     bottom: "100px",
@@ -70,8 +70,8 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
     opacity: "0",
     transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"
   });
-  const l = document.createElement("div"), b = document.createElement("div"), f = document.createElement("div");
-  Object.assign(l.style, {
+  const m = document.createElement("div"), E = document.createElement("div"), k = document.createElement("div");
+  Object.assign(m.style, {
     position: "absolute",
     bottom: "-14px",
     right: "28px",
@@ -80,7 +80,7 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
     pointerEvents: "none",
     display: "none",
     zIndex: "1"
-  }), Object.assign(b.style, {
+  }), Object.assign(E.style, {
     position: "absolute",
     bottom: "0",
     left: "0",
@@ -91,7 +91,7 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
     borderLeft: "15px solid transparent",
     borderRight: "15px solid transparent",
     borderTop: "15px solid rgba(15,23,42,0.1)"
-  }), Object.assign(f.style, {
+  }), Object.assign(k.style, {
     position: "absolute",
     bottom: "2px",
     left: "0",
@@ -104,9 +104,9 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
     borderTop: "13px solid white",
     boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
     borderRadius: "2px"
-  }), l.appendChild(b), l.appendChild(f);
-  const p = document.createElement("div");
-  Object.assign(p.style, {
+  }), m.appendChild(E), m.appendChild(k);
+  const f = document.createElement("div");
+  Object.assign(f.style, {
     width: "720px",
     maxWidth: "calc(100vw - 48px)",
     height: `${Math.min(720, Math.max(320, window.innerHeight - 140))}px`,
@@ -116,84 +116,175 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
     border: "1px solid rgba(15,23,42,0.12)",
     boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
     overflow: "hidden"
-  }), n.appendChild(p);
-  const i = document.createElement("iframe");
-  i.src = h, i.title = "Copilot chat widget", i.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", i.setAttribute("scrolling", "no"), Object.assign(i.style, {
+  }), a.appendChild(f);
+  const r = document.createElement("iframe");
+  r.src = b, r.title = "Copilot chat widget", r.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", r.setAttribute("scrolling", "no"), Object.assign(r.style, {
     width: "100%",
     height: "100%",
     border: "none",
     display: "block",
     background: "transparent",
     overflow: "hidden"
-  }), n.appendChild(p), p.appendChild(i), e.appendChild(l), e.appendChild(p), document.body.appendChild(t), document.body.appendChild(e);
-  let a = !1;
-  const m = () => {
-    a && (a = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)", l.style.display = "none", setTimeout(() => {
-      e.style.display = "none";
-    }, 250), t.style.transform = "scale(1)");
-  }, x = (s) => {
-    const { data: o, source: r } = s || {};
-    if (o?.type) {
-      if (o.type === "CART_CHECKOUT" && r === i.contentWindow) {
-        console.log("[CopilotChat] Received checkout payload from widget:", o), g("Checkout message received from chat widget. Check console for payload.");
+  }), a.appendChild(f), f.appendChild(r), i.appendChild(m), i.appendChild(f), document.body.appendChild(o), document.body.appendChild(i);
+  let d = !1;
+  const _ = () => {
+    d && (d = !1, i.style.opacity = "0", i.style.transform = "scale(0.8) translateY(20px)", m.style.display = "none", setTimeout(() => {
+      i.style.display = "none";
+    }, 250), o.style.transform = "scale(1)");
+  }, T = (t, e = null) => {
+    if (!t) return e;
+    try {
+      return JSON.parse(t);
+    } catch {
+      return e;
+    }
+  }, v = (t) => String(t).toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""), s = (t, e) => ({
+    value: t,
+    currency: e,
+    __typename: "Money"
+  }), O = (t, e) => ({
+    maximum_price: {
+      discount: { amount_off: 0, percent_off: 0, __typename: "ProductDiscount" },
+      final_price: s(t, e),
+      fixed_product_taxes: [],
+      regular_price: s(t, e),
+      __typename: "ProductPrice"
+    },
+    minimum_price: {
+      discount: { amount_off: 0, percent_off: 0, __typename: "ProductDiscount" },
+      final_price: s(t, e),
+      fixed_product_taxes: [],
+      regular_price: s(t, e),
+      __typename: "ProductPrice"
+    },
+    __typename: "PriceRange"
+  }), P = (t, e) => {
+    const n = Number(t?.quantity || 0), g = Number(t?.price || t?.unitPrice || 0), c = g * n, p = t?.name || "Chat widget product", I = t?.image || t?.thumbnail || "", h = Number(t?.productId || t?.id || 0), l = String(t?.sku || t?.id || h || "chat-widget");
+    return {
+      id: String(t?.id || l || h || Date.now()),
+      quantity: n,
+      product: {
+        id: h || Date.now(),
+        sku: l,
+        name: p,
+        url_key: t?.url_key || v(p),
+        url_suffix: ".html",
+        stock_status: "IN_STOCK",
+        brand: null,
+        has_gift: null,
+        price_range: O(g, e),
+        thumbnail: {
+          disabled: null,
+          label: p,
+          position: null,
+          url: I,
+          __typename: "ProductImage"
+        },
+        small_image: {
+          disabled: null,
+          label: p,
+          position: null,
+          url: I,
+          __typename: "ProductImage"
+        },
+        categories: [],
+        special_from_date: null,
+        special_price: null,
+        special_to_date: null,
+        __typename: "SimpleProduct"
+      },
+      prices: {
+        discounts: null,
+        price: s(g, e),
+        row_total: s(c, e),
+        row_total_including_tax: s(c, e),
+        total_item_discount: s(0, e),
+        __typename: "CartItemPrices"
+      },
+      __typename: "SimpleCartItem",
+      itemTotal: c
+    };
+  }, A = (t) => {
+    const e = T(window.localStorage.getItem("web-cart")), n = Array.isArray(t?.cart) ? t.cart : [], g = t?.currency || "VND", c = n.map((l) => P(l, g)), p = c.reduce((l, S) => l + (S.quantity || 0), 0), I = Number(t?.totalPrice || 0) || c.reduce((l, S) => l + (S.itemTotal || 0), 0), h = {
+      totalItems: p,
+      total: s(I, g),
+      id: e?.id || `chat-widget-${Date.now()}`,
+      is_virtual: !1,
+      shipping_addresses: Array.isArray(e?.shipping_addresses) ? e.shipping_addresses : [],
+      total_quantity: p,
+      items: c,
+      isCartIdLoading: !1,
+      isFetchingCart: !1
+    };
+    window.localStorage.setItem("web-cart", JSON.stringify(h)), window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: "web-cart",
+        newValue: JSON.stringify(h)
+      })
+    );
+  }, R = (t) => {
+    const { data: e, source: n } = t || {};
+    if (e?.type) {
+      if (e.type === "CART_CHECKOUT" && n === r.contentWindow) {
+        console.log("[CopilotChat] Received checkout payload from widget:", e), A(e?.data), y("Cart updated on KidsPlaza demo. Open cart to see changes.");
         return;
       }
-      if (o.type === "WIDGET_READY" && r === i.contentWindow) {
-        i.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
+      if (e.type === "WIDGET_READY" && n === r.contentWindow) {
+        r.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
         return;
       }
-      o.type === "CHAT_CLOSED" && m();
+      e.type === "CHAT_CLOSED" && _();
     }
   };
-  window.addEventListener("message", x), t.onclick = (s) => {
-    s.stopPropagation(), a = !a, a ? (e.style.display = "block", l.style.display = "block", requestAnimationFrame(() => {
-      e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
-    })) : m();
-  }, document.addEventListener("click", (s) => {
-    const o = s.target;
-    o && a && !e.contains(o) && o !== t && m();
+  window.addEventListener("message", R), o.onclick = (t) => {
+    t.stopPropagation(), d = !d, d ? (i.style.display = "block", m.style.display = "block", requestAnimationFrame(() => {
+      i.style.opacity = "1", i.style.transform = "scale(1) translateY(0)";
+    })) : _();
+  }, document.addEventListener("click", (t) => {
+    const e = t.target;
+    e && d && !i.contains(e) && e !== o && _();
   });
-  const w = {
-    close: m,
+  const C = {
+    close: _,
     open: () => {
-      a || t.click();
+      d || o.click();
     }
   };
-  return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = w.close, window.CopilotChat.open = w.open, window.CopilotChat.controls = w, w;
+  return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = C.close, window.CopilotChat.open = C.open, window.CopilotChat.controls = C, C;
 };
-async function E(h = {}) {
+async function W(b = {}) {
   if (typeof window > "u" || typeof document > "u")
     return null;
-  const u = window.CopilotChatConfig || {}, d = h.token || u.token || typeof window < "u" && window.localStorage?.getItem("copilotChatToken") || null;
-  if (!d)
+  const x = window.CopilotChatConfig || {}, u = b.token || x.token || typeof window < "u" && window.localStorage?.getItem("copilotChatToken") || null;
+  if (!u)
     return console.error(
       "[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
     ), null;
-  const g = h.baseUrl || u.baseUrl || C, c = `${g.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
-    d
+  const y = b.baseUrl || x.baseUrl || U, w = `${y.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
+    u
   )}`;
   try {
-    const n = await fetch(c, {
+    const a = await fetch(w, {
       credentials: "omit",
       mode: "cors"
     });
-    if (!n.ok)
-      throw new Error(`Server responded with ${n.status}`);
-    const t = await n.json();
-    if (!t?.iframeUrl || !t?.launcherIcon)
+    if (!a.ok)
+      throw new Error(`Server responded with ${a.status}`);
+    const o = await a.json();
+    if (!o?.iframeUrl || !o?.launcherIcon)
       throw new Error("Received incomplete widget configuration from server.");
-    return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.token = d, window.CopilotChat.baseUrl = g, y({
-      iframeUrl: t.iframeUrl,
-      launcherIcon: t.launcherIcon
+    return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.token = u, window.CopilotChat.baseUrl = y, N({
+      iframeUrl: o.iframeUrl,
+      launcherIcon: o.launcherIcon
     });
-  } catch (n) {
+  } catch (a) {
     return console.error(
       "[CopilotChat] Error during widget bootstrap:",
-      n instanceof Error ? n.message : n
+      a instanceof Error ? a.message : a
     ), null;
   }
 }
 export {
-  E as default,
-  E as loadCopilotChatWidget
+  W as default,
+  W as loadCopilotChatWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-chat-widget",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "Embeddable Copilot chat widget that can be loaded via NPM or a script tag.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/index.js

@@ -191,7 +191,7 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
 
   let isOpen = false;
 
-  const closeChat = () => {
+  const closeChat = () => {
     if (!isOpen) return;
     isOpen = false;
     container.style.opacity = "0";
@@ -201,17 +201,146 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
       container.style.display = "none";
     }, 250);
     btn.style.transform = "scale(1)";
-  };
-
-  const handleWidgetMessage = (event) => {
-    const { data, source } = event || {};
-    if (!data?.type) return;
-
-    if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
-      console.log("[CopilotChat] Received checkout payload from widget:", data);
-      showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
-      return;
-    }
+  };
+
+  const parseJSON = (value, fallback = null) => {
+    if (!value) return fallback;
+    try {
+      return JSON.parse(value);
+    } catch (error) {
+      return fallback;
+    }
+  };
+
+  const slugify = (value) =>
+    String(value || "")
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "");
+
+  const createMoney = (value, currency) => ({
+    value,
+    currency,
+    __typename: "Money",
+  });
+
+  const createPriceRange = (value, currency) => ({
+    maximum_price: {
+      discount: { amount_off: 0, percent_off: 0, __typename: "ProductDiscount" },
+      final_price: createMoney(value, currency),
+      fixed_product_taxes: [],
+      regular_price: createMoney(value, currency),
+      __typename: "ProductPrice",
+    },
+    minimum_price: {
+      discount: { amount_off: 0, percent_off: 0, __typename: "ProductDiscount" },
+      final_price: createMoney(value, currency),
+      fixed_product_taxes: [],
+      regular_price: createMoney(value, currency),
+      __typename: "ProductPrice",
+    },
+    __typename: "PriceRange",
+  });
+
+  const mapToKidsPlazaItem = (item, currency) => {
+    const quantity = Number(item?.quantity || 0);
+    const unitPrice = Number(item?.price || item?.unitPrice || 0);
+    const rowTotalValue = unitPrice * quantity;
+    const name = item?.name || "Chat widget product";
+    const imageUrl = item?.image || item?.thumbnail || "";
+    const productId = Number(item?.productId || item?.id || 0);
+    const productSku = String(item?.sku || item?.id || productId || "chat-widget");
+
+    return {
+      id: String(item?.id || productSku || productId || Date.now()),
+      quantity,
+      product: {
+        id: productId || Date.now(),
+        sku: productSku,
+        name,
+        url_key: item?.url_key || slugify(name),
+        url_suffix: ".html",
+        stock_status: "IN_STOCK",
+        brand: null,
+        has_gift: null,
+        price_range: createPriceRange(unitPrice, currency),
+        thumbnail: {
+          disabled: null,
+          label: name,
+          position: null,
+          url: imageUrl,
+          __typename: "ProductImage",
+        },
+        small_image: {
+          disabled: null,
+          label: name,
+          position: null,
+          url: imageUrl,
+          __typename: "ProductImage",
+        },
+        categories: [],
+        special_from_date: null,
+        special_price: null,
+        special_to_date: null,
+        __typename: "SimpleProduct",
+      },
+      prices: {
+        discounts: null,
+        price: createMoney(unitPrice, currency),
+        row_total: createMoney(rowTotalValue, currency),
+        row_total_including_tax: createMoney(rowTotalValue, currency),
+        total_item_discount: createMoney(0, currency),
+        __typename: "CartItemPrices",
+      },
+      __typename: "SimpleCartItem",
+      itemTotal: rowTotalValue,
+    };
+  };
+
+  const updateKidsPlazaCart = (payload) => {
+    const existingCart = parseJSON(window.localStorage.getItem("web-cart"));
+    const items = Array.isArray(payload?.cart) ? payload.cart : [];
+    const currency = payload?.currency || "VND";
+    const mappedItems = items.map((item) => mapToKidsPlazaItem(item, currency));
+    const totalItems = mappedItems.reduce((sum, item) => sum + (item.quantity || 0), 0);
+    const totalValue =
+      Number(payload?.totalPrice || 0) ||
+      mappedItems.reduce((sum, item) => sum + (item.itemTotal || 0), 0);
+
+    const cart = {
+      totalItems,
+      total: createMoney(totalValue, currency),
+      id: existingCart?.id || `chat-widget-${Date.now()}`,
+      is_virtual: false,
+      shipping_addresses: Array.isArray(existingCart?.shipping_addresses)
+        ? existingCart.shipping_addresses
+        : [],
+      total_quantity: totalItems,
+      items: mappedItems,
+      isCartIdLoading: false,
+      isFetchingCart: false,
+    };
+
+    window.localStorage.setItem("web-cart", JSON.stringify(cart));
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: "web-cart",
+        newValue: JSON.stringify(cart),
+      })
+    );
+  };
+
+  const handleWidgetMessage = (event) => {
+    const { data, source } = event || {};
+    if (!data?.type) return;
+
+    if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
+      console.log("[CopilotChat] Received checkout payload from widget:", data);
+      updateKidsPlazaCart(data?.data);
+      showCheckoutToast("Cart updated on KidsPlaza demo. Open cart to see changes.");
+      return;
+    }
 
     if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
       iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");