@getwidgets/live-chat-widget 1.1.1 → 1.1.3

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

@@ -19752,6 +19752,7 @@
   };
   const LiveChatWidget = ({ widgetId, name: name2 = null, email = null, unique_id = null }) => {
     var _a, _b;
+    const [showMenu, setShowMenu] = reactExports.useState(false);
     const [config, setConfig] = reactExports.useState(null);
     const [messages, setMessages] = reactExports.useState([]);
     const [inputMessage, setInputMessage] = reactExports.useState("");
@@ -20235,13 +20236,10 @@
       if (isMobile2) {
         return {
           width: "95vw",
-          height: "85vh",
-          // Changed from 60vh to 85vh for better mobile experience
+          height: "85dvh",
           maxWidth: "95vw",
-          maxHeight: "95vh",
-          bottom: "0",
-          right: "0",
-          borderRadius: "12px 12px 0 0"
+          maxHeight: "calc(100dvh - 24px)",
+          borderRadius: appearanceConfig.border_radius || "12px"
         };
       }
       return {
@@ -20255,19 +20253,16 @@
       const position2 = appearanceConfig.position || "bottom-right";
       const isMobile2 = windowWidth < 768;
       const baseStyles = { position: "fixed", zIndex: 9999 };
-      if (isMobile2) {
-        return { ...baseStyles, left: 0, right: 0, bottom: 0 };
-      }
-      const desktopSpacing = "20px";
+      const edgeSpacing = isMobile2 ? "12px" : "20px";
       switch (position2) {
         case "bottom-left":
-          return { ...baseStyles, left: desktopSpacing, bottom: desktopSpacing };
+          return { ...baseStyles, left: edgeSpacing, bottom: edgeSpacing };
         case "top-left":
-          return { ...baseStyles, left: desktopSpacing, top: desktopSpacing };
+          return { ...baseStyles, left: edgeSpacing, top: edgeSpacing };
         case "top-right":
-          return { ...baseStyles, right: desktopSpacing, top: desktopSpacing };
+          return { ...baseStyles, right: edgeSpacing, top: edgeSpacing };
         default:
-          return { ...baseStyles, right: desktopSpacing, bottom: desktopSpacing };
+          return { ...baseStyles, right: edgeSpacing, bottom: edgeSpacing };
       }
     };
     const responsiveDimensions = getResponsiveDimensions();
@@ -20313,7 +20308,12 @@
         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 isValidEmail = (value) => {
+      if (!value) return false;
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value).trim());
+    };
+    const emailIsInvalid = showContactFields && contactEmail.trim() && !isValidEmail(contactEmail);
+    const isContactValid = !(inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) || (!showContactFields ? true : contactName.trim() && contactEmail.trim() && isValidEmail(contactEmail));
     const createAndStoreAuthToken = () => {
       const payload = { name: contactName.trim(), email: contactEmail.trim(), unique_id };
       const token = buildUnsignedJwt(payload);
@@ -20328,7 +20328,8 @@
       if ((inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) && !authToken) {
         const missingName = !contactName.trim();
         const missingEmail = !contactEmail.trim();
-        if (missingName || missingEmail) {
+        const invalidEmail = !missingEmail && !isValidEmail(contactEmail);
+        if (missingName || missingEmail || invalidEmail) {
           setShowContactErrors(true);
           return;
         }
@@ -20337,7 +20338,45 @@
       }
       await performSend();
     };
+    reactExports.useEffect(() => {
+      if (!showMenu) return;
+      const handler = (e) => {
+        if (!e.target.closest(".livechat-menu-trigger") && !e.target.closest(".livechat-menu-popup")) {
+          setShowMenu(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [showMenu]);
     if (!config) return null;
+    const handleStartNewChat = () => {
+      try {
+        const newSessionId = v4();
+        if (wsRef.current) {
+          try {
+            wsRef.current.close();
+          } catch (e) {
+          }
+          wsRef.current = null;
+        }
+        localStorage.setItem("live-chat-widget/session-id", newSessionId);
+        setSessionId(newSessionId);
+        setHasCheckedSession(false);
+        setIsConnecting(false);
+        setLocalLoading(false);
+        setAuthToken(null);
+        setMessages([]);
+        setLocalMessages([]);
+        setInputMessage("");
+        setIsSessionInitialized(false);
+        setShowMenu(false);
+      } catch (e) {
+      }
+    };
+    const handleEndChat = () => {
+      handleStartNewChat();
+    };
+    const MenuDotsIcon = ({ color: color2 = "#fff", size = 22 }) => /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "5", r: "2", fill: color2 }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "2", fill: color2 }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "19", r: "2", fill: color2 }));
     return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -20359,7 +20398,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 +20454,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 +20463,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 +20485,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 +20516,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 } : {}
         }
       },
