@xapp/chat-widget 1.63.1 → 1.65.0

package/dist/index.js

@@ -12,14 +12,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default$1 = /*#__PURE__*/_interopDefaultLegacy(React$1);
 var thunk__default = /*#__PURE__*/_interopDefaultLegacy(thunk);
 
-var ActionButton = function (props) {
+var ActionButton = function (_a) {
+    var label = _a.label, disable = _a.disable, type = _a.type, addClass = _a.addClass, onClick = _a.onClick;
     function handleClick(ev) {
         ev.stopPropagation();
-        if (props.onClick) {
-            props.onClick(props.label);
+        if (onClick) {
+            onClick(label);
         }
     }
-    return (React__default$1["default"].createElement("button", { type: props.type, className: "action-button ".concat(props.addClass), onClick: handleClick }, props.label));
+    return (React__default$1["default"].createElement("button", { disabled: disable, type: type, className: "action-button ".concat(addClass), onClick: handleClick }, label));
 };
 
 var defaultServerUrl = "";
@@ -678,40 +679,45 @@ var CtaBubble = function (props) {
 };
 
 var CtaBubbleContainer = function (props) {
-    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick;
+    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick, children = props.children;
     var startTime = React$1.useMemo(function () {
-        if (visible) {
-            return new Date().valueOf();
-        }
-        return undefined;
+        return visible ? new Date().valueOf() : undefined;
     }, [visible]);
     var _a = React$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
+    var isMounted = React$1.useRef(true);
     React$1.useEffect(function () {
-        var isMounted = true;
+        var hideTimer = null;
         if (startTime) {
             var delayTimer_1 = setTimeout(function () {
-                if (isMounted) {
+                if (isMounted.current) {
                     setShowBubble(true);
                 }
-                var hideTimer = setTimeout(function () {
-                    if (isMounted) {
-                        setShowBubble(false);
-                    }
-                }, timeout);
-                return function () {
-                    clearTimeout(hideTimer);
-                };
+                if (typeof timeout === "number") {
+                    hideTimer = setTimeout(function () {
+                        if (isMounted.current) {
+                            setShowBubble(false);
+                        }
+                    }, timeout);
+                }
             }, delay);
             return function () {
-                isMounted = false;
+                if (hideTimer) {
+                    clearTimeout(hideTimer);
+                }
                 clearTimeout(delayTimer_1);
+                isMounted.current = false;
             };
         }
+        // Return a cleanup function for the case where startTime is undefined
         return function () {
-            isMounted = false;
+            if (hideTimer) {
+                clearTimeout(hideTimer);
+            }
+            isMounted.current = false;
         };
     }, [startTime, timeout, delay]);
-    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, visible && showBubble && React__default$1["default"].createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, props.children)));
+    console.log("visible ".concat(visible, " showBubble ").concat(showBubble));
+    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, visible && showBubble && React__default$1["default"].createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, children)));
 };
 
 var ChatButton = function (_a) {
@@ -719,10 +725,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 +738,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 if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) {
+            // 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 +784,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 },
@@ -778,8 +802,8 @@ var ChatButton = function (_a) {
         // Fallback to default SVG
         React__default$1["default"].createElement("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22" },
             React__default$1["default"].createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" })))),
-        config && config.message && (React__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
-            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, visible: !visible }, config.message)))));
+        configToApply && configToApply.message && (React__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
+            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, visible: !visible /** Why is this !visible */ }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
 };
 
 var ChatCard = function (props) {
@@ -7931,11 +7955,17 @@ function useSuggestions(search, context) {
     }); }, [suggestions, suggestionIndex, execute, suggestionItem]);
 }
 
-var AdminBar = function (_props) {
+var AdminBar = function (_a) {
+    var onAdminJoin = _a.onAdminJoin;
     var name = React$1.useRef(null);
     // We can manage this locally
     // const hasAdminJoined = useSelector<ChatState, boolean | undefined>(state => state.hasAdminJoined);
-    var _a = React$1.useState(false), joined = _a[0], setJoined = _a[1];
+    var _b = React$1.useState(false), joined = _b[0], setJoined = _b[1];
+    var _c = React$1.useState(""), inputName = _c[0], setInputName = _c[1];
+    function handleInputChange(event) {
+        setInputName(event.target.value);
+    }
+    var disable = inputName === "" || inputName === undefined;
     var dispatch = useChatServerDispatch();
     function onSubmit(event) {
         var _a;
@@ -7943,18 +7973,21 @@ var AdminBar = function (_props) {
         if (!joined) {
             dispatch(sendBargeIn((_a = name.current) === null || _a === void 0 ? void 0 : _a.value));
             setJoined(true);
+            onAdminJoin(true);
         }
         else {
             dispatch(sendBargeOut());
             setJoined(false);
+            onAdminJoin(false);
+            setInputName("");
         }
     }
     function renderJoin() {
         return (React__default$1["default"].createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
             React__default$1["default"].createElement("div", { className: "xappw-admin-input-form__buttons" },
-                React__default$1["default"].createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join" })),
+                React__default$1["default"].createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join", disable: disable })),
             React__default$1["default"].createElement("div", { className: "xappw-admin-input" },
-                React__default$1["default"].createElement("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input" }))));
+                React__default$1["default"].createElement("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input", onChange: handleInputChange }))));
     }
     function renderLeave() {
         return (React__default$1["default"].createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
@@ -8226,10 +8259,11 @@ var ChatFooter = function (props) {
     var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex;
     var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
     var brandingEnabled = (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _b === void 0 ? void 0 : _b.enabled;
-    var _e = React$1.useState({
+    var _e = React$1.useState(false), isAdminJoined = _e[0], setAdminJoined = _e[1];
+    var _f = React$1.useState({
         text: "",
         formats: []
-    }), input = _e[0], setInput = _e[1];
+    }), input = _f[0], setInput = _f[1];
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
@@ -8265,6 +8299,9 @@ var ChatFooter = function (props) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
+    var handleAdminJoin = function (status) {
+        setAdminJoined(status);
+    };
     return (React__default$1["default"].createElement("div", { className: "chat-footer background-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": false },
         showMenu && menuItems.length ?
             React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
@@ -8272,10 +8309,11 @@ var ChatFooter = function (props) {
                 React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
                     React__default$1["default"].createElement(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
         React__default$1["default"].createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, onItemClick: handleItemClick, onItemUse: handleItemUse }),
-        props.isAdmin && props.isChatting && props.visible && React__default$1["default"].createElement(AdminBar, null),
-        React__default$1["default"].createElement(Input, { addClass: "chat-footer__input " + (props.isChatting && props.visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
-            // onFocus={this.inputOnFocus}
-            onFileUpload: props.onFileUpload }),
+        props.isAdmin && props.isChatting && props.visible && React__default$1["default"].createElement(AdminBar, { onAdminJoin: handleAdminJoin }),
+        React__default$1["default"].createElement("div", { style: { pointerEvents: isAdminJoined ? "auto" : "none", opacity: isAdminJoined ? 1 : 0.5 } },
+            React__default$1["default"].createElement(Input, { addClass: "chat-footer__input " + (props.isChatting && props.visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
+                // onFocus={this.inputOnFocus}
+                onFileUpload: props.onFileUpload })),
         brandingEnabled && React__default$1["default"].createElement(ChatBranding, { text: 'Powered by [XAPP AI](https://xapp.ai)' })));
 };
 
@@ -30766,16 +30804,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 +30821,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))));
         }