copilot-chat-widget 0.1.5 → 0.1.7

package/README.md

@@ -8,65 +8,65 @@ Widget chat Copilot nay co the nhung bang 2 cach:
 ## Cai dat
 
 ```bash
-npm install copilot-chat-widget
-# hoac
-yarn add copilot-chat-widget
-```
-
-## Su dung voi NPM (import)
-
-```js
-import { loadCopilotChatWidget } from "copilot-chat-widget";
-
-loadCopilotChatWidget({ token: "YOUR_WIDGET_TOKEN" });
-```
-
+npm install copilot-chat-widget
+# hoac
+yarn add copilot-chat-widget
+```
+
+## Su dung voi NPM (import)
+
+```js
+import { loadCopilotChatWidget } from "copilot-chat-widget";
+
+loadCopilotChatWidget({ 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).
-- Nếu backend widget không cùng origin với web hiện tại, truyền thêm `baseUrl: "https://your-backend-domain"` để gọi đúng API.
-
-### React/Next.js
-
-```jsx
-import { useEffect } from "react";
-import { loadCopilotChatWidget } from "copilot-chat-widget";
-
+- Nếu backend widget không cùng origin với web hiện tại, truyền thêm `baseUrl: "https://your-backend-domain"` để gọi đúng API. Nếu không truyền, widget sẽ dùng giá trị build-time (`WIDGET_BASE_URL` hoặc `VITE_WIDGET_BASE_URL`), sau đó mới fallback sang origin của script/trang.
+
+### 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 // nếu backend khác origin
+      baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // nếu backend khác origin; nếu không, sẽ dùng giá trị build-time hoặc origin hiện tại
     });
   }, []);
-
-  return <main>Your page content</main>;
-}
-```
-
-## Su dung qua the `<script>` (giu 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.
-- `autoload` (boolean): dat `false` neu muon tu goi `window.CopilotChat.load()`.
-- `baseUrl` (string): host/backend cung cấp API `/api/chat-widget/config`. Can khi web embed khac origin.
-
-Khi script da load, co the goi:
-
-```js
-window.CopilotChat.open();   // mo widget
-window.CopilotChat.close();  // dong widget
-window.CopilotChat.load();   // khoi tao lai neu autoload=false
-```
+
+  return <main>Your page content</main>;
+}
+```
+
+## Su dung qua the `<script>` (giu 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.
+- `autoload` (boolean): dat `false` neu muon tu goi `window.CopilotChat.load()`.
+- `baseUrl` (string): host/backend cung cấp API `/api/chat-widget/config`. Can khi web embed khac origin.
+
+Khi script da load, co the goi:
+
+```js
+window.CopilotChat.open();   // mo widget
+window.CopilotChat.close();  // dong widget
+window.CopilotChat.load();   // khoi tao lai neu autoload=false
+```
 
 ## Build va publish package
 

package/dist/chat-widget.min.js

@@ -1,7 +1,7 @@
-(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 o=new URL(t.src,window.location.href),n={};return o.searchParams.forEach((a,s)=>{n[s]=a}),n}catch(o){return console.warn("[CopilotChat] Failed to parse script query params:",o),{}}},E=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},U=t=>{if(!t?.src)return null;try{const o=new URL(t.src,window.location.href);return`${o.protocol}//${o.host}`}catch(o){return console.warn("[CopilotChat] Unable to infer base URL from script source.",o),null}},k=()=>y||Array.from(document.querySelectorAll("script")).reverse().find(n=>n.dataset?.token||n.src&&n.src.includes("chat-widget"))||null,S=({iframeUrl:t,launcherIcon:o})=>{const n=document.querySelector("[data-copilot-widget-root]");n&&n.remove();const a=document.createElement("div");a.setAttribute("data-copilot-widget-root","true");const s=a.attachShadow({mode:"open"});document.body.appendChild(a);const e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Open Copilot chat"),e.innerHTML=`
+(function(){"use strict";(()=>{if(typeof window>"u"||typeof document>"u"||window.__copilotWidgetLoaded)return;window.__copilotWidgetLoaded=!0;const E=void 0,m=64,C=720,y=document.currentScript,x=t=>{if(!t?.src)return{};try{const o=new URL(t.src,window.location.href),n={};return o.searchParams.forEach((a,s)=>{n[s]=a}),n}catch(o){return console.warn("[CopilotChat] Failed to parse script query params:",o),{}}},U=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},S=t=>{if(!t?.src)return null;try{const o=new URL(t.src,window.location.href);return`${o.protocol}//${o.host}`}catch(o){return console.warn("[CopilotChat] Unable to infer base URL from script source.",o),null}},k=()=>y||Array.from(document.querySelectorAll("script")).reverse().find(n=>n.dataset?.token||n.src&&n.src.includes("chat-widget"))||null,L=({iframeUrl:t,launcherIcon:o})=>{const n=document.querySelector("[data-copilot-widget-root]");n&&n.remove();const a=document.createElement("div");a.setAttribute("data-copilot-widget-root","true");const s=a.attachShadow({mode:"open"});document.body.appendChild(a);const e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Open Copilot chat"),e.innerHTML=`
       <img
         src="${o}"
         alt="Copilot chat launcher"
         style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
       />
-    `,Object.assign(e.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"}),e.onmouseover=()=>{e.style.transform="scale(1.12)",e.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},e.onmouseout=()=>{e.style.transform="scale(1)",e.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const r=document.createElement("div");r.setAttribute("data-copilot-widget-root","true"),Object.assign(r.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"),c=document.createElement("div"),b=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(c.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(b.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(c),i.appendChild(b);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 l=document.createElement("iframe");l.src=t,l.title="Copilot chat widget",l.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",l.setAttribute("scrolling","no"),Object.assign(l.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),s.appendChild(d),d.appendChild(l),r.appendChild(i),r.appendChild(d),document.body.appendChild(e),document.body.appendChild(r);let p=!1;const u=()=>{p&&(p=!1,r.style.opacity="0",r.style.transform="scale(0.8) translateY(20px)",i.style.display="none",setTimeout(()=>{r.style.display="none"},250),e.style.transform="scale(1)")};e.onclick=h=>{h.stopPropagation(),p=!p,p?(r.style.display="block",i.style.display="block",requestAnimationFrame(()=>{r.style.opacity="1",r.style.transform="scale(1) translateY(0)"})):u()},window.addEventListener("message",h=>{h?.data?.type==="CHAT_CLOSED"&&u()}),document.addEventListener("click",h=>{const g=h.target;g&&p&&!r.contains(g)&&g!==e&&u()});const w={close:u,open:()=>{p||e.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 o=x(t),n=t.dataset||{},a=n.token||o.token,s=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(a||s)&&n.autoload!=="false"},v=async(t={})=>{const o=t.scriptEl||k(),n=window.CopilotChatConfig||{},a=o?.dataset||{},s=x(o),e=t.token||n.token||a.token||s.token;if(!e)return f("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const r=t.baseUrl||n.baseUrl||a.baseUrl||s.baseUrl||U(o)||typeof window<"u"&&window.location?.origin||null;if(!r)return f("Unable to resolve base URL from embedding script or window.location."),null;try{const i=await fetch(`${r}/api/chat-widget/config?token=${encodeURIComponent(e)}`,{credentials:"omit",mode:"cors"});if(!i.ok)throw new Error(`Server responded with ${i.status}`);const c=await i.json();if(!c?.iframeUrl||!c?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(d={})=>{const l={iframeUrl:d.iframeUrl||c.iframeUrl,launcherIcon:d.launcherIcon||c.launcherIcon};return S(l)},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})()})();
+    `,Object.assign(e.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"}),e.onmouseover=()=>{e.style.transform="scale(1.12)",e.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},e.onmouseout=()=>{e.style.transform="scale(1)",e.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const r=document.createElement("div");r.setAttribute("data-copilot-widget-root","true"),Object.assign(r.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"),b=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(b.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(b);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),r.appendChild(i),r.appendChild(d),document.body.appendChild(e),document.body.appendChild(r);let p=!1;const u=()=>{p&&(p=!1,r.style.opacity="0",r.style.transform="scale(0.8) translateY(20px)",i.style.display="none",setTimeout(()=>{r.style.display="none"},250),e.style.transform="scale(1)")};e.onclick=h=>{h.stopPropagation(),p=!p,p?(r.style.display="block",i.style.display="block",requestAnimationFrame(()=>{r.style.opacity="1",r.style.transform="scale(1) translateY(0)"})):u()},window.addEventListener("message",h=>{h?.data?.type==="CHAT_CLOSED"&&u()}),document.addEventListener("click",h=>{const g=h.target;g&&p&&!r.contains(g)&&g!==e&&u()});const w={close:u,open:()=>{p||e.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}`)},R=()=>{const t=k();if(!t)return!1;const o=x(t),n=t.dataset||{},a=n.token||o.token,s=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(a||s)&&n.autoload!=="false"},v=async(t={})=>{const o=t.scriptEl||k(),n=window.CopilotChatConfig||{},a=o?.dataset||{},s=x(o),e=t.token||n.token||a.token||s.token;if(!e)return f("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const r=t.baseUrl||n.baseUrl||a.baseUrl||s.baseUrl||E||S(o)||typeof window<"u"&&window.location?.origin||null;if(!r)return f("Unable to resolve base URL from embedding script or window.location."),null;try{const i=await fetch(`${r}/api/chat-widget/config?token=${encodeURIComponent(e)}`,{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 L(c)},window.CopilotChat.init(t)}catch(i){return f(i instanceof Error?i.message:"Unknown error during widget bootstrap."),null}};R()&&U(()=>{v()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=v})()})();

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var d=typeof document<"u"?document.currentScript:null;function l(n={}){if(typeof window>"u"||typeof document>"u")return null;const{token:o,autoload:i,baseUrl:a}=n;window.CopilotChatConfig={...window.CopilotChatConfig,...n};const t=document.getElementById("copilot-chat-widget-loader");if(t)return o&&(t.dataset.token=o),a&&(t.dataset.baseUrl=a),i===!1&&(t.dataset.autoload="false"),t;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:d&&d.tagName.toUpperCase()==="SCRIPT"&&d.src||new URL("index.cjs",document.baseURI).href).href,e.async=!0,o&&(e.dataset.token=o),a&&(e.dataset.baseUrl=a),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"}});var d=typeof document<"u"?document.currentScript:null;const r=void 0;function l(n={}){if(typeof window>"u"||typeof document>"u")return null;const{token:a,autoload:i,baseUrl:t=r}=n;window.CopilotChatConfig={...window.CopilotChatConfig,...n,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:d&&d.tagName.toUpperCase()==="SCRIPT"&&d.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;

package/dist/index.mjs

@@ -1,16 +1,17 @@
-function n(d = {}) {
+function n(i = {}) {
   if (typeof window > "u" || typeof document > "u")
     return null;
-  const { token: a, autoload: i, baseUrl: o } = d;
+  const { token: a, autoload: d, baseUrl: e = void 0 } = i;
   window.CopilotChatConfig = {
     ...window.CopilotChatConfig,
-    ...d
+    ...i,
+    baseUrl: e || window.CopilotChatConfig?.baseUrl || void 0
   };
-  const e = document.getElementById("copilot-chat-widget-loader");
-  if (e)
-    return a && (e.dataset.token = a), o && (e.dataset.baseUrl = o), i === !1 && (e.dataset.autoload = "false"), e;
+  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), o && (t.dataset.baseUrl = o), i === !1 && (t.dataset.autoload = "false"), document.body.appendChild(t), t;
+  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;
 }
 export {
   n as default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-chat-widget",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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): HTMLScriptElement | null;
+export default loadCopilotChatWidget;

package/src/index.js

@@ -1,34 +1,40 @@
+const BUILD_BASE_URL =
+  typeof __WIDGET_BASE_URL__ !== "undefined" && __WIDGET_BASE_URL__
+    ? __WIDGET_BASE_URL__
+    : undefined;
+
 export function loadCopilotChatWidget(options = {}) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return null;
   }
 
-  const { token, autoload, baseUrl } = options;
+  const { token, autoload, baseUrl = BUILD_BASE_URL } = options;
 
   // persist config for runtime script
   window.CopilotChatConfig = {
     ...window.CopilotChatConfig,
     ...options,
+    baseUrl: baseUrl || window.CopilotChatConfig?.baseUrl || undefined,
   };
-
-  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;
-  }
-
-  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";
-
-  document.body.appendChild(script);
-  return script;
-}
-
-export default loadCopilotChatWidget;
+
+  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;
+  }
+
+  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";
+
+  document.body.appendChild(script);
+  return script;
+}
+
+export default loadCopilotChatWidget;

package/src/widget-runtime.js

@@ -1,349 +1,354 @@
-(() => {
+(() => {
   if (typeof window === "undefined" || typeof document === "undefined") return;
   if (window.__copilotWidgetLoaded) return;
   window.__copilotWidgetLoaded = true;
 
+  const BUILD_BASE_URL =
+    typeof __WIDGET_BASE_URL__ !== "undefined" && __WIDGET_BASE_URL__
+      ? __WIDGET_BASE_URL__
+      : undefined;
   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 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 =
       config.baseUrl ||
       globalConfig.baseUrl ||
       datasetConfig.baseUrl ||
       queryConfig.baseUrl ||
+      BUILD_BASE_URL ||
       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;
-})();
+
+    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;
+})();