@xapp/chat-widget 1.53.1 → 1.54.0

package/dist/index.es.js

@@ -2023,12 +2023,20 @@ function executeAction(text, token) {
     }; };
 }
 
+/**
+ * This is not used anymore. It was part of the handshake with the legacy "chat server"
+ *
+ * @param token
+ * @returns
+ */
 function receiveToken(token) {
     return {
         type: "receiveToken",
         detail: {
             token: token,
-            timestamp: +Date()
+            timestamp: +Date(),
+            type: "receiveToken",
+            user: undefined
         }
     };
 }
@@ -2147,6 +2155,26 @@ function setConnectionStatus(status) {
     };
 }
 
+function sendBargeIn(agentName) {
+    return function (chatServer) { return function () {
+        chatServer.bargeIn(agentName, function (err) {
+            if (err) {
+                log(err);
+            }
+        });
+    }; };
+}
+
+function sendBargeOut() {
+    return function (chatServer) { return function () {
+        chatServer.bargeOut(function (err) {
+            if (err) {
+                log(err);
+            }
+        });
+    }; };
+}
+
 function reset() {
     return {
         type: "reset"
@@ -2161,6 +2189,14 @@ var LogChat = /** @class */ (function () {
     function LogChat(inner) {
         this.inner = inner;
     }
+    LogChat.prototype.bargeOut = function (cb) {
+        log("CLIENT: bargeOut");
+        this.inner.bargeOut(cb);
+    };
+    LogChat.prototype.bargeIn = function (agentName, cb) {
+        log("CLIENT: bargeIn: ".concat(agentName));
+        this.inner.bargeIn(agentName, cb);
+    };
     LogChat.prototype.init = function (dispatch) {
         this.inner.init(dispatch);
     };
@@ -2631,7 +2667,7 @@ function parseSuggestionsResponse(response, direction) {
     }, []);
 }
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -2662,7 +2698,7 @@ function __generator(thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -3233,6 +3269,20 @@ var StentorDirectChat = /** @class */ (function () {
             });
         });
     };
+    StentorDirectChat.prototype.bargeOut = function (_cb) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                throw new Error("Method not implemented: bargeOut");
+            });
+        });
+    };
+    StentorDirectChat.prototype.bargeIn = function (_agentName, _cb) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                throw new Error("Method not implemented: bargeIn");
+            });
+        });
+    };
     StentorDirectChat.prototype.getBot = function (user) {
         var _a;
         var bot = (_a = this.options) === null || _a === void 0 ? void 0 : _a.bot;
@@ -3552,12 +3602,16 @@ var StentorLocalChat = /** @class */ (function () {
     };
     StentorLocalChat.prototype.dispose = function () {
     };
+    StentorLocalChat.prototype.bargeOut = function () {
+    };
+    StentorLocalChat.prototype.bargeIn = function () {
+    };
     return StentorLocalChat;
 }());
 
 /*! Copyright (c) 2022, XAPPmedia */
 var PERMISSION_QUESTION_EXPIRATION_MS = 300000; // 5 minutes
