copilot-chat-widget 0.1.17 → 0.1.19

package/src/index.js

@@ -1,338 +1,322 @@
-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 buildWidget = ({ iframeUrl, launcherIcon }) => {
-  const existingRoot = document.querySelector("[data-copilot-widget-root]");
-  if (existingRoot) {
-    existingRoot.remove();
-  }
-
-  const showCheckoutToast = (message) => {
-    const existingToast = document.querySelector("[data-copilot-checkout-toast]");
-    if (existingToast) {
-      existingToast.remove();
-    }
-
-    const toast = document.createElement("div");
-    toast.setAttribute("data-copilot-checkout-toast", "true");
-    toast.innerText = message;
-
-    Object.assign(toast.style, {
-      position: "fixed",
-      top: "20px",
-      left: "50%",
-      transform: "translateX(-50%)",
-      padding: "12px 16px",
-      background: "#0f172a",
-      color: "white",
-      borderRadius: "12px",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-      zIndex: 2147483647,
-      fontSize: "14px",
-      fontWeight: "600",
-      maxWidth: "420px",
-      lineHeight: "1.4",
-      textAlign: "center",
-    });
-
-    document.body.appendChild(toast);
-
-    setTimeout(() => {
-      toast.remove();
-    }, 4500);
-  };
-
-  // Shadow DOM container
-  const containerHost = document.createElement("div");
-  containerHost.setAttribute("data-copilot-widget-root", "true");
-  const shadow = containerHost.attachShadow({ mode: "open" });
-  document.body.appendChild(containerHost);
-
-  // Button
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.setAttribute("aria-label", "Open Copilot chat");
-  btn.innerHTML = `
-      <img
-        src="${launcherIcon}"
-        alt="Copilot chat launcher"
-        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
-      />
-    `;
-
-  Object.assign(btn.style, {
-    position: "fixed",
-    bottom: "24px",
-    right: "24px",
-    width: `${BUTTON_SIZE}px`,
-    height: `${BUTTON_SIZE}px`,
-    borderRadius: "50%",
-    border: "none",
-    background: "linear-gradient(135deg, #0078ff, #00c6ff)",
-    color: "white",
-    cursor: "pointer",
-    zIndex: 999998,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
-    transition: "all 0.25s ease",
-  });
-
-  btn.onmouseover = () => {
-    btn.style.transform = "scale(1.12)";
-    btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
-  };
-  btn.onmouseout = () => {
-    btn.style.transform = "scale(1)";
-    btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
-  };
-
-  const container = document.createElement("div");
-  container.setAttribute("data-copilot-widget-root", "true");
-  Object.assign(container.style, {
-    display: "none",
-    position: "fixed",
-    bottom: `${BUTTON_SIZE + 36}px`,
-    right: "24px",
-    zIndex: "999999",
-    transformOrigin: "bottom right",
-    transform: "scale(0.8) translateY(20px)",
-    opacity: "0",
-    transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  });
-
-  const arrow = document.createElement("div");
-  const arrowBorder = document.createElement("div");
-  const arrowFill = document.createElement("div");
-
-  Object.assign(arrow.style, {
-    position: "absolute",
-    bottom: "-14px",
-    right: "28px",
-    width: "30px",
-    height: "20px",
-    pointerEvents: "none",
-    display: "none",
-    zIndex: "1",
-  });
-
-  Object.assign(arrowBorder.style, {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    right: "0",
-    margin: "0 auto",
-    width: "0",
-    height: "0",
-    borderLeft: "15px solid transparent",
-    borderRight: "15px solid transparent",
-    borderTop: "15px solid rgba(15,23,42,0.1)",
-  });
-
-  Object.assign(arrowFill.style, {
-    position: "absolute",
-    bottom: "2px",
-    left: "0",
-    right: "0",
-    margin: "0 auto",
-    width: "0",
-    height: "0",
-    borderLeft: "13px solid transparent",
-    borderRight: "13px solid transparent",
-    borderTop: "13px solid white",
-    boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
-    borderRadius: "2px",
-  });
-
-  arrow.appendChild(arrowBorder);
-  arrow.appendChild(arrowFill);
-
-  const frameWrapper = document.createElement("div");
-  Object.assign(frameWrapper.style, {
-    width: `${IFRAME_SIZE}px`,
-    maxWidth: "calc(100vw - 48px)",
-    height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
-    maxHeight: "calc(100vh - 150px)",
-    borderRadius: "20px",
-    background: "white",
-    border: "1px solid rgba(15,23,42,0.12)",
-    boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
-    overflow: "hidden",
-  });
-  shadow.appendChild(frameWrapper);
-
-  const iframe = document.createElement("iframe");
-  iframe.src = iframeUrl;
-  iframe.title = "Copilot chat widget";
-  iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
-  iframe.setAttribute("scrolling", "no");
-  Object.assign(iframe.style, {
-    width: "100%",
-    height: "100%",
-    border: "none",
-    display: "block",
-    background: "transparent",
-    overflow: "hidden",
-  });
-
-  shadow.appendChild(frameWrapper);
-  frameWrapper.appendChild(iframe);
-
-  container.appendChild(arrow);
-  container.appendChild(frameWrapper);
-  document.body.appendChild(btn);
-  document.body.appendChild(container);
-
-  let isOpen = false;
-
-  const closeChat = () => {
-    if (!isOpen) return;
-    isOpen = false;
-    container.style.opacity = "0";
-    container.style.transform = "scale(0.8) translateY(20px)";
-    arrow.style.display = "none";
-    setTimeout(() => {
-      container.style.display = "none";
-    }, 250);
-    btn.style.transform = "scale(1)";
-  };
-
-  const handleWidgetMessage = (event) => {
-    const { data, source } = event || {};
-    if (!data?.type) return;
-
-    if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
-      console.log("[CopilotChat] Received checkout payload from widget:", data);
-      showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
-      return;
-    }
-
-    if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
-      iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
-      return;
-    }
-
-    if (data.type === "CHAT_CLOSED") {
-      closeChat();
-    }
-  };
-
-  window.addEventListener("message", handleWidgetMessage);
-
-  btn.onclick = (event) => {
-    event.stopPropagation();
-    isOpen = !isOpen;
-    if (isOpen) {
-      container.style.display = "block";
-      arrow.style.display = "block";
-      requestAnimationFrame(() => {
-        container.style.opacity = "1";
-        container.style.transform = "scale(1) translateY(0)";
-      });
-    } else {
-      closeChat();
-    }
-  };
-
-  document.addEventListener("click", (event) => {
-    const target = event.target;
-    if (!target) return;
-    if (isOpen && !container.contains(target) && target !== btn) {
-      closeChat();
-    }
-  });
-
-  const controls = {
-    close: closeChat,
-    open: () => {
-      if (!isOpen) {
-        btn.click();
-      }
-    },
-  };
-
-  window.CopilotChat = window.CopilotChat || {};
-  window.CopilotChat.close = controls.close;
-  window.CopilotChat.open = controls.open;
-  window.CopilotChat.controls = controls;
-
-  return controls;
-};
-
+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 buildWidget = ({ iframeUrl, launcherIcon }) => {
+  const existingRoot = document.querySelector("[data-copilot-widget-root]");
+  if (existingRoot) {
+    existingRoot.remove();
+  }
+
+  const showCheckoutToast = (message) => {
+    const existingToast = document.querySelector("[data-copilot-checkout-toast]");
+    if (existingToast) {
+      existingToast.remove();
+    }
+
+    const toast = document.createElement("div");
+    toast.setAttribute("data-copilot-checkout-toast", "true");
+    toast.innerText = message;
+
+    Object.assign(toast.style, {
+      position: "fixed",
+      top: "20px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "12px 16px",
+      background: "#0f172a",
+      color: "white",
+      borderRadius: "12px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
+      zIndex: 2147483647,
+      fontSize: "14px",
+      fontWeight: "600",
+      maxWidth: "420px",
+      lineHeight: "1.4",
+      textAlign: "center",
+    });
+
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+      toast.remove();
+    }, 4500);
+  };
+
+  // Shadow DOM container
+  const containerHost = document.createElement("div");
+  containerHost.setAttribute("data-copilot-widget-root", "true");
+  const shadow = containerHost.attachShadow({ mode: "open" });
+  document.body.appendChild(containerHost);
+
+  // Button
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.setAttribute("aria-label", "Open Copilot chat");
+  btn.innerHTML = `
+      <img
+        src="${launcherIcon}"
+        alt="Copilot chat launcher"
+        style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
+      />
+    `;
+
+  Object.assign(btn.style, {
+    position: "fixed",
+    bottom: "24px",
+    right: "24px",
+    width: `${BUTTON_SIZE}px`,
+    height: `${BUTTON_SIZE}px`,
+    borderRadius: "50%",
+    border: "none",
+    background: "linear-gradient(135deg, #0078ff, #00c6ff)",
+    color: "white",
+    cursor: "pointer",
+    zIndex: 999998,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
+    transition: "all 0.25s ease",
+  });
+
+  btn.onmouseover = () => {
+    btn.style.transform = "scale(1.12)";
+    btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
+  };
+  btn.onmouseout = () => {
+    btn.style.transform = "scale(1)";
+    btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
+  };
+
+  const container = document.createElement("div");
+  container.setAttribute("data-copilot-widget-root", "true");
+  Object.assign(container.style, {
+    display: "none",
+    position: "fixed",
+    bottom: `${BUTTON_SIZE + 36}px`,
+    right: "24px",
+    zIndex: "999999",
+    transformOrigin: "bottom right",
+    transform: "scale(0.8) translateY(20px)",
+    opacity: "0",
+    transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  });
+
+  const arrow = document.createElement("div");
+  const arrowBorder = document.createElement("div");
+  const arrowFill = document.createElement("div");
+
+  Object.assign(arrow.style, {
+    position: "absolute",
+    bottom: "-14px",
+    right: "28px",
+    width: "30px",
+    height: "20px",
+    pointerEvents: "none",
+    display: "none",
+    zIndex: "1",
+  });
+
+  Object.assign(arrowBorder.style, {
+    position: "absolute",
+    bottom: "0",
+    left: "0",
+    right: "0",
+    margin: "0 auto",
+    width: "0",
+    height: "0",
+    borderLeft: "15px solid transparent",
+    borderRight: "15px solid transparent",
+    borderTop: "15px solid rgba(15,23,42,0.1)",
+  });
+
+  Object.assign(arrowFill.style, {
+    position: "absolute",
+    bottom: "2px",
+    left: "0",
+    right: "0",
+    margin: "0 auto",
+    width: "0",
+    height: "0",
+    borderLeft: "13px solid transparent",
+    borderRight: "13px solid transparent",
+    borderTop: "13px solid white",
+    boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
+    borderRadius: "2px",
+  });
+
+  arrow.appendChild(arrowBorder);
+  arrow.appendChild(arrowFill);
+
+  const frameWrapper = document.createElement("div");
+  Object.assign(frameWrapper.style, {
+    width: `${IFRAME_SIZE}px`,
+    maxWidth: "calc(100vw - 48px)",
+    height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
+    maxHeight: "calc(100vh - 150px)",
+    borderRadius: "20px",
+    background: "white",
+    border: "1px solid rgba(15,23,42,0.12)",
+    boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
+    overflow: "hidden",
+  });
+  shadow.appendChild(frameWrapper);
+
+  const iframe = document.createElement("iframe");
+  iframe.src = iframeUrl;
+  iframe.title = "Copilot chat widget";
+  iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
+  iframe.setAttribute("scrolling", "no");
+  Object.assign(iframe.style, {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    display: "block",
+    background: "transparent",
+    overflow: "hidden",
+  });
+
+  shadow.appendChild(frameWrapper);
+  frameWrapper.appendChild(iframe);
+
+  container.appendChild(arrow);
+  container.appendChild(frameWrapper);
+  document.body.appendChild(btn);
+  document.body.appendChild(container);
+
+  let isOpen = false;
+
+  const closeChat = () => {
+    if (!isOpen) return;
+    isOpen = false;
+    container.style.opacity = "0";
+    container.style.transform = "scale(0.8) translateY(20px)";
+    arrow.style.display = "none";
+    setTimeout(() => {
+      container.style.display = "none";
+    }, 250);
+    btn.style.transform = "scale(1)";
+  };
+
+  const handleWidgetMessage = (event) => {
+    const { data, source } = event || {};
+    if (!data?.type) return;
+
+    if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
+      console.log("[CopilotChat] Received checkout payload from widget:", data);
+      showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
+      return;
+    }
+
+    if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
+      return;
+    }
+
+    if (data.type === "CHAT_CLOSED") {
+      closeChat();
+    }
+  };
+
+  window.addEventListener("message", handleWidgetMessage);
+
+  btn.onclick = (event) => {
+    event.stopPropagation();
+    isOpen = !isOpen;
+    if (isOpen) {
+      container.style.display = "block";
+      arrow.style.display = "block";
+      requestAnimationFrame(() => {
+        container.style.opacity = "1";
+        container.style.transform = "scale(1) translateY(0)";
+      });
+    } else {
+      closeChat();
+    }
+  };
+
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!target) return;
+    if (isOpen && !container.contains(target) && target !== btn) {
+      closeChat();
+    }
+  });
+
+  const controls = {
+    close: closeChat,
+    open: () => {
+      if (!isOpen) {
+        btn.click();
+      }
+    },
+  };
+
+  window.CopilotChat = window.CopilotChat || {};
+  window.CopilotChat.close = controls.close;
+  window.CopilotChat.open = controls.open;
+  window.CopilotChat.controls = controls;
+
+  return controls;
+};
+
 export async function loadCopilotChatWidget(options = {}) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return null;
   }
 
   const globalConfig = window.CopilotChatConfig || {};
