@xapp/chat-widget 1.64.2 → 1.65.1

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) {
@@ -753,7 +759,7 @@ var ChatButton = function (_a) {
                 setAnimate(false);
             }, configToApply.animationTimeout);
         }
-        else {
+        else if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) {
             // No delay or timeout, start animation immediately
             setAnimate(true);
         }
@@ -796,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) {
@@ -2952,24 +2958,34 @@ var StentorRouterChat = /** @class */ (function () {
             _this.setConnectionStatus("online");
         };
     };
-    StentorRouterChat.prototype.wsCreate = function () {
+    StentorRouterChat.prototype.wsClose = function () {
+        if (this.ws) {
+            this.ws.onclose = null;
+            this.ws.onerror = null;
+            this.ws.onopen = null;
+            this.ws.onmessage = null;
+            this.ws.close();
+        }
+    };
+    StentorRouterChat.prototype.wsCreate = function (createWsReason) {
         var _this = this;
-        var _a, _b;
         if (this.isDisposed) {
             log("Stopping reconnect for disposed router connector");
             return undefined;
         }
         else {
-            log("Trying to re-connect...");
+            log("Trying to re-connect. Reason: \"".concat(createWsReason, "\""));
         }
         var url = new URL(this.serverUrl);
         url.searchParams.set("userId", this._userId);
         url.searchParams.set("isAdmin", "".concat(this.isAdmin));
+        url.searchParams.set("createWsReason", createWsReason); // tell the server the reconnect reason
         // Force close - just in case - when you create new
-        if (this.ws && ((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) !== WebSocket.CLOSED) {
-            var wsState = (_b = this.ws) === null || _b === void 0 ? void 0 : _b.readyState;
+        if (this.ws && !(this.ws.readyState === WebSocket.CLOSED || this.ws.readyState === WebSocket.CLOSING)) {
+            var wsState = this.ws.readyState;
+            log("Forced WS close. State: ".concat(wsState));
             try {
-                this.ws.close();
+                this.wsClose();
             }
             catch (err) {
                 err("Failed to close WS (ready state: ".concat(wsState, "): ").concat(err));
@@ -3014,7 +3030,7 @@ var StentorRouterChat = /** @class */ (function () {
                         log("Widget says: ".concat(payloadData));
                         if (!this.ws) {
                             // Fire up the WebSocket
-                            this.autoReconnect(this.wsCreate.bind(this));
+                            this.autoReconnect(this.wsCreate.bind(this, "emitNoWs"));
                         }
                         return [4 /*yield*/, waitFor(this.checkConnection.bind(this), 1000, 10000, "connection")
                                 .then(function (t) {
@@ -3169,14 +3185,14 @@ var StentorRouterChat = /** @class */ (function () {
     StentorRouterChat.prototype.dispose = function () {
         this.isDisposed = true;
         if (this.ws) {
-            this.ws.close();
+            this.wsClose();
         }
         log("Closed web socket (dispose)");
     };
     StentorRouterChat.prototype.sleep = function () {
         this.isDisposed = true;
         if (this.ws) {
-            this.ws.close();
+            this.wsClose();
         }
         log("Closed web socket (sleep)");
     };
@@ -3187,7 +3203,7 @@ var StentorRouterChat = /** @class */ (function () {
             return;
         }
         // Fire up the WebSocket 
-        this.autoReconnect(this.wsCreate.bind(this));
+        this.autoReconnect(this.wsCreate.bind(this, "wakeup"));
         log("Waking up");
     };
     StentorRouterChat.prototype.bargeOut = function (_cb) {
@@ -7949,11 +7965,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;
@@ -7961,18 +7983,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 },
@@ -8230,11 +8255,11 @@ var Suggestions = function (props) {
 };
 
 var ChatFooter = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
+    var isAdmin = props.isAdmin, isChatting = props.isChatting, visible = props.visible, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, onSubmit = props.onSubmit;
     var innerDispatch = useChatDispatch();
-    var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, onSubmit = props.onSubmit;
-    var _c = React$1.useState(false), drawerOpen = _c[0], setDrawerState = _c[1]; // false initially
-    var _d = React$1.useState(), suggestionSearch = _d[0], setSuggestionSearch = _d[1];
+    var _d = React$1.useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
+    var _e = React$1.useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
     var contexts = reactRedux.useSelector(function (state) { return state.activeContexts; });
     var suggestions = useSuggestions(suggestionSearch, contexts);
     var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
@@ -8244,10 +8269,13 @@ 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 brandingText = (_c = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _c === void 0 ? void 0 : _c.text;
+    // If they are NOT an admin, automatically enabled the input
+    var _f = React$1.useState(!isAdmin), enableInput = _f[0], setEnableInput = _f[1];
+    var _g = React$1.useState({
         text: "",
         formats: []
-    }), input = _e[0], setInput = _e[1];
+    }), input = _g[0], setInput = _g[1];
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
@@ -8283,6 +8311,9 @@ var ChatFooter = function (props) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
+    var handleAdminJoin = function (status) {
+        setEnableInput(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,
@@ -8290,11 +8321,12 @@ 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 }),
-        brandingEnabled && React__default$1["default"].createElement(ChatBranding, { text: 'Powered by [XAPP AI](https://xapp.ai)' })));
+        isAdmin && isChatting && visible && React__default$1["default"].createElement(AdminBar, { onAdminJoin: handleAdminJoin }),
+        React__default$1["default"].createElement("div", { style: { pointerEvents: enableInput ? "auto" : "none", opacity: enableInput ? 1 : 0.5 } },
+            React__default$1["default"].createElement(Input, { addClass: "chat-footer__input " + (isChatting && 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 && brandingText && React__default$1["default"].createElement(ChatBranding, { text: brandingText })));
 };
 
 var noop = function () { };