copilot-chat-widget 0.1.0 → 0.1.3

package/README.md

@@ -1,39 +1,27 @@
-# Copilot Chat Widget (NPM)
-
-Widget chat Copilot nay co the nhung bang 2 cach:
-
-1. Qua NPM (khuyen nghi cho SPA/Next.js/React/Vue).
-2. Qua the `<script>` (tuong thich nguoc voi cach dang dung hien tai).
-
-## Cai dat
-
-```bash
+# Copilot Chat Widget (NPM)
+
+Widget chat Copilot nay co the nhung bang 2 cach:
+
+1. Qua NPM (khuyen nghi cho SPA/Next.js/React/Vue).
+2. Qua the `<script>` (tuong thich nguoc voi cach dang dung hien tai).
+
+## Cai dat
+
+```bash
 npm install copilot-chat-widget
 # hoac
 yarn add copilot-chat-widget
 ```
 
-## Su dung voi NPM
-
-### Vanilla JS hoac framework bat ky
+## Su dung voi NPM (import)
 
 ```js
 import { loadCopilotChatWidget } from "copilot-chat-widget";
 
-loadCopilotChatWidget({
-  token: "YOUR_WIDGET_TOKEN"
-});
+loadCopilotChatWidget({ token: "YOUR_WIDGET_TOKEN" });
 ```
 
-`loadCopilotChatWidget` se doi DOM san san (DOMContentLoaded) roi tu khoi dong widget. Neu ban muon tu kiem soat, co the goi thang `initCopilotChatWidget` sau khi DOM san:
-
-```js
-import { initCopilotChatWidget } from "copilot-chat-widget";
-
-await initCopilotChatWidget({
-  token: "YOUR_WIDGET_TOKEN"
-});
-```
+Hàm này se gắn script `chat-widget.min.js` (IIFE) vào trang, đọc `token` từ options (hoặc `window.CopilotChatConfig` nếu bạn set trước).
 
 ### React/Next.js
 
@@ -52,7 +40,7 @@ export default function Page() {
 }
 ```
 
-## Su dung qua the `<script>` (giu nguyen hanh vi cu)
+## Su dung qua the `<script>` (giu hanh vi cu)
 
 ```html
 <script
@@ -67,28 +55,28 @@ export default function Page() {
 ## API cau hinh
 
 - `token` (string, bat buoc): ma token widget.
-- `force` (boolean): cho phep khoi dong lai widget neu da co instance truoc do.
+- `autoload` (boolean): dat `false` neu muon tu goi `window.CopilotChat.load()`.
 
-Khi da khoi dong, co the goi:
+Khi script da load, co the goi:
 
 ```js
 window.CopilotChat.open();   // mo widget
 window.CopilotChat.close();  // dong widget
