@getwidgets/live-chat-widget 1.1.0 → 1.1.2

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

@@ -20359,7 +20359,8 @@
           textAlign: "left",
           minWidth: isMobile ? "90vw" : "280px",
           maxWidth: isMobile ? "90vw" : "400px",
-          margin: isMobile ? "0 auto" : "0"
+          margin: isMobile ? "0 auto" : "0",
+          fontFamily: headerConfig.font_family || "'Inter', sans-serif"
         }
       },
       unreadCount > 0 && /* @__PURE__ */ React.createElement(
@@ -20414,7 +20415,7 @@
           },
           /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" })
         )
-      ), /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold text-sm" }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "text-xs opacity-70" }, "Just now"))), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold text-sm", style: headerConfig.font_color ? { color: headerConfig.font_color } : { color: "black" } }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "text-xs opacity-70", style: headerConfig.font_color ? { color: headerConfig.font_color } : { color: "black" } }, "Just now"))), /* @__PURE__ */ React.createElement(
         "button",
         {
           onClick: handleCloseNotification,
@@ -20423,7 +20424,7 @@
         },
         "×"
       )),
-      /* @__PURE__ */ React.createElement("p", { className: "text-sm leading-relaxed text-gray-200", style: { fontSize: isMobile ? "13px" : "14px" } }, (latestMessage == null ? void 0 : latestMessage.content) || (inputAreaConfig == null ? void 0 : inputAreaConfig.first_ai_message) || headerConfig.subtitle || "Connect with visitors")
+      /* @__PURE__ */ React.createElement("p", { className: "text-sm leading-relaxed text-gray-200", style: { fontSize: isMobile ? "13px" : "14px", color: headerConfig.font_color ? headerConfig.font_color : "#000000" } }, (latestMessage == null ? void 0 : latestMessage.content) || (inputAreaConfig == null ? void 0 : inputAreaConfig.welcome_message) || (inputAreaConfig == null ? void 0 : inputAreaConfig.first_ai_message) || headerConfig.subtitle || "Connect with visitors")
     ), !isOpen && !showNotificationPreview && /* @__PURE__ */ React.createElement(
       "button",
       {
@@ -20445,8 +20446,8 @@
           src: headerConfig.logo_url,
           alt: "logo",
           style: {
-            width: isMobile ? 24 : 28,
-            height: isMobile ? 24 : 28
+            width: "auto",
+            height: `${headerConfig.logo_size || 32}px`
           }
         }
       ) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: isMobile ? 18 : 20, height: isMobile ? 18 : 20 } }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" })),
@@ -20476,6 +20477,7 @@
           maxHeight: responsiveDimensions.maxHeight,
           backgroundColor: appearanceConfig.background_color || "#F9FAFB",
           borderRadius: isMobile ? responsiveDimensions.borderRadius : appearanceConfig.border_radius || "16px",
+          fontFamily: headerConfig.font_family || "'Inter', sans-serif",
           ...isMobile ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 } : {}
         }
       },
@@ -20516,7 +20518,8 @@
           {
             src: headerConfig.logo_url,
             alt: "logo",
-            className: "w-auto h-8 mx-auto mb-2"
+            className: "w-auto mx-auto mb-2",
+            style: { height: `${headerConfig.logo_size || 32}px` }
           }
         ), !headerConfig.hide_title && /* @__PURE__ */ React.createElement("h2", { className: "font-semibold leading-tight", style: { fontSize: isMobile ? "14px" : "16px", margin: "0" } }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "opacity-80 leading-tight", style: { fontSize: isMobile ? "11px" : "13px", margin: "2px 0 0 0" } }, headerConfig.subtitle || "Connect with visitors"))
       ),
@@ -20554,7 +20557,7 @@
               wordBreak: "break-word"
             }
           },
-          inputAreaConfig.first_ai_message || "Hello! How can I assist you today?"
+          inputAreaConfig.welcome_message || inputAreaConfig.first_ai_message || "Hello! How can I assist you today?"
         )) : 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(
@@ -20797,74 +20800,71 @@
         }
       `));
   };
-  function init({ widgetId, mode = "inline", name: name2 = null, email = null, unique_id = null }) {
+  let reactRoot = null;
+  let userDetails = { name: null, email: null, unique_id: null };
+  let currentWidgetId = null;
+  function init({
+    widgetId,
+    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.");
+      console.error(
+        "Live Chat Widget root element (#livechat-root) not found."
+      );
       return;
     }
-    container.innerHTML = "";
-    delete container.__livechat_mounted;
-    const shadowRoot = container.attachShadow({ mode: "open" });
-    const mountPoint = document.createElement("div");
-    mountPoint.id = "live-chat-widget-mount";
-    shadowRoot.appendChild(mountPoint);
-    const styles = document.createElement("style");
-    styles.textContent = `
-    @import url("https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css");
-  `;
-    shadowRoot.appendChild(styles);
-    const root2 = client.createRoot(mountPoint);
-    try {
-      root2.render(
+    currentWidgetId = widgetId;
+    container.dataset.widgetId = widgetId;
+    if (!container.__livechat_mounted) {
+      container.innerHTML = "";
+      const shadowRoot = container.attachShadow({ mode: "open" });
+      const mountPoint = document.createElement("div");
+      mountPoint.id = "live-chat-widget-mount";
+      shadowRoot.appendChild(mountPoint);
+      const styles = document.createElement("style");
+      styles.textContent = `
+      @import url("https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css");
+    `;
+      shadowRoot.appendChild(styles);
+      reactRoot = client.createRoot(mountPoint);
+      container.__livechat_mounted = true;
+    }
+    userDetails = { name: name2, email, unique_id };
+    if (reactRoot) {
+      reactRoot.render(
         /* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(
           LiveChatWidget,
           {
-            widgetId,
-            name: name2,
-            email,
-            unique_id
+            widgetId: currentWidgetId,
+            name: userDetails.name,
+            email: userDetails.email,
+            unique_id: userDetails.unique_id
           }
         ))
       );
-      container.__livechat_mounted = true;
-    } catch (err) {
-      console.error("❌ LiveChatWidget render failed:", err);
-      const errDiv = document.createElement("div");
-      errDiv.style.cssText = "padding:20px; border:2px solid #f00; background:#fee; color:#c00; font-family:monospace; border-radius:8px; margin:20px;";
-      errDiv.innerHTML = `
-      <h3 style="margin:0 0 10px 0;">Live Chat Widget Error</h3>
-      <pre style="white-space: pre-wrap; margin:0;">${(err == null ? void 0 : err.message) || String(err)}</pre>
-      <p style="margin:10px 0 0 0;">Check console for details.</p>
-    `;
-      mountPoint.appendChild(errDiv);
     }
   }
-  let userDetails = { name: null, email: null, unique_id: null };
   function setUser({ name: name2, email, unique_id }) {
-    if (userDetails.name !== name2 || userDetails.email !== email || userDetails.unique_id !== unique_id) {
-      userDetails = { 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,
-                  name: name2,
-                  email,
-                  unique_id
-                }
-              ))
-            );
+    if (userDetails.name === name2 && userDetails.email === email && userDetails.unique_id === unique_id) {
+      return;
+    }
+    userDetails = { name: name2, email, unique_id };
+    if (reactRoot) {
+      reactRoot.render(
+        /* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(
+          LiveChatWidget,
+          {
+            widgetId: currentWidgetId,
+            name: userDetails.name,
+            email: userDetails.email,
+            unique_id: userDetails.unique_id
           }
-        }
-      }
+        ))
+      );
     }
   }
   window.LiveChatWidget = { init, setUser };

package/package.json

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