@deepfrog/pangents-widget 2.1.6 → 2.2.1

package/README.md

@@ -133,6 +133,61 @@ Initialize the widget with configuration.
 
 Update widget configuration dynamically.
 
+#### Example: Fetch config from an API and update at runtime
+
+```html
+<script type="module">
+  import Chatbot from 'https://cdn.jsdelivr.net/npm/@deepfrog/pangents-widget/dist/widget.min.js';
+
+  Chatbot.init({
+    pangentsApiKey: '<api_key>',
+    tenantId: '<tenant_id>'
+  });
+
+  async function loadWidgetConfig() {
+    const res = await fetch('https://api.example.com/widget-config?tenant=<tenant_id>');
+    if (!res.ok) throw new Error('Failed to load widget config');
+    const remote = await res.json();
+
+    Chatbot.updateConfig({
+      pangentsApiKey: remote.pangentsApiKey ?? '<api_key>',
+      tenantId: remote.tenantId ?? '<tenant_id>',
+      email: remote.email,
+      theme: remote.theme,
+      position: remote.position,
+      margin: remote.margin,
+      zIndex: remote.zIndex
+    });
+  }
+
+  loadWidgetConfig();
+</script>
+```
+
+```ts
+// ESM/bundlers
+import Chatbot from '@deepfrog/pangents-widget/widget';
+
+Chatbot.init({
+  pangentsApiKey: '<api_key>',
+  tenantId: '<tenant_id>'
+});
+
+const res = await fetch('/api/widget-config');
+if (!res.ok) throw new Error('Failed to load widget config');
+const cfg = await res.json();
+
+Chatbot.updateConfig({
+  pangentsApiKey: cfg.pangentsApiKey,
+  tenantId: cfg.tenantId,
+  email: cfg.email,
+  theme: cfg.theme,
+  position: cfg.position,
+  margin: cfg.margin,
+  zIndex: cfg.zIndex
+});
+```
+
 ### `Chatbot.updateTheme(theme)`
 
 Update only the theme configuration.

package/dist/Widget.d.ts

@@ -6,6 +6,7 @@ interface WidgetProps extends Partial<WidgetConfig> {
     pangentsApiKey?: string;
     tenantId?: string;
     email?: string;
+    zIndex?: number;
 }
-export declare function Widget({ theme, className, position, margin, pangentsApiKey, tenantId, email }: WidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function Widget({ theme, className, position, margin, pangentsApiKey, tenantId, email, zIndex }: WidgetProps): import("react/jsx-runtime").JSX.Element;
 export default Widget;

package/dist/components/WidgetBubble.d.ts

@@ -1,6 +1,7 @@
 interface WidgetBubbleProps {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     margin?: string;
+    zIndex?: number;
 }
-export declare function WidgetBubble({ position, margin }: WidgetBubbleProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetBubble({ position, margin, zIndex }: WidgetBubbleProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/WidgetPopup.d.ts

@@ -1,5 +1,6 @@
 interface WidgetPopupProps {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    zIndex?: number;
 }
-export declare function WidgetPopup({ position }: WidgetPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetPopup({ position, zIndex }: WidgetPopupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.cjs.js

@@ -6,5 +6,5 @@
     }
   } catch (error) {}
 })();
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./widget-embed-9DdEqVMP.cjs.js"),t=require("react/jsx-runtime"),n=require("react"),o=e=>Object.freeze(Object.defineProperty({__proto__:null,default:e},Symbol.toStringTag,{value:"Module"}));if("undefined"!=typeof window)try{const e=window.__PANGENTS_WIDGET_CSS;if(e&&!document.getElementById("pangents-widget-styles")){const t=document.createElement("style");t.id="pangents-widget-styles",t.textContent=e,document.head.appendChild(t)}}catch{}exports.Chatbot=e.Chatbot,exports.Widget=e.Widget,exports.ChatbotWidget=({pangentsApiKey:e,email:r,tenantId:i,theme:s,position:d="bottom-right",zIndex:c=9999,onInit:a,onDestroy:l})=>{const u=n.useRef(null),g=n.useRef(null);return n.useEffect(()=>((async()=>{try{const{default:t}=await Promise.resolve().then(()=>o(require("./widget-embed.cjs.js"))),n={pangentsApiKey:e,email:r,tenantId:i,theme:s,position:d,zIndex:c};u.current=t,t.init(n),a&&a()}catch(t){console.error("Failed to initialize chatbot widget:",t)}})(),()=>{if(u.current)try{u.current.destroy(),l&&l()}catch(e){console.error("Error destroying chatbot widget:",e)}}),[e,r,i,s,d,c,a,l]),n.useEffect(()=>{if(u.current){const n={pangentsApiKey:e,email:r,tenantId:i,theme:s,position:d,zIndex:c};try{u.current.updateConfig(n)}catch(t){console.error("Error updating chatbot widget config:",t)}}},[e,r,i,s,d,c]),t.jsx("div",{ref:g,style:{display:"none"}})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./widget-embed-DgFZhnDu.cjs.js"),t=require("react/jsx-runtime"),n=require("react"),o=e=>Object.freeze(Object.defineProperty({__proto__:null,default:e},Symbol.toStringTag,{value:"Module"}));if("undefined"!=typeof window)try{const e=window.__PANGENTS_WIDGET_CSS;if(e&&!document.getElementById("pangents-widget-styles")){const t=document.createElement("style");t.id="pangents-widget-styles",t.textContent=e,document.head.appendChild(t)}}catch{}exports.Chatbot=e.Chatbot,exports.Widget=e.Widget,exports.ChatbotWidget=({pangentsApiKey:e,email:r,tenantId:i,theme:s,position:d="bottom-right",zIndex:c=9999,onInit:a,onDestroy:l})=>{const u=n.useRef(null),g=n.useRef(null);return n.useEffect(()=>((async()=>{try{const{default:t}=await Promise.resolve().then(()=>o(require("./widget-embed.cjs.js"))),n={pangentsApiKey:e,email:r,tenantId:i,theme:s,position:d,zIndex:c};u.current=t,t.init(n),a&&a()}catch(t){console.error("Failed to initialize chatbot widget:",t)}})(),()=>{if(u.current)try{u.current.destroy(),l&&l()}catch(e){console.error("Error destroying chatbot widget:",e)}}),[e,r,i,s,d,c,a,l]),n.useEffect(()=>{if(u.current){const n={pangentsApiKey:e,email:r,tenantId:i,theme:s,position:d,zIndex:c};try{u.current.updateConfig(n)}catch(t){console.error("Error updating chatbot widget config:",t)}}},[e,r,i,s,d,c]),t.jsx("div",{ref:g,style:{display:"none"}})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.es.js

@@ -6,7 +6,7 @@
     }
   } catch (error) {}
 })();
