@getwidgets/live-chat-widget 1.0.4 → 1.0.6

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

@@ -19536,6 +19536,180 @@
     rnds[8] = rnds[8] & 63 | 128;
     return unsafeStringify(rnds);
   }
+  /**
+   * @license lucide-react v0.456.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const toKebabCase = (string2) => string2.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
+  }).join(" ").trim();
+  /**
+   * @license lucide-react v0.456.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  var defaultAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  /**
+   * @license lucide-react v0.456.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const Icon = reactExports.forwardRef(
+    ({
+      color: color2 = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode,
+      ...rest
+    }, ref) => {
+      return reactExports.createElement(
+        "svg",
+        {
+          ref,
+          ...defaultAttributes,
+          width: size,
+          height: size,
+          stroke: color2,
+          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+          className: mergeClasses("lucide", className),
+          ...rest
+        },
+        [
+          ...iconNode.map(([tag, attrs]) => reactExports.createElement(tag, attrs)),
+          ...Array.isArray(children) ? children : [children]
+        ]
+      );
+    }
+  );
+  /**
+   * @license lucide-react v0.456.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const createLucideIcon = (iconName, iconNode) => {
+    const Component = reactExports.forwardRef(
+      ({ className, ...props }, ref) => reactExports.createElement(Icon, {
+        ref,
+        iconNode,
+        className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+        ...props
+      })
+    );
+    Component.displayName = `${iconName}`;
+    return Component;
+  };
+  /**
+   * @license lucide-react v0.456.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+  const Send = createLucideIcon("Send", [
+    [
+      "path",
+      {
+        d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
+        key: "1ffxy3"
+      }
+    ],
+    ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
+  ]);
+  var DefaultContext = {
+    color: void 0,
+    size: void 0,
+    className: void 0,
+    style: void 0,
+    attr: void 0
+  };
+  var IconContext = React.createContext && React.createContext(DefaultContext);
+  var __assign = function() {
+    __assign = Object.assign || function(t2) {
+      for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
+        s = arguments[i];
+        for (var p2 in s) if (Object.prototype.hasOwnProperty.call(s, p2)) t2[p2] = s[p2];
+      }
+      return t2;
+    };
+    return __assign.apply(this, arguments);
+  };
+  var __rest = function(s, e) {
+    var t2 = {};
+    for (var p2 in s) if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0) t2[p2] = s[p2];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {
+      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i])) t2[p2[i]] = s[p2[i]];
+    }
+    return t2;
+  };
+  function Tree2Element(tree) {
+    return tree && tree.map(function(node2, i) {
+      return React.createElement(node2.tag, __assign({
+        key: i
+      }, node2.attr), Tree2Element(node2.child));
+    });
+  }
+  function GenIcon(data) {
+    return function(props) {
+      return React.createElement(IconBase, __assign({
+        attr: __assign({}, data.attr)
+      }, props), Tree2Element(data.child));
+    };
+  }
+  function IconBase(props) {
+    var elem = function(conf) {
+      var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
+      var computedSize = size || conf.size || "1em";
+      var className;
+      if (conf.className) className = conf.className;
+      if (props.className) className = (className ? className + " " : "") + props.className;
+      return React.createElement("svg", __assign({
+        stroke: "currentColor",
+        fill: "currentColor",
+        strokeWidth: "0"
+      }, conf.attr, attr, svgProps, {
+        className,
+        style: __assign(__assign({
+          color: props.color || conf.color
+        }, conf.style), props.style),
+        height: computedSize,
+        width: computedSize,
+        xmlns: "http://www.w3.org/2000/svg"
+      }), title && React.createElement("title", null, title), props.children);
+    };
+    return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf) {
+      return elem(conf);
+    }) : elem(DefaultContext);
+  }
+  function IoIosSend(props) {
+    return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M435.9 64.9l-367.1 160c-6.5 3.1-6.3 12.4.3 15.3l99.3 56.1c5.9 3.3 13.2 2.6 18.3-1.8l195.8-168.8c1.3-1.1 4.4-3.2 5.6-2 1.3 1.3-.7 4.3-1.8 5.6L216.9 320.1c-4.7 5.3-5.4 13.1-1.6 19.1l64.9 104.1c3.2 6.3 12.3 6.2 15.2-.2L447.2 76c3.3-7.2-4.2-14.5-11.3-11.1z" } }] })(props);
+  }
+  function IoSendOutline(props) {
+    return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round", "strokeWidth": "32", "d": "M470.3 271.15L43.16 447.31a7.83 7.83 0 01-11.16-7V327a8 8 0 016.51-7.86l247.62-47c17.36-3.29 17.36-28.15 0-31.44l-247.63-47a8 8 0 01-6.5-7.85V72.59c0-5.74 5.88-10.26 11.16-8L470.3 241.76a16 16 0 010 29.39z" } }] })(props);
+  }
+  function MdOutlineSend(props) {
+    return GenIcon({ "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z" } }] })(props);
+  }
+  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 fetchWidgetConfig = async (widgetId) => {
     const res = await fetch(`https://api.getwidgets.app/api/widgets/user-widgets/${widgetId}/config`);
     if (!res.ok) throw new Error("Failed to fetch widget config");
@@ -19598,6 +19772,7 @@
     const [hasCheckedSession, setHasCheckedSession] = reactExports.useState(false);
     const [windowWidth, setWindowWidth] = reactExports.useState(typeof window !== "undefined" ? window.innerWidth : 1024);
     const isOpenRef = reactExports.useRef(false);
+    const ICON_MAP = { IoIosSend, IoSendOutline, MdOutlineSend, LuSend };
     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) {
@@ -19673,12 +19848,10 @@
         try {
           const status = await checkSessionStatus(widgetId, sessionId);
           if (status.success && ((_a2 = status.data) == null ? void 0 : _a2.is_active)) {
-            console.log("Session is active, connecting to websocket...");
             setIsConnecting(true);
             openLiveWebsocket(sessionId);
             setIsSessionInitialized(true);
           } else {
-            console.log("Session not active, will create new session on first message");
           }
         } catch (error) {
           console.error("Failed to check session status:", error);
@@ -19735,7 +19908,6 @@
         const ws = new WebSocket(url);
         wsRef.current = ws;
         ws.onopen = () => {
-          console.log("LiveChat WS connected", url);
           setLocalLoading(false);
           setIsConnecting(false);
           if (onOpenCallback) {
@@ -19841,7 +20013,6 @@
           }
         };
         ws.onclose = () => {
-          console.log("LiveChat WS closed");
           try {
             localStorage.removeItem("live-chat-widget/session-id");
           } catch (e) {
@@ -19976,6 +20147,18 @@
     const appearanceConfig = appearance || {};
     const chatAreaConfig = chat_area || {};
     const inputAreaConfig = input_area || {};
+    const sendButtonSize = (() => {
+      var _a2;
+      try {
+        const raw = (_a2 = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _a2.size;
+        const parsed = raw ? parseInt(String(raw).replace(/[^0-9]/g, ""), 10) : NaN;
+        if (Number.isFinite(parsed) && !Number.isNaN(parsed)) {
+          return Math.max(30, Math.min(50, parsed));
+        }
+      } catch (e) {
+      }
+      return 40;
+    })();
     const getResponsiveDimensions = () => {
       const isMobile2 = windowWidth < 768;
       if (isMobile2) {
@@ -20029,9 +20212,17 @@
     };
     const isMobile = windowWidth < 768;
     return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && /* @__PURE__ */ React.createElement(
-      "button",
+      "div",
       {
+        role: "button",
+        tabIndex: 0,
         onClick: toggleWidget,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            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 relative",
         style: {
           backgroundColor: headerConfig.background_color || "#111827",
@@ -20198,12 +20389,7 @@
           {
             src: headerConfig.logo_url,
             alt: "logo",
-            style: {
-              width: isMobile ? "28px" : "32px",
-              height: isMobile ? "28px" : "32px",
-              marginBottom: isMobile ? "6px" : "8px",
-              borderRadius: "4px"
-            }
+            className: "w-auto h-8 mx-auto mb-2"
           }
         ), !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"))
       ),
@@ -20314,10 +20500,10 @@
             className: "rounded-full flex items-center justify-center flex-shrink-0 hover:opacity-90 transition-opacity",
             style: {
               backgroundColor: ((_b = inputAreaConfig.send_button) == null ? void 0 : _b.color) || "#2563EB",
-              width: isMobile ? "40px" : "44px",
-              height: isMobile ? "40px" : "44px",
-              minWidth: isMobile ? "40px" : "44px",
-              minHeight: isMobile ? "40px" : "44px",
+              width: `${sendButtonSize}px`,
+              height: `${sendButtonSize}px`,
+              minWidth: `${sendButtonSize}px`,
+              minHeight: `${sendButtonSize}px`,
               opacity: localLoading || !inputMessage.trim() ? 0.5 : 1,
               transition: "opacity 0.2s",
               border: "none",
@@ -20329,25 +20515,24 @@
             {
               className: "rounded-full animate-spin",
               style: {
-                width: isMobile ? 18 : 16,
-                height: isMobile ? 18 : 16,
+                width: 16,
+                height: 16,
                 border: "2px solid #FFFFFF",
                 borderTop: "2px solid transparent"
               }
             }
-          ) : /* @__PURE__ */ React.createElement(
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              style: {
-                width: isMobile ? 20 : 18,
-                height: isMobile ? 20 : 18,
-                color: "#fff"
-              }
-            },
-            /* @__PURE__ */ React.createElement("path", { d: "M2 21l21-9L2 3v7l15 2-15 2v7z" })
-          )
+          ) : (() => {
+            var _a2, _b2, _c;
+            const iconComponentKey = (_a2 = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _a2.icon_component;
+            const iconUrl = (_b2 = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _b2.icon_url;
+            const iconColor = ((_c = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _c.icon_color) || "#FFFFFF";
+            if (iconComponentKey && ICON_MAP[iconComponentKey]) {
+              const Icon2 = ICON_MAP[iconComponentKey];
+              return /* @__PURE__ */ React.createElement(Icon2, { className: "w-4 h-4", style: { color: iconColor } });
+            }
+            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" } });
+          })()
         )
       ),
       inputAreaConfig.show_branding !== false && /* @__PURE__ */ React.createElement(
@@ -20463,12 +20648,10 @@
     shadowRoot.appendChild(styles);
     const root2 = client.createRoot(mountPoint);
     try {
-      console.log("🚀 Rendering LiveChatWidget with ID:", widgetId, "Mode:", mode);
       root2.render(
         /* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(LiveChatWidget, { widgetId, apiKey }))
       );
       container.__livechat_mounted = true;
-      console.log("✅ LiveChatWidget rendered successfully");
     } catch (err) {
       console.error("❌ LiveChatWidget render failed:", err);
       const errDiv = document.createElement("div");

package/package.json

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