@getwidgets/live-chat-widget 1.0.2 → 1.0.4

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

@@ -13744,8 +13744,9 @@
   function code$2(state, node2) {
     const value = node2.value ? node2.value + "\n" : "";
     const properties = {};
-    if (node2.lang) {
-      properties.className = ["language-" + node2.lang];
+    const language = node2.lang ? node2.lang.split(/\s+/) : [];
+    if (language.length > 0) {
+      properties.className = ["language-" + language[0]];
     }
     let result = {
       type: "element",
@@ -19581,6 +19582,8 @@
     const [isLoading, setIsLoading] = reactExports.useState(false);
     const [isOpen, setIsOpen] = reactExports.useState(false);
     const [showNotificationPreview, setShowNotificationPreview] = reactExports.useState(true);
+    const [unreadCount, setUnreadCount] = reactExports.useState(0);
+    const [latestMessage, setLatestMessage] = reactExports.useState(null);
     const chatContainerRef = reactExports.useRef(null);
     const inputRef = reactExports.useRef(null);
     const [sessionId, setSessionId] = reactExports.useState(null);
@@ -19591,8 +19594,10 @@
     const [queuedFirstMessage, setQueuedFirstMessage] = reactExports.useState(null);
     const wsRef = reactExports.useRef(null);
     const audioRef = reactExports.useRef(null);
+    const notificationAudioRef = reactExports.useRef(null);
     const [hasCheckedSession, setHasCheckedSession] = reactExports.useState(false);
     const [windowWidth, setWindowWidth] = reactExports.useState(typeof window !== "undefined" ? window.innerWidth : 1024);
+    const isOpenRef = reactExports.useRef(false);
     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) {
@@ -19627,7 +19632,11 @@
     }, []);
     reactExports.useEffect(() => {
       if (chatContainerRef.current) {
-        chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+        setTimeout(() => {
+          if (chatContainerRef.current) {
+            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+          }
+        }, 100);
       }
     }, [messages, localMessages]);
     reactExports.useEffect(() => {
@@ -19686,6 +19695,12 @@
       } catch (e) {
         console.warn("Failed to init audioRef", e);
       }
+      try {
+        notificationAudioRef.current = new Audio("https://cdn.widgetkraft.com/mixkit-bubble-pop-up-alert-notification-2357.mp3");
+        notificationAudioRef.current.preload = "auto";
+      } catch (e) {
+        console.warn("Failed to init notificationAudioRef", e);
+      }
     }, []);
     const startLiveSession = async (widgetUuid, currentSessionId) => {
       try {
@@ -19733,11 +19748,39 @@
             if (Array.isArray(data)) {
               const list2 = data.map(normalizeIncomingMessage);
               setLocalMessages(list2);
+              if (!isOpenRef.current) {
+                const agentMessages = list2.filter((m22) => m22.role === "agent");
+                if (agentMessages.length > 0) {
+                  setUnreadCount((prev) => prev + agentMessages.length);
+                  setLatestMessage(agentMessages[agentMessages.length - 1]);
+                  if (notificationAudioRef.current) {
+                    try {
+                      notificationAudioRef.current.play().catch(() => {
+                      });
+                    } catch (e) {
+                    }
+                  }
+                }
+              }
               return;
             }
             if ((data == null ? void 0 : data.messages) && Array.isArray(data.messages)) {
               const list2 = data.messages.map(normalizeIncomingMessage);
               setLocalMessages(list2);
+              if (!isOpenRef.current) {
+                const agentMessages = list2.filter((m22) => m22.role === "agent");
+                if (agentMessages.length > 0) {
+                  setUnreadCount((prev) => prev + agentMessages.length);
+                  setLatestMessage(agentMessages[agentMessages.length - 1]);
+                  if (notificationAudioRef.current) {
+                    try {
+                      notificationAudioRef.current.play().catch(() => {
+                      });
+                    } catch (e) {
+                    }
+                  }
+                }
+              }
               return;
             }
             const m2 = normalizeIncomingMessage(data);
@@ -19754,16 +19797,38 @@
                 }
                 return [...prev, m2];
               });
