copilot-chat-widget 0.1.13 → 0.1.15

package/README.md

@@ -1,72 +1,80 @@
-# 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
-```
-
-## 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 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.

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 v="http://localhost:3000",m=64,f=720,C=document.currentScript,y=t=>{if(!t?.src)return{};try{const i=new URL(t.src,window.location.href),o={};return i.searchParams.forEach((a,s)=>{o[s]=a}),o}catch(i){return console.warn("[CopilotChat] Failed to parse script query params:",i),{}}},S=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},x=()=>C||Array.from(document.querySelectorAll("script")).reverse().find(o=>o.dataset?.token||o.src&&o.src.includes("chat-widget"))||null,U=({iframeUrl:t,launcherIcon:i})=>{const o=document.querySelector("[data-copilot-widget-root]");o&&o.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 S="http://localhost:3000",g=64,C=720,b=document.currentScript,y=t=>{if(!t?.src)return{};try{const s=new URL(t.src,window.location.href),o={};return s.searchParams.forEach((d,c)=>{o[c]=d}),o}catch(s){return console.warn("[CopilotChat] Failed to parse script query params:",s),{}}},T=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},x=()=>b||Array.from(document.querySelectorAll("script")).reverse().find(o=>o.dataset?.token||o.src&&o.src.includes("chat-widget"))||null,I=({iframeUrl:t,launcherIcon:s})=>{const o=document.querySelector("[data-copilot-widget-root]");o&&o.remove();const d=document.createElement("div");d.setAttribute("data-copilot-widget-root","true");const c=d.attachShadow({mode:"open"});document.body.appendChild(d);const e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Open Copilot chat"),e.innerHTML=`
       <img
-        src="${i}"
+        src="${s}"
         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 n=document.createElement("div");n.setAttribute("data-copilot-widget-root","true"),Object.assign(n.style,{display:"none",position:"fixed",bottom:`${m+36}px`,right:"24px",zIndex:"999999",transformOrigin:"bottom right",transform:"scale(0.8) translateY(20px)",opacity:"0",transition:"all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"});const r=document.createElement("div"),l=document.createElement("div"),g=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(l.style,{position:"absolute",bottom:"0",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"15px solid transparent",borderRight:"15px solid transparent",borderTop:"15px solid rgba(15,23,42,0.1)"}),Object.assign(g.style,{position:"absolute",bottom:"2px",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"13px solid transparent",borderRight:"13px solid transparent",borderTop:"13px solid white",boxShadow:"0 6px 16px rgba(15,23,42,0.12)",borderRadius:"2px"}),r.appendChild(l),r.appendChild(g);const d=document.createElement("div");Object.assign(d.style,{width:`${f}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(f,Math.max(320,window.innerHeight-140))}px`,maxHeight:"calc(100vh - 150px)",borderRadius:"20px",background:"white",border:"1px solid rgba(15,23,42,0.12)",boxShadow:"0 18px 45px rgba(15,23,42,0.16)",overflow:"hidden"}),s.appendChild(d);const c=document.createElement("iframe");c.src=t,c.title="Copilot chat widget",c.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",c.setAttribute("scrolling","no"),Object.assign(c.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),s.appendChild(d),d.appendChild(c),n.appendChild(r),n.appendChild(d),document.body.appendChild(e),document.body.appendChild(n);let p=!1;const u=()=>{p&&(p=!1,n.style.opacity="0",n.style.transform="scale(0.8) translateY(20px)",r.style.display="none",setTimeout(()=>{n.style.display="none"},250),e.style.transform="scale(1)")};e.onclick=h=>{h.stopPropagation(),p=!p,p?(n.style.display="block",r.style.display="block",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="scale(1) translateY(0)"})):u()},window.addEventListener("message",h=>{h?.data?.type==="CHAT_CLOSED"&&u()}),document.addEventListener("click",h=>{const b=h.target;b&&p&&!n.contains(b)&&b!==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},k=t=>{console.error(`[CopilotChat] ${t}`)},I=()=>{const t=x();if(!t)return!1;const i=y(t),o=t.dataset||{},a=o.token||i.token,s=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(a||s)&&o.autoload!=="false"},E=async(t={})=>{const i=t.scriptEl||x(),o=window.CopilotChatConfig||{},a=i?.dataset||{},s=y(i),e=t.token||o.token||a.token||s.token;if(!e)return k("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const n=t.baseUrl||o.baseUrl||a.baseUrl||s.baseUrl||v;try{const r=await fetch(`${n}/api/chat-widget/config?token=${encodeURIComponent(e)}`,{credentials:"omit",mode:"cors"});if(!r.ok)throw new Error(`Server responded with ${r.status}`);const l=await r.json();if(!l?.iframeUrl||!l?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(d={})=>{const c={iframeUrl:d.iframeUrl||l.iframeUrl,launcherIcon:d.launcherIcon||l.launcherIcon};return U(c)},window.CopilotChat.init(t)}catch(r){return k(r instanceof Error?r.message:"Unknown error during widget bootstrap."),null}};I()&&S(()=>{E()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=E})()})();
