copilot-chat-widget 0.1.16 → 0.1.17

package/README.md

@@ -1,80 +1,63 @@
-# Copilot Chat Widget
-
-Embeddable chat widget ready for CDN drop-in or npm import.
-
-## Install
-```bash
-npm install copilot-chat-widget
-# or
-yarn add copilot-chat-widget
-```
-
-## Quick start (npm / bundler)
-```js
-import { loadCopilotChatWidget } from "copilot-chat-widget";
-
-loadCopilotChatWidget({
-  token: "YOUR_WIDGET_TOKEN",
-  // optional when backend is another origin:
-  // baseUrl: "https://your-backend-domain"
-});
-```
-`loadCopilotChatWidget` injects the standalone bundle (`chat-widget.min.js`) and boots the widget with the given 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,
-      baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // optional override
-    });
-  }, []);
-
-  return <main>Your page content</main>;
-}
-```
-
-## Quick start (script tag)
-```html
-<script
-  src="https://unpkg.com/copilot-chat-widget/dist/chat-widget.min.js"
-  data-token="YOUR_WIDGET_TOKEN"
-  data-base-url="https://your-backend-domain" <!-- optional if backend is another origin -->
-></script>
-```
-- `data-token`: required.
-- `data-base-url`: optional override; if omitted, the widget uses the build-time `WIDGET_BASE_URL`, then falls back to the script/page origin.
-- `data-autoload="false"`: insert script but call `window.CopilotChat.init()` yourself.
-
-## Configuration
-- `token` (string, required): widget token.
-- `baseUrl` (string): backend host serving `/api/chat-widget/config`. Needed when the embedding page is on a different origin. Fallback order: `baseUrl` option/data attribute → `WIDGET_BASE_URL` (build-time) → script/page origin.
-- `autoload` (boolean): set `false` to defer bootstrap and call `window.CopilotChat.load()` manually.
-
-Runtime controls:
-```js
-window.CopilotChat.open();   // open widget
-window.CopilotChat.close();  // close widget
-window.CopilotChat.load();   // initialize if autoload=false
-```
-
-### Token resolution order
-The widget looks for a token in this order:
-1. `token` passed to `loadCopilotChatWidget`
-2. `window.CopilotChatConfig.token` or `data-token` on the script tag
-3. `token` query param on the script URL
-4. `localStorage.copilotChatToken` (if previously provided)
-5. Prompt (browser `window.prompt`) if none found, then store in `localStorage` for reuse
-
-## Build & publish (for maintainers)
-```bash
-cd webui/widget
-npm install
-WIDGET_BASE_URL=https://your-backend-domain npm run build  # embed default baseUrl into bundle
-npm publish --access public
-```
-To use a different package name, update `name` in `webui/widget/package.json` before publishing.
+# Copilot Chat Widget
+
+Embeddable chat widget that can be added via NPM or a script tag.
+
+## Installation
+```bash
+npm install copilot-chat-widget
+# or
+yarn add copilot-chat-widget
+```
+
+## Usage (NPM import)
+```js
+import { loadCopilotChatWidget } from "copilot-chat-widget";
+
+loadCopilotChatWidget({
+  token: "YOUR_WIDGET_TOKEN",
+  // optional: baseUrl if backend is on a different origin
+  // baseUrl: "https://your-backend-domain"
+});
+```
+`loadCopilotChatWidget` injects the standalone script (`chat-widget.min.js`) and bootstraps the widget using the provided `token`.
+
+### React/Next.js example
+```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,
+      baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // optional override if backend is another origin
+    });
+  }, []);
+
+  return <main>Your page content</main>;
+}
+```
+
+## Usage (script tag)
+```html
+<script
+  src="https://cdn.example.com/chat-widget.min.js"
+  data-token="YOUR_WIDGET_TOKEN"
+  data-base-url="https://your-backend-domain"  <!-- optional if backend is another origin -->
+></script>
+```
+- `data-token`: required.
+- `data-base-url`: optional override; if omitted, the widget uses the build-time default `WIDGET_BASE_URL`, then falls back to the script/page origin.
+- `data-autoload="false"`: if you want to insert the script but call `window.CopilotChat.init()` manually.
+
+## Configuration
+- `token` (string, required): widget token.
+- `baseUrl` (string): backend host serving `/api/chat-widget/config`. Needed when the embedding page is on a different origin. If omitted, the widget uses `WIDGET_BASE_URL` (injected at build) then falls back to the script/page origin.
+- `autoload` (boolean): set `false` to defer bootstrap and call `window.CopilotChat.load()` yourself.
+
+Runtime controls (after script loads):
+```js
+window.CopilotChat.open();   // open widget
+window.CopilotChat.close();  // close widget
+window.CopilotChat.load();   // initialize if autoload=false
+```

package/dist/index.cjs

@@ -1 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var n=typeof document<"u"?document.currentScript:null;const r="http://localhost:3000";function l(d={}){if(typeof window>"u"||typeof document>"u")return null;const{token:a,autoload:i,baseUrl:t=r}=d;window.CopilotChatConfig={...window.CopilotChatConfig,...d,baseUrl:t||window.CopilotChatConfig?.baseUrl||void 0};const o=document.getElementById("copilot-chat-widget-loader");if(o)return a&&(o.dataset.token=a),t&&(o.dataset.baseUrl=t),i===!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,a&&(e.dataset.token=a),t&&(e.dataset.baseUrl=t),i===!1&&(e.dataset.autoload="false"),document.body.appendChild(e),e}exports.default=l;exports.loadCopilotChatWidget=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k="http://localhost:3000",w=64,C=720,E=({iframeUrl:h,launcherIcon:u})=>{const d=document.querySelector("[data-copilot-widget-root]");d&&d.remove();const g=s=>{const o=document.querySelector("[data-copilot-checkout-toast]");o&&o.remove();const r=document.createElement("div");r.setAttribute("data-copilot-checkout-toast","true"),r.innerText=s,Object.assign(r.style,{position:"fixed",top:"20px",left:"50%",transform:"translateX(-50%)",padding:"12px 16px",background:"#0f172a",color:"white",borderRadius:"12px",boxShadow:"0 8px 24px rgba(0,0,0,0.25)",zIndex:2147483647,fontSize:"14px",fontWeight:"600",maxWidth:"420px",lineHeight:"1.4",textAlign:"center"}),document.body.appendChild(r),setTimeout(()=>{r.remove()},4500)},c=document.createElement("div");c.setAttribute("data-copilot-widget-root","true");const n=c.attachShadow({mode:"open"});document.body.appendChild(c);const t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Open Copilot chat"),t.innerHTML=`
+      <img
+        src="${u}"
+        alt="Copilot chat launcher"
+        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
+      />
+    `,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${w}px`,height:`${w}px`,borderRadius:"50%",border:"none",background:"linear-gradient(135deg, #0078ff, #00c6ff)",color:"white",cursor:"pointer",zIndex:999998,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 6px 14px rgba(0,0,0,0.25)",transition:"all 0.25s ease"}),t.onmouseover=()=>{t.style.transform="scale(1.12)",t.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},t.onmouseout=()=>{t.style.transform="scale(1)",t.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const e=document.createElement("div");e.setAttribute("data-copilot-widget-root","true"),Object.assign(e.style,{display:"none",position:"fixed",bottom:`${w+36}px`,right:"24px",zIndex:"999999",transformOrigin:"bottom right",transform:"scale(0.8) translateY(20px)",opacity:"0",transition:"all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"});const l=document.createElement("div"),f=document.createElement("div"),x=document.createElement("div");Object.assign(l.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(f.style,{position:"absolute",bottom:"0",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"15px solid transparent",borderRight:"15px solid transparent",borderTop:"15px solid rgba(15,23,42,0.1)"}),Object.assign(x.style,{position:"absolute",bottom:"2px",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"13px solid transparent",borderRight:"13px solid transparent",borderTop:"13px solid white",boxShadow:"0 6px 16px rgba(15,23,42,0.12)",borderRadius:"2px"}),l.appendChild(f),l.appendChild(x);const p=document.createElement("div");Object.assign(p.style,{width:`${C}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(C,Math.max(320,window.innerHeight-140))}px`,maxHeight:"calc(100vh - 150px)",borderRadius:"20px",background:"white",border:"1px solid rgba(15,23,42,0.12)",boxShadow:"0 18px 45px rgba(15,23,42,0.16)",overflow:"hidden"}),n.appendChild(p);const i=document.createElement("iframe");i.src=h,i.title="Copilot chat widget",i.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",i.setAttribute("scrolling","no"),Object.assign(i.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),n.appendChild(p),p.appendChild(i),e.appendChild(l),e.appendChild(p),document.body.appendChild(t),document.body.appendChild(e);let a=!1;const m=()=>{a&&(a=!1,e.style.opacity="0",e.style.transform="scale(0.8) translateY(20px)",l.style.display="none",setTimeout(()=>{e.style.display="none"},250),t.style.transform="scale(1)")},v=s=>{const{data:o,source:r}=s||{};if(o?.type){if(o.type==="CART_CHECKOUT"&&r===i.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",o),g("Checkout message received from chat widget. Check console for payload.");return}if(o.type==="WIDGET_READY"&&r===i.contentWindow){i.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}o.type==="CHAT_CLOSED"&&m()}};window.addEventListener("message",v),t.onclick=s=>{s.stopPropagation(),a=!a,a?(e.style.display="block",l.style.display="block",requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1) translateY(0)"})):m()},document.addEventListener("click",s=>{const o=s.target;o&&a&&!e.contains(o)&&o!==t&&m()});const b={close:m,open:()=>{a||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=b.close,window.CopilotChat.open=b.open,window.CopilotChat.controls=b,b};async function y(h={}){if(typeof window>"u"||typeof document>"u")return null;const u=window.CopilotChatConfig||{},d=h.token||u.token||typeof window<"u"&&window.localStorage?.getItem("copilotChatToken")||null;if(!d)return console.error("[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."),null;const g=h.baseUrl||u.baseUrl||k,c=`${g.replace(/\/$/,"")}/api/chat-widget/config?token=${encodeURIComponent(d)}`;try{const n=await fetch(c,{credentials:"omit",mode:"cors"});if(!n.ok)throw new Error(`Server responded with ${n.status}`);const t=await n.json();if(!t?.iframeUrl||!t?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.token=d,window.CopilotChat.baseUrl=g,E({iframeUrl:t.iframeUrl,launcherIcon:t.launcherIcon})}catch(n){return console.error("[CopilotChat] Error during widget bootstrap:",n instanceof Error?n.message:n),null}}exports.default=y;exports.loadCopilotChatWidget=y;

package/dist/index.mjs

@@ -1,20 +1,199 @@
-const n = "http://localhost:3000";
-function l(i = {}) {
+const C = "http://localhost:3000";
+const y = ({ iframeUrl: h, launcherIcon: u }) => {
+  const d = document.querySelector("[data-copilot-widget-root]");
+  d && d.remove();
+  const g = (s) => {
+    const o = document.querySelector("[data-copilot-checkout-toast]");
+    o && o.remove();
+    const r = document.createElement("div");
+    r.setAttribute("data-copilot-checkout-toast", "true"), r.innerText = s, Object.assign(r.style, {
+      position: "fixed",
+      top: "20px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "12px 16px",
+      background: "#0f172a",
+      color: "white",
+      borderRadius: "12px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
+      zIndex: 2147483647,
+      fontSize: "14px",
+      fontWeight: "600",
+      maxWidth: "420px",
+      lineHeight: "1.4",
+      textAlign: "center"
+    }), document.body.appendChild(r), setTimeout(() => {
+      r.remove();
+    }, 4500);
+  }, c = document.createElement("div");
+  c.setAttribute("data-copilot-widget-root", "true");
+  const n = c.attachShadow({ mode: "open" });
+  document.body.appendChild(c);
+  const t = document.createElement("button");
+  t.type = "button", t.setAttribute("aria-label", "Open Copilot chat"), t.innerHTML = `
+      <img
+        src="${u}"
+        alt="Copilot chat launcher"
+        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
+      />
+    `, Object.assign(t.style, {
+    position: "fixed",
+    bottom: "24px",
+    right: "24px",
+    width: "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"
+  }), t.onmouseover = () => {
+    t.style.transform = "scale(1.12)", t.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
+  }, t.onmouseout = () => {
+    t.style.transform = "scale(1)", t.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
+  };
+  const e = document.createElement("div");
+  e.setAttribute("data-copilot-widget-root", "true"), Object.assign(e.style, {
+    display: "none",
+    position: "fixed",
+    bottom: "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 l = document.createElement("div"), b = document.createElement("div"), f = document.createElement("div");
+  Object.assign(l.style, {
+    position: "absolute",
+    bottom: "-14px",
+    right: "28px",
+    width: "30px",
+    height: "20px",
+    pointerEvents: "none",
+    display: "none",
+    zIndex: "1"
+  }), Object.assign(b.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(f.style, {
+    position: "absolute",
+    bottom: "2px",
+    left: "0",
+    right: "0",
+    margin: "0 auto",
+    width: "0",
+    height: "0",
+    borderLeft: "13px solid transparent",
+    borderRight: "13px solid transparent",
+    borderTop: "13px solid white",
+    boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
+    borderRadius: "2px"
+  }), l.appendChild(b), l.appendChild(f);
+  const p = document.createElement("div");
+  Object.assign(p.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"
+  }), n.appendChild(p);
+  const i = document.createElement("iframe");
+  i.src = h, i.title = "Copilot chat widget", i.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", i.setAttribute("scrolling", "no"), Object.assign(i.style, {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    display: "block",
+    background: "transparent",
+    overflow: "hidden"
+  }), n.appendChild(p), p.appendChild(i), e.appendChild(l), e.appendChild(p), document.body.appendChild(t), document.body.appendChild(e);
+  let a = !1;
+  const m = () => {
+    a && (a = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)", l.style.display = "none", setTimeout(() => {
+      e.style.display = "none";
+    }, 250), t.style.transform = "scale(1)");
+  }, x = (s) => {
+    const { data: o, source: r } = s || {};
+    if (o?.type) {
+      if (o.type === "CART_CHECKOUT" && r === i.contentWindow) {
+        console.log("[CopilotChat] Received checkout payload from widget:", o), g("Checkout message received from chat widget. Check console for payload.");
+        return;
+      }
+      if (o.type === "WIDGET_READY" && r === i.contentWindow) {
+        i.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
+        return;
+      }
+      o.type === "CHAT_CLOSED" && m();
+    }
+  };
+  window.addEventListener("message", x), t.onclick = (s) => {
+    s.stopPropagation(), a = !a, a ? (e.style.display = "block", l.style.display = "block", requestAnimationFrame(() => {
+      e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
+    })) : m();
+  }, document.addEventListener("click", (s) => {
+    const o = s.target;
+    o && a && !e.contains(o) && o !== t && m();
+  });
+  const w = {
+    close: m,
+    open: () => {
+      a || t.click();
+    }
+  };
+  return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = w.close, window.CopilotChat.open = w.open, window.CopilotChat.controls = w, w;
+};
+async function E(h = {}) {
   if (typeof window > "u" || typeof document > "u")
     return null;
-  const { token: a, autoload: d, baseUrl: e = n } = i;
-  window.CopilotChatConfig = {
-    ...window.CopilotChatConfig,
-    ...i,
-    baseUrl: e || window.CopilotChatConfig?.baseUrl || void 0
-  };
-  const o = document.getElementById("copilot-chat-widget-loader");
-  if (o)
-    return a && (o.dataset.token = a), e && (o.dataset.baseUrl = 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, a && (t.dataset.token = a), e && (t.dataset.baseUrl = e), d === !1 && (t.dataset.autoload = "false"), document.body.appendChild(t), t;
+  const u = window.CopilotChatConfig || {}, d = h.token || u.token || typeof window < "u" && window.localStorage?.getItem("copilotChatToken") || null;
+  if (!d)
+    return console.error(
+      "[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
+    ), null;
+  const g = h.baseUrl || u.baseUrl || C, c = `${g.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
+    d
+  )}`;
+  try {
+    const n = await fetch(c, {
+      credentials: "omit",
+      mode: "cors"
+    });
+    if (!n.ok)
+      throw new Error(`Server responded with ${n.status}`);
+    const t = await n.json();
+    if (!t?.iframeUrl || !t?.launcherIcon)
+      throw new Error("Received incomplete widget configuration from server.");
+    return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.token = d, window.CopilotChat.baseUrl = g, y({
+      iframeUrl: t.iframeUrl,
+      launcherIcon: t.launcherIcon
+    });
+  } catch (n) {
+    return console.error(
+      "[CopilotChat] Error during widget bootstrap:",
+      n instanceof Error ? n.message : n
+    ), null;
+  }
 }
 export {
-  l as default,
-  l as loadCopilotChatWidget
+  E as default,
+  E as loadCopilotChatWidget
 };

package/package.json

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

package/src/index.d.ts

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

package/src/index.js

@@ -3,38 +3,336 @@ const BUILD_BASE_URL =
     ? __WIDGET_BASE_URL__
     : undefined;
 
-export function loadCopilotChatWidget(options = {}) {
+const BUTTON_SIZE = 64;
+const IFRAME_SIZE = 720;
+
+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)",
+    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 === "WIDGET_READY" && source === iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
+      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;
+};
+
+export async function loadCopilotChatWidget(options = {}) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return null;
   }
 
