@getwidgets/live-chat-widget 1.0.7 → 1.0.9

package/dist/live-chat-widget.umd.js

@@ -19710,14 +19710,16 @@
   function LuSend(props) {
     return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "m22 2-7 20-4-9-9-4Z" } }, { "tag": "path", "attr": { "d": "M22 2 11 13" } }] })(props);
   }
+  const API_BASE_URL = "https://api.getwidgets.app";
+  const WS_BASE_URL = "wss://api.getwidgets.app";
   const fetchWidgetConfig = async (widgetId) => {
-    const res = await fetch(`https://api.getwidgets.app/api/widgets/user-widgets/${widgetId}/config`);
+    const res = await fetch(`${API_BASE_URL}/api/widgets/user-widgets/${widgetId}/config`);
     if (!res.ok) throw new Error("Failed to fetch widget config");
     return res.json();
   };
   const checkSessionStatus = async (widgetId, sessionId) => {
     try {
-      const url = `https://api.getwidgets.app/api/widgets/livechat/${widgetId}/status/?session_id=${sessionId}`;
+      const url = `${API_BASE_URL}/api/widgets/livechat/${widgetId}/status/?session_id=${sessionId}`;
       const res = await fetch(url);
       if (!res.ok) {
         const txt = await res.text().catch(() => null);
@@ -19748,7 +19750,7 @@
     }
     return sessionId;
   };
-  const LiveChatWidget = ({ widgetId, apiKey }) => {
+  const LiveChatWidget = ({ widgetId, apiKey, name: name2 = null, email = null, unique_id = null }) => {
     var _a, _b;
     const [config, setConfig] = reactExports.useState(null);
     const [messages, setMessages] = reactExports.useState([]);
@@ -19773,6 +19775,23 @@
     const [windowWidth, setWindowWidth] = reactExports.useState(typeof window !== "undefined" ? window.innerWidth : 1024);
     const isOpenRef = reactExports.useRef(false);
     const ICON_MAP = { IoIosSend, IoSendOutline, MdOutlineSend, LuSend };
+    const [authToken, setAuthToken] = reactExports.useState(null);
+    const [localStorageToken, setLocalStorageToken] = reactExports.useState(null);
+    const [contactName, setContactName] = reactExports.useState("");
+    const [contactEmail, setContactEmail] = reactExports.useState("");
+    const [showContactFields, setShowContactFields] = reactExports.useState(false);
+    const [showContactErrors, setShowContactErrors] = reactExports.useState(false);
+    const base64UrlEncode = (value) => {
+      const json = typeof value === "string" ? value : JSON.stringify(value);
+      const base64 = btoa(unescape(encodeURIComponent(json)));
+      return base64.replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
+    };
+    const buildUnsignedJwt = (payload) => {
+      const header2 = { alg: "none", typ: "JWT" };
+      const encodedHeader = base64UrlEncode(header2);
+      const encodedPayload = base64UrlEncode(payload);
+      return `${encodedHeader}.${encodedPayload}`;
+    };
     const normalizeIncomingMessage = (m2) => {
       if (!m2) return { id: void 0, role: "agent", content: "", timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), created_at: Date.now() };
       if (m2.sent_by) {
@@ -19818,6 +19837,55 @@
       const id2 = getSessionId();
       setSessionId(id2);
     }, [widgetId]);
+    reactExports.useEffect(() => {
+      if (typeof window === "undefined") return;
+      try {
+        const stored = localStorage.getItem("widgetkraft_livechat_authtoken");
+        setLocalStorageToken(stored);
+        if (stored && !authToken) setAuthToken(stored);
+      } catch (e) {
+      }
+      const handleStorageChange = (e) => {
+        if (e.key === "widgetkraft_livechat_authtoken" || e.key === null) {
+          try {
+            const stored = localStorage.getItem("widgetkraft_livechat_authtoken");
+            setLocalStorageToken(stored);
+            if (stored && !authToken) setAuthToken(stored);
+          } catch (err) {
+          }
+        }
+      };
+      window.addEventListener("storage", handleStorageChange);
+      return () => window.removeEventListener("storage", handleStorageChange);
+    }, [authToken]);
+    reactExports.useEffect(() => {
+      const buildAuthToken = async () => {
+        const hasIdentity = Boolean(name2 || email || unique_id);
+        if (!hasIdentity || typeof window === "undefined") {
+          return;
+        }
+        try {
+          const payload = { name: name2, email, unique_id };
+          const token = buildUnsignedJwt(payload);
+          if (token) {
+            try {
+              localStorage.setItem("widgetkraft_livechat_authtoken", token);
+            } catch (e) {
+            }
+            setAuthToken(token);
+            setShowContactFields(false);
+          }
+        } catch (e) {
+          console.warn("Failed to create auth token", e);
+          try {
+            localStorage.removeItem("widgetkraft_livechat_authtoken");
+          } catch (err) {
+          }
+          setAuthToken(null);
+        }
+      };
+      buildAuthToken();
+    }, [name2, email, unique_id]);
     reactExports.useEffect(() => {
       const dismissalKey = `live-chat-notification-dismissed/${widgetId}`;
       const dismissalTime = localStorage.getItem(dismissalKey);
@@ -19877,11 +19945,12 @@
     }, []);
     const startLiveSession = async (widgetUuid, currentSessionId) => {
       try {
-        const url = `https://api.getwidgets.app/api/widgets/livechat/start/${widgetUuid}/`;
+        const url = `${API_BASE_URL}/api/widgets/livechat/start/${widgetUuid}/`;
+        const storedAuthToken = authToken || (typeof window !== "undefined" ? localStorage.getItem("widgetkraft_livechat_authtoken") : null);
         const res = await fetch(url, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ session_id: currentSessionId })
+          body: JSON.stringify({ session_id: currentSessionId, auth_token: storedAuthToken || null })
         });
         if (!res.ok) {
           const txt = await res.text().catch(() => null);
@@ -19904,7 +19973,7 @@
           }
           wsRef.current = null;
         }