@@ -20490,6 +20531,69 @@
             minHeight: "auto"
           }
         },
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            className: "livechat-menu-trigger absolute left-3 top-1/2 transform -translate-y-1/2 hover:opacity-80 transition-opacity",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              width: isMobile ? "40px" : "36px",
+              height: isMobile ? "40px" : "36px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 0,
+              zIndex: 20
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              setShowMenu((v2) => !v2);
+            },
+            "aria-label": "Open menu"
+          },
+          /* @__PURE__ */ React.createElement(MenuDotsIcon, { color: getContrastColor(headerConfig.background_color || "#111827"), size: isMobile ? 22 : 22 })
+        ),
+        showMenu && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "livechat-menu-popup absolute left-3 top-12 bg-white rounded shadow-lg border",
+            style: {
+              minWidth: isMobile ? "132px" : "120px",
+              top: isMobile ? "calc(50% + 18px)" : "calc(50% + 16px)",
+              left: isMobile ? "8px" : "12px",
+              zIndex: 30,
+              boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+              border: "1px solid #e5e7eb",
+              padding: "6px 0",
+              color: "#111827",
+              fontSize: isMobile ? "16px" : "15px",
+              fontWeight: 500
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              className: "transition-all duration-200 hover:bg-red-50",
+              style: {
+                background: "none",
+                border: "none",
+                width: "100%",
+                cursor: "pointer",
+                // padding: isMobile ? '8px 12px' : '6px 12px',
+                minHeight: "auto",
+                fontSize: isMobile ? "14px" : "13px",
+                color: "#DC2626",
+                fontWeight: "500",
+                borderRadius: "6px"
+                // margin: '4px 0'
+              },
+              onClick: handleEndChat
+            },
+            "End Chat"
+          )
+        ),
         /* @__PURE__ */ React.createElement(
           "button",
           {
@@ -20516,7 +20620,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 +20659,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(
@@ -20663,7 +20768,7 @@
           })()
         )),
         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",
+          borderColor: showContactErrors && (!contactName.trim() || !contactEmail.trim() || !isValidEmail(contactEmail)) || emailIsInvalid ? "#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",
@@ -20695,13 +20800,13 @@
             },
             className: "w-full px-3 py-1.5 border rounded-md",
             style: {
-              borderColor: showContactErrors && !contactEmail.trim() ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
+              borderColor: showContactErrors && !contactEmail.trim() || emailIsInvalid ? "#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." : ""}`)))
+        ), showContactErrors && (!contactName.trim() || !contactEmail.trim() || !isValidEmail(contactEmail)) && /* @__PURE__ */ React.createElement("div", { className: "text-xs", style: { color: "#EF4444" } }, `${!contactName.trim() ? "Name is required. " : ""}${!contactEmail.trim() ? "Email is required. " : ""}${contactEmail.trim() && !isValidEmail(contactEmail) ? "Enter a valid email address." : ""}`)))
       ),
       inputAreaConfig.show_branding !== false && /* @__PURE__ */ React.createElement(
         "div",

package/package.json

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