copilot-chat-widget 0.1.0

package/README.md

@@ -0,0 +1,94 @@
+# 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
+
+```js
+import { loadCopilotChatWidget } from "copilot-chat-widget";
+
+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"
+});
+```
+
+### React/Next.js
+
+```jsx
+import { useEffect } from "react";
+import { loadCopilotChatWidget } from "copilot-chat-widget";
+
+export default function Page() {
+  useEffect(() => {
+    loadCopilotChatWidget({
+      token: process.env.NEXT_PUBLIC_CHAT_WIDGET_TOKEN
+    });
+  }, []);
+
+  return <main>Your page content</main>;
+}
+```
+
+## Su dung qua the `<script>` (giu nguyen hanh vi cu)
+
+```html
+<script
+  src="https://cdn.example.com/chat-widget.min.js"
+  data-token="YOUR_WIDGET_TOKEN"
+></script>
+```
+
+- `data-token`: bat buoc.
+- `data-autoload="false"`: neu muon chen script nhung tu goi `window.CopilotChat.init()` sau.
+
+## API cau hinh
+
+- `token` (string, bat buoc): ma token widget.
+- `force` (boolean): cho phep khoi dong lai widget neu da co instance truoc do.
+
+Khi da khoi dong, 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
+```
+
+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

@@ -0,0 +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=`
+      <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"),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||{});

package/dist/index.cjs

@@ -0,0 +1,7 @@
+"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;

package/dist/index.mjs

@@ -0,0 +1,230 @@
+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 = () => {
+  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();
+export {
+  O as initCopilotChatWidget,
+  U as loadCopilotChatWidget,
+  E as resolveEmbeddingScript
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "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"
+  }
+}

package/src/index.js

@@ -0,0 +1,425 @@
+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 = () => {
+  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);
+
+  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);
+    };
+
+    const controls = window.CopilotChat.init(config);
+    return controls;
+  } catch (error) {
+    handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
+    return null;
+  }
+};
+
+export const loadCopilotChatWidget = (config = {}) =>
+  new Promise((resolve) => {
+    if (typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    ready(() => {
+      initCopilotChatWidget(config).then(resolve);
+    });
+  });
+
+if (shouldAutoBootstrapFromScript()) {
+  loadCopilotChatWidget();
+}

package/src/standalone.js

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