-import { C, W } from "./widget-embed-LzSoeVtX.es.js";
+import { C, W } from "./widget-embed-B3A5H6pf.es.js";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 const ChatbotWidget = ({

package/dist/types/index.d.ts

@@ -26,6 +26,7 @@ export interface WidgetConfig {
     pangentsApiKey: string;
     tenantId?: string;
     theme?: WidgetTheme;
+    zIndex?: number;
 }
 export interface ChatState {
     isOpen: boolean;

package/dist/{widget-embed-LzSoeVtX.es.js → widget-embed-B3A5H6pf.es.js}

@@ -28,7 +28,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 var _provider, _providerCalled, _a, _focused, _cleanup, _setup, _b, _online, _cleanup2, _setup2, _c, _gcTimeout, _d, _initialState, _revertState, _cache, _client, _retryer, _defaultOptions, _abortSignalConsumed, _Query_instances, dispatch_fn, _e, _client2, _currentQuery, _currentQueryInitialState, _currentResult, _currentResultState, _currentResultOptions, _currentThenable, _selectError, _selectFn, _selectResult, _lastQueryWithDefinedData, _staleTimeoutId, _refetchIntervalId, _currentRefetchInterval, _trackedProps, _QueryObserver_instances, executeFetch_fn, updateStaleTimeout_fn, computeRefetchInterval_fn, updateRefetchInterval_fn, updateTimers_fn, clearStaleTimeout_fn, clearRefetchInterval_fn, updateQuery_fn, notify_fn, _f, _client3, _observers, _mutationCache, _retryer2, _Mutation_instances, dispatch_fn2, _g, _mutations, _scopes, _mutationId, _h, _client4, _currentResult2, _currentMutation, _mutateOptions, _MutationObserver_instances, updateResult_fn, notify_fn2, _i, _queries, _j, _queryCache, _mutationCache2, _defaultOptions2, _queryDefaults, _mutationDefaults, _mountCount, _unsubscribeFocus, _unsubscribeOnline, _k;
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useReducer, useRef, useEffect, createContext, useContext, useLayoutEffect, useId, useInsertionEffect, useMemo, useCallback, Children, isValidElement, useState, Fragment as Fragment$1, createElement, forwardRef, Component } from "react";
+import React__default, { createContext, useContext, useReducer, useRef, useEffect, useLayoutEffect, useId, useInsertionEffect, useMemo, useCallback, Children, isValidElement, useState, Fragment as Fragment$1, createElement, forwardRef, Component } from "react";
 import ReactDOM from "react-dom";
 var Subscribable = class {
   constructor() {
@@ -16793,7 +16793,7 @@ class EnhancedErrorHandler {
   // 30 seconds
   constructor() {
     __publicField(this, "errorQueue", []);
-    __publicField(this, "isOnline", navigator.onLine);
+    __publicField(this, "isOnline", typeof navigator !== "undefined" ? navigator.onLine : true);
     __publicField(this, "maxQueueSize", 50);
     // Reduced from 100
     __publicField(this, "retryAttempts", 2);
@@ -16809,6 +16809,7 @@ class EnhancedErrorHandler {
   }
   // Setup event listeners for online/offline status
   setupEventListeners() {
+    if (typeof window === "undefined") return;
     window.addEventListener("online", () => {
       this.isOnline = true;
       this.flushErrorQueue();
@@ -16875,8 +16876,8 @@ class EnhancedErrorHandler {
       action: (context == null ? void 0 : context.action) || "Unknown",
       userId: context == null ? void 0 : context.userId,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      userAgent: navigator.userAgent,
-      url: window.location.href,
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "server",
+      url: typeof window !== "undefined" ? window.location.href : "",
       apiKey: (context == null ? void 0 : context.apiKey) ? context.apiKey.substring(0, 20) + "..." : void 0
     };
     const severity = this.determineSeverity(apiError);
@@ -16909,8 +16910,8 @@ class EnhancedErrorHandler {
       action: (context == null ? void 0 : context.action) || "Runtime",
       userId: context == null ? void 0 : context.userId,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      userAgent: navigator.userAgent,
-      url: window.location.href
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "server",
+      url: typeof window !== "undefined" ? window.location.href : ""
     };
     const errorReport = {
       error: apiError,
@@ -16989,9 +16990,9 @@ class EnhancedErrorHandler {
         await api2.post("/errors/report", {
           errors: errorsToSend,
           clientInfo: {
-            userAgent: navigator.userAgent,
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "server",
             timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-            url: window.location.href,
+            url: typeof window !== "undefined" ? window.location.href : "",
             circuitBreakerState: this.circuitBreaker.getState(),
             remainingRateLimit: this.rateLimiter.getRemainingRequests()
           }
@@ -17026,15 +17027,17 @@ class EnhancedErrorHandler {
   // Show user notification based on error severity
   showUserNotification(error, severity) {
     const message = this.getUserFriendlyMessage(error);
-    window.dispatchEvent(new CustomEvent("error:notification", {
-      detail: {
-        message,
-        severity,
-        error,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        canRetry: this.canRetryError(error)
-      }
-    }));
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("error:notification", {
+        detail: {
+          message,
+          severity,
+          error,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          canRetry: this.canRetryError(error)
+        }
+      }));
+    }
   }
   // Determine if error can be retried
   canRetryError(error) {
@@ -17839,7 +17842,7 @@ const useEmailLeadsStore = create()(
     }
   }))
 );
-function WidgetBubble({ position = "bottom-right", margin }) {
+function WidgetBubble({ position = "bottom-right", margin, zIndex }) {
   const { openWidget, theme, isOpen, isAuthenticated } = useChatContext();
   const { hasNewLeads, newLeadsCount, startPolling, stopPolling, clearNewLeadsNotification } = useEmailLeadsStore();
   useEffect(() => {
@@ -17868,7 +17871,7 @@ function WidgetBubble({ position = "bottom-right", margin }) {
         return "fixed bottom-6 right-6 z-50";
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: getPositionClasses(), style: { margin: margin || void 0 }, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsx("div", { className: getPositionClasses(), style: { margin: margin || void 0, zIndex: zIndex || void 0 }, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs(
       Button,
       {
@@ -29380,7 +29383,7 @@ function WidgetContent() {
     /* @__PURE__ */ jsx(PoweredByFooter, {})
   ] });
 }
-function WidgetPopup({ position = "bottom-right" }) {
+function WidgetPopup({ position = "bottom-right", zIndex }) {
   const { isOpen, theme, closeWidget, isAuthenticated } = useChatContext();
   const isLeftPosition = position === "bottom-left" || position === "top-left";
   const containerRef = useRef(null);
@@ -29504,6 +29507,7 @@ function WidgetPopup({ position = "bottom-right" }) {
     motion.div,
     {
       className: "fixed inset-0 z-50",
+      style: { zIndex: zIndex ?? 50 },
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       exit: { opacity: 0 },
@@ -29673,10 +29677,22 @@ function WidgetPopup({ position = "bottom-right" }) {
     }
   ) });
 }
-function Widget({ theme, className, position, margin, pangentsApiKey, tenantId, email }) {
+function Widget({ theme, className, position, margin, pangentsApiKey, tenantId, email, zIndex }) {
+  useEffect(() => {
+    try {
+      const css = window.__PANGENTS_WIDGET_CSS;
+      if (css && !document.getElementById("pangents-widget-styles")) {
+        const style = document.createElement("style");
+        style.id = "pangents-widget-styles";
+        style.textContent = css;
+        document.head.appendChild(style);
+      }
+    } catch {
+    }
+  }, []);
   return /* @__PURE__ */ jsx("div", { className: className ? `pg-widget-root ${className}` : "pg-widget-root", children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxs(ChatProvider, { initialTheme: theme, apiKey: pangentsApiKey, tenantId, email, children: [
-    /* @__PURE__ */ jsx(WidgetBubble, { position, margin }),
-    /* @__PURE__ */ jsx(WidgetPopup, { position })
+    /* @__PURE__ */ jsx(WidgetBubble, { position, margin, zIndex }),
+    /* @__PURE__ */ jsx(WidgetPopup, { position, zIndex })
   ] }) }) });
 }
 var client = {};
@@ -29820,4 +29836,4 @@ export {
   Chatbot as C,
   Widget as W
 };
-//# sourceMappingURL=widget-embed-LzSoeVtX.es.js.map
+//# sourceMappingURL=widget-embed-B3A5H6pf.es.js.map