-              if (!replaced && audioRef.current) {
-                try {
-                  audioRef.current.play().catch(() => {
-                  });
-                } catch (e) {
+              if (!replaced) {
+                if (!isOpenRef.current && m2.role === "agent") {
+                  setUnreadCount((prev) => prev + 1);
+                  setLatestMessage(m2);
+                  if (notificationAudioRef.current) {
+                    try {
+                      notificationAudioRef.current.play().catch(() => {
+                      });
+                    } catch (e) {
+                    }
+                  }
+                } else if (audioRef.current) {
+                  try {
+                    audioRef.current.play().catch(() => {
+                    });
+                  } catch (e) {
+                  }
                 }
               }
             } else {
               setLocalMessages((prev) => [...prev, m2]);
-              if (audioRef.current) {
+              if (!isOpenRef.current && m2.role === "agent") {
+                setUnreadCount((prev) => prev + 1);
+                setLatestMessage(m2);
+                if (notificationAudioRef.current) {
+                  try {
+                    notificationAudioRef.current.play().catch(() => {
+                    });
+                  } catch (e) {
+                  }
+                }
+              } else if (audioRef.current) {
                 try {
                   audioRef.current.play().catch(() => {
                   });
@@ -19889,7 +19954,15 @@
       }
     };
     const toggleWidget = () => {
-      setIsOpen((v2) => !v2);
+      setIsOpen((v2) => {
+        const newState = !v2;
+        isOpenRef.current = newState;
+        if (newState) {
+          setUnreadCount(0);
+          setLatestMessage(null);
+        }
+        return newState;
+      });
     };
     const handleCloseNotification = (e) => {
       e.stopPropagation();
@@ -19959,11 +20032,11 @@
       "button",
       {
         onClick: toggleWidget,
-        className: "rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col gap-2 p-4 max-w-xs responsive-notification",
+        className: "rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col gap-2 p-4 max-w-xs responsive-notification relative",
         style: {
           backgroundColor: headerConfig.background_color || "#111827",
           color: "#FFFFFF",
-          border: "none",
+          border: unreadCount > 0 ? "3px solid #EF4444" : "none",
           cursor: "pointer",
           textAlign: "left",
           minWidth: isMobile ? "90vw" : "280px",
@@ -19971,6 +20044,22 @@
           margin: isMobile ? "0 auto" : "0"
         }
       },
+      unreadCount > 0 && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center",
+          style: {
+            backgroundColor: "#EF4444",
+            color: "#FFFFFF",
+            fontSize: "12px",
+            fontWeight: "bold",
+            minWidth: "24px",
+            minHeight: "24px",
+            zIndex: 10
+          }
+        },
+        unreadCount > 99 ? "99+" : unreadCount
+      ),
       /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1" }, headerConfig.logo_url ? /* @__PURE__ */ React.createElement(
         "img",
         {
@@ -20016,18 +20105,18 @@
         },
         "×"
       )),
-      /* @__PURE__ */ React.createElement("p", { className: "text-sm leading-relaxed text-gray-200", style: { fontSize: isMobile ? "13px" : "14px" } }, (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" } }, (latestMessage == null ? void 0 : latestMessage.content) || (inputAreaConfig == null ? void 0 : inputAreaConfig.first_ai_message) || headerConfig.subtitle || "Connect with visitors")
     ), !isOpen && !showNotificationPreview && /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: toggleWidget,
-        className: "rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center",
+        className: "rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center relative",
         style: {
           backgroundColor: headerConfig.background_color || "#111827",
           color: headerConfig.font_color || "#FFFFFF",
           width: isMobile ? "52px" : "56px",
           height: isMobile ? "52px" : "56px",
-          border: "none",
+          border: unreadCount > 0 ? "3px solid #EF4444" : "none",
           cursor: "pointer",
           margin: isMobile ? "16px" : "0"
         }
@@ -20042,7 +20131,22 @@
             height: isMobile ? 24 : 28
           }
         }
-      ) : /* @__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" }))
+      ) : /* @__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" })),
+      unreadCount > 0 && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center",
+          style: {
+            backgroundColor: "#EF4444",
+            color: "#FFFFFF",
+            fontSize: "12px",
+            fontWeight: "bold",
+            minWidth: "24px",
+            minHeight: "24px"
+          }
+        },
+        unreadCount > 99 ? "99+" : unreadCount
+      )
     ), isOpen && /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -20101,13 +20205,13 @@
               borderRadius: "4px"
             }
           }
-        ), /* @__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"))
+        ), !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"))
       ),
       /* @__PURE__ */ React.createElement(
         "div",
         {
           ref: chatContainerRef,
-          className: "flex-1 relative overflow-y-auto",
+          className: "flex-1 relative overflow-y-auto chat-scrollable",
           style: {
             backgroundColor: appearanceConfig.background_color || "#F9FAFB",
             paddingBottom: isMobile ? "8px" : "0"
@@ -20316,21 +20420,27 @@
         }
         
         /* Scrollbar styling for chat container */
-        .responsive-messages-area::-webkit-scrollbar {
-          width: 6px;
+        .chat-scrollable::-webkit-scrollbar {
+          width: 4px;
         }
         
-        .responsive-messages-area::-webkit-scrollbar-track {
+        .chat-scrollable::-webkit-scrollbar-track {
           background: transparent;
         }
         
-        .responsive-messages-area::-webkit-scrollbar-thumb {
-          background: #ccc;
-          border-radius: 3px;
+        .chat-scrollable::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.2);
+          border-radius: 2px;
+        }
+        
+        .chat-scrollable::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.3);
         }
         
-        .responsive-messages-area::-webkit-scrollbar-thumb:hover {
-          background: #999;
+        /* Firefox scrollbar */
+        .chat-scrollable {
+          scrollbar-width: thin;
+          scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
         }
       `));
   };

package/package.json

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