stream-chat 8.38.0 → 8.40.0

package/dist/index.js

@@ -122,9 +122,9 @@ var decodeBase64 = function decodeBase64(s) {
   return r;
 };
 
-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__default['default'](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__default['default'](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; } } }; }
 
@@ -378,89 +378,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__default['default'](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__default['default'](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__default['default'](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__default['default'](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__default['default'](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__default['default'](messageArr);
+  return newMessages;
 }
 
 function maybeGetReactionGroupsFallback(groups, counts, scores) {
@@ -483,11 +514,259 @@ 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__default['default'](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;
+
+  while (left <= right) {
+    var mid = Math.floor((left + right) / 2);
+    var midCreatedAt = array[mid].created_at;
+
+    if (!midCreatedAt) {
+      left += 1;
+      continue;
+    }
+
+    var midDate = new Date(midCreatedAt);
+
+    if (midDate.getTime() === targetDate.getTime()) {
+      return mid;
+    } else if (midDate.getTime() < targetDate.getTime()) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  return left;
 }
 
-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; }
+var messagePaginationCreatedAtAround = function messagePaginationCreatedAtAround(_ref3) {
+  var parentSet = _ref3.parentSet,
+      requestedPageSize = _ref3.requestedPageSize,
+      returnedPage = _ref3.returnedPage,
+      messagePaginationOptions = _ref3.messagePaginationOptions;
+
+  var newPagination = _objectSpread$b({}, parentSet.pagination);
+
+  if (!(messagePaginationOptions !== null && messagePaginationOptions !== void 0 && messagePaginationOptions.created_at_around)) return newPagination;
+  var hasPrev;
+  var hasNext;
+  var updateHasPrev;
+  var updateHasNext;
+  var createdAtAroundDate = new Date(messagePaginationOptions.created_at_around);
+  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;
+  var requestedPageSizeNotMet = requestedPageSize > parentSet.messages.length && requestedPageSize > returnedPage.length;
+  var noMoreMessages = (requestedPageSize > parentSet.messages.length || parentSet.messages.length >= returnedPage.length) && requestedPageSize > returnedPage.length;
+
+  if (wholePageHasNewerMessages) {
+    hasPrev = false;
+    updateHasPrev = true;
+
+    if (requestedPageSizeNotMet) {
+      hasNext = false;
+      updateHasNext = true;
+    }
+  } else if (wholePageHasOlderMessages) {
+    hasNext = false;
+    updateHasNext = true;
+
+    if (requestedPageSizeNotMet) {
+      hasPrev = false;
+      updateHasPrev = true;
+    }
+  } else if (noMoreMessages) {
+    hasNext = hasPrev = false;
+    updateHasPrev = updateHasNext = true;
+  } else {
+    var _parentSet$messages$, _parentSet$messages$s;
 
-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__default['default'](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 firstPageMsgIsFirstInSet = (firstPageMsg === null || firstPageMsg === void 0 ? void 0 : firstPageMsg.id) && firstPageMsg.id === ((_parentSet$messages$ = parentSet.messages[0]) === null || _parentSet$messages$ === void 0 ? void 0 : _parentSet$messages$.id),
+        lastPageMsgIsLastInSet = (lastPageMsg === null || lastPageMsg === void 0 ? void 0 : lastPageMsg.id) && lastPageMsg.id === ((_parentSet$messages$s = parentSet.messages.slice(-1)[0]) === null || _parentSet$messages$s === void 0 ? void 0 : _parentSet$messages$s.id);
+    updateHasPrev = firstPageMsgIsFirstInSet;
+    updateHasNext = lastPageMsgIsLastInSet;
+    var midPointByCount = Math.floor(returnedPage.length / 2);
+    var midPointByCreationDate = binarySearchByDateEqualOrNearestGreater(returnedPage, createdAtAroundDate);
+
+    if (midPointByCreationDate !== -1) {
+      hasPrev = midPointByCount <= midPointByCreationDate;
+      hasNext = midPointByCount >= midPointByCreationDate;
+    }
+  }
+
+  if (updateHasPrev && typeof hasPrev !== 'undefined') newPagination.hasPrev = hasPrev;
+  if (updateHasNext && typeof hasNext !== 'undefined') newPagination.hasNext = hasNext;
+  return newPagination;
+};
+
+var messagePaginationIdAround = function messagePaginationIdAround(_ref5) {
+  var _parentSet$messages$2, _parentSet$messages$s2;
+
+  var parentSet = _ref5.parentSet,
+      requestedPageSize = _ref5.requestedPageSize,
+      returnedPage = _ref5.returnedPage,
+      messagePaginationOptions = _ref5.messagePaginationOptions;
+
+  var newPagination = _objectSpread$b({}, parentSet.pagination);
+
+  var _ref6 = messagePaginationOptions || {},
+      id_around = _ref6.id_around;
+
+  if (!id_around) return newPagination;
+  var hasPrev;
+  var hasNext;
+  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;
+  var updateHasNext = lastPageMsgIsLastInSet;
+  var midPoint = Math.floor(returnedPage.length / 2);
+  var noMoreMessages = (requestedPageSize > parentSet.messages.length || parentSet.messages.length >= returnedPage.length) && requestedPageSize > returnedPage.length;
+
+  if (noMoreMessages) {
+    hasNext = hasPrev = false;
+    updateHasPrev = updateHasNext = true;
+  } else if (!returnedPage[midPoint]) {
+    return newPagination;
+  } else if (returnedPage[midPoint].id === id_around) {
+    hasPrev = hasNext = true;
+  } else {
+    var targetMsg;
+    var halves = [returnedPage.slice(0, midPoint), returnedPage.slice(midPoint)];
+    hasPrev = hasNext = true;
+
+    for (var i = 0; i < halves.length; i++) {
+      targetMsg = halves[i].find(function (message) {
+        return message.id === id_around;
+      });
+
+      if (targetMsg && i === 0) {
+        hasPrev = false;
+      }
+
+      if (targetMsg && i === 1) {
+        hasNext = false;
+      }
+    }
+  }
+
+  if (updateHasPrev && typeof hasPrev !== 'undefined') newPagination.hasPrev = hasPrev;
+  if (updateHasNext && typeof hasNext !== 'undefined') newPagination.hasNext = hasNext;
+  return newPagination;
+};
+
+var messagePaginationLinear = function messagePaginationLinear(_ref8) {
+  var _parentSet$messages$3, _parentSet$messages$s3;
+
+  var parentSet = _ref8.parentSet,
+      requestedPageSize = _ref8.requestedPageSize,
+      returnedPage = _ref8.returnedPage,
+      messagePaginationOptions = _ref8.messagePaginationOptions;
+
+  var newPagination = _objectSpread$b({}, parentSet.pagination);
+
+  var hasPrev;
+  var hasNext;
+  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);
+  var queriedPrevMessages = typeof messagePaginationOptions === 'undefined' ? true : messagePaginationOptions.created_at_before_or_equal || messagePaginationOptions.created_at_before || messagePaginationOptions.id_lt || messagePaginationOptions.id_lte || messagePaginationOptions.offset;
+  var containsUnrecognizedOptionsOnly = !queriedNextMessages && !queriedPrevMessages && !(messagePaginationOptions !== null && messagePaginationOptions !== void 0 && messagePaginationOptions.id_around) && !(messagePaginationOptions !== null && messagePaginationOptions !== void 0 && messagePaginationOptions.created_at_around);
+  var hasMore = returnedPage.length >= requestedPageSize;
+
+  if (typeof queriedPrevMessages !== 'undefined' || containsUnrecognizedOptionsOnly) {
+    hasPrev = hasMore;
+  }
+
+  if (typeof queriedNextMessages !== 'undefined') {
+    hasNext = hasMore;
+  }
+
+  var returnedPageIsEmpty = returnedPage.length === 0;
+  if ((firstPageMsgIsFirstInSet || returnedPageIsEmpty) && typeof hasPrev !== 'undefined') newPagination.hasPrev = hasPrev;
+  if ((lastPageMsgIsLastInSet || returnedPageIsEmpty) && typeof hasNext !== 'undefined') newPagination.hasNext = hasNext;
+  return newPagination;
+};
+
+var messageSetPagination = function messageSetPagination(params) {
+  var _params$messagePagina, _params$messagePagina2;
+
+  if (params.parentSet.messages.length < params.returnedPage.length) {
+    var _params$logger;
+
+    (_params$logger = params.logger) === null || _params$logger === void 0 ? void 0 : _params$logger.call(params, 'error', 'Corrupted message set state: parent set size < returned page size');
+    return params.parentSet.pagination;
+  }
+
+  if ((_params$messagePagina = params.messagePaginationOptions) !== null && _params$messagePagina !== void 0 && _params$messagePagina.created_at_around) {
+    return messagePaginationCreatedAtAround(params);
+  } else if ((_params$messagePagina2 = params.messagePaginationOptions) !== null && _params$messagePagina2 !== void 0 && _params$messagePagina2.id_around) {
+    return messagePaginationIdAround(params);
+  } else {
+    return messagePaginationLinear(params);
+  }
+};
+
+var DEFAULT_QUERY_CHANNELS_MESSAGE_LIST_PAGE_SIZE = 25;
+var DEFAULT_QUERY_CHANNEL_MESSAGE_LIST_PAGE_SIZE = 100;
+var DEFAULT_MESSAGE_SET_PAGINATION = {
+  hasNext: true,
+  hasPrev: true
+};
+
+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$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__default['default'](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.
@@ -542,6 +821,10 @@ var ChannelState = /*#__PURE__*/function () {
 
     _defineProperty__default['default'](this, "messageSets", []);
 
+    _defineProperty__default['default'](this, "formatMessage", function (message) {
+      return formatMessage(message);
+    });
+
     _defineProperty__default['default'](this, "setIsUpToDate", function (isUpToDate) {
       _this.isUpToDate = isUpToDate;
     });
@@ -564,7 +847,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__default['default'](((_message$poll = message.poll) === null || _message$poll === void 0 ? void 0 : _message$poll.own_votes) || []);
 
@@ -586,7 +869,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
       });
 
@@ -601,7 +884,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__default['default'](((_message$poll2 = message.poll) === null || _message$poll2 === void 0 ? void 0 : _message$poll2.own_votes) || []);
 
@@ -611,7 +894,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
       });
 
@@ -626,7 +909,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__default['default'](((_message$poll3 = message.poll) === null || _message$poll3 === void 0 ? void 0 : _message$poll3.own_votes) || []);
 
@@ -642,7 +925,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
       });
 
@@ -656,11 +939,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__default['default'](((_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
       });
 
@@ -675,7 +958,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
             });
           }