-  const token =
-    options.token ||
-    globalConfig.token ||
-    (typeof window !== "undefined"
-      ? window.localStorage?.getItem("copilotChatToken") || null
-      : null);
-
-  if (!token) {
-    console.error(
-      "[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
-    );
-    return null;
-  }
 
   const baseUrl =
     options.baseUrl ||
     globalConfig.baseUrl ||
     BUILD_BASE_URL ||
-    (typeof window !== "undefined" && window.location?.origin) ||
-    null;
-
-  if (!baseUrl) {
-    console.error(
-      "[CopilotChat] Missing baseUrl (set via loadCopilotChatWidget({ baseUrl }), window.CopilotChatConfig.baseUrl, or WIDGET_BASE_URL)."
-    );
-    return null;
-  }
-
-  const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
-    token
-  )}`;
-
-  try {
-    const response = await fetch(url, {
-      credentials: "omit",
-      mode: "cors",
-    });
-
-    if (!response.ok) {
-      throw new Error(`Server responded with ${response.status}`);
-    }
-
-    const remoteConfig = await response.json();
-    if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
-      throw new Error("Received incomplete widget configuration from server.");
-    }
-
-    window.CopilotChat = window.CopilotChat || {};
-    window.CopilotChat.token = token;
+    (typeof window !== "undefined" && window.location?.origin) ||
+    null;
+
+  if (!baseUrl) {
+    console.error(
+      "[CopilotChat] Missing baseUrl (set via loadCopilotChatWidget({ baseUrl }), window.CopilotChatConfig.baseUrl, or WIDGET_BASE_URL)."
+    );
+    return null;
+  }
+
+  const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config`;
+
+  try {
+    const response = await fetch(url, {
+      credentials: "omit",
+      mode: "cors",
+    });
+
+    if (!response.ok) {
+      throw new Error(`Server responded with ${response.status}`);
+    }
+
+    const remoteConfig = await response.json();
+    if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
+      throw new Error("Received incomplete widget configuration from server.");
+    }
+
+    window.CopilotChat = window.CopilotChat || {};
     window.CopilotChat.baseUrl = baseUrl;
-
-    return buildWidget({
-      iframeUrl: remoteConfig.iframeUrl,
-      launcherIcon: remoteConfig.launcherIcon,
-    });
-  } catch (error) {
-    console.error(
-      "[CopilotChat] Error during widget bootstrap:",
-      error instanceof Error ? error.message : error
-    );
-    return null;
-  }
-}
-
-export default loadCopilotChatWidget;
+
+    return buildWidget({
+      iframeUrl: remoteConfig.iframeUrl,
+      launcherIcon: remoteConfig.launcherIcon,
+    });
+  } catch (error) {
+    console.error(
+      "[CopilotChat] Error during widget bootstrap:",
+      error instanceof Error ? error.message : error
+    );
+    return null;
+  }
+}
+
+export default loadCopilotChatWidget;