copilot-chat-widget 0.1.0 → 0.1.1

package/src/index.js

@@ -1,425 +1,371 @@
-const BUTTON_SIZE = 64;
-const IFRAME_SIZE = 720;
-const embeddingScript = typeof document !== "undefined" ? document.currentScript : null;
-
-const readQueryConfig = (scriptEl) => {
-  if (!scriptEl?.src) return {};
-  try {
-    const url = new URL(scriptEl.src, typeof window !== "undefined" ? window.location.href : undefined);
-    const params = {};
-    url.searchParams.forEach((value, key) => {
-      params[key] = value;
-    });
-    return params;
-  } catch (error) {
-    console.warn("[CopilotChat] Failed to parse script query params:", error);
-    return {};
-  }
-};
-
-const ready = (fn) => {
-  if (typeof document === "undefined") return;
-  if (document.readyState === "complete" || document.readyState === "interactive") {
-    setTimeout(fn, 0);
-  } else {
-    document.addEventListener("DOMContentLoaded", fn);
-  }
-};
-
-const inferBaseUrlFromScript = (scriptEl) => {
-  if (!scriptEl?.src || typeof window === "undefined") return null;
-  try {
-    const srcUrl = new URL(scriptEl.src, window.location.href);
-    return `${srcUrl.protocol}//${srcUrl.host}`;
-  } catch (error) {
-    console.warn("[CopilotChat] Unable to infer base URL from script source.", error);
-    return null;
-  }
-};
-
-const resolveBaseUrl = (scriptEl) => {
-  // Use the build-time defined base URL from VITE_CHAT_WIDGET_BASE_URL
-  if (typeof CHAT_WIDGET_BASE_URL !== "undefined") {
-    return CHAT_WIDGET_BASE_URL;
-  }
-
-  // Fallback to inferred URL from script
-  const inferred = inferBaseUrlFromScript(scriptEl);
-  if (inferred) return inferred;
-
-  // Final fallback to window location
-  if (typeof window !== "undefined" && window.location?.origin) {
-    return window.location.origin;
-  }
-  return null;
-};
-
-const buildWidget = ({ iframeUrl, launcherIcon }) => {
-  const existingRoot = document.querySelector("[data-copilot-widget-root]");
-  if (existingRoot) {
-    existingRoot.remove();
-  }
-
-  const showCheckoutToast = (message) => {
-    const existingToast = document.querySelector("[data-copilot-checkout-toast]");
-    if (existingToast) {
-      existingToast.remove();
-    }
-
-    const toast = document.createElement("div");
-    toast.setAttribute("data-copilot-checkout-toast", "true");
-    toast.innerText = message;
-
-    Object.assign(toast.style, {
-      position: "fixed",
-      top: "20px",
-      left: "50%",
-      transform: "translateX(-50%)",
-      padding: "12px 16px",
-      background: "#0f172a",
-      color: "white",
-      borderRadius: "12px",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-      zIndex: 2147483647,
-      fontSize: "14px",
-      fontWeight: "600",
-      maxWidth: "420px",
-      lineHeight: "1.4",
-      textAlign: "center",
-    });
-
-    document.body.appendChild(toast);
-
-    setTimeout(() => {
-      toast.remove();
-    }, 4500);
-  };
-
-  // ---------- Shadow DOM container ----------
-  const containerHost = document.createElement("div");
-  containerHost.setAttribute("data-copilot-widget-root", "true");
-  const shadow = containerHost.attachShadow({ mode: "open" });
-  document.body.appendChild(containerHost);
-
-  // ---------- Button ----------
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.setAttribute("aria-label", "Open Copilot chat");
-  btn.innerHTML = `
-      <img
-        src="${launcherIcon}"
-        alt="Copilot chat launcher"
-        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
-      />
-    `;
-
-  Object.assign(btn.style, {
-    position: "fixed",
-    bottom: "24px",
-    right: "24px",
-    width: `${BUTTON_SIZE}px`,
-    height: `${BUTTON_SIZE}px`,
-    borderRadius: "50%",
-    border: "none",
-    background: "linear-gradient(135deg, #0078ff, #00c6ff)",
-    color: "white",
-    cursor: "pointer",
-    zIndex: 999998,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
-    transition: "all 0.25s ease",
-  });
-
-  btn.onmouseover = () => {
-    btn.style.transform = "scale(1.12)";
-    btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
-  };
-  btn.onmouseout = () => {
-    btn.style.transform = "scale(1)";
-    btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
-  };
-
-  const container = document.createElement("div");
-  container.setAttribute("data-copilot-widget-root", "true");
-  Object.assign(container.style, {
-    display: "none",
-    position: "fixed",
-    bottom: `${BUTTON_SIZE + 36}px`,
-    right: "24px",
-    zIndex: "999999",
-    transformOrigin: "bottom right",
-    transform: "scale(0.8) translateY(20px)",
-    opacity: "0",
-    transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  });
-
-  const arrow = document.createElement("div");
-  const arrowBorder = document.createElement("div");
-  const arrowFill = document.createElement("div");
-
-  Object.assign(arrow.style, {
-    position: "absolute",
-    bottom: "-14px",
-    right: "28px",
-    width: "30px",
-    height: "20px",
-    pointerEvents: "none",
-    display: "none",
-    zIndex: "1",
-  });
-
-  Object.assign(arrowBorder.style, {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    right: "0",
-    margin: "0 auto",
-    width: "0",
-    height: "0",
-    borderLeft: "15px solid transparent",
-    borderRight: "15px solid transparent",
-    borderTop: "15px solid rgba(15,23,42,0.1)",
-  });
-
-  Object.assign(arrowFill.style, {
-    position: "absolute",
-    bottom: "2px",
-    left: "0",
-    right: "0",
-    margin: "0 auto",
-    width: "0",
-    height: "0",
-    borderLeft: "13px solid transparent",
-    borderRight: "13px solid transparent",
-    borderTop: "13px solid white",
-    boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
-    borderRadius: "2px",
-  });
-
-  arrow.appendChild(arrowBorder);
-  arrow.appendChild(arrowFill);
-
-  const frameWrapper = document.createElement("div");
-  Object.assign(frameWrapper.style, {
-    width: `${IFRAME_SIZE}px`,
-    maxWidth: "calc(100vw - 48px)",
-    // keep height responsive to viewport to avoid outer scrollbars
-    height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
-    maxHeight: "calc(100vh - 150px)",
-    borderRadius: "20px",
-    background: "white",
-    border: "1px solid rgba(15,23,42,0.12)",
-    boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
-    overflow: "hidden",
-  });
-  shadow.appendChild(frameWrapper);
-
-  const iframe = document.createElement("iframe");
-  iframe.src = iframeUrl;
-  iframe.title = "Copilot chat widget";
-  iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
-  iframe.setAttribute("scrolling", "no");
-  Object.assign(iframe.style, {
-    width: "100%",
-    height: "100%",
-    border: "none",
-    display: "block",
-    background: "transparent",
-    overflow: "hidden",
-  });
-
-  shadow.appendChild(frameWrapper);
-  frameWrapper.appendChild(iframe);
-
-  container.appendChild(arrow);
-  container.appendChild(frameWrapper);
-  document.body.appendChild(btn);
-  document.body.appendChild(container);
-
-  let isOpen = false;
-
-  const closeChat = () => {
-    if (!isOpen) return;
-    isOpen = false;
-    container.style.opacity = "0";
-    container.style.transform = "scale(0.8) translateY(20px)";
-    arrow.style.display = "none";
-    setTimeout(() => {
-      container.style.display = "none";
-    }, 250);
-    btn.style.transform = "scale(1)";
-  };
-
-  const handleWidgetMessage = (event) => {
-    const { data, source } = event || {};
-    if (!data?.type) return;
-
-    if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
-      console.log("[CopilotChat] Received checkout payload from widget:", data);
-      showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
-      return;
-    }
-
-    if (data.type === "CHAT_CLOSED") {
-      closeChat();
-    }
-  };
-
-  window.addEventListener("message", handleWidgetMessage);
-
-  btn.onclick = (event) => {
-    event.stopPropagation();
-    isOpen = !isOpen;
-    if (isOpen) {
-      container.style.display = "block";
-      arrow.style.display = "block";
-      requestAnimationFrame(() => {
-        container.style.opacity = "1";
-        container.style.transform = "scale(1) translateY(0)";
-      });
-    } else {
-      closeChat();
-    }
-  };
-
-  document.addEventListener("click", (event) => {
-    const target = event.target;
-    if (!target) return;
-    if (isOpen && !container.contains(target) && target !== btn) {
-      closeChat();
-    }
-  });
-
-  const controls = {
-    close: closeChat,
-    open: () => {
-      if (!isOpen) {
-        btn.click();
-      }
-    },
-  };
-
-  window.CopilotChat = window.CopilotChat || {};
-  window.CopilotChat.close = controls.close;
-  window.CopilotChat.open = controls.open;
-  window.CopilotChat.controls = controls;
-
-  return controls;
-};
-
-const handleError = (message) => {
-  console.error(`[CopilotChat] ${message}`);
-};
-
-export const resolveEmbeddingScript = () => {
-  if (embeddingScript) {
-    return embeddingScript;
-  }
-
-  if (typeof document === "undefined") return null;
-
-  const scripts = Array.from(document.querySelectorAll("script"));
-  const candidate = scripts
-    .reverse()
-    .find((script) => script.dataset?.token || (script.src && script.src.includes("chat-widget")));
-
-  return candidate || null;
-};
-
-const shouldAutoBootstrapFromScript = () => {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return false;
-  }
-  const scriptEl = resolveEmbeddingScript();
-  if (!scriptEl) return false;
-  const queryConfig = readQueryConfig(scriptEl);
-  const dataset = scriptEl.dataset || {};
-  const hasTokenHint = dataset.token || queryConfig.token;
-  const hasGlobalToken = typeof window !== "undefined" && window.CopilotChatConfig && window.CopilotChatConfig.token;
-  return (hasTokenHint || hasGlobalToken) && dataset.autoload !== "false";
-};
-
-export const initCopilotChatWidget = async (config = {}) => {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    handleError("Window or document is not available. This widget runs in browsers only.");
-    return null;
-  }
-
-  if (window.__copilotWidgetLoaded && !config.force) {
-    return window.CopilotChat?.controls || null;
-  }
-  window.__copilotWidgetLoaded = true;
-
-  const scriptEl = config.scriptEl || resolveEmbeddingScript();
-  const globalConfig = window.CopilotChatConfig || {};
-  const datasetConfig = scriptEl?.dataset || {};
-  const queryConfig = readQueryConfig(scriptEl);
-
-  const token = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
-
-  if (!token) {
-    handleError("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute).");
-    return null;
-  }
-
-  const baseUrl = resolveBaseUrl(scriptEl);
-
-  if (!baseUrl) {
-    handleError("Unable to resolve base URL from embedding script or window.location.");
-    return null;
-  }
-
-  try {
-    const response = await fetch(`${baseUrl}/api/chat-widget/config?token=${encodeURIComponent(token)}`, {
-      credentials: "omit",
-      mode: "cors",
-    });
-
-    if (!response.ok) {
-      throw new Error(`Server responded with ${response.status}`);
-    }
-
-    const remoteConfig = await response.json();
-    if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
-      throw new Error("Received incomplete widget configuration from server.");
-    }
-
-    const baseConfig = {
-      iframeUrl: remoteConfig.iframeUrl,
-      launcherIcon: remoteConfig.launcherIcon,
-    };
-
-    window.CopilotChat = window.CopilotChat || {};
-    window.CopilotChat.init = (overrides = {}) => {
-      const mergedConfig = {
-        iframeUrl: overrides.iframeUrl || baseConfig.iframeUrl,
-        launcherIcon: overrides.launcherIcon || baseConfig.launcherIcon,
-      };
-
-      return buildWidget(mergedConfig);
-    };
-
-    const controls = window.CopilotChat.init(config);
-    return controls;
-  } catch (error) {
-    handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
-    return null;
-  }
-};
-
-export const loadCopilotChatWidget = (config = {}) =>
-  new Promise((resolve) => {
-    if (typeof document === "undefined") {
-      resolve(null);
-      return;
-    }
-    ready(() => {
-      initCopilotChatWidget(config).then(resolve);
-    });
-  });
-
-if (shouldAutoBootstrapFromScript()) {
-  loadCopilotChatWidget();
-}
+(function bootstrap() {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (window.__copilotWidgetLoaded) {
+    return;
+  }
+  window.__copilotWidgetLoaded = true;
+
+  const DEFAULT_BASE_URL = CHAT_WIDGET_BASE_URL;
+  const BUTTON_SIZE = 64;
+  const IFRAME_SIZE = 720;
+  const embeddingScript = document.currentScript;
+  const ENV_BASE_URL = CHAT_WIDGET_BASE_URL;
+
+  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 normalizeBaseUrl = (url) => {
+    if (!url) return DEFAULT_BASE_URL;
+    return url.endsWith("/") ? url.slice(0, -1) : url;
+  };
+
+  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 buildWidget = ({ iframeUrl, launcherIcon, theme = {} }) => {
+    const existingRoot = document.querySelector("[data-copilot-widget-root]");
+    if (existingRoot) {
+      existingRoot.remove();
+    }
+
+    const { accent = "linear-gradient(135deg, #0078ff, #00c6ff)" } = theme;
+
+    // ---------- 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: accent,
+      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);
+
+
+    window.addEventListener("message", (event) => {
+      if (event.data?.type === "WIDGET_READY") {
+        iframe.contentWindow.postMessage(
+          { type: "INIT_WIDGET" },
+          "*"
+        );
+      }
+    });
+
+    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;
+
+    return controls;
+  };
+
+  const handleError = (message) => {
+    console.error(`[CopilotChat] ${message}`);
+  };
+
+  const resolveEmbeddingScript = () => {
+    if (embeddingScript) {
+      return embeddingScript;
+    }
+
+    const scripts = Array.from(document.querySelectorAll("script"));
+    const candidate = scripts
+      .reverse()
+      .find((script) => script.dataset?.token || script.src.includes("chat-widget"));
+
+    return candidate || null;
+  };
+
+  ready(async () => {
+    const scriptEl = resolveEmbeddingScript();
+    if (!scriptEl) {
+      handleError("Unable to locate the embedding script tag on the page.");
+      return;
+    }
+
+    const globalConfig = window.CopilotChatConfig || {};
+    const datasetConfig = scriptEl.dataset || {};
+    const queryConfig = readQueryConfig(scriptEl);
+
+    const token = globalConfig.token || datasetConfig.token || queryConfig.token;
+    if (!token) {
+      handleError("Missing token (provide via window.CopilotChatConfig.token or data-token attribute).");
+      return;
+    }
+
+    const baseUrl = normalizeBaseUrl(
+      ENV_BASE_URL ||
+        globalConfig.baseUrl ||
+        datasetConfig.baseUrl ||
+        queryConfig.baseUrl ||
+        inferBaseUrlFromScript(scriptEl)
+    );
+    const themeAccent =
+      (globalConfig.theme && globalConfig.theme.accent) ||
+      globalConfig.accent ||
+      datasetConfig.themeAccent ||
+      queryConfig.themeAccent;
+
+    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 config = await response.json();
+      if (!config?.iframeUrl || !config?.launcherIcon) {
+        throw new Error("Received incomplete widget configuration from server.");
+      }
+
+      const baseConfig = {
+        iframeUrl: config.iframeUrl,
+        launcherIcon: config.launcherIcon,
+        theme: {
+          accent: themeAccent || config.theme?.accent || undefined,
+        },
+      };
+
+      window.CopilotChat = window.CopilotChat || {};
+      window.CopilotChat.init = (overrides = {}) => {
+        const mergedTheme = {
+          accent:
+            overrides.theme?.accent ||
+            overrides.accent ||
+            baseConfig.theme.accent ||
+            (typeof globalConfig.theme === "object" ? globalConfig.theme.accent : undefined) ||
+            globalConfig.accent,
+        };
+
+        const mergedConfig = {
+          iframeUrl: overrides.iframeUrl || baseConfig.iframeUrl,
+          launcherIcon: overrides.launcherIcon || baseConfig.launcherIcon,
+          theme: mergedTheme,
+        };
+
+        return buildWidget(mergedConfig);
+      };
+
+      window.CopilotChat.init(globalConfig);
+    } catch (error) {
+      handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
+    }
+  });
+})();