@@ -730,9 +1013,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
             });
           }
         }
@@ -809,6 +1092,15 @@ var ChannelState = /*#__PURE__*/function () {
       });
       this.messageSets[index].messages = messages;
     }
+  }, {
+    key: "messagePagination",
+    get: function get() {
+      var _this$messageSets$fin3;
+
+      return ((_this$messageSets$fin3 = this.messageSets.find(function (s) {
+        return s.isCurrent;
+      })) === null || _this$messageSets$fin3 === void 0 ? void 0 : _this$messageSets$fin3.pagination) || DEFAULT_MESSAGE_SET_PAGINATION;
+    }
     /**
      * addMessageSorted - Add a message to the state
      *
@@ -827,28 +1119,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
      *
@@ -859,10 +1138,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;
@@ -1055,7 +1331,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()
@@ -1065,8 +1341,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
             }));
@@ -1262,7 +1538,8 @@ var ChannelState = /*#__PURE__*/function () {
       this.messageSets = [{
         messages: [],
         isLatest: true,
-        isCurrent: true
+        isCurrent: true,
+        pagination: DEFAULT_MESSAGE_SET_PAGINATION
       }];
     }
     /**
@@ -1270,6 +1547,7 @@ var ChannelState = /*#__PURE__*/function () {
      *
      * @param {string} messageId The id of the message, or 'latest' to indicate switching to the latest messages
      * @param {string} parentMessageId The id of the parent message, if we want load a thread reply
+     * @param {number} limit The page size if the message has to be queried from the server
      */
 
   }, {
@@ -1478,7 +1756,8 @@ var ChannelState = /*#__PURE__*/function () {
               this.messageSets.push({
                 messages: [],
                 isCurrent: false,
-                isLatest: false
+                isLatest: false,
+                pagination: DEFAULT_MESSAGE_SET_PAGINATION
               });
               targetMessageSetIndex = this.messageSets.length - 1;
             }
@@ -1519,6 +1798,8 @@ var ChannelState = /*#__PURE__*/function () {
           sources.forEach(function (messageSet) {
             target.isLatest = target.isLatest || messageSet.isLatest;
             target.isCurrent = target.isCurrent || messageSet.isCurrent;
+            target.pagination.hasPrev = messageSet.messages[0].created_at < target.messages[0].created_at ? messageSet.pagination.hasPrev : target.pagination.hasPrev;
+            target.pagination.hasNext = target.messages.slice(-1)[0].created_at < messageSet.messages.slice(-1)[0].created_at ? messageSet.pagination.hasNext : target.pagination.hasNext;
             messagesToAdd = [].concat(_toConsumableArray__default['default'](messagesToAdd), _toConsumableArray__default['default'](messageSet.messages));
           });
           sources.forEach(function (s) {
@@ -1550,13 +1831,13 @@ 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 _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__default['default'](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 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$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__default['default'](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.
  */
+
 var Channel = /*#__PURE__*/function () {
   /**  */
 
@@ -1625,7 +1906,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
@@ -1677,7 +1958,7 @@ var Channel = /*#__PURE__*/function () {
         throw new Error('channel id is not defined');
       }
 
-      return "".concat(_this.getClient().baseURL, "/channels/").concat(_this.type, "/").concat(_this.id);
+      return "".concat(_this.getClient().baseURL, "/channels/").concat(encodeURIComponent(_this.type), "/").concat(encodeURIComponent(_this.id));
     });
 
     var validTypeRe = /^[\w_-]+$/;
@@ -1697,7 +1978,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
 
@@ -1759,7 +2040,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));
 
@@ -1875,7 +2156,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
                   }
@@ -1972,7 +2253,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,
@@ -2033,7 +2314,7 @@ var Channel = /*#__PURE__*/function () {
 
               case 4:
                 _context6.next = 6;
-                return this.getClient().post(this.getClient().baseURL + "/messages/".concat(messageID, "/reaction"), _objectSpread$7({
+                return this.getClient().post(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(messageID), "/reaction"), _objectSpread$9({
                   reaction: reaction
                 }, options));
 
@@ -2073,7 +2354,7 @@ var Channel = /*#__PURE__*/function () {
         throw Error('Deleting a reaction requires specifying both the message and reaction type');
       }
 
-      var url = this.getClient().baseURL + "/messages/".concat(messageID, "/reaction/").concat(reactionType); //provided when server side request
+      var url = this.getClient().baseURL + "/messages/".concat(encodeURIComponent(messageID), "/reaction/").concat(encodeURIComponent(reactionType)); //provided when server side request
 
       if (user_id) {
         return this.getClient().delete(url, {
@@ -2114,7 +2395,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));
@@ -2286,7 +2567,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);
@@ -2362,7 +2643,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));
 
@@ -2403,7 +2684,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));
 
@@ -2445,7 +2726,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));
@@ -2488,7 +2769,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));
@@ -2531,7 +2812,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));
@@ -2574,7 +2855,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));
@@ -2617,7 +2898,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));
@@ -2660,7 +2941,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));
@@ -2745,7 +3026,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));
 