-function requestFromMessage(message, userId, isNewSession, sessionId, accessToken, attributes) {
+function requestFromMessage(message, userId, isNewSession, sessionId, accessToken, attributes, visitorInfo) {
     var _a, _b, _c, _d;
     var request;
     var now = new Date().getTime();
@@ -3583,13 +3637,13 @@ function requestFromMessage(message, userId, isNewSession, sessionId, accessToke
             var expired = now - permissionRequest.time > PERMISSION_QUESTION_EXPIRATION_MS;
             var text = (_d = message.msg.text) === null || _d === void 0 ? void 0 : _d.toLowerCase();
             var granted = !expired;
-            var userProfile = { id: this._userId };
+            var userProfile = { id: userId };
             if (!expired) {
                 if (permissionRequest.type === "EMAIL") {
                     var isEmail = looksLikeEmail(text);
                     granted = isEmail;
-                    userProfile.email = this.visitorInfo.email;
-                    userProfile.name = this.visitorInfo.displayName;
+                    userProfile.email = visitorInfo.email;
+                    userProfile.name = visitorInfo.displayName;
                     this.visitorInfo.email = text;
                 }
                 if (permissionRequest.type === "LOCATION_PRECISE") {
@@ -3605,8 +3659,8 @@ function requestFromMessage(message, userId, isNewSession, sessionId, accessToke
             request = {
                 type: "PERMISSION_GRANT",
                 rawQuery: message.msg.text,
-                sessionId: this._sessionId,
-                userId: this._userId,
+                sessionId: sessionId,
+                userId: userId,
                 isNewSession: false,
                 granted: granted,
                 userProfile: userProfile,
@@ -3614,13 +3668,13 @@ function requestFromMessage(message, userId, isNewSession, sessionId, accessToke
                 platform: "stentor-platform",
                 channel: "widget",
                 accessToken: accessToken,
-                attributes: attributes
+                attributes: attributes,
             };
         }
         else if (message.type === "custom") {
             request = __assign(__assign({}, JSON.parse(message.payload)), { 
                 // token: message.msg.token,
-                sessionId: this._sessionId, userId: this._userId, isNewSession: false, 
+                sessionId: sessionId, userId: userId, isNewSession: false, 
                 // intentId: "OptionSelect",
                 platform: "stentor-platform", channel: "widget", accessToken: accessToken, attributes: attributes });
         }
@@ -3628,28 +3682,28 @@ function requestFromMessage(message, userId, isNewSession, sessionId, accessToke
             request = {
                 type: "OPTION_SELECT_REQUEST",
                 token: message.msg.token,
-                sessionId: this._sessionId,
-                userId: this._userId,
+                sessionId: sessionId,
+                userId: userId,
                 isNewSession: false,
                 intentId: "OptionSelect",
                 platform: "stentor-platform",
                 channel: "widget",
                 accessToken: accessToken,
-                attributes: attributes
+                attributes: attributes,
             };
         }
         else {
             request = {
                 type: "INTENT_REQUEST",
                 rawQuery: message.msg.text,
-                sessionId: this._sessionId,
-                userId: this._userId,
+                sessionId: sessionId,
+                userId: userId,
                 isNewSession: false,
                 intentId: "NLU_RESULT_PLACEHOLDER",
                 platform: "stentor-platform",
                 channel: "widget",
                 accessToken: accessToken,
-                attributes: attributes
+                attributes: attributes,
             };
         }
     }
@@ -3699,29 +3753,37 @@ var StentorRouterChat = /** @class */ (function () {
         this.handlers = {};
         this.config = config;
         this.options = options;
-        // Dig out the path parameters. Put them into the attributes. 
+        // Dig out the path parameters. Put them into the attributes.
         // The WS url is the barebone domain.
         var url = new URL(this.config.url);
         var urlPath = (_a = url.pathname) === null || _a === void 0 ? void 0 : _a.split("/");
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.isAdmin = (url.searchParams.get('isAdmin') || window.xaIsAdmin) === "true";
+        var locationUrl = new URL(window.location.href);
+        this.isAdmin = locationUrl.searchParams.get("isAdmin") === "true";
         this.serverUrl = "".concat(url.origin);
         if (urlPath && urlPath.length > 1) {
             this.serverUrl = "".concat(this.serverUrl, "/").concat(urlPath[1]); // the first path (after the initial "") is the "dev" or "prod"
-            this.urlAttributes.path = urlPath.slice(2);
+            this.urlAttributes.path = urlPath.slice(1);
         }
-        log("WS url: ".concat(this.serverUrl, " attributes: ").concat(JSON.stringify(this.attributes)));
-        // this.configurableMessages = options.configurableMessages;
+        log("WS url: ".concat(this.serverUrl, " isAdmin: ").concat(this.isAdmin, " attributes: ").concat(JSON.stringify(this.attributes)));
+        this.configurableMessages = getConfigurableMessagesConfig(options.configurableMessages);
     }
     StentorRouterChat.prototype.init = function (dispatch) {
         var _this = this;
-        // Fire up the WebSocket
-        this.autoReconnect(this.wsCreate.bind(this));
         this.dispatch = dispatch;
+        this.setAccountStatus("offline");
         // Register "handlers" for the incoming events
-        this.handlers["account_status"] = function (_data, _sender) {
-            // Register the "endpoint" with the server (send visitor data)
-            _this.emit("connection update");
+        this.handlers["connection update"] = function (data, _sender) {
+            log("Connection update received. Session created: ".concat(data.sessionCreated, " Error: ").concat(data.errorMessage || ""));
+            if (data.sessionCreated) {
+                _this.sessionCreated = true;
+            }
+            else {
+                // Shut down
+                _this.dispatch(setAccountStatus("offline"));
+                _this.dispatch(setConnectionStatus("offline"));
+            }
+        };
+        this.handlers["account status"] = function (_data, _sender) {
             dispatch({
                 type: "account_status",
                 detail: {
@@ -3730,6 +3792,11 @@ var StentorRouterChat = /** @class */ (function () {
                 },
             });
         };
+        this.handlers["failure"] = function (data, sender) {
+            err("Router says something failed: type: ".concat(data.type, " tries: ").concat(data.tries, " error: ").concat(data.error));
+            var _a = _this.configurableMessages[data.tries], retry = _a.retry, delay = _a.delay, text = _a.text;
+            _this.sendFailureMessage(retry, data.delay || delay, text, sender);
+        };
         this.handlers["new message"] = function (data, sender) {
             // Because the router's internal message format is Stentor channel compatible.
             // So the data is either a stentor Request (from widget) or a stentor Response (from bot)
@@ -3755,7 +3822,7 @@ var StentorRouterChat = /** @class */ (function () {
                         displayName: sender.displayName || sender.email || sender.userId,
                         nick: senderToNick(sender),
                     },
-                    msg: message,
+                    msg: message.msg,
                     timestamp: +new Date(),
                 },
             });
@@ -3821,27 +3888,30 @@ var StentorRouterChat = /** @class */ (function () {
             _this.dispatch(setAccountStatus("online"));
             _this.dispatch(setConnectionStatus("online"));
         };
-        this.handlers["reconnect_failed"] = function (_data) {
+        this.handlers["reconnect failed"] = function (_data) {
             _this.dispatch(setAccountStatus("offline"));
             _this.dispatch(setConnectionStatus("offline"));
         };
-        this.handlers["reconnect_error"] = function (_data) {
+        this.handlers["reconnect error"] = function (_data) {
             _this.dispatch(setAccountStatus("offline"));
         };
-        this.setAccountStatus("offline");
+        // pretend we are online. The emit() will connect
+        this.setAccountStatus("online");
+        this.setConnectionStatus("online");
     };
     StentorRouterChat.prototype.autoReconnect = function (wsCreate) {
         var _this = this;
-        var setStatus = this.setAccountStatus.bind(this);
+        var setActStatus = this.setAccountStatus.bind(this);
+        var setConnStatus = this.setConnectionStatus.bind(this);
         function startReconnecting() {
-            setStatus("offline");
             var interval = setInterval(function () {
                 log("Re-creating WS connection");
                 var ws = wsCreate();
                 ws.onopen = function () {
                     log("Re-opened WS connection");
                     // We are connected
-                    setStatus("online");
+                    setActStatus("online");
+                    setConnStatus("online");
                     ws.onclose = startReconnecting;
                     clearInterval(interval);
                 };
@@ -3854,26 +3924,77 @@ var StentorRouterChat = /** @class */ (function () {
             log("Opened WS connection");
             // We are connected
             _this.setAccountStatus("online");
+            _this.setConnectionStatus("online");
         };
     };
     StentorRouterChat.prototype.wsCreate = function () {
-        this.ws = new WebSocket("".concat(this.serverUrl, "?userId=").concat(this._userId));
-        this.ws.onmessage = function (data) {
-            console.log("SERVER says: ".concat(JSON.stringify(data)));
-            //     const message: RouterMessage = JSON.parse(data);            
-            //     this.handlers[message.event](message.data, message.sender);
+        var _this = this;
+        this.setConnectionStatus("pending");
+        this.ws = new WebSocket("".concat(this.serverUrl, "?userId=").concat(this._userId, "&isAdmin=").concat(this.isAdmin));
+        this.ws.onerror = function (ev) {
+            var _a;
+            log("Error in WS connection. Type: ".concat(!ev ? "?" : ev.type, " Ready State: ").concat((_a = _this.ws) === null || _a === void 0 ? void 0 : _a.readyState));
+            _this.setConnectionStatus("pending");
+        };
+        this.ws.onmessage = function (me) {
+            log("ROUTER says: ".concat(me.data));
+            var message = JSON.parse(me.data);
+            var handler = _this.handlers[message.event];
+            if (handler) {
+                _this.handlers[message.event](message.data, message.sender);
+            }
+            else {
+                log("Unknown router message event: ".concat(message.event));
+            }
         };
         return this.ws;
     };
+    StentorRouterChat.prototype.checkConnection = function () {
+        return this.ws.readyState === WebSocket.OPEN;
+    };
     StentorRouterChat.prototype.emit = function (event, data) {
-        var payloadData = JSON.stringify({ event: event, data: data, sender: this.visitorInfo });
-        log("Widget says: ".concat(payloadData));
-        this.ws.send(payloadData);
+        return __awaiter$1(this, void 0, void 0, function () {
+            var payloadData;
+            var _this = this;
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        payloadData = JSON.stringify({
+                            event: event,
+                            data: data,
+                            sender: this.visitorInfo,
+                            sessionId: this._sessionId,
+                        });
+                        log("Widget says: ".concat(payloadData));
+                        if (!this.ws) {
+                            // Fire up the WebSocket
+                            this.autoReconnect(this.wsCreate.bind(this));
+                        }
+                        return [4 /*yield*/, waitFor(this.checkConnection.bind(this), 500, 5000, "connection")
+                                .then(function (t) {
+                                if (t > 0) {
+                                    log("Connection is ready in ".concat(t, " ms"));
+                                }
+                                _this.ws.send(payloadData);
+                            })
+                                .catch(function (t) {
+                                console.log("Connection wait timed out in ".concat(t, " ms"));
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     StentorRouterChat.prototype.setAccountStatus = function (status) {
         log("SERVER account_status: ".concat(JSON.stringify(status)));
         this.dispatch(setAccountStatus(status));
     };
+    StentorRouterChat.prototype.setConnectionStatus = function (status) {
+        log("SERVER: connection_update: ".concat(JSON.stringify(status)));
+        this.dispatch(setConnectionStatus(status));
+    };
     StentorRouterChat.prototype.sendOfflineMsg = function (_, cb) {
         cb();
     };
@@ -3890,11 +4011,48 @@ var StentorRouterChat = /** @class */ (function () {
             });
         });
     };
+    StentorRouterChat.prototype.sendFailureMessage = function (retry, delay, text, sender) {
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.typing",
+                user: {
+                    nick: senderToNick(sender),
+                },
+                typing: false,
+                timestamp: +new Date(),
+            },
+        });
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.failureMsg",
+                user: {
+                    nick: senderToNick(sender)
+                },
+                failureMsg: { retry: retry, delay: delay, text: text },
+                timestamp: +new Date()
+            }
+        });
+    };
+    StentorRouterChat.prototype.checkSession = function () {
+        return this.sessionCreated;
+    };
     StentorRouterChat.prototype.sendChatMsgRequest = function (serviceRequest, cb) {
         return __awaiter$1(this, void 0, void 0, function () {
+            var _this = this;
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.postMessage(serviceRequest)];
+                    case 0: return [4 /*yield*/, waitFor(this.checkSession.bind(this), 500, 5000, "session creation")
+                            .then(function (t) {
+                            if (t > 0) {
+                                log("Session creation is ready in ".concat(t, " ms"));
+                            }
+                            _this.postMessage(serviceRequest);
+                        })
+                            .catch(function (t) {
+                            console.log("Session creation wait timed out in ".concat(t, " ms"));
+                        })];
                     case 1:
                         _a.sent();
                         cb();
@@ -3903,23 +4061,24 @@ var StentorRouterChat = /** @class */ (function () {
             });
         });
     };
-    StentorRouterChat.prototype.sendTyping = function (isTyping) {
-        this.emit(isTyping ? "typing" : "stop typing");
+    StentorRouterChat.prototype.sendTyping = function (_isTyping) {
+        // TODO: Is this too much traffic?
+        // this.emit(isTyping ? "typing" : "stop typing");
     };
     StentorRouterChat.prototype.setVisitorInfo = function (visitorInfoMessage, cb) {
-        log("Visitor Info Mesage = ".concat(visitorInfoMessage));
+        log("Visitor Info Message = ".concat(JSON.stringify(visitorInfoMessage)));
         this.visitorInfo = {
             deviceId: "Widget",
             userId: visitorInfoMessage.userId,
             displayName: visitorInfoMessage.displayName || visitorInfoMessage.name,
             email: visitorInfoMessage.email,
             isAdmin: this.isAdmin,
-            urlAttributes: this.urlAttributes
+            urlAttributes: this.urlAttributes,
         };
         this.attributes = __assign(__assign(__assign({}, visitorInfoMessage.attributes), this.attributes), { currentUrl: window.location.href });
         this.accessToken = visitorInfoMessage.accessToken;
-        this.emit("add user");
         this.startSession();
+        this.postVisitorInfo(); // we, the widget, joined the server
         cb();
     };
     StentorRouterChat.prototype.sendChatRating = function () { };
@@ -3931,6 +4090,32 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.flush = function () { };
     StentorRouterChat.prototype.dispose = function () { };
+    StentorRouterChat.prototype.bargeOut = function (_cb) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                this.emit("barge out");
+                return [2 /*return*/];
+            });
+        });
+    };
+    StentorRouterChat.prototype.bargeIn = function (agentName, _cb) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                this.visitorInfo.displayName = agentName;
+                this.emit("barge in");
+                return [2 /*return*/];
+            });
+        });
+    };
+    StentorRouterChat.prototype.postVisitorInfo = function () {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                this.sessionCreated = false;
+                this.emit("user joined");
+                return [2 /*return*/];
+            });
+        });
+    };
     StentorRouterChat.prototype.postMessage = function (message) {
         return __awaiter$1(this, void 0, void 0, function () {
             var userId, sessionId, accessToken, attributes, request;
@@ -3939,7 +4124,7 @@ var StentorRouterChat = /** @class */ (function () {
                 sessionId = this._sessionId;
                 accessToken = this.accessToken;
                 attributes = this.attributes || {};
-                request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, attributes);
+                request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, attributes, this.visitorInfo);
                 this.emit("new message", request);
                 return [2 /*return*/];
             });
@@ -3955,34 +4140,61 @@ var StentorRouterChat = /** @class */ (function () {
         else {
             this._userId = "stentor-widget-user-".concat(uuid_1());
         }
-        if (get("sessionId") !== "") {
+        var joinSessionId = new URL(window.location.href).searchParams.get("sessionId");
+        if (joinSessionId) {
+            this._sessionId = joinSessionId;
+            set$1("sessionId", this._sessionId);
+            log("Using enforced session id: ".concat(this._sessionId));
+        }
+        else if (get("sessionId")) {
             this._sessionId = get("sessionId");
+            log("Using persisted session id: ".concat(this._sessionId));
         }
         else {
             this._sessionId = "stentor-widget-session-".concat(uuid_1());
             set$1("sessionId", this._sessionId);
+            log("Using generated session id: ".concat(this._sessionId));
         }
-        // This is a flag that is cleared after the first message is sent
+        // Always. This triggers a LAUNCH_REQUEST most of the time
         this.isNewSession = true;
+        log("Started session: ".concat(this._sessionId));
     };
-    Object.defineProperty(StentorRouterChat.prototype, "userId", {
-        get: function () {
-            return this._userId;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(StentorRouterChat.prototype, "sessionId", {
-        get: function () {
-            return this._sessionId;
-        },
-        enumerable: false,
-        configurable: true
-    });
     return StentorRouterChat;
 }());
 function senderToNick(sender) {
-    return "".concat(sender.deviceId, "-").concat(sender.userId);
+    // Both are agents
+    return sender.deviceId === "Bot" ?
+        "agent:bot:".concat(sender.userId) : "agent:widget:".concat(sender.userId);
+}
+/**
+ *
+ * @param check Function that return true/false if the resource is available
+ * @param stepMs check period in ms
+ * @param timeoutMs max wait in ms
+ * @param resource optional resource name. you will see a log message for every check (step)
+ *
+ * @returns the elapsed time in ms (both resolve/reject)
+ */
+function waitFor(check, stepMs, timeoutMs, resource) {
+    var elapsedMs = 0;
+    var poll = function (resolve, reject) {
+        if (elapsedMs > timeoutMs) {
+            reject(elapsedMs);
+        }
+        else {
+            if (check()) {
+                resolve(elapsedMs);
+            }
+            else {
+                elapsedMs += stepMs;
+                if (resource) {
+                    log("Still waiting for ".concat(resource, " (").concat(elapsedMs, " ms)"));
+                }
+                setTimeout(function (_) { return poll(resolve, reject); }, stepMs);
+            }
+        }
+    };
+    return new Promise(poll);
 }
 
 const PACKET_TYPES = Object.create(null); // no Map = no polyfill
@@ -4034,11 +4246,12 @@ const encodeBlobAsBase64 = (data, callback) => {
     const fileReader = new FileReader();
     fileReader.onload = function () {
         const content = fileReader.result.split(",")[1];
-        callback("b" + content);
+        callback("b" + (content || ""));
     };
     return fileReader.readAsDataURL(data);
 };
 
+// imported from https://github.com/socketio/base64-arraybuffer
 const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 // Use a lookup table to find the index.
 const lookup$1 = typeof Uint8Array === 'undefined' ? [] : new Uint8Array(256);
@@ -5206,10 +5419,10 @@ function parse$2(str) {
 }
 function pathNames(obj, path) {
     const regx = /\/{2,9}/g, names = path.replace(regx, "/").split("/");
-    if (path.substr(0, 1) == '/' || path.length === 0) {
+    if (path.slice(0, 1) == '/' || path.length === 0) {
         names.splice(0, 1);
     }
-    if (path.substr(path.length - 1, 1) == '/') {
+    if (path.slice(-1) == '/') {
         names.splice(names.length - 1, 1);
     }
     return names;
@@ -5302,13 +5515,14 @@ class Socket$1 extends Emitter_1 {
                 // Firefox closes the connection when the "beforeunload" event is emitted but not Chrome. This event listener
                 // ensures every browser behaves the same (no "disconnect" event at the Socket.IO level when the page is
                 // closed/reloaded)
-                addEventListener("beforeunload", () => {
+                this.beforeunloadEventListener = () => {
                     if (this.transport) {
                         // silently close the transport
                         this.transport.removeAllListeners();
                         this.transport.close();
                     }
-                }, false);
+                };
+                addEventListener("beforeunload", this.beforeunloadEventListener, false);
             }
             if (this.hostname !== "localhost") {
                 this.offlineEventListener = () => {
@@ -5762,6 +5976,7 @@ class Socket$1 extends Emitter_1 {
             // ignore further transport communication
             this.transport.removeAllListeners();
             if (typeof removeEventListener === "function") {
+                removeEventListener("beforeunload", this.beforeunloadEventListener, false);
                 removeEventListener("offline", this.offlineEventListener, false);
             }
             // set ready state
@@ -5959,14 +6174,22 @@ function _deconstructPacket(data, buffers) {
  */
 function reconstructPacket(packet, buffers) {
     packet.data = _reconstructPacket(packet.data, buffers);
-    packet.attachments = undefined; // no longer useful
+    delete packet.attachments; // no longer useful
     return packet;
 }
 function _reconstructPacket(data, buffers) {
     if (!data)
         return data;
-    if (data && data._placeholder) {
-        return buffers[data.num]; // appropriate buffer (should be natural order anyway)
+    if (data && data._placeholder === true) {
+        const isIndexValid = typeof data.num === "number" &&
+            data.num >= 0 &&
+            data.num < buffers.length;
+        if (isIndexValid) {
+            return buffers[data.num]; // appropriate buffer (should be natural order anyway)
+        }
+        else {
+            throw new Error("illegal attachments");
+        }
     }
     else if (Array.isArray(data)) {
         for (let i = 0; i < data.length; i++) {
@@ -6020,11 +6243,14 @@ class Encoder {
     encode(obj) {
         if (obj.type === PacketType.EVENT || obj.type === PacketType.ACK) {
             if (hasBinary(obj)) {
-                obj.type =
-                    obj.type === PacketType.EVENT
+                return this.encodeAsBinary({
+                    type: obj.type === PacketType.EVENT
                         ? PacketType.BINARY_EVENT
-                        : PacketType.BINARY_ACK;
-                return this.encodeAsBinary(obj);
+                        : PacketType.BINARY_ACK,
+                    nsp: obj.nsp,
+                    data: obj.data,
+                    id: obj.id,
+                });
             }
         }
         return [this.encodeAsString(obj)];
@@ -6091,9 +6317,13 @@ class Decoder extends Emitter_1 {
     add(obj) {
         let packet;
         if (typeof obj === "string") {
+            if (this.reconstructor) {
+                throw new Error("got plaintext data when reconstructing a packet");
+            }
             packet = this.decodeString(obj);
-            if (packet.type === PacketType.BINARY_EVENT ||
-                packet.type === PacketType.BINARY_ACK) {
+            const isBinaryEvent = packet.type === PacketType.BINARY_EVENT;
+            if (isBinaryEvent || packet.type === PacketType.BINARY_ACK) {
+                packet.type = isBinaryEvent ? PacketType.EVENT : PacketType.ACK;
                 // binary packet's json
                 this.reconstructor = new BinaryReconstructor(packet);
                 // no attachments, labeled binary but no binary data to follow
@@ -6222,6 +6452,7 @@ class Decoder extends Emitter_1 {
     destroy() {
         if (this.reconstructor) {
             this.reconstructor.finishedReconstruction();
+            this.reconstructor = null;
         }
     }
 }
@@ -7490,6 +7721,20 @@ var StentorServerChat = /** @class */ (function () {
         var _a;
         (_a = this.socket) === null || _a === void 0 ? void 0 : _a.disconnect();
     };
+    StentorServerChat.prototype.bargeOut = function (_cb) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                throw new Error("Method not implemented: bargeOut");
+            });
+        });
+    };
+    StentorServerChat.prototype.bargeIn = function (_agentName, _cb) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                throw new Error("Method not implemented: bargeIn");
+            });
+        });
+    };
     return StentorServerChat;
 }());
 
@@ -7991,6 +8236,9 @@ var List = function (props) {
 
 var ListMiddlewareWidget = function (props) {
     var msg = props.msg, ctx = props.ctx;
+    if (!ctx) {
+        throw new TypeError("ctx not provided to ".concat(ListMiddlewareWidget.name));
+    }
     var list = useMemo(function () { return convertFromListDisplay(msg); }, [msg]);
     var handleExecute = useExecuteActionCallback();
     var handleButton = useButtonCallback();
@@ -8353,6 +8601,8 @@ function useChatServerVisitorId() {
 function useGreeting(active) {
     var curr = useChatServerVisitorId();
     var snapshotRef = useRef(null);
+    var ctx = useContext(ChatConfigContext);
+    var isAdmin = ctx.env.isAdmin;
     useEffect(function () {
         if (active) {
             if (snapshotRef.current !== curr) {
@@ -8365,18 +8615,23 @@ function useGreeting(active) {
                         accessToken: curr.accessToken,
                         attributes: __assign(__assign({}, curr.attributes), { currentUrl: window.location.href })
                     }));
-                    var timeoutId_1 = setTimeout(function () {
-                        var greetingAction = sendGreeting();
-                        curr.dispatch(greetingAction);
-                    }, 1000);
-                    return function () {
-                        clearTimeout(timeoutId_1);
-                    };
+                    if (!isAdmin) {
+                        var timeoutId_1 = setTimeout(function () {
+                            var greetingAction = sendGreeting();
+                            curr.dispatch(greetingAction);
+                        }, 1000);
+                        return function () {
+                            clearTimeout(timeoutId_1);
+                        };
+                    }
+                    else {
+                        log("Admin widget. Not sending greeting.");
+                    }
                 }
             }
         }
         return undefined;
-    }, [curr, active]);
+    }, [curr, active, isAdmin]);
 }
 
 function useSuggestionsFetch(search, context) {
@@ -8454,6 +8709,39 @@ function useSuggestions(search, context) {
     }); }, [suggestions, suggestionIndex, execute, suggestionItem]);
 }
 
+var AdminBar = function (_props) {
+    var name = useRef(null);
+    // We can manage this locally
+    // const hasAdminJoined = useSelector<ChatState, boolean | undefined>(state => state.hasAdminJoined);
+    var _a = useState(false), joined = _a[0], setJoined = _a[1];
+    var dispatch = useChatServerDispatch();
+    function onSubmit(event) {
+        var _a;
+        event.preventDefault();
+        if (!joined) {
+            dispatch(sendBargeIn((_a = name.current) === null || _a === void 0 ? void 0 : _a.value));
+            setJoined(true);
+        }
+        else {
+            dispatch(sendBargeOut());
+            setJoined(false);
+        }
+    }
+    function renderJoin() {
+        return (React$1.createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
+            React$1.createElement("div", { className: "xappw-admin-input-form__buttons" },
+                React$1.createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join" })),
+            React$1.createElement("div", { className: "xappw-admin-input" },
+                React$1.createElement("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input" }))));
+    }
+    function renderLeave() {
+        return (React$1.createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
+            React$1.createElement("div", { className: "xappw-admin-input-form__buttons" },
+                React$1.createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Leave" }))));
+    }
+    return (React$1.createElement("div", { className: "xappw-admin-input-container visible" }, joined ? renderLeave() : renderJoin()));
+};
+
 var ChatBranding = function (props) {
     var text = props.text;
     return (React$1.createElement("div", { className: "chat-footer__branding" }, text !== null && text !== void 0 ? text : "Powered by XAPP AI"));
@@ -8652,6 +8940,7 @@ var ChatFooter = function (props) {
                 React$1.createElement("div", { className: "chat-footer__menu-icon" },
                     React$1.createElement(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }))) : React$1.createElement(React$1.Fragment, null),
         ((_d = suggestions.suggestions) === null || _d === void 0 ? void 0 : _d.length) > 0 && React$1.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
+        props.isAdmin && props.isChatting && props.visible && React$1.createElement(AdminBar, null),
         React$1.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 }),
@@ -31059,15 +31348,15 @@ var TypingIndicator = function (_) {
  * Show the agent is typing (or the bot - for fun)
  */
 var TypingStatus = function (props) {
-    var agent_names = Object.values(props.agents).filter(function (agent) { return agent.typing; });
-    return (React$1.createElement(React$1.Fragment, null, agent_names.map(function (agent) {
+    var agentsTyping = Object.values(props.agents).filter(function (agent) { return agent.typing; });
+    return (React$1.createElement(React$1.Fragment, null, agentsTyping.map(function (agent) {
         var _a, _b;
         return (React$1.createElement(React$1.Fragment, null, !props.textTypingStatusEnabled ? (React$1.createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(agent.user.nick) },
             React$1.createElement("div", { key: agent.user.nick, className: "chat-msg-container agent chat-typing-progress" },
                 React$1.createElement(ChatMessagePart, { user: agent.user, showAvatar: true },
                     React$1.createElement("div", { className: "chat-msg" },
                         React$1.createElement(ChatMessageBubble, { owner: "others", hasTail: true },
-                            React$1.createElement(TypingIndicator, null))))))) : (React$1.createElement("div", { key: "typing-status-".concat(agent.user.nick), className: "chat-msg-agent-typing" }, (_b = (_a = agent.user) === null || _a === void 0 ? void 0 : _a.displayName) !== null && _b !== void 0 ? _b : "Bot",
+                            React$1.createElement(TypingIndicator, null))))))) : (React$1.createElement("div", { key: "typing-status-".concat(agent.user.nick), className: "chat-msg-agent-typing" }, (_b = (_a = agent.user) === null || _a === void 0 ? void 0 : _a.displayName) !== null && _b !== void 0 ? _b : "Somebody",
             " is typing"))));
     })));
 };
@@ -31116,9 +31405,18 @@ var MessageList = function (props) {
      */
     function renderByType(msg, sibling) {
         var _a;
-        var user = ((_a = props.agents[msg.user.nick]) === null || _a === void 0 ? void 0 : _a.user) || props.agent;
-        if (!user) {
-            console.warn("Could not get a user from agents list from ".concat(msg.user.nick, " or has an "));
+        var user;
+        // visitor is this widget
+        if (msg.user.nick.startsWith("visitor:")) {
+            user = msg.user;
+        }
+        else {
+            user = ((_a = props.agents[msg.user.nick]) === null || _a === void 0 ? void 0 : _a.user) || props.agent;
+            // Still nothing?
+            if (!user) {
+                console.warn("Could not get a user from agents list with nick: \"".concat(msg.user.nick, "\""));
+                user = msg.user;
+            }
         }
         switch (msg.type) {
             case "chat.file":
@@ -31720,8 +32018,8 @@ var ChatWidget = function (props) {
             });
         }
     }
-    useGreeting(!isOffline && !props.preChatFormEnabled && visible);
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
+    useGreeting(!isOffline && !props.preChatFormEnabled && visible);
     var connectionStatus = chatState.connection.connectionStatus;
     useEffect(function () {
         if (onConnectionStatusChange) {
@@ -31737,7 +32035,7 @@ var ChatWidget = function (props) {
             React$1.createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React$1.createElement("div", { className: "spinner" })),
             connectionStatus === "offline" && React$1.createElement(ServerOffline, null),
-            React$1.createElement(ChatFooter, { isChatting: chatState.isChatting, placeholder: (_r = config === null || config === void 0 ? void 0 : config.input) === null || _r === void 0 ? void 0 : _r.placeholder, sendButtonIcon: (_t = (_s = config === null || config === void 0 ? void 0 : config.footer) === null || _s === void 0 ? void 0 : _s.sendButton) === null || _t === void 0 ? void 0 : _t.icon, visible: visible, menuConfig: props.config.menu, footerConfig: (_u = props.config) === null || _u === void 0 ? void 0 : _u.footer, inputConfig: (_v = props.config) === null || _v === void 0 ? void 0 : _v.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }),
+            React$1.createElement(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_r = config === null || config === void 0 ? void 0 : config.input) === null || _r === void 0 ? void 0 : _r.placeholder, sendButtonIcon: (_t = (_s = config === null || config === void 0 ? void 0 : config.footer) === null || _s === void 0 ? void 0 : _s.sendButton) === null || _t === void 0 ? void 0 : _t.icon, visible: visible, menuConfig: props.config.menu, footerConfig: (_u = props.config) === null || _u === void 0 ? void 0 : _u.footer, inputConfig: (_v = props.config) === null || _v === void 0 ? void 0 : _v.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }),
             React$1.createElement("div", { className: "restartModal", ref: modalRef, onClick: closeModal },
                 React$1.createElement(ModalContent, { onClose: closeModal, onReset: refreshOnClick }))),
         React$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_w = props.config) === null || _w === void 0 ? void 0 : _w.cta, visible: visible })));