-        const url = `wss://api.getwidgets.app/ws/livechat/${sid}`;
+        const url = `${WS_BASE_URL}/ws/livechat/${sid}`;
         const ws = new WebSocket(url);
         wsRef.current = ws;
         ws.onopen = () => {
@@ -20141,8 +20210,8 @@
       localStorage.setItem(dismissalKey, Date.now().toString());
       setShowNotificationPreview(false);
     };
-    if (!config) return null;
-    const { header, chat_area, input_area, appearance } = ((_a = config.config) == null ? void 0 : _a.chat_widget) || {};
+    const widgetConfig = ((_a = config == null ? void 0 : config.config) == null ? void 0 : _a.chat_widget) || {};
+    const { header, chat_area, input_area, appearance } = widgetConfig;
     const headerConfig = header || {};
     const appearanceConfig = appearance || {};
     const chatAreaConfig = chat_area || {};
@@ -20229,6 +20298,44 @@
     };
     const timeTextColor = getContrastColor(appearanceConfig.background_color || "#F9FAFB");
     const isMobile = windowWidth < 768;
+    reactExports.useEffect(() => {
+      if (inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) {
+        let hasToken = false;
+        try {
+          hasToken = !!(authToken || localStorage.getItem("widgetkraft_livechat_authtoken"));
+        } catch (e) {
+          hasToken = !!authToken;
+        }
+        setShowContactFields(!hasToken);
+      } else {
+        setShowContactFields(false);
+      }
+    }, [inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email, authToken, isOpen]);
+    const isContactValid = !(inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) || (!showContactFields ? true : contactName.trim() && contactEmail.trim());
+    const createAndStoreAuthToken = () => {
+      const payload = { name: contactName.trim(), email: contactEmail.trim(), unique_id };
+      const token = buildUnsignedJwt(payload);
+      try {
+        localStorage.setItem("widgetkraft_livechat_authtoken", token);
+      } catch (e) {
+      }
+      setAuthToken(token);
+      return token;
+    };
+    const performSendWithContact = async () => {
+      if ((inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) && !authToken) {
+        const missingName = !contactName.trim();
+        const missingEmail = !contactEmail.trim();
+        if (missingName || missingEmail) {
+          setShowContactErrors(true);
+          return;
+        }
+        createAndStoreAuthToken();
+        setShowContactFields(false);
+      }
+      await performSend();
+    };
+    if (!config) return null;
     return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -20481,7 +20588,7 @@
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: "flex items-center gap-2 border-t flex-shrink-0",
+          className: "flex flex-col gap-2 border-t flex-shrink-0",
           style: {
             backgroundColor: inputAreaConfig.background_color || "#FFF",
             borderColor: inputAreaConfig.border_color || "#D1D5DB",
@@ -20491,7 +20598,7 @@
             gap: isMobile ? "8px" : "12px"
           }
         },
-        /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 w-full" }, /* @__PURE__ */ React.createElement(
           "input",
           {
             ref: inputRef,
@@ -20511,11 +20618,10 @@
             },
             placeholder: inputAreaConfig.placeholder_text || "Type your message..."
           }