@@ -2787,7 +3068,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));
 
@@ -2829,7 +3110,7 @@ var Channel = /*#__PURE__*/function () {
         throw Error("Message id is missing");
       }
 
-      return this.getClient().post(this.getClient().baseURL + "/messages/".concat(messageID, "/action"), {
+      return this.getClient().post(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(messageID), "/action"), {
         message_id: messageID,
         form_data: formData,
         id: this.id,
@@ -2872,7 +3153,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 || {}));
@@ -2916,7 +3197,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 || {}));
@@ -3003,7 +3284,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);
@@ -3050,7 +3331,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);
@@ -3118,7 +3399,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');
 
@@ -3191,7 +3472,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}
@@ -3210,7 +3493,7 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 normalizedSort = sort ? normalizeQuerySort(sort) : undefined;
                 _context30.next = 3;
-                return this.getClient().get(this.getClient().baseURL + "/messages/".concat(parent_id, "/replies"), _objectSpread$7({
+                return this.getClient().get(this.getClient().baseURL + "/messages/".concat(encodeURIComponent(parent_id), "/replies"), _objectSpread$9({
                   sort: normalizedSort
                 }, options));
 
@@ -3259,8 +3542,8 @@ var Channel = /*#__PURE__*/function () {
               case 0:
                 sort = _args31.length > 1 && _args31[1] !== undefined ? _args31[1] : [];
                 _context31.next = 3;
-                return this.getClient().get(this.getClient().baseURL + "/channels/".concat(this.type, "/").concat(this.id, "/pinned_messages"), {
-                  payload: _objectSpread$7(_objectSpread$7({}, options), {}, {
+                return this.getClient().get(this._channelURL() + '/pinned_messages', {
+                  payload: _objectSpread$9(_objectSpread$9({}, options), {}, {
                     sort: normalizeQuerySort(sort)
                   })
                 });
@@ -3294,7 +3577,7 @@ var Channel = /*#__PURE__*/function () {
   }, {
     key: "getReactions",
     value: function getReactions(message_id, options) {
-      return this.getClient().get(this.getClient().baseURL + "/messages/".concat(message_id, "/reactions"), _objectSpread$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
@@ -3414,7 +3697,7 @@ var Channel = /*#__PURE__*/function () {
      */
     function () {
       var _query = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee32(options) {
-        var _this$data6, _this$data7;
+        var _options$messages$lim, _options$messages, _this$data6, _this$data7;
 
         var messageSetToAddToIfDoesNotExist,
             queryURL,
@@ -3435,14 +3718,14 @@ var Channel = /*#__PURE__*/function () {
                 return this.getClient().wsPromise;
 
               case 3:
-                queryURL = "".concat(this.getClient().baseURL, "/channels/").concat(this.type);
+                queryURL = "".concat(this.getClient().baseURL, "/channels/").concat(encodeURIComponent(this.type));
 
                 if (this.id) {
-                  queryURL += "/".concat(this.id);
+                  queryURL += "/".concat(encodeURIComponent(this.id));
                 }
 
                 _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));
@@ -3477,6 +3760,13 @@ var Channel = /*#__PURE__*/function () {
 
 
                 _this$_initializeStat = this._initializeState(state, messageSetToAddToIfDoesNotExist), messageSet = _this$_initializeStat.messageSet;
+                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,
+                  returnedPage: state.messages,
+                  logger: this.getClient().logger
+                }));
                 areCapabilitiesChanged = _toConsumableArray__default['default'](state.channel.own_capabilities || []).sort().join() !== _toConsumableArray__default['default'](Array.isArray((_this$data6 = this.data) === null || _this$data6 === void 0 ? void 0 : _this$data6.own_capabilities) ? (_this$data7 = this.data) === null || _this$data7 === void 0 ? void 0 : _this$data7.own_capabilities : []).sort().join();
                 this.data = state.channel;
                 this.offlineMode = false;
@@ -3498,7 +3788,7 @@ var Channel = /*#__PURE__*/function () {
                 });
                 return _context32.abrupt("return", state);
 
-              case 17:
+              case 18:
               case "end":
                 return _context32.stop();
             }
@@ -3531,7 +3821,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
                 }));
@@ -3703,7 +3993,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
                 }));
@@ -4157,7 +4447,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
             });
@@ -4231,7 +4521,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
           });
 
@@ -4242,26 +4532,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
@@ -4515,9 +4805,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__default['default'](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__default['default'](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__default['default'](this, InsightMetrics);
 
@@ -4596,7 +4886,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) {
@@ -4629,9 +4919,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__default['default'](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__default['default'](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) {
@@ -4995,7 +5285,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));
     }
@@ -5586,9 +5876,9 @@ var StableWSConnection = /*#__PURE__*/function () {
   return StableWSConnection;
 }();
 
-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__default['default'](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__default['default'](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
@@ -5609,7 +5899,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)
 
@@ -6019,9 +6309,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__default['default'](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__default['default'](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) {
@@ -6084,7 +6374,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
@@ -6362,7 +6652,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));
     }
@@ -6942,168 +7232,710 @@ exports.VotingVisibility = void 0;
   VotingVisibility["public"] = "public";
 })(exports.VotingVisibility || (exports.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__default['default'](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__default['default'](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__default['default'](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__default['default'](this, "handlerSet", new Set());
+
+  _defineProperty__default['default'](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__default['default'](this, "partialNext", function (partial) {
+    return _this.next(function (current) {
+      return _objectSpread$4(_objectSpread$4({}, current), partial);
+    });
+  });
+
+  _defineProperty__default['default'](this, "getLatestValue", function () {
+    return _this.value;
+  });
+
+  _defineProperty__default['default'](this, "subscribe", function (handler) {
+    handler(_this.value, undefined);
+
+    _this.handlerSet.add(handler);
+
+    return function () {
+      _this.handlerSet.delete(handler);
+    };
+  });
+
+  _defineProperty__default['default'](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__default['default'](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__default['default'](this, Thread);
 
+    _defineProperty__default['default'](this, "state", void 0);
+
     _defineProperty__default['default'](this, "id", void 0);
 
-    _defineProperty__default['default'](this, "latestReplies", []);
+    _defineProperty__default['default'](this, "client", void 0);
 
-    _defineProperty__default['default'](this, "participants", []);
+    _defineProperty__default['default'](this, "unsubscribeFunctions", new Set());
 
-    _defineProperty__default['default'](this, "message", void 0);
+    _defineProperty__default['default'](this, "failedRepliesMap", new Map());
 
-    _defineProperty__default['default'](this, "channel", void 0);
+    _defineProperty__default['default'](this, "activate", function () {
+      _this.state.partialNext({
+        active: true
+      });
+    });
 
-    _defineProperty__default['default'](this, "_channel", void 0);
+    _defineProperty__default['default'](this, "deactivate", function () {
+      _this.state.partialNext({
+        active: false
+      });
+    });
 
-    _defineProperty__default['default'](this, "replyCount", 0);
+    _defineProperty__default['default'](this, "reload", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+      var thread;
+      return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!_this.state.getLatestValue().isLoading) {
+                _context.next = 2;
+                break;
+              }
 
-    _defineProperty__default['default'](this, "_client", void 0);
+              return _context.abrupt("return");
 
-    _defineProperty__default['default'](this, "read", {});
-
-    _defineProperty__default['default'](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__default['default'](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__default['default'](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__default['default'](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);
-        return;
-      }
+      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
 
-      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;
 
-      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));
-        }
+      var pendingReplies = Array.from(_this.failedRepliesMap.values());
 
-        return m;
+      _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
       });
-    }
-  }, {
-    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__default['default'](this, "registerSubscriptions", function () {
+      if (_this.unsubscribeFunctions.size) {
+        // Thread is already listening for events and changes
+        return;
+      }
 
-        return m;
-      });
-    }
-  }]);
+      _this.unsubscribeFunctions.add(_this.subscribeMarkActiveThreadRead());
 