@@ -31855,7 +32153,6 @@ function persistStateReducer(storage, initialState, innerReducer) {
 }
 
 function connectionReducer(state, action) {
-    log("action", action);
     switch (action.type) {
         case "connection_update":
             return __assign(__assign({}, state), { connectionStatus: action.detail.status });
@@ -31872,31 +32169,32 @@ function joinMessages(messages, msg) {
 }
 
 function memberJoin(state, detail) {
-    var _a;
     if (state.chats.length === 0) {
         set$1("sessionId", "");
     }
+    var agents = __assign({}, state.agents);
+    var prevAgentInfo = state.agents[detail.user.nick];
+    agents[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { user: __assign(__assign({}, detail.user), { displayName: detail.user.displayName || "Agent" }), joined: true, typing: false });
     if (isAgent(detail.user.nick)) {
-        var prevAgentInfo = state.agents[detail.user.nick];
-        return __assign(__assign({}, state), { isChatting: true, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? state.chats : joinMessages(state.chats, detail), agents: (_a = {},
-                _a[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { user: __assign(__assign({}, detail.user), { displayName: detail.user.displayName || "Bot" }), joined: true, typing: false }),
-                _a) });
+        return __assign(__assign({}, state), { isChatting: true, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? state.chats : joinMessages(state.chats, detail), agents: agents });
     }
     else {
-        return __assign(__assign({}, state), { isChatting: true, chats: joinMessages(state.chats, detail) });
+        return __assign(__assign({}, state), { isChatting: true, chats: joinMessages(state.chats, detail), agents: agents });
     }
 }
 
 function memberLeave(state, detail) {
-    var _a;
+    var agents = __assign({}, state.agents);
+    var prevAgentInfo = state.agents[detail.user.nick];
+    agents[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { joined: false, typing: false });
+    // count number of agents that are still joined
+    var agentsJoined = Object.values(agents).filter(function (agent) { return agent.joined; });
+    var isChatting = agentsJoined.length > 0;
     if (isAgent(detail.user.nick)) {
-        var prevAgentInfo = state.agents[detail.user.nick];
-        return __assign(__assign({}, state), { isChatting: false, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? joinMessages(state.chats, detail) : state.chats, agents: (_a = {},
-                _a[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { joined: false }),
-                _a) });
+        return __assign(__assign({}, state), { isChatting: isChatting, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? joinMessages(state.chats, detail) : state.chats, agents: agents });
     }
     else {
-        return __assign(__assign({}, state), { isChatting: false, chats: joinMessages(state.chats, detail) });
+        return __assign(__assign({}, state), { isChatting: isChatting, chats: joinMessages(state.chats, detail), agents: agents });
     }
 }
 
@@ -31926,15 +32224,19 @@ function update(state, action) {
     if (action.type === "reset") {
         return resetReducer(state);
     }
-    // workaround until state is split. Use combineReducers afterwards
-    var newConnectionState = connectionReducer(state.connection, action);
-    if (state.connection !== newConnectionState) {
-        state = __assign(__assign({}, state), { connection: newConnectionState });
-    }
     if (action.detail) {
         state.lastTimestamp = action.detail.timestamp;
     }
     switch (action.type) {
+        case "connection_update":
+        case "receiveToken":
+        case "sendGreeting":
+            // workaround until state is split. Use combineReducers afterwards
+            var newConnectionState = connectionReducer(state.connection, action);
+            if (state.connection !== newConnectionState) {
+                state = __assign(__assign({}, state), { connection: newConnectionState });
+            }
+            return state;
         case "account_status":
             return __assign(__assign({}, state), { accountStatus: action.detail.status });
         case "department_update":