copilot-chat-widget 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -1,230 +1,198 @@
-const y = typeof document < "u" ? document.currentScript : null, x = (t) => {
-  if (!t?.src) return {};
-  try {
-    const n = new URL(t.src, typeof window < "u" ? window.location.href : void 0), i = {};
-    return n.searchParams.forEach((l, s) => {
-      i[s] = l;
-    }), i;
-  } catch (n) {
-    return console.warn("[CopilotChat] Failed to parse script query params:", n), {};
-  }
-}, v = (t) => {
-  typeof document > "u" || (document.readyState === "complete" || document.readyState === "interactive" ? setTimeout(t, 0) : document.addEventListener("DOMContentLoaded", t));
-}, S = (t) => "http://localhost:3000", T = ({ iframeUrl: t, launcherIcon: n }) => {
-  const i = document.querySelector("[data-copilot-widget-root]");
-  i && i.remove();
-  const l = (u) => {
-    const a = document.querySelector("[data-copilot-checkout-toast]");
+(function() {
+  if (typeof window > "u" || window.__copilotWidgetLoaded)
+    return;
+  window.__copilotWidgetLoaded = !0;
+  const b = 64, C = 720, E = document.currentScript, v = "http://localhost:3000", k = (e) => {
+    if (!e?.src) return {};
+    try {
+      const n = new URL(e.src, window.location.href), r = {};
+      return n.searchParams.forEach((a, h) => {
+        r[h] = a;
+      }), r;
+    } catch (n) {
+      return console.warn("[CopilotChat] Failed to parse script query params:", n), {};
+    }
+  }, I = (e) => {
+    document.readyState === "complete" || document.readyState === "interactive" ? setTimeout(e, 0) : document.addEventListener("DOMContentLoaded", e);
+  }, S = (e) => e.endsWith("/") ? e.slice(0, -1) : e, A = ({ iframeUrl: e, launcherIcon: n, theme: r = {} }) => {
+    const a = document.querySelector("[data-copilot-widget-root]");
     a && a.remove();
-    const h = document.createElement("div");
-    h.setAttribute("data-copilot-checkout-toast", "true"), h.innerText = u, Object.assign(h.style, {
-      position: "fixed",
-      top: "20px",
-      left: "50%",
-      transform: "translateX(-50%)",
-      padding: "12px 16px",
-      background: "#0f172a",
-      color: "white",
-      borderRadius: "12px",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-      zIndex: 2147483647,
-      fontSize: "14px",
-      fontWeight: "600",
-      maxWidth: "420px",
-      lineHeight: "1.4",
-      textAlign: "center"
-    }), document.body.appendChild(h), setTimeout(() => {
-      h.remove();
-    }, 4500);
-  }, s = document.createElement("div");
-  s.setAttribute("data-copilot-widget-root", "true");
-  const f = s.attachShadow({ mode: "open" });
-  document.body.appendChild(s);
-  const o = document.createElement("button");
-  o.type = "button", o.setAttribute("aria-label", "Open Copilot chat"), o.innerHTML = `
+    const { accent: h = "linear-gradient(135deg, #0078ff, #00c6ff)" } = r, m = document.createElement("div");
+    m.setAttribute("data-copilot-widget-root", "true");
+    const u = m.attachShadow({ mode: "open" });
+    document.body.appendChild(m);
+    const t = document.createElement("button");
+    t.type = "button", t.setAttribute("aria-label", "Open Copilot chat"), t.innerHTML = `
       <img
         src="${n}"
         alt="Copilot chat launcher"
         style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
       />
-    `, Object.assign(o.style, {
-    position: "fixed",
-    bottom: "24px",
-    right: "24px",
-    width: "64px",
-    height: "64px",
-    borderRadius: "50%",
-    border: "none",
-    background: "linear-gradient(135deg, #0078ff, #00c6ff)",
-    color: "white",
-    cursor: "pointer",
-    zIndex: 999998,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
-    transition: "all 0.25s ease"
-  }), o.onmouseover = () => {
-    o.style.transform = "scale(1.12)", o.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
-  }, o.onmouseout = () => {
-    o.style.transform = "scale(1)", o.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
-  };
-  const e = document.createElement("div");
-  e.setAttribute("data-copilot-widget-root", "true"), Object.assign(e.style, {
-    display: "none",
-    position: "fixed",
-    bottom: "100px",
-    right: "24px",
-    zIndex: "999999",
-    transformOrigin: "bottom right",
-    transform: "scale(0.8) translateY(20px)",
-    opacity: "0",
-    transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"
-  });
-  const r = document.createElement("div"), m = document.createElement("div"), C = document.createElement("div");
-  Object.assign(r.style, {
-    position: "absolute",
-    bottom: "-14px",
-    right: "28px",
-    width: "30px",
-    height: "20px",
-    pointerEvents: "none",
-    display: "none",
-    zIndex: "1"
-  }), Object.assign(m.style, {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    right: "0",
-    margin: "0 auto",
-    width: "0",
-    height: "0",
-    borderLeft: "15px solid transparent",
-    borderRight: "15px solid transparent",
-    borderTop: "15px solid rgba(15,23,42,0.1)"
-  }), Object.assign(C.style, {
-    position: "absolute",
-    bottom: "2px",
-    left: "0",
-    right: "0",
-    margin: "0 auto",
-    width: "0",
-    height: "0",
-    borderLeft: "13px solid transparent",
-    borderRight: "13px solid transparent",
-    borderTop: "13px solid white",
-    boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
-    borderRadius: "2px"
-  }), r.appendChild(m), r.appendChild(C);
-  const c = document.createElement("div");
-  Object.assign(c.style, {
-    width: "720px",
-    maxWidth: "calc(100vw - 48px)",
-    // keep height responsive to viewport to avoid outer scrollbars
-    height: `${Math.min(720, Math.max(320, window.innerHeight - 140))}px`,
-    maxHeight: "calc(100vh - 150px)",
-    borderRadius: "20px",
-    background: "white",
-    border: "1px solid rgba(15,23,42,0.12)",
-    boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
-    overflow: "hidden"
-  }), f.appendChild(c);
-  const d = document.createElement("iframe");
-  d.src = t, d.title = "Copilot chat widget", d.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", d.setAttribute("scrolling", "no"), Object.assign(d.style, {
-    width: "100%",
-    height: "100%",
-    border: "none",
-    display: "block",
-    background: "transparent",
-    overflow: "hidden"
-  }), f.appendChild(c), c.appendChild(d), e.appendChild(r), e.appendChild(c), document.body.appendChild(o), document.body.appendChild(e);
-  let p = !1;
-  const w = () => {
-    p && (p = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)", r.style.display = "none", setTimeout(() => {
-      e.style.display = "none";
-    }, 250), o.style.transform = "scale(1)");
-  }, k = (u) => {
-    const { data: a, source: h } = u || {};
-    if (a?.type) {
-      if (a.type === "CART_CHECKOUT" && h === d.contentWindow) {
-        console.log("[CopilotChat] Received checkout payload from widget:", a), l("Checkout message received from chat widget. Check console for payload.");
-        return;
+    `, Object.assign(t.style, {
+      position: "fixed",
+      bottom: "24px",
+      right: "24px",
+      width: `${b}px`,
+      height: `${b}px`,
+      borderRadius: "50%",
+      border: "none",
+      background: h,
+      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 o = document.createElement("div");
+    o.setAttribute("data-copilot-widget-root", "true"), Object.assign(o.style, {
+      display: "none",
+      position: "fixed",
+      bottom: `${b + 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"), g = document.createElement("div");
+    Object.assign(i.style, {
+      position: "absolute",
+      bottom: "-14px",
+      right: "28px",
+      width: "30px",
+      height: "20px",
+      pointerEvents: "none",
+      display: "none",
+      zIndex: "1"
+    }), Object.assign(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(g.style, {
+      position: "absolute",
+      bottom: "2px",
+      left: "0",
+      right: "0",
+      margin: "0 auto",
+      width: "0",
+      height: "0",
+      borderLeft: "13px solid transparent",
+      borderRight: "13px solid transparent",
+      borderTop: "13px solid white",
+      boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
+      borderRadius: "2px"
+    }), i.appendChild(c), i.appendChild(g);
+    const s = document.createElement("div");
+    Object.assign(s.style, {
+      width: `${C}px`,
+      maxWidth: "calc(100vw - 48px)",
+      // keep height responsive to viewport to avoid outer scrollbars
+      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"
+    }), u.appendChild(s);
+    const d = document.createElement("iframe");
+    d.src = e, d.title = "Copilot chat widget", d.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", d.setAttribute("scrolling", "no"), Object.assign(d.style, {
+      width: "100%",
+      height: "100%",
+      border: "none",
+      display: "block",
+      background: "transparent",
+      overflow: "hidden"
+    }), u.appendChild(s), s.appendChild(d), o.appendChild(i), o.appendChild(s), document.body.appendChild(t), document.body.appendChild(o), window.addEventListener("message", (p) => {
+      p.data?.type === "WIDGET_READY" && d.contentWindow.postMessage(
+        { type: "INIT_WIDGET" },
+        "*"
+      );
+    });
+    let l = !1;
+    const w = () => {
+      l && (l = !1, o.style.opacity = "0", o.style.transform = "scale(0.8) translateY(20px)", i.style.display = "none", setTimeout(() => {
+        o.style.display = "none";
+      }, 250), t.style.transform = "scale(1)");
+    };
+    t.onclick = (p) => {
+      p.stopPropagation(), l = !l, l ? (o.style.display = "block", i.style.display = "block", requestAnimationFrame(() => {
+        o.style.opacity = "1", o.style.transform = "scale(1) translateY(0)";
+      })) : w();
+    }, window.addEventListener("message", (p) => {
+      p?.data?.type === "CHAT_CLOSED" && w();
+    }), document.addEventListener("click", (p) => {
+      const x = p.target;
+      x && l && !o.contains(x) && x !== t && w();
+    });
+    const y = {
+      close: w,
+      open: () => {
+        l || t.click();
       }
-      a.type === "CHAT_CLOSED" && w();
+    };
+    return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = y.close, window.CopilotChat.open = y.open, y;
+  }, f = (e) => {
+    console.error(`[CopilotChat] ${e}`);
+  }, U = () => E || Array.from(document.querySelectorAll("script")).reverse().find((r) => r.dataset?.token || r.src.includes("chat-widget")) || null;
+  I(async () => {
+    const e = U();
+    if (!e) {
+      f("Unable to locate the embedding script tag on the page.");
+      return;
     }
-  };
-  window.addEventListener("message", k), o.onclick = (u) => {
-    u.stopPropagation(), p = !p, p ? (e.style.display = "block", r.style.display = "block", requestAnimationFrame(() => {
-      e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
-    })) : w();
-  }, document.addEventListener("click", (u) => {
-    const a = u.target;
-    a && p && !e.contains(a) && a !== o && w();
-  });
-  const g = {
-    close: w,
-    open: () => {
-      p || o.click();
+    const n = window.CopilotChatConfig || {}, r = e.dataset || {}, a = k(e), h = n.token || r.token || a.token;
+    if (!h) {
+      f("Missing token (provide via window.CopilotChatConfig.token or data-token attribute).");
+      return;
     }
-  };
-  return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = g.close, window.CopilotChat.open = g.open, window.CopilotChat.controls = g, g;
-}, b = (t) => {
-  console.error(`[CopilotChat] ${t}`);
-}, E = () => y || (typeof document > "u" ? null : Array.from(document.querySelectorAll("script")).reverse().find((i) => i.dataset?.token || i.src && i.src.includes("chat-widget")) || null), I = () => {
-  if (typeof window > "u" || typeof document > "u")
-    return !1;
-  const t = E();
-  if (!t) return !1;
-  const n = x(t), i = t.dataset || {}, l = i.token || n.token, s = typeof window < "u" && window.CopilotChatConfig && window.CopilotChatConfig.token;
-  return (l || s) && i.autoload !== "false";
-}, O = async (t = {}) => {
-  if (typeof window > "u" || typeof document > "u")
-    return b("Window or document is not available. This widget runs in browsers only."), null;
-  if (window.__copilotWidgetLoaded && !t.force)
-    return window.CopilotChat?.controls || null;
-  window.__copilotWidgetLoaded = !0;
-  const n = t.scriptEl || E(), i = window.CopilotChatConfig || {}, l = n?.dataset || {}, s = x(n), f = t.token || i.token || l.token || s.token;
-  if (!f)
-    return b("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."), null;
-  const o = S();
-  if (!o)
-    return b("Unable to resolve base URL from embedding script or window.location."), null;
-  try {
-    const e = await fetch(`${o}/api/chat-widget/config?token=${encodeURIComponent(f)}`, {
-      credentials: "omit",
-      mode: "cors"
-    });
-    if (!e.ok)
-      throw new Error(`Server responded with ${e.status}`);
-    const r = await e.json();
-    if (!r?.iframeUrl || !r?.launcherIcon)
-      throw new Error("Received incomplete widget configuration from server.");
-    const m = {
-      iframeUrl: r.iframeUrl,
-      launcherIcon: r.launcherIcon
-    };
-    return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.init = (c = {}) => {
-      const d = {
-        iframeUrl: c.iframeUrl || m.iframeUrl,
-        launcherIcon: c.launcherIcon || m.launcherIcon
+    const m = S(
+      v
+    ), u = n.theme && n.theme.accent || n.accent || r.themeAccent || a.themeAccent;
+    try {
+      const t = await fetch(`${m}/api/chat-widget/config?token=${encodeURIComponent(h)}`, {
+        credentials: "omit",
+        mode: "cors"
+      });
+      if (!t.ok)
+        throw new Error(`Server responded with ${t.status}`);
+      const o = await t.json();
+      if (!o?.iframeUrl || !o?.launcherIcon)
+        throw new Error("Received incomplete widget configuration from server.");
+      const i = {
+        iframeUrl: o.iframeUrl,
+        launcherIcon: o.launcherIcon,
+        theme: {
+          accent: u || o.theme?.accent || void 0
+        }
       };
-      return T(d);
-    }, window.CopilotChat.init(t);
-  } catch (e) {
-    return b(e instanceof Error ? e.message : "Unknown error during widget bootstrap."), null;
-  }
-}, U = (t = {}) => new Promise((n) => {
-  if (typeof document > "u") {
-    n(null);
-    return;
-  }
-  v(() => {
-    O(t).then(n);
+      window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.init = (c = {}) => {
+        const g = {
+          accent: c.theme?.accent || c.accent || i.theme.accent || (typeof n.theme == "object" ? n.theme.accent : void 0) || n.accent
+        }, s = {
+          iframeUrl: c.iframeUrl || i.iframeUrl,
+          launcherIcon: c.launcherIcon || i.launcherIcon,
+          theme: g
+        };
+        return A(s);
+      }, window.CopilotChat.init(n);
+    } catch (t) {
+      f(t instanceof Error ? t.message : "Unknown error during widget bootstrap.");
+    }
   });
-});
-I() && U();
-export {
-  O as initCopilotChatWidget,
-  U as loadCopilotChatWidget,
-  E as resolveEmbeddingScript
-};
+})();

package/package.json

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