-  const { token, autoload, baseUrl = BUILD_BASE_URL } = options;
+  const globalConfig = window.CopilotChatConfig || {};
+  const token =
+    options.token ||
+    globalConfig.token ||
+    (typeof window !== "undefined"
+      ? window.localStorage?.getItem("copilotChatToken") || null
+      : null);
 
-  // Persist config for the runtime script
-  window.CopilotChatConfig = {
-    ...window.CopilotChatConfig,
-    ...options,
-    baseUrl: baseUrl || window.CopilotChatConfig?.baseUrl || undefined,
-  };
+  if (!token) {
+    console.error(
+      "[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
+    );
+    return null;
+  }
+
+  const baseUrl =
+    options.baseUrl ||
+    globalConfig.baseUrl ||
+    BUILD_BASE_URL ||
+    (typeof window !== "undefined" && window.location?.origin) ||
+    null;
 
-  const existing = document.getElementById("copilot-chat-widget-loader");
-  if (existing) {
-    if (token) existing.dataset.token = token;
-    if (baseUrl) existing.dataset.baseUrl = baseUrl;
-    if (autoload === false) existing.dataset.autoload = "false";
-    return existing;
+  if (!baseUrl) {
+    console.error(
+      "[CopilotChat] Missing baseUrl (set via loadCopilotChatWidget({ baseUrl }), window.CopilotChatConfig.baseUrl, or WIDGET_BASE_URL)."
+    );
+    return null;
   }
 
-  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 (baseUrl) script.dataset.baseUrl = baseUrl;
-  if (autoload === false) script.dataset.autoload = "false";
+  const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
+    token
+  )}`;
 
-  document.body.appendChild(script);
-  return script;
+  try {
+    const response = await fetch(url, {
+      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.token = token;
+    window.CopilotChat.baseUrl = baseUrl;
+
+    return buildWidget({
+      iframeUrl: remoteConfig.iframeUrl,
+      launcherIcon: remoteConfig.launcherIcon,
+    });
+  } catch (error) {
+    console.error(
+      "[CopilotChat] Error during widget bootstrap:",
+      error instanceof Error ? error.message : error
+    );
+    return null;
+  }
 }
 
 export default loadCopilotChatWidget;