-  return Thread;
-}();
+      _this.unsubscribeFunctions.add(_this.subscribeReloadActiveStaleThread());
 
-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; }
+      _this.unsubscribeFunctions.add(_this.subscribeMarkThreadStale());
 
-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__default['default'](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; }
+      _this.unsubscribeFunctions.add(_this.subscribeNewReplies());
+
+      _this.unsubscribeFunctions.add(_this.subscribeRepliesRead());
+
+      _this.unsubscribeFunctions.add(_this.subscribeReplyDeleted());
+
+      _this.unsubscribeFunctions.add(_this.subscribeMessageUpdated());
+    });
+
+    _defineProperty__default['default'](this, "subscribeMarkActiveThreadRead", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.active, ownUnreadCountSelector(_this.client.userID)(nextValue)];
+      }, function (_ref3) {
+        var _ref4 = _slicedToArray__default['default'](_ref3, 2),
+            active = _ref4[0],
+            unreadMessageCount = _ref4[1];
+
+        if (!active || !unreadMessageCount) return;
+
+        _this.throttledMarkAsRead();
+      });
+    });
+
+    _defineProperty__default['default'](this, "subscribeReloadActiveStaleThread", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.active, nextValue.isStateStale];
+      }, function (_ref5) {
+        var _ref6 = _slicedToArray__default['default'](_ref5, 2),
+            active = _ref6[0],
+            isStateStale = _ref6[1];
+
+        if (active && isStateStale) {
+          _this.reload();
+        }
+      });
+    });
+
+    _defineProperty__default['default'](this, "subscribeMarkThreadStale", function () {
+      return _this.client.on('user.watching.stop', function (event) {
+        var _event$user, _event$channel;
+
+        var _this$state$getLatest = _this.state.getLatestValue(),
+            channel = _this$state$getLatest.channel;
+
+        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;
+        }
+
+        _this.state.partialNext({
+          isStateStale: true
+        });
+      }).unsubscribe;
+    });
+
+    _defineProperty__default['default'](this, "subscribeNewReplies", function () {
+      return _this.client.on('message.new', function (event) {
+        var _event$message, _event$message$user;
+
+        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;
+
+        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__default['default'](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__default['default']({}, userId, {
+              lastReadAt: new Date(createdAt),
+              user: user,
+              lastReadMessageId: event.last_read_message_id,
+              unreadMessageCount: 0
+            }))
+          });
+        });
+      }).unsubscribe;
+    });
+
+    _defineProperty__default['default'](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__default['default'](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__default['default'](this, "unregisterSubscriptions", function () {
+      _this.unsubscribeFunctions.forEach(function (cleanupFunction) {
+        return cleanupFunction();
+      });
+
+      _this.unsubscribeFunctions.clear();
+    });
+
+    _defineProperty__default['default'](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__default['default'](replies);
+
+      updatedReplies.splice(actualIndex, 1);
+
+      _this.state.partialNext({
+        replies: updatedReplies
+      });
+    });
+
+    _defineProperty__default['default'](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__default['default'](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__default['default'](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__default['default'](this, "markAsRead", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
+      var _ref10,
+          _ref10$force,
+          force,
+          _args2 = arguments;
+
+      return _regeneratorRuntime__default['default'].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__default['default'](this, "throttledMarkAsRead", throttle(function () {
+      return _this.markAsRead();
+    }, MARK_AS_READ_THROTTLE_TIMEOUT, {
+      trailing: true
+    }));
+
+    _defineProperty__default['default'](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__default['default'](_ref11, _excluded$1);
+
+      return _this.channel.getReplies(_this.id, _objectSpread$3({
+        limit: limit
+      }, otherOptions), sort);
+    });
+
+    _defineProperty__default['default'](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__default['default'](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__default['default'](this, "loadPage", /*#__PURE__*/function () {
+      var _ref14 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].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__default['default'].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__default['default'](_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__default['default']({}, count > 0 ? 'id_gt' : 'id_lt', pagination[cursorKey]);
+                limit = Math.abs(count);
+
+                _this.state.partialNext({
+                  pagination: _objectSpread$3(_objectSpread$3({}, pagination), {}, _defineProperty__default['default']({}, 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__default['default'](current.replies);
+
+                    (_nextReplies = nextReplies)[insertionMethodKey].apply(_nextReplies, _toConsumableArray__default['default'](replies));
+                  }
+
+                  return _objectSpread$3(_objectSpread$3({}, current), {}, {
+                    replies: nextReplies,
+                    pagination: _objectSpread$3(_objectSpread$3({}, current.pagination), {}, (_objectSpread4 = {}, _defineProperty__default['default'](_objectSpread4, cursorKey, data.messages.length < limit ? null : maybeNextCursor), _defineProperty__default['default'](_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__default['default']({}, 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__default['default'](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__default['default'](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'
@@ -7220,7 +8052,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,
@@ -7265,7 +8097,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));
 
@@ -7303,7 +8135,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));
 
@@ -7345,7 +8177,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));
 
@@ -7389,7 +8221,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));
@@ -7492,7 +8324,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));
@@ -7519,6 +8351,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__default['default'](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__default['default'](this, ThreadManager);
+
+    _defineProperty__default['default'](this, "state", void 0);
+
+    _defineProperty__default['default'](this, "client", void 0);
+
+    _defineProperty__default['default'](this, "unsubscribeFunctions", new Set());
+
+    _defineProperty__default['default'](this, "threadsByIdGetterCache", void 0);
+
+    _defineProperty__default['default'](this, "activate", function () {
+      _this.state.partialNext({
+        active: true
+      });
+    });
+
+    _defineProperty__default['default'](this, "deactivate", function () {
+      _this.state.partialNext({
+        active: false
+      });
+    });
+
+    _defineProperty__default['default'](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__default['default'](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__default['default'](this, "subscribeManageThreadSubscriptions", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.threads];
+      }, function (_ref5, prev) {
+        var _ref6 = _slicedToArray__default['default'](_ref5, 1),
+            nextThreads = _ref6[0];
+
+        var _ref7 = prev !== null && prev !== void 0 ? prev : [],
+            _ref8 = _slicedToArray__default['default'](_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__default['default'](this, "subscribeReloadOnActivation", function () {
+      return _this.state.subscribeWithSelector(function (nextValue) {
+        return [nextValue.active];
+      }, function (_ref9) {
+        var _ref10 = _slicedToArray__default['default'](_ref9, 1),
+            active = _ref10[0];
+
+        if (active) _this.reload();
+      });
+    });
+
+    _defineProperty__default['default'](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__default['default'](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__default['default'](this, "unregisterSubscriptions", function () {
+      _this.state.getLatestValue().threads.forEach(function (thread) {
+        return thread.unregisterSubscriptions();
+      });
+
+      _this.unsubscribeFunctions.forEach(function (cleanupFunction) {
+        return cleanupFunction();
+      });
+
+      _this.unsubscribeFunctions.clear();
+    });
+
+    _defineProperty__default['default'](this, "reload", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].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__default['default'].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__default['default'](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__default['default'](this, "loadNextPage", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
+      var options,
+          _this$state$getLatest4,
+          pagination,
+          response,
+          _args2 = arguments;
+
+      return _regeneratorRuntime__default['default'].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__default['default'](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"];
 
@@ -7547,6 +8827,8 @@ var StreamChat = /*#__PURE__*/function () {
 
     _defineProperty__default['default'](this, "activeChannels", void 0);
 
+    _defineProperty__default['default'](this, "threads", void 0);
+
     _defineProperty__default['default'](this, "anonymous", void 0);
 
     _defineProperty__default['default'](this, "persistUserOnConnectionFailure", void 0);
@@ -7778,7 +9060,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());
@@ -8386,8 +9668,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:
@@ -8442,6 +9724,9 @@ var StreamChat = /*#__PURE__*/function () {
       return null;
     };
     this.recoverStateOnReconnect = this.options.recoverStateOnReconnect;
+    this.threads = new ThreadManager({
+      client: this
+    });
   }
   /**
    * Get a client instance
@@ -9592,7 +10877,7 @@ var StreamChat = /*#__PURE__*/function () {
                     isLatestMessageSet: true
                   }
                 });
-                return _context20.abrupt("return", this.hydrateActiveChannels(data.channels, stateOptions));
+                return _context20.abrupt("return", this.hydrateActiveChannels(data.channels, stateOptions, options));
 
               case 13:
               case "end":
@@ -9642,7 +10927,7 @@ var StreamChat = /*#__PURE__*/function () {
                   sort: normalizeQuerySort(sort)
                 }, options);
                 _context21.next = 7;
-                return this.post(this.baseURL + '/messages/' + messageID + '/reactions', payload);
+                return this.post(this.baseURL + '/messages/' + encodeURIComponent(messageID) + '/reactions', payload);
 
               case 7:
                 return _context21.abrupt("return", _context21.sent);
@@ -9666,9 +10951,11 @@ var StreamChat = /*#__PURE__*/function () {
     value: function hydrateActiveChannels() {
       var channelsFromApi = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       var stateOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var queryChannelsOptions = arguments.length > 2 ? arguments[2] : undefined;
       var skipInitialization = stateOptions.skipInitialization,
           _stateOptions$offline = stateOptions.offlineMode,
           offlineMode = _stateOptions$offline === void 0 ? false : _stateOptions$offline;
+      var channels = [];
 
       var _iterator2 = _createForOfIteratorHelper(channelsFromApi),
           _step2;
@@ -9678,40 +10965,42 @@ var StreamChat = /*#__PURE__*/function () {
           var channelState = _step2.value;
 
           this._addChannelConfig(channelState.channel);
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-
-      var channels = [];
 
-      var _iterator3 = _createForOfIteratorHelper(channelsFromApi),
-          _step3;
-
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var _channelState = _step3.value;
-          var c = this.channel(_channelState.channel.type, _channelState.channel.id);
-          c.data = _channelState.channel;
+          var c = this.channel(channelState.channel.type, channelState.channel.id);
+          c.data = channelState.channel;
           c.offlineMode = offlineMode;
           c.initialized = !offlineMode;
+          var updatedMessagesSet = void 0;
 
           if (skipInitialization === undefined) {
-            c._initializeState(_channelState, 'latest');
-          } else if (!skipInitialization.includes(_channelState.channel.id)) {
+            var _c$_initializeState = c._initializeState(channelState, 'latest'),
+                messageSet = _c$_initializeState.messageSet;
+
+            updatedMessagesSet = messageSet;
+          } else if (!skipInitialization.includes(channelState.channel.id)) {
             c.state.clearMessages();
 
-            c._initializeState(_channelState, 'latest');
+            var _c$_initializeState2 = c._initializeState(channelState, 'latest'),
+                _messageSet = _c$_initializeState2.messageSet;
+
+            updatedMessagesSet = _messageSet;
+          }
+
+          if (updatedMessagesSet) {
+            updatedMessagesSet.pagination = _objectSpread(_objectSpread({}, updatedMessagesSet.pagination), messageSetPagination({
+              parentSet: updatedMessagesSet,
+              requestedPageSize: (queryChannelsOptions === null || queryChannelsOptions === void 0 ? void 0 : queryChannelsOptions.message_limit) || DEFAULT_QUERY_CHANNELS_MESSAGE_LIST_PAGE_SIZE,
+              returnedPage: channelState.messages,
+              logger: this.logger
+            }));
           }
 
           channels.push(c);
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator3.f();
+        _iterator2.f();
       }
 
       return channels;
@@ -10184,25 +11473,25 @@ var StreamChat = /*#__PURE__*/function () {
     key: "upsertUsers",
     value: function () {
       var _upsertUsers = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee30(users) {
-        var userMap, _iterator4, _step4, userObject;
+        var userMap, _iterator3, _step3, userObject;
 
         return _regeneratorRuntime__default['default'].wrap(function _callee30$(_context30) {
           while (1) {
             switch (_context30.prev = _context30.next) {
               case 0:
                 userMap = {};
-                _iterator4 = _createForOfIteratorHelper(users);
+                _iterator3 = _createForOfIteratorHelper(users);
                 _context30.prev = 2;
 
-                _iterator4.s();
+                _iterator3.s();
 
               case 4:
-                if ((_step4 = _iterator4.n()).done) {
+                if ((_step3 = _iterator3.n()).done) {
                   _context30.next = 11;
                   break;
                 }
 
-                userObject = _step4.value;
+                userObject = _step3.value;
 
                 if (userObject.id) {
                   _context30.next = 8;
@@ -10226,12 +11515,12 @@ var StreamChat = /*#__PURE__*/function () {
                 _context30.prev = 13;
                 _context30.t0 = _context30["catch"](2);
 
-                _iterator4.e(_context30.t0);
+                _iterator3.e(_context30.t0);
 
               case 16:
                 _context30.prev = 16;
 
-                _iterator4.f();
+                _iterator3.f();
 
                 return _context30.finish(16);
 
@@ -10301,24 +11590,24 @@ var StreamChat = /*#__PURE__*/function () {
      */
     function () {
       var _partialUpdateUsers = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee31(users) {
-        var _iterator5, _step5, userObject;
+        var _iterator4, _step4, userObject;
 
         return _regeneratorRuntime__default['default'].wrap(function _callee31$(_context31) {
           while (1) {
             switch (_context31.prev = _context31.next) {
               case 0:
-                _iterator5 = _createForOfIteratorHelper(users);
+                _iterator4 = _createForOfIteratorHelper(users);
                 _context31.prev = 1;
 
-                _iterator5.s();
+                _iterator4.s();
 
               case 3:
-                if ((_step5 = _iterator5.n()).done) {
+                if ((_step4 = _iterator4.n()).done) {
                   _context31.next = 9;
                   break;
                 }
 
-                userObject = _step5.value;
+                userObject = _step4.value;
 
                 if (userObject.id) {
                   _context31.next = 7;
@@ -10339,12 +11628,12 @@ var StreamChat = /*#__PURE__*/function () {
                 _context31.prev = 11;
                 _context31.t0 = _context31["catch"](1);
 
-                _iterator5.e(_context31.t0);
+                _iterator4.e(_context31.t0);
 
               case 14:
                 _context31.prev = 14;
 
-                _iterator5.f();
+                _iterator4.f();
 
                 return _context31.finish(14);
 
@@ -10380,7 +11669,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context32.prev = _context32.next) {
               case 0:
                 _context32.next = 2;
-                return this.delete(this.baseURL + "/users/".concat(userID), params);
+                return this.delete(this.baseURL + "/users/".concat(encodeURIComponent(userID)), params);
 
               case 2:
                 return _context32.abrupt("return", _context32.sent);
@@ -10455,7 +11744,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context34.prev = _context34.next) {
               case 0:
                 _context34.next = 2;
-                return this.post(this.baseURL + "/users/".concat(userID, "/reactivate"), _objectSpread({}, options));
+                return this.post(this.baseURL + "/users/".concat(encodeURIComponent(userID), "/reactivate"), _objectSpread({}, options));
 
               case 2:
                 return _context34.abrupt("return", _context34.sent);
@@ -10531,7 +11820,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context36.prev = _context36.next) {
               case 0:
                 _context36.next = 2;
-                return this.post(this.baseURL + "/users/".concat(userID, "/deactivate"), _objectSpread({}, options));
+                return this.post(this.baseURL + "/users/".concat(encodeURIComponent(userID), "/deactivate"), _objectSpread({}, options));
 
               case 2:
                 return _context36.abrupt("return", _context36.sent);
@@ -10598,7 +11887,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context38.prev = _context38.next) {
               case 0:
                 _context38.next = 2;
-                return this.get(this.baseURL + "/users/".concat(userID, "/export"), _objectSpread({}, options));
+                return this.get(this.baseURL + "/users/".concat(encodeURIComponent(userID), "/export"), _objectSpread({}, options));
 
               case 2:
                 return _context38.abrupt("return", _context38.sent);
@@ -11140,7 +12429,7 @@ var StreamChat = /*#__PURE__*/function () {
               case 0:
                 options = _args52.length > 1 && _args52[1] !== undefined ? _args52[1] : {};
                 _context52.next = 3;
-                return this.post(this.baseURL + "/calls/".concat(callID), _objectSpread({}, options));
+                return this.post(this.baseURL + "/calls/".concat(encodeURIComponent(callID)), _objectSpread({}, options));
 
               case 3:
                 return _context52.abrupt("return", _context52.sent);
@@ -11284,7 +12573,7 @@ var StreamChat = /*#__PURE__*/function () {
               case 0:
                 options = _args55.length > 2 && _args55[2] !== undefined ? _args55[2] : {};
                 _context55.next = 3;
-                return this.patch(this.baseURL + "/moderation/reports/".concat(id), _objectSpread({
+                return this.patch(this.baseURL + "/moderation/reports/".concat(encodeURIComponent(id)), _objectSpread({
                   review_result: reviewResult
                 }, options));
 
@@ -11393,17 +12682,17 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getCommand",
     value: function getCommand(name) {
-      return this.get(this.baseURL + "/commands/".concat(name));
+      return this.get(this.baseURL + "/commands/".concat(encodeURIComponent(name)));
     }
   }, {
     key: "updateCommand",
     value: function updateCommand(name, data) {
-      return this.put(this.baseURL + "/commands/".concat(name), data);
+      return this.put(this.baseURL + "/commands/".concat(encodeURIComponent(name)), data);
     }
   }, {
     key: "deleteCommand",
     value: function deleteCommand(name) {
-      return this.delete(this.baseURL + "/commands/".concat(name));
+      return this.delete(this.baseURL + "/commands/".concat(encodeURIComponent(name)));
     }
   }, {
     key: "listCommands",
@@ -11422,17 +12711,17 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getChannelType",
     value: function getChannelType(channelType) {
-      return this.get(this.baseURL + "/channeltypes/".concat(channelType));
+      return this.get(this.baseURL + "/channeltypes/".concat(encodeURIComponent(channelType)));
     }
   }, {
     key: "updateChannelType",
     value: function updateChannelType(channelType, data) {
-      return this.put(this.baseURL + "/channeltypes/".concat(channelType), data);
+      return this.put(this.baseURL + "/channeltypes/".concat(encodeURIComponent(channelType)), data);
     }
   }, {
     key: "deleteChannelType",
     value: function deleteChannelType(channelType) {
-      return this.delete(this.baseURL + "/channeltypes/".concat(channelType));
+      return this.delete(this.baseURL + "/channeltypes/".concat(encodeURIComponent(channelType)));
     }
   }, {
     key: "listChannelTypes",
@@ -11457,7 +12746,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context58.prev = _context58.next) {
               case 0:
                 _context58.next = 2;
-                return this.post(this.baseURL + "/messages/".concat(messageId, "/translate"), {
+                return this.post(this.baseURL + "/messages/".concat(encodeURIComponent(messageId), "/translate"), {
                   language: language
                 });
 
@@ -11619,7 +12908,7 @@ var StreamChat = /*#__PURE__*/function () {
                 }
 
                 _context59.next = 10;
-                return this.post(this.baseURL + "/messages/".concat(message.id), _objectSpread({
+                return this.post(this.baseURL + "/messages/".concat(encodeURIComponent(message.id)), _objectSpread({
                   message: clonedMessage
                 }, options));
 
@@ -11680,7 +12969,7 @@ var StreamChat = /*#__PURE__*/function () {
                 }
 
                 _context60.next = 6;
-                return this.put(this.baseURL + "/messages/".concat(id), _objectSpread(_objectSpread(_objectSpread({}, partialMessageObject), options), {}, {
+                return this.put(this.baseURL + "/messages/".concat(encodeURIComponent(id)), _objectSpread(_objectSpread(_objectSpread({}, partialMessageObject), options), {}, {
                   user: user
                 }));
 
@@ -11719,7 +13008,7 @@ var StreamChat = /*#__PURE__*/function () {
                 }
 
                 _context61.next = 4;
-                return this.delete(this.baseURL + "/messages/".concat(messageID), params);
+                return this.delete(this.baseURL + "/messages/".concat(encodeURIComponent(messageID)), params);
 
               case 4:
                 return _context61.abrupt("return", _context61.sent);
@@ -11760,7 +13049,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context62.prev = _context62.next) {
               case 0:
                 _context62.next = 2;
-                return this.post(this.baseURL + "/messages/".concat(messageID, "/undelete"), {
+                return this.post(this.baseURL + "/messages/".concat(encodeURIComponent(messageID), "/undelete"), {
                   undeleted_by: userID
                 });
 
@@ -11845,7 +13134,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
                 });
@@ -11904,11 +13196,14 @@ var StreamChat = /*#__PURE__*/function () {
                   watch: true
                 }, options);
                 _context65.next = 6;
-                return this.get(this.baseURL + "/threads/".concat(messageId), opts);
+                return this.get(this.baseURL + "/threads/".concat(encodeURIComponent(messageId)), opts);
 
               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":
@@ -11977,7 +13272,7 @@ var StreamChat = /*#__PURE__*/function () {
 
               case 10:
                 _context66.next = 12;
-                return this.patch(this.baseURL + "/threads/".concat(messageId), partialThreadObject);
+                return this.patch(this.baseURL + "/threads/".concat(encodeURIComponent(messageId)), partialThreadObject);
 
               case 12:
                 return _context66.abrupt("return", _context66.sent);
@@ -11999,7 +13294,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getUserAgent",
     value: function getUserAgent() {
-      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "8.38.0");
+      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "8.40.0");
     }
   }, {
     key: "setUserAgent",
@@ -12109,7 +13404,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getPermission",
     value: function getPermission(name) {
-      return this.get("".concat(this.baseURL, "/permissions/").concat(name));
+      return this.get("".concat(this.baseURL, "/permissions/").concat(encodeURIComponent(name)));
     }
     /** createPermission - creates a custom permission
      *
@@ -12132,7 +13427,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "updatePermission",
     value: function updatePermission(id, permissionData) {
-      return this.put("".concat(this.baseURL, "/permissions/").concat(id), _objectSpread({}, permissionData));
+      return this.put("".concat(this.baseURL, "/permissions/").concat(encodeURIComponent(id)), _objectSpread({}, permissionData));
     }
     /** deletePermission - deletes a custom permission
      *
@@ -12143,7 +13438,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "deletePermission",
     value: function deletePermission(name) {
-      return this.delete("".concat(this.baseURL, "/permissions/").concat(name));
+      return this.delete("".concat(this.baseURL, "/permissions/").concat(encodeURIComponent(name)));
     }
     /** listPermissions - returns the list of all permissions for this application
      *
@@ -12187,7 +13482,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "deleteRole",
     value: function deleteRole(name) {
-      return this.delete("".concat(this.baseURL, "/roles/").concat(name));
+      return this.delete("".concat(this.baseURL, "/roles/").concat(encodeURIComponent(name)));
     }
     /** sync - returns all events that happened for a list of channels since last sync
      * @param {string[]} channel_cids list of channel CIDs
@@ -12224,7 +13519,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context67.prev = _context67.next) {
               case 0:
                 _context67.next = 2;
-                return this.post("".concat(this.baseURL, "/users/").concat(targetUserID, "/event"), {
+                return this.post("".concat(this.baseURL, "/users/").concat(encodeURIComponent(targetUserID), "/event"), {
                   event: event
                 });
 
@@ -12258,17 +13553,17 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getBlockList",
     value: function getBlockList(name) {
-      return this.get("".concat(this.baseURL, "/blocklists/").concat(name));
+      return this.get("".concat(this.baseURL, "/blocklists/").concat(encodeURIComponent(name)));
     }
   }, {
     key: "updateBlockList",
     value: function updateBlockList(name, data) {
-      return this.put("".concat(this.baseURL, "/blocklists/").concat(name), data);
+      return this.put("".concat(this.baseURL, "/blocklists/").concat(encodeURIComponent(name)), data);
     }
   }, {
     key: "deleteBlockList",
     value: function deleteBlockList(name) {
-      return this.delete("".concat(this.baseURL, "/blocklists/").concat(name));
+      return this.delete("".concat(this.baseURL, "/blocklists/").concat(encodeURIComponent(name)));
     }
   }, {
     key: "exportChannels",
@@ -12294,7 +13589,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getExportChannelStatus",
     value: function getExportChannelStatus(id) {
-      return this.get("".concat(this.baseURL, "/export_channels/").concat(id));
+      return this.get("".concat(this.baseURL, "/export_channels/").concat(encodeURIComponent(id)));
     }
   }, {
     key: "campaign",
@@ -12442,7 +13737,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context71.prev = _context71.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context71.abrupt("return", this.get(this.baseURL + "/segments/".concat(id)));
+                return _context71.abrupt("return", this.get(this.baseURL + "/segments/".concat(encodeURIComponent(id))));
 
               case 2:
               case "end":
@@ -12476,7 +13771,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context72.prev = _context72.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context72.abrupt("return", this.put(this.baseURL + "/segments/".concat(id), data));
+                return _context72.abrupt("return", this.put(this.baseURL + "/segments/".concat(encodeURIComponent(id)), data));
 
               case 2:
               case "end":
@@ -12514,7 +13809,7 @@ var StreamChat = /*#__PURE__*/function () {
                 body = {
                   target_ids: targets
                 };
-                return _context73.abrupt("return", this.post(this.baseURL + "/segments/".concat(id, "/addtargets"), body));
+                return _context73.abrupt("return", this.post(this.baseURL + "/segments/".concat(encodeURIComponent(id), "/addtargets"), body));
 
               case 3:
               case "end":
@@ -12546,7 +13841,7 @@ var StreamChat = /*#__PURE__*/function () {
                 sort = _args74.length > 2 && _args74[2] !== undefined ? _args74[2] : [];
                 options = _args74.length > 3 && _args74[3] !== undefined ? _args74[3] : {};
                 this.validateServerSideAuth();
-                return _context74.abrupt("return", this.post(this.baseURL + "/segments/".concat(id, "/targets/query"), _objectSpread({
+                return _context74.abrupt("return", this.post(this.baseURL + "/segments/".concat(encodeURIComponent(id), "/targets/query"), _objectSpread({
                   filter: filter || {},
                   sort: sort || []
                 }, options)));
@@ -12587,7 +13882,7 @@ var StreamChat = /*#__PURE__*/function () {
                 body = {
                   target_ids: targets
                 };
-                return _context75.abrupt("return", this.post(this.baseURL + "/segments/".concat(id, "/deletetargets"), body));
+                return _context75.abrupt("return", this.post(this.baseURL + "/segments/".concat(encodeURIComponent(id), "/deletetargets"), body));
 
               case 3:
               case "end":
@@ -12660,7 +13955,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context77.prev = _context77.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context77.abrupt("return", this.delete(this.baseURL + "/segments/".concat(id)));
+                return _context77.abrupt("return", this.delete(this.baseURL + "/segments/".concat(encodeURIComponent(id))));
 
               case 2:
               case "end":
@@ -12694,7 +13989,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context78.prev = _context78.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context78.abrupt("return", this.get(this.baseURL + "/segments/".concat(segmentId, "/target/").concat(targetId)));
+                return _context78.abrupt("return", this.get(this.baseURL + "/segments/".concat(encodeURIComponent(segmentId), "/target/").concat(encodeURIComponent(targetId))));
 
               case 2:
               case "end":
@@ -12752,7 +14047,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context80.prev = _context80.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context80.abrupt("return", this.get(this.baseURL + "/campaigns/".concat(id)));
+                return _context80.abrupt("return", this.get(this.baseURL + "/campaigns/".concat(encodeURIComponent(id))));
 
               case 2:
               case "end":
@@ -12777,7 +14072,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context81.prev = _context81.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context81.abrupt("return", this.post(this.baseURL + "/campaigns/".concat(id, "/start"), {
+                return _context81.abrupt("return", this.post(this.baseURL + "/campaigns/".concat(encodeURIComponent(id), "/start"), {
                   scheduled_for: options === null || options === void 0 ? void 0 : options.scheduledFor,
                   stop_at: options === null || options === void 0 ? void 0 : options.stopAt
                 }));
@@ -12853,7 +14148,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context83.prev = _context83.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context83.abrupt("return", this.put(this.baseURL + "/campaigns/".concat(id), params));
+                return _context83.abrupt("return", this.put(this.baseURL + "/campaigns/".concat(encodeURIComponent(id)), params));
 
               case 2:
               case "end":
@@ -12886,7 +14181,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context84.prev = _context84.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context84.abrupt("return", this.delete(this.baseURL + "/campaigns/".concat(id)));
+                return _context84.abrupt("return", this.delete(this.baseURL + "/campaigns/".concat(encodeURIComponent(id))));
 
               case 2:
               case "end":
@@ -12919,7 +14214,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context85.prev = _context85.next) {
               case 0:
                 this.validateServerSideAuth();
-                return _context85.abrupt("return", this.post(this.baseURL + "/campaigns/".concat(id, "/stop")));
+                return _context85.abrupt("return", this.post(this.baseURL + "/campaigns/".concat(encodeURIComponent(id), "/stop")));
 
               case 2:
               case "end":
@@ -12984,7 +14279,7 @@ var StreamChat = /*#__PURE__*/function () {
           while (1) {
             switch (_context87.prev = _context87.next) {
               case 0:
-                return _context87.abrupt("return", this.get("".concat(this.baseURL, "/tasks/").concat(id)));
+                return _context87.abrupt("return", this.get("".concat(this.baseURL, "/tasks/").concat(encodeURIComponent(id))));
 
               case 1:
               case "end":
@@ -13221,7 +14516,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context92.prev = _context92.next) {
               case 0:
                 _context92.next = 2;
-                return this.get(this.baseURL + "/imports/".concat(id));
+                return this.get(this.baseURL + "/imports/".concat(encodeURIComponent(id)));
 
               case 2:
                 return _context92.abrupt("return", _context92.sent);
@@ -13342,7 +14637,7 @@ var StreamChat = /*#__PURE__*/function () {
               case 0:
                 type = _ref10.type, name = _ref10.name;
                 _context95.next = 3;
-                return this.delete(this.baseURL + "/push_providers/".concat(type, "/").concat(name));
+                return this.delete(this.baseURL + "/push_providers/".concat(encodeURIComponent(type), "/").concat(encodeURIComponent(name)));
 
               case 3:
                 return _context95.abrupt("return", _context95.sent);
@@ -13422,7 +14717,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context97.prev = _context97.next) {
               case 0:
                 _context97.next = 2;
-                return this.post(this.baseURL + "/messages/".concat(id, "/commit"));
+                return this.post(this.baseURL + "/messages/".concat(encodeURIComponent(id), "/commit"));
 
               case 2:
                 return _context97.abrupt("return", _context97.sent);
@@ -13494,7 +14789,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context99.prev = _context99.next) {
               case 0:
                 _context99.next = 2;
-                return this.get(this.baseURL + "/polls/".concat(id), userId ? {
+                return this.get(this.baseURL + "/polls/".concat(encodeURIComponent(id)), userId ? {
                   user_id: userId
                 } : {});
 
@@ -13570,7 +14865,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context101.prev = _context101.next) {
               case 0:
                 _context101.next = 2;
-                return this.patch(this.baseURL + "/polls/".concat(id), _objectSpread(_objectSpread({}, partialPollObject), userId ? {
+                return this.patch(this.baseURL + "/polls/".concat(encodeURIComponent(id)), _objectSpread(_objectSpread({}, partialPollObject), userId ? {
                   user_id: userId
                 } : {}));
 
@@ -13607,7 +14902,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context102.prev = _context102.next) {
               case 0:
                 _context102.next = 2;
-                return this.delete(this.baseURL + "/polls/".concat(id), _objectSpread({}, userId ? {
+                return this.delete(this.baseURL + "/polls/".concat(encodeURIComponent(id)), _objectSpread({}, userId ? {
                   user_id: userId
                 } : {}));
 
@@ -13682,7 +14977,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context104.prev = _context104.next) {
               case 0:
                 _context104.next = 2;
-                return this.post(this.baseURL + "/polls/".concat(pollId, "/options"), _objectSpread(_objectSpread({}, option), userId ? {
+                return this.post(this.baseURL + "/polls/".concat(encodeURIComponent(pollId), "/options"), _objectSpread(_objectSpread({}, option), userId ? {
                   user_id: userId
                 } : {}));
 
@@ -13720,7 +15015,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context105.prev = _context105.next) {
               case 0:
                 _context105.next = 2;
-                return this.get(this.baseURL + "/polls/".concat(pollId, "/options/").concat(optionId), userId ? {
+                return this.get(this.baseURL + "/polls/".concat(encodeURIComponent(pollId), "/options/").concat(encodeURIComponent(optionId)), userId ? {
                   user_id: userId
                 } : {});
 
@@ -13758,7 +15053,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context106.prev = _context106.next) {
               case 0:
                 _context106.next = 2;
-                return this.put(this.baseURL + "/polls/".concat(pollId, "/options"), _objectSpread(_objectSpread({}, option), userId ? {
+                return this.put(this.baseURL + "/polls/".concat(encodeURIComponent(pollId), "/options"), _objectSpread(_objectSpread({}, option), userId ? {
                   user_id: userId
                 } : {}));
 
@@ -13796,7 +15091,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context107.prev = _context107.next) {
               case 0:
                 _context107.next = 2;
-                return this.delete(this.baseURL + "/polls/".concat(pollId, "/options/").concat(optionId), userId ? {
+                return this.delete(this.baseURL + "/polls/".concat(encodeURIComponent(pollId), "/options/").concat(encodeURIComponent(optionId)), userId ? {
                   user_id: userId
                 } : {});
 
@@ -13835,7 +15130,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context108.prev = _context108.next) {
               case 0:
                 _context108.next = 2;
-                return this.post(this.baseURL + "/messages/".concat(messageId, "/polls/").concat(pollId, "/vote"), _objectSpread({
+                return this.post(this.baseURL + "/messages/".concat(encodeURIComponent(messageId), "/polls/").concat(encodeURIComponent(pollId), "/vote"), _objectSpread({
                   vote: vote
                 }, userId ? {
                   user_id: userId
@@ -13901,7 +15196,7 @@ var StreamChat = /*#__PURE__*/function () {
             switch (_context110.prev = _context110.next) {
               case 0:
                 _context110.next = 2;
-                return this.delete(this.baseURL + "/messages/".concat(messageId, "/polls/").concat(pollId, "/vote/").concat(voteId), _objectSpread({}, userId ? {
+                return this.delete(this.baseURL + "/messages/".concat(encodeURIComponent(messageId), "/polls/").concat(encodeURIComponent(pollId), "/vote/").concat(encodeURIComponent(voteId)), _objectSpread({}, userId ? {
                   user_id: userId
                 } : {}));
 
@@ -14003,7 +15298,7 @@ var StreamChat = /*#__PURE__*/function () {
                 userId = _args112.length > 4 ? _args112[4] : undefined;
                 q = userId ? "?user_id=".concat(userId) : '';
                 _context112.next = 7;
-                return this.post(this.baseURL + "/polls/".concat(pollId, "/votes").concat(q), _objectSpread({
+                return this.post(this.baseURL + "/polls/".concat(encodeURIComponent(pollId), "/votes").concat(q), _objectSpread({
                   filter: filter,
                   sort: normalizeQuerySort(sort)
                 }, options));
@@ -14292,8 +15587,10 @@ exports.Moderation = Moderation;
 exports.Permission = Permission;
 exports.Segment = Segment;
 exports.StableWSConnection = StableWSConnection;
+exports.StateStore = StateStore;
 exports.StreamChat = StreamChat;
 exports.Thread = Thread;
+exports.ThreadManager = ThreadManager;
 exports.TokenManager = TokenManager;
 exports.UserFromToken = UserFromToken;
 exports.buildWsFatalInsight = buildWsFatalInsight;