@getwidgets/live-chat-widget 1.0.6 → 1.0.8

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,54 @@
       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);
+          }
+        } 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 +19944,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 +19972,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 +20209,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 || {};
@@ -20210,7 +20278,58 @@
       const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
       return luminance > 0.5 ? "#000000" : "#FFFFFF";
     };
+    const getMessageTime = (message) => {
+      if (!message) return "";
+      const raw = message.timestamp ?? message.created_at;
+      if (!raw) return "";
+      if (typeof raw === "string") {
+        const looksLikeTimeOnly = /:\d{2}/.test(raw) && !/\d{4}-\d{2}-\d{2}|T|Z/i.test(raw);
+        if (looksLikeTimeOnly) return raw;
+        const parsed2 = new Date(raw);
+        if (!Number.isNaN(parsed2.getTime())) {
+          return parsed2.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+        }
+        return "";
+      }
+      const parsed = new Date(raw);
+      if (Number.isNaN(parsed.getTime())) return "";
+      return parsed.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    };
+    const timeTextColor = getContrastColor(appearanceConfig.background_color || "#F9FAFB");
     const isMobile = windowWidth < 768;
+    reactExports.useEffect(() => {
+      if (inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) {
+        const hasToken = authToken || localStorageToken;
+        setShowContactFields(!hasToken);
+      } else {
+        setShowContactFields(false);
+      }
+    }, [inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email, authToken, localStorageToken, 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",
       {
@@ -20428,23 +20547,25 @@
             }
           },
           inputAreaConfig.first_ai_message || "Hello! How can I assist you today?"
-        )) : combinedMessages.map((message) => /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}` }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `p-3 inline-block rounded-lg`,
-            style: {
-              backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0",
-              borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
-              fontSize: isMobile ? "13px" : "14px",
-              color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827",
-              marginBottom: isMobile ? "4px" : "2px",
-              maxWidth: isMobile ? "85%" : "80%",
-              wordBreak: "break-word"
-            }
-          },
-          message.role !== "system" ? /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content) : /* @__PURE__ */ React.createElement("em", { className: "text-xs opacity-70" }, message.content),
-          chatAreaConfig.show_timestamps && message.timestamp && /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-70 mt-1 text-right" }, message.timestamp)
-        ))), localLoading && /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement(
+        )) : combinedMessages.map((message) => {
+          const timeText = getMessageTime(message);
+          return /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex flex-col ${message.role === "user" ? "items-end" : "items-start"}` }, /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `p-3 inline-block rounded-lg`,
+              style: {
+                backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0",
+                borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
+                fontSize: isMobile ? "13px" : "14px",
+                color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827",
+                marginBottom: isMobile ? "4px" : "2px",
+                maxWidth: isMobile ? "85%" : "80%",
+                wordBreak: "break-word"
+              }
+            },
+            message.role !== "system" ? /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content) : /* @__PURE__ */ React.createElement("em", { className: "text-xs opacity-70" }, message.content)
+          ), message.role !== "system" && timeText && /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-70", style: { color: timeTextColor, marginBottom: isMobile ? "6px" : "4px" } }, timeText));
+        }), localLoading && /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement(
           "div",
           {
             className: "text-left p-3 inline-block max-w-[85%]",
@@ -20461,7 +20582,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",
@@ -20471,7 +20592,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,
@@ -20491,11 +20612,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: {
@@ -20504,7 +20624,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"
@@ -20533,7 +20653,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",
@@ -20629,7 +20789,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.");
@@ -20649,7 +20809,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) {

package/package.json

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