-        ),
-        /* @__PURE__ */ React.createElement(
+        ), /* @__PURE__ */ React.createElement(
           "button",
           {
-            onClick: performSend,
+            onClick: performSendWithContact,
             disabled: localLoading || !inputMessage.trim(),
             className: "rounded-full flex items-center justify-center flex-shrink-0 hover:opacity-90 transition-opacity",
             style: {
@@ -20524,7 +20630,7 @@
               height: `${sendButtonSize}px`,
               minWidth: `${sendButtonSize}px`,
               minHeight: `${sendButtonSize}px`,
-              opacity: localLoading || !inputMessage.trim() ? 0.5 : 1,
+              opacity: localLoading || !inputMessage.trim() || !isContactValid ? 0.5 : 1,
               transition: "opacity 0.2s",
               border: "none",
               cursor: "pointer"
@@ -20553,7 +20659,47 @@
             if (iconUrl) return /* @__PURE__ */ React.createElement("img", { src: iconUrl, alt: "send", style: { width: "60%", height: "60%" } });
             return /* @__PURE__ */ React.createElement(Send, { className: "w-4 h-4", style: { color: "#FFFFFF" } });
           })()
-        )
+        )),
+        showContactFields && /* @__PURE__ */ React.createElement("div", { className: "p-3 border rounded-lg mt-2", style: {
+          borderColor: showContactErrors && (!contactName.trim() || !contactEmail.trim()) ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
+          backgroundColor: inputAreaConfig.background_color || "#FFF"
+        } }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold mb-2", style: { color: inputAreaConfig.text_color || "#111827" } }, "How should we reach you?"), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            type: "text",
+            placeholder: "Name",
+            value: contactName,
+            onChange: (e) => {
+              setContactName(e.target.value);
+              if (showContactErrors) setShowContactErrors(false);
+            },
+            className: "w-full px-3 py-1.5 border rounded-md",
+            style: {
+              borderColor: showContactErrors && !contactName.trim() ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
+              color: inputAreaConfig.text_color || "#111827",
+              fontSize: "13px",
+              backgroundColor: inputAreaConfig.background_color || "#FFF"
+            }
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            type: "email",
+            placeholder: "Email address",
+            value: contactEmail,
+            onChange: (e) => {
+              setContactEmail(e.target.value);
+              if (showContactErrors) setShowContactErrors(false);
+            },
+            className: "w-full px-3 py-1.5 border rounded-md",
+            style: {
+              borderColor: showContactErrors && !contactEmail.trim() ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
+              color: inputAreaConfig.text_color || "#111827",
+              fontSize: "13px",
+              backgroundColor: inputAreaConfig.background_color || "#FFF"
+            }
+          }
+        ), showContactErrors && (!contactName.trim() || !contactEmail.trim()) && /* @__PURE__ */ React.createElement("div", { className: "text-xs", style: { color: "#EF4444" } }, `${!contactName.trim() ? "Name is required. " : ""}${!contactEmail.trim() ? "Email is required." : ""}`)))
       ),
       inputAreaConfig.show_branding !== false && /* @__PURE__ */ React.createElement(
         "div",
@@ -20649,7 +20795,7 @@
         }
       `));
   };
-  function init({ widgetId, apiKey, mode = "inline" }) {
+  function init({ widgetId, apiKey, mode = "inline", name: name2 = null, email = null, unique_id = null }) {
     const container = document.getElementById("livechat-root");
     if (!container) {
       console.error("Live Chat Widget root element (#livechat-root) not found.");
@@ -20669,7 +20815,16 @@
     const root2 = client.createRoot(mountPoint);
     try {
       root2.render(
-        /* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(LiveChatWidget, { widgetId, apiKey }))
+        /* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(
+          LiveChatWidget,
+          {
+            widgetId,
+            apiKey,
+            name: name2,
+            email,
+            unique_id
+          }
+        ))
       );
       container.__livechat_mounted = true;
     } catch (err) {
@@ -20684,7 +20839,31 @@
       mountPoint.appendChild(errDiv);
     }
   }
-  window.LiveChatWidget = { init };
+  function setUser({ name: name2, email, unique_id }) {
+    const container = document.getElementById("livechat-root");
+    if (container && container.__livechat_mounted) {
+      const shadowRoot = container.shadowRoot;
+      if (shadowRoot) {
+        const mountPoint = shadowRoot.getElementById("live-chat-widget-mount") || shadowRoot.querySelector("#live-chat-widget-mount");
+        if (mountPoint) {
+          const root2 = client.createRoot(mountPoint);
+          root2.render(
+            /* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(
+              LiveChatWidget,
+              {
+                widgetId: container.dataset.widgetId,
+                apiKey: container.dataset.apiKey,
+                name: name2,
+                email,
+                unique_id
+              }
+            ))
+          );
+        }
+      }
+    }
+  }
+  window.LiveChatWidget = { init, setUser };
   exports2.init = init;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getwidgets/live-chat-widget",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "dist/live-chat-widget.umd.js",
   "unpkg": "dist/live-chat-widget.umd.js",
   "type": "module",