stream-chat 6.2.0 → 6.3.0

package/dist/index.es.js

@@ -103,6 +103,13 @@ var ChannelState = /*#__PURE__*/function () {
    * When false, any new message (received by websocket event - message.new) will not
    * be pushed on to message list.
    */
+
+  /**
+   * Disjoint lists of messages
+   * Users can jump in the message list (with searching) and this can result in disjoint lists of messages
+   * The state manages these lists and merges them when lists overlap
+   * The messages array contains the currently active set
+   */
   function ChannelState(channel) {
     var _this = this,
         _channel$state;
@@ -117,8 +124,6 @@ var ChannelState = /*#__PURE__*/function () {
 
     _defineProperty(this, "read", void 0);
 
-    _defineProperty(this, "messages", void 0);
-
     _defineProperty(this, "pinnedMessages", void 0);
 
     _defineProperty(this, "threads", void 0);
@@ -137,6 +142,8 @@ var ChannelState = /*#__PURE__*/function () {
 
     _defineProperty(this, "isUpToDate", void 0);
 
+    _defineProperty(this, "messageSets", []);
+
     _defineProperty(this, "setIsUpToDate", function (isUpToDate) {
       _this.isUpToDate = isUpToDate;
     });
@@ -166,7 +173,9 @@ var ChannelState = /*#__PURE__*/function () {
         }
       };
 
-      _updateUserMessages(_this.messages, user);
+      _this.messageSets.forEach(function (set) {
+        return _updateUserMessages(set.messages, user);
+      });
 
       for (var parentId in _this.threads) {
         _updateUserMessages(_this.threads[parentId], user);
@@ -220,7 +229,9 @@ var ChannelState = /*#__PURE__*/function () {
         }
       };
 
-      _deleteUserMessages(_this.messages, user, hardDelete);
+      _this.messageSets.forEach(function (set) {
+        return _deleteUserMessages(set.messages, user, hardDelete);
+      });
 
       for (var parentId in _this.threads) {
         _deleteUserMessages(_this.threads[parentId], user, hardDelete);
@@ -233,7 +244,7 @@ var ChannelState = /*#__PURE__*/function () {
     this.watcher_count = 0;
     this.typing = {};
     this.read = {};
-    this.messages = [];
+    this.initMessages();
     this.pinnedMessages = [];
     this.threads = {}; // a list of users to hide messages from
 
@@ -252,22 +263,58 @@ var ChannelState = /*#__PURE__*/function () {
     this.isUpToDate = true;
     this.last_message_at = (channel === null || channel === void 0 ? void 0 : (_channel$state = channel.state) === null || _channel$state === void 0 ? void 0 : _channel$state.last_message_at) != null ? new Date(channel.state.last_message_at) : null;
   }
-  /**
-   * addMessageSorted - Add a message to the state
-   *
-   * @param {MessageResponse<StreamChatGenerics>} newMessage A new message
-   * @param {boolean} timestampChanged Whether updating a message with changed created_at value.
-   * @param {boolean} addIfDoesNotExist Add message if it is not in the list, used to prevent out of order updated messages from being added.
-   *
-   */
-
 
   _createClass(ChannelState, [{
+    key: "messages",
+    get: function get() {
+      var _this$messageSets$fin;
+
+      return ((_this$messageSets$fin = this.messageSets.find(function (s) {
+        return s.isCurrent;
+      })) === null || _this$messageSets$fin === void 0 ? void 0 : _this$messageSets$fin.messages) || [];
+    },
+    set: function set(messages) {
+      var index = this.messageSets.findIndex(function (s) {
+        return s.isCurrent;
+      });
+      this.messageSets[index].messages = messages;
+    }
+    /**
+     * The list of latest messages
+     * The messages array not always contains the latest messages (for example if a user searched for an earlier message, that is in a different message set)
+     */
+
+  }, {
+    key: "latestMessages",
+    get: function get() {
+      var _this$messageSets$fin2;
+
+      return ((_this$messageSets$fin2 = this.messageSets.find(function (s) {
+        return s.isLatest;
+      })) === null || _this$messageSets$fin2 === void 0 ? void 0 : _this$messageSets$fin2.messages) || [];
+    },
+    set: function set(messages) {
+      var index = this.messageSets.findIndex(function (s) {
+        return s.isLatest;
+      });
+      this.messageSets[index].messages = messages;
+    }
+    /**
+     * addMessageSorted - Add a message to the state
+     *
+     * @param {MessageResponse<StreamChatGenerics>} newMessage A new message
+     * @param {boolean} timestampChanged Whether updating a message with changed created_at value.
+     * @param {boolean} addIfDoesNotExist Add message if it is not in the list, used to prevent out of order updated messages from being added.
+     * @param {MessageSetType} messageSetToAddToIfDoesNotExist Which message set to add to if message is not in the list (only used if addIfDoesNotExist is true)
+     */
+
+  }, {
     key: "addMessageSorted",
     value: function addMessageSorted(newMessage) {
       var timestampChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var addIfDoesNotExist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      return this.addMessagesSorted([newMessage], timestampChanged, false, addIfDoesNotExist);
+      var messageSetToAddToIfDoesNotExist = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'latest';
+      return this.addMessagesSorted([newMessage], timestampChanged, false, addIfDoesNotExist, messageSetToAddToIfDoesNotExist);
     }
     /**
      * formatMessage - Takes the message object. Parses the dates, sets __html
@@ -299,6 +346,7 @@ var ChannelState = /*#__PURE__*/function () {
      * @param {boolean} timestampChanged Whether updating messages with changed created_at value.
      * @param {boolean} initializing Whether channel is being initialized.
      * @param {boolean} addIfDoesNotExist Add message if it is not in the list, used to prevent out of order updated messages from being added.
+     * @param {MessageSetType} messageSetToAddToIfDoesNotExist Which message set to add to if messages are not in the list (only used if addIfDoesNotExist is true)
      *
      */
 
@@ -308,48 +356,60 @@ var ChannelState = /*#__PURE__*/function () {
       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;
+      var messageSetToAddToIfDoesNotExist = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'current';
 
-      for (var i = 0; i < newMessages.length; i += 1) {
-        var _this$_channel;
+      var _this$findTargetMessa = this.findTargetMessageSet(newMessages, addIfDoesNotExist, messageSetToAddToIfDoesNotExist),
+          messagesToAdd = _this$findTargetMessa.messagesToAdd,
+          targetMessageSetIndex = _this$findTargetMessa.targetMessageSetIndex;
 
-        var isFromShadowBannedUser = newMessages[i].shadowed;
+      for (var i = 0; i < messagesToAdd.length; i += 1) {
+        var isFromShadowBannedUser = messagesToAdd[i].shadowed;
 
         if (isFromShadowBannedUser) {
           continue;
         }
 
-        var message = this.formatMessage(newMessages[i]);
+        var isMerging = messagesToAdd[i].created_at instanceof Date;
+        var message = void 0;
 
-        if (message.user && (_this$_channel = this._channel) !== null && _this$_channel !== void 0 && _this$_channel.cid) {
-          /**
-           * Store the reference to user for this channel, so that when we have to
-           * handle updates to user, we can use the reference map, to determine which
-           * channels need to be updated with updated user object.
-           */
-          this._channel.getClient().state.updateUserReference(message.user, this._channel.cid);
-        }
+        if (isMerging) {
+          message = messagesToAdd[i];
+        } else {
+          var _this$_channel;
 
-        if (initializing && message.id && this.threads[message.id]) {
-          // If we are initializing the state of channel (e.g., in case of connection recovery),
-          // then in that case we remove thread related to this message from threads object.
-          // This way we can ensure that we don't have any stale data in thread object
-          // and consumer can refetch the replies.
-          delete this.threads[message.id];
-        }
+          message = this.formatMessage(messagesToAdd[i]);
 
-        if (!this.last_message_at) {
-          this.last_message_at = new Date(message.created_at.getTime());
-        }
+          if (message.user && (_this$_channel = this._channel) !== null && _this$_channel !== void 0 && _this$_channel.cid) {
+            /**
+             * Store the reference to user for this channel, so that when we have to
+             * handle updates to user, we can use the reference map, to determine which
+             * channels need to be updated with updated user object.
+             */
+            this._channel.getClient().state.updateUserReference(message.user, this._channel.cid);
+          }
+
+          if (initializing && message.id && this.threads[message.id]) {
+            // If we are initializing the state of channel (e.g., in case of connection recovery),
+            // then in that case we remove thread related to this message from threads object.
+            // This way we can ensure that we don't have any stale data in thread object
+            // and consumer can refetch the replies.
+            delete this.threads[message.id];
+          }
 
-        if (message.created_at.getTime() > this.last_message_at.getTime()) {
-          this.last_message_at = new Date(message.created_at.getTime());
+          if (!this.last_message_at) {
+            this.last_message_at = new Date(message.created_at.getTime());
+          }
+
+          if (message.created_at.getTime() > this.last_message_at.getTime()) {
+            this.last_message_at = new Date(message.created_at.getTime());
+          }
         } // update or append the messages...
 
 
-        var parentID = message.parent_id; // add to the main message list
+        var parentID = message.parent_id; // add to the given message set
 
-        if (!parentID || message.show_in_channel) {
-          this.messages = this._addToMessageList(this.messages, message, timestampChanged, 'created_at', addIfDoesNotExist);
+        if ((!parentID || message.show_in_channel) && targetMessageSetIndex !== -1) {
+          this.messageSets[targetMessageSetIndex].messages = this._addToMessageList(this.messageSets[targetMessageSetIndex].messages, message, timestampChanged, 'created_at', addIfDoesNotExist);
         }
         /**
          * Add message to thread if applicable and the message
@@ -362,7 +422,7 @@ var ChannelState = /*#__PURE__*/function () {
          */
 
 
-        if (parentID && !initializing) {
+        if (parentID && !initializing && !isMerging) {
           var thread = this.threads[parentID] || [];
 
           var threadMessages = this._addToMessageList(thread, message, timestampChanged, 'created_at', addIfDoesNotExist);
@@ -473,6 +533,8 @@ var ChannelState = /*#__PURE__*/function () {
   }, {
     key: "removeQuotedMessageReferences",
     value: function removeQuotedMessageReferences(message) {
+      var _this4 = this;
+
       var parseMessage = function parseMessage(m) {
         var _m$pinned_at, _m$updated_at;
 
@@ -483,16 +545,19 @@ var ChannelState = /*#__PURE__*/function () {
         });
       };
 
-      var updatedMessages = this.messages.filter(function (msg) {
-        return msg.quoted_message_id === message.id;
-      }).map(parseMessage).map(function (msg) {
-        return _objectSpread$7(_objectSpread$7({}, msg), {}, {
-          quoted_message: _objectSpread$7(_objectSpread$7({}, message), {}, {
-            attachments: []
-          })
+      this.messageSets.forEach(function (set) {
+        var updatedMessages = set.messages.filter(function (msg) {
+          return msg.quoted_message_id === message.id;
+        }).map(parseMessage).map(function (msg) {
+          return _objectSpread$7(_objectSpread$7({}, msg), {}, {
+            quoted_message: _objectSpread$7(_objectSpread$7({}, message), {}, {
+              attachments: []
+            })
+          });
         });
+
+        _this4.addMessagesSorted(updatedMessages, true);
       });
-      this.addMessagesSorted(updatedMessages, true);
     }
     /**
      * Updates all instances of given message in channel state
@@ -520,12 +585,16 @@ var ChannelState = /*#__PURE__*/function () {
       }
 
       if (!show_in_channel && !parent_id || show_in_channel) {
-        var _msgIndex = this.messages.findIndex(function (msg) {
-          return msg.id === message.id;
-        });
+        var messageSetIndex = this.findMessageSetIndex(message);
+
+        if (messageSetIndex !== -1) {
+          var _msgIndex = this.messageSets[messageSetIndex].messages.findIndex(function (msg) {
+            return msg.id === message.id;
+          });
 
-        if (_msgIndex !== -1) {
-          this.messages[_msgIndex] = updateFunc(this.messages[_msgIndex]);
+          if (_msgIndex !== -1) {
+            this.messageSets[messageSetIndex].messages[_msgIndex] = updateFunc(this.messageSets[messageSetIndex].messages[_msgIndex]);
+          }
         }
       }
 
@@ -644,12 +713,16 @@ var ChannelState = /*#__PURE__*/function () {
         this.threads[messageToRemove.parent_id] = threadMessages;
         isRemoved = removed;
       } else {
-        var _this$removeMessageFr3 = this.removeMessageFromArray(this.messages, messageToRemove),
-            _removed = _this$removeMessageFr3.removed,
-            messages = _this$removeMessageFr3.result;
+        var messageSetIndex = this.findMessageSetIndex(messageToRemove);
 
-        this.messages = messages;
-        isRemoved = _removed;
+        if (messageSetIndex !== -1) {
+          var _this$removeMessageFr3 = this.removeMessageFromArray(this.messageSets[messageSetIndex].messages, messageToRemove),
+              _removed = _this$removeMessageFr3.removed,
+              messages = _this$removeMessageFr3.result;
+
+          this.messageSets[messageSetIndex].messages = messages;
+          isRemoved = _removed;
+        }
       }
 
       return isRemoved;
@@ -662,10 +735,10 @@ var ChannelState = /*#__PURE__*/function () {
      *
      */
     function filterErrorMessages() {
-      var filteredMessages = this.messages.filter(function (message) {
+      var filteredMessages = this.latestMessages.filter(function (message) {
         return message.type !== 'error';
       });
-      this.messages = filteredMessages;
+      this.latestMessages = filteredMessages;
     }
     /**
      * clean - Remove stale data such as users that stayed in typing state for more than 5 seconds
@@ -699,9 +772,250 @@ var ChannelState = /*#__PURE__*/function () {
   }, {
     key: "clearMessages",
     value: function clearMessages() {
-      this.messages = [];
+      this.initMessages();
       this.pinnedMessages = [];
     }
+  }, {
+    key: "initMessages",
+    value: function initMessages() {
+      this.messageSets = [{
+        messages: [],
+        isLatest: true,
+        isCurrent: true
+      }];
+    }
+    /**
+     * loadMessageIntoState - Loads a given message (and messages around it) into the state
+     *
+     * @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
+     */
+
+  }, {
+    key: "loadMessageIntoState",
+    value: function () {
+      var _loadMessageIntoState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(messageId, parentMessageId) {
+        var _this$threads$parentM;
+
+        var messageSetIndex, switchedToMessageSet, loadedMessageThread, messageIdToFind;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                switchedToMessageSet = false;
+                loadedMessageThread = false;
+                messageIdToFind = parentMessageId || messageId;
+
+                if (!(messageId === 'latest')) {
+                  _context.next = 9;
+                  break;
+                }
+
+                if (!(this.messages === this.latestMessages)) {
+                  _context.next = 6;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 6:
+                messageSetIndex = this.messageSets.findIndex(function (s) {
+                  return s.isLatest;
+                });
+                _context.next = 10;
+                break;
+
+              case 9:
+                messageSetIndex = this.findMessageSetIndex({
+                  id: messageIdToFind
+                });
+
+              case 10:
+                if (messageSetIndex !== -1) {
+                  this.switchToMessageSet(messageSetIndex);
+                  switchedToMessageSet = true;
+                }
+
+                loadedMessageThread = !parentMessageId || !!((_this$threads$parentM = this.threads[parentMessageId]) !== null && _this$threads$parentM !== void 0 && _this$threads$parentM.find(function (m) {
+                  return m.id === messageId;
+                }));
+
+                if (!(switchedToMessageSet && loadedMessageThread)) {
+                  _context.next = 14;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 14:
+                if (switchedToMessageSet) {
+                  _context.next = 17;
+                  break;
+                }
+
+                _context.next = 17;
+                return this._channel.query({
+                  messages: {
+                    id_around: messageIdToFind,
+                    limit: 25
+                  }
+                }, 'new');
+
+              case 17:
+                if (!(!loadedMessageThread && parentMessageId)) {
+                  _context.next = 20;
+                  break;
+                }
+
+                _context.next = 20;
+                return this._channel.getReplies(parentMessageId, {
+                  id_around: messageId,
+                  limit: 25
+                });
+
+              case 20:
+                messageSetIndex = this.findMessageSetIndex({
+                  id: messageIdToFind
+                });
+
+                if (messageSetIndex !== -1) {
+                  this.switchToMessageSet(messageSetIndex);
+                }
+
+              case 22:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function loadMessageIntoState(_x, _x2) {
+        return _loadMessageIntoState.apply(this, arguments);
+      }
+
+      return loadMessageIntoState;
+    }()
+  }, {
+    key: "switchToMessageSet",
+    value: function switchToMessageSet(index) {
+      var currentMessages = this.messageSets.find(function (s) {
+        return s.isCurrent;
+      });
+
+      if (!currentMessages) {
+        return;
+      }
+
+      currentMessages.isCurrent = false;
+      this.messageSets[index].isCurrent = true;
+    }
+  }, {
+    key: "areMessageSetsOverlap",
+    value: function areMessageSetsOverlap(messages1, messages2) {
+      return messages1.some(function (m1) {
+        return messages2.find(function (m2) {
+          return m1.id === m2.id;
+        });
+      });
+    }
+  }, {
+    key: "findMessageSetIndex",
+    value: function findMessageSetIndex(message) {
+      return this.messageSets.findIndex(function (set) {
+        return !!set.messages.find(function (m) {
+          return m.id === message.id;
+        });
+      });
+    }
+  }, {
+    key: "findTargetMessageSet",
+    value: function findTargetMessageSet(newMessages) {
+      var _this5 = this;
+
+      var addIfDoesNotExist = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var messageSetToAddToIfDoesNotExist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'current';
+      var messagesToAdd = newMessages;
+      var targetMessageSetIndex;
+
+      if (addIfDoesNotExist) {
+        var overlappingMessageSetIndices = this.messageSets.map(function (_, i) {
+          return i;
+        }).filter(function (i) {
+          return _this5.areMessageSetsOverlap(_this5.messageSets[i].messages, newMessages);
+        });
+
+        switch (messageSetToAddToIfDoesNotExist) {
+          case 'new':
+            if (overlappingMessageSetIndices.length > 0) {
+              targetMessageSetIndex = overlappingMessageSetIndices[0]; // No new message set is created if newMessages only contains thread replies
+            } else if (newMessages.some(function (m) {
+              return !m.parent_id;
+            })) {
+              this.messageSets.push({
+                messages: [],
+                isCurrent: false,
+                isLatest: false
+              });
+              targetMessageSetIndex = this.messageSets.length - 1;
+            }
+
+            break;
+
+          case 'current':
+            targetMessageSetIndex = this.messageSets.findIndex(function (s) {
+              return s.isCurrent;
+            });
+            break;
+
+          case 'latest':
+            targetMessageSetIndex = this.messageSets.findIndex(function (s) {
+              return s.isLatest;
+            });
+            break;
+
+          default:
+            targetMessageSetIndex = -1;
+        } // when merging the target set will be the first one from the overlapping message sets
+
+
+        var mergeTargetMessageSetIndex = overlappingMessageSetIndices.splice(0, 1)[0];
+
+        var mergeSourceMessageSetIndices = _toConsumableArray(overlappingMessageSetIndices);
+
+        if (mergeTargetMessageSetIndex !== undefined && mergeTargetMessageSetIndex !== targetMessageSetIndex) {
+          mergeSourceMessageSetIndices.push(targetMessageSetIndex);
+        } // merge message sets
+
+
+        if (mergeSourceMessageSetIndices.length > 0) {
+          var target = this.messageSets[mergeTargetMessageSetIndex];
+          var sources = this.messageSets.filter(function (_, i) {
+            return mergeSourceMessageSetIndices.indexOf(i) !== -1;
+          });
+          sources.forEach(function (messageSet) {
+            target.isLatest = target.isLatest || messageSet.isLatest;
+            target.isCurrent = target.isCurrent || messageSet.isCurrent;
+            messagesToAdd = [].concat(_toConsumableArray(messagesToAdd), _toConsumableArray(messageSet.messages));
+          });
+          sources.forEach(function (s) {
+            return _this5.messageSets.splice(_this5.messageSets.indexOf(s), 1);
+          });
+          var overlappingMessageSetIndex = this.messageSets.findIndex(function (s) {
+            return _this5.areMessageSetsOverlap(s.messages, newMessages);
+          });
+          targetMessageSetIndex = overlappingMessageSetIndex;
+        }
+      } else {
+        // assumes that all new messages belong to the same set
+        targetMessageSetIndex = this.findMessageSetIndex(newMessages[0]);
+      }
+
+      return {
+        targetMessageSetIndex: targetMessageSetIndex,
+        messagesToAdd: messagesToAdd
+      };
+    }
   }]);
 
   return ChannelState;
@@ -1064,7 +1378,7 @@ var Channel = /*#__PURE__*/function () {
                 presence: false
               };
               _context.next = 3;
-              return _this.query(options);
+              return _this.query(options, 'latest');
 
             case 3:
               return _context.abrupt("return", _context.sent);
@@ -2362,14 +2676,14 @@ var Channel = /*#__PURE__*/function () {
     value: function lastMessage() {
       // get last 5 messages, sort, return the latest
       // get a slice of the last 5
-      var min = this.state.messages.length - 5;
+      var min = this.state.latestMessages.length - 5;
 
       if (min < 0) {
         min = 0;
       }
 
-      var max = this.state.messages.length + 1;
-      var messageSlice = this.state.messages.slice(min, max); // sort by pk desc
+      var max = this.state.latestMessages.length + 1;
+      var messageSlice = this.state.latestMessages.slice(min, max); // sort by pk desc
 
       messageSlice.sort(function (a, b) {
         return b.created_at.getTime() - a.created_at.getTime();
@@ -2478,7 +2792,7 @@ var Channel = /*#__PURE__*/function () {
 
                 combined = _objectSpread$5(_objectSpread$5({}, defaultOptions), options);
                 _context27.next = 7;
-                return this.query(combined);
+                return this.query(combined, 'latest');
 
               case 7:
                 state = _context27.sent;
@@ -2552,7 +2866,7 @@ var Channel = /*#__PURE__*/function () {
      * getReplies - List the message replies for a parent message
      *
      * @param {string} parent_id The message parent id, ie the top of the thread
-     * @param {PaginationOptions & { user?: UserResponse<StreamChatGenerics>; user_id?: string }} options Pagination params, ie {limit:10, id_lte: 10}
+     * @param {MessagePaginationOptions & { user?: UserResponse<StreamChatGenerics>; user_id?: string }} options Pagination params, ie {limit:10, id_lte: 10}
      *
      * @return {Promise<GetRepliesAPIResponse<StreamChatGenerics>>} A response with a list of messages
      */
@@ -2713,8 +3027,8 @@ var Channel = /*#__PURE__*/function () {
       if (!lastRead) return this.state.unreadCount;
       var count = 0;
 
-      for (var i = 0; i < this.state.messages.length; i += 1) {
-        var message = this.state.messages[i];
+      for (var i = 0; i < this.state.latestMessages.length; i += 1) {
+        var message = this.state.latestMessages[i];
 
         if (message.created_at > lastRead && this._countMessageAsUnread(message)) {
           count++;
@@ -2724,7 +3038,7 @@ var Channel = /*#__PURE__*/function () {
       return count;
     }
     /**
-     * countUnread - Count the number of unread messages mentioning the current user
+     * countUnreadMentions - Count the number of unread messages mentioning the current user
      *
      * @return {number} Unread mentions count
      */
@@ -2736,10 +3050,10 @@ var Channel = /*#__PURE__*/function () {
       var userID = this.getClient().userID;
       var count = 0;
 
-      for (var i = 0; i < this.state.messages.length; i += 1) {
+      for (var i = 0; i < this.state.latestMessages.length; i += 1) {
         var _message$mentioned_us;
 
-        var message = this.state.messages[i];
+        var message = this.state.latestMessages[i];
 
         if (this._countMessageAsUnread(message) && (!lastRead || message.created_at > lastRead) && (_message$mentioned_us = message.mentioned_users) !== null && _message$mentioned_us !== void 0 && _message$mentioned_us.some(function (user) {
           return user.id === userID;
@@ -2763,33 +3077,40 @@ var Channel = /*#__PURE__*/function () {
      * query - Query the API, get messages, members or other channel fields
      *
      * @param {ChannelQueryOptions<StreamChatGenerics>} options The query options
+     * @param {MessageSetType} messageSetToAddToIfDoesNotExist It's possible to load disjunct sets of a channel's messages into state, use `current` to load the initial channel state or if you want to extend the currently displayed messages, use `latest` if you want to load/extend the latest messages, `new` is used for loading a specific message and it's surroundings
      *
      * @return {Promise<ChannelAPIResponse<StreamChatGenerics>>} Returns a query response
      */
     function () {
       var _query = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31(options) {
-        var queryURL, state, membersStr, tempChannelCid;
+        var messageSetToAddToIfDoesNotExist,
+            queryURL,
+            state,
+            membersStr,
+            tempChannelCid,
+            _args31 = arguments;
         return _regeneratorRuntime.wrap(function _callee31$(_context31) {
           while (1) {
             switch (_context31.prev = _context31.next) {
               case 0:
-                _context31.next = 2;
+                messageSetToAddToIfDoesNotExist = _args31.length > 1 && _args31[1] !== undefined ? _args31[1] : 'current';
+                _context31.next = 3;
                 return this.getClient().wsPromise;
 
-              case 2:
+              case 3:
                 queryURL = "".concat(this.getClient().baseURL, "/channels/").concat(this.type);
 
                 if (this.id) {
                   queryURL += "/".concat(this.id);
                 }
 
-                _context31.next = 6;
+                _context31.next = 7;
                 return this.getClient().post(queryURL + '/query', _objectSpread$5({
                   data: this._data,
                   state: true
                 }, options));
 
-              case 6:
+              case 7:
                 state = _context31.sent;
 
                 // update the channel id if it was missing
@@ -2818,11 +3139,11 @@ var Channel = /*#__PURE__*/function () {
                 this.getClient()._addChannelConfig(state); // add any messages to our channel state
 
 
-                this._initializeState(state);
+                this._initializeState(state, messageSetToAddToIfDoesNotExist);
 
                 return _context31.abrupt("return", state);
 
-              case 11:
+              case 12:
               case "end":
                 return _context31.stop();
             }
@@ -3372,6 +3693,8 @@ var Channel = /*#__PURE__*/function () {
   }, {
     key: "_initializeState",
     value: function _initializeState(state) {
+      var messageSetToAddToIfDoesNotExist = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'latest';
+
       var _this$getClient2 = this.getClient(),
           clientState = _this$getClient2.state,
           user = _this$getClient2.user,
@@ -3401,10 +3724,10 @@ var Channel = /*#__PURE__*/function () {
       var messages = state.messages || [];
 
       if (!this.state.messages) {
-        this.state.messages = [];
+        this.state.initMessages();
       }
 
-      this.state.addMessagesSorted(messages, false, true);
+      this.state.addMessagesSorted(messages, false, true, true, messageSetToAddToIfDoesNotExist);
 
       if (!this.state.pinnedMessages) {
         this.state.pinnedMessages = [];
@@ -7444,11 +7767,11 @@ var StreamChat = /*#__PURE__*/function () {
                     c.initialized = true;
 
                     if (skipInitialization === undefined) {
-                      c._initializeState(_channelState);
+                      c._initializeState(_channelState, 'latest');
                     } else if (!skipInitialization.includes(_channelState.channel.id)) {
                       c.state.clearMessages();
 
-                      c._initializeState(_channelState);
+                      c._initializeState(_channelState, 'latest');
                     }
 
                     channels.push(c);
@@ -9183,7 +9506,7 @@ var StreamChat = /*#__PURE__*/function () {
   }, {
     key: "getUserAgent",
     value: function getUserAgent() {
-      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "6.2.0");
+      return this.userAgent || "stream-chat-javascript-client-".concat(this.node ? 'node' : 'browser', "-", "6.3.0");
     }
   }, {
     key: "setUserAgent",
@@ -10353,6 +10676,122 @@ var StreamChat = /*#__PURE__*/function () {
 
       return _listImports;
     }()
+    /**
+     * upsertPushProvider - Create or Update a push provider
+     *
+     * Note: Works only for v2 push version is enabled on app settings.
+     *
+     * @param {PushProviderConfig} configuration of the provider you want to create or update
+     *
+     * @return {APIResponse & PushProviderUpsertResponse} A push provider
+     */
+
+  }, {
+    key: "upsertPushProvider",
+    value: function () {
+      var _upsertPushProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee75(pushProvider) {
+        return _regeneratorRuntime.wrap(function _callee75$(_context75) {
+          while (1) {
+            switch (_context75.prev = _context75.next) {
+              case 0:
+                _context75.next = 2;
+                return this.post(this.baseURL + "/push_providers", {
+                  push_provider: pushProvider
+                });
+
+              case 2:
+                return _context75.abrupt("return", _context75.sent);
+
+              case 3:
+              case "end":
+                return _context75.stop();
+            }
+          }
+        }, _callee75, this);
+      }));
+
+      function upsertPushProvider(_x98) {
+        return _upsertPushProvider.apply(this, arguments);
+      }
+
+      return upsertPushProvider;
+    }()
+    /**
+     * deletePushProvider - Delete a push provider
+     *
+     * Note: Works only for v2 push version is enabled on app settings.
+     *
+     * @param {PushProviderID} type and foreign id of the push provider to be deleted
+     *
+     * @return {APIResponse} An API response
+     */
+
+  }, {
+    key: "deletePushProvider",
+    value: function () {
+      var _deletePushProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee76(_ref8) {
+        var type, name;
+        return _regeneratorRuntime.wrap(function _callee76$(_context76) {
+          while (1) {
+            switch (_context76.prev = _context76.next) {
+              case 0:
+                type = _ref8.type, name = _ref8.name;
+                _context76.next = 3;
+                return this.delete(this.baseURL + "/push_providers/".concat(type, "/").concat(name));
+
+              case 3:
+                return _context76.abrupt("return", _context76.sent);
+
+              case 4:
+              case "end":
+                return _context76.stop();
+            }
+          }
+        }, _callee76, this);
+      }));
+
+      function deletePushProvider(_x99) {
+        return _deletePushProvider.apply(this, arguments);
+      }
+
+      return deletePushProvider;
+    }()
+    /**
+     * listPushProviders - Get all push providers in the app
+     *
+     * Note: Works only for v2 push version is enabled on app settings.
+     *
+     * @return {APIResponse & PushProviderListResponse} A push provider
+     */
+
+  }, {
+    key: "listPushProviders",
+    value: function () {
+      var _listPushProviders = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee77() {
+        return _regeneratorRuntime.wrap(function _callee77$(_context77) {
+          while (1) {
+            switch (_context77.prev = _context77.next) {
+              case 0:
+                _context77.next = 2;
+                return this.get(this.baseURL + "/push_providers");
+
+              case 2:
+                return _context77.abrupt("return", _context77.sent);
+
+              case 3:
+              case "end":
+                return _context77.stop();
+            }
+          }
+        }, _callee77, this);
+      }));
+
+      function listPushProviders() {
+        return _listPushProviders.apply(this, arguments);
+      }
+
+      return listPushProviders;
+    }()
   }], [{
     key: "getInstance",
     value: function getInstance(key, secretOrOptions, options) {