-window.CopilotChat.init();   // khoi tao lai (neu can) voi cau hinh mac dinh
-```
-
-## Build va publish package
-
-```bash
-cd webui/widget
-npm install
-npm run build          # tao dist/index.mjs, dist/index.cjs va dist/chat-widget.min.js
+window.CopilotChat.load();   // khoi tao lai neu autoload=false
 ```
-
-Sau khi kiem tra output trong `webui/widget/dist`, co the publish len NPM:
-
-```bash
-npm publish --access public
-```
-
-Neu muon doi ten package cho phu hop scope cong ty, sua truong `name` trong `webui/widget/package.json` truoc khi publish.
+
+## Build va publish package
+
+```bash
+cd webui/widget
+npm install
+npm run build          # tao dist/index.mjs, dist/index.cjs va dist/chat-widget.min.js
+```
+
+Sau khi kiem tra output trong `webui/widget/dist`, co the publish len NPM:
+
+```bash
+npm publish --access public
+```
+
+Neu muon doi ten package cho phu hop scope cong ty, sua truong `name` trong `webui/widget/package.json` truoc khi publish.

package/dist/chat-widget.min.js

@@ -1,7 +1,7 @@
-(function(g){"use strict";const E=typeof document<"u"?document.currentScript:null,v=t=>{if(!t?.src)return{};try{const n=new URL(t.src,typeof window<"u"?window.location.href:void 0),i={};return n.searchParams.forEach((l,d)=>{i[d]=l}),i}catch(n){return console.warn("[CopilotChat] Failed to parse script query params:",n),{}}},T=t=>{typeof document>"u"||(document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t))},I=t=>"http://localhost:3000",O=({iframeUrl:t,launcherIcon:n})=>{const i=document.querySelector("[data-copilot-widget-root]");i&&i.remove();const l=u=>{const a=document.querySelector("[data-copilot-checkout-toast]");a&&a.remove();const h=document.createElement("div");h.setAttribute("data-copilot-checkout-toast","true"),h.innerText=u,Object.assign(h.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(h),setTimeout(()=>{h.remove()},4500)},d=document.createElement("div");d.setAttribute("data-copilot-widget-root","true");const f=d.attachShadow({mode:"open"});document.body.appendChild(d);const o=document.createElement("button");o.type="button",o.setAttribute("aria-label","Open Copilot chat"),o.innerHTML=`
+(function(){"use strict";(()=>{if(typeof window>"u"||typeof document>"u"||window.__copilotWidgetLoaded)return;window.__copilotWidgetLoaded=!0;const m=64,C=720,y=document.currentScript,x=t=>{if(!t?.src)return{};try{const e=new URL(t.src,window.location.href),r={};return e.searchParams.forEach((a,s)=>{r[s]=a}),r}catch(e){return console.warn("[CopilotChat] Failed to parse script query params:",e),{}}},E=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},S=t=>{if(!t?.src)return null;try{const e=new URL(t.src,window.location.href);return`${e.protocol}//${e.host}`}catch(e){return console.warn("[CopilotChat] Unable to infer base URL from script source.",e),null}},k=()=>y||Array.from(document.querySelectorAll("script")).reverse().find(r=>r.dataset?.token||r.src&&r.src.includes("chat-widget"))||null,U=({iframeUrl:t,launcherIcon:e})=>{const r=document.querySelector("[data-copilot-widget-root]");r&&r.remove();const a=document.createElement("div");a.setAttribute("data-copilot-widget-root","true");const s=a.attachShadow({mode:"open"});document.body.appendChild(a);const o=document.createElement("button");o.type="button",o.setAttribute("aria-label","Open Copilot chat"),o.innerHTML=`
       <img
-        src="${n}"
+        src="${e}"
         alt="Copilot chat launcher"
         style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
       />
-    `,Object.assign(o.style,{position:"fixed",bottom:"24px",right:"24px",width:"64px",height:"64px",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 e=document.createElement("div");e.setAttribute("data-copilot-widget-root","true"),Object.assign(e.style,{display:"none",position:"fixed",bottom:"100px",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 r=document.createElement("div"),m=document.createElement("div"),x=document.createElement("div");Object.assign(r.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(m.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"}),r.appendChild(m),r.appendChild(x);const c=document.createElement("div");Object.assign(c.style,{width:"720px",maxWidth:"calc(100vw - 48px)",height:`${Math.min(720,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"}),f.appendChild(c);const s=document.createElement("iframe");s.src=t,s.title="Copilot chat widget",s.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",s.setAttribute("scrolling","no"),Object.assign(s.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),f.appendChild(c),c.appendChild(s),e.appendChild(r),e.appendChild(c),document.body.appendChild(o),document.body.appendChild(e);let p=!1;const b=()=>{p&&(p=!1,e.style.opacity="0",e.style.transform="scale(0.8) translateY(20px)",r.style.display="none",setTimeout(()=>{e.style.display="none"},250),o.style.transform="scale(1)")},R=u=>{const{data:a,source:h}=u||{};if(a?.type){if(a.type==="CART_CHECKOUT"&&h===s.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",a),l("Checkout message received from chat widget. Check console for payload.");return}a.type==="CHAT_CLOSED"&&b()}};window.addEventListener("message",R),o.onclick=u=>{u.stopPropagation(),p=!p,p?(e.style.display="block",r.style.display="block",requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1) translateY(0)"})):b()},document.addEventListener("click",u=>{const a=u.target;a&&p&&!e.contains(a)&&a!==o&&b()});const C={close:b,open:()=>{p||o.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=C.close,window.CopilotChat.open=C.open,window.CopilotChat.controls=C,C},w=t=>{console.error(`[CopilotChat] ${t}`)},y=()=>E||(typeof document>"u"?null:Array.from(document.querySelectorAll("script")).reverse().find(i=>i.dataset?.token||i.src&&i.src.includes("chat-widget"))||null),U=()=>{if(typeof window>"u"||typeof document>"u")return!1;const t=y();if(!t)return!1;const n=v(t),i=t.dataset||{},l=i.token||n.token,d=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(l||d)&&i.autoload!=="false"},k=async(t={})=>{if(typeof window>"u"||typeof document>"u")return w("Window or document is not available. This widget runs in browsers only."),null;if(window.__copilotWidgetLoaded&&!t.force)return window.CopilotChat?.controls||null;window.__copilotWidgetLoaded=!0;const n=t.scriptEl||y(),i=window.CopilotChatConfig||{},l=n?.dataset||{},d=v(n),f=t.token||i.token||l.token||d.token;if(!f)return w("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const o=I();if(!o)return w("Unable to resolve base URL from embedding script or window.location."),null;try{const e=await fetch(`${o}/api/chat-widget/config?token=${encodeURIComponent(f)}`,{credentials:"omit",mode:"cors"});if(!e.ok)throw new Error(`Server responded with ${e.status}`);const r=await e.json();if(!r?.iframeUrl||!r?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");const m={iframeUrl:r.iframeUrl,launcherIcon:r.launcherIcon};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(c={})=>{const s={iframeUrl:c.iframeUrl||m.iframeUrl,launcherIcon:c.launcherIcon||m.launcherIcon};return O(s)},window.CopilotChat.init(t)}catch(e){return w(e instanceof Error?e.message:"Unknown error during widget bootstrap."),null}},S=(t={})=>new Promise(n=>{if(typeof document>"u"){n(null);return}T(()=>{k(t).then(n)})});U()&&S(),g.initCopilotChatWidget=k,g.loadCopilotChatWidget=S,g.resolveEmbeddingScript=y,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})})(this.CopilotChatWidget=this.CopilotChatWidget||{});
+    `,Object.assign(o.style,{position:"fixed",bottom:"24px",right:"24px",width:`${m}px`,height:`${m}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 n=document.createElement("div");n.setAttribute("data-copilot-widget-root","true"),Object.assign(n.style,{display:"none",position:"fixed",bottom:`${m+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 i=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div");Object.assign(i.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(l.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(g.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"}),i.appendChild(l),i.appendChild(g);const d=document.createElement("div");Object.assign(d.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"}),s.appendChild(d);const c=document.createElement("iframe");c.src=t,c.title="Copilot chat widget",c.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",c.setAttribute("scrolling","no"),Object.assign(c.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),s.appendChild(d),d.appendChild(c),n.appendChild(i),n.appendChild(d),document.body.appendChild(o),document.body.appendChild(n);let p=!1;const u=()=>{p&&(p=!1,n.style.opacity="0",n.style.transform="scale(0.8) translateY(20px)",i.style.display="none",setTimeout(()=>{n.style.display="none"},250),o.style.transform="scale(1)")};o.onclick=h=>{h.stopPropagation(),p=!p,p?(n.style.display="block",i.style.display="block",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="scale(1) translateY(0)"})):u()},window.addEventListener("message",h=>{h?.data?.type==="CHAT_CLOSED"&&u()}),document.addEventListener("click",h=>{const b=h.target;b&&p&&!n.contains(b)&&b!==o&&u()});const w={close:u,open:()=>{p||o.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=w.close,window.CopilotChat.open=w.open,window.CopilotChat.controls=w,w},f=t=>{console.error(`[CopilotChat] ${t}`)},L=()=>{const t=k();if(!t)return!1;const e=x(t),r=t.dataset||{},a=r.token||e.token,s=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(a||s)&&r.autoload!=="false"},v=async(t={})=>{const e=t.scriptEl||k(),r=window.CopilotChatConfig||{},a=e?.dataset||{},s=x(e),o=t.token||r.token||a.token||s.token;if(!o)return f("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const n=S(e)||typeof window<"u"&&window.location?.origin||null;if(!n)return f("Unable to resolve base URL from embedding script or window.location."),null;try{const i=await fetch(`${n}/api/chat-widget/config?token=${encodeURIComponent(o)}`,{credentials:"omit",mode:"cors"});if(!i.ok)throw new Error(`Server responded with ${i.status}`);const l=await i.json();if(!l?.iframeUrl||!l?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(d={})=>{const c={iframeUrl:d.iframeUrl||l.iframeUrl,launcherIcon:d.launcherIcon||l.launcherIcon};return U(c)},window.CopilotChat.init(t)}catch(i){return f(i instanceof Error?i.message:"Unknown error during widget bootstrap."),null}};L()&&E(()=>{v()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=v})()})();

package/dist/index.cjs

@@ -1,7 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=64,v=720,k=typeof document<"u"?document.currentScript:null,E=t=>{if(!t?.src)return{};try{const n=new URL(t.src,typeof window<"u"?window.location.href:void 0),i={};return n.searchParams.forEach((l,d)=>{i[d]=l}),i}catch(n){return console.warn("[CopilotChat] Failed to parse script query params:",n),{}}},I=t=>{typeof document>"u"||(document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t))},U=t=>"http://localhost:3000",R=({iframeUrl:t,launcherIcon:n})=>{const i=document.querySelector("[data-copilot-widget-root]");i&&i.remove();const l=u=>{const a=document.querySelector("[data-copilot-checkout-toast]");a&&a.remove();const h=document.createElement("div");h.setAttribute("data-copilot-checkout-toast","true"),h.innerText=u,Object.assign(h.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(h),setTimeout(()=>{h.remove()},4500)},d=document.createElement("div");d.setAttribute("data-copilot-widget-root","true");const f=d.attachShadow({mode:"open"});document.body.appendChild(d);const o=document.createElement("button");o.type="button",o.setAttribute("aria-label","Open Copilot chat"),o.innerHTML=`
-      <img
-        src="${n}"
-        alt="Copilot chat launcher"
-        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
-      />
-    `,Object.assign(o.style,{position:"fixed",bottom:"24px",right:"24px",width:`${y}px`,height:`${y}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 e=document.createElement("div");e.setAttribute("data-copilot-widget-root","true"),Object.assign(e.style,{display:"none",position:"fixed",bottom:`${y+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 r=document.createElement("div"),m=document.createElement("div"),C=document.createElement("div");Object.assign(r.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(m.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(C.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"}),r.appendChild(m),r.appendChild(C);const c=document.createElement("div");Object.assign(c.style,{width:`${v}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(v,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"}),f.appendChild(c);const s=document.createElement("iframe");s.src=t,s.title="Copilot chat widget",s.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",s.setAttribute("scrolling","no"),Object.assign(s.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),f.appendChild(c),c.appendChild(s),e.appendChild(r),e.appendChild(c),document.body.appendChild(o),document.body.appendChild(e);let p=!1;const w=()=>{p&&(p=!1,e.style.opacity="0",e.style.transform="scale(0.8) translateY(20px)",r.style.display="none",setTimeout(()=>{e.style.display="none"},250),o.style.transform="scale(1)")},O=u=>{const{data:a,source:h}=u||{};if(a?.type){if(a.type==="CART_CHECKOUT"&&h===s.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",a),l("Checkout message received from chat widget. Check console for payload.");return}a.type==="CHAT_CLOSED"&&w()}};window.addEventListener("message",O),o.onclick=u=>{u.stopPropagation(),p=!p,p?(e.style.display="block",r.style.display="block",requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1) translateY(0)"})):w()},document.addEventListener("click",u=>{const a=u.target;a&&p&&!e.contains(a)&&a!==o&&w()});const g={close:w,open:()=>{p||o.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=g.close,window.CopilotChat.open=g.open,window.CopilotChat.controls=g,g},b=t=>{console.error(`[CopilotChat] ${t}`)},x=()=>k||(typeof document>"u"?null:Array.from(document.querySelectorAll("script")).reverse().find(i=>i.dataset?.token||i.src&&i.src.includes("chat-widget"))||null),W=()=>{if(typeof window>"u"||typeof document>"u")return!1;const t=x();if(!t)return!1;const n=E(t),i=t.dataset||{},l=i.token||n.token,d=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(l||d)&&i.autoload!=="false"},S=async(t={})=>{if(typeof window>"u"||typeof document>"u")return b("Window or document is not available. This widget runs in browsers only."),null;if(window.__copilotWidgetLoaded&&!t.force)return window.CopilotChat?.controls||null;window.__copilotWidgetLoaded=!0;const n=t.scriptEl||x(),i=window.CopilotChatConfig||{},l=n?.dataset||{},d=E(n),f=t.token||i.token||l.token||d.token;if(!f)return b("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const o=U();if(!o)return b("Unable to resolve base URL from embedding script or window.location."),null;try{const e=await fetch(`${o}/api/chat-widget/config?token=${encodeURIComponent(f)}`,{credentials:"omit",mode:"cors"});if(!e.ok)throw new Error(`Server responded with ${e.status}`);const r=await e.json();if(!r?.iframeUrl||!r?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");const m={iframeUrl:r.iframeUrl,launcherIcon:r.launcherIcon};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(c={})=>{const s={iframeUrl:c.iframeUrl||m.iframeUrl,launcherIcon:c.launcherIcon||m.launcherIcon};return R(s)},window.CopilotChat.init(t)}catch(e){return b(e instanceof Error?e.message:"Unknown error during widget bootstrap."),null}},T=(t={})=>new Promise(n=>{if(typeof document>"u"){n(null);return}I(()=>{S(t).then(n)})});W()&&T();exports.initCopilotChatWidget=S;exports.loadCopilotChatWidget=T;exports.resolveEmbeddingScript=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var n=typeof document<"u"?document.currentScript:null;function i(d={}){if(typeof window>"u"||typeof document>"u")return null;const{token:t,autoload:a}=d;window.CopilotChatConfig={...window.CopilotChatConfig,...d};const o=document.getElementById("copilot-chat-widget-loader");if(o)return t&&(o.dataset.token=t),a===!1&&(o.dataset.autoload="false"),o;const e=document.createElement("script");return e.id="copilot-chat-widget-loader",e.src=new URL("./chat-widget.min.js",typeof document>"u"?require("url").pathToFileURL(__filename).href:n&&n.tagName.toUpperCase()==="SCRIPT"&&n.src||new URL("index.cjs",document.baseURI).href).href,e.async=!0,t&&(e.dataset.token=t),a===!1&&(e.dataset.autoload="false"),document.body.appendChild(e),e}exports.default=i;exports.loadCopilotChatWidget=i;

package/dist/index.mjs

@@ -1,230 +1,18 @@
-const y = typeof document < "u" ? document.currentScript : null, x = (t) => {
-  if (!t?.src) return {};
-  try {
-    const n = new URL(t.src, typeof window < "u" ? window.location.href : void 0), i = {};
-    return n.searchParams.forEach((l, s) => {
-      i[s] = l;
-    }), i;
-  } catch (n) {
-    return console.warn("[CopilotChat] Failed to parse script query params:", n), {};
-  }
-}, v = (t) => {
-  typeof document > "u" || (document.readyState === "complete" || document.readyState === "interactive" ? setTimeout(t, 0) : document.addEventListener("DOMContentLoaded", t));
-}, S = (t) => "http://localhost:3000", T = ({ iframeUrl: t, launcherIcon: n }) => {
-  const i = document.querySelector("[data-copilot-widget-root]");
-  i && i.remove();
-  const l = (u) => {
-    const a = document.querySelector("[data-copilot-checkout-toast]");
-    a && a.remove();
-    const h = document.createElement("div");
-    h.setAttribute("data-copilot-checkout-toast", "true"), h.innerText = u, Object.assign(h.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(h), setTimeout(() => {
-      h.remove();
-    }, 4500);
-  }, s = document.createElement("div");
-  s.setAttribute("data-copilot-widget-root", "true");
-  const f = s.attachShadow({ mode: "open" });
-  document.body.appendChild(s);
-  const o = document.createElement("button");
-  o.type = "button", o.setAttribute("aria-label", "Open Copilot chat"), o.innerHTML = `
-      <img
-        src="${n}"
-        alt="Copilot chat launcher"
-        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
-      />
-    `, Object.assign(o.style, {
-    position: "fixed",
-    bottom: "24px",
-    right: "24px",
-    width: "64px",
-    height: "64px",
-    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 e = document.createElement("div");
-  e.setAttribute("data-copilot-widget-root", "true"), Object.assign(e.style, {
-    display: "none",
-    position: "fixed",
-    bottom: "100px",
-    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 r = document.createElement("div"), m = document.createElement("div"), C = document.createElement("div");
-  Object.assign(r.style, {
-    position: "absolute",
-    bottom: "-14px",
-    right: "28px",
-    width: "30px",
-    height: "20px",
-    pointerEvents: "none",
-    display: "none",
-    zIndex: "1"
-  }), Object.assign(m.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(C.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"
-  }), r.appendChild(m), r.appendChild(C);
-  const c = document.createElement("div");
-  Object.assign(c.style, {
-    width: "720px",
-    maxWidth: "calc(100vw - 48px)",
-    // keep height responsive to viewport to avoid outer scrollbars
-    height: `${Math.min(720, 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"
-  }), f.appendChild(c);
-  const d = document.createElement("iframe");
-  d.src = t, d.title = "Copilot chat widget", d.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", d.setAttribute("scrolling", "no"), Object.assign(d.style, {
-    width: "100%",
-    height: "100%",
-    border: "none",
-    display: "block",
-    background: "transparent",
-    overflow: "hidden"
-  }), f.appendChild(c), c.appendChild(d), e.appendChild(r), e.appendChild(c), document.body.appendChild(o), document.body.appendChild(e);
-  let p = !1;
-  const w = () => {
-    p && (p = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)", r.style.display = "none", setTimeout(() => {
-      e.style.display = "none";
-    }, 250), o.style.transform = "scale(1)");
-  }, k = (u) => {
-    const { data: a, source: h } = u || {};
-    if (a?.type) {
-      if (a.type === "CART_CHECKOUT" && h === d.contentWindow) {
-        console.log("[CopilotChat] Received checkout payload from widget:", a), l("Checkout message received from chat widget. Check console for payload.");
-        return;
-      }
-      a.type === "CHAT_CLOSED" && w();
-    }
-  };
-  window.addEventListener("message", k), o.onclick = (u) => {
-    u.stopPropagation(), p = !p, p ? (e.style.display = "block", r.style.display = "block", requestAnimationFrame(() => {
-      e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
-    })) : w();
-  }, document.addEventListener("click", (u) => {
-    const a = u.target;
-    a && p && !e.contains(a) && a !== o && w();
-  });
-  const g = {
-    close: w,
-    open: () => {
-      p || o.click();
-    }
-  };
-  return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = g.close, window.CopilotChat.open = g.open, window.CopilotChat.controls = g, g;
-}, b = (t) => {
-  console.error(`[CopilotChat] ${t}`);
-}, E = () => y || (typeof document > "u" ? null : Array.from(document.querySelectorAll("script")).reverse().find((i) => i.dataset?.token || i.src && i.src.includes("chat-widget")) || null), I = () => {
+function n(a = {}) {
   if (typeof window > "u" || typeof document > "u")
-    return !1;
-  const t = E();
-  if (!t) return !1;
-  const n = x(t), i = t.dataset || {}, l = i.token || n.token, s = typeof window < "u" && window.CopilotChatConfig && window.CopilotChatConfig.token;
-  return (l || s) && i.autoload !== "false";
-}, O = async (t = {}) => {
-  if (typeof window > "u" || typeof document > "u")
-    return b("Window or document is not available. This widget runs in browsers only."), null;
-  if (window.__copilotWidgetLoaded && !t.force)
-    return window.CopilotChat?.controls || null;
-  window.__copilotWidgetLoaded = !0;
-  const n = t.scriptEl || E(), i = window.CopilotChatConfig || {}, l = n?.dataset || {}, s = x(n), f = t.token || i.token || l.token || s.token;
-  if (!f)
-    return b("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."), null;
-  const o = S();
-  if (!o)
-    return b("Unable to resolve base URL from embedding script or window.location."), null;
-  try {
-    const e = await fetch(`${o}/api/chat-widget/config?token=${encodeURIComponent(f)}`, {
-      credentials: "omit",
-      mode: "cors"
-    });
-    if (!e.ok)
-      throw new Error(`Server responded with ${e.status}`);
-    const r = await e.json();
-    if (!r?.iframeUrl || !r?.launcherIcon)
-      throw new Error("Received incomplete widget configuration from server.");
-    const m = {
-      iframeUrl: r.iframeUrl,
-      launcherIcon: r.launcherIcon
-    };
-    return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.init = (c = {}) => {
-      const d = {
-        iframeUrl: c.iframeUrl || m.iframeUrl,
-        launcherIcon: c.launcherIcon || m.launcherIcon
-      };
-      return T(d);
-    }, window.CopilotChat.init(t);
-  } catch (e) {
-    return b(e instanceof Error ? e.message : "Unknown error during widget bootstrap."), null;
-  }
-}, U = (t = {}) => new Promise((n) => {
-  if (typeof document > "u") {
-    n(null);
-    return;
-  }
-  v(() => {
-    O(t).then(n);
-  });
-});
-I() && U();
+    return null;
+  const { token: e, autoload: d } = a;
+  window.CopilotChatConfig = {
+    ...window.CopilotChatConfig,
+    ...a
+  };
+  const o = document.getElementById("copilot-chat-widget-loader");
+  if (o)
+    return e && (o.dataset.token = e), d === !1 && (o.dataset.autoload = "false"), o;
+  const t = document.createElement("script");
+  return t.id = "copilot-chat-widget-loader", t.src = new URL("./chat-widget.min.js", import.meta.url).href, t.async = !0, e && (t.dataset.token = e), d === !1 && (t.dataset.autoload = "false"), document.body.appendChild(t), t;
+}
 export {
-  O as initCopilotChatWidget,
-  U as loadCopilotChatWidget,
-  E as resolveEmbeddingScript
+  n as default,
+  n as loadCopilotChatWidget
 };

package/package.json

@@ -1,40 +1,41 @@
-{
-  "name": "copilot-chat-widget",
-  "version": "0.1.0",
-  "description": "Embeddable Copilot chat widget that can be loaded via NPM or a script tag.",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "browser": "./dist/chat-widget.min.js",
-  "exports": {
-    ".": {
-      "browser": "./dist/chat-widget.min.js",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./dist/chat-widget.min.js": "./dist/chat-widget.min.js"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "vite build --config ./vite.config.mjs",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "chat",
-    "widget",
-    "copilot",
-    "agentic",
-    "embed"
-  ],
-  "author": "",
-  "license": "UNLICENSED",
-  "sideEffects": true,
-  "engines": {
-    "node": ">=18"
-  },
-  "devDependencies": {
-    "vite": "^7.1.12"
-  }
-}
+{
+  "name": "copilot-chat-widget",
+  "version": "0.1.3",
+  "description": "Embeddable Copilot chat widget that can be loaded via NPM or a script tag.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "browser": "./dist/chat-widget.min.js",
+  "exports": {
+    ".": {
+      "browser": "./dist/chat-widget.min.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/chat-widget.min.js": "./dist/chat-widget.min.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build --config ./vite.config.module.mjs && vite build --config ./vite.config.runtime.mjs",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "chat",
+    "widget",
+    "copilot",
+    "agentic",
+    "embed"
+  ],
+  "author": "",
+  "license": "UNLICENSED",
+  "sideEffects": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "vite": "^7.1.12"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,7 @@
+export interface CopilotChatOptions {
+  token: string;
+  autoload?: boolean;
+}
+
+export function loadCopilotChatWidget(options: CopilotChatOptions): HTMLScriptElement | null;
+export default loadCopilotChatWidget;

package/src/index.js

@@ -1,425 +1,32 @@
-const BUTTON_SIZE = 64;
-const IFRAME_SIZE = 720;
-const embeddingScript = typeof document !== "undefined" ? document.currentScript : null;
-
-const readQueryConfig = (scriptEl) => {
-  if (!scriptEl?.src) return {};
-  try {
-    const url = new URL(scriptEl.src, typeof window !== "undefined" ? window.location.href : undefined);
-    const params = {};
-    url.searchParams.forEach((value, key) => {
-      params[key] = value;
-    });
-    return params;
-  } catch (error) {
-    console.warn("[CopilotChat] Failed to parse script query params:", error);
-    return {};
-  }
-};
-
-const ready = (fn) => {
-  if (typeof document === "undefined") return;
-  if (document.readyState === "complete" || document.readyState === "interactive") {
-    setTimeout(fn, 0);
-  } else {
-    document.addEventListener("DOMContentLoaded", fn);
-  }
-};
-
-const inferBaseUrlFromScript = (scriptEl) => {
-  if (!scriptEl?.src || typeof window === "undefined") return null;
-  try {
-    const srcUrl = new URL(scriptEl.src, window.location.href);
-    return `${srcUrl.protocol}//${srcUrl.host}`;
-  } catch (error) {
-    console.warn("[CopilotChat] Unable to infer base URL from script source.", error);
-    return null;
-  }
-};
-
-const resolveBaseUrl = (scriptEl) => {
-  // Use the build-time defined base URL from VITE_CHAT_WIDGET_BASE_URL
-  if (typeof CHAT_WIDGET_BASE_URL !== "undefined") {
-    return CHAT_WIDGET_BASE_URL;
-  }
-
-  // Fallback to inferred URL from script
-  const inferred = inferBaseUrlFromScript(scriptEl);
-  if (inferred) return inferred;
-
-  // Final fallback to window location
-  if (typeof window !== "undefined" && window.location?.origin) {
-    return window.location.origin;
-  }
-  return null;
-};
-
-const buildWidget = ({ iframeUrl, launcherIcon }) => {
-  const existingRoot = document.querySelector("[data-copilot-widget-root]");
-  if (existingRoot) {
-    existingRoot.remove();
-  }
-
-  const showCheckoutToast = (message) => {
-    const existingToast = document.querySelector("[data-copilot-checkout-toast]");
-    if (existingToast) {
-      existingToast.remove();
-    }
-
-    const toast = document.createElement("div");
-    toast.setAttribute("data-copilot-checkout-toast", "true");
-    toast.innerText = message;
-
-    Object.assign(toast.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(toast);
-
-    setTimeout(() => {
-      toast.remove();
-    }, 4500);
-  };
-
-  // ---------- Shadow DOM container ----------
-  const containerHost = document.createElement("div");
-  containerHost.setAttribute("data-copilot-widget-root", "true");
-  const shadow = containerHost.attachShadow({ mode: "open" });
-  document.body.appendChild(containerHost);
-
-  // ---------- Button ----------
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.setAttribute("aria-label", "Open Copilot chat");
-  btn.innerHTML = `
-      <img
-        src="${launcherIcon}"
-        alt="Copilot chat launcher"
-        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
-      />
-    `;
-
-  Object.assign(btn.style, {
-    position: "fixed",
-    bottom: "24px",
-    right: "24px",
-    width: `${BUTTON_SIZE}px`,
-    height: `${BUTTON_SIZE}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",
-  });
-
-  btn.onmouseover = () => {
-    btn.style.transform = "scale(1.12)";
-    btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
-  };
-  btn.onmouseout = () => {
-    btn.style.transform = "scale(1)";
-    btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
-  };
-
-  const container = document.createElement("div");
-  container.setAttribute("data-copilot-widget-root", "true");
-  Object.assign(container.style, {
-    display: "none",
-    position: "fixed",
-    bottom: `${BUTTON_SIZE + 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 arrow = document.createElement("div");
-  const arrowBorder = document.createElement("div");
-  const arrowFill = document.createElement("div");
-
-  Object.assign(arrow.style, {
-    position: "absolute",
-    bottom: "-14px",
-    right: "28px",
-    width: "30px",
-    height: "20px",
-    pointerEvents: "none",
-    display: "none",
-    zIndex: "1",
-  });
-
-  Object.assign(arrowBorder.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(arrowFill.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",
-  });
-
-  arrow.appendChild(arrowBorder);
-  arrow.appendChild(arrowFill);
-
-  const frameWrapper = document.createElement("div");
-  Object.assign(frameWrapper.style, {
-    width: `${IFRAME_SIZE}px`,
-    maxWidth: "calc(100vw - 48px)",
-    // keep height responsive to viewport to avoid outer scrollbars
-    height: `${Math.min(IFRAME_SIZE, 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",
-  });
-  shadow.appendChild(frameWrapper);
-
-  const iframe = document.createElement("iframe");
-  iframe.src = iframeUrl;
-  iframe.title = "Copilot chat widget";
-  iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
-  iframe.setAttribute("scrolling", "no");
-  Object.assign(iframe.style, {
-    width: "100%",
-    height: "100%",
-    border: "none",
-    display: "block",
-    background: "transparent",
-    overflow: "hidden",
-  });
-
-  shadow.appendChild(frameWrapper);
-  frameWrapper.appendChild(iframe);
-
-  container.appendChild(arrow);
-  container.appendChild(frameWrapper);
-  document.body.appendChild(btn);
-  document.body.appendChild(container);
-
-  let isOpen = false;
-
-  const closeChat = () => {
-    if (!isOpen) return;
-    isOpen = false;
-    container.style.opacity = "0";
-    container.style.transform = "scale(0.8) translateY(20px)";
-    arrow.style.display = "none";
-    setTimeout(() => {
-      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;
-    }
-
-    if (data.type === "CHAT_CLOSED") {
-      closeChat();
-    }
-  };
-
-  window.addEventListener("message", handleWidgetMessage);
-
-  btn.onclick = (event) => {
-    event.stopPropagation();
-    isOpen = !isOpen;
-    if (isOpen) {
-      container.style.display = "block";
-      arrow.style.display = "block";
-      requestAnimationFrame(() => {
-        container.style.opacity = "1";
-        container.style.transform = "scale(1) translateY(0)";
-      });
-    } else {
-      closeChat();
-    }
-  };
-
-  document.addEventListener("click", (event) => {
-    const target = event.target;
-    if (!target) return;
-    if (isOpen && !container.contains(target) && target !== btn) {
-      closeChat();
-    }
-  });
-
-  const controls = {
-    close: closeChat,
-    open: () => {
-      if (!isOpen) {
-        btn.click();
-      }
-    },
-  };
-
-  window.CopilotChat = window.CopilotChat || {};
-  window.CopilotChat.close = controls.close;
-  window.CopilotChat.open = controls.open;
-  window.CopilotChat.controls = controls;
-
-  return controls;
-};
-
-const handleError = (message) => {
-  console.error(`[CopilotChat] ${message}`);
-};
-
-export const resolveEmbeddingScript = () => {
-  if (embeddingScript) {
-    return embeddingScript;
-  }
-
-  if (typeof document === "undefined") return null;
-
-  const scripts = Array.from(document.querySelectorAll("script"));
-  const candidate = scripts
-    .reverse()
-    .find((script) => script.dataset?.token || (script.src && script.src.includes("chat-widget")));
-
-  return candidate || null;
-};
-
-const shouldAutoBootstrapFromScript = () => {
+export function loadCopilotChatWidget(options = {}) {
   if (typeof window === "undefined" || typeof document === "undefined") {
-    return false;
-  }
-  const scriptEl = resolveEmbeddingScript();
-  if (!scriptEl) return false;
-  const queryConfig = readQueryConfig(scriptEl);
-  const dataset = scriptEl.dataset || {};
-  const hasTokenHint = dataset.token || queryConfig.token;
-  const hasGlobalToken = typeof window !== "undefined" && window.CopilotChatConfig && window.CopilotChatConfig.token;
-  return (hasTokenHint || hasGlobalToken) && dataset.autoload !== "false";
-};
-
-export const initCopilotChatWidget = async (config = {}) => {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    handleError("Window or document is not available. This widget runs in browsers only.");
-    return null;
-  }
-
-  if (window.__copilotWidgetLoaded && !config.force) {
-    return window.CopilotChat?.controls || null;
-  }
-  window.__copilotWidgetLoaded = true;
-
-  const scriptEl = config.scriptEl || resolveEmbeddingScript();
-  const globalConfig = window.CopilotChatConfig || {};
-  const datasetConfig = scriptEl?.dataset || {};
-  const queryConfig = readQueryConfig(scriptEl);
-
-  const token = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
-
-  if (!token) {
-    handleError("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute).");
     return null;
   }
 
-  const baseUrl = resolveBaseUrl(scriptEl);
+  const { token, autoload } = options;
 
-  if (!baseUrl) {
-    handleError("Unable to resolve base URL from embedding script or window.location.");
-    return null;
-  }
-
-  try {
-    const response = await fetch(`${baseUrl}/api/chat-widget/config?token=${encodeURIComponent(token)}`, {
-      credentials: "omit",
-      mode: "cors",
-    });
-
-    if (!response.ok) {
-      throw new Error(`Server responded with ${response.status}`);
-    }
-
-    const remoteConfig = await response.json();
-    if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
-      throw new Error("Received incomplete widget configuration from server.");
-    }
-
-    const baseConfig = {
-      iframeUrl: remoteConfig.iframeUrl,
-      launcherIcon: remoteConfig.launcherIcon,
-    };
-
-    window.CopilotChat = window.CopilotChat || {};
-    window.CopilotChat.init = (overrides = {}) => {
-      const mergedConfig = {
-        iframeUrl: overrides.iframeUrl || baseConfig.iframeUrl,
-        launcherIcon: overrides.launcherIcon || baseConfig.launcherIcon,
-      };
-
-      return buildWidget(mergedConfig);
-    };
+  // persist config for runtime script
+  window.CopilotChatConfig = {
+    ...window.CopilotChatConfig,
+    ...options,
+  };
 
-    const controls = window.CopilotChat.init(config);
-    return controls;
-  } catch (error) {
-    handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
-    return null;
+  const existing = document.getElementById("copilot-chat-widget-loader");
+  if (existing) {
+    if (token) existing.dataset.token = token;
+    if (autoload === false) existing.dataset.autoload = "false";
+    return existing;
   }
-};
 
-export const loadCopilotChatWidget = (config = {}) =>
-  new Promise((resolve) => {
-    if (typeof document === "undefined") {
-      resolve(null);
-      return;
-    }
-    ready(() => {
-      initCopilotChatWidget(config).then(resolve);
-    });
-  });
+  const script = document.createElement("script");
+  script.id = "copilot-chat-widget-loader";
+  script.src = new URL("./chat-widget.min.js", import.meta.url).href;
+  script.async = true;
+  if (token) script.dataset.token = token;
+  if (autoload === false) script.dataset.autoload = "false";
 
-if (shouldAutoBootstrapFromScript()) {
-  loadCopilotChatWidget();
+  document.body.appendChild(script);
+  return script;
 }
+
+export default loadCopilotChatWidget;

package/src/widget-runtime.js

@@ -0,0 +1,345 @@
+(() => {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  if (window.__copilotWidgetLoaded) return;
+  window.__copilotWidgetLoaded = true;
+
+  const BUTTON_SIZE = 64;
+  const IFRAME_SIZE = 720;
+  const embeddingScript = document.currentScript;
+
+  const readQueryConfig = (scriptEl) => {
+    if (!scriptEl?.src) return {};
+    try {
+      const url = new URL(scriptEl.src, window.location.href);
+      const params = {};
+      url.searchParams.forEach((value, key) => {
+        params[key] = value;
+      });
+      return params;
+    } catch (error) {
+      console.warn("[CopilotChat] Failed to parse script query params:", error);
+      return {};
+    }
+  };
+
+  const ready = (fn) => {
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+      setTimeout(fn, 0);
+    } else {
+      document.addEventListener("DOMContentLoaded", fn);
+    }
+  };
+
+  const inferBaseUrlFromScript = (scriptEl) => {
+    if (!scriptEl?.src) return null;
+    try {
+      const srcUrl = new URL(scriptEl.src, window.location.href);
+      return `${srcUrl.protocol}//${srcUrl.host}`;
+    } catch (error) {
+      console.warn("[CopilotChat] Unable to infer base URL from script source.", error);
+      return null;
+    }
+  };
+
+  const resolveEmbeddingScript = () => {
+    if (embeddingScript) {
+      return embeddingScript;
+    }
+
+    const scripts = Array.from(document.querySelectorAll("script"));
+    const candidate = scripts
+      .reverse()
+      .find((script) => script.dataset?.token || (script.src && script.src.includes("chat-widget")));
+
+    return candidate || null;
+  };
+
+  const buildWidget = ({ iframeUrl, launcherIcon }) => {
+    const existingRoot = document.querySelector("[data-copilot-widget-root]");
+    if (existingRoot) {
+      existingRoot.remove();
+    }
+
+    // ---------- Shadow DOM container ----------
+    const containerHost = document.createElement("div");
+    containerHost.setAttribute("data-copilot-widget-root", "true");
+    const shadow = containerHost.attachShadow({ mode: "open" });
+    document.body.appendChild(containerHost);
+
+    // ---------- Button ----------
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("aria-label", "Open Copilot chat");
+    btn.innerHTML = `
+      <img
+        src="${launcherIcon}"
+        alt="Copilot chat launcher"
+        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
+      />
+    `;
+
+    Object.assign(btn.style, {
+      position: "fixed",
+      bottom: "24px",
+      right: "24px",
+      width: `${BUTTON_SIZE}px`,
+      height: `${BUTTON_SIZE}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",
+    });
+
+    btn.onmouseover = () => {
+      btn.style.transform = "scale(1.12)";
+      btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
+    };
+    btn.onmouseout = () => {
+      btn.style.transform = "scale(1)";
+      btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
+    };
+
+    const container = document.createElement("div");
+    container.setAttribute("data-copilot-widget-root", "true");
+    Object.assign(container.style, {
+      display: "none",
+      position: "fixed",
+      bottom: `${BUTTON_SIZE + 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 arrow = document.createElement("div");
+    const arrowBorder = document.createElement("div");
+    const arrowFill = document.createElement("div");
+
+    Object.assign(arrow.style, {
+      position: "absolute",
+      bottom: "-14px",
+      right: "28px",
+      width: "30px",
+      height: "20px",
+      pointerEvents: "none",
+      display: "none",
+      zIndex: "1",
+    });
+
+    Object.assign(arrowBorder.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(arrowFill.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",
+    });
+
+    arrow.appendChild(arrowBorder);
+    arrow.appendChild(arrowFill);
+
+    const frameWrapper = document.createElement("div");
+    Object.assign(frameWrapper.style, {
+      width: `${IFRAME_SIZE}px`,
+      maxWidth: "calc(100vw - 48px)",
+      // keep height responsive to viewport to avoid outer scrollbars
+      height: `${Math.min(IFRAME_SIZE, 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",
+    });
+    shadow.appendChild(frameWrapper);
+
+    const iframe = document.createElement("iframe");
+    iframe.src = iframeUrl;
+    iframe.title = "Copilot chat widget";
+    iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
+    iframe.setAttribute("scrolling", "no");
+    Object.assign(iframe.style, {
+      width: "100%",
+      height: "100%",
+      border: "none",
+      display: "block",
+      background: "transparent",
+      overflow: "hidden",
+    });
+
+    shadow.appendChild(frameWrapper);
+    frameWrapper.appendChild(iframe);
+
+    container.appendChild(arrow);
+    container.appendChild(frameWrapper);
+    document.body.appendChild(btn);
+    document.body.appendChild(container);
+
+    let isOpen = false;
+
+    const closeChat = () => {
+      if (!isOpen) return;
+      isOpen = false;
+      container.style.opacity = "0";
+      container.style.transform = "scale(0.8) translateY(20px)";
+      arrow.style.display = "none";
+      setTimeout(() => {
+        container.style.display = "none";
+      }, 250);
+      btn.style.transform = "scale(1)";
+    };
+
+    btn.onclick = (event) => {
+      event.stopPropagation();
+      isOpen = !isOpen;
+      if (isOpen) {
+        container.style.display = "block";
+        arrow.style.display = "block";
+        requestAnimationFrame(() => {
+          container.style.opacity = "1";
+          container.style.transform = "scale(1) translateY(0)";
+        });
+      } else {
+        closeChat();
+      }
+    };
+
+    window.addEventListener("message", (event) => {
+      if (event?.data?.type === "CHAT_CLOSED") {
+        closeChat();
+      }
+    });
+
+    document.addEventListener("click", (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (isOpen && !container.contains(target) && target !== btn) {
+        closeChat();
+      }
+    });
+
+    const controls = {
+      close: closeChat,
+      open: () => {
+        if (!isOpen) {
+          btn.click();
+        }
+      },
+    };
+
+    window.CopilotChat = window.CopilotChat || {};
+    window.CopilotChat.close = controls.close;
+    window.CopilotChat.open = controls.open;
+    window.CopilotChat.controls = controls;
+
+    return controls;
+  };
+
+  const handleError = (message) => {
+    console.error(`[CopilotChat] ${message}`);
+  };
+
+  const shouldAutoBootstrapFromScript = () => {
+    const scriptEl = resolveEmbeddingScript();
+    if (!scriptEl) return false;
+    const queryConfig = readQueryConfig(scriptEl);
+    const dataset = scriptEl.dataset || {};
+    const hasTokenHint = dataset.token || queryConfig.token;
+    const hasGlobalToken = typeof window !== "undefined" && window.CopilotChatConfig && window.CopilotChatConfig.token;
+    return (hasTokenHint || hasGlobalToken) && dataset.autoload !== "false";
+  };
+
+  const initCopilotChatWidget = async (config = {}) => {
+    const scriptEl = config.scriptEl || resolveEmbeddingScript();
+    const globalConfig = window.CopilotChatConfig || {};
+    const datasetConfig = scriptEl?.dataset || {};
+    const queryConfig = readQueryConfig(scriptEl);
+
+    const token = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
+
+    if (!token) {
+      handleError("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute).");
+      return null;
+    }
+
+    const baseUrl =
+      inferBaseUrlFromScript(scriptEl) ||
+      (typeof window !== "undefined" && window.location?.origin) ||
+      null;
+
+    if (!baseUrl) {
+      handleError("Unable to resolve base URL from embedding script or window.location.");
+      return null;
+    }
+
+    try {
+      const response = await fetch(`${baseUrl}/api/chat-widget/config?token=${encodeURIComponent(token)}`, {
+        credentials: "omit",
+        mode: "cors",
+      });
+
+      if (!response.ok) {
+        throw new Error(`Server responded with ${response.status}`);
+      }
+
+      const remoteConfig = await response.json();
+      if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
+        throw new Error("Received incomplete widget configuration from server.");
+      }
+
+      window.CopilotChat = window.CopilotChat || {};
+      window.CopilotChat.init = (overrides = {}) => {
+        const mergedConfig = {
+          iframeUrl: overrides.iframeUrl || remoteConfig.iframeUrl,
+          launcherIcon: overrides.launcherIcon || remoteConfig.launcherIcon,
+        };
+
+        return buildWidget(mergedConfig);
+      };
+
+      const controls = window.CopilotChat.init(config);
+      return controls;
+    } catch (error) {
+      handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
+      return null;
+    }
+  };
+
+  if (shouldAutoBootstrapFromScript()) {
+    ready(() => {
+      initCopilotChatWidget();
+    });
+  }
+
+  // expose for manual bootstrap if autoload=false
+  window.CopilotChat = window.CopilotChat || {};
+  window.CopilotChat.load = initCopilotChatWidget;
+})();

package/src/standalone.js

@@ -1,4 +0,0 @@
-import { loadCopilotChatWidget } from "./index.js";
-
-// Auto-boot when the bundle is dropped in via a <script> tag
-loadCopilotChatWidget();