+    `,Object.assign(e.style,{position:"fixed",bottom:"24px",right:"24px",width:`${g}px`,height:`${g}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 n=document.createElement("div");n.setAttribute("data-copilot-widget-root","true"),Object.assign(n.style,{display:"none",position:"fixed",bottom:`${g+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 h=document.createElement("div"),i=document.createElement("div"),r=document.createElement("div");Object.assign(h.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(i.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(r.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"}),h.appendChild(i),h.appendChild(r);const u=document.createElement("div");Object.assign(u.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"}),c.appendChild(u);const a=document.createElement("iframe");a.src=t,a.title="Copilot chat widget",a.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",a.setAttribute("scrolling","no"),Object.assign(a.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),c.appendChild(u),u.appendChild(a),n.appendChild(h),n.appendChild(u),document.body.appendChild(e),document.body.appendChild(n);let l=!1;const f=()=>{l&&(l=!1,n.style.opacity="0",n.style.transform="scale(0.8) translateY(20px)",h.style.display="none",setTimeout(()=>{n.style.display="none"},250),e.style.transform="scale(1)")},O=w=>{const{data:p,source:v}=w||{};if(p?.type){if(p.type==="CART_CHECKOUT"&&v===a.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",p),showCheckoutToast("Checkout message received from chat widget. Check console for payload.");return}if(p.type==="WIDGET_READY"&&v===a.contentWindow){a.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}p.type==="CHAT_CLOSED"&&f()}};e.onclick=w=>{w.stopPropagation(),l=!l,l?(n.style.display="block",h.style.display="block",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="scale(1) translateY(0)"})):f()},window.addEventListener("message",O),document.addEventListener("click",w=>{const p=w.target;p&&l&&!n.contains(p)&&p!==e&&f()});const m={close:f,open:()=>{l||e.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=m.close,window.CopilotChat.open=m.open,window.CopilotChat.controls=m,m},k=t=>{console.error(`[CopilotChat] ${t}`)},U=()=>{const t=x();if(!t)return!1;const s=y(t),o=t.dataset||{},d=o.token||s.token,c=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(d||c)&&o.autoload!=="false"},E=async(t={})=>{const s=t.scriptEl||x(),o=window.CopilotChatConfig||{},d=s?.dataset||{},c=y(s),n=(()=>{const i=t.token||o.token||d.token||c.token;if(i)return i;try{const r=window.localStorage.getItem("copilotChatToken");if(r)return r}catch{}if(typeof window<"u"&&typeof window.prompt=="function"){const r=window.prompt("Enter your Copilot Chat token:");if(r){try{window.localStorage.setItem("copilotChatToken",r)}catch{}return r}}return null})();if(!n)return k("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const h=t.baseUrl||o.baseUrl||d.baseUrl||c.baseUrl||S;try{const i=await fetch(`${h}/api/chat-widget/config?token=${encodeURIComponent(n)}`,{credentials:"omit",mode:"cors"});if(!i.ok)throw new Error(`Server responded with ${i.status}`);const r=await i.json();if(!r?.iframeUrl||!r?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(a={})=>{const l={iframeUrl:a.iframeUrl||r.iframeUrl,launcherIcon:a.launcherIcon||r.launcherIcon};return I(l)},window.CopilotChat.init(t)}catch(i){return k(i instanceof Error?i.message:"Unknown error during widget bootstrap."),null}};U()&&T(()=>{E()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=E})()})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-chat-widget",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Embeddable Copilot chat widget that can be loaded via NPM or a script tag.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,9 +8,11 @@
   "types": "./src/index.d.ts",
   "exports": {
     ".": {
+      "types": "./src/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./package.json": "./package.json",
     "./dist/chat-widget.min.js": "./dist/chat-widget.min.js"
   },
   "files": [

package/src/index.js

@@ -10,31 +10,31 @@ export function loadCopilotChatWidget(options = {}) {
 
   const { token, autoload, baseUrl = BUILD_BASE_URL } = options;
 
-  // persist config for runtime script
+  // Persist config for the 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,15 +1,15 @@
 (() => {
-  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;
+  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 {};
@@ -221,26 +221,42 @@
       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();
-      }
-    });
+    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();
+      }
+    };
+
+    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", handleWidgetMessage);
 
     document.addEventListener("click", (event) => {
       const target = event.target;
@@ -287,22 +303,48 @@
     const datasetConfig = scriptEl?.dataset || {};
     const queryConfig = readQueryConfig(scriptEl);
 
-    const token = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
+    const resolveToken = () => {
+      const fromConfig = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
+      if (fromConfig) return fromConfig;
+
+      try {
+        const stored = window.localStorage.getItem("copilotChatToken");
+        if (stored) return stored;
+      } catch (error) {
+        // ignore storage errors
+      }
+
+      if (typeof window !== "undefined" && typeof window.prompt === "function") {
+        const entered = window.prompt("Enter your Copilot Chat token:");
+        if (entered) {
+          try {
+            window.localStorage.setItem("copilotChatToken", entered);
+          } catch (error) {
+            // ignore storage errors
+          }
+          return entered;
+        }
+      }
+
+      return null;
+    };
+
+    const token = resolveToken();
 
     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;
+    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.");