stream-chat 4.4.3-dev.1 → 4.5.0-beta.0

package/dist/index.es.js

@@ -89,9 +89,9 @@ var decodeBase64 = function decodeBase64(s) {
   return r;
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
  * ChannelState - A container class for the channel state.
@@ -159,7 +159,7 @@ var ChannelState = /*#__PURE__*/function () {
           var m = messages[i];
 
           if (((_m$user = m.user) === null || _m$user === void 0 ? void 0 : _m$user.id) === user.id) {
-            messages[i] = _objectSpread$5(_objectSpread$5({}, m), {}, {
+            messages[i] = _objectSpread$7(_objectSpread$7({}, m), {}, {
               user: user
             });
           }
@@ -212,7 +212,7 @@ var ChannelState = /*#__PURE__*/function () {
               user: m.user
             };
           } else {
-            messages[i] = _objectSpread$5(_objectSpread$5({}, m), {}, {
+            messages[i] = _objectSpread$7(_objectSpread$7({}, m), {}, {
               type: 'deleted',
               deleted_at: user.deleted_at
             });
@@ -280,7 +280,7 @@ var ChannelState = /*#__PURE__*/function () {
   }, {
     key: "formatMessage",
     value: function formatMessage(message) {
-      return _objectSpread$5(_objectSpread$5({}, message), {}, {
+      return _objectSpread$7(_objectSpread$7({}, message), {}, {
         /**
          * @deprecated please use `html`
          */
@@ -470,7 +470,7 @@ var ChannelState = /*#__PURE__*/function () {
       var parseMessage = function parseMessage(m) {
         var _m$pinned_at, _m$updated_at;
 
-        return _objectSpread$5(_objectSpread$5({}, m), {}, {
+        return _objectSpread$7(_objectSpread$7({}, m), {}, {
           created_at: m.created_at.toString(),
           pinned_at: (_m$pinned_at = m.pinned_at) === null || _m$pinned_at === void 0 ? void 0 : _m$pinned_at.toString(),
           updated_at: (_m$updated_at = m.updated_at) === null || _m$updated_at === void 0 ? void 0 : _m$updated_at.toString()
@@ -480,8 +480,8 @@ var ChannelState = /*#__PURE__*/function () {
       var updatedMessages = this.messages.filter(function (msg) {
         return msg.quoted_message_id === message.id;
       }).map(parseMessage).map(function (msg) {
-        return _objectSpread$5(_objectSpread$5({}, msg), {}, {
-          quoted_message: _objectSpread$5(_objectSpread$5({}, message), {}, {
+        return _objectSpread$7(_objectSpread$7({}, msg), {}, {
+          quoted_message: _objectSpread$7(_objectSpread$7({}, message), {}, {
             attachments: []
           })
         });
@@ -701,9 +701,9 @@ var ChannelState = /*#__PURE__*/function () {
   return ChannelState;
 }();
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var EVENT_MAP = {
   'channel.created': true,
@@ -750,7 +750,7 @@ var EVENT_MAP = {
   'connection.recovered': true
 };
 
-var IS_VALID_EVENT_MAP_TYPE = _objectSpread$4(_objectSpread$4({}, EVENT_MAP), {}, {
+var IS_VALID_EVENT_MAP_TYPE = _objectSpread$6(_objectSpread$6({}, EVENT_MAP), {}, {
   all: true
 });
 
@@ -758,7 +758,7 @@ var isValidEventType = function isValidEventType(eventType) {
   return IS_VALID_EVENT_MAP_TYPE[eventType] || false;
 };
 
-function _createForOfIteratorHelper$3(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _createForOfIteratorHelper$3(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); }
 
@@ -934,12 +934,45 @@ function getRandomBytes(length) {
 function convertErrorToJson(err) {
   var jsonObj = {};
   if (!err) return jsonObj;
-  Object.getOwnPropertyNames(err).forEach(function (key) {
-    // @ts-ignore
-    jsonObj[key] = err[key];
-  });
+
+  try {
+    Object.getOwnPropertyNames(err).forEach(function (key) {
+      jsonObj[key] = Object.getOwnPropertyDescriptor(err, key);
+    });
+  } catch (_) {
+    return {
+      error: 'failed to serialize the error'
+    };
+  }
+
   return jsonObj;
 }
+/**
+ * isOnline safely return the navigator.online value
+ * if navigator is not in global object, it always return true
+ */
+
+function isOnline() {
+  var nav = typeof navigator !== 'undefined' ? navigator : typeof window !== 'undefined' && window.navigator ? window.navigator : undefined;
+  if (!nav) return true;
+  return nav.onLine;
+}
+/**
+ * listenForConnectionChanges - Adds an event listener fired on browser going online or offline
+ */
+
+function addConnectionEventListeners(cb) {
+  if (typeof window !== 'undefined' && window.addEventListener) {
+    window.addEventListener('offline', cb);
+    window.addEventListener('online', cb);
+  }
+}
+function removeConnectionEventListeners(cb) {
+  if (typeof window !== 'undefined' && window.removeEventListener) {
+    window.removeEventListener('offline', cb);
+    window.removeEventListener('online', cb);
+  }
+}
 
 function _createForOfIteratorHelper$2(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
@@ -947,9 +980,9 @@ function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o
 
 function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
  * Channel - The Channel class manages it's own state.
@@ -1069,7 +1102,7 @@ var Channel = /*#__PURE__*/function () {
 
     this.data = data; // this._data is used for the requests...
 
-    this._data = _objectSpread$3({}, data);
+    this._data = _objectSpread$5({}, data);
     this.cid = "".concat(type, ":").concat(id);
     this.listeners = {}; // perhaps the state variable should be private
 
@@ -1127,7 +1160,7 @@ var Channel = /*#__PURE__*/function () {
             switch (_context2.prev = _context2.next) {
               case 0:
                 _context2.next = 2;
-                return this.getClient().post(this._channelURL() + '/message', _objectSpread$3({
+                return this.getClient().post(this._channelURL() + '/message', _objectSpread$5({
                   message: message
                 }, options));
 
@@ -1246,7 +1279,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 3:
                 // Return a list of channels
-                payload = _objectSpread$3(_objectSpread$3({
+                payload = _objectSpread$5(_objectSpread$5({
                   filter_conditions: {
                     cid: this.cid
                   }
@@ -1343,7 +1376,7 @@ var Channel = /*#__PURE__*/function () {
 
                 _context5.next = 6;
                 return this.getClient().get(this.getClient().baseURL + '/members', {
-                  payload: _objectSpread$3({
+                  payload: _objectSpread$5({
                     type: type,
                     id: id,
                     members: members,
@@ -1404,7 +1437,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 4:
                 _context6.next = 6;
-                return this.getClient().post(this.getClient().baseURL + "/messages/".concat(messageID, "/reaction"), _objectSpread$3({
+                return this.getClient().post(this.getClient().baseURL + "/messages/".concat(messageID, "/reaction"), _objectSpread$5({
                   reaction: reaction
                 }, options));
 
@@ -1459,7 +1492,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {ChannelData<ChannelType>} channelData The object to update the custom properties of this channel with
      * @param {Message<AttachmentType, MessageType, UserType>} [updateMessage] Optional message object for channel members notification
-     * @param {{ skip_push?: boolean }} [options] Option object, {skip_push: true} to skip sending push notifications
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1485,7 +1518,7 @@ var Channel = /*#__PURE__*/function () {
                   delete channelData[key];
                 });
                 _context7.next = 7;
-                return this._update(_objectSpread$3({
+                return this._update(_objectSpread$5({
                   message: updateMessage,
                   data: channelData
                 }, options));
@@ -1658,25 +1691,28 @@ var Channel = /*#__PURE__*/function () {
     }()
     /**
      * truncate - Removes all messages from the channel
-     *
-     * @return {Promise<TruncateChannelAPIResponse<ChannelType, CommandType, UserType>>} The server response
+     * @param {TruncateOptions<AttachmentType, MessageType, UserType>} [options] Defines truncation options
+     * @return {Promise<TruncateChannelAPIResponse<ChannelType, CommandType, UserType, MessageType, ReactionType>>} The server response
      */
 
   }, {
     key: "truncate",
     value: function () {
       var _truncate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+        var options,
+            _args12 = arguments;
         return _regeneratorRuntime.wrap(function _callee12$(_context12) {
           while (1) {
             switch (_context12.prev = _context12.next) {
               case 0:
-                _context12.next = 2;
-                return this.getClient().post(this._channelURL() + '/truncate', {});
+                options = _args12.length > 0 && _args12[0] !== undefined ? _args12[0] : {};
+                _context12.next = 3;
+                return this.getClient().post(this._channelURL() + '/truncate', options);
 
-              case 2:
+              case 3:
                 return _context12.abrupt("return", _context12.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context12.stop();
             }
@@ -1710,7 +1746,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args13.length > 0 && _args13[0] !== undefined ? _args13[0] : {};
                 _context13.next = 3;
-                return this._update(_objectSpread$3({
+                return this._update(_objectSpread$5({
                   accept_invite: true
                 }, options));
 
@@ -1751,7 +1787,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args14.length > 0 && _args14[0] !== undefined ? _args14[0] : {};
                 _context14.next = 3;
-                return this._update(_objectSpread$3({
+                return this._update(_objectSpread$5({
                   reject_invite: true
                 }, options));
 
@@ -1777,6 +1813,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {{user_id: string, channel_role?: Role}[]} members An array of members to add to the channel
      * @param {Message<AttachmentType, MessageType, UserType>} [message] Optional message object for channel members notification
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1784,20 +1821,23 @@ var Channel = /*#__PURE__*/function () {
     key: "addMembers",
     value: function () {
       var _addMembers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15(members, message) {
+        var options,
+            _args15 = arguments;
         return _regeneratorRuntime.wrap(function _callee15$(_context15) {
           while (1) {
             switch (_context15.prev = _context15.next) {
               case 0:
-                _context15.next = 2;
-                return this._update({
+                options = _args15.length > 2 && _args15[2] !== undefined ? _args15[2] : {};
+                _context15.next = 3;
+                return this._update(_objectSpread$5({
                   add_members: members,
                   message: message
-                });
+                }, options));
 
-              case 2:
+              case 3:
                 return _context15.abrupt("return", _context15.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context15.stop();
             }
@@ -1816,6 +1856,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {string[]} members An array of member identifiers
      * @param {Message<AttachmentType, MessageType, UserType>} [message] Optional message object for channel members notification
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1823,20 +1864,23 @@ var Channel = /*#__PURE__*/function () {
     key: "addModerators",
     value: function () {
       var _addModerators = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16(members, message) {
+        var options,
+            _args16 = arguments;
         return _regeneratorRuntime.wrap(function _callee16$(_context16) {
           while (1) {
             switch (_context16.prev = _context16.next) {
               case 0:
-                _context16.next = 2;
-                return this._update({
+                options = _args16.length > 2 && _args16[2] !== undefined ? _args16[2] : {};
+                _context16.next = 3;
+                return this._update(_objectSpread$5({
                   add_moderators: members,
                   message: message
-                });
+                }, options));
 
-              case 2:
+              case 3:
                 return _context16.abrupt("return", _context16.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context16.stop();
             }
@@ -1855,6 +1899,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {{channel_role: Role, user_id: string}[]} roles List of role assignments
      * @param {Message<AttachmentType, MessageType, UserType>} [message] Optional message object for channel members notification
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1862,20 +1907,23 @@ var Channel = /*#__PURE__*/function () {
     key: "assignRoles",
     value: function () {
       var _assignRoles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17(roles, message) {
+        var options,
+            _args17 = arguments;
         return _regeneratorRuntime.wrap(function _callee17$(_context17) {
           while (1) {
             switch (_context17.prev = _context17.next) {
               case 0:
-                _context17.next = 2;
-                return this._update({
+                options = _args17.length > 2 && _args17[2] !== undefined ? _args17[2] : {};
+                _context17.next = 3;
+                return this._update(_objectSpread$5({
                   assign_roles: roles,
                   message: message
-                });
+                }, options));
 
-              case 2:
+              case 3:
                 return _context17.abrupt("return", _context17.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context17.stop();
             }
@@ -1894,6 +1942,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {{user_id: string, channel_role?: Role}[]} members An array of members to invite to the channel
      * @param {Message<AttachmentType, MessageType, UserType>} [message] Optional message object for channel members notification
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1901,20 +1950,23 @@ var Channel = /*#__PURE__*/function () {
     key: "inviteMembers",
     value: function () {
       var _inviteMembers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18(members, message) {
+        var options,
+            _args18 = arguments;
         return _regeneratorRuntime.wrap(function _callee18$(_context18) {
           while (1) {
             switch (_context18.prev = _context18.next) {
               case 0:
-                _context18.next = 2;
-                return this._update({
+                options = _args18.length > 2 && _args18[2] !== undefined ? _args18[2] : {};
+                _context18.next = 3;
+                return this._update(_objectSpread$5({
                   invites: members,
                   message: message
-                });
+                }, options));
 
-              case 2:
+              case 3:
                 return _context18.abrupt("return", _context18.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context18.stop();
             }
@@ -1933,6 +1985,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {string[]} members An array of member identifiers
      * @param {Message<AttachmentType, MessageType, UserType>} [message] Optional message object for channel members notification
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1940,20 +1993,23 @@ var Channel = /*#__PURE__*/function () {
     key: "removeMembers",
     value: function () {
       var _removeMembers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19(members, message) {
+        var options,
+            _args19 = arguments;
         return _regeneratorRuntime.wrap(function _callee19$(_context19) {
           while (1) {
             switch (_context19.prev = _context19.next) {
               case 0:
-                _context19.next = 2;
-                return this._update({
+                options = _args19.length > 2 && _args19[2] !== undefined ? _args19[2] : {};
+                _context19.next = 3;
+                return this._update(_objectSpread$5({
                   remove_members: members,
                   message: message
-                });
+                }, options));
 
-              case 2:
+              case 3:
                 return _context19.abrupt("return", _context19.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context19.stop();
             }
@@ -1972,6 +2028,7 @@ var Channel = /*#__PURE__*/function () {
      *
      * @param {string[]} members An array of member identifiers
      * @param {Message<AttachmentType, MessageType, UserType>} [message] Optional message object for channel members notification
+     * @param {ChannelUpdateOptions} [options] Option object, configuration to control the behavior while updating
      * @return {Promise<UpdateChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>>} The server response
      */
 
@@ -1979,20 +2036,23 @@ var Channel = /*#__PURE__*/function () {
     key: "demoteModerators",
     value: function () {
       var _demoteModerators = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20(members, message) {
+        var options,
+            _args20 = arguments;
         return _regeneratorRuntime.wrap(function _callee20$(_context20) {
           while (1) {
             switch (_context20.prev = _context20.next) {
               case 0:
-                _context20.next = 2;
-                return this._update({
+                options = _args20.length > 2 && _args20[2] !== undefined ? _args20[2] : {};
+                _context20.next = 3;
+                return this._update(_objectSpread$5({
                   demote_moderators: members,
                   message: message
-                });
+                }, options));
 
-              case 2:
+              case 3:
                 return _context20.abrupt("return", _context20.sent);
 
-              case 3:
+              case 4:
               case "end":
                 return _context20.stop();
             }
@@ -2069,7 +2129,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 opts = _args22.length > 0 && _args22[0] !== undefined ? _args22[0] : {};
                 _context22.next = 3;
-                return this.getClient().post(this.getClient().baseURL + '/moderation/mute/channel', _objectSpread$3({
+                return this.getClient().post(this.getClient().baseURL + '/moderation/mute/channel', _objectSpread$5({
                   channel_cid: this.cid
                 }, opts));
 
@@ -2111,7 +2171,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 opts = _args23.length > 0 && _args23[0] !== undefined ? _args23[0] : {};
                 _context23.next = 3;
-                return this.getClient().post(this.getClient().baseURL + '/moderation/unmute/channel', _objectSpread$3({
+                return this.getClient().post(this.getClient().baseURL + '/moderation/unmute/channel', _objectSpread$5({
                   channel_cid: this.cid
                 }, opts));
 
@@ -2320,7 +2380,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 4:
                 _context26.next = 6;
-                return this.getClient().post(this._channelURL() + '/read', _objectSpread$3({}, data));
+                return this.getClient().post(this._channelURL() + '/read', _objectSpread$5({}, data));
 
               case 6:
                 return _context26.abrupt("return", _context26.sent);
@@ -2388,7 +2448,7 @@ var Channel = /*#__PURE__*/function () {
                   defaultOptions.watch = false;
                 }
 
-                combined = _objectSpread$3(_objectSpread$3({}, defaultOptions), options);
+                combined = _objectSpread$5(_objectSpread$5({}, defaultOptions), options);
                 _context27.next = 7;
                 return this.query(combined);
 
@@ -2479,7 +2539,7 @@ var Channel = /*#__PURE__*/function () {
             switch (_context29.prev = _context29.next) {
               case 0:
                 _context29.next = 2;
-                return this.getClient().get(this.getClient().baseURL + "/messages/".concat(parent_id, "/replies"), _objectSpread$3({}, options));
+                return this.getClient().get(this.getClient().baseURL + "/messages/".concat(parent_id, "/replies"), _objectSpread$5({}, options));
 
               case 2:
                 data = _context29.sent;
@@ -2517,7 +2577,7 @@ var Channel = /*#__PURE__*/function () {
   }, {
     key: "getReactions",
     value: function getReactions(message_id, options) {
-      return this.getClient().get(this.getClient().baseURL + "/messages/".concat(message_id, "/reactions"), _objectSpread$3({}, options));
+      return this.getClient().get(this.getClient().baseURL + "/messages/".concat(message_id, "/reactions"), _objectSpread$5({}, options));
     }
     /**
      * getMessagesById - Retrieves a list of messages by ID
@@ -2649,7 +2709,7 @@ var Channel = /*#__PURE__*/function () {
                 }
 
                 _context30.next = 6;
-                return this.getClient().post(queryURL + '/query', _objectSpread$3({
+                return this.getClient().post(queryURL + '/query', _objectSpread$5({
                   data: this._data,
                   state: true
                 }, options));
@@ -2720,7 +2780,7 @@ var Channel = /*#__PURE__*/function () {
                 this._checkInitialized();
 
                 _context31.next = 3;
-                return this.getClient().banUser(targetUserID, _objectSpread$3(_objectSpread$3({}, options), {}, {
+                return this.getClient().banUser(targetUserID, _objectSpread$5(_objectSpread$5({}, options), {}, {
                   type: this.type,
                   id: this.id
                 }));
@@ -2892,7 +2952,7 @@ var Channel = /*#__PURE__*/function () {
                 this._checkInitialized();
 
                 _context35.next = 3;
-                return this.getClient().shadowBan(targetUserID, _objectSpread$3(_objectSpread$3({}, options), {}, {
+                return this.getClient().shadowBan(targetUserID, _objectSpread$5(_objectSpread$5({}, options), {}, {
                   type: this.type,
                   id: this.id
                 }));
@@ -3305,7 +3365,7 @@ var Channel = /*#__PURE__*/function () {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var read = _step3.value;
 
-            var parsedRead = _objectSpread$3(_objectSpread$3({}, read), {}, {
+            var parsedRead = _objectSpread$5(_objectSpread$5({}, read), {}, {
               last_read: new Date(read.last_read)
             });
 
@@ -3432,9 +3492,9 @@ var ClientState = /*#__PURE__*/function () {
   return ClientState;
 }();
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var InsightMetrics = function InsightMetrics() {
   _classCallCheck(this, InsightMetrics);
 
@@ -3451,32 +3511,94 @@ var InsightMetrics = function InsightMetrics() {
   this.wsConsecutiveFailures = 0;
   this.instanceClientId = randomId();
 };
+/**
+ * postInsights is not supposed to be used by end users directly within chat application, and thus is kept isolated
+ * from all the client/connection code/logic.
+ *
+ * @param insightType
+ * @param insights
+ */
+
+var postInsights = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(insightType, insights) {
+    var maxAttempts, i;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            maxAttempts = 3;
+            i = 0;
+
+          case 2:
+            if (!(i < maxAttempts)) {
+              _context.next = 17;
+              break;
+            }
+
+            _context.prev = 3;
+            _context.next = 6;
+            return axios.post("https://chat-insights.getstream.io/insights/".concat(insightType), insights);
+
+          case 6:
+            _context.next = 13;
+            break;
+
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](3);
+            _context.next = 12;
+            return sleep((i + 1) * 3000);
+
+          case 12:
+            return _context.abrupt("continue", 14);
+
+          case 13:
+            return _context.abrupt("break", 17);
+
+          case 14:
+            i++;
+            _context.next = 2;
+            break;
+
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[3, 8]]);
+  }));
+
+  return function postInsights(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
 function buildWsFatalInsight(connection, event) {
-  return _objectSpread$2(_objectSpread$2({}, event), buildWsBaseInsight(connection));
+  return _objectSpread$4(_objectSpread$4({}, event), buildWsBaseInsight(connection));
 }
 
 function buildWsBaseInsight(connection) {
   var _connection$ws, _navigator, _navigator2;
 
+  var client = connection.client;
   return {
     ready_state: (_connection$ws = connection.ws) === null || _connection$ws === void 0 ? void 0 : _connection$ws.readyState,
-    url: connection._buildUrl(connection.requestID),
-    api_key: connection.apiKey,
-    start_ts: connection.insightMetrics.connectionStartTimestamp,
+    url: connection._buildUrl(),
+    api_key: client.key,
+    start_ts: client.insightMetrics.connectionStartTimestamp,
     end_ts: new Date().getTime(),
-    auth_type: connection.authType,
-    token: connection.tokenManager.token,
-    user_id: connection.userID,
-    user_details: connection.user,
-    device: connection.device,
+    auth_type: client.getAuthType(),
+    token: client.tokenManager.token,
+    user_id: client.userID,
+    user_details: client._user,
+    device: client.options.device,
     client_id: connection.connectionID,
     ws_details: connection.ws,
-    ws_consecutive_failures: connection.insightMetrics.wsConsecutiveFailures,
-    ws_total_failures: connection.insightMetrics.wsTotalFailures,
+    ws_consecutive_failures: client.insightMetrics.wsConsecutiveFailures,
+    ws_total_failures: client.insightMetrics.wsTotalFailures,
     request_id: connection.requestID,
     online: typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.onLine : null,
     user_agent: typeof navigator !== 'undefined' ? (_navigator2 = navigator) === null || _navigator2 === void 0 ? void 0 : _navigator2.userAgent : null,
-    instance_client_id: connection.insightMetrics.instanceClientId
+    instance_client_id: client.insightMetrics.instanceClientId
   };
 }
 
@@ -3484,6 +3606,10 @@ function buildWsSuccessAfterFailureInsight(connection) {
   return buildWsBaseInsight(connection);
 }
 
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 // Type guards to check WebSocket error type
 var isCloseEvent = function isCloseEvent(res) {
   return res.code !== undefined;
@@ -3492,7 +3618,6 @@ var isCloseEvent = function isCloseEvent(res) {
 var isErrorEvent = function isErrorEvent(res) {
   return res.error !== undefined;
 };
-
 /**
  * StableWSConnection - A WS connection that reconnects upon failure.
  * - the browser will sometimes report that you're online or offline
@@ -3510,53 +3635,19 @@ var isErrorEvent = function isErrorEvent(res) {
  * - state can be recovered by querying the channel again
  * - if the servers fails to publish a message to the client, the WS connection is destroyed
  */
+
+
 var StableWSConnection = /*#__PURE__*/function () {
+  // global from constructor
+  // local vars
   function StableWSConnection(_ref) {
     var _this = this;
 
-    var apiKey = _ref.apiKey,
-        authType = _ref.authType,
-        clientID = _ref.clientID,
-        eventCallback = _ref.eventCallback,
-        logger = _ref.logger,
-        messageCallback = _ref.messageCallback,
-        recoverCallback = _ref.recoverCallback,
-        tokenManager = _ref.tokenManager,
-        user = _ref.user,
-        userAgent = _ref.userAgent,
-        userID = _ref.userID,
-        wsBaseURL = _ref.wsBaseURL,
-        device = _ref.device,
-        postInsights = _ref.postInsights,
-        insightMetrics = _ref.insightMetrics;
+    var client = _ref.client;
 
     _classCallCheck(this, StableWSConnection);
 
-    _defineProperty(this, "apiKey", void 0);
-
-    _defineProperty(this, "authType", void 0);
-
-    _defineProperty(this, "clientID", void 0);
-
-    _defineProperty(this, "eventCallback", void 0);
-
-    _defineProperty(this, "logger", void 0);
-
-    _defineProperty(this, "messageCallback", void 0);
-
-    _defineProperty(this, "recoverCallback", void 0);
-
-    _defineProperty(this, "tokenManager", void 0);
-
-    _defineProperty(this, "user", void 0);
-
-    _defineProperty(this, "userAgent", void 0);
-
-    _defineProperty(this, "userID", void 0);
-
-    _defineProperty(this, "wsBaseURL", void 0);
-
-    _defineProperty(this, "device", void 0);
+    _defineProperty(this, "client", void 0);
 
     _defineProperty(this, "connectionID", void 0);
 
@@ -3570,6 +3661,8 @@ var StableWSConnection = /*#__PURE__*/function () {
 
     _defineProperty(this, "isConnecting", void 0);
 
+    _defineProperty(this, "isDisconnected", void 0);
+
     _defineProperty(this, "isHealthy", void 0);
 
     _defineProperty(this, "isResolved", void 0);
@@ -3584,8 +3677,6 @@ var StableWSConnection = /*#__PURE__*/function () {
 
     _defineProperty(this, "requestID", void 0);
 
-    _defineProperty(this, "connectionStartTimestamp", void 0);
-
     _defineProperty(this, "resolvePromise", void 0);
 
     _defineProperty(this, "totalFailures", void 0);
@@ -3594,32 +3685,18 @@ var StableWSConnection = /*#__PURE__*/function () {
 
     _defineProperty(this, "wsID", void 0);
 
-    _defineProperty(this, "postInsights", void 0);
-
-    _defineProperty(this, "insightMetrics", void 0);
+    _defineProperty(this, "_buildUrl", function () {
+      var qs = encodeURIComponent(_this.client._buildWSPayload(_this.requestID));
 
-    _defineProperty(this, "_buildUrl", function (reqID) {
-      var params = {
-        user_id: _this.user.id,
-        user_details: _this.user,
-        user_token: _this.tokenManager.getToken(),
-        server_determines_connection_id: true,
-        device: _this.device,
-        request_id: reqID
-      };
-      var qs = encodeURIComponent(JSON.stringify(params));
+      var token = _this.client.tokenManager.getToken();
 
-      var token = _this.tokenManager.getToken();
-
-      return "".concat(_this.wsBaseURL, "/connect?json=").concat(qs, "&api_key=").concat(_this.apiKey, "&authorization=").concat(token, "&stream-auth-type=").concat(_this.authType, "&X-Stream-Client=").concat(_this.userAgent);
+      return "".concat(_this.client.wsBaseURL, "/connect?json=").concat(qs, "&api_key=").concat(_this.client.key, "&authorization=").concat(token, "&stream-auth-type=").concat(_this.client.getAuthType(), "&X-Stream-Client=").concat(_this.client.getUserAgent());
     });
 
     _defineProperty(this, "onlineStatusChanged", function (event) {
       if (event.type === 'offline') {
         // mark the connection as down
-        _this.logger('info', 'connection:onlineStatusChanged() - Status changing to offline', {
-          tags: ['connection']
-        });
+        _this._log('onlineStatusChanged() - Status changing to offline');
 
         _this._setHealth(false);
       } else if (event.type === 'online') {
@@ -3627,9 +3704,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         // We check this.isHealthy, not sure if it's always
         // smart to create a new WS connection if the old one is still up and running.
         // it's possible we didn't miss any messages, so this process is just expensive and not needed.
-        _this.logger('info', "connection:onlineStatusChanged() - Status changing to online. isHealthy: ".concat(_this.isHealthy), {
-          tags: ['connection']
-        });
+        _this._log("onlineStatusChanged() - Status changing to online. isHealthy: ".concat(_this.isHealthy));
 
         if (!_this.isHealthy) {
           _this._reconnect({
@@ -3642,8 +3717,7 @@ var StableWSConnection = /*#__PURE__*/function () {
     _defineProperty(this, "onopen", function (wsID) {
       if (_this.wsID !== wsID) return;
 
-      _this.logger('info', 'connection:onopen() - onopen callback', {
-        tags: ['connection'],
+      _this._log('onopen() - onopen callback', {
         wsID: wsID
       });
     });
@@ -3655,27 +3729,26 @@ var StableWSConnection = /*#__PURE__*/function () {
       // after that a ws.onclose..
 
       if (!_this.isResolved && data) {
+        var _this$resolvePromise;
+
         _this.isResolved = true;
 
-        if (data.error != null) {
+        if (data.error) {
           var _this$rejectPromise;
 
           (_this$rejectPromise = _this.rejectPromise) === null || _this$rejectPromise === void 0 ? void 0 : _this$rejectPromise.call(_this, _this._errorFromWSEvent(data, false));
           return;
-        } else {
-          var _this$resolvePromise;
+        }
 
-          (_this$resolvePromise = _this.resolvePromise) === null || _this$resolvePromise === void 0 ? void 0 : _this$resolvePromise.call(_this, event);
+        (_this$resolvePromise = _this.resolvePromise) === null || _this$resolvePromise === void 0 ? void 0 : _this$resolvePromise.call(_this, data);
 
-          _this._setHealth(true);
-        }
+        _this._setHealth(true);
       } // trigger the event..
 
 
       _this.lastEvent = new Date();
 
-      _this.logger('info', 'connection:onmessage() - onmessage callback', {
-        tags: ['connection'],
+      _this._log('onmessage() - onmessage callback', {
         event: event,
         wsID: wsID
       });
@@ -3684,7 +3757,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         _this.scheduleNextPing();
       }
 
-      _this.messageCallback(event);
+      _this.client.handleEvent(event);
 
       _this.scheduleConnectionCheck();
     });
@@ -3692,8 +3765,7 @@ var StableWSConnection = /*#__PURE__*/function () {
     _defineProperty(this, "onclose", function (wsID, event) {
       if (_this.wsID !== wsID) return;
 
-      _this.logger('info', 'connection:onclose() - onclose callback - ' + event.code, {
-        tags: ['connection'],
+      _this._log('onclose() - onclose callback - ' + event.code, {
         event: event,
         wsID: wsID
       });
@@ -3710,8 +3782,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         error.target = event.target;
         (_this$rejectPromise2 = _this.rejectPromise) === null || _this$rejectPromise2 === void 0 ? void 0 : _this$rejectPromise2.call(_this, error);
 
-        _this.logger('info', "connection:onclose() - WS connection reject with error ".concat(event.reason), {
-          tags: ['connection'],
+        _this._log("onclose() - WS connection reject with error ".concat(event.reason), {
           event: event
         });
       } else {
@@ -3725,8 +3796,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         _this.isConnecting = false;
         (_this$rejectPromise3 = _this.rejectPromise) === null || _this$rejectPromise3 === void 0 ? void 0 : _this$rejectPromise3.call(_this, _this._errorFromWSEvent(event));
 
-        _this.logger('info', "connection:onclose() - WS connection closed. Calling reconnect ...", {
-          tags: ['connection'],
+        _this._log("onclose() - WS connection closed. Calling reconnect ...", {
           event: event
         }); // reconnect if its an abnormal failure
 
@@ -3747,8 +3817,7 @@ var StableWSConnection = /*#__PURE__*/function () {
       _this.isConnecting = false;
       (_this$rejectPromise4 = _this.rejectPromise) === null || _this$rejectPromise4 === void 0 ? void 0 : _this$rejectPromise4.call(_this, _this._errorFromWSEvent(event));
 
-      _this.logger('info', "connection:onerror() - WS connection resulted into error", {
-        tags: ['connection'],
+      _this._log("onerror() - WS connection resulted into error", {
         event: event
       });
 
@@ -3756,28 +3825,28 @@ var StableWSConnection = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "_setHealth", function (healthy) {
-      if (healthy && !_this.isHealthy) {
-        // yes we are online:
-        _this.isHealthy = true;
+      if (healthy === _this.isHealthy) return;
+      _this.isHealthy = healthy;
 
-        _this.eventCallback({
+      if (_this.isHealthy) {
+        //@ts-expect-error
+        _this.client.dispatchEvent({
           type: 'connection.changed',
-          online: true
+          online: _this.isHealthy
         });
-      }
 
-      if (!healthy && _this.isHealthy) {
-        // bummer we are offline
-        _this.isHealthy = false;
-        setTimeout(function () {
-          if (!_this.isHealthy) {
-            _this.eventCallback({
-              type: 'connection.changed',
-              online: false
-            });
-          }
-        }, 5000);
-      }
+        return;
+      } // we're offline, wait few seconds and fire and event if still offline
+
+
+      setTimeout(function () {
+        if (_this.isHealthy) return; //@ts-expect-error
+
+        _this.client.dispatchEvent({
+          type: 'connection.changed',
+          online: _this.isHealthy
+        });
+      }, 5000);
     });
 
     _defineProperty(this, "_errorFromWSEvent", function (event) {
@@ -3799,10 +3868,9 @@ var StableWSConnection = /*#__PURE__*/function () {
       } // Keeping this `warn` level log, to avoid cluttering of error logs from ws failures.
 
 
-      _this.logger('warn', "connection:_errorFromWSEvent() - WS failed with code ".concat(code), {
-        tags: ['connection'],
+      _this._log("_errorFromWSEvent() - WS failed with code ".concat(code), {
         event: event
-      });
+      }, 'warn');
 
       var error = new Error("WS failed with code ".concat(code, " and reason - ").concat(message));
       error.code = code;
@@ -3816,50 +3884,13 @@ var StableWSConnection = /*#__PURE__*/function () {
       return error;
     });
 
-    _defineProperty(this, "_listenForConnectionChanges", function () {
-      var _window;
-
-      // (typeof window !== 'undefined') check is for environments where window is not defined, such as nextjs environment,
-      // and thus (window === undefined) will result in ReferenceError.
-      if (typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.addEventListener) {
-        window.addEventListener('offline', _this.onlineStatusChanged);
-        window.addEventListener('online', _this.onlineStatusChanged);
-      }
-    });
-
-    _defineProperty(this, "_removeConnectionListeners", function () {
-      var _window2;
-
-      // (typeof window !== 'undefined') check is for environments where window is not defined, such as nextjs environment,
-      // and thus (window === undefined) will result in ReferenceError.
-      if (typeof window !== 'undefined' && (_window2 = window) !== null && _window2 !== void 0 && _window2.removeEventListener) {
-        window.removeEventListener('offline', _this.onlineStatusChanged);
-        window.removeEventListener('online', _this.onlineStatusChanged);
-      }
-    });
-
     _defineProperty(this, "_setupConnectionPromise", function () {
-      var that = _this;
       _this.isResolved = false;
       /** a promise that is resolved once ws.open is called */
 
       _this.connectionOpen = new Promise(function (resolve, reject) {
-        that.resolvePromise = resolve;
-        that.rejectPromise = reject;
-      }).then(function (e) {
-        if (e.data && typeof e.data === 'string') {
-          var data = JSON.parse(e.data);
-
-          if (data && data.error != null) {
-            throw new Error(JSON.stringify(data.error));
-          }
-
-          return data;
-        } else {
-          return undefined;
-        }
-      }, function (error) {
-        throw error;
+        _this.resolvePromise = resolve;
+        _this.rejectPromise = reject;
       });
     });
 
@@ -3873,7 +3904,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         // send the healthcheck.., server replies with a health check event
         var data = [{
           type: 'health.check',
-          client_id: _this.clientID
+          client_id: _this.client.clientID
         }]; // try to send on the connection
 
         try {
@@ -3894,9 +3925,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         var now = new Date();
 
         if (_this.lastEvent && now.getTime() - _this.lastEvent.getTime() > _this.connectionCheckTimeout) {
-          _this.logger('info', 'connection:scheduleConnectionCheck - going to reconnect', {
-            tags: ['connection']
-          });
+          _this._log('scheduleConnectionCheck - going to reconnect');
 
           _this._setHealth(false);
 
@@ -3905,15 +3934,8 @@ var StableWSConnection = /*#__PURE__*/function () {
       }, _this.connectionCheckTimeout);
     });
 
-    this.wsBaseURL = wsBaseURL;
-    this.clientID = clientID;
-    this.userID = userID;
-    this.user = user;
-    this.authType = authType;
-    this.userAgent = userAgent;
-    this.apiKey = apiKey;
-    this.tokenManager = tokenManager;
-    this.device = device;
+    /** StreamChat client */
+    this.client = client;
     /** consecutive failures influence the duration of the timeout */
 
     this.consecutiveFailures = 0;
@@ -3923,18 +3945,15 @@ var StableWSConnection = /*#__PURE__*/function () {
     /** We only make 1 attempt to reconnect at the same time.. */
 
     this.isConnecting = false;
+    /** To avoid reconnect if client is disconnected */
+
+    this.isDisconnected = false;
     /** Boolean that indicates if the connection promise is resolved */
 
     this.isResolved = false;
     /** Boolean that indicates if we have a working connection to the server */
 
     this.isHealthy = false;
-    /** Callback when the connection fails and recovers */
-
-    this.recoverCallback = recoverCallback;
-    this.messageCallback = messageCallback;
-    this.eventCallback = eventCallback;
-    this.logger = logger;
     /** Incremented when a new WS connection is made */
 
     this.wsID = 1;
@@ -3945,74 +3964,82 @@ var StableWSConnection = /*#__PURE__*/function () {
 
     this.pingInterval = 25 * 1000;
     this.connectionCheckTimeout = this.pingInterval + 10 * 1000;
-
-    this._listenForConnectionChanges();
-
-    this.postInsights = postInsights;
-    this.insightMetrics = insightMetrics;
+    addConnectionEventListeners(this.onlineStatusChanged);
   }
-  /**
-   * connect - Connect to the WS URL
-   *
-   * @return {ConnectAPIResponse<ChannelType, CommandType, UserType>} Promise that completes once the first health check message is received
-   */
-
 
   _createClass(StableWSConnection, [{
+    key: "_log",
+    value: function _log(msg) {
+      var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'info';
+      this.client.logger(level, 'connection:' + msg, _objectSpread$3({
+        tags: ['connection']
+      }, extra));
+    }
+    /**
+     * connect - Connect to the WS URL
+     * the default 15s timeout allows between 2~3 tries
+     * @return {ConnectAPIResponse<ChannelType, CommandType, UserType>} Promise that completes once the first health check message is received
+     */
+
+  }, {
     key: "connect",
     value: function () {
       var _connect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var healthCheck;
+        var timeout,
+            healthCheck,
+            _args = arguments;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
+                timeout = _args.length > 0 && _args[0] !== undefined ? _args[0] : 15000;
+
                 if (!this.isConnecting) {
-                  _context.next = 2;
+                  _context.next = 3;
                   break;
                 }
 
                 throw Error("You've called connect twice, can only attempt 1 connection at the time");
 
-              case 2:
-                _context.prev = 2;
-                _context.next = 5;
+              case 3:
+                this.isDisconnected = false;
+                _context.prev = 4;
+                _context.next = 7;
                 return this._connect();
 
-              case 5:
+              case 7:
                 healthCheck = _context.sent;
                 this.consecutiveFailures = 0;
-                this.logger('info', "connection:connect() - Established ws connection with healthcheck: ".concat(healthCheck), {
-                  tags: ['connection']
-                });
-                _context.next = 21;
+
+                this._log("connect() - Established ws connection with healthcheck: ".concat(healthCheck));
+
+                _context.next = 23;
                 break;
 
-              case 10:
-                _context.prev = 10;
-                _context.t0 = _context["catch"](2);
+              case 12:
+                _context.prev = 12;
+                _context.t0 = _context["catch"](4);
                 this.isHealthy = false;
                 this.consecutiveFailures += 1;
 
-                if (!(_context.t0.code === chatCodes.TOKEN_EXPIRED && !this.tokenManager.isStatic())) {
-                  _context.next = 19;
+                if (!(_context.t0.code === chatCodes.TOKEN_EXPIRED && !this.client.tokenManager.isStatic())) {
+                  _context.next = 21;
                   break;
                 }
 
-                this.logger('info', 'connection:connect() - WS failure due to expired token, so going to try to reload token and reconnect', {
-                  tags: ['connection']
-                });
+                this._log('connect() - WS failure due to expired token, so going to try to reload token and reconnect');
 
                 this._reconnect({
                   refreshToken: true
                 });
 
-                _context.next = 21;
+                _context.next = 23;
                 break;
 
-              case 19:
+              case 21:
                 if (_context.t0.isWSFailure) {
-                  _context.next = 21;
+                  _context.next = 23;
                   break;
                 }
 
@@ -4023,19 +4050,19 @@ var StableWSConnection = /*#__PURE__*/function () {
                   isWSFailure: _context.t0.isWSFailure
                 }));
 
-              case 21:
-                _context.next = 23;
-                return this._waitForHealthy();
-
               case 23:
+                _context.next = 25;
+                return this._waitForHealthy(timeout);
+
+              case 25:
                 return _context.abrupt("return", _context.sent);
 
-              case 24:
+              case 26:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, this, [[2, 10]]);
+        }, _callee, this, [[4, 12]]);
       }));
 
       function connect() {
@@ -4126,6 +4153,7 @@ var StableWSConnection = /*#__PURE__*/function () {
                           return sleep(timeout);
 
                         case 2:
+                          _this2.isConnecting = false;
                           throw new Error(JSON.stringify({
                             code: '',
                             StatusCode: '',
@@ -4133,7 +4161,7 @@ var StableWSConnection = /*#__PURE__*/function () {
                             isWSFailure: true
                           }));
 
-                        case 3:
+                        case 4:
                         case "end":
                           return _context3.stop();
                       }
@@ -4157,7 +4185,7 @@ var StableWSConnection = /*#__PURE__*/function () {
     }()
     /**
      * Builds and returns the url for websocket.
-     * @param reqID Unique identifier generated on client side, to help tracking apis on backend.
+     * @private
      * @returns url string
      */
 
@@ -4171,10 +4199,11 @@ var StableWSConnection = /*#__PURE__*/function () {
     function disconnect(timeout) {
       var _this3 = this;
 
-      this.logger('info', "connection:disconnect() - Closing the websocket connection for wsID ".concat(this.wsID), {
-        tags: ['connection']
-      });
-      this.wsID += 1; // start by removing all the listeners
+      this._log("disconnect() - Closing the websocket connection for wsID ".concat(this.wsID));
+
+      this.wsID += 1;
+      this.isConnecting = false;
+      this.isDisconnected = true; // start by removing all the listeners
 
       if (this.healthCheckTimeoutRef) {
         clearInterval(this.healthCheckTimeoutRef);
@@ -4184,8 +4213,7 @@ var StableWSConnection = /*#__PURE__*/function () {
         clearInterval(this.connectionCheckTimeoutRef);
       }
 
-      this._removeConnectionListeners();
-
+      removeConnectionEventListeners(this.onlineStatusChanged);
       this.isHealthy = false; // remove ws handlers...
 
       if (this.ws && this.ws.removeAllListeners) {
@@ -4201,8 +4229,7 @@ var StableWSConnection = /*#__PURE__*/function () {
       if (ws && ws.close && ws.readyState === ws.OPEN) {
         isClosedPromise = new Promise(function (resolve) {
           var onclose = function onclose(event) {
-            _this3.logger('info', "connection:disconnect() - resolving isClosedPromise ".concat(event ? 'with' : 'without', " close frame"), {
-              tags: ['connection'],
+            _this3._log("disconnect() - resolving isClosedPromise ".concat(event ? 'with' : 'without', " close frame"), {
               event: event
             });
 
@@ -4214,14 +4241,13 @@ var StableWSConnection = /*#__PURE__*/function () {
 
           setTimeout(onclose, timeout != null ? timeout : 1000);
         });
-        this.logger('info', "connection:disconnect() - Manually closed connection by calling client.disconnect()", {
-          tags: ['connection']
-        });
+
+        this._log("disconnect() - Manually closed connection by calling client.disconnect()");
+
         ws.close(chatCodes.WS_CLOSED_SUCCESS, 'Manually closed connection by calling client.disconnect()');
       } else {
-        this.logger('info', "connection:disconnect() - ws connection doesn't exist or it is already closed.", {
-          tags: ['connection']
-        });
+        this._log("disconnect() - ws connection doesn't exist or it is already closed.");
+
         isClosedPromise = Promise.resolve();
       }
 
@@ -4238,13 +4264,12 @@ var StableWSConnection = /*#__PURE__*/function () {
     key: "_connect",
     value: function () {
       var _connect3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-        var wsURL, response, _this$postInsights, insights;
-
+        var wsURL, response, insights;
         return _regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
-                if (!this.isConnecting) {
+                if (!(this.isConnecting || this.isDisconnected)) {
                   _context5.next = 2;
                   break;
                 }
@@ -4255,15 +4280,15 @@ var StableWSConnection = /*#__PURE__*/function () {
                 // simply ignore _connect if it's currently trying to connect
                 this.isConnecting = true;
                 this.requestID = randomId();
-                this.insightMetrics.connectionStartTimestamp = new Date().getTime();
+                this.client.insightMetrics.connectionStartTimestamp = new Date().getTime();
                 _context5.prev = 5;
                 _context5.next = 8;
-                return this.tokenManager.tokenReady();
+                return this.client.tokenManager.tokenReady();
 
               case 8:
                 this._setupConnectionPromise();
 
-                wsURL = this._buildUrl(this.requestID);
+                wsURL = this._buildUrl();
                 this.ws = new WebSocket(wsURL);
                 this.ws.onopen = this.onopen.bind(this, this.wsID);
                 this.ws.onclose = this.onclose.bind(this, this.wsID);
@@ -4283,9 +4308,9 @@ var StableWSConnection = /*#__PURE__*/function () {
 
                 this.connectionID = response.connection_id;
 
-                if (this.insightMetrics.wsConsecutiveFailures > 0 && this.postInsights) {
-                  this.postInsights('ws_success_after_failure', buildWsSuccessAfterFailureInsight(this));
-                  this.insightMetrics.wsConsecutiveFailures = 0;
+                if (this.client.insightMetrics.wsConsecutiveFailures > 0 && this.client.options.enableInsights) {
+                  postInsights('ws_success_after_failure', buildWsSuccessAfterFailureInsight(this));
+                  this.client.insightMetrics.wsConsecutiveFailures = 0;
                 }
 
                 return _context5.abrupt("return", response);
@@ -4299,12 +4324,11 @@ var StableWSConnection = /*#__PURE__*/function () {
                 _context5.t0 = _context5["catch"](5);
                 this.isConnecting = false;
 
-                if (this.postInsights) {
-                  this.insightMetrics.wsConsecutiveFailures++;
-                  this.insightMetrics.wsTotalFailures++; // @ts-ignore
-
+                if (this.client.options.enableInsights) {
+                  this.client.insightMetrics.wsConsecutiveFailures++;
+                  this.client.insightMetrics.wsTotalFailures++;
                   insights = buildWsFatalInsight(this, convertErrorToJson(_context5.t0));
-                  (_this$postInsights = this.postInsights) === null || _this$postInsights === void 0 ? void 0 : _this$postInsights.call(this, 'ws_fatal', insights);
+                  postInsights === null || postInsights === void 0 ? void 0 : postInsights('ws_fatal', insights);
                 }
 
                 throw _context5.t0;
@@ -4338,26 +4362,23 @@ var StableWSConnection = /*#__PURE__*/function () {
       var _reconnect2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
         var options,
             interval,
-            _open,
             _args6 = arguments;
-
         return _regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) {
             switch (_context6.prev = _context6.next) {
               case 0:
                 options = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : {};
-                this.logger('info', 'connection:_reconnect() - Initiating the reconnect', {
-                  tags: ['connection']
-                }); // only allow 1 connection at the time
+
+                this._log('_reconnect() - Initiating the reconnect'); // only allow 1 connection at the time
+
 
                 if (!(this.isConnecting || this.isHealthy)) {
                   _context6.next = 5;
                   break;
                 }
 
-                this.logger('info', 'connection:_reconnect() - Abort (1) since already connecting or healthy', {
-                  tags: ['connection']
-                });
+                this._log('_reconnect() - Abort (1) since already connecting or healthy');
+
                 return _context6.abrupt("return");
 
               case 5:
@@ -4379,95 +4400,86 @@ var StableWSConnection = /*#__PURE__*/function () {
                   break;
                 }
 
-                this.logger('info', 'connection:_reconnect() - Abort (2) since already connecting or healthy', {
-                  tags: ['connection']
-                });
+                this._log('_reconnect() - Abort (2) since already connecting or healthy');
+
                 return _context6.abrupt("return");
 
               case 12:
-                // cleanup the old connection
-                this.logger('info', 'connection:_reconnect() - Destroying current WS connection', {
-                  tags: ['connection']
-                });
+                if (!this.isDisconnected) {
+                  _context6.next = 15;
+                  break;
+                }
+
+                this._log('_reconnect() - Abort (3) since disconnect() is called');
+
+                return _context6.abrupt("return");
+
+              case 15:
+                this._log('_reconnect() - Destroying current WS connection'); // cleanup the old connection
+
 
                 this._destroyCurrentWSConnection();
 
                 if (!options.refreshToken) {
-                  _context6.next = 17;
+                  _context6.next = 20;
                   break;
                 }
 
-                _context6.next = 17;
-                return this.tokenManager.loadToken();
-
-              case 17:
-                _context6.prev = 17;
                 _context6.next = 20;
-                return this._connect();
+                return this.client.tokenManager.loadToken();
 
               case 20:
-                _open = _context6.sent;
-
-                if (!this.recoverCallback) {
-                  _context6.next = 26;
-                  break;
-                }
+                _context6.prev = 20;
+                _context6.next = 23;
+                return this._connect();
 
-                this.logger('info', 'connection:_reconnect() - Waiting for recoverCallBack', {
-                  tags: ['connection']
-                });
-                _context6.next = 25;
-                return this.recoverCallback(_open);
+              case 23:
+                this._log('_reconnect() - Waiting for recoverCallBack');
 
-              case 25:
-                this.logger('info', 'connection:_reconnect() - Finished recoverCallBack', {
-                  tags: ['connection']
-                });
+                _context6.next = 26;
+                return this.client.recoverState();
 
               case 26:
+                this._log('_reconnect() - Finished recoverCallBack');
+
                 this.consecutiveFailures = 0;
-                _context6.next = 37;
+                _context6.next = 38;
                 break;
 
-              case 29:
-                _context6.prev = 29;
-                _context6.t0 = _context6["catch"](17);
+              case 30:
+                _context6.prev = 30;
+                _context6.t0 = _context6["catch"](20);
                 this.isHealthy = false;
                 this.consecutiveFailures += 1;
 
-                if (!(_context6.t0.code === chatCodes.TOKEN_EXPIRED && !this.tokenManager.isStatic())) {
-                  _context6.next = 36;
+                if (!(_context6.t0.code === chatCodes.TOKEN_EXPIRED && !this.client.tokenManager.isStatic())) {
+                  _context6.next = 37;
                   break;
                 }
 
-                this.logger('info', 'connection:_reconnect() - WS failure due to expired token, so going to try to reload token and reconnect', {
-                  tags: ['connection']
-                });
+                this._log('_reconnect() - WS failure due to expired token, so going to try to reload token and reconnect');
+
                 return _context6.abrupt("return", this._reconnect({
                   refreshToken: true
                 }));
 
-              case 36:
+              case 37:
                 // reconnect on WS failures, don't reconnect if there is a code bug
                 if (_context6.t0.isWSFailure) {
-                  this.logger('info', 'connection:_reconnect() - WS failure, so going to try to reconnect', {
-                    tags: ['connection']
-                  });
+                  this._log('_reconnect() - WS failure, so going to try to reconnect');
 
                   this._reconnect();
                 }
 
-              case 37:
-                this.logger('info', 'connection:_reconnect() - == END ==', {
-                  tags: ['connection']
-                });
-
               case 38:
+                this._log('_reconnect() - == END ==');
+
+              case 39:
               case "end":
                 return _context6.stop();
             }
           }
-        }, _callee6, this, [[17, 29]]);
+        }, _callee6, this, [[20, 30]]);
       }));
 
       function _reconnect() {
@@ -4496,13 +4508,10 @@ var StableWSConnection = /*#__PURE__*/function () {
       this.wsID += 1;
 
       try {
-        if (this.ws && this.ws.removeAllListeners) {
-          this.ws.removeAllListeners();
-        }
+        var _this$ws2, _this$ws3;
 
-        if (this.ws && this.ws.close) {
-          this.ws.close();
-        }
+        this === null || this === void 0 ? void 0 : (_this$ws2 = this.ws) === null || _this$ws2 === void 0 ? void 0 : _this$ws2.removeAllListeners();
+        this === null || this === void 0 ? void 0 : (_this$ws3 = this.ws) === null || _this$ws3 === void 0 ? void 0 : _this$ws3.close();
       } catch (e) {// we don't care
       }
     }
@@ -4515,9 +4524,9 @@ var StableWSConnection = /*#__PURE__*/function () {
   return StableWSConnection;
 }();
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
  * Creates the JWT token that can be used for a UserSession
@@ -4526,7 +4535,7 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
  * @private
  * @param {Secret} apiSecret - API Secret key
  * @param {string} userId - The user_id key in the JWT payload
- * @param {UnknownType} [extraData] - Extra that should be part of the JWT token
+ * @param {UR} [extraData] - Extra that should be part of the JWT token
  * @param {SignOptions} [jwtOptions] - Options that can be past to jwt.sign
  * @return {string} JWT Token
  */
@@ -4538,7 +4547,7 @@ function JWTUserToken(apiSecret, userId) {
     throw new TypeError('userId should be a string');
   }
 
-  var payload = _objectSpread$1({
+  var payload = _objectSpread$2({
     user_id: userId
   }, extraData); // make sure we return a clear error when jwt is shimmed (ie. browser build)
 
@@ -4725,76 +4734,576 @@ function TokenManager(secret) {
                   break;
                 }
 
-                return _context2.abrupt("return", resolve(_this.token));
+                return _context2.abrupt("return", resolve(_this.token));
+
+              case 2:
+                if (!(_this.tokenProvider && typeof _this.tokenProvider !== 'string')) {
+                  _context2.next = 7;
+                  break;
+                }
+
+                _context2.next = 5;
+                return _this.tokenProvider();
+
+              case 5:
+                _this.token = _context2.sent;
+                resolve(_this.token);
+
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    return _this.loadTokenPromise;
+  });
+
+  _defineProperty(this, "getToken", function () {
+    if (_this.token) {
+      return _this.token;
+    }
+
+    if (_this.user && _this.user.anon && !_this.token) {
+      return _this.token;
+    }
+
+    if (_this.secret) {
+      return JWTServerToken(_this.secret);
+    }
+
+    throw new Error("Both secret and user tokens are not set. Either client.connectUser wasn't called or client.disconnect was called");
+  });
+
+  _defineProperty(this, "isStatic", function () {
+    return _this.type === 'static';
+  });
+
+  this.loadTokenPromise = null;
+
+  if (secret) {
+    this.secret = secret;
+  }
+
+  this.type = 'static';
+
+  if (this.secret) {
+    this.token = JWTServerToken(this.secret);
+  }
+}
+/**
+ * Set the static string token or token provider.
+ * Token provider should return a token string or a promise which resolves to string token.
+ *
+ * @param {TokenOrProvider} tokenOrProvider
+ * @param {UserResponse<UserType>} user
+ */
+;
+
+var APIErrorCodes = {
+  '-1': {
+    name: 'InternalSystemError',
+    retryable: true
+  },
+  '2': {
+    name: 'AccessKeyError',
+    retryable: false
+  },
+  '3': {
+    name: 'AuthenticationFailedError',
+    retryable: true
+  },
+  '4': {
+    name: 'InputError',
+    retryable: false
+  },
+  '6': {
+    name: 'DuplicateUsernameError',
+    retryable: false
+  },
+  '9': {
+    name: 'RateLimitError',
+    retryable: true
+  },
+  '16': {
+    name: 'DoesNotExistError',
+    retryable: false
+  },
+  '17': {
+    name: 'NotAllowedError',
+    retryable: false
+  },
+  '18': {
+    name: 'EventNotSupportedError',
+    retryable: false
+  },
+  '19': {
+    name: 'ChannelFeatureNotSupportedError',
+    retryable: false
+  },
+  '20': {
+    name: 'MessageTooLongError',
+    retryable: false
+  },
+  '21': {
+    name: 'MultipleNestingLevelError',
+    retryable: false
+  },
+  '22': {
+    name: 'PayloadTooBigError',
+    retryable: false
+  },
+  '23': {
+    name: 'RequestTimeoutError',
+    retryable: true
+  },
+  '24': {
+    name: 'MaxHeaderSizeExceededError',
+    retryable: false
+  },
+  '40': {
+    name: 'AuthErrorTokenExpired',
+    retryable: false
+  },
+  '41': {
+    name: 'AuthErrorTokenNotValidYet',
+    retryable: false
+  },
+  '42': {
+    name: 'AuthErrorTokenUsedBeforeIssuedAt',
+    retryable: false
+  },
+  '43': {
+    name: 'AuthErrorTokenSignatureInvalid',
+    retryable: false
+  },
+  '44': {
+    name: 'CustomCommandEndpointMissingError',
+    retryable: false
+  },
+  '45': {
+    name: 'CustomCommandEndpointCallError',
+    retryable: true
+  },
+  '46': {
+    name: 'ConnectionIDNotFoundError',
+    retryable: false
+  },
+  '60': {
+    name: 'CoolDownError',
+    retryable: true
+  },
+  '69': {
+    name: 'ErrWrongRegion',
+    retryable: false
+  },
+  '70': {
+    name: 'ErrQueryChannelPermissions',
+    retryable: false
+  },
+  '71': {
+    name: 'ErrTooManyConnections',
+    retryable: true
+  },
+  '99': {
+    name: 'AppSuspendedError',
+    retryable: false
+  }
+};
+function isAPIError(error) {
+  return error.code !== undefined;
+}
+function isErrorRetryable(error) {
+  if (!error.code) return false;
+  var err = APIErrorCodes["".concat(error.code)];
+  if (!err) return false;
+  return err.retryable;
+}
+function isConnectionIDError(error) {
+  return error.code === 46; // ConnectionIDNotFoundError
+}
+function isWSFailure(err) {
+  if (typeof err.isWSFailure === 'boolean') {
+    return err.isWSFailure;
+  }
+
+  try {
+    return JSON.parse(err.message).isWSFailure;
+  } catch (_) {
+    return false;
+  }
+}
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var ConnectionState;
+
+(function (ConnectionState) {
+  ConnectionState["Closed"] = "CLOSED";
+  ConnectionState["Connected"] = "CONNECTED";
+  ConnectionState["Connecting"] = "CONNECTING";
+  ConnectionState["Disconnected"] = "DISCONNECTED";
+  ConnectionState["Init"] = "INIT";
+})(ConnectionState || (ConnectionState = {}));
+
+var WSConnectionFallback = /*#__PURE__*/function () {
+  function WSConnectionFallback(_ref) {
+    var _this = this;
+
+    var client = _ref.client;
+
+    _classCallCheck(this, WSConnectionFallback);
+
+    _defineProperty(this, "client", void 0);
+
+    _defineProperty(this, "state", void 0);
+
+    _defineProperty(this, "consecutiveFailures", void 0);
+
+    _defineProperty(this, "connectionID", void 0);
+
+    _defineProperty(this, "cancelToken", void 0);
+
+    _defineProperty(this, "_onlineStatusChanged", function (event) {
+      _this._log("_onlineStatusChanged() - ".concat(event.type));
+
+      if (event.type === 'offline') {
+        var _this$cancelToken;
+
+        _this._setState(ConnectionState.Closed);
+
+        (_this$cancelToken = _this.cancelToken) === null || _this$cancelToken === void 0 ? void 0 : _this$cancelToken.cancel('disconnect() is called');
+        _this.cancelToken = undefined;
+        return;
+      }
+
+      if (event.type === 'online' && _this.state === ConnectionState.Closed) {
+        _this.connect(true);
+      }
+    });
+
+    _defineProperty(this, "_req", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params, config, retry) {
+        var _this$cancelToken2, res;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!_this.cancelToken && !params.close) {
+                  _this.cancelToken = axios.CancelToken.source();
+                }
+
+                _context.prev = 1;
+                _context.next = 4;
+                return _this.client.doAxiosRequest('get', _this.client.baseURL.replace(':3030', ':8900') + '/longpoll', // replace port if present for testing with local API
+                undefined, {
+                  config: _objectSpread$1(_objectSpread$1({}, config), {}, {
+                    cancelToken: (_this$cancelToken2 = _this.cancelToken) === null || _this$cancelToken2 === void 0 ? void 0 : _this$cancelToken2.token
+                  }),
+                  params: params
+                });
+
+              case 4:
+                res = _context.sent;
+                _this.consecutiveFailures = 0; // always reset in case of no error
+
+                return _context.abrupt("return", res);
+
+              case 9:
+                _context.prev = 9;
+                _context.t0 = _context["catch"](1);
+                _this.consecutiveFailures += 1;
+
+                if (!(retry && isErrorRetryable(_context.t0))) {
+                  _context.next = 17;
+                  break;
+                }
+
+                _this._log("_req() - Retryable error, retrying request");
+
+                _context.next = 16;
+                return sleep(retryInterval(_this.consecutiveFailures));
+
+              case 16:
+                return _context.abrupt("return", _this._req(params, config, retry));
+
+              case 17:
+                throw _context.t0;
+
+              case 18:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[1, 9]]);
+      }));
+
+      return function (_x, _x2, _x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(this, "_poll", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _data$events, data, i;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(_this.state === ConnectionState.Connected)) {
+                _context2.next = 25;
+                break;
+              }
+
+              _context2.prev = 1;
+              _context2.next = 4;
+              return _this._req({}, {
+                timeout: 30000
+              }, true);
+
+            case 4:
+              data = _context2.sent;
+
+              // 30s => API responds in 20s if there is no event
+              if ((_data$events = data.events) !== null && _data$events !== void 0 && _data$events.length) {
+                for (i = 0; i < data.events.length; i++) {
+                  _this.client.dispatchEvent(data.events[i]);
+                }
+              }
+
+              _context2.next = 23;
+              break;
+
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](1);
+
+              if (!axios.isCancel(_context2.t0)) {
+                _context2.next = 13;
+                break;
+              }
+
+              _this._log("_poll() - axios canceled request");
+
+              return _context2.abrupt("return");
+
+            case 13:
+              if (!isConnectionIDError(_context2.t0)) {
+                _context2.next = 18;
+                break;
+              }
+
+              _this._log("_poll() - ConnectionID error, connecting without ID...");
+
+              _this._setState(ConnectionState.Disconnected);
+
+              _this.connect(true);
+
+              return _context2.abrupt("return");
+
+            case 18:
+              if (!(isAPIError(_context2.t0) && !isErrorRetryable(_context2.t0))) {
+                _context2.next = 21;
+                break;
+              }
+
+              _this._setState(ConnectionState.Closed);
+
+              return _context2.abrupt("return");
+
+            case 21:
+              _context2.next = 23;
+              return sleep(retryInterval(_this.consecutiveFailures));
+
+            case 23:
+              _context2.next = 0;
+              break;
+
+            case 25:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 8]]);
+    })));
+
+    _defineProperty(this, "connect", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var reconnect,
+          _yield$_this$_req,
+          event,
+          _args3 = arguments;
+
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              reconnect = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : false;
+
+              if (!(_this.state === ConnectionState.Connecting)) {
+                _context3.next = 3;
+                break;
+              }
+
+              throw new Error('connecting already in progress');
+
+            case 3:
+              if (!(_this.state === ConnectionState.Connected)) {
+                _context3.next = 5;
+                break;
+              }
+
+              throw new Error('already connected and polling');
+
+            case 5:
+              _this._setState(ConnectionState.Connecting);
+
+              _this.connectionID = undefined; // connect should be sent with empty connection_id so API creates one
+
+              _context3.prev = 7;
+              _context3.next = 10;
+              return _this._req({
+                json: _this.client._buildWSPayload()
+              }, {
+                timeout: 8000
+              }, // 8s
+              reconnect);
+
+            case 10:
+              _yield$_this$_req = _context3.sent;
+              event = _yield$_this$_req.event;
+
+              _this._setState(ConnectionState.Connected);
+
+              _this.connectionID = event.connection_id;
+
+              _this._poll();
+
+              if (reconnect) {
+                _this.client.recoverState();
+              }
+
+              return _context3.abrupt("return", event);
+
+            case 19:
+              _context3.prev = 19;
+              _context3.t0 = _context3["catch"](7);
+
+              _this._setState(ConnectionState.Closed);
+
+              throw _context3.t0;
+
+            case 23:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[7, 19]]);
+    })));
+
+    _defineProperty(this, "isHealthy", function () {
+      return _this.connectionID && _this.state === ConnectionState.Connected;
+    });
 
-              case 2:
-                if (!(_this.tokenProvider && typeof _this.tokenProvider !== 'string')) {
-                  _context2.next = 7;
-                  break;
-                }
+    _defineProperty(this, "disconnect", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var _this$cancelToken3;
 
-                _context2.next = 5;
-                return _this.tokenProvider();
+      var timeout,
+          _args4 = arguments;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              timeout = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : 2000;
+              removeConnectionEventListeners(_this._onlineStatusChanged);
 
-              case 5:
-                _this.token = _context2.sent;
-                resolve(_this.token);
+              _this._setState(ConnectionState.Disconnected);
 
-              case 7:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
+              (_this$cancelToken3 = _this.cancelToken) === null || _this$cancelToken3 === void 0 ? void 0 : _this$cancelToken3.cancel('disconnect() is called');
+              _this.cancelToken = undefined;
+              _context4.prev = 5;
+              _context4.next = 8;
+              return _this._req({
+                close: true
+              }, {
+                timeout: timeout
+              }, false);
 
-      return function (_x3) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    return _this.loadTokenPromise;
-  });
+            case 8:
+              _this.connectionID = undefined;
 
-  _defineProperty(this, "getToken", function () {
-    if (_this.token) {
-      return _this.token;
-    }
+              _this._log("disconnect() - Closed connectionID");
 
-    if (_this.user && _this.user.anon && !_this.token) {
-      return _this.token;
-    }
+              _context4.next = 15;
+              break;
 
-    if (_this.secret) {
-      return JWTServerToken(_this.secret);
+            case 12:
+              _context4.prev = 12;
+              _context4.t0 = _context4["catch"](5);
+
+              _this._log("disconnect() - Failed", {
+                err: _context4.t0
+              });
+
+            case 15:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[5, 12]]);
+    })));
+
+    this.client = client;
+    this.state = ConnectionState.Init;
+    this.consecutiveFailures = 0;
+    addConnectionEventListeners(this._onlineStatusChanged);
+  }
+
+  _createClass(WSConnectionFallback, [{
+    key: "_log",
+    value: function _log(msg) {
+      var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'info';
+      this.client.logger(level, 'WSConnectionFallback:' + msg, _objectSpread$1({
+        tags: ['connection_fallback', 'connection']
+      }, extra));
     }
+  }, {
+    key: "_setState",
+    value: function _setState(state) {
+      this._log("_setState() - ".concat(state)); // transition from connecting => connected
 
-    throw new Error("Both secret and user tokens are not set. Either client.connectUser wasn't called or client.disconnect was called");
-  });
 
-  _defineProperty(this, "isStatic", function () {
-    return _this.type === 'static';
-  });
+      if (this.state === ConnectionState.Connecting && state === ConnectionState.Connected) {
+        //@ts-expect-error
+        this.client.dispatchEvent({
+          type: 'connection.changed',
+          online: true
+        });
+      }
 
-  this.loadTokenPromise = null;
+      if (state === ConnectionState.Closed || state === ConnectionState.Disconnected) {
+        //@ts-expect-error
+        this.client.dispatchEvent({
+          type: 'connection.changed',
+          online: false
+        });
+      }
 
-  if (secret) {
-    this.secret = secret;
-  }
+      this.state = state;
+    }
+    /** @private */
 
-  this.type = 'static';
+  }]);
 
-  if (this.secret) {
-    this.token = JWTServerToken(this.secret);
-  }
-}
-/**
- * Set the static string token or token provider.
- * Token provider should return a token string or a promise which resolves to string token.
- *
- * @param {TokenOrProvider} tokenOrProvider
- * @param {UserResponse<UserType>} user
- */
-;
+  return WSConnectionFallback;
+}();
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
@@ -4834,10 +5343,6 @@ var StreamChat = /*#__PURE__*/function () {
 
     _defineProperty(this, "configs", void 0);
 
-    _defineProperty(this, "connectionID", void 0);
-
-    _defineProperty(this, "failures", void 0);
-
     _defineProperty(this, "key", void 0);
 
     _defineProperty(this, "listeners", void 0);
@@ -4872,16 +5377,26 @@ var StreamChat = /*#__PURE__*/function () {
 
     _defineProperty(this, "wsConnection", void 0);
 
+    _defineProperty(this, "wsFallback", void 0);
+
     _defineProperty(this, "wsPromise", void 0);
 
     _defineProperty(this, "consecutiveFailures", void 0);
 
     _defineProperty(this, "insightMetrics", void 0);
 
-    _defineProperty(this, "_hasConnectionID", function () {
-      var _this$wsConnection;
+    _defineProperty(this, "defaultWSTimeoutWithFallback", void 0);
+
+    _defineProperty(this, "defaultWSTimeout", void 0);
+
+    _defineProperty(this, "_getConnectionID", function () {
+      var _this$wsConnection, _this$wsFallback;
 
-      return Boolean((_this$wsConnection = _this.wsConnection) === null || _this$wsConnection === void 0 ? void 0 : _this$wsConnection.connectionID);
+      return ((_this$wsConnection = _this.wsConnection) === null || _this$wsConnection === void 0 ? void 0 : _this$wsConnection.connectionID) || ((_this$wsFallback = _this.wsFallback) === null || _this$wsFallback === void 0 ? void 0 : _this$wsFallback.connectionID);
+    });
+
+    _defineProperty(this, "_hasConnectionID", function () {
+      return Boolean(_this._getConnectionID());
     });
 
     _defineProperty(this, "connectUser", /*#__PURE__*/function () {
@@ -4967,36 +5482,55 @@ var StreamChat = /*#__PURE__*/function () {
       return _this.tokenManager.setTokenOrProvider(userTokenOrProvider, user);
     });
 
-    _defineProperty(this, "closeConnection", function (timeout) {
-      if (_this.cleaningIntervalRef != null) {
-        clearInterval(_this.cleaningIntervalRef);
-        _this.cleaningIntervalRef = undefined;
-      }
+    _defineProperty(this, "closeConnection", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(timeout) {
+        var _this$wsConnection2, _this$wsFallback2;
 
-      if (!_this.wsConnection) {
-        return Promise.resolve();
-      }
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (_this.cleaningIntervalRef != null) {
+                  clearInterval(_this.cleaningIntervalRef);
+                  _this.cleaningIntervalRef = undefined;
+                }
 
-      return _this.wsConnection.disconnect(timeout);
-    });
+                _context2.next = 3;
+                return Promise.all([(_this$wsConnection2 = _this.wsConnection) === null || _this$wsConnection2 === void 0 ? void 0 : _this$wsConnection2.disconnect(timeout), (_this$wsFallback2 = _this.wsFallback) === null || _this$wsFallback2 === void 0 ? void 0 : _this$wsFallback2.disconnect(timeout)]);
 
-    _defineProperty(this, "openConnection", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var _this$wsConnection2;
+              case 3:
+                return _context2.abrupt("return", Promise.resolve());
 
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(this, "openConnection", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var _this$wsConnection3, _this$wsFallback3;
+
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
               if (_this.userID) {
-                _context2.next = 2;
+                _context3.next = 2;
                 break;
               }
 
               throw Error('User is not set on client, use client.connectUser or client.connectAnonymousUser instead');
 
             case 2:
-              if (!((_this$wsConnection2 = _this.wsConnection) !== null && _this$wsConnection2 !== void 0 && _this$wsConnection2.isHealthy && _this._hasConnectionID())) {
-                _context2.next = 5;
+              if (!(((_this$wsConnection3 = _this.wsConnection) !== null && _this$wsConnection3 !== void 0 && _this$wsConnection3.isHealthy || (_this$wsFallback3 = _this.wsFallback) !== null && _this$wsFallback3 !== void 0 && _this$wsFallback3.isHealthy()) && _this._hasConnectionID())) {
+                _context3.next = 5;
                 break;
               }
 
@@ -5004,7 +5538,7 @@ var StreamChat = /*#__PURE__*/function () {
                 tags: ['connection', 'client']
               });
 
-              return _context2.abrupt("return", Promise.resolve());
+              return _context3.abrupt("return", Promise.resolve());
 
             case 5:
               _this.clientID = "".concat(_this.userID, "--").concat(randomId());
@@ -5012,14 +5546,14 @@ var StreamChat = /*#__PURE__*/function () {
 
               _this._startCleaning();
 
-              return _context2.abrupt("return", _this.wsPromise);
+              return _context3.abrupt("return", _this.wsPromise);
 
             case 9:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     })));
 
     _defineProperty(this, "_setupConnection", this.openConnection);
@@ -5037,12 +5571,12 @@ var StreamChat = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "disconnectUser", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(timeout) {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(timeout) {
         var closePromise, _i, _Object$values, _channel;
 
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
                 _this.logger('info', 'client:disconnect() - Disconnecting the client', {
                   tags: ['connection', 'client']
@@ -5066,21 +5600,21 @@ var StreamChat = /*#__PURE__*/function () {
 
                 _this.state = new ClientState(); // reset token manager
 
-                _this.tokenManager.reset(); // close the WS connection
-
+                setTimeout(_this.tokenManager.reset); // delay reseting to use token for disconnect calls
+                // close the WS connection
 
-                return _context3.abrupt("return", closePromise);
+                return _context4.abrupt("return", closePromise);
 
               case 11:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
           }
-        }, _callee3);
+        }, _callee4);
       }));
 
-      return function (_x3) {
-        return _ref3.apply(this, arguments);
+      return function (_x4) {
+        return _ref4.apply(this, arguments);
       };
     }());
 
@@ -5108,76 +5642,78 @@ var StreamChat = /*#__PURE__*/function () {
     _defineProperty(this, "setAnonymousUser", this.connectAnonymousUser);
 
     _defineProperty(this, "doAxiosRequest", /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(type, url, data) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(type, url, data) {
         var options,
             requestConfig,
             response,
-            _args4 = arguments;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+            _requestConfig$header,
+            _args5 = arguments;
+
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) {
-            switch (_context4.prev = _context4.next) {
+            switch (_context5.prev = _context5.next) {
               case 0:
-                options = _args4.length > 3 && _args4[3] !== undefined ? _args4[3] : {};
-                _context4.next = 3;
+                options = _args5.length > 3 && _args5[3] !== undefined ? _args5[3] : {};
+                _context5.next = 3;
                 return _this.tokenManager.tokenReady();
 
               case 3:
                 requestConfig = _this._enrichAxiosOptions(options);
-                _context4.prev = 4;
+                _context5.prev = 4;
 
                 _this._logApiRequest(type, url, data, requestConfig);
 
-                _context4.t0 = type;
-                _context4.next = _context4.t0 === 'get' ? 9 : _context4.t0 === 'delete' ? 13 : _context4.t0 === 'post' ? 17 : _context4.t0 === 'put' ? 21 : _context4.t0 === 'patch' ? 25 : _context4.t0 === 'options' ? 29 : 33;
+                _context5.t0 = type;
+                _context5.next = _context5.t0 === 'get' ? 9 : _context5.t0 === 'delete' ? 13 : _context5.t0 === 'post' ? 17 : _context5.t0 === 'put' ? 21 : _context5.t0 === 'patch' ? 25 : _context5.t0 === 'options' ? 29 : 33;
                 break;
 
               case 9:
-                _context4.next = 11;
+                _context5.next = 11;
                 return _this.axiosInstance.get(url, requestConfig);
 
               case 11:
-                response = _context4.sent;
-                return _context4.abrupt("break", 34);
+                response = _context5.sent;
+                return _context5.abrupt("break", 34);
 
               case 13:
-                _context4.next = 15;
+                _context5.next = 15;
                 return _this.axiosInstance.delete(url, requestConfig);
 
               case 15:
-                response = _context4.sent;
-                return _context4.abrupt("break", 34);
+                response = _context5.sent;
+                return _context5.abrupt("break", 34);
 
               case 17:
-                _context4.next = 19;
+                _context5.next = 19;
                 return _this.axiosInstance.post(url, data, requestConfig);
 
               case 19:
-                response = _context4.sent;
-                return _context4.abrupt("break", 34);
+                response = _context5.sent;
+                return _context5.abrupt("break", 34);
 
               case 21:
-                _context4.next = 23;
+                _context5.next = 23;
                 return _this.axiosInstance.put(url, data, requestConfig);
 
               case 23:
-                response = _context4.sent;
-                return _context4.abrupt("break", 34);
+                response = _context5.sent;
+                return _context5.abrupt("break", 34);
 
               case 25:
-                _context4.next = 27;
+                _context5.next = 27;
                 return _this.axiosInstance.patch(url, data, requestConfig);
 
               case 27:
-                response = _context4.sent;
-                return _context4.abrupt("break", 34);
+                response = _context5.sent;
+                return _context5.abrupt("break", 34);
 
               case 29:
-                _context4.next = 31;
+                _context5.next = 31;
                 return _this.axiosInstance.options(url, requestConfig);
 
               case 31:
-                response = _context4.sent;
-                return _context4.abrupt("break", 34);
+                response = _context5.sent;
+                return _context5.abrupt("break", 34);
 
               case 33:
                 throw new Error('Invalid request type');
@@ -5186,64 +5722,66 @@ var StreamChat = /*#__PURE__*/function () {
                 _this._logApiResponse(type, url, response);
 
                 _this.consecutiveFailures = 0;
-                return _context4.abrupt("return", _this.handleResponse(response));
+                return _context5.abrupt("return", _this.handleResponse(response));
 
               case 39:
-                _context4.prev = 39;
-                _context4.t1 = _context4["catch"](4);
+                _context5.prev = 39;
+                _context5.t1 = _context5["catch"](4);
+                _context5.t1.client_request_id = (_requestConfig$header = requestConfig.headers) === null || _requestConfig$header === void 0 ? void 0 : _requestConfig$header['x-client-request-id'];
 
-                _this._logApiError(type, url, _context4.t1);
+                _this._logApiError(type, url, _context5.t1);
 
                 _this.consecutiveFailures += 1;
 
-                if (!_context4.t1.response) {
-                  _context4.next = 55;
+                if (!_context5.t1.response) {
+                  _context5.next = 56;
                   break;
                 }
 
-                if (!(_context4.t1.response.data.code === chatCodes.TOKEN_EXPIRED && !_this.tokenManager.isStatic())) {
-                  _context4.next = 52;
+                if (!(_context5.t1.response.data.code === chatCodes.TOKEN_EXPIRED && !_this.tokenManager.isStatic())) {
+                  _context5.next = 53;
                   break;
                 }
 
                 if (!(_this.consecutiveFailures > 1)) {
-                  _context4.next = 48;
+                  _context5.next = 49;
                   break;
                 }
 
-                _context4.next = 48;
+                _context5.next = 49;
                 return sleep(retryInterval(_this.consecutiveFailures));
 
-              case 48:
+              case 49:
                 _this.tokenManager.loadToken();
 
-                _context4.next = 51;
+                _context5.next = 52;
                 return _this.doAxiosRequest(type, url, data, options);
 
-              case 51:
-                return _context4.abrupt("return", _context4.sent);
-
               case 52:
-                return _context4.abrupt("return", _this.handleResponse(_context4.t1.response));
+                return _context5.abrupt("return", _context5.sent);
 
-              case 55:
-                throw _context4.t1;
+              case 53:
+                return _context5.abrupt("return", _this.handleResponse(_context5.t1.response));
 
               case 56:
+                throw _context5.t1;
+
+              case 57:
               case "end":
-                return _context4.stop();
+                return _context5.stop();
             }
           }
-        }, _callee4, null, [[4, 39]]);
+        }, _callee5, null, [[4, 39]]);
       }));
 
-      return function (_x4, _x5, _x6) {
-        return _ref4.apply(this, arguments);
+      return function (_x5, _x6, _x7) {
+        return _ref5.apply(this, arguments);
       };
     }());
 
     _defineProperty(this, "dispatchEvent", function (event) {
-      // client event handlers
+      if (!event.received_at) event.received_at = new Date(); // client event handlers
+
       var postListenerCallbacks = _this._handleClientEvent(event); // channel event handlers
 
 
@@ -5269,7 +5807,6 @@ var StreamChat = /*#__PURE__*/function () {
       // dispatch the event to the channel listeners
       var jsonString = messageEvent.data;
       var event = JSON.parse(jsonString);
-      event.received_at = new Date();
 
       _this.dispatchEvent(event);
     });
@@ -5390,22 +5927,20 @@ var StreamChat = /*#__PURE__*/function () {
       }
     });
 
-    _defineProperty(this, "recoverState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-      var _this$wsConnection3;
-
+    _defineProperty(this, "recoverState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
       var cids;
-      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
-              _this.logger('info', "client:recoverState() - Start of recoverState with connectionID ".concat((_this$wsConnection3 = _this.wsConnection) === null || _this$wsConnection3 === void 0 ? void 0 : _this$wsConnection3.connectionID), {
+              _this.logger('info', "client:recoverState() - Start of recoverState with connectionID ".concat(_this._getConnectionID()), {
                 tags: ['connection']
               });
 
               cids = Object.keys(_this.activeChannels);
 
               if (!(cids.length && _this.recoverStateOnReconnect)) {
-                _context5.next = 10;
+                _context6.next = 10;
                 break;
               }
 
@@ -5413,7 +5948,7 @@ var StreamChat = /*#__PURE__*/function () {
                 tags: ['connection', 'client']
               });
 
-              _context5.next = 6;
+              _context6.next = 6;
               return _this.queryChannels({
                 cid: {
                   $in: cids
@@ -5433,7 +5968,7 @@ var StreamChat = /*#__PURE__*/function () {
                 type: 'connection.recovered'
               });
 
-              _context5.next = 11;
+              _context6.next = 11;
               break;
 
             case 10:
@@ -5447,10 +5982,10 @@ var StreamChat = /*#__PURE__*/function () {
 
             case 13:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5);
+      }, _callee6);
     })));
 
     _defineProperty(this, "getChannelByMembers", function (channelType, custom) {
@@ -5530,66 +6065,16 @@ var StreamChat = /*#__PURE__*/function () {
       return !!_this.secret;
     });
 
-    _defineProperty(this, "postInsights", /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(insightType, insights) {
-        var maxAttempts, i;
-        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-          while (1) {
-            switch (_context6.prev = _context6.next) {
-              case 0:
-                maxAttempts = 3;
-                i = 0;
-
-              case 2:
-                if (!(i < maxAttempts)) {
-                  _context6.next = 18;
-                  break;
-                }
-
-                _context6.prev = 3;
-                _context6.next = 6;
-                return _this.axiosInstance.post("https://chat-insights.getstream.io/insights/".concat(insightType), insights);
-
-              case 6:
-                _context6.next = 14;
-                break;
-
-              case 8:
-                _context6.prev = 8;
-                _context6.t0 = _context6["catch"](3);
-
-                _this.logger('warn', "failed to send insights event ".concat(insightType), {
-                  tags: ['insights', 'connection'],
-                  error: _context6.t0,
-                  insights: insights
-                });
-
-                _context6.next = 13;
-                return sleep((i + 1) * 3000);
-
-              case 13:
-                return _context6.abrupt("continue", 15);
-
-              case 14:
-                return _context6.abrupt("break", 18);
-
-              case 15:
-                i++;
-                _context6.next = 2;
-                break;
-
-              case 18:
-              case "end":
-                return _context6.stop();
-            }
-          }
-        }, _callee6, null, [[3, 8]]);
-      }));
-
-      return function (_x7, _x8) {
-        return _ref6.apply(this, arguments);
-      };
-    }());
+    _defineProperty(this, "_buildWSPayload", function (client_request_id) {
+      return JSON.stringify({
+        user_id: _this.userID,
+        user_details: _this._user,
+        user_token: _this.tokenManager.getToken(),
+        server_determines_connection_id: true,
+        device: _this.options.device,
+        client_request_id: client_request_id
+      });
+    });
 
     // set the key
     this.key = _key;
@@ -5623,7 +6108,7 @@ var StreamChat = /*#__PURE__*/function () {
     }
 
     this.axiosInstance = axios.create(this.options);
-    this.setBaseURL(this.options.baseURL || 'https://chat-us-east-1.stream-io-api.com');
+    this.setBaseURL(this.options.baseURL || 'https://chat.stream-io-api.com');
 
     if (typeof process !== 'undefined' && process.env.STREAM_LOCAL_TEST_RUN) {
       this.setBaseURL('http://localhost:3030');
@@ -5647,6 +6132,8 @@ var StreamChat = /*#__PURE__*/function () {
     this.tokenManager = new TokenManager(this.secret);
     this.consecutiveFailures = 0;
     this.insightMetrics = new InsightMetrics();
+    this.defaultWSTimeoutWithFallback = 6000;
+    this.defaultWSTimeout = 15000;
     /**
      * logger function should accept 3 parameters:
      * @param logLevel string
@@ -5820,7 +6307,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee7, this);
       }));
 
-      function updateAppSettings(_x9) {
+      function updateAppSettings(_x8) {
         return _updateAppSettings.apply(this, arguments);
       }
 
@@ -5854,7 +6341,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee8, this);
       }));
 
-      function revokeTokens(_x10) {
+      function revokeTokens(_x9) {
         return _revokeTokens.apply(this, arguments);
       }
 
@@ -5886,7 +6373,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee9, this);
       }));
 
-      function revokeUserToken(_x11, _x12) {
+      function revokeUserToken(_x10, _x11) {
         return _revokeUserToken.apply(this, arguments);
       }
 
@@ -5945,7 +6432,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee10, this);
       }));
 
-      function revokeUsersToken(_x13, _x14) {
+      function revokeUsersToken(_x12, _x13) {
         return _revokeUsersToken.apply(this, arguments);
       }
 
@@ -6037,7 +6524,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee12, this);
       }));
 
-      function testPushSettings(_x15) {
+      function testPushSettings(_x14) {
         return _testPushSettings.apply(this, arguments);
       }
 
@@ -6146,7 +6633,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee14, this, [[1, 7]]);
       }));
 
-      function setGuestUser(_x16) {
+      function setGuestUser(_x15) {
         return _setGuestUser.apply(this, arguments);
       }
 
@@ -6457,90 +6944,84 @@ var StreamChat = /*#__PURE__*/function () {
      */
     function () {
       var _connect = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
-        var client, warmUpPromise, handshake;
         return _regeneratorRuntime.wrap(function _callee15$(_context15) {
           while (1) {
             switch (_context15.prev = _context15.next) {
               case 0:
-                client = this;
-                this.failures = 0;
-
-                if (!(client.userID == null || this._user == null)) {
-                  _context15.next = 4;
+                if (!(!this.userID || !this._user)) {
+                  _context15.next = 2;
                   break;
                 }
 
                 throw Error('Call connectUser or connectAnonymousUser before starting the connection');
 
-              case 4:
-                if (!(client.wsBaseURL == null)) {
-                  _context15.next = 6;
+              case 2:
+                if (this.wsBaseURL) {
+                  _context15.next = 4;
                   break;
                 }
 
                 throw Error('Websocket base url not set');
 
-              case 6:
-                if (!(client.clientID == null)) {
-                  _context15.next = 8;
+              case 4:
+                if (this.clientID) {
+                  _context15.next = 6;
                   break;
                 }
 
                 throw Error('clientID is not set');
 
-              case 8:
-                // The StableWSConnection handles all the reconnection logic.
+              case 6:
+                if (!this.wsConnection && (this.options.warmUp || this.options.enableInsights)) {
+                  this._sayHi();
+                } // The StableWSConnection handles all the reconnection logic.
+
+
                 this.wsConnection = new StableWSConnection({
-                  wsBaseURL: client.wsBaseURL,
-                  clientID: client.clientID,
-                  userID: client.userID,
-                  tokenManager: client.tokenManager,
-                  user: this._user,
-                  authType: this.getAuthType(),
-                  userAgent: this.getUserAgent(),
-                  apiKey: this.key,
-                  recoverCallback: this.recoverState,
-                  messageCallback: this.handleEvent,
-                  eventCallback: this.dispatchEvent,
-                  logger: this.logger,
-                  device: this.options.device,
-                  postInsights: this.options.enableInsights ? this.postInsights : undefined,
-                  insightMetrics: this.insightMetrics
+                  client: this
                 });
+                _context15.prev = 8;
+                _context15.next = 11;
+                return this.wsConnection.connect(this.options.enableWSFallback ? this.defaultWSTimeoutWithFallback : this.defaultWSTimeout);
 
-                if (this.options.warmUp) {
-                  warmUpPromise = this.doAxiosRequest('options', this.baseURL + '/connect');
+              case 11:
+                return _context15.abrupt("return", _context15.sent);
+
+              case 14:
+                _context15.prev = 14;
+                _context15.t0 = _context15["catch"](8);
+
+                if (!(this.options.enableWSFallback && isWSFailure(_context15.t0) && isOnline())) {
+                  _context15.next = 24;
+                  break;
                 }
 
-                _context15.next = 12;
-                return this.wsConnection.connect();
+                this.logger('info', 'client:connect() - WS failed, fallback to longpoll', {
+                  tags: ['connection', 'client']
+                });
 
-              case 12:
-                handshake = _context15.sent;
-                _context15.prev = 13;
-                _context15.next = 16;
-                return warmUpPromise;
+                this.wsConnection._destroyCurrentWSConnection();
 
-              case 16:
-                _context15.next = 21;
-                break;
+                this.wsConnection.disconnect().then(); // close WS so no retry
 
-              case 18:
-                _context15.prev = 18;
-                _context15.t0 = _context15["catch"](13);
-                this.logger('error', 'Warmup request failed', {
-                  error: _context15.t0
+                this.wsFallback = new WSConnectionFallback({
+                  client: this
                 });
+                _context15.next = 23;
+                return this.wsFallback.connect();
 
-              case 21:
-                return _context15.abrupt("return", handshake);
+              case 23:
+                return _context15.abrupt("return", _context15.sent);
 
-              case 22:
+              case 24:
+                throw _context15.t0;
+
+              case 25:
               case "end":
                 return _context15.stop();
             }
           }
-        }, _callee15, this, [[13, 18]]);
+        }, _callee15, this, [[8, 14]]);
       }));
 
       function connect() {
@@ -6549,6 +7030,33 @@ var StreamChat = /*#__PURE__*/function () {
 
       return connect;
     }()
+    /**
+     * Check the connectivity with server for warmup purpose.
+     *
+     * @private
+     */
+
+  }, {
+    key: "_sayHi",
+    value: function _sayHi() {
+      var _this4 = this;
+
+      var client_request_id = randomId();
+      var opts = {
+        headers: {
+          'x-client-request-id': client_request_id
+        }
+      };
+      this.doAxiosRequest('get', this.baseURL + '/hi', null, opts).catch(function (e) {
+        if (_this4.options.enableInsights) {
+          postInsights('http_hi_failed', {
+            api_key: _this4.key,
+            err: e,
+            client_request_id: client_request_id
+          });
+        }
+      });
+    }
     /**
      * queryUsers - Query users and watch user presence
      *
@@ -6609,7 +7117,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee16, this);
       }));
 
-      function queryUsers(_x17) {
+      function queryUsers(_x16) {
         return _queryUsers.apply(this, arguments);
       }
 
@@ -6828,7 +7336,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee19, this);
       }));
 
-      function queryChannels(_x18) {
+      function queryChannels(_x17) {
         return _queryChannels.apply(this, arguments);
       }
 
@@ -6914,7 +7422,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee20, this);
       }));
 
-      function search(_x19, _x20) {
+      function search(_x18, _x19) {
         return _search.apply(this, arguments);
       }
 
@@ -6932,7 +7440,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "setLocalDevice",
     value: function setLocalDevice(device) {
-      if (this.wsConnection) {
+      if (this.wsConnection || this.wsFallback) {
         throw new Error('you can only set device before opening a websocket connection');
       }
 
@@ -6974,7 +7482,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee21, this);
       }));
 
-      function addDevice(_x21, _x22, _x23) {
+      function addDevice(_x20, _x21, _x22) {
         return _addDevice.apply(this, arguments);
       }
 
@@ -7012,7 +7520,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee22, this);
       }));
 
-      function getDevices(_x24) {
+      function getDevices(_x23) {
         return _getDevices.apply(this, arguments);
       }
 
@@ -7052,7 +7560,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee23, this);
       }));
 
-      function removeDevice(_x25, _x26) {
+      function removeDevice(_x24, _x25) {
         return _removeDevice.apply(this, arguments);
       }
 
@@ -7093,7 +7601,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee24, this);
       }));
 
-      function getRateLimits(_x27) {
+      function getRateLimits(_x26) {
         return _getRateLimits.apply(this, arguments);
       }
 
@@ -7194,7 +7702,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee25, this);
       }));
 
-      function partialUpdateUser(_x28) {
+      function partialUpdateUser(_x27) {
         return _partialUpdateUser.apply(this, arguments);
       }
 
@@ -7280,7 +7788,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee26, this, [[2, 13, 16, 19]]);
       }));
 
-      function upsertUsers(_x29) {
+      function upsertUsers(_x28) {
         return _upsertUsers.apply(this, arguments);
       }
 
@@ -7393,7 +7901,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee27, this, [[1, 11, 14, 17]]);
       }));
 
-      function partialUpdateUsers(_x30) {
+      function partialUpdateUsers(_x29) {
         return _partialUpdateUsers.apply(this, arguments);
       }
 
@@ -7421,7 +7929,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee28, this);
       }));
 
-      function deleteUser(_x31, _x32) {
+      function deleteUser(_x30, _x31) {
         return _deleteUser.apply(this, arguments);
       }
 
@@ -7449,7 +7957,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee29, this);
       }));
 
-      function reactivateUser(_x33, _x34) {
+      function reactivateUser(_x32, _x33) {
         return _reactivateUser.apply(this, arguments);
       }
 
@@ -7477,7 +7985,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee30, this);
       }));
 
-      function deactivateUser(_x35, _x36) {
+      function deactivateUser(_x34, _x35) {
         return _deactivateUser.apply(this, arguments);
       }
 
@@ -7505,7 +8013,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee31, this);
       }));
 
-      function exportUser(_x37, _x38) {
+      function exportUser(_x36, _x37) {
         return _exportUser.apply(this, arguments);
       }
 
@@ -7554,7 +8062,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee32, this);
       }));
 
-      function banUser(_x39, _x40) {
+      function banUser(_x38, _x39) {
         return _banUser.apply(this, arguments);
       }
 
@@ -7591,7 +8099,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee33, this);
       }));
 
-      function unbanUser(_x41, _x42) {
+      function unbanUser(_x40, _x41) {
         return _unbanUser.apply(this, arguments);
       }
 
@@ -7628,7 +8136,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee34, this);
       }));
 
-      function shadowBan(_x43, _x44) {
+      function shadowBan(_x42, _x43) {
         return _shadowBan.apply(this, arguments);
       }
 
@@ -7665,7 +8173,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee35, this);
       }));
 
-      function removeShadowBan(_x45, _x46) {
+      function removeShadowBan(_x44, _x45) {
         return _removeShadowBan.apply(this, arguments);
       }
 
@@ -7708,7 +8216,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee36, this);
       }));
 
-      function muteUser(_x47, _x48) {
+      function muteUser(_x46, _x47) {
         return _muteUser.apply(this, arguments);
       }
 
@@ -7747,7 +8255,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee37, this);
       }));
 
-      function unmuteUser(_x49, _x50) {
+      function unmuteUser(_x48, _x49) {
         return _unmuteUser.apply(this, arguments);
       }
 
@@ -7806,7 +8314,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee38, this);
       }));
 
-      function flagMessage(_x51) {
+      function flagMessage(_x50) {
         return _flagMessage.apply(this, arguments);
       }
 
@@ -7846,7 +8354,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee39, this);
       }));
 
-      function flagUser(_x52) {
+      function flagUser(_x51) {
         return _flagUser.apply(this, arguments);
       }
 
@@ -7886,7 +8394,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee40, this);
       }));
 
-      function unflagMessage(_x53) {
+      function unflagMessage(_x52) {
         return _unflagMessage.apply(this, arguments);
       }
 
@@ -7926,7 +8434,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee41, this);
       }));
 
-      function unflagUser(_x54) {
+      function unflagUser(_x53) {
         return _unflagUser.apply(this, arguments);
       }
 
@@ -8065,7 +8573,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee43, this);
       }));
 
-      function translateMessage(_x55, _x56) {
+      function translateMessage(_x54, _x55) {
         return _translateMessage.apply(this, arguments);
       }
 
@@ -8181,7 +8689,7 @@ var StreamChat = /*#__PURE__*/function () {
               case 2:
                 clonedMessage = _extends({}, message);
                 delete clonedMessage.id;
-                reservedMessageFields = ['command', 'created_at', 'html', 'latest_reactions', 'own_reactions', 'reaction_counts', 'reply_count', 'type', 'updated_at', 'user', '__html'];
+                reservedMessageFields = ['command', 'created_at', 'html', 'latest_reactions', 'own_reactions', 'quoted_message', 'reaction_counts', 'reply_count', 'type', 'updated_at', 'user', '__html'];
                 reservedMessageFields.forEach(function (item) {
                   if (clonedMessage[item] != null) {
                     delete clonedMessage[item];
@@ -8225,7 +8733,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee44, this);
       }));
 
-      function updateMessage(_x57, _x58, _x59) {
+      function updateMessage(_x56, _x57, _x58) {
         return _updateMessage.apply(this, arguments);
       }
 
@@ -8286,7 +8794,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee45, this);
       }));
 
-      function partialUpdateMessage(_x60, _x61, _x62, _x63) {
+      function partialUpdateMessage(_x59, _x60, _x61, _x62) {
         return _partialUpdateMessage.apply(this, arguments);
       }
 
@@ -8323,7 +8831,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee46, this);
       }));
 
-      function deleteMessage(_x64, _x65) {
+      function deleteMessage(_x63, _x64) {
         return _deleteMessage.apply(this, arguments);
       }
 
@@ -8351,7 +8859,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee47, this);
       }));
 
-      function getMessage(_x66) {
+      function getMessage(_x65) {
         return _getMessage.apply(this, arguments);
       }
 
@@ -8360,7 +8868,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getUserAgent",
     value: function getUserAgent() {
-      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "4.4.3-dev.1");
+      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "4.5.0-beta.0");
     }
   }, {
     key: "setUserAgent",
@@ -8374,7 +8882,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "_enrichAxiosOptions",
     value: function _enrichAxiosOptions() {
-      var _this$wsConnection4;
+      var _options$headers;
 
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
         params: {},
@@ -8384,15 +8892,24 @@ var StreamChat = /*#__PURE__*/function () {
 
       var token = this._getToken();
 
+      var authorization = token ? {
+        Authorization: token
+      } : undefined;
+
+      if (!((_options$headers = options.headers) !== null && _options$headers !== void 0 && _options$headers['x-client-request-id'])) {
+        options.headers = _objectSpread(_objectSpread({}, options.headers), {}, {
+          'x-client-request-id': randomId()
+        });
+      }
+
       return _objectSpread({
         params: _objectSpread(_objectSpread({
           user_id: this.userID
         }, options.params), {}, {
           api_key: this.key,
-          connection_id: (_this$wsConnection4 = this.wsConnection) === null || _this$wsConnection4 === void 0 ? void 0 : _this$wsConnection4.connectionID
+          connection_id: this._getConnectionID()
         }),
-        headers: _objectSpread({
-          Authorization: token,
+        headers: _objectSpread(_objectSpread({}, authorization), {}, {
           'stream-auth-type': this.getAuthType(),
           'X-Stream-Client': this.getUserAgent()
         }, options.headers)
@@ -8422,6 +8939,12 @@ var StreamChat = /*#__PURE__*/function () {
         }
       }, 500);
     }
+    /**
+     * encode ws url payload
+     * @private
+     * @returns json string
+     */
+
   }, {
     key: "verifyWebhook",
     value: function verifyWebhook(requestBody, xSignature) {
@@ -8562,7 +9085,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee48, this);
       }));
 
-      function sendUserCustomEvent(_x67, _x68) {
+      function sendUserCustomEvent(_x66, _x67) {
         return _sendUserCustomEvent.apply(this, arguments);
       }
 
@@ -8650,7 +9173,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee49, this);
       }));
 
-      function createSegment(_x69) {
+      function createSegment(_x68) {
         return _createSegment.apply(this, arguments);
       }
 
@@ -8690,7 +9213,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee50, this);
       }));
 
-      function getSegment(_x70) {
+      function getSegment(_x69) {
         return _getSegment.apply(this, arguments);
       }
 
@@ -8729,7 +9252,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee51, this);
       }));
 
-      function listSegments(_x71) {
+      function listSegments(_x70) {
         return _listSegments.apply(this, arguments);
       }
 
@@ -8772,7 +9295,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee52, this);
       }));
 
-      function updateSegment(_x72, _x73) {
+      function updateSegment(_x71, _x72) {
         return _updateSegment.apply(this, arguments);
       }
 
@@ -8804,7 +9327,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee53, this);
       }));
 
-      function deleteSegment(_x74) {
+      function deleteSegment(_x73) {
         return _deleteSegment.apply(this, arguments);
       }
 
@@ -8846,7 +9369,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee54, this);
       }));
 
-      function createCampaign(_x75) {
+      function createCampaign(_x74) {
         return _createCampaign.apply(this, arguments);
       }
 
@@ -8886,7 +9409,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee55, this);
       }));
 
-      function getCampaign(_x76) {
+      function getCampaign(_x75) {
         return _getCampaign.apply(this, arguments);
       }
 
@@ -8925,7 +9448,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee56, this);
       }));
 
-      function listCampaigns(_x77) {
+      function listCampaigns(_x76) {
         return _listCampaigns.apply(this, arguments);
       }
 
@@ -8968,7 +9491,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee57, this);
       }));
 
-      function updateCampaign(_x78, _x79) {
+      function updateCampaign(_x77, _x78) {
         return _updateCampaign.apply(this, arguments);
       }
 
@@ -9000,7 +9523,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee58, this);
       }));
 
-      function deleteCampaign(_x80) {
+      function deleteCampaign(_x79) {
         return _deleteCampaign.apply(this, arguments);
       }
 
@@ -9044,7 +9567,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee59, this);
       }));
 
-      function scheduleCampaign(_x81, _x82) {
+      function scheduleCampaign(_x80, _x81) {
         return _scheduleCampaign.apply(this, arguments);
       }
 
@@ -9084,7 +9607,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee60, this);
       }));
 
-      function stopCampaign(_x83) {
+      function stopCampaign(_x82) {
         return _stopCampaign.apply(this, arguments);
       }
 
@@ -9124,7 +9647,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee61, this);
       }));
 
-      function resumeCampaign(_x84) {
+      function resumeCampaign(_x83) {
         return _resumeCampaign.apply(this, arguments);
       }
 
@@ -9167,7 +9690,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee62, this);
       }));
 
-      function testCampaign(_x85, _x86) {
+      function testCampaign(_x84, _x85) {
         return _testCampaign.apply(this, arguments);
       }
 
@@ -9200,7 +9723,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee63, this);
       }));
 
-      function enrichURL(_x87) {
+      function enrichURL(_x86) {
         return _enrichURL.apply(this, arguments);
       }
 
@@ -9232,7 +9755,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee64, this);
       }));
 
-      function getTask(_x88) {
+      function getTask(_x87) {
         return _getTask.apply(this, arguments);
       }
 
@@ -9274,15 +9797,12 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee65, this);
       }));
 
-      function deleteChannels(_x89) {
+      function deleteChannels(_x88) {
         return _deleteChannels.apply(this, arguments);
       }
 
       return deleteChannels;
     }()
-  }, {
-    key: "deleteUsers",
-    value:
     /**
      * deleteUsers - Batch Delete Users
      *
@@ -9291,7 +9811,10 @@ var StreamChat = /*#__PURE__*/function () {
      *
      * @return {APIResponse} A task ID
      */
-    function () {
+
+  }, {
+    key: "deleteUsers",
+    value: function () {
       var _deleteUsers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee66(user_ids, options) {
         return _regeneratorRuntime.wrap(function _callee66$(_context66) {
           while (1) {
@@ -9337,7 +9860,7 @@ var StreamChat = /*#__PURE__*/function () {
         }, _callee66, this);
       }));
 
-      function deleteUsers(_x90, _x91) {
+      function deleteUsers(_x89, _x90) {
         return _deleteUsers.apply(this, arguments);
       }
 
@@ -9437,5 +9960,5 @@ var BuiltinPermissions = {
   UseFrozenChannel: 'Send messages and reactions to frozen channels'
 };
 
-export { Allow, AllowAll, AnyResource, AnyRole, BuiltinPermissions, BuiltinRoles, Channel, ChannelState, CheckSignature, ClientState, Deny, DenyAll, DevToken, EVENT_MAP, InsightMetrics, JWTServerToken, JWTUserToken, MaxPriority, MinPriority, Permission, StableWSConnection, StreamChat, TokenManager, UserFromToken, buildWsFatalInsight, buildWsSuccessAfterFailureInsight, chatCodes, decodeBase64, encodeBase64, isOwnUser, isValidEventType, logChatPromiseExecution };
+export { Allow, AllowAll, AnyResource, AnyRole, BuiltinPermissions, BuiltinRoles, Channel, ChannelState, CheckSignature, ClientState, Deny, DenyAll, DevToken, EVENT_MAP, InsightMetrics, JWTServerToken, JWTUserToken, MaxPriority, MinPriority, Permission, StableWSConnection, StreamChat, TokenManager, UserFromToken, buildWsFatalInsight, buildWsSuccessAfterFailureInsight, chatCodes, decodeBase64, encodeBase64, isOwnUser, isValidEventType, logChatPromiseExecution, postInsights };
 //# sourceMappingURL=index.es.js.map