stream-chat 8.39.0 → 8.40.0

package/dist/browser.es.js

@@ -93,9 +93,9 @@ var decodeBase64 = function decodeBase64(s) {
 
 var https = null;
 
-function ownKeys$9(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$b(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _createForOfIteratorHelper$4(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$4(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 = it.call(o); }, 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; } } }; }
 
@@ -349,89 +349,120 @@ var axiosParamsSerializer = function axiosParamsSerializer(params) {
   return newParams.join('&');
 };
 /**
- * formatMessage - Takes the message object. Parses the dates, sets __html
- * and sets the status to received if missing. Returns a message object
- *
- * @param {MessageResponse<StreamChatGenerics>} message a message object
+ * Takes the message object, parses the dates, sets `__html`
+ * and sets the status to `received` if missing; returns a new message object.
  *
+ * @param {MessageResponse<StreamChatGenerics>} message `MessageResponse` object
  */
 
 function formatMessage(message) {
-  return _objectSpread$9(_objectSpread$9({}, message), {}, {
+  return _objectSpread$b(_objectSpread$b({}, message), {}, {
     /**
      * @deprecated please use `html`
      */
     __html: message.html,
-    // parse the date..
+    // parse the dates
     pinned_at: message.pinned_at ? new Date(message.pinned_at) : null,
     created_at: message.created_at ? new Date(message.created_at) : new Date(),
     updated_at: message.updated_at ? new Date(message.updated_at) : new Date(),
+    deleted_at: message.deleted_at ? new Date(message.deleted_at) : null,
     status: message.status || 'received',
     reaction_groups: maybeGetReactionGroupsFallback(message.reaction_groups, message.reaction_counts, message.reaction_scores)
   });
 }
-function addToMessageList(messages, message) {
+var findIndexInSortedArray = function findIndexInSortedArray(_ref) {
+  var needle = _ref.needle,
+      sortedArray = _ref.sortedArray,
+      _ref$selectValueToCom = _ref.selectValueToCompare,
+      selectValueToCompare = _ref$selectValueToCom === void 0 ? function (e) {
+    return e;
+  } : _ref$selectValueToCom,
+      _ref$sortDirection = _ref.sortDirection,
+      sortDirection = _ref$sortDirection === void 0 ? 'ascending' : _ref$sortDirection;
+  if (!sortedArray.length) return 0;
+  var left = 0;
+  var right = sortedArray.length - 1;
+  var middle = 0;
+
+  var recalculateMiddle = function recalculateMiddle() {
+    middle = Math.round((left + right) / 2);
+  };
+
+  var actualNeedle = selectValueToCompare(needle);
+  recalculateMiddle();
+
+  while (left <= right) {
+    // if (actualNeedle === selectValueToCompare(sortedArray[middle])) return middle;
+    if (sortDirection === 'ascending' && actualNeedle < selectValueToCompare(sortedArray[middle]) || sortDirection === 'descending' && actualNeedle > selectValueToCompare(sortedArray[middle])) {
+      right = middle - 1;
+    } else {
+      left = middle + 1;
+    }
+
+    recalculateMiddle();
+  }
+
+  return left;
+};
+function addToMessageList(messages, newMessage) {
   var timestampChanged = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var sortBy = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'created_at';
   var addIfDoesNotExist = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
   var addMessageToList = addIfDoesNotExist || timestampChanged;
-  var messageArr = messages; // if created_at has changed, message should be filtered and re-inserted in correct order
+
+  var newMessages = _toConsumableArray(messages); // if created_at has changed, message should be filtered and re-inserted in correct order
   // slow op but usually this only happens for a message inserted to state before actual response with correct timestamp
 
+
   if (timestampChanged) {
-    messageArr = messageArr.filter(function (msg) {
-      return !(msg.id && message.id === msg.id);
+    newMessages = newMessages.filter(function (message) {
+      return !(message.id && newMessage.id === message.id);
     });
-  } // Get array length after filtering
+  } // for empty list just concat and return unless it's an update or deletion
 
 
-  var messageArrayLength = messageArr.length; // for empty list just concat and return unless it's an update or deletion
+  if (!newMessages.length && addMessageToList) {
+    return newMessages.concat(newMessage);
+  } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
-  if (messageArrayLength === 0 && addMessageToList) {
-    return messageArr.concat(message);
-  } else if (messageArrayLength === 0) {
-    return _toConsumableArray(messageArr);
-  }
 
-  var messageTime = message[sortBy].getTime();
-  var messageIsNewest = messageArr[messageArrayLength - 1][sortBy].getTime() < messageTime; // if message is newer than last item in the list concat and return unless it's an update or deletion
+  var messageTime = newMessage[sortBy].getTime(); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+  var messageIsNewest = newMessages.at(-1)[sortBy].getTime() < messageTime; // if message is newer than last item in the list concat and return unless it's an update or deletion
 
   if (messageIsNewest && addMessageToList) {
-    return messageArr.concat(message);
-  } else if (messageIsNewest) {
-    return _toConsumableArray(messageArr);
+    return newMessages.concat(newMessage);
   } // find the closest index to push the new message
 
 
-  var left = 0;
-  var middle = 0;
-  var right = messageArrayLength - 1;
-
-  while (left <= right) {
-    middle = Math.floor((right + left) / 2);
-    if (messageArr[middle][sortBy].getTime() <= messageTime) left = middle + 1;else right = middle - 1;
-  } // message already exists and not filtered due to timestampChanged, update and return
-
+  var insertionIndex = findIndexInSortedArray({
+    needle: newMessage,
+    sortedArray: messages,
+    sortDirection: 'ascending',
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    selectValueToCompare: function selectValueToCompare(m) {
+      return m[sortBy].getTime();
+    }
+  }); // message already exists and not filtered with timestampChanged, update and return
 
-  if (!timestampChanged && message.id) {
-    if (messageArr[left] && message.id === messageArr[left].id) {
-      messageArr[left] = message;
-      return _toConsumableArray(messageArr);
+  if (!timestampChanged && newMessage.id) {
+    if (newMessages[insertionIndex] && newMessage.id === newMessages[insertionIndex].id) {
+      newMessages[insertionIndex] = newMessage;
+      return newMessages;
     }
 
-    if (messageArr[left - 1] && message.id === messageArr[left - 1].id) {
-      messageArr[left - 1] = message;
-      return _toConsumableArray(messageArr);
+    if (newMessages[insertionIndex - 1] && newMessage.id === newMessages[insertionIndex - 1].id) {
+      newMessages[insertionIndex - 1] = newMessage;
+      return newMessages;
     }
-  } // Do not add updated or deleted messages to the list if they do not already exist
-  // or have a timestamp change.
+  } // do not add updated or deleted messages to the list if they already exist or come with a timestamp change
 
 
   if (addMessageToList) {
-    messageArr.splice(left, 0, message);
+    newMessages.splice(insertionIndex, 0, newMessage);
   }
 
-  return _toConsumableArray(messageArr);
+  return newMessages;
 }
 
 function maybeGetReactionGroupsFallback(groups, counts, scores) {
@@ -454,8 +485,46 @@ function maybeGetReactionGroupsFallback(groups, counts, scores) {
   }
 
   return null;
-}
+} // works exactly the same as lodash.throttle
+
+
+var throttle = function throttle(fn) {
+  var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
+
+  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      _ref2$leading = _ref2.leading,
+      leading = _ref2$leading === void 0 ? true : _ref2$leading,
+      _ref2$trailing = _ref2.trailing,
+      trailing = _ref2$trailing === void 0 ? false : _ref2$trailing;
+
+  var runningTimeout = null;
+  var storedArgs = null;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (runningTimeout) {
+      if (trailing) storedArgs = args;
+      return;
+    }
+
+    if (leading) fn.apply(void 0, args);
+
+    var timeoutHandler = function timeoutHandler() {
+      if (storedArgs) {
+        fn.apply(void 0, _toConsumableArray(storedArgs));
+        storedArgs = null;
+        runningTimeout = setTimeout(timeoutHandler, timeout);
+        return;
+      }
+
+      runningTimeout = null;
+    };
 
+    runningTimeout = setTimeout(timeoutHandler, timeout);
+  };
+};
 function binarySearchByDateEqualOrNearestGreater(array, targetDate) {
   var left = 0;
   var right = array.length - 1;
@@ -483,13 +552,13 @@ function binarySearchByDateEqualOrNearestGreater(array, targetDate) {
   return left;
 }
 
-var messagePaginationCreatedAtAround = function messagePaginationCreatedAtAround(_ref) {
-  var parentSet = _ref.parentSet,
-      requestedPageSize = _ref.requestedPageSize,
-      returnedPage = _ref.returnedPage,
-      messagePaginationOptions = _ref.messagePaginationOptions;
+var messagePaginationCreatedAtAround = function messagePaginationCreatedAtAround(_ref3) {
+  var parentSet = _ref3.parentSet,
+      requestedPageSize = _ref3.requestedPageSize,
+      returnedPage = _ref3.returnedPage,
+      messagePaginationOptions = _ref3.messagePaginationOptions;
 
-  var newPagination = _objectSpread$9({}, parentSet.pagination);
+  var newPagination = _objectSpread$b({}, parentSet.pagination);
 
   if (!(messagePaginationOptions !== null && messagePaginationOptions !== void 0 && messagePaginationOptions.created_at_around)) return newPagination;
   var hasPrev;
@@ -497,9 +566,9 @@ var messagePaginationCreatedAtAround = function messagePaginationCreatedAtAround
   var updateHasPrev;
   var updateHasNext;
   var createdAtAroundDate = new Date(messagePaginationOptions.created_at_around);
-  var _ref2 = [returnedPage[0], returnedPage.slice(-1)[0]],
-      firstPageMsg = _ref2[0],
-      lastPageMsg = _ref2[1]; // expect ASC order (from oldest to newest)
+  var _ref4 = [returnedPage[0], returnedPage.slice(-1)[0]],
+      firstPageMsg = _ref4[0],
+      lastPageMsg = _ref4[1]; // expect ASC order (from oldest to newest)
 
   var wholePageHasNewerMessages = !!(firstPageMsg !== null && firstPageMsg !== void 0 && firstPageMsg.created_at) && new Date(firstPageMsg.created_at) > createdAtAroundDate;
   var wholePageHasOlderMessages = !!(lastPageMsg !== null && lastPageMsg !== void 0 && lastPageMsg.created_at) && new Date(lastPageMsg.created_at) < createdAtAroundDate;
@@ -546,25 +615,25 @@ var messagePaginationCreatedAtAround = function messagePaginationCreatedAtAround
   return newPagination;
 };
 
-var messagePaginationIdAround = function messagePaginationIdAround(_ref3) {
+var messagePaginationIdAround = function messagePaginationIdAround(_ref5) {
   var _parentSet$messages$2, _parentSet$messages$s2;
 
-  var parentSet = _ref3.parentSet,
-      requestedPageSize = _ref3.requestedPageSize,
-      returnedPage = _ref3.returnedPage,
-      messagePaginationOptions = _ref3.messagePaginationOptions;
+  var parentSet = _ref5.parentSet,
+      requestedPageSize = _ref5.requestedPageSize,
+      returnedPage = _ref5.returnedPage,
+      messagePaginationOptions = _ref5.messagePaginationOptions;
 
-  var newPagination = _objectSpread$9({}, parentSet.pagination);
+  var newPagination = _objectSpread$b({}, parentSet.pagination);
 
-  var _ref4 = messagePaginationOptions || {},
-      id_around = _ref4.id_around;
+  var _ref6 = messagePaginationOptions || {},
+      id_around = _ref6.id_around;
 
   if (!id_around) return newPagination;
   var hasPrev;
   var hasNext;
-  var _ref5 = [returnedPage[0], returnedPage.slice(-1)[0]],
-      firstPageMsg = _ref5[0],
-      lastPageMsg = _ref5[1];
+  var _ref7 = [returnedPage[0], returnedPage.slice(-1)[0]],
+      firstPageMsg = _ref7[0],
+      lastPageMsg = _ref7[1];
   var firstPageMsgIsFirstInSet = (firstPageMsg === null || firstPageMsg === void 0 ? void 0 : firstPageMsg.id) === ((_parentSet$messages$2 = parentSet.messages[0]) === null || _parentSet$messages$2 === void 0 ? void 0 : _parentSet$messages$2.id),
       lastPageMsgIsLastInSet = (lastPageMsg === null || lastPageMsg === void 0 ? void 0 : lastPageMsg.id) === ((_parentSet$messages$s2 = parentSet.messages.slice(-1)[0]) === null || _parentSet$messages$s2 === void 0 ? void 0 : _parentSet$messages$s2.id);
   var updateHasPrev = firstPageMsgIsFirstInSet;
@@ -604,21 +673,21 @@ var messagePaginationIdAround = function messagePaginationIdAround(_ref3) {
   return newPagination;
 };
 
-var messagePaginationLinear = function messagePaginationLinear(_ref6) {
+var messagePaginationLinear = function messagePaginationLinear(_ref8) {
   var _parentSet$messages$3, _parentSet$messages$s3;
 
-  var parentSet = _ref6.parentSet,
-      requestedPageSize = _ref6.requestedPageSize,
-      returnedPage = _ref6.returnedPage,
-      messagePaginationOptions = _ref6.messagePaginationOptions;
+  var parentSet = _ref8.parentSet,
+      requestedPageSize = _ref8.requestedPageSize,
+      returnedPage = _ref8.returnedPage,
+      messagePaginationOptions = _ref8.messagePaginationOptions;
 
-  var newPagination = _objectSpread$9({}, parentSet.pagination);
+  var newPagination = _objectSpread$b({}, parentSet.pagination);
 
   var hasPrev;
   var hasNext;
-  var _ref7 = [returnedPage[0], returnedPage.slice(-1)[0]],
-      firstPageMsg = _ref7[0],
-      lastPageMsg = _ref7[1];
+  var _ref9 = [returnedPage[0], returnedPage.slice(-1)[0]],
+      firstPageMsg = _ref9[0],
+      lastPageMsg = _ref9[1];
   var firstPageMsgIsFirstInSet = (firstPageMsg === null || firstPageMsg === void 0 ? void 0 : firstPageMsg.id) && firstPageMsg.id === ((_parentSet$messages$3 = parentSet.messages[0]) === null || _parentSet$messages$3 === void 0 ? void 0 : _parentSet$messages$3.id),
       lastPageMsgIsLastInSet = (lastPageMsg === null || lastPageMsg === void 0 ? void 0 : lastPageMsg.id) && lastPageMsg.id === ((_parentSet$messages$s3 = parentSet.messages.slice(-1)[0]) === null || _parentSet$messages$s3 === void 0 ? void 0 : _parentSet$messages$s3.id);
   var queriedNextMessages = messagePaginationOptions && (messagePaginationOptions.created_at_after_or_equal || messagePaginationOptions.created_at_after || messagePaginationOptions.id_gt || messagePaginationOptions.id_gte);
@@ -666,9 +735,9 @@ var DEFAULT_MESSAGE_SET_PAGINATION = {
   hasPrev: true
 };
 
-function ownKeys$8(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$a(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
  * ChannelState - A container class for the channel state.
@@ -723,6 +792,10 @@ var ChannelState = /*#__PURE__*/function () {
 
     _defineProperty(this, "messageSets", []);
 
+    _defineProperty(this, "formatMessage", function (message) {
+      return formatMessage(message);
+    });
+
     _defineProperty(this, "setIsUpToDate", function (isUpToDate) {
       _this.isUpToDate = isUpToDate;
     });
@@ -745,7 +818,7 @@ var ChannelState = /*#__PURE__*/function () {
       if (!message) return;
       if (message.poll_id !== pollVote.poll_id) return;
 
-      var updatedPoll = _objectSpread$8({}, poll);
+      var updatedPoll = _objectSpread$a({}, poll);
 
       var ownVotes = _toConsumableArray(((_message$poll = message.poll) === null || _message$poll === void 0 ? void 0 : _message$poll.own_votes) || []);
 
@@ -767,7 +840,7 @@ var ChannelState = /*#__PURE__*/function () {
 
       updatedPoll.own_votes = ownVotes;
 
-      var newMessage = _objectSpread$8(_objectSpread$8({}, message), {}, {
+      var newMessage = _objectSpread$a(_objectSpread$a({}, message), {}, {
         poll: updatedPoll
       });
 
@@ -782,7 +855,7 @@ var ChannelState = /*#__PURE__*/function () {
       if (!message) return;
       if (message.poll_id !== pollVote.poll_id) return;
 
-      var updatedPoll = _objectSpread$8({}, poll);
+      var updatedPoll = _objectSpread$a({}, poll);
 
       var ownVotes = _toConsumableArray(((_message$poll2 = message.poll) === null || _message$poll2 === void 0 ? void 0 : _message$poll2.own_votes) || []);
 
@@ -792,7 +865,7 @@ var ChannelState = /*#__PURE__*/function () {
 
       updatedPoll.own_votes = ownVotes;
 
-      var newMessage = _objectSpread$8(_objectSpread$8({}, message), {}, {
+      var newMessage = _objectSpread$a(_objectSpread$a({}, message), {}, {
         poll: updatedPoll
       });
 
@@ -807,7 +880,7 @@ var ChannelState = /*#__PURE__*/function () {
       if (!message) return;
       if (message.poll_id !== pollVote.poll_id) return;
 
-      var updatedPoll = _objectSpread$8({}, poll);
+      var updatedPoll = _objectSpread$a({}, poll);
 
       var ownVotes = _toConsumableArray(((_message$poll3 = message.poll) === null || _message$poll3 === void 0 ? void 0 : _message$poll3.own_votes) || []);
 
@@ -823,7 +896,7 @@ var ChannelState = /*#__PURE__*/function () {
 
       updatedPoll.own_votes = ownVotes;
 
-      var newMessage = _objectSpread$8(_objectSpread$8({}, message), {}, {
+      var newMessage = _objectSpread$a(_objectSpread$a({}, message), {}, {
         poll: updatedPoll
       });
 
@@ -837,11 +910,11 @@ var ChannelState = /*#__PURE__*/function () {
 
       if (!message) return;
 
-      var updatedPoll = _objectSpread$8(_objectSpread$8({}, poll), {}, {
+      var updatedPoll = _objectSpread$a(_objectSpread$a({}, poll), {}, {
         own_votes: _toConsumableArray(((_message$poll4 = message.poll) === null || _message$poll4 === void 0 ? void 0 : _message$poll4.own_votes) || [])
       });
 
-      var newMessage = _objectSpread$8(_objectSpread$8({}, message), {}, {
+      var newMessage = _objectSpread$a(_objectSpread$a({}, message), {}, {
         poll: updatedPoll
       });
 
@@ -856,7 +929,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$8(_objectSpread$8({}, m), {}, {
+            messages[i] = _objectSpread$a(_objectSpread$a({}, m), {}, {
               user: user
             });
           }
@@ -911,9 +984,9 @@ var ChannelState = /*#__PURE__*/function () {
               user: m.user
             };
           } else {
-            messages[i] = _objectSpread$8(_objectSpread$8({}, m), {}, {
+            messages[i] = _objectSpread$a(_objectSpread$a({}, m), {}, {
               type: 'deleted',
-              deleted_at: user.deleted_at
+              deleted_at: user.deleted_at ? new Date(user.deleted_at) : null
             });
           }
         }
@@ -1017,28 +1090,15 @@ var ChannelState = /*#__PURE__*/function () {
       return this.addMessagesSorted([newMessage], timestampChanged, false, addIfDoesNotExist, messageSetToAddToIfDoesNotExist);
     }
     /**
-     * formatMessage - Takes the message object. Parses the dates, sets __html
-     * and sets the status to received if missing. Returns a message object
-     *
-     * @param {MessageResponse<StreamChatGenerics>} message a message object
+     * Takes the message object, parses the dates, sets `__html`
+     * and sets the status to `received` if missing; returns a new message object.
      *
+     * @param {MessageResponse<StreamChatGenerics>} message `MessageResponse` object
      */
 
   }, {
-    key: "formatMessage",
-    value: function formatMessage(message) {
-      return _objectSpread$8(_objectSpread$8({}, message), {}, {
-        /**
-         * @deprecated please use `html`
-         */
-        __html: message.html,
-        // parse the date..
-        pinned_at: message.pinned_at ? new Date(message.pinned_at) : null,
-        created_at: message.created_at ? new Date(message.created_at) : new Date(),
-        updated_at: message.updated_at ? new Date(message.updated_at) : new Date(),
-        status: message.status || 'received'
-      });
-    }
+    key: "addMessagesSorted",
+    value:
     /**
      * addMessagesSorted - Add the list of messages to state and resorts the messages
      *
@@ -1049,10 +1109,7 @@ var ChannelState = /*#__PURE__*/function () {
      * @param {MessageSetType} messageSetToAddToIfDoesNotExist Which message set to add to if messages are not in the list (only used if addIfDoesNotExist is true)
      *
      */
-
-  }, {
-    key: "addMessagesSorted",
-    value: function addMessagesSorted(newMessages) {
+    function addMessagesSorted(newMessages) {
       var timestampChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var initializing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var addIfDoesNotExist = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
@@ -1245,7 +1302,7 @@ var ChannelState = /*#__PURE__*/function () {
       var parseMessage = function parseMessage(m) {
         var _m$pinned_at, _m$updated_at;
 
-        return _objectSpread$8(_objectSpread$8({}, m), {}, {
+        return _objectSpread$a(_objectSpread$a({}, m), {}, {
           created_at: m.created_at.toISOString(),
           pinned_at: (_m$pinned_at = m.pinned_at) === null || _m$pinned_at === void 0 ? void 0 : _m$pinned_at.toISOString(),
           updated_at: (_m$updated_at = m.updated_at) === null || _m$updated_at === void 0 ? void 0 : _m$updated_at.toISOString()
@@ -1255,8 +1312,8 @@ var ChannelState = /*#__PURE__*/function () {
       var update = function update(messages) {
         var updatedMessages = messages.reduce(function (acc, msg) {
           if (msg.quoted_message_id === message.id) {
-            acc.push(_objectSpread$8(_objectSpread$8({}, parseMessage(msg)), {}, {
-              quoted_message: remove ? _objectSpread$8(_objectSpread$8({}, message), {}, {
+            acc.push(_objectSpread$a(_objectSpread$a({}, parseMessage(msg)), {}, {
+              quoted_message: remove ? _objectSpread$a(_objectSpread$a({}, message), {}, {
                 attachments: []
               }) : message
             }));
@@ -1745,9 +1802,9 @@ function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o
 
 function _arrayLikeToArray$3(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$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 ownKeys$9(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$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; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * Channel - The Channel class manages it's own state.
  */
@@ -1820,7 +1877,7 @@ var Channel = /*#__PURE__*/function () {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                defaultOptions = _objectSpread$7(_objectSpread$7({}, options), {}, {
+                defaultOptions = _objectSpread$9(_objectSpread$9({}, options), {}, {
                   watch: false,
                   state: false,
                   presence: false
@@ -1892,7 +1949,7 @@ var Channel = /*#__PURE__*/function () {
 
     this.data = data; // this._data is used for the requests...
 
-    this._data = _objectSpread$7({}, data);
+    this._data = _objectSpread$9({}, data);
     this.cid = "".concat(type, ":").concat(id);
     this.listeners = {}; // perhaps the state variable should be private
 
@@ -1954,7 +2011,7 @@ var Channel = /*#__PURE__*/function () {
             switch (_context2.prev = _context2.next) {
               case 0:
                 _context2.next = 2;
-                return this.getClient().post(this._channelURL() + '/message', _objectSpread$7({
+                return this.getClient().post(this._channelURL() + '/message', _objectSpread$9({
                   message: message
                 }, options));
 
@@ -2070,7 +2127,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 3:
                 // Return a list of channels
-                payload = _objectSpread$7(_objectSpread$7({
+                payload = _objectSpread$9(_objectSpread$9({
                   filter_conditions: {
                     cid: this.cid
                   }
@@ -2167,7 +2224,7 @@ var Channel = /*#__PURE__*/function () {
 
                 _context5.next = 6;
                 return this.getClient().get(this.getClient().baseURL + '/members', {
-                  payload: _objectSpread$7({
+                  payload: _objectSpread$9({
                     type: type,
                     id: id,
                     members: members,
@@ -2228,7 +2285,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 4:
                 _context6.next = 6;
-                return this.getClient().post(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(messageID), "/reaction"), _objectSpread$7({
+                return this.getClient().post(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(messageID), "/reaction"), _objectSpread$9({
                   reaction: reaction
                 }, options));
 
@@ -2309,7 +2366,7 @@ var Channel = /*#__PURE__*/function () {
                   delete channelData[key];
                 });
                 _context7.next = 7;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   message: updateMessage,
                   data: channelData
                 }, options));
@@ -2481,7 +2538,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args11.length > 0 && _args11[0] !== undefined ? _args11[0] : {};
                 _context11.next = 3;
-                return this.getClient().delete(this._channelURL(), _objectSpread$7({}, options));
+                return this.getClient().delete(this._channelURL(), _objectSpread$9({}, options));
 
               case 3:
                 return _context11.abrupt("return", _context11.sent);
@@ -2557,7 +2614,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args13.length > 0 && _args13[0] !== undefined ? _args13[0] : {};
                 _context13.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   accept_invite: true
                 }, options));
 
@@ -2598,7 +2655,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args14.length > 0 && _args14[0] !== undefined ? _args14[0] : {};
                 _context14.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   reject_invite: true
                 }, options));
 
@@ -2640,7 +2697,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args15.length > 2 && _args15[2] !== undefined ? _args15[2] : {};
                 _context15.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   add_members: members,
                   message: message
                 }, options));
@@ -2683,7 +2740,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args16.length > 2 && _args16[2] !== undefined ? _args16[2] : {};
                 _context16.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   add_moderators: members,
                   message: message
                 }, options));
@@ -2726,7 +2783,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args17.length > 2 && _args17[2] !== undefined ? _args17[2] : {};
                 _context17.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   assign_roles: roles,
                   message: message
                 }, options));
@@ -2769,7 +2826,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args18.length > 2 && _args18[2] !== undefined ? _args18[2] : {};
                 _context18.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   invites: members,
                   message: message
                 }, options));
@@ -2812,7 +2869,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args19.length > 2 && _args19[2] !== undefined ? _args19[2] : {};
                 _context19.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   remove_members: members,
                   message: message
                 }, options));
@@ -2855,7 +2912,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 options = _args20.length > 2 && _args20[2] !== undefined ? _args20[2] : {};
                 _context20.next = 3;
-                return this._update(_objectSpread$7({
+                return this._update(_objectSpread$9({
                   demote_moderators: members,
                   message: message
                 }, options));
@@ -2940,7 +2997,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$7({
+                return this.getClient().post(this.getClient().baseURL + '/moderation/mute/channel', _objectSpread$9({
                   channel_cid: this.cid
                 }, opts));
 
@@ -2982,7 +3039,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$7({
+                return this.getClient().post(this.getClient().baseURL + '/moderation/unmute/channel', _objectSpread$9({
                   channel_cid: this.cid
                 }, opts));
 
@@ -3067,7 +3124,7 @@ var Channel = /*#__PURE__*/function () {
 
                 this.lastTypingEvent = new Date();
                 _context24.next = 10;
-                return this.sendEvent(_objectSpread$7({
+                return this.sendEvent(_objectSpread$9({
                   type: 'typing.start',
                   parent_id: parent_id
                 }, options || {}));
@@ -3111,7 +3168,7 @@ var Channel = /*#__PURE__*/function () {
                 this.lastTypingEvent = null;
                 this.isTyping = false;
                 _context25.next = 6;
-                return this.sendEvent(_objectSpread$7({
+                return this.sendEvent(_objectSpread$9({
                   type: 'typing.stop',
                   parent_id: parent_id
                 }, options || {}));
@@ -3198,7 +3255,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 4:
                 _context26.next = 6;
-                return this.getClient().post(this._channelURL() + '/read', _objectSpread$7({}, data));
+                return this.getClient().post(this._channelURL() + '/read', _objectSpread$9({}, data));
 
               case 6:
                 return _context26.abrupt("return", _context26.sent);
@@ -3245,7 +3302,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 3:
                 _context27.next = 5;
-                return this.getClient().post(this._channelURL() + '/unread', _objectSpread$7({}, data));
+                return this.getClient().post(this._channelURL() + '/unread', _objectSpread$9({}, data));
 
               case 5:
                 return _context27.abrupt("return", _context27.sent);
@@ -3313,7 +3370,7 @@ var Channel = /*#__PURE__*/function () {
                   defaultOptions.watch = false;
                 }
 
-                combined = _objectSpread$7(_objectSpread$7({}, defaultOptions), options);
+                combined = _objectSpread$9(_objectSpread$9({}, defaultOptions), options);
                 _context28.next = 7;
                 return this.query(combined, 'latest');
 
@@ -3386,7 +3443,9 @@ var Channel = /*#__PURE__*/function () {
       return stopWatching;
     }()
     /**
-     * getReplies - List the message replies for a parent message
+     * getReplies - List the message replies for a parent message.
+     *
+     * The recommended way of working with threads is to use the Thread class.
      *
      * @param {string} parent_id The message parent id, ie the top of the thread
      * @param {MessagePaginationOptions & { user?: UserResponse<StreamChatGenerics>; user_id?: string }} options Pagination params, ie {limit:10, id_lte: 10}
@@ -3405,7 +3464,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 normalizedSort = sort ? normalizeQuerySort(sort) : undefined;
                 _context30.next = 3;
-                return this.getClient().get(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(parent_id), "/replies"), _objectSpread$7({
+                return this.getClient().get(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(parent_id), "/replies"), _objectSpread$9({
                   sort: normalizedSort
                 }, options));
 
@@ -3455,7 +3514,7 @@ var Channel = /*#__PURE__*/function () {
                 sort = _args31.length > 1 && _args31[1] !== undefined ? _args31[1] : [];
                 _context31.next = 3;
                 return this.getClient().get(this._channelURL() + '/pinned_messages', {
-                  payload: _objectSpread$7(_objectSpread$7({}, options), {}, {
+                  payload: _objectSpread$9(_objectSpread$9({}, options), {}, {
                     sort: normalizeQuerySort(sort)
                   })
                 });
@@ -3489,7 +3548,7 @@ var Channel = /*#__PURE__*/function () {
   }, {
     key: "getReactions",
     value: function getReactions(message_id, options) {
-      return this.getClient().get(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(message_id), "/reactions"), _objectSpread$7({}, options));
+      return this.getClient().get(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(message_id), "/reactions"), _objectSpread$9({}, options));
     }
     /**
      * getMessagesById - Retrieves a list of messages by ID
@@ -3637,7 +3696,7 @@ var Channel = /*#__PURE__*/function () {
                 }
 
                 _context32.next = 7;
-                return this.getClient().post(queryURL + '/query', _objectSpread$7({
+                return this.getClient().post(queryURL + '/query', _objectSpread$9({
                   data: this._data,
                   state: true
                 }, options));
@@ -3672,7 +3731,7 @@ var Channel = /*#__PURE__*/function () {
 
 
                 _this$_initializeStat = this._initializeState(state, messageSetToAddToIfDoesNotExist), messageSet = _this$_initializeStat.messageSet;
-                messageSet.pagination = _objectSpread$7(_objectSpread$7({}, messageSet.pagination), messageSetPagination({
+                messageSet.pagination = _objectSpread$9(_objectSpread$9({}, messageSet.pagination), messageSetPagination({
                   parentSet: messageSet,
                   messagePaginationOptions: options === null || options === void 0 ? void 0 : options.messages,
                   requestedPageSize: (_options$messages$lim = options === null || options === void 0 ? void 0 : (_options$messages = options.messages) === null || _options$messages === void 0 ? void 0 : _options$messages.limit) !== null && _options$messages$lim !== void 0 ? _options$messages$lim : DEFAULT_QUERY_CHANNEL_MESSAGE_LIST_PAGE_SIZE,
@@ -3733,7 +3792,7 @@ var Channel = /*#__PURE__*/function () {
                 this._checkInitialized();
 
                 _context33.next = 3;
-                return this.getClient().banUser(targetUserID, _objectSpread$7(_objectSpread$7({}, options), {}, {
+                return this.getClient().banUser(targetUserID, _objectSpread$9(_objectSpread$9({}, options), {}, {
                   type: this.type,
                   id: this.id
                 }));
@@ -3905,7 +3964,7 @@ var Channel = /*#__PURE__*/function () {
                 this._checkInitialized();
 
                 _context37.next = 3;
-                return this.getClient().shadowBan(targetUserID, _objectSpread$7(_objectSpread$7({}, options), {}, {
+                return this.getClient().shadowBan(targetUserID, _objectSpread$9(_objectSpread$9({}, options), {}, {
                   type: this.type,
                   id: this.id
                 }));
@@ -4359,7 +4418,7 @@ var Channel = /*#__PURE__*/function () {
               });
             }
 
-            channel.data = _objectSpread$7(_objectSpread$7({}, event.channel), {}, {
+            channel.data = _objectSpread$9(_objectSpread$9({}, event.channel), {}, {
               hidden: (_event$channel$hidden = (_event$channel3 = event.channel) === null || _event$channel3 === void 0 ? void 0 : _event$channel3.hidden) !== null && _event$channel$hidden !== void 0 ? _event$channel$hidden : (_channel$data2 = channel.data) === null || _channel$data2 === void 0 ? void 0 : _channel$data2.hidden,
               own_capabilities: (_event$channel$own_ca = (_event$channel4 = event.channel) === null || _event$channel4 === void 0 ? void 0 : _event$channel4.own_capabilities) !== null && _event$channel$own_ca !== void 0 ? _event$channel$own_ca : (_channel$data3 = channel.data) === null || _channel$data3 === void 0 ? void 0 : _channel$data3.own_capabilities
             });
@@ -4433,7 +4492,7 @@ var Channel = /*#__PURE__*/function () {
           break;
 
         case 'channel.hidden':
-          channel.data = _objectSpread$7(_objectSpread$7({}, channel.data), {}, {
+          channel.data = _objectSpread$9(_objectSpread$9({}, channel.data), {}, {
             hidden: true
           });
 
@@ -4444,26 +4503,26 @@ var Channel = /*#__PURE__*/function () {
           break;
 
         case 'channel.visible':
-          channel.data = _objectSpread$7(_objectSpread$7({}, channel.data), {}, {
+          channel.data = _objectSpread$9(_objectSpread$9({}, channel.data), {}, {
             hidden: false
           });
           break;
 
         case 'user.banned':
           if (!((_event$user11 = event.user) !== null && _event$user11 !== void 0 && _event$user11.id)) break;
-          channelState.members[event.user.id] = _objectSpread$7(_objectSpread$7({}, channelState.members[event.user.id] || {}), {}, {
+          channelState.members[event.user.id] = _objectSpread$9(_objectSpread$9({}, channelState.members[event.user.id] || {}), {}, {
             shadow_banned: !!event.shadow,
             banned: !event.shadow,
-            user: _objectSpread$7(_objectSpread$7({}, ((_channelState$members = channelState.members[event.user.id]) === null || _channelState$members === void 0 ? void 0 : _channelState$members.user) || {}), event.user)
+            user: _objectSpread$9(_objectSpread$9({}, ((_channelState$members = channelState.members[event.user.id]) === null || _channelState$members === void 0 ? void 0 : _channelState$members.user) || {}), event.user)
           });
           break;
 
         case 'user.unbanned':
           if (!((_event$user12 = event.user) !== null && _event$user12 !== void 0 && _event$user12.id)) break;
-          channelState.members[event.user.id] = _objectSpread$7(_objectSpread$7({}, channelState.members[event.user.id] || {}), {}, {
+          channelState.members[event.user.id] = _objectSpread$9(_objectSpread$9({}, channelState.members[event.user.id] || {}), {}, {
             shadow_banned: false,
             banned: false,
-            user: _objectSpread$7(_objectSpread$7({}, ((_channelState$members2 = channelState.members[event.user.id]) === null || _channelState$members2 === void 0 ? void 0 : _channelState$members2.user) || {}), event.user)
+            user: _objectSpread$9(_objectSpread$9({}, ((_channelState$members2 = channelState.members[event.user.id]) === null || _channelState$members2 === void 0 ? void 0 : _channelState$members2.user) || {}), event.user)
           });
           break;
       } // any event can send over the online count
@@ -4717,9 +4776,9 @@ var ClientState = /*#__PURE__*/function () {
   return ClientState;
 }();
 
-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 ownKeys$8(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$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; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var InsightMetrics = function InsightMetrics() {
   _classCallCheck(this, InsightMetrics);
 
@@ -4798,7 +4857,7 @@ var postInsights = /*#__PURE__*/function () {
   };
 }();
 function buildWsFatalInsight(connection, event) {
-  return _objectSpread$6(_objectSpread$6({}, event), buildWsBaseInsight(connection));
+  return _objectSpread$8(_objectSpread$8({}, event), buildWsBaseInsight(connection));
 }
 
 function buildWsBaseInsight(connection) {
@@ -4831,9 +4890,9 @@ function buildWsSuccessAfterFailureInsight(connection) {
   return buildWsBaseInsight(connection);
 }
 
-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; }
 
 // Type guards to check WebSocket error type
 var isCloseEvent = function isCloseEvent(res) {
@@ -5197,7 +5256,7 @@ var StableWSConnection = /*#__PURE__*/function () {
     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$5({
+      this.client.logger(level, 'connection:' + msg, _objectSpread$7({
         tags: ['connection']
       }, extra));
     }
@@ -5792,9 +5851,9 @@ var jwt = null;
 
 var crypto$1 = null;
 
-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; }
 
 /**
  * Creates the JWT token that can be used for a UserSession
@@ -5815,7 +5874,7 @@ function JWTUserToken(apiSecret, userId) {
     throw new TypeError('userId should be a string');
   }
 
-  var payload = _objectSpread$4({
+  var payload = _objectSpread$6({
     user_id: userId
   }, extraData); // make sure we return a clear error when jwt is shimmed (ie. browser build)
 
@@ -6219,9 +6278,9 @@ function isErrorResponse(res) {
   return !res.status || res.status < 200 || 300 <= res.status;
 }
 
-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; }
 var ConnectionState;
 
 (function (ConnectionState) {
@@ -6284,7 +6343,7 @@ var WSConnectionFallback = /*#__PURE__*/function () {
                 _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$3(_objectSpread$3({}, config), {}, {
+                  config: _objectSpread$5(_objectSpread$5({}, config), {}, {
                     cancelToken: (_this$cancelToken2 = _this.cancelToken) === null || _this$cancelToken2 === void 0 ? void 0 : _this$cancelToken2.token
                   }),
                   params: params
@@ -6562,7 +6621,7 @@ var WSConnectionFallback = /*#__PURE__*/function () {
     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$3({
+      this.client.logger(level, 'WSConnectionFallback:' + msg, _objectSpread$5({
         tags: ['connection_fallback', 'connection']
       }, extra));
     }
@@ -7142,196 +7201,738 @@ var VotingVisibility;
   VotingVisibility["public"] = "public";
 })(VotingVisibility || (VotingVisibility = {}));
 
-var _excluded$1 = ["parent_message_id", "parent_message", "latest_replies", "thread_participants", "reply_count", "channel", "read"];
+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$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$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$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 isPatch(value) {
+  return typeof value === 'function';
+}
 
-function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(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 = it.call(o); }, 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; } } }; }
+var StateStore = function StateStore(value) {
+  var _this = this;
 
-function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen); }
+  _classCallCheck(this, StateStore);
 
-function _arrayLikeToArray$1(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; }
+  this.value = value;
+
+  _defineProperty(this, "handlerSet", new Set());
+
+  _defineProperty(this, "next", function (newValueOrPatch) {
+    // newValue (or patch output) should never be mutated previous value
+    var newValue = isPatch(newValueOrPatch) ? newValueOrPatch(_this.value) : newValueOrPatch; // do not notify subscribers if the value hasn't changed
+
+    if (newValue === _this.value) return;
+    var oldValue = _this.value;
+    _this.value = newValue;
+
+    _this.handlerSet.forEach(function (handler) {
+      return handler(_this.value, oldValue);
+    });
+  });
+
+  _defineProperty(this, "partialNext", function (partial) {
+    return _this.next(function (current) {
+      return _objectSpread$4(_objectSpread$4({}, current), partial);
+    });
+  });
+
+  _defineProperty(this, "getLatestValue", function () {
+    return _this.value;
+  });
+
+  _defineProperty(this, "subscribe", function (handler) {
+    handler(_this.value, undefined);
+
+    _this.handlerSet.add(handler);
+
+    return function () {
+      _this.handlerSet.delete(handler);
+    };
+  });
+
+  _defineProperty(this, "subscribeWithSelector", function (selector, handler) {
+    // begin with undefined to reduce amount of selector calls
+    var selectedValues;
+
+    var wrappedHandler = function wrappedHandler(nextValue) {
+      var _selectedValues$some, _selectedValues;
+
+      var newlySelectedValues = selector(nextValue);
+      var hasUpdatedValues = (_selectedValues$some = (_selectedValues = selectedValues) === null || _selectedValues === void 0 ? void 0 : _selectedValues.some(function (value, index) {
+        return value !== newlySelectedValues[index];
+      })) !== null && _selectedValues$some !== void 0 ? _selectedValues$some : true;
+      if (!hasUpdatedValues) return;
+      var oldSelectedValues = selectedValues;
+      selectedValues = newlySelectedValues;
+      handler(newlySelectedValues, oldSelectedValues);
+    };
+
+    return _this.subscribe(wrappedHandler);
+  });
+};
+
+var _excluded$1 = ["limit", "sort"];
+
+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; }
+var DEFAULT_PAGE_LIMIT = 50;
+var DEFAULT_SORT = [{
+  created_at: -1
+}];
+var MARK_AS_READ_THROTTLE_TIMEOUT = 1000;
 var Thread = /*#__PURE__*/function () {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function Thread(client, t) {
+  function Thread(_ref) {
+    var _this = this,
+        _threadData$read,
+        _threadData$reply_cou;
+
+    var client = _ref.client,
+        threadData = _ref.threadData;
+
     _classCallCheck(this, Thread);
 
+    _defineProperty(this, "state", void 0);
+
     _defineProperty(this, "id", void 0);
 
-    _defineProperty(this, "latestReplies", []);
+    _defineProperty(this, "client", void 0);
 
-    _defineProperty(this, "participants", []);
+    _defineProperty(this, "unsubscribeFunctions", new Set());
 
-    _defineProperty(this, "message", void 0);
+    _defineProperty(this, "failedRepliesMap", new Map());
 
-    _defineProperty(this, "channel", void 0);
+    _defineProperty(this, "activate", function () {
+      _this.state.partialNext({
+        active: true
+      });
+    });
 
-    _defineProperty(this, "_channel", void 0);
+    _defineProperty(this, "deactivate", function () {
+      _this.state.partialNext({
+        active: false
+      });
+    });
 
-    _defineProperty(this, "replyCount", 0);
+    _defineProperty(this, "reload", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var thread;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!_this.state.getLatestValue().isLoading) {
+                _context.next = 2;
+                break;
+              }
 
-    _defineProperty(this, "_client", void 0);
+              return _context.abrupt("return");
 
-    _defineProperty(this, "read", {});
-
-    _defineProperty(this, "data", {});
-
-    var parent_message_id = t.parent_message_id,
-        parent_message = t.parent_message,
-        latest_replies = t.latest_replies,
-        thread_participants = t.thread_participants,
-        reply_count = t.reply_count,
-        channel = t.channel,
-        read = t.read,
-        data = _objectWithoutProperties(t, _excluded$1);
-
-    this.id = parent_message_id;
-    this.message = formatMessage(parent_message);
-    this.latestReplies = latest_replies.map(formatMessage);
-    this.participants = thread_participants;
-    this.replyCount = reply_count;
-    this.channel = channel;
-    this._channel = client.channel(t.channel.type, t.channel.id);
-    this._client = client;
+            case 2:
+              _this.state.partialNext({
+                isLoading: true
+              });
 
-    if (read) {
-      var _iterator = _createForOfIteratorHelper$1(read),
-          _step;
+              _context.prev = 3;
+              _context.next = 6;
+              return _this.client.getThread(_this.id, {
+                watch: true
+              });
 
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var r = _step.value;
-          this.read[r.user.id] = _objectSpread$2(_objectSpread$2({}, r), {}, {
-            last_read: new Date(r.last_read)
-          });
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    }
+            case 6:
+              thread = _context.sent;
 
-    this.data = data;
-  }
+              _this.hydrateState(thread);
 
-  _createClass(Thread, [{
-    key: "getClient",
-    value: function getClient() {
-      return this._client;
-    }
-    /**
-     * addReply - Adds or updates a latestReplies to the thread
-     *
-     * @param {MessageResponse<StreamChatGenerics>} message reply message to be added.
-     */
+            case 8:
+              _context.prev = 8;
 
-  }, {
-    key: "addReply",
-    value: function addReply(message) {
-      if (message.parent_id !== this.message.id) {
-        throw new Error('Message does not belong to this thread');
-      }
+              _this.state.partialNext({
+                isLoading: false
+              });
 
-      this.latestReplies = addToMessageList(this.latestReplies, formatMessage(message), true);
-    }
-  }, {
-    key: "updateReply",
-    value: function updateReply(message) {
-      this.latestReplies = this.latestReplies.map(function (m) {
-        if (m.id === message.id) {
-          return formatMessage(message);
+              return _context.finish(8);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
         }
+      }, _callee, null, [[3,, 8, 11]]);
+    })));
 
-        return m;
-      });
-    }
-  }, {
-    key: "updateMessageOrReplyIfExists",
-    value: function updateMessageOrReplyIfExists(message) {
-      if (!message.parent_id && message.id !== this.message.id) {
+    _defineProperty(this, "hydrateState", function (thread) {
+      if (thread === _this) {
+        // skip if the instances are the same
         return;
       }
 
-      if (message.parent_id && message.parent_id !== this.message.id) {
-        return;
+      if (thread.id !== _this.id) {
+        throw new Error("Cannot hydrate thread state with using thread's state");
       }
 
-      if (message.parent_id && message.parent_id === this.message.id) {
-        this.updateReply(message);
+      var _thread$state$getLate = thread.state.getLatestValue(),
+          read = _thread$state$getLate.read,
+          replyCount = _thread$state$getLate.replyCount,
+          replies = _thread$state$getLate.replies,
+          parentMessage = _thread$state$getLate.parentMessage,
+          participants = _thread$state$getLate.participants,
+          createdAt = _thread$state$getLate.createdAt,
+          deletedAt = _thread$state$getLate.deletedAt,
+          updatedAt = _thread$state$getLate.updatedAt; // Preserve pending replies and append them to the updated list of replies
+
+
+      var pendingReplies = Array.from(_this.failedRepliesMap.values());
+
+      _this.state.partialNext({
+        read: read,
+        replyCount: replyCount,
+        replies: pendingReplies.length ? replies.concat(pendingReplies) : replies,
+        parentMessage: parentMessage,
+        participants: participants,
+        createdAt: createdAt,
+        deletedAt: deletedAt,
+        updatedAt: updatedAt,
+        isStateStale: false
+      });
+    });
+
+    _defineProperty(this, "registerSubscriptions", function () {
+      if (_this.unsubscribeFunctions.size) {
+        // Thread is already listening for events and changes
         return;
       }
 
-      if (!message.parent_id && message.id === this.message.id) {
-        this.message = formatMessage(message);
-      }
-    }
-  }, {
-    key: "addReaction",
-    value: function addReaction(reaction, message, enforce_unique) {
-      var _this = this;
+      _this.unsubscribeFunctions.add(_this.subscribeMarkActiveThreadRead());
 
-      if (!message) return;
-      this.latestReplies = this.latestReplies.map(function (m) {
-        if (m.id === message.id) {
-          return formatMessage(_this._channel.state.addReaction(reaction, message, enforce_unique));
-        }
+      _this.unsubscribeFunctions.add(_this.subscribeReloadActiveStaleThread());
+
+      _this.unsubscribeFunctions.add(_this.subscribeMarkThreadStale());
+
+      _this.unsubscribeFunctions.add(_this.subscribeNewReplies());
+
+      _this.unsubscribeFunctions.add(_this.subscribeRepliesRead());
+
+      _this.unsubscribeFunctions.add(_this.subscribeReplyDeleted());
+
+      _this.unsubscribeFunctions.add(_this.subscribeMessageUpdated());
+    });
+
+    _defineProperty(this, "subscribeMarkActiveThreadRead", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.active, ownUnreadCountSelector(_this.client.userID)(nextValue)];
+      }, function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            active = _ref4[0],
+            unreadMessageCount = _ref4[1];
 
-        return m;
+        if (!active || !unreadMessageCount) return;
+
+        _this.throttledMarkAsRead();
       });
-    }
-  }, {
-    key: "removeReaction",
-    value: function removeReaction(reaction, message) {
-      var _this2 = this;
+    });
 
-      if (!message) return;
-      this.latestReplies = this.latestReplies.map(function (m) {
-        if (m.id === message.id) {
-          return formatMessage(_this2._channel.state.removeReaction(reaction, message));
-        }
+    _defineProperty(this, "subscribeReloadActiveStaleThread", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.active, nextValue.isStateStale];
+      }, function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+            active = _ref6[0],
+            isStateStale = _ref6[1];
 
-        return m;
+        if (active && isStateStale) {
+          _this.reload();
+        }
       });
-    }
-  }]);
+    });
 
-  return Thread;
-}();
+    _defineProperty(this, "subscribeMarkThreadStale", function () {
+      return _this.client.on('user.watching.stop', function (event) {
+        var _event$user, _event$channel;
 
-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; }
+        var _this$state$getLatest = _this.state.getLatestValue(),
+            channel = _this$state$getLatest.channel;
 
-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 MODERATION_ENTITY_TYPES = {
-  user: 'stream:user',
-  message: 'stream:chat:v1:message'
-}; // Moderation class provides all the endpoints related to moderation v2.
+        if (!_this.client.userID || _this.client.userID !== ((_event$user = event.user) === null || _event$user === void 0 ? void 0 : _event$user.id) || ((_event$channel = event.channel) === null || _event$channel === void 0 ? void 0 : _event$channel.cid) !== channel.cid) {
+          return;
+        }
 
-var Moderation = /*#__PURE__*/function () {
-  function Moderation(client) {
-    _classCallCheck(this, Moderation);
+        _this.state.partialNext({
+          isStateStale: true
+        });
+      }).unsubscribe;
+    });
 
-    _defineProperty(this, "client", void 0);
+    _defineProperty(this, "subscribeNewReplies", function () {
+      return _this.client.on('message.new', function (event) {
+        var _event$message, _event$message$user;
 
-    this.client = client;
-  }
-  /**
-   * Flag a user
-   *
-   * @param {string} flaggedUserID User ID to be flagged
-   * @param {string} reason Reason for flagging the user
-   * @param {Object} options Additional options for flagging the user
-   * @param {string} options.user_id (For server side usage) User ID of the user who is flagging the target user
-   * @param {Object} options.custom Additional data to be stored with the flag
-   * @returns
-   */
+        if (!_this.client.userID || ((_event$message = event.message) === null || _event$message === void 0 ? void 0 : _event$message.parent_id) !== _this.id) {
+          return;
+        }
 
+        var isOwnMessage = ((_event$message$user = event.message.user) === null || _event$message$user === void 0 ? void 0 : _event$message$user.id) === _this.client.userID;
 
-  _createClass(Moderation, [{
-    key: "flagUser",
-    value: function () {
+        var _this$state$getLatest2 = _this.state.getLatestValue(),
+            active = _this$state$getLatest2.active,
+            read = _this$state$getLatest2.read;
+
+        _this.upsertReplyLocally({
+          message: event.message,
+          // Message from current user could have been added optimistically,
+          // so the actual timestamp might differ in the event
+          timestampChanged: isOwnMessage
+        });
+
+        if (active) {
+          _this.throttledMarkAsRead();
+        }
+
+        var nextRead = {};
+
+        for (var _i = 0, _Object$keys = Object.keys(read); _i < _Object$keys.length; _i++) {
+          var userId = _Object$keys[_i];
+          var userRead = read[userId];
+
+          if (userRead) {
+            var _event$user2;
+
+            var nextUserRead = userRead;
+
+            if (userId === ((_event$user2 = event.user) === null || _event$user2 === void 0 ? void 0 : _event$user2.id)) {
+              // The user who just sent a message to the thread has no unread messages
+              // in that thread
+              nextUserRead = _objectSpread$3(_objectSpread$3({}, nextUserRead), {}, {
+                lastReadAt: event.created_at ? new Date(event.created_at) : new Date(),
+                user: event.user,
+                unreadMessageCount: 0
+              });
+            } else if (active && userId === _this.client.userID) ; else {
+              // Increment unread count for all users except the author of the new message
+              nextUserRead = _objectSpread$3(_objectSpread$3({}, nextUserRead), {}, {
+                unreadMessageCount: userRead.unreadMessageCount + 1
+              });
+            }
+
+            nextRead[userId] = nextUserRead;
+          }
+        }
+
+        _this.state.partialNext({
+          read: nextRead
+        });
+      }).unsubscribe;
+    });
+
+    _defineProperty(this, "subscribeRepliesRead", function () {
+      return _this.client.on('message.read', function (event) {
+        if (!event.user || !event.created_at || !event.thread) return;
+        if (event.thread.parent_message_id !== _this.id) return;
+        var userId = event.user.id;
+        var createdAt = event.created_at;
+        var user = event.user;
+
+        _this.state.next(function (current) {
+          return _objectSpread$3(_objectSpread$3({}, current), {}, {
+            read: _objectSpread$3(_objectSpread$3({}, current.read), {}, _defineProperty({}, userId, {
+              lastReadAt: new Date(createdAt),
+              user: user,
+              lastReadMessageId: event.last_read_message_id,
+              unreadMessageCount: 0
+            }))
+          });
+        });
+      }).unsubscribe;
+    });
+
+    _defineProperty(this, "subscribeReplyDeleted", function () {
+      return _this.client.on('message.deleted', function (event) {
+        var _event$message2;
+
+        if (((_event$message2 = event.message) === null || _event$message2 === void 0 ? void 0 : _event$message2.parent_id) === _this.id && event.hard_delete) {
+          return _this.deleteReplyLocally({
+            message: event.message
+          });
+        }
+      }).unsubscribe;
+    });
+
+    _defineProperty(this, "subscribeMessageUpdated", function () {
+      var unsubscribeFunctions = ['message.updated', 'reaction.new', 'reaction.deleted'].map(function (eventType) {
+        return _this.client.on(eventType, function (event) {
+          if (event.message) {
+            _this.updateParentMessageOrReplyLocally(event.message);
+          }
+        }).unsubscribe;
+      });
+      return function () {
+        return unsubscribeFunctions.forEach(function (unsubscribe) {
+          return unsubscribe();
+        });
+      };
+    });
+
+    _defineProperty(this, "unregisterSubscriptions", function () {
+      _this.unsubscribeFunctions.forEach(function (cleanupFunction) {
+        return cleanupFunction();
+      });
+
+      _this.unsubscribeFunctions.clear();
+    });
+
+    _defineProperty(this, "deleteReplyLocally", function (_ref7) {
+      var _replies$index, _replies;
+
+      var message = _ref7.message;
+
+      var _this$state$getLatest3 = _this.state.getLatestValue(),
+          replies = _this$state$getLatest3.replies;
+
+      var index = findIndexInSortedArray({
+        needle: formatMessage(message),
+        sortedArray: replies,
+        sortDirection: 'ascending',
+        selectValueToCompare: function selectValueToCompare(reply) {
+          return reply.created_at.getTime();
+        }
+      });
+      var actualIndex = ((_replies$index = replies[index]) === null || _replies$index === void 0 ? void 0 : _replies$index.id) === message.id ? index : ((_replies = replies[index - 1]) === null || _replies === void 0 ? void 0 : _replies.id) === message.id ? index - 1 : null;
+
+      if (actualIndex === null) {
+        return;
+      }
+
+      var updatedReplies = _toConsumableArray(replies);
+
+      updatedReplies.splice(actualIndex, 1);
+
+      _this.state.partialNext({
+        replies: updatedReplies
+      });
+    });
+
+    _defineProperty(this, "upsertReplyLocally", function (_ref8) {
+      var message = _ref8.message,
+          _ref8$timestampChange = _ref8.timestampChanged,
+          timestampChanged = _ref8$timestampChange === void 0 ? false : _ref8$timestampChange;
+
+      if (message.parent_id !== _this.id) {
+        throw new Error('Reply does not belong to this thread');
+      }
+
+      var formattedMessage = formatMessage(message);
+
+      if (message.status === 'failed') {
+        // store failed reply so that it's not lost when reloading or hydrating
+        _this.failedRepliesMap.set(formattedMessage.id, formattedMessage);
+      } else if (_this.failedRepliesMap.has(message.id)) {
+        _this.failedRepliesMap.delete(message.id);
+      }
+
+      _this.state.next(function (current) {
+        return _objectSpread$3(_objectSpread$3({}, current), {}, {
+          replies: addToMessageList(current.replies, formattedMessage, timestampChanged)
+        });
+      });
+    });
+
+    _defineProperty(this, "updateParentMessageLocally", function (message) {
+      if (message.id !== _this.id) {
+        throw new Error('Message does not belong to this thread');
+      }
+
+      _this.state.next(function (current) {
+        var _message$reply_count;
+
+        var formattedMessage = formatMessage(message);
+
+        var newData = _objectSpread$3(_objectSpread$3({}, current), {}, {
+          deletedAt: formattedMessage.deleted_at,
+          parentMessage: formattedMessage,
+          replyCount: (_message$reply_count = message.reply_count) !== null && _message$reply_count !== void 0 ? _message$reply_count : current.replyCount
+        }); // update channel on channelData change (unlikely but handled anyway)
+
+
+        if (message.channel) {
+          newData['channel'] = _this.client.channel(message.channel.type, message.channel.id, message.channel);
+        }
+
+        return newData;
+      });
+    });
+
+    _defineProperty(this, "updateParentMessageOrReplyLocally", function (message) {
+      if (message.parent_id === _this.id) {
+        _this.upsertReplyLocally({
+          message: message
+        });
+      }
+
+      if (!message.parent_id && message.id === _this.id) {
+        _this.updateParentMessageLocally(message);
+      }
+    });
+
+    _defineProperty(this, "markAsRead", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref10,
+          _ref10$force,
+          force,
+          _args2 = arguments;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _ref10 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref10$force = _ref10.force, force = _ref10$force === void 0 ? false : _ref10$force;
+
+              if (!(_this.ownUnreadCount === 0 && !force)) {
+                _context2.next = 3;
+                break;
+              }
+
+              return _context2.abrupt("return", null);
+
+            case 3:
+              _context2.next = 5;
+              return _this.channel.markRead({
+                thread_id: _this.id
+              });
+
+            case 5:
+              return _context2.abrupt("return", _context2.sent);
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+
+    _defineProperty(this, "throttledMarkAsRead", throttle(function () {
+      return _this.markAsRead();
+    }, MARK_AS_READ_THROTTLE_TIMEOUT, {
+      trailing: true
+    }));
+
+    _defineProperty(this, "queryReplies", function () {
+      var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var _ref11$limit = _ref11.limit,
+          limit = _ref11$limit === void 0 ? DEFAULT_PAGE_LIMIT : _ref11$limit,
+          _ref11$sort = _ref11.sort,
+          sort = _ref11$sort === void 0 ? DEFAULT_SORT : _ref11$sort,
+          otherOptions = _objectWithoutProperties(_ref11, _excluded$1);
+
+      return _this.channel.getReplies(_this.id, _objectSpread$3({
+        limit: limit
+      }, otherOptions), sort);
+    });
+
+    _defineProperty(this, "loadNextPage", function () {
+      var _ref12 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref12$limit = _ref12.limit,
+          limit = _ref12$limit === void 0 ? DEFAULT_PAGE_LIMIT : _ref12$limit;
+
+      return _this.loadPage(limit);
+    });
+
+    _defineProperty(this, "loadPrevPage", function () {
+      var _ref13 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref13$limit = _ref13.limit,
+          limit = _ref13$limit === void 0 ? DEFAULT_PAGE_LIMIT : _ref13$limit;
+
+      return _this.loadPage(-limit);
+    });
+
+    _defineProperty(this, "loadPage", /*#__PURE__*/function () {
+      var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(count) {
+        var _this$state$getLatest4, pagination, _ref15, _ref16, loadingKey, cursorKey, insertionMethodKey, queryOptions, limit, _replies$at$id, _replies$at, data, replies, maybeNextCursor;
+
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _this$state$getLatest4 = _this.state.getLatestValue(), pagination = _this$state$getLatest4.pagination;
+                _ref15 = count > 0 ? ['isLoadingNext', 'nextCursor', 'push'] : ['isLoadingPrev', 'prevCursor', 'unshift'], _ref16 = _slicedToArray(_ref15, 3), loadingKey = _ref16[0], cursorKey = _ref16[1], insertionMethodKey = _ref16[2];
+
+                if (!(pagination[loadingKey] || pagination[cursorKey] === null)) {
+                  _context3.next = 4;
+                  break;
+                }
+
+                return _context3.abrupt("return");
+
+              case 4:
+                queryOptions = _defineProperty({}, count > 0 ? 'id_gt' : 'id_lt', pagination[cursorKey]);
+                limit = Math.abs(count);
+
+                _this.state.partialNext({
+                  pagination: _objectSpread$3(_objectSpread$3({}, pagination), {}, _defineProperty({}, loadingKey, true))
+                });
+
+                _context3.prev = 7;
+                _context3.next = 10;
+                return _this.queryReplies(_objectSpread$3(_objectSpread$3({}, queryOptions), {}, {
+                  limit: limit
+                }));
+
+              case 10:
+                data = _context3.sent;
+                replies = data.messages.map(formatMessage);
+                maybeNextCursor = (_replies$at$id = (_replies$at = replies.at(count > 0 ? -1 : 0)) === null || _replies$at === void 0 ? void 0 : _replies$at.id) !== null && _replies$at$id !== void 0 ? _replies$at$id : null;
+
+                _this.state.next(function (current) {
+                  var _objectSpread4;
+
+                  var nextReplies = current.replies; // prevent re-creating array if there's nothing to add to the current one
+
+                  if (replies.length > 0) {
+                    var _nextReplies;
+
+                    nextReplies = _toConsumableArray(current.replies);
+
+                    (_nextReplies = nextReplies)[insertionMethodKey].apply(_nextReplies, _toConsumableArray(replies));
+                  }
+
+                  return _objectSpread$3(_objectSpread$3({}, current), {}, {
+                    replies: nextReplies,
+                    pagination: _objectSpread$3(_objectSpread$3({}, current.pagination), {}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, cursorKey, data.messages.length < limit ? null : maybeNextCursor), _defineProperty(_objectSpread4, loadingKey, false), _objectSpread4))
+                  });
+                });
+
+                _context3.next = 20;
+                break;
+
+              case 16:
+                _context3.prev = 16;
+                _context3.t0 = _context3["catch"](7);
+
+                _this.client.logger('error', _context3.t0.message);
+
+                _this.state.next(function (current) {
+                  return _objectSpread$3(_objectSpread$3({}, current), {}, {
+                    pagination: _objectSpread$3(_objectSpread$3({}, current.pagination), {}, _defineProperty({}, loadingKey, false))
+                  });
+                });
+
+              case 20:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, null, [[7, 16]]);
+      }));
+
+      return function (_x) {
+        return _ref14.apply(this, arguments);
+      };
+    }());
+
+    this.state = new StateStore({
+      active: false,
+      channel: client.channel(threadData.channel.type, threadData.channel.id),
+      createdAt: new Date(threadData.created_at),
+      deletedAt: threadData.deleted_at ? new Date(threadData.deleted_at) : null,
+      isLoading: false,
+      isStateStale: false,
+      pagination: repliesPaginationFromInitialThread(threadData),
+      parentMessage: formatMessage(threadData.parent_message),
+      participants: threadData.thread_participants,
+      read: formatReadState((_threadData$read = threadData.read) !== null && _threadData$read !== void 0 ? _threadData$read : []),
+      replies: threadData.latest_replies.map(formatMessage),
+      replyCount: (_threadData$reply_cou = threadData.reply_count) !== null && _threadData$reply_cou !== void 0 ? _threadData$reply_cou : 0,
+      updatedAt: threadData.updated_at ? new Date(threadData.updated_at) : null
+    });
+    this.id = threadData.parent_message_id;
+    this.client = client;
+  }
+
+  _createClass(Thread, [{
+    key: "channel",
+    get: function get() {
+      return this.state.getLatestValue().channel;
+    }
+  }, {
+    key: "hasStaleState",
+    get: function get() {
+      return this.state.getLatestValue().isStateStale;
+    }
+  }, {
+    key: "ownUnreadCount",
+    get: function get() {
+      return ownUnreadCountSelector(this.client.userID)(this.state.getLatestValue());
+    }
+  }]);
+
+  return Thread;
+}();
+
+var formatReadState = function formatReadState(read) {
+  return read.reduce(function (state, userRead) {
+    var _userRead$unread_mess;
+
+    state[userRead.user.id] = {
+      user: userRead.user,
+      lastReadMessageId: userRead.last_read_message_id,
+      unreadMessageCount: (_userRead$unread_mess = userRead.unread_messages) !== null && _userRead$unread_mess !== void 0 ? _userRead$unread_mess : 0,
+      lastReadAt: new Date(userRead.last_read)
+    };
+    return state;
+  }, {});
+};
+
+var repliesPaginationFromInitialThread = function repliesPaginationFromInitialThread(thread) {
+  var _thread$latest_replie, _thread$latest_replie2;
+
+  var latestRepliesContainsAllReplies = thread.latest_replies.length === thread.reply_count;
+  return {
+    nextCursor: null,
+    prevCursor: latestRepliesContainsAllReplies ? null : (_thread$latest_replie = (_thread$latest_replie2 = thread.latest_replies.at(0)) === null || _thread$latest_replie2 === void 0 ? void 0 : _thread$latest_replie2.id) !== null && _thread$latest_replie !== void 0 ? _thread$latest_replie : null,
+    isLoadingNext: false,
+    isLoadingPrev: false
+  };
+};
+
+var ownUnreadCountSelector = function ownUnreadCountSelector(currentUserId) {
+  return function (state) {
+    var _state$read$currentUs;
+
+    return currentUserId && ((_state$read$currentUs = state.read[currentUserId]) === null || _state$read$currentUs === void 0 ? void 0 : _state$read$currentUs.unreadMessageCount) || 0;
+  };
+};
+
+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$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; }
+var MODERATION_ENTITY_TYPES = {
+  user: 'stream:user',
+  message: 'stream:chat:v1:message'
+}; // Moderation class provides all the endpoints related to moderation v2.
+
+var Moderation = /*#__PURE__*/function () {
+  function Moderation(client) {
+    _classCallCheck(this, Moderation);
+
+    _defineProperty(this, "client", void 0);
+
+    this.client = client;
+  }
+  /**
+   * Flag a user
+   *
+   * @param {string} flaggedUserID User ID to be flagged
+   * @param {string} reason Reason for flagging the user
+   * @param {Object} options Additional options for flagging the user
+   * @param {string} options.user_id (For server side usage) User ID of the user who is flagging the target user
+   * @param {Object} options.custom Additional data to be stored with the flag
+   * @returns
+   */
+
+
+  _createClass(Moderation, [{
+    key: "flagUser",
+    value: function () {
       var _flagUser = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(flaggedUserID, reason) {
         var options,
             _args = arguments;
@@ -7420,7 +8021,7 @@ var Moderation = /*#__PURE__*/function () {
               case 0:
                 options = _args3.length > 4 && _args3[4] !== undefined ? _args3[4] : {};
                 _context3.next = 3;
-                return this.client.post(this.client.baseURL + '/api/v2/moderation/flag', _objectSpread$1({
+                return this.client.post(this.client.baseURL + '/api/v2/moderation/flag', _objectSpread$2({
                   entity_type: entityType,
                   entity_id: entityId,
                   entity_creator_id: entityCreatorID,
@@ -7465,7 +8066,7 @@ var Moderation = /*#__PURE__*/function () {
               case 0:
                 options = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : {};
                 _context4.next = 3;
-                return this.client.post(this.client.baseURL + '/api/v2/moderation/mute', _objectSpread$1({
+                return this.client.post(this.client.baseURL + '/api/v2/moderation/mute', _objectSpread$2({
                   target_ids: [targetID]
                 }, options));
 
@@ -7503,7 +8104,7 @@ var Moderation = /*#__PURE__*/function () {
             switch (_context5.prev = _context5.next) {
               case 0:
                 _context5.next = 2;
-                return this.client.post(this.client.baseURL + '/api/v2/moderation/unmute', _objectSpread$1({
+                return this.client.post(this.client.baseURL + '/api/v2/moderation/unmute', _objectSpread$2({
                   target_ids: [targetID]
                 }, options));
 
@@ -7545,7 +8146,7 @@ var Moderation = /*#__PURE__*/function () {
               case 0:
                 options = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
                 _context6.next = 3;
-                return this.client.get(this.client.baseURL + "/api/v2/moderation/user_report", _objectSpread$1({
+                return this.client.get(this.client.baseURL + "/api/v2/moderation/user_report", _objectSpread$2({
                   user_id: userID
                 }, options));
 
@@ -7589,7 +8190,7 @@ var Moderation = /*#__PURE__*/function () {
                 sort = _args7.length > 1 && _args7[1] !== undefined ? _args7[1] : [];
                 options = _args7.length > 2 && _args7[2] !== undefined ? _args7[2] : {};
                 _context7.next = 5;
-                return this.client.post(this.client.baseURL + '/api/v2/moderation/review_queue', _objectSpread$1({
+                return this.client.post(this.client.baseURL + '/api/v2/moderation/review_queue', _objectSpread$2({
                   filter: filterConditions,
                   sort: normalizeQuerySort(sort)
                 }, options));
@@ -7692,7 +8293,7 @@ var Moderation = /*#__PURE__*/function () {
               case 0:
                 options = _args10.length > 2 && _args10[2] !== undefined ? _args10[2] : {};
                 _context10.next = 3;
-                return this.client.post(this.client.baseURL + '/api/v2/moderation/submit_action', _objectSpread$1({
+                return this.client.post(this.client.baseURL + '/api/v2/moderation/submit_action', _objectSpread$2({
                   action_type: actionType,
                   item_id: itemID
                 }, options));
@@ -7719,6 +8320,454 @@ var Moderation = /*#__PURE__*/function () {
   return Moderation;
 }();
 
+function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(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 = it.call(o); }, 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 _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen); }
+
+function _arrayLikeToArray$1(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$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 DEFAULT_CONNECTION_RECOVERY_THROTTLE_DURATION = 1000;
+var MAX_QUERY_THREADS_LIMIT = 25;
+var ThreadManager = /*#__PURE__*/function () {
+  function ThreadManager(_ref) {
+    var _this = this;
+
+    var client = _ref.client;
+
+    _classCallCheck(this, ThreadManager);
+
+    _defineProperty(this, "state", void 0);
+
+    _defineProperty(this, "client", void 0);
+
+    _defineProperty(this, "unsubscribeFunctions", new Set());
+
+    _defineProperty(this, "threadsByIdGetterCache", void 0);
+
+    _defineProperty(this, "activate", function () {
+      _this.state.partialNext({
+        active: true
+      });
+    });
+
+    _defineProperty(this, "deactivate", function () {
+      _this.state.partialNext({
+        active: false
+      });
+    });
+
+    _defineProperty(this, "registerSubscriptions", function () {
+      if (_this.unsubscribeFunctions.size) return;
+
+      _this.unsubscribeFunctions.add(_this.subscribeUnreadThreadsCountChange());
+
+      _this.unsubscribeFunctions.add(_this.subscribeManageThreadSubscriptions());
+
+      _this.unsubscribeFunctions.add(_this.subscribeReloadOnActivation());
+
+      _this.unsubscribeFunctions.add(_this.subscribeNewReplies());
+
+      _this.unsubscribeFunctions.add(_this.subscribeRecoverAfterConnectionDrop());
+    });
+
+    _defineProperty(this, "subscribeUnreadThreadsCountChange", function () {
+      var _ref3;
+
+      // initiate
+      var _ref2 = (_ref3 = _this.client.user) !== null && _ref3 !== void 0 ? _ref3 : {},
+          _ref2$unread_threads = _ref2.unread_threads,
+          unreadThreadCount = _ref2$unread_threads === void 0 ? 0 : _ref2$unread_threads;
+
+      _this.state.partialNext({
+        unreadThreadCount: unreadThreadCount
+      });
+
+      var unsubscribeFunctions = ['health.check', 'notification.mark_read', 'notification.thread_message_new', 'notification.channel_deleted'].map(function (eventType) {
+        return _this.client.on(eventType, function (event) {
+          var _event$me;
+
+          var _ref4 = (_event$me = event.me) !== null && _event$me !== void 0 ? _event$me : event,
+              unreadThreadCount = _ref4.unread_threads;
+
+          if (typeof unreadThreadCount === 'number') {
+            _this.state.partialNext({
+              unreadThreadCount: unreadThreadCount
+            });
+          }
+        }).unsubscribe;
+      });
+      return function () {
+        return unsubscribeFunctions.forEach(function (unsubscribe) {
+          return unsubscribe();
+        });
+      };
+    });
+
+    _defineProperty(this, "subscribeManageThreadSubscriptions", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.threads];
+      }, function (_ref5, prev) {
+        var _ref6 = _slicedToArray(_ref5, 1),
+            nextThreads = _ref6[0];
+
+        var _ref7 = prev !== null && prev !== void 0 ? prev : [],
+            _ref8 = _slicedToArray(_ref7, 1),
+            _ref8$ = _ref8[0],
+            prevThreads = _ref8$ === void 0 ? [] : _ref8$; // Thread instance was removed if there's no thread with the given id at all,
+        // or it was replaced with a new instance
+
+
+        var removedThreads = prevThreads.filter(function (thread) {
+          return thread !== _this.threadsById[thread.id];
+        });
+        nextThreads.forEach(function (thread) {
+          return thread.registerSubscriptions();
+        });
+        removedThreads.forEach(function (thread) {
+          return thread.unregisterSubscriptions();
+        });
+      });
+    });
+
+    _defineProperty(this, "subscribeReloadOnActivation", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.active];
+      }, function (_ref9) {
+        var _ref10 = _slicedToArray(_ref9, 1),
+            active = _ref10[0];
+
+        if (active) _this.reload();
+      });
+    });
+
+    _defineProperty(this, "subscribeNewReplies", function () {
+      return _this.client.on('notification.thread_message_new', function (event) {
+        var _event$message;
+
+        var parentId = (_event$message = event.message) === null || _event$message === void 0 ? void 0 : _event$message.parent_id;
+        if (!parentId) return;
+
+        var _this$state$getLatest = _this.state.getLatestValue(),
+            unseenThreadIds = _this$state$getLatest.unseenThreadIds,
+            ready = _this$state$getLatest.ready;
+
+        if (!ready) return;
+
+        if (_this.threadsById[parentId]) {
+          _this.state.partialNext({
+            isThreadOrderStale: true
+          });
+        } else if (!unseenThreadIds.includes(parentId)) {
+          _this.state.partialNext({
+            unseenThreadIds: unseenThreadIds.concat(parentId)
+          });
+        }
+      }).unsubscribe;
+    });
+
+    _defineProperty(this, "subscribeRecoverAfterConnectionDrop", function () {
+      var unsubscribeConnectionDropped = _this.client.on('connection.changed', function (event) {
+        if (event.online === false) {
+          _this.state.next(function (current) {
+            return current.lastConnectionDropAt ? current : _objectSpread$1(_objectSpread$1({}, current), {}, {
+              lastConnectionDropAt: new Date()
+            });
+          });
+        }
+      }).unsubscribe;
+
+      var throttledHandleConnectionRecovered = throttle(function () {
+        var _this$state$getLatest2 = _this.state.getLatestValue(),
+            lastConnectionDropAt = _this$state$getLatest2.lastConnectionDropAt;
+
+        if (!lastConnectionDropAt) return;
+
+        _this.reload({
+          force: true
+        });
+      }, DEFAULT_CONNECTION_RECOVERY_THROTTLE_DURATION, {
+        trailing: true
+      });
+
+      var unsubscribeConnectionRecovered = _this.client.on('connection.recovered', throttledHandleConnectionRecovered).unsubscribe;
+
+      return function () {
+        unsubscribeConnectionDropped();
+        unsubscribeConnectionRecovered();
+      };
+    });
+
+    _defineProperty(this, "unregisterSubscriptions", function () {
+      _this.state.getLatestValue().threads.forEach(function (thread) {
+        return thread.unregisterSubscriptions();
+      });
+
+      _this.unsubscribeFunctions.forEach(function (cleanupFunction) {
+        return cleanupFunction();
+      });
+
+      _this.unsubscribeFunctions.clear();
+    });
+
+    _defineProperty(this, "reload", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref12,
+          _ref12$force,
+          force,
+          _this$state$getLatest3,
+          threads,
+          unseenThreadIds,
+          isThreadOrderStale,
+          pagination,
+          ready,
+          limit,
+          response,
+          currentThreads,
+          nextThreads,
+          _iterator,
+          _step,
+          incomingThread,
+          existingThread,
+          _args = arguments;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _ref12 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, _ref12$force = _ref12.force, force = _ref12$force === void 0 ? false : _ref12$force;
+              _this$state$getLatest3 = _this.state.getLatestValue(), threads = _this$state$getLatest3.threads, unseenThreadIds = _this$state$getLatest3.unseenThreadIds, isThreadOrderStale = _this$state$getLatest3.isThreadOrderStale, pagination = _this$state$getLatest3.pagination, ready = _this$state$getLatest3.ready;
+
+              if (!pagination.isLoading) {
+                _context.next = 4;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 4:
+              if (!(!force && ready && !unseenThreadIds.length && !isThreadOrderStale)) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 6:
+              limit = threads.length + unseenThreadIds.length;
+              _context.prev = 7;
+
+              _this.state.next(function (current) {
+                return _objectSpread$1(_objectSpread$1({}, current), {}, {
+                  pagination: _objectSpread$1(_objectSpread$1({}, current.pagination), {}, {
+                    isLoading: true
+                  })
+                });
+              });
+
+              _context.next = 11;
+              return _this.queryThreads({
+                limit: Math.min(limit, MAX_QUERY_THREADS_LIMIT)
+              });
+
+            case 11:
+              response = _context.sent;
+              currentThreads = _this.threadsById;
+              nextThreads = [];
+              _iterator = _createForOfIteratorHelper$1(response.threads);
+
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  incomingThread = _step.value;
+                  existingThread = currentThreads[incomingThread.id];
+
+                  if (existingThread) {
+                    // Reuse thread instances if possible
+                    nextThreads.push(existingThread);
+
+                    if (existingThread.hasStaleState) {
+                      existingThread.hydrateState(incomingThread);
+                    }
+                  } else {
+                    nextThreads.push(incomingThread);
+                  }
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+
+              _this.state.next(function (current) {
+                var _response$next;
+
+                return _objectSpread$1(_objectSpread$1({}, current), {}, {
+                  threads: nextThreads,
+                  unseenThreadIds: [],
+                  isThreadOrderStale: false,
+                  pagination: _objectSpread$1(_objectSpread$1({}, current.pagination), {}, {
+                    isLoading: false,
+                    nextCursor: (_response$next = response.next) !== null && _response$next !== void 0 ? _response$next : null
+                  }),
+                  ready: true
+                });
+              });
+
+              _context.next = 23;
+              break;
+
+            case 19:
+              _context.prev = 19;
+              _context.t0 = _context["catch"](7);
+
+              _this.client.logger('error', _context.t0.message);
+
+              _this.state.next(function (current) {
+                return _objectSpread$1(_objectSpread$1({}, current), {}, {
+                  pagination: _objectSpread$1(_objectSpread$1({}, current.pagination), {}, {
+                    isLoading: false
+                  })
+                });
+              });
+
+            case 23:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[7, 19]]);
+    })));
+
+    _defineProperty(this, "queryThreads", function () {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return _this.client.queryThreads(_objectSpread$1({
+        limit: 25,
+        participant_limit: 10,
+        reply_limit: 10,
+        watch: true
+      }, options));
+    });
+
+    _defineProperty(this, "loadNextPage", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var options,
+          _this$state$getLatest4,
+          pagination,
+          response,
+          _args2 = arguments;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              options = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
+              _this$state$getLatest4 = _this.state.getLatestValue(), pagination = _this$state$getLatest4.pagination;
+
+              if (!(pagination.isLoadingNext || !pagination.nextCursor)) {
+                _context2.next = 4;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 4:
+              _context2.prev = 4;
+
+              _this.state.partialNext({
+                pagination: _objectSpread$1(_objectSpread$1({}, pagination), {}, {
+                  isLoadingNext: true
+                })
+              });
+
+              _context2.next = 8;
+              return _this.queryThreads(_objectSpread$1(_objectSpread$1({}, options), {}, {
+                next: pagination.nextCursor
+              }));
+
+            case 8:
+              response = _context2.sent;
+
+              _this.state.next(function (current) {
+                var _response$next2;
+
+                return _objectSpread$1(_objectSpread$1({}, current), {}, {
+                  threads: response.threads.length ? current.threads.concat(response.threads) : current.threads,
+                  pagination: _objectSpread$1(_objectSpread$1({}, current.pagination), {}, {
+                    nextCursor: (_response$next2 = response.next) !== null && _response$next2 !== void 0 ? _response$next2 : null,
+                    isLoadingNext: false
+                  })
+                });
+              });
+
+              _context2.next = 16;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](4);
+
+              _this.client.logger('error', _context2.t0.message);
+
+              _this.state.next(function (current) {
+                return _objectSpread$1(_objectSpread$1({}, current), {}, {
+                  pagination: _objectSpread$1(_objectSpread$1({}, current.pagination), {}, {
+                    isLoadingNext: false
+                  })
+                });
+              });
+
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[4, 12]]);
+    })));
+
+    this.client = client;
+    this.state = new StateStore({
+      active: false,
+      isThreadOrderStale: false,
+      threads: [],
+      unreadThreadCount: 0,
+      unseenThreadIds: [],
+      lastConnectionDropAt: null,
+      pagination: {
+        isLoading: false,
+        isLoadingNext: false,
+        nextCursor: null
+      },
+      ready: false
+    });
+    this.threadsByIdGetterCache = {
+      threads: [],
+      threadsById: {}
+    };
+  }
+
+  _createClass(ThreadManager, [{
+    key: "threadsById",
+    get: function get() {
+      var _this$state$getLatest5 = this.state.getLatestValue(),
+          threads = _this$state$getLatest5.threads;
+
+      if (threads === this.threadsByIdGetterCache.threads) {
+        return this.threadsByIdGetterCache.threadsById;
+      }
+
+      var threadsById = threads.reduce(function (newThreadsById, thread) {
+        newThreadsById[thread.id] = thread;
+        return newThreadsById;
+      }, {});
+      this.threadsByIdGetterCache.threads = threads;
+      this.threadsByIdGetterCache.threadsById = threadsById;
+      return threadsById;
+    }
+  }]);
+
+  return ThreadManager;
+}();
+
 var _excluded = ["created_at", "updated_at", "last_active", "online"],
     _excluded2 = ["params", "headers"];
 
@@ -7747,6 +8796,8 @@ var StreamChat = /*#__PURE__*/function () {
 
     _defineProperty(this, "activeChannels", void 0);
 
+    _defineProperty(this, "threads", void 0);
+
     _defineProperty(this, "anonymous", void 0);
 
     _defineProperty(this, "persistUserOnConnectionFailure", void 0);
@@ -7978,7 +9029,7 @@ var StreamChat = /*#__PURE__*/function () {
                 tags: ['connection', 'client']
               });
 
-              return _context3.abrupt("return", Promise.resolve());
+              return _context3.abrupt("return");
 
             case 8:
               _this.clientID = "".concat(_this.userID, "--").concat(randomId());
@@ -8586,8 +9637,8 @@ var StreamChat = /*#__PURE__*/function () {
     this.tokenManager = new TokenManager(this.secret);
     this.consecutiveFailures = 0;
     this.insightMetrics = new InsightMetrics();
-    this.defaultWSTimeoutWithFallback = 6000;
-    this.defaultWSTimeout = 15000;
+    this.defaultWSTimeoutWithFallback = 6 * 1000;
+    this.defaultWSTimeout = 15 * 1000;
     this.axiosInstance.defaults.paramsSerializer = axiosParamsSerializer;
     /**
      * logger function should accept 3 parameters:
@@ -8642,6 +9693,9 @@ var StreamChat = /*#__PURE__*/function () {
       return null;
     };
     this.recoverStateOnReconnect = this.options.recoverStateOnReconnect;
+    this.threads = new ThreadManager({
+      client: this
+    });
   }
   /**
    * Get a client instance
@@ -12049,7 +13103,10 @@ var StreamChat = /*#__PURE__*/function () {
                 res = _context64.sent;
                 return _context64.abrupt("return", {
                   threads: res.threads.map(function (thread) {
-                    return new Thread(_this5, thread);
+                    return new Thread({
+                      client: _this5,
+                      threadData: thread
+                    });
                   }),
                   next: res.next
                 });
@@ -12112,7 +13169,10 @@ var StreamChat = /*#__PURE__*/function () {
 
               case 6:
                 res = _context65.sent;
-                return _context65.abrupt("return", new Thread(this, res.thread));
+                return _context65.abrupt("return", new Thread({
+                  client: this,
+                  threadData: res.thread
+                }));
 
               case 8:
               case "end":
@@ -12203,7 +13263,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getUserAgent",
     value: function getUserAgent() {
-      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "8.39.0");
+      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "8.40.0");
     }
   }, {
     key: "setUserAgent",
@@ -14470,5 +15530,5 @@ var BuiltinPermissions = {
   UseFrozenChannel: 'Send messages and reactions to frozen channels'
 };
 
-export { Allow, AllowAll, AnyResource, AnyRole, BuiltinPermissions, BuiltinRoles, Campaign, Channel, ChannelState, CheckSignature, ClientState, Deny, DenyAll, DevToken, EVENT_MAP, ErrorFromResponse, InsightMetrics, JWTServerToken, JWTUserToken, MODERATION_ENTITY_TYPES, MaxPriority, MinPriority, Moderation, Permission, Segment, StableWSConnection, StreamChat, Thread, TokenManager, UserFromToken, VotingVisibility, buildWsFatalInsight, buildWsSuccessAfterFailureInsight, chatCodes, decodeBase64, encodeBase64, formatMessage, isOwnUser, logChatPromiseExecution, postInsights };
+export { Allow, AllowAll, AnyResource, AnyRole, BuiltinPermissions, BuiltinRoles, Campaign, Channel, ChannelState, CheckSignature, ClientState, Deny, DenyAll, DevToken, EVENT_MAP, ErrorFromResponse, InsightMetrics, JWTServerToken, JWTUserToken, MODERATION_ENTITY_TYPES, MaxPriority, MinPriority, Moderation, Permission, Segment, StableWSConnection, StateStore, StreamChat, Thread, ThreadManager, TokenManager, UserFromToken, VotingVisibility, buildWsFatalInsight, buildWsSuccessAfterFailureInsight, chatCodes, decodeBase64, encodeBase64, formatMessage, isOwnUser, logChatPromiseExecution, postInsights };
 //# sourceMappingURL=browser.es.js.map