@xapp/chat-widget 1.63.0 → 1.64.2

package/dist/index.js

@@ -719,10 +719,11 @@ var ChatButton = function (_a) {
     var onClick = _a.onClick, addClass = _a.addClass, config = _a.config, visible = _a.visible, borderStyle = _a.borderStyle, imageUrl = _a.imageUrl;
     var _c = React$1.useState(defaultWidgetButtonWidth), buttonWidth = _c[0], setButtonWidth = _c[1];
     var _d = React$1.useState(false), animate = _d[0], setAnimate = _d[1];
-    var mobileWidht = ((_b = config === null || config === void 0 ? void 0 : config.mobile) === null || _b === void 0 ? void 0 : _b.applyAtLessThanWidth) || defaultNonMobileScreenWidth;
+    var mobileWidth = ((_b = config === null || config === void 0 ? void 0 : config.mobile) === null || _b === void 0 ? void 0 : _b.applyAtLessThanWidth) || defaultNonMobileScreenWidth;
+    // Determines mobile or normal
     var getConfigToApply = function () {
         var screenWidth = window.innerWidth;
-        if (screenWidth <= parseInt(mobileWidht, 10) && (config === null || config === void 0 ? void 0 : config.mobile)) {
+        if (screenWidth <= parseInt(mobileWidth, 10) && (config === null || config === void 0 ? void 0 : config.mobile)) {
             return config.mobile;
         }
         else {
@@ -731,27 +732,44 @@ var ChatButton = function (_a) {
     };
     var configToApply = getConfigToApply();
     React$1.useEffect(function () {
-        if ((configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay) && (configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout)) {
-            var delayTimer_1 = setTimeout(function () {
+        var delayTimer;
+        var timeoutTimer;
+        if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay) {
+            // Set a delay for the animation to start
+            delayTimer = setTimeout(function () {
                 setAnimate(true);
-                var timeoutTimer = setTimeout(function () {
-                    setAnimate(false);
-                }, configToApply.timeout);
-                return function () {
-                    clearTimeout(timeoutTimer);
-                };
+                if (configToApply.animationTimeout) {
+                    // Stop the animation after the specified timeout
+                    timeoutTimer = setTimeout(function () {
+                        setAnimate(false);
+                    }, configToApply.animationTimeout);
+                }
             }, configToApply.delay);
-            return function () {
-                clearTimeout(delayTimer_1);
-            };
         }
-        return function () { };
-    }, [configToApply]);
+        else if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationTimeout) {
+            // Start animation immediately and set a timeout to stop it
+            setAnimate(true);
+            timeoutTimer = setTimeout(function () {
+                setAnimate(false);
+            }, configToApply.animationTimeout);
+        }
+        else {
+            // No delay or timeout, start animation immediately
+            setAnimate(true);
+        }
+        return function () {
+            // Clear timers on unmount or when dependencies change
+            if (delayTimer)
+                clearTimeout(delayTimer);
+            if (timeoutTimer)
+                clearTimeout(timeoutTimer);
+        };
+    }, [configToApply, setAnimate]);
     var animation = animate ? ((configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle") : "none";
     React$1.useEffect(function () {
         var handleResize = function () {
             var screenWidth = window.innerWidth;
-            var newButtonWidth = screenWidth < (parseInt(mobileWidht, 10))
+            var newButtonWidth = screenWidth < (parseInt(mobileWidth, 10))
                 ? defaultMobileWidgetButtonWidth : defaultWidgetButtonWidth;
             setButtonWidth(newButtonWidth);
         };
@@ -760,7 +778,7 @@ var ChatButton = function (_a) {
         return function () {
             window.removeEventListener('resize', handleResize);
         };
-    }, [mobileWidht]);
+    }, [mobileWidth]);
     var maxSvgSize = 22;
     var svgSize = Math.min(maxSvgSize, (+buttonWidth / +defaultWidgetButtonWidth) * maxSvgSize);
     return (React__default$1["default"].createElement("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(addClass || "").trim(), onClick: onClick },
@@ -30766,16 +30784,16 @@ var MessageList = function (props) {
         switch (msg.type) {
             case "chat.file":
             case "chat.msg":
-                return (React__default$1["default"].createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
+                return (React__default$1["default"].createElement(ChatMessage, { key: "cm-".concat(msg.type, "-").concat(msg.timestamp), message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
             case "chat.failureMsg":
-                return (React__default$1["default"].createElement(FailureMessage, __assign({ key: msg.type + msg.timestamp, agents: props.agents, time: time }, msg.failureMsg)));
+                return (React__default$1["default"].createElement(FailureMessage, __assign({ key: "fm-".concat(msg.type, "-").concat(msg.timestamp), agents: props.agents, time: time }, msg.failureMsg)));
             case "chat.memberjoin":
             case "chat.memberleave":
             case "chat.rating":
             case "chat.typing":
-                return (React__default$1["default"].createElement(SystemMessage, { key: msg.type + msg.timestamp, time: time, message: msg }));
+                return (React__default$1["default"].createElement(SystemMessage, { key: "sm-".concat(msg.type, "-").concat(msg.timestamp), time: time, message: msg }));
             case "chat.request.rating":
-                return (React__default$1["default"].createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, time: time, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
+                return (React__default$1["default"].createElement(ChatRatingContainer, { key: "cr-".concat(msg.type, "-").concat(msg.timestamp), agent: user, hasRating: props.hasRating, time: time, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
             case "chat.offline":
                 return React__default$1["default"].createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp), time: time });
             case "chat.prechat":
@@ -30783,7 +30801,7 @@ var MessageList = function (props) {
             default:
                 return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
                     React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + time + " system message"),
-                    React__default$1["default"].createElement("div", { key: +new Date() },
+                    React__default$1["default"].createElement("div", { key: "uhm-".concat(+new Date()) },
                         "Unhandled message: ",
                         JSON.stringify(msg))));
         }