stream-chat-react-native-core 5.44.2 → 6.0.0-beta.1

package/lib/module/components/Channel/Channel.js

@@ -16,6 +16,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _mimeTypes = require("mime-types");
 var _streamChat = require("stream-chat");
+var _useChannelDataState2 = require("./hooks/useChannelDataState");
 var _useCreateChannelContext = require("./hooks/useCreateChannelContext");
 var _useCreateInputMessageInputContext = require("./hooks/useCreateInputMessageInputContext");
 var _useCreateMessagesContext = require("./hooks/useCreateMessagesContext");
@@ -23,6 +24,7 @@ var _useCreateOwnCapabilitiesContext = require("./hooks/useCreateOwnCapabilities
 var _useCreatePaginatedMessageListContext = require("./hooks/useCreatePaginatedMessageListContext");
 var _useCreateThreadContext = require("./hooks/useCreateThreadContext");
 var _useCreateTypingContext = require("./hooks/useCreateTypingContext");
+var _useMessageListPagination = require("./hooks/useMessageListPagination");
 var _useTargetedMessage2 = require("./hooks/useTargetedMessage");
 var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
 var _useChannelState2 = require("../../contexts/channelsStateContext/useChannelState");
@@ -81,7 +83,8 @@ var _MessageRepliesAvatars = require("../Message/MessageSimple/MessageRepliesAva
 var _MessageSimple = require("../Message/MessageSimple/MessageSimple");
 var _MessageStatus = require("../Message/MessageSimple/MessageStatus");
 var _MessageTimestamp = require("../Message/MessageSimple/MessageTimestamp");
-var _ReactionList = require("../Message/MessageSimple/ReactionList");
+var _ReactionListBottom = require("../Message/MessageSimple/ReactionList/ReactionListBottom");
+var _ReactionListTop = require("../Message/MessageSimple/ReactionList/ReactionListTop");
 var _StreamingMessageView = require("../Message/MessageSimple/StreamingMessageView");
 var _AttachButton = require("../MessageInput/AttachButton");
 var _CommandsButton = require("../MessageInput/CommandsButton");
@@ -114,7 +117,13 @@ var _ScrollToBottomButton = require("../MessageList/ScrollToBottomButton");
 var _StickyHeader = require("../MessageList/StickyHeader");
 var _TypingIndicator = require("../MessageList/TypingIndicator");
 var _TypingIndicatorContainer = require("../MessageList/TypingIndicatorContainer");
-var _OverlayReactionList = require("../MessageOverlay/OverlayReactionList");
+var _MessageActionList = require("../MessageMenu/MessageActionList");
+var _MessageActionListItem = require("../MessageMenu/MessageActionListItem");
+var _MessageMenu = require("../MessageMenu/MessageMenu");
+var _MessageReactionPicker = require("../MessageMenu/MessageReactionPicker");
+var _MessageUserReactions = require("../MessageMenu/MessageUserReactions");
+var _MessageUserReactionsAvatar = require("../MessageMenu/MessageUserReactionsAvatar");
+var _MessageUserReactionsItem = require("../MessageMenu/MessageUserReactionsItem");
 var _Reply = require("../Reply/Reply");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["attachments", "mentioned_users", "parent_id", "poll", "poll_id", "text"],
@@ -158,10 +167,10 @@ var debounceOptions = {
   trailing: true
 };
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _channel$getConfig, _client$user, _channel$data2, _ref30, _ref31;
+  var _channel$getConfig, _channel$data, _ref17, _channelState$members, _channelState$read, _ref18, _channelMessagesState3, _channelState$typing, _channelMessagesState4;
   var additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
+    additionalPressableProps = props.additionalPressableProps,
     additionalTextInputProps = props.additionalTextInputProps,
-    additionalTouchableProps = props.additionalTouchableProps,
     _props$allowThreadMes = props.allowThreadMessagesInChannel,
     allowThreadMessagesInChannel = _props$allowThreadMes === void 0 ? true : _props$allowThreadMes,
     _props$asyncMessagesL = props.asyncMessagesLockDistance,
@@ -185,7 +194,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$AudioRecorder = props.AudioRecorder,
     AudioRecorder = _props$AudioRecorder === void 0 ? _AudioRecorder.AudioRecorder : _props$AudioRecorder,
     _props$audioRecording = props.audioRecordingEnabled,
-    audioRecordingEnabled = _props$audioRecording === void 0 ? false : _props$audioRecording,
+    audioRecordingEnabled = _props$audioRecording === void 0 ? (0, _native.isAudioRecorderAvailable)() : _props$audioRecording,
     _props$AudioRecording = props.AudioRecordingInProgress,
     AudioRecordingInProgress = _props$AudioRecording === void 0 ? _AudioRecordingInProgress.AudioRecordingInProgress : _props$AudioRecording,
     _props$AudioRecording2 = props.AudioRecordingLockIndicator,
@@ -220,8 +229,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     DateHeader = _props$DateHeader === void 0 ? _DateHeader.DateHeader : _props$DateHeader,
     _props$deletedMessage = props.deletedMessagesVisibilityType,
     deletedMessagesVisibilityType = _props$deletedMessage === void 0 ? 'always' : _props$deletedMessage,
-    _props$disableIfFroze = props.disableIfFrozenChannel,
-    disableIfFrozenChannel = _props$disableIfFroze === void 0 ? true : _props$disableIfFroze,
     _props$disableKeyboar = props.disableKeyboardCompatibleView,
     disableKeyboardCompatibleView = _props$disableKeyboar === void 0 ? false : _props$disableKeyboar,
     disableTypingIndicator = props.disableTypingIndicator,
@@ -262,7 +269,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     giphyVersion = _props$giphyVersion === void 0 ? 'fixed_height' : _props$giphyVersion,
     handleAttachButtonPress = props.handleAttachButtonPress,
     handleBan = props.handleBan,
-    handleBlock = props.handleBlock,
     handleCopy = props.handleCopy,
     handleDelete = props.handleDelete,
     handleEdit = props.handleEdit,
@@ -279,9 +285,9 @@ var ChannelWithContext = function ChannelWithContext(props) {
     hasCommands = _props$hasCommands === void 0 ? true : _props$hasCommands,
     hasCreatePoll = props.hasCreatePoll,
     _props$hasFilePicker = props.hasFilePicker,
-    hasFilePicker = _props$hasFilePicker === void 0 ? _native.pickDocument !== null : _props$hasFilePicker,
+    hasFilePicker = _props$hasFilePicker === void 0 ? (0, _native.isDocumentPickerAvailable)() : _props$hasFilePicker,
     _props$hasImagePicker = props.hasImagePicker,
-    hasImagePicker = _props$hasImagePicker === void 0 ? true : _props$hasImagePicker,
+    hasImagePicker = _props$hasImagePicker === void 0 ? (0, _native.isImagePickerAvailable)() || (0, _native.isImageMediaLibraryAvailable)() : _props$hasImagePicker,
     _props$hideDateSepara = props.hideDateSeparators,
     hideDateSeparators = _props$hideDateSepara === void 0 ? false : _props$hideDateSepara,
     _props$hideStickyDate = props.hideStickyDateHeader,
@@ -330,12 +336,15 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$maxNumberOfFil = props.maxNumberOfFiles,
     maxNumberOfFiles = _props$maxNumberOfFil === void 0 ? 10 : _props$maxNumberOfFil,
     maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages,
-    members = props.members,
     _props$mentionAllAppU = props.mentionAllAppUsersEnabled,
     mentionAllAppUsersEnabled = _props$mentionAllAppU === void 0 ? false : _props$mentionAllAppU,
     mentionAllAppUsersQuery = props.mentionAllAppUsersQuery,
     _props$Message = props.Message,
     Message = _props$Message === void 0 ? _Message.Message : _props$Message,
+    _props$MessageActionL = props.MessageActionList,
+    MessageActionList = _props$MessageActionL === void 0 ? _MessageActionList.MessageActionList : _props$MessageActionL,
+    _props$MessageActionL2 = props.MessageActionListItem,
+    MessageActionListItem = _props$MessageActionL2 === void 0 ? _MessageActionListItem.MessageActionListItem : _props$MessageActionL2,
     messageActions = props.messageActions,
     _props$MessageAvatar = props.MessageAvatar,
     MessageAvatar = _props$MessageAvatar === void 0 ? _MessageAvatar.MessageAvatar : _props$MessageAvatar,
@@ -357,13 +366,16 @@ var ChannelWithContext = function ChannelWithContext(props) {
     messageId = props.messageId,
     _props$MessageList = props.MessageList,
     MessageList = _props$MessageList === void 0 ? _MessageList.MessageList : _props$MessageList,
+    _props$MessageMenu = props.MessageMenu,
+    MessageMenu = _props$MessageMenu === void 0 ? _MessageMenu.MessageMenu : _props$MessageMenu,
     _props$MessagePinnedH = props.MessagePinnedHeader,
     MessagePinnedHeader = _props$MessagePinnedH === void 0 ? _MessagePinnedHeader.MessagePinnedHeader : _props$MessagePinnedH,
+    _props$MessageReactio = props.MessageReactionPicker,
+    MessageReactionPicker = _props$MessageReactio === void 0 ? _MessageReactionPicker.MessageReactionPicker : _props$MessageReactio,
     _props$MessageReplies = props.MessageReplies,
     MessageReplies = _props$MessageReplies === void 0 ? _MessageReplies.MessageReplies : _props$MessageReplies,
     _props$MessageReplies2 = props.MessageRepliesAvatars,
     MessageRepliesAvatars = _props$MessageReplies2 === void 0 ? _MessageRepliesAvatars.MessageRepliesAvatars : _props$MessageReplies2,
-    messages = props.messages,
     _props$MessageSimple = props.MessageSimple,
     MessageSimple = _props$MessageSimple === void 0 ? _MessageSimple.MessageSimple : _props$MessageSimple,
     _props$MessageStatus = props.MessageStatus,
@@ -371,8 +383,15 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$MessageSystem = props.MessageSystem,
     MessageSystem = _props$MessageSystem === void 0 ? _MessageSystem.MessageSystem : _props$MessageSystem,
     MessageText = props.MessageText,
+    messageTextNumberOfLines = props.messageTextNumberOfLines,
     _props$MessageTimesta = props.MessageTimestamp,
     MessageTimestamp = _props$MessageTimesta === void 0 ? _MessageTimestamp.MessageTimestamp : _props$MessageTimesta,
+    _props$MessageUserRea = props.MessageUserReactions,
+    MessageUserReactions = _props$MessageUserRea === void 0 ? _MessageUserReactions.MessageUserReactions : _props$MessageUserRea,
+    _props$MessageUserRea2 = props.MessageUserReactionsAvatar,
+    MessageUserReactionsAvatar = _props$MessageUserRea2 === void 0 ? _MessageUserReactionsAvatar.MessageUserReactionsAvatar : _props$MessageUserRea2,
+    _props$MessageUserRea3 = props.MessageUserReactionsItem,
+    MessageUserReactionsItem = _props$MessageUserRea3 === void 0 ? _MessageUserReactionsItem.MessageUserReactionsItem : _props$MessageUserRea3,
     _props$MoreOptionsBut = props.MoreOptionsButton,
     MoreOptionsButton = _props$MoreOptionsBut === void 0 ? _MoreOptionsButton.MoreOptionsButton : _props$MoreOptionsBut,
     myMessageTheme = props.myMessageTheme,
@@ -387,13 +406,14 @@ var ChannelWithContext = function ChannelWithContext(props) {
     onPressInMessage = props.onPressInMessage,
     onPressMessage = props.onPressMessage,
     openPollCreationDialog = props.openPollCreationDialog,
-    _props$OverlayReactio = props.OverlayReactionList,
-    OverlayReactionList = _props$OverlayReactio === void 0 ? _OverlayReactionList.OverlayReactionList : _props$OverlayReactio,
     overrideOwnCapabilities = props.overrideOwnCapabilities,
     PollContent = props.PollContent,
-    _props$ReactionList = props.ReactionList,
-    ReactionList = _props$ReactionList === void 0 ? _ReactionList.ReactionList : _props$ReactionList,
-    read = props.read,
+    _props$ReactionListBo = props.ReactionListBottom,
+    ReactionListBottom = _props$ReactionListBo === void 0 ? _ReactionListBottom.ReactionListBottom : _props$ReactionListBo,
+    _props$reactionListPo = props.reactionListPosition,
+    reactionListPosition = _props$reactionListPo === void 0 ? 'top' : _props$reactionListPo,
+    _props$ReactionListTo = props.ReactionListTop,
+    ReactionListTop = _props$ReactionListTo === void 0 ? _ReactionListTop.ReactionListTop : _props$ReactionListTo,
     _props$Reply = props.Reply,
     Reply = _props$Reply === void 0 ? _Reply.Reply : _props$Reply,
     _props$ScrollToBottom = props.ScrollToBottomButton,
@@ -406,13 +426,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$SendMessageDis = props.SendMessageDisallowedIndicator,
     SendMessageDisallowedIndicator = _props$SendMessageDis === void 0 ? _SendMessageDisallowedIndicator.SendMessageDisallowedIndicator : _props$SendMessageDis,
     setInputRef = props.setInputRef,
-    setMembers = props.setMembers,
-    setMessages = props.setMessages,
-    setRead = props.setRead,
     setThreadMessages = props.setThreadMessages,
-    setTyping = props.setTyping,
-    setWatcherCount = props.setWatcherCount,
-    setWatchers = props.setWatchers,
     _props$shouldShowUnre = props.shouldShowUnreadUnderlay,
     shouldShowUnreadUnderlay = _props$shouldShowUnre === void 0 ? true : _props$shouldShowUnre,
     shouldSyncChannel = props.shouldSyncChannel,
@@ -433,7 +447,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     threadFromProps = props.thread,
     threadList = props.threadList,
     threadMessages = props.threadMessages,
-    typing = props.typing,
     _props$TypingIndicato = props.TypingIndicator,
     TypingIndicator = _props$TypingIndicato === void 0 ? _TypingIndicator.TypingIndicator : _props$TypingIndicato,
     _props$TypingIndicato2 = props.TypingIndicatorContainer,
@@ -443,9 +456,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$UrlPreview = props.UrlPreview,
     UrlPreview = _props$UrlPreview === void 0 ? _Card.Card : _props$UrlPreview,
     _props$VideoThumbnail = props.VideoThumbnail,
-    VideoThumbnail = _props$VideoThumbnail === void 0 ? _VideoThumbnail.VideoThumbnail : _props$VideoThumbnail,
-    watcherCount = props.watcherCount,
-    watchers = props.watchers;
+    VideoThumbnail = _props$VideoThumbnail === void 0 ? _VideoThumbnail.VideoThumbnail : _props$VideoThumbnail;
   var threadProps = threadFromProps.thread,
     threadInstance = threadFromProps.threadInstance;
   var StopMessageStreamingButton = StopMessageStreamingButtonOverride === undefined ? _StopMessageStreamingButton.StopMessageStreamingButton : StopMessageStreamingButtonOverride;
@@ -465,59 +476,84 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     error = _useState6[0],
     setError = _useState6[1];
-  var _useState7 = (0, _react.useState)(true),
+  var _useState7 = (0, _react.useState)(),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    hasMore = _useState8[0],
-    setHasMore = _useState8[1];
-  var _useState9 = (0, _react.useState)(),
+    lastRead = _useState8[0],
+    setLastRead = _useState8[1];
+  var _useState9 = (0, _react.useState)(undefined),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    lastRead = _useState10[0],
-    setLastRead = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
+    quotedMessage = _useState10[0],
+    setQuotedMessage = _useState10[1];
+  var _useState11 = (0, _react.useState)(threadProps || null),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    loading = _useState12[0],
-    setLoading = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
+    thread = _useState12[0],
+    setThread = _useState12[1];
+  var _useState13 = (0, _react.useState)(true),
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    loadingMore = _useState14[0],
-    setLoadingMore = _useState14[1];
+    threadHasMore = _useState14[0],
+    setThreadHasMore = _useState14[1];
   var _useState15 = (0, _react.useState)(false),
     _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-    loadingMoreRecent = _useState16[0],
-    setLoadingMoreRecent = _useState16[1];
-  var _useState17 = (0, _react.useState)(false),
-    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-    quotedMessage = _useState18[0],
-    setQuotedMessage = _useState18[1];
-  var _useState19 = (0, _react.useState)(threadProps || null),
-    _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-    thread = _useState20[0],
-    setThread = _useState20[1];
-  var _useState21 = (0, _react.useState)(true),
-    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-    threadHasMore = _useState22[0],
-    setThreadHasMore = _useState22[1];
-  var _useState23 = (0, _react.useState)(false),
-    _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
-    threadLoadingMore = _useState24[0],
-    setThreadLoadingMore = _useState24[1];
+    threadLoadingMore = _useState16[0],
+    setThreadLoadingMore = _useState16[1];
   var syncingChannelRef = (0, _react.useRef)(false);
-  var _useState25 = (0, _react.useState)(true),
-    _useState26 = (0, _slicedToArray2["default"])(_useState25, 2),
-    hasNoMoreRecentMessagesToLoad = _useState26[0],
-    setHasNoMoreRecentMessagesToLoad = _useState26[1];
   var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(),
-    prevTargetedMessage = _useTargetedMessage.prevTargetedMessage,
     setTargetedMessage = _useTargetedMessage.setTargetedMessage,
     targetedMessage = _useTargetedMessage.targetedMessage;
-  var hasOverlappingRecentMessagesRef = (0, _react.useRef)(false);
   var uploadAbortControllerRef = (0, _react.useRef)(new Map());
   var channelId = (channel == null ? void 0 : channel.id) || '';
   var pollCreationEnabled = !channel.disconnected && !!(channel != null && channel.id) && (channel == null ? void 0 : (_channel$getConfig = channel.getConfig()) == null ? void 0 : _channel$getConfig.polls);
+  var _useChannelDataState = (0, _useChannelDataState2.useChannelDataState)(channel),
+    copyStateFromChannel = _useChannelDataState.copyStateFromChannel,
+    initStateFromChannel = _useChannelDataState.initStateFromChannel,
+    setTyping = _useChannelDataState.setTyping,
+    channelState = _useChannelDataState.state;
+  var _useMessageListPagina = (0, _useMessageListPagination.useMessageListPagination)({
+      channel: channel
+    }),
+    copyMessagesStateFromChannel = _useMessageListPagina.copyMessagesStateFromChannel,
+    loadChannelAroundMessageFn = _useMessageListPagina.loadChannelAroundMessage,
+    loadChannelAtFirstUnreadMessage = _useMessageListPagina.loadChannelAtFirstUnreadMessage,
+    loadInitialMessagesStateFromChannel = _useMessageListPagina.loadInitialMessagesStateFromChannel,
+    loadLatestMessages = _useMessageListPagina.loadLatestMessages,
+    loadMore = _useMessageListPagina.loadMore,
+    loadMoreRecent = _useMessageListPagina.loadMoreRecent,
+    channelMessagesState = _useMessageListPagina.state;
+  var copyChannelStateThrottlingTime = newMessageStateUpdateThrottleInterval > stateUpdateThrottleInterval ? newMessageStateUpdateThrottleInterval : stateUpdateThrottleInterval;
+  var copyChannelState = (0, _react.useRef)((0, _throttle["default"])(function () {
+    if (channel) {
+      copyStateFromChannel(channel);
+      copyMessagesStateFromChannel(channel);
+    }
+  }, copyChannelStateThrottlingTime, throttleOptions)).current;
+  var handleEvent = function handleEvent(event) {
+    if (shouldSyncChannel) {
+      var ignorableEvents = ['user.watching.start', 'user.watching.stop'];
+      if (ignorableEvents.includes(event.type)) return;
+      var isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
+      if (isTypingEvent) {
+        setTyping(channel);
+      } else {
+        if (thread != null && thread.id) {
+          var _event$message;
+          var updatedThreadMessages = thread.id && channel && channel.state.threads[thread.id] || threadMessages;
+          setThreadMessages(updatedThreadMessages);
+          if (channel && ((_event$message = event.message) == null ? void 0 : _event$message.id) === thread.id && !threadInstance) {
+            var updatedThread = channel.state.formatMessage(event.message);
+            setThread(updatedThread);
+          }
+        }
+      }
+      if (channel && channel.initialized) {
+        copyChannelState();
+      }
+    }
+  };
   (0, _react.useEffect)(function () {
+    var listener;
     var initChannel = function () {
       var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
-        var _channel$state$messag, _channel$state$messag2, _channel$state$latest, _channel$state$latest2;
+        var errored;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -527,42 +563,56 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
               return _context.abrupt("return");
             case 2:
-              if (channel.initialized) {
-                _context.next = 5;
+              errored = false;
+              if (!(!channel.initialized || !channel.state.isUpToDate)) {
+                _context.next = 14;
                 break;
               }
-              _context.next = 5;
-              return loadChannel();
-            case 5:
+              _context.prev = 4;
+              _context.next = 7;
+              return channel == null ? void 0 : channel.watch();
+            case 7:
+              _context.next = 14;
+              break;
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](4);
+              console.warn('Channel watch request failed with error:', _context.t0);
+              setError(true);
+              errored = true;
+            case 14:
+              if (!errored) {
+                initStateFromChannel(channel);
+                loadInitialMessagesStateFromChannel(channel, channel.state.messagePagination.hasPrev);
+              }
               if (!messageId) {
-                _context.next = 9;
+                _context.next = 20;
                 break;
               }
-              loadChannelAroundMessage({
-                messageId: messageId
+              _context.next = 18;
+              return loadChannelAroundMessage({
+                messageId: messageId,
+                setTargetedMessage: setTargetedMessage
               });
-              _context.next = 16;
+            case 18:
+              _context.next = 23;
               break;
-            case 9:
+            case 20:
               if (!(initialScrollToFirstUnreadMessage && channel.countUnread() > scrollToFirstUnreadThreshold)) {
-                _context.next = 13;
+                _context.next = 23;
                 break;
               }
-              loadChannelAtFirstUnreadMessage();
-              _context.next = 16;
-              break;
-            case 13:
-              if (!(((_channel$state$messag = channel.state.messages) == null ? void 0 : (_channel$state$messag2 = _channel$state$messag[channel.state.messages.length - 1]) == null ? void 0 : _channel$state$messag2.id) !== ((_channel$state$latest = channel.state.latestMessages) == null ? void 0 : (_channel$state$latest2 = _channel$state$latest[channel.state.latestMessages.length - 1]) == null ? void 0 : _channel$state$latest2.id) && !messageId)) {
-                _context.next = 16;
-                break;
-              }
-              _context.next = 16;
-              return loadChannel();
-            case 16:
+              _context.next = 23;
+              return loadChannelAtFirstUnreadMessage({
+                setTargetedMessage: setTargetedMessage
+              });
+            case 23:
+              listener = channel.on(handleEvent);
+            case 24:
             case "end":
               return _context.stop();
           }
-        }, _callee);
+        }, _callee, null, [[4, 9]]);
       }));
       return function initChannel() {
         return _ref.apply(this, arguments);
@@ -570,13 +620,29 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }();
     initChannel();
     return function () {
+      var _listener;
       copyChannelState.cancel();
-      copyReadState.cancel();
-      copyTypingState.cancel();
-      loadMoreFinished.cancel();
       loadMoreThreadFinished.cancel();
+      (_listener = listener) == null ? void 0 : _listener.unsubscribe();
+    };
+  }, [channel.cid, messageId, shouldSyncChannel]);
+  (0, _react.useEffect)(function () {
+    var _client$on = client.on('channel.deleted', function (event) {
+        if (event.cid === (channel == null ? void 0 : channel.cid)) {
+          setDeleted(true);
+        }
+      }),
+      unsubscribe = _client$on.unsubscribe;
+    return unsubscribe;
+  }, [channel == null ? void 0 : channel.cid, client]);
+  (0, _react.useEffect)(function () {
+    var handleEvent = function handleEvent(event) {
+      if (channel.cid === event.cid) copyChannelState();
     };
-  }, [channelId, messageId]);
+    var _client$on2 = client.on('notification.mark_read', handleEvent),
+      unsubscribe = _client$on2.unsubscribe;
+    return unsubscribe;
+  }, [channel.cid, client, copyChannelState]);
   var threadPropsExists = !!threadProps;
   (0, _react.useEffect)(function () {
     if (threadProps && shouldSyncChannel) {
@@ -600,9 +666,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   }, [thread == null ? void 0 : thread.id, channelId]);
   (0, _useAppStateListener.useAppStateListener)(undefined, handleAppBackground);
-  var isAdmin = (client == null ? void 0 : (_client$user = client.user) == null ? void 0 : _client$user.role) === 'admin' || (channel == null ? void 0 : channel.state.membership.role) === 'admin';
-  var isModerator = (channel == null ? void 0 : channel.state.membership.role) === 'channel_moderator' || (channel == null ? void 0 : channel.state.membership.role) === 'moderator';
-  var isOwner = (channel == null ? void 0 : channel.state.membership.role) === 'owner';
   var markRead = (0, _react.useRef)((0, _throttle["default"])(function () {
     if (!channel || channel != null && channel.disconnected || !(clientChannelConfig != null && clientChannelConfig.read_events)) {
       return;
@@ -613,579 +676,79 @@ var ChannelWithContext = function ChannelWithContext(props) {
       (0, _streamChat.logChatPromiseExecution)(channel.markRead(), 'mark read');
     }
   }, defaultThrottleInterval, throttleOptions)).current;
-  var copyMessagesState = (0, _react.useRef)((0, _throttle["default"])(function () {
-    if (channel) {
-      clearInterval(mergeSetsIntervalRef.current);
-      setMessages(channel.state.messages);
-      restartSetsMergeFuncRef.current();
-    }
-  }, newMessageStateUpdateThrottleInterval, throttleOptions)).current;
-  var copyTypingState = (0, _react.useRef)((0, _throttle["default"])(function () {
-    if (channel) {
-      setTyping(Object.assign({}, channel.state.typing));
-    }
-  }, stateUpdateThrottleInterval, throttleOptions)).current;
-  var copyReadState = (0, _react.useRef)((0, _throttle["default"])(function () {
-    if (channel) {
-      setRead(Object.assign({}, channel.state.read));
-    }
-  }, stateUpdateThrottleInterval, throttleOptions)).current;
-  var copyChannelState = (0, _react.useRef)((0, _throttle["default"])(function () {
-    setLoading(false);
-    if (channel) {
-      setMembers(Object.assign({}, channel.state.members));
-      setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
-      setRead(Object.assign({}, channel.state.read));
-      setTyping(Object.assign({}, channel.state.typing));
-      setWatcherCount(channel.state.watcher_count);
-      setWatchers(Object.assign({}, channel.state.watchers));
-    }
-  }, stateUpdateThrottleInterval, throttleOptions)).current;
-  (0, _react.useEffect)(function () {
-    var channelSubscriptions = [];
-    if (channel && shouldSyncChannel) {
-      channelSubscriptions.push(channel.on('message.new', copyMessagesState));
-      channelSubscriptions.push(channel.on('message.read', copyReadState));
-      channelSubscriptions.push(channel.on('typing.start', copyTypingState));
-      channelSubscriptions.push(channel.on('typing.stop', copyTypingState));
-    }
-    return function () {
-      channelSubscriptions.forEach(function (s) {
-        return s.unsubscribe();
-      });
-    };
-  }, [channelId, shouldSyncChannel]);
-  (0, _react.useEffect)(function () {
-    var handleEvent = function handleEvent(event) {
-      var ignorableEvents = ['user.watching.start', 'user.watching.stop'];
-      if (ignorableEvents.includes(event.type)) return;
-      if (shouldSyncChannel) {
-        var isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
-        if (!isTypingEvent) {
-          var _event$message;
-          if (thread != null && thread.id) {
-            var updatedThreadMessages = thread.id && channel && channel.state.threads[thread.id] || threadMessages;
-            setThreadMessages(updatedThreadMessages);
-          }
-          if (channel && thread != null && thread.id && ((_event$message = event.message) == null ? void 0 : _event$message.id) === thread.id && !threadInstance) {
-            var updatedThread = channel.state.formatMessage(event.message);
-            setThread(updatedThread);
-          }
-        }
-        if (channel && channel.initialized && event.type !== 'message.new' && event.type !== 'message.read' && event.type !== 'typing.start' && event.type !== 'typing.stop') {
-          copyChannelState();
-        }
-      }
-    };
-    var _channel$on = channel.on(handleEvent),
-      unsubscribe = _channel$on.unsubscribe;
-    return unsubscribe;
-  }, [channelId, thread == null ? void 0 : thread.id, shouldSyncChannel]);
-  (0, _react.useEffect)(function () {
-    var _client$on = client.on('channel.deleted', function (event) {
-        if (event.cid === (channel == null ? void 0 : channel.cid)) {
-          setDeleted(true);
-        }
-      }),
-      unsubscribe = _client$on.unsubscribe;
-    return unsubscribe;
-  }, [channelId]);
-  (0, _react.useEffect)(function () {
-    var handleEvent = function handleEvent(event) {
-      if (channel.cid === event.cid) copyChannelState();
-    };
-    var _client$on2 = client.on('notification.mark_read', handleEvent),
-      unsubscribe = _client$on2.unsubscribe;
-    return unsubscribe;
-  }, []);
-  var channelQueryCallRef = (0, _react.useRef)(function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(queryCall) {
-      var onAfterQueryCall,
-        scrollToMessageId,
-        currentMessages,
-        hadCurrentLatestMessages,
-        scrollToMessageIndex,
-        limitAfter,
-        currentLength,
-        noOfMessagesAfter,
-        endIndex,
-        restOfMessages,
-        latestSet,
-        hasLatestMessages,
-        _args2 = arguments;
+  var reloadThread = function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+      var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, messages, _messages, threadMessage, formattedMessage;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            onAfterQueryCall = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : undefined;
-            scrollToMessageId = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : undefined;
-            setError(false);
-            _context2.prev = 3;
-            clearInterval(mergeSetsIntervalRef.current);
-            _context2.next = 7;
-            return queryCall();
-          case 7:
-            setLastRead(new Date());
-            setHasMore(true);
-            currentMessages = channel.state.messages;
-            hadCurrentLatestMessages = currentMessages.length > 0 && currentMessages === channel.state.latestMessages;
-            if (typeof scrollToMessageId === 'function') {
-              scrollToMessageId = scrollToMessageId();
-            }
-            scrollToMessageIndex = scrollToMessageId ? currentMessages.findIndex(function (_ref3) {
-              var id = _ref3.id;
-              return id === scrollToMessageId;
-            }) : -1;
-            if (channel && scrollToMessageIndex !== -1) {
-              copyChannelState.cancel();
-              limitAfter = 4;
-              currentLength = currentMessages.length;
-              noOfMessagesAfter = currentLength - scrollToMessageIndex - 1;
-              if (noOfMessagesAfter > limitAfter) {
-                endIndex = scrollToMessageIndex + limitAfter;
-                channel.state.clearMessages();
-                channel.state.messages = currentMessages.slice(0, endIndex + 1);
-                splitLatestCurrentMessageSetRef.current();
-                restOfMessages = currentMessages.slice(endIndex + 1);
-                if (hadCurrentLatestMessages) {
-                  latestSet = channel.state.messageSets.find(function (set) {
-                    return set.isLatest;
-                  });
-                  if (latestSet) {
-                    latestSet.messages = restOfMessages;
-                    hasOverlappingRecentMessagesRef.current = true;
-                  }
-                }
-              }
-            }
-            hasLatestMessages = channel.state.latestMessages.length > 0;
-            channel.state.setIsUpToDate(hasLatestMessages);
-            setHasNoMoreRecentMessagesToLoad(hasLatestMessages);
-            copyChannelState();
-            if (scrollToMessageIndex !== -1) {
-              copyChannelState.flush();
-            }
-            onAfterQueryCall == null ? void 0 : onAfterQueryCall();
-            _context2.next = 27;
-            break;
-          case 22:
-            _context2.prev = 22;
-            _context2.t0 = _context2["catch"](3);
-            if (_context2.t0 instanceof Error) {
-              setError(_context2.t0);
-            } else {
-              setError(true);
-            }
-            setLoading(false);
-            setLastRead(new Date());
-          case 27:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2, null, [[3, 22]]);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }());
-  var loadChannelAtFirstUnreadMessage = function loadChannelAtFirstUnreadMessage() {
-    if (!channel) return;
-    var unreadMessageIdToScrollTo;
-    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
-      var unreadCount, isLatestMessageSetShown, lastReadDate, _res$messages$find, res;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            unreadCount = channel.countUnread();
-            if (!(unreadCount === 0)) {
-              _context3.next = 3;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 3:
-            isLatestMessageSetShown = !!channel.state.messageSets.find(function (set) {
-              return set.isCurrent && set.isLatest;
-            });
-            if (!(isLatestMessageSetShown && unreadCount <= channel.state.messages.length)) {
-              _context3.next = 7;
-              break;
-            }
-            unreadMessageIdToScrollTo = channel.state.messages[channel.state.messages.length - unreadCount].id;
-            return _context3.abrupt("return");
-          case 7:
-            lastReadDate = channel.lastRead();
-            if (!lastReadDate) {
-              _context3.next = 17;
-              break;
-            }
-            setLoading(true);
-            _context3.next = 12;
-            return channel.query({
-              messages: {
-                created_at_around: lastReadDate,
-                limit: 30
-              },
-              watch: true
-            }, 'new');
-          case 12:
-            res = _context3.sent;
-            unreadMessageIdToScrollTo = (_res$messages$find = res.messages.find(function (m) {
-              return lastReadDate < (m.created_at ? new Date(m.created_at) : new Date());
-            })) == null ? void 0 : _res$messages$find.id;
-            if (unreadMessageIdToScrollTo) {
-              channel.state.loadMessageIntoState(unreadMessageIdToScrollTo);
-            }
-            _context3.next = 19;
-            break;
-          case 17:
-            _context3.next = 19;
-            return loadLatestMessagesRef.current();
-          case 19:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    })), function () {
-      if (unreadMessageIdToScrollTo) {
-        restartSetsMergeFuncRef.current();
-      }
-    }, function () {
-      return unreadMessageIdToScrollTo;
-    });
-  };
-  var loadChannelAroundMessage = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5(_ref5) {
-      var messageIdToLoadAround;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            messageIdToLoadAround = _ref5.messageId;
-            if (!thread) {
-              _context5.next = 18;
-              break;
-            }
-            if (!messageIdToLoadAround) {
-              _context5.next = 16;
-              break;
-            }
-            setThreadLoadingMore(true);
-            _context5.prev = 4;
-            _context5.next = 7;
-            return channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
-          case 7:
-            setThreadLoadingMore(false);
-            setThreadMessages(channel.state.threads[thread.id]);
-            setTargetedMessage(messageIdToLoadAround);
-            _context5.next = 16;
-            break;
-          case 12:
-            _context5.prev = 12;
-            _context5.t0 = _context5["catch"](4);
-            if (_context5.t0 instanceof Error) {
-              setError(_context5.t0);
-            } else {
-              setError(true);
-            }
-            setThreadLoadingMore(false);
-          case 16:
-            _context5.next = 20;
-            break;
-          case 18:
-            _context5.next = 20;
-            return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
-              var currentMessageSet, recentCurrentSetMsgId;
-              return _regenerator["default"].wrap(function _callee4$(_context4) {
-                while (1) switch (_context4.prev = _context4.next) {
-                  case 0:
-                    setLoading(true);
-                    if (!messageIdToLoadAround) {
-                      _context4.next = 10;
-                      break;
-                    }
-                    setMessages([]);
-                    _context4.next = 5;
-                    return channel.state.loadMessageIntoState(messageIdToLoadAround);
-                  case 5:
-                    currentMessageSet = channel.state.messageSets.find(function (set) {
-                      return set.isCurrent;
-                    });
-                    if (!(currentMessageSet && !(currentMessageSet != null && currentMessageSet.isLatest))) {
-                      _context4.next = 10;
-                      break;
-                    }
-                    recentCurrentSetMsgId = currentMessageSet.messages[currentMessageSet.messages.length - 1].id;
-                    _context4.next = 10;
-                    return channel.query({
-                      messages: {
-                        id_gte: recentCurrentSetMsgId,
-                        limit: 25
-                      }
-                    }, 'current');
-                  case 10:
-                  case "end":
-                    return _context4.stop();
-                }
-              }, _callee4);
-            })), function () {
-              if (messageIdToLoadAround) {
-                clearInterval(mergeSetsIntervalRef.current);
-                setTargetedMessage(messageIdToLoadAround);
-              }
-            }, messageIdToLoadAround);
-          case 20:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5, null, [[4, 12]]);
-    }));
-    return function loadChannelAroundMessage(_x2) {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-  (0, _react.useEffect)(function () {
-    if (!targetedMessage && prevTargetedMessage) {
-      restartSetsMergeFuncRef.current();
-    }
-  }, [targetedMessage]);
-  var loadChannelAtMessage = function loadChannelAtMessage(_ref8) {
-    var _ref8$after = _ref8.after,
-      after = _ref8$after === void 0 ? 2 : _ref8$after,
-      _ref8$before = _ref8.before,
-      before = _ref8$before === void 0 ? 30 : _ref8$before,
-      messageId = _ref8.messageId;
-    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
-          case 0:
-            _context6.next = 2;
-            return queryAtMessage({
-              after: after,
-              before: before,
-              messageId: messageId
-            });
-          case 2:
-            if (messageId) {
-              setTargetedMessage(messageId);
-            }
-          case 3:
-          case "end":
-            return _context6.stop();
-        }
-      }, _callee6);
-    })));
-  };
-  var splitLatestCurrentMessageSetRef = (0, _react.useRef)(function () {
-    var currentLatestSet = channel.state.messageSets.find(function (set) {
-      return set.isCurrent && set.isLatest;
-    });
-    if (!currentLatestSet) return;
-    currentLatestSet.isLatest = false;
-    channel.state.messageSets.push({
-      isCurrent: false,
-      isLatest: true,
-      messages: [],
-      pagination: {
-        hasNext: true,
-        hasPrev: true
-      }
-    });
-  });
-  var mergeOverlappingMessageSetsRef = (0, _react.useRef)(function () {
-    var limitToMaxRenderPerBatch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (hasOverlappingRecentMessagesRef.current) {
-      var limit = 5;
-      var latestMessageSet = channel.state.messageSets.find(function (set) {
-        return set.isLatest;
-      });
-      var currentMessageSet = channel.state.messageSets.find(function (set) {
-        return set.isCurrent;
-      });
-      if (latestMessageSet && currentMessageSet && latestMessageSet !== currentMessageSet) {
-        if (limitToMaxRenderPerBatch && latestMessageSet.messages.length > limit) {
-          currentMessageSet.messages = currentMessageSet.messages.concat(latestMessageSet.messages.slice(0, limit));
-          latestMessageSet.messages = latestMessageSet.messages.slice(limit);
-        } else {
-          channel.state.messageSets = channel.state.messageSets.filter(function (set) {
-            return !set.isLatest;
-          });
-          currentMessageSet.messages = currentMessageSet.messages.concat(latestMessageSet.messages);
-          currentMessageSet.isLatest = true;
-          hasOverlappingRecentMessagesRef.current = false;
-          clearInterval(mergeSetsIntervalRef.current);
-        }
-        return true;
-      }
-    }
-    return false;
-  });
-  var mergeSetsIntervalRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    return function () {
-      clearInterval(mergeSetsIntervalRef.current);
-    };
-  }, []);
-  var restartSetsMergeFuncRef = (0, _react.useRef)(function () {
-    clearInterval(mergeSetsIntervalRef.current);
-    if (!hasOverlappingRecentMessagesRef.current) return;
-  });
-  var loadLatestMessagesRef = (0, _react.useRef)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
-    var clearLatest,
-      latestSet,
-      _args7 = arguments;
-    return _regenerator["default"].wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          clearLatest = _args7.length > 0 && _args7[0] !== undefined ? _args7[0] : false;
-          mergeOverlappingMessageSetsRef.current();
-          if (clearLatest) {
-            latestSet = channel.state.messageSets.find(function (set) {
-              return set.isLatest;
-            });
-            if (latestSet) latestSet.messages = [];
-          }
-          if (!(channel.state.latestMessages.length === 0)) {
-            _context7.next = 6;
-            break;
-          }
-          _context7.next = 6;
-          return channel.query({}, 'latest');
-        case 6:
-          _context7.next = 8;
-          return channel.state.loadMessageIntoState('latest');
-        case 8:
-          setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
-        case 9:
-        case "end":
-          return _context7.stop();
-      }
-    }, _callee7);
-  })));
-  var loadChannel = function loadChannel() {
-    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8() {
-      return _regenerator["default"].wrap(function _callee8$(_context8) {
-        while (1) switch (_context8.prev = _context8.next) {
-          case 0:
-            if (!(!(channel != null && channel.initialized) || !channel.state.isUpToDate)) {
-              _context8.next = 5;
-              break;
-            }
-            _context8.next = 3;
-            return channel == null ? void 0 : channel.watch();
-          case 3:
-            _context8.next = 7;
-            break;
-          case 5:
-            _context8.next = 7;
-            return channel.state.loadMessageIntoState('latest');
-          case 7:
-          case "end":
-            return _context8.stop();
-        }
-      }, _callee8);
-    })), function () {
-      channel == null ? void 0 : channel.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
-    });
-  };
-  var reloadThread = function () {
-    var _ref12 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9() {
-      var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, _messages, _messages2, threadMessage, formattedMessage;
-      return _regenerator["default"].wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             if (!(!channel || !(thread != null && thread.id))) {
-              _context9.next = 2;
+              _context2.next = 2;
               break;
             }
-            return _context9.abrupt("return");
+            return _context2.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context9.prev = 3;
+            _context2.prev = 3;
             parentID = thread.id;
             limit = 50;
             channel.state.threads[parentID] = [];
-            _context9.next = 9;
+            _context2.next = 9;
             return channel.getReplies(parentID, {
               limit: limit
             });
           case 9:
-            queryResponse = _context9.sent;
+            queryResponse = _context2.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-            _context9.next = 15;
+            _context2.next = 15;
             return channel.getMessagesById([parentID]);
           case 15:
-            _yield$channel$getMes = _context9.sent;
-            _messages = _yield$channel$getMes.messages;
-            _messages2 = (0, _slicedToArray2["default"])(_messages, 1), threadMessage = _messages2[0];
+            _yield$channel$getMes = _context2.sent;
+            messages = _yield$channel$getMes.messages;
+            _messages = (0, _slicedToArray2["default"])(messages, 1), threadMessage = _messages[0];
             if (threadMessage && !threadInstance) {
               formattedMessage = channel.state.formatMessage(threadMessage);
               setThread(formattedMessage);
             }
-            _context9.next = 27;
+            _context2.next = 27;
             break;
           case 21:
-            _context9.prev = 21;
-            _context9.t0 = _context9["catch"](3);
-            console.warn('Thread loading request failed with error', _context9.t0);
-            if (_context9.t0 instanceof Error) {
-              setError(_context9.t0);
+            _context2.prev = 21;
+            _context2.t0 = _context2["catch"](3);
+            console.warn('Thread loading request failed with error', _context2.t0);
+            if (_context2.t0 instanceof Error) {
+              setError(_context2.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context9.t0;
+            throw _context2.t0;
           case 27:
           case "end":
-            return _context9.stop();
+            return _context2.stop();
         }
-      }, _callee9, null, [[3, 21]]);
+      }, _callee2, null, [[3, 21]]);
     }));
     return function reloadThread() {
-      return _ref12.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var resyncChannel = function () {
-    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10() {
-      var _messages$, state, oldListTopMessage, oldListTopMessageId, oldListBottomMessage, newListTopMessage, newListBottomMessage, parseMessage, failedMessages, failedThreadMessages, oldListTopMessageCreatedAt, oldListBottomMessageCreatedAt, newListTopMessageCreatedAt, newListBottomMessageCreatedAt, finalMessages, index;
-      return _regenerator["default"].wrap(function _callee10$(_context10) {
-        while (1) switch (_context10.prev = _context10.next) {
+    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+      var parseMessage, _channelMessagesState, failedMessages, failedThreadMessages;
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             if (!(!channel || syncingChannelRef.current)) {
-              _context10.next = 2;
+              _context3.next = 2;
               break;
             }
-            return _context10.abrupt("return");
+            return _context3.abrupt("return");
           case 2:
-            hasOverlappingRecentMessagesRef.current = false;
-            clearInterval(mergeSetsIntervalRef.current);
             syncingChannelRef.current = true;
             setError(false);
-            _context10.prev = 6;
-            _context10.next = 9;
-            return channel.watch({
-              messages: {
-                limit: messages.length + 30
-              }
-            });
-          case 9:
-            state = _context10.sent;
-            oldListTopMessage = messages[0];
-            oldListTopMessageId = (_messages$ = messages[0]) == null ? void 0 : _messages$.id;
-            oldListBottomMessage = messages[messages.length - 1];
-            newListTopMessage = state.messages[0];
-            newListBottomMessage = state.messages[state.messages.length - 1];
-            if (!(!oldListTopMessage || !oldListBottomMessage || !newListTopMessage || !newListBottomMessage)) {
-              _context10.next = 22;
-              break;
-            }
-            channel.state.clearMessages();
-            channel.state.setIsUpToDate(true);
-            channel.state.addMessagesSorted(state.messages);
-            channel.state.addPinnedMessages(state.pinned_messages);
-            copyChannelState();
-            return _context10.abrupt("return");
-          case 22:
             parseMessage = function parseMessage(message) {
               var _message$pinned_at, _message$updated_at;
               return Object.assign({}, message, {
@@ -1194,64 +757,52 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 updated_at: (_message$updated_at = message.updated_at) == null ? void 0 : _message$updated_at.toString()
               });
             };
-            failedMessages = messages.filter(function (message) {
-              return message.status === _utils.MessageStatusTypes.FAILED;
-            }).map(parseMessage);
-            failedThreadMessages = thread ? threadMessages.filter(function (message) {
-              return message.status === _utils.MessageStatusTypes.FAILED;
-            }).map(parseMessage) : [];
-            oldListTopMessageCreatedAt = oldListTopMessage.created_at;
-            oldListBottomMessageCreatedAt = oldListBottomMessage.created_at;
-            newListTopMessageCreatedAt = newListTopMessage.created_at ? new Date(newListTopMessage.created_at) : new Date();
-            newListBottomMessageCreatedAt = newListBottomMessage != null && newListBottomMessage.created_at ? new Date(newListBottomMessage.created_at) : new Date();
-            finalMessages = [];
-            if (oldListTopMessage && oldListTopMessageCreatedAt && oldListBottomMessageCreatedAt && newListTopMessageCreatedAt < oldListTopMessageCreatedAt && newListBottomMessageCreatedAt >= oldListBottomMessageCreatedAt) {
-              index = state.messages.findIndex(function (message) {
-                return message.id === oldListTopMessageId;
-              });
-              finalMessages = state.messages.slice(index);
-            } else {
-              finalMessages = state.messages;
+            _context3.prev = 5;
+            if (thread) {
+              _context3.next = 12;
+              break;
             }
-            channel.state.setIsUpToDate(true);
-            channel.state.clearMessages();
-            channel.state.addMessagesSorted(finalMessages);
-            channel.state.addPinnedMessages(state.pinned_messages);
-            setHasNoMoreRecentMessagesToLoad(true);
-            setHasMore(true);
             copyChannelState();
-            if (failedMessages.length) {
+            failedMessages = (_channelMessagesState = channelMessagesState.messages) == null ? void 0 : _channelMessagesState.filter(function (message) {
+              return message.status === _utils.MessageStatusTypes.FAILED;
+            }).map(parseMessage);
+            if (failedMessages != null && failedMessages.length) {
               channel.state.addMessagesSorted(failedMessages);
-              copyChannelState();
             }
-            _context10.next = 41;
+            _context3.next = 16;
+            break;
+          case 12:
+            _context3.next = 14;
             return reloadThread();
-          case 41:
-            if (thread && failedThreadMessages.length) {
+          case 14:
+            failedThreadMessages = thread ? threadMessages.filter(function (message) {
+              return message.status === _utils.MessageStatusTypes.FAILED;
+            }).map(parseMessage) : [];
+            if (failedThreadMessages.length) {
               channel.state.addMessagesSorted(failedThreadMessages);
               setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
             }
-            _context10.next = 48;
+          case 16:
+            _context3.next = 21;
             break;
-          case 44:
-            _context10.prev = 44;
-            _context10.t0 = _context10["catch"](6);
-            if (_context10.t0 instanceof Error) {
-              setError(_context10.t0);
+          case 18:
+            _context3.prev = 18;
+            _context3.t0 = _context3["catch"](5);
+            if (_context3.t0 instanceof Error) {
+              setError(_context3.t0);
             } else {
               setError(true);
             }
-            setLoading(false);
-          case 48:
+          case 21:
             syncingChannelRef.current = false;
-          case 49:
+          case 22:
           case "end":
-            return _context10.stop();
+            return _context3.stop();
         }
-      }, _callee10, null, [[6, 44]]);
+      }, _callee3, null, [[5, 18]]);
     }));
     return function resyncChannel() {
-      return _ref13.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var resyncChannelRef = (0, _react.useRef)(resyncChannel);
@@ -1266,7 +817,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     if (enableOfflineSupport) {
       connectionChangedSubscription = _DBSyncManager.DBSyncManager.onSyncStatusChange(function (statusChanged) {
         if (statusChanged) {
-          connectionChangedHandler();
+          copyChannelState();
         }
       });
     } else {
@@ -1280,204 +831,138 @@ var ChannelWithContext = function ChannelWithContext(props) {
       connectionChangedSubscription.unsubscribe();
     };
   }, [enableOfflineSupport, shouldSyncChannel]);
-  var reloadChannel = function reloadChannel() {
-    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11() {
-      return _regenerator["default"].wrap(function _callee11$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
-          case 0:
-            setLoading(true);
-            _context11.next = 3;
-            return loadLatestMessagesRef.current(true);
-          case 3:
-            setLoading(false);
-          case 4:
-          case "end":
-            return _context11.stop();
-        }
-      }, _callee11);
-    })), function () {
-      channel == null ? void 0 : channel.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
-    });
+  var getChannelConfigSafely = function getChannelConfigSafely() {
+    try {
+      return channel == null ? void 0 : channel.getConfig();
+    } catch (_) {
+      return null;
+    }
   };
-  var queryAtMessage = function () {
-    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(_ref15) {
-      var _ref15$after, after, _ref15$before, before, messageId;
-      return _regenerator["default"].wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
+  var clientChannelConfig = getChannelConfigSafely();
+  var reloadChannel = function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            _ref15$after = _ref15.after, after = _ref15$after === void 0 ? 10 : _ref15$after, _ref15$before = _ref15.before, before = _ref15$before === void 0 ? 10 : _ref15$before, messageId = _ref15.messageId;
-            if (channel) {
-              _context12.next = 3;
-              break;
-            }
-            return _context12.abrupt("return");
+            _context4.prev = 0;
+            _context4.next = 3;
+            return loadLatestMessages();
           case 3:
-            channel.state.setIsUpToDate(false);
-            hasOverlappingRecentMessagesRef.current = false;
-            clearInterval(mergeSetsIntervalRef.current);
-            channel.state.clearMessages();
-            setMessages([]);
-            if (messageId) {
-              _context12.next = 13;
-              break;
-            }
-            _context12.next = 11;
-            return channel.query({
-              messages: {
-                limit: before
-              },
-              watch: true
-            });
-          case 11:
-            channel.state.setIsUpToDate(true);
-            return _context12.abrupt("return");
-          case 13:
-            _context12.next = 15;
-            return queryBeforeMessage(messageId, before);
-          case 15:
-            _context12.next = 17;
-            return queryAfterMessage(messageId, after);
-          case 17:
+            _context4.next = 8;
+            break;
+          case 5:
+            _context4.prev = 5;
+            _context4.t0 = _context4["catch"](0);
+            console.warn('Reloading channel failed with error:', _context4.t0);
+          case 8:
           case "end":
-            return _context12.stop();
+            return _context4.stop();
         }
-      }, _callee12);
+      }, _callee4, null, [[0, 5]]);
     }));
-    return function queryAtMessage(_x3) {
-      return _ref16.apply(this, arguments);
+    return function reloadChannel() {
+      return _ref4.apply(this, arguments);
     };
   }();
-  var queryBeforeMessage = function () {
-    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(messageId) {
-      var limit,
-        _args13 = arguments;
-      return _regenerator["default"].wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
+  var loadChannelAroundMessage = function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5(_ref5) {
+      var messageIdToLoadAround;
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            limit = _args13.length > 1 && _args13[1] !== undefined ? _args13[1] : 5;
-            if (channel) {
-              _context13.next = 3;
+            messageIdToLoadAround = _ref5.messageId;
+            if (messageIdToLoadAround) {
+              _context5.next = 3;
               break;
             }
-            return _context13.abrupt("return");
+            return _context5.abrupt("return");
           case 3:
-            _context13.next = 5;
-            return channel.query({
-              messages: {
-                id_lt: messageId,
-                limit: limit
-              },
-              watch: true
-            });
-          case 5:
-            channel.state.setIsUpToDate(false);
-          case 6:
-          case "end":
-            return _context13.stop();
-        }
-      }, _callee13);
-    }));
-    return function queryBeforeMessage(_x4) {
-      return _ref17.apply(this, arguments);
-    };
-  }();
-  var queryAfterMessage = function () {
-    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(messageId) {
-      var limit,
-        state,
-        currentSet,
-        _args14 = arguments;
-      return _regenerator["default"].wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
-          case 0:
-            limit = _args14.length > 1 && _args14[1] !== undefined ? _args14[1] : 5;
-            if (channel) {
-              _context14.next = 3;
+            _context5.prev = 3;
+            if (!thread) {
+              _context5.next = 20;
               break;
             }
-            return _context14.abrupt("return");
-          case 3:
-            _context14.next = 5;
-            return channel.query({
-              messages: {
-                id_gte: messageId,
-                limit: limit
-              },
-              watch: true
-            });
-          case 5:
-            state = _context14.sent;
-            if (state.messages.length < limit) {
-              currentSet = channel.state.messageSets.find(function (set) {
-                return set.isCurrent;
-              });
-              if (currentSet && !currentSet.isLatest) {
-                channel.state.messageSets = channel.state.messageSets.filter(function (set) {
-                  return !set.isLatest;
-                });
-                currentSet.isLatest = true;
-              }
-              channel.state.setIsUpToDate(true);
-              setHasNoMoreRecentMessagesToLoad(true);
+            setThreadLoadingMore(true);
+            _context5.prev = 6;
+            _context5.next = 9;
+            return channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
+          case 9:
+            setThreadLoadingMore(false);
+            setThreadMessages(channel.state.threads[thread.id]);
+            if (setTargetedMessage) {
+              setTargetedMessage(messageIdToLoadAround);
+            }
+            _context5.next = 18;
+            break;
+          case 14:
+            _context5.prev = 14;
+            _context5.t0 = _context5["catch"](6);
+            if (_context5.t0 instanceof Error) {
+              setError(_context5.t0);
             } else {
-              splitLatestCurrentMessageSetRef.current();
-              channel.state.setIsUpToDate(false);
-              setHasNoMoreRecentMessagesToLoad(false);
+              setError(true);
             }
-          case 7:
+            setThreadLoadingMore(false);
+          case 18:
+            _context5.next = 22;
+            break;
+          case 20:
+            _context5.next = 22;
+            return loadChannelAroundMessageFn({
+              messageId: messageIdToLoadAround,
+              setTargetedMessage: setTargetedMessage
+            });
+          case 22:
+            _context5.next = 27;
+            break;
+          case 24:
+            _context5.prev = 24;
+            _context5.t1 = _context5["catch"](3);
+            console.warn('Loading channel around message failed with error:', _context5.t1);
+          case 27:
           case "end":
-            return _context14.stop();
+            return _context5.stop();
         }
-      }, _callee14);
+      }, _callee5, null, [[3, 24], [6, 14]]);
     }));
-    return function queryAfterMessage(_x5) {
-      return _ref18.apply(this, arguments);
+    return function loadChannelAroundMessage(_x) {
+      return _ref6.apply(this, arguments);
     };
   }();
-  var getChannelConfigSafely = function getChannelConfigSafely() {
-    try {
-      return channel == null ? void 0 : channel.getConfig();
-    } catch (_) {
-      return null;
-    }
-  };
-  var clientChannelConfig = getChannelConfigSafely();
   var updateMessage = function updateMessage(updatedMessage) {
     var extraState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    if (channel) {
-      channel.state.addMessageSorted(updatedMessage, true);
-      if (thread && updatedMessage.parent_id) {
-        extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
-        setThreadMessages(extraState.threadMessages);
-      }
-      setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
+    if (!channel) return;
+    channel.state.addMessageSorted(updatedMessage, true);
+    copyMessagesStateFromChannel(channel);
+    if (thread && updatedMessage.parent_id) {
+      extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
+      setThreadMessages(extraState.threadMessages);
     }
   };
   var replaceMessage = function replaceMessage(oldMessage, newMessage) {
     if (channel) {
       channel.state.removeMessage(oldMessage);
       channel.state.addMessageSorted(newMessage, true);
+      copyMessagesStateFromChannel(channel);
       if (thread && newMessage.parent_id) {
         var _threadMessages = channel.state.threads[newMessage.parent_id] || [];
         setThreadMessages(_threadMessages);
       }
-      setMessages(channel.state.messages);
     }
   };
-  var createMessagePreview = function createMessagePreview(_ref19) {
-    var attachments = _ref19.attachments,
-      mentioned_users = _ref19.mentioned_users,
-      parent_id = _ref19.parent_id,
-      poll = _ref19.poll,
-      poll_id = _ref19.poll_id,
-      text = _ref19.text,
-      extraFields = (0, _objectWithoutProperties2["default"])(_ref19, _excluded);
-    var _client$user2 = client.user,
-      channel_mutes = _client$user2.channel_mutes,
-      devices = _client$user2.devices,
-      mutes = _client$user2.mutes,
-      messageUser = (0, _objectWithoutProperties2["default"])(_client$user2, _excluded2);
+  var createMessagePreview = function createMessagePreview(_ref7) {
+    var attachments = _ref7.attachments,
+      mentioned_users = _ref7.mentioned_users,
+      parent_id = _ref7.parent_id,
+      poll = _ref7.poll,
+      poll_id = _ref7.poll_id,
+      text = _ref7.text,
+      extraFields = (0, _objectWithoutProperties2["default"])(_ref7, _excluded);
+    var _client$user = client.user,
+      channel_mutes = _client$user.channel_mutes,
+      devices = _client$user.devices,
+      mutes = _client$user.mutes,
+      messageUser = (0, _objectWithoutProperties2["default"])(_client$user, _excluded2);
     var preview = Object.assign({
       __html: text,
       attachments: attachments,
@@ -1501,7 +986,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
       })
     }, extraFields);
     if (preview.quoted_message_id) {
-      var _quotedMessage = messages.find(function (message) {
+      var _channelMessagesState2;
+      var _quotedMessage = (_channelMessagesState2 = channelMessagesState.messages) == null ? void 0 : _channelMessagesState2.find(function (message) {
         return message.id === preview.quoted_message_id;
       });
       preview.quoted_message = _quotedMessage;
@@ -1509,28 +995,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return preview;
   };
   var uploadPendingAttachments = function () {
-    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15(message) {
+    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6(message) {
       var _updatedMessage$attac;
       var updatedMessage, i, _updatedMessage$attac2, attachment, image, file, _image$name, filename, controller, compressedUri, contentType, uploadResponse, _controller, response;
-      return _regenerator["default"].wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             updatedMessage = Object.assign({}, message);
             if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length)) {
-              _context15.next = 48;
+              _context6.next = 50;
               break;
             }
             i = 0;
           case 3:
             if (!(i < ((_updatedMessage$attac2 = updatedMessage.attachments) == null ? void 0 : _updatedMessage$attac2.length))) {
-              _context15.next = 48;
+              _context6.next = 50;
               break;
             }
             attachment = updatedMessage.attachments[i];
             image = attachment.originalImage;
             file = attachment.originalFile;
             if (!(attachment.type === _types.FileTypes.Image && image != null && image.uri && attachment.image_url && (0, _utils.isLocalUrl)(attachment.image_url))) {
-              _context15.next = 28;
+              _context6.next = 29;
               break;
             }
             filename = (_image$name = image.name) != null ? _image$name : (0, _utils.getFileNameFromPath)(image.uri);
@@ -1539,38 +1025,39 @@ var ChannelWithContext = function ChannelWithContext(props) {
               controller.abort();
               uploadAbortControllerRef.current["delete"](filename);
             }
-            _context15.next = 13;
+            _context6.next = 13;
             return (0, _compressImage.compressedImageURI)(image, compressImageQuality);
           case 13:
-            compressedUri = _context15.sent;
+            compressedUri = _context6.sent;
             contentType = (0, _mimeTypes.lookup)(filename) || 'multipart/form-data';
             if (!doImageUploadRequest) {
-              _context15.next = 21;
+              _context6.next = 21;
               break;
             }
-            _context15.next = 18;
+            _context6.next = 18;
             return doImageUploadRequest(image, channel);
           case 18:
-            _context15.t0 = _context15.sent;
-            _context15.next = 24;
+            _context6.t0 = _context6.sent;
+            _context6.next = 24;
             break;
           case 21:
-            _context15.next = 23;
+            _context6.next = 23;
             return channel.sendImage(compressedUri, filename, contentType);
           case 23:
-            _context15.t0 = _context15.sent;
+            _context6.t0 = _context6.sent;
           case 24:
-            uploadResponse = _context15.t0;
+            uploadResponse = _context6.t0;
             attachment.image_url = uploadResponse.file;
             delete attachment.originalFile;
-            dbApi.updateMessage({
+            _context6.next = 29;
+            return dbApi.updateMessage({
               message: Object.assign({}, updatedMessage, {
                 cid: channel.cid
               })
             });
-          case 28:
+          case 29:
             if (!((attachment.type === _types.FileTypes.File || attachment.type === _types.FileTypes.Audio || attachment.type === _types.FileTypes.VoiceRecording || attachment.type === _types.FileTypes.Video) && attachment.asset_url && (0, _utils.isLocalUrl)(attachment.asset_url) && file != null && file.uri)) {
-              _context15.next = 45;
+              _context6.next = 47;
               break;
             }
             _controller = uploadAbortControllerRef.current.get(file.name);
@@ -1579,66 +1066,67 @@ var ChannelWithContext = function ChannelWithContext(props) {
               uploadAbortControllerRef.current["delete"](file.name);
             }
             if (!doDocUploadRequest) {
-              _context15.next = 37;
+              _context6.next = 38;
               break;
             }
-            _context15.next = 34;
+            _context6.next = 35;
             return doDocUploadRequest(file, channel);
-          case 34:
-            _context15.t1 = _context15.sent;
-            _context15.next = 40;
+          case 35:
+            _context6.t1 = _context6.sent;
+            _context6.next = 41;
             break;
-          case 37:
-            _context15.next = 39;
+          case 38:
+            _context6.next = 40;
             return channel.sendFile(file.uri, file.name, file.mimeType);
-          case 39:
-            _context15.t1 = _context15.sent;
           case 40:
-            response = _context15.t1;
+            _context6.t1 = _context6.sent;
+          case 41:
+            response = _context6.t1;
             attachment.asset_url = response.file;
             if (response.thumb_url) {
               attachment.thumb_url = response.thumb_url;
             }
             delete attachment.originalFile;
-            dbApi.updateMessage({
+            _context6.next = 47;
+            return dbApi.updateMessage({
               message: Object.assign({}, updatedMessage, {
                 cid: channel.cid
               })
             });
-          case 45:
+          case 47:
             i++;
-            _context15.next = 3;
+            _context6.next = 3;
             break;
-          case 48:
-            return _context15.abrupt("return", updatedMessage);
-          case 49:
+          case 50:
+            return _context6.abrupt("return", updatedMessage);
+          case 51:
           case "end":
-            return _context15.stop();
+            return _context6.stop();
         }
-      }, _callee15);
+      }, _callee6);
     }));
-    return function uploadPendingAttachments(_x6) {
-      return _ref20.apply(this, arguments);
+    return function uploadPendingAttachments(_x2) {
+      return _ref8.apply(this, arguments);
     };
   }();
   var sendMessageRequest = function () {
-    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16(message, retrying) {
+    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7(message, retrying) {
       var _updatedMessage, extraFields, attachments, id, mentioned_users, parent_id, text, mentionedUserIds, _messageData, messageResponse, _updatedMessage2;
-      return _regenerator["default"].wrap(function _callee16$(_context16) {
-        while (1) switch (_context16.prev = _context16.next) {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
-            _context16.prev = 0;
-            _context16.next = 3;
+            _context7.prev = 0;
+            _context7.next = 3;
             return uploadPendingAttachments(message);
           case 3:
-            _updatedMessage = _context16.sent;
+            _updatedMessage = _context7.sent;
             extraFields = (0, _omit["default"])(_updatedMessage, ['__html', 'attachments', 'created_at', 'deleted_at', 'html', 'id', 'latest_reactions', 'mentioned_users', 'own_reactions', 'parent_id', 'quoted_message', 'reaction_counts', 'reaction_groups', 'reactions', 'status', 'text', 'type', 'updated_at', 'user']);
             attachments = _updatedMessage.attachments, id = _updatedMessage.id, mentioned_users = _updatedMessage.mentioned_users, parent_id = _updatedMessage.parent_id, text = _updatedMessage.text;
             if (channel.id) {
-              _context16.next = 8;
+              _context7.next = 8;
               break;
             }
-            return _context16.abrupt("return");
+            return _context7.abrupt("return");
           case 8:
             mentionedUserIds = (mentioned_users == null ? void 0 : mentioned_users.map(function (user) {
               return user.id;
@@ -1652,49 +1140,56 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }, extraFields);
             messageResponse = {};
             if (!doSendMessageRequest) {
-              _context16.next = 17;
+              _context7.next = 17;
               break;
             }
-            _context16.next = 14;
+            _context7.next = 14;
             return doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', _messageData);
           case 14:
-            messageResponse = _context16.sent;
-            _context16.next = 21;
+            messageResponse = _context7.sent;
+            _context7.next = 21;
             break;
           case 17:
             if (!channel) {
-              _context16.next = 21;
+              _context7.next = 21;
               break;
             }
-            _context16.next = 20;
+            _context7.next = 20;
             return channel.sendMessage(_messageData);
           case 20:
-            messageResponse = _context16.sent;
+            messageResponse = _context7.sent;
           case 21:
-            if (messageResponse.message) {
-              messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
-              if (enableOfflineSupport) {
-                dbApi.updateMessage({
-                  message: Object.assign({}, messageResponse.message, {
-                    cid: channel.cid
-                  })
-                });
-              }
-              if (retrying) {
-                replaceMessage(message, messageResponse.message);
-              } else {
-                updateMessage(messageResponse.message);
-              }
-              threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
-                message: messageResponse.message
-              });
+            if (!messageResponse.message) {
+              _context7.next = 28;
+              break;
+            }
+            messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
+            if (!enableOfflineSupport) {
+              _context7.next = 26;
+              break;
+            }
+            _context7.next = 26;
+            return dbApi.updateMessage({
+              message: Object.assign({}, messageResponse.message, {
+                cid: channel.cid
+              })
+            });
+          case 26:
+            if (retrying) {
+              replaceMessage(message, messageResponse.message);
+            } else {
+              updateMessage(messageResponse.message);
             }
-            _context16.next = 32;
+            threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
+              message: messageResponse.message
+            });
+          case 28:
+            _context7.next = 40;
             break;
-          case 24:
-            _context16.prev = 24;
-            _context16.t0 = _context16["catch"](0);
-            console.log(_context16.t0);
+          case 30:
+            _context7.prev = 30;
+            _context7.t0 = _context7["catch"](0);
+            console.log(_context7.t0);
             message.status = _utils.MessageStatusTypes.FAILED;
             _updatedMessage2 = Object.assign({}, message, {
               cid: channel.cid
@@ -1703,29 +1198,32 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
               message: _updatedMessage2
             });
-            if (enableOfflineSupport) {
-              dbApi.updateMessage({
-                message: Object.assign({}, message, {
-                  cid: channel.cid
-                })
-              });
+            if (!enableOfflineSupport) {
+              _context7.next = 40;
+              break;
             }
-          case 32:
+            _context7.next = 40;
+            return dbApi.updateMessage({
+              message: Object.assign({}, message, {
+                cid: channel.cid
+              })
+            });
+          case 40:
           case "end":
-            return _context16.stop();
+            return _context7.stop();
         }
-      }, _callee16, null, [[0, 24]]);
+      }, _callee7, null, [[0, 30]]);
     }));
-    return function sendMessageRequest(_x7, _x8) {
-      return _ref21.apply(this, arguments);
+    return function sendMessageRequest(_x3, _x4) {
+      return _ref9.apply(this, arguments);
     };
   }();
   var sendMessage = function () {
-    var _ref22 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17(message) {
+    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8(message) {
       var _channel$state;
       var messagePreview;
-      return _regenerator["default"].wrap(function _callee17$(_context17) {
-        while (1) switch (_context17.prev = _context17.next) {
+      return _regenerator["default"].wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
             if (channel != null && (_channel$state = channel.state) != null && _channel$state.filterErrorMessages) {
               channel.state.filterErrorMessages();
@@ -1733,7 +1231,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
             messagePreview = createMessagePreview(Object.assign({}, message, {
               attachments: message.attachments || []
             }));
-            mergeOverlappingMessageSetsRef.current();
             updateMessage(messagePreview, {
               commands: [],
               messageInput: ''
@@ -1741,31 +1238,35 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
               message: messagePreview
             });
-            if (enableOfflineSupport) {
-              dbApi.upsertMessages({
-                messages: [Object.assign({}, messagePreview, {
-                  cid: channel.cid,
-                  status: _utils.MessageStatusTypes.FAILED
-                })]
-              });
+            if (!enableOfflineSupport) {
+              _context8.next = 7;
+              break;
             }
-            _context17.next = 8;
+            _context8.next = 7;
+            return dbApi.upsertMessages({
+              messages: [Object.assign({}, messagePreview, {
+                cid: channel.cid,
+                status: _utils.MessageStatusTypes.FAILED
+              })]
+            });
+          case 7:
+            _context8.next = 9;
             return sendMessageRequest(messagePreview);
-          case 8:
+          case 9:
           case "end":
-            return _context17.stop();
+            return _context8.stop();
         }
-      }, _callee17);
+      }, _callee8);
     }));
-    return function sendMessage(_x9) {
-      return _ref22.apply(this, arguments);
+    return function sendMessage(_x5) {
+      return _ref10.apply(this, arguments);
     };
   }();
   var retrySendMessage = function () {
-    var _ref23 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee18(message) {
+    var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(message) {
       var statusPendingMessage, messageWithoutReservedFields;
-      return _regenerator["default"].wrap(function _callee18$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+      return _regenerator["default"].wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             statusPendingMessage = Object.assign({}, message, {
               status: _utils.MessageStatusTypes.SENDING
@@ -1774,201 +1275,18 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (!(0, _utils.isBouncedMessage)(message)) {
               updateMessage(messageWithoutReservedFields);
             }
-            _context18.next = 5;
+            _context9.next = 5;
             return sendMessageRequest(messageWithoutReservedFields, true);
           case 5:
           case "end":
-            return _context18.stop();
+            return _context9.stop();
         }
-      }, _callee18);
+      }, _callee9);
     }));
-    return function retrySendMessage(_x10) {
-      return _ref23.apply(this, arguments);
+    return function retrySendMessage(_x6) {
+      return _ref11.apply(this, arguments);
     };
   }();
-  var loadMoreFinished = (0, _react.useRef)((0, _debounce["default"])(function (updatedHasMore, newMessages) {
-    setLoading(false);
-    setLoadingMore(false);
-    setError(false);
-    setHasMore(updatedHasMore);
-    setMessages(newMessages);
-  }, defaultDebounceInterval, debounceOptions)).current;
-  var loadMore = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee19() {
-    var limit,
-      currentMessages,
-      oldestMessage,
-      oldestID,
-      queryResponse,
-      updatedHasMore,
-      _args19 = arguments;
-    return _regenerator["default"].wrap(function _callee19$(_context19) {
-      while (1) switch (_context19.prev = _context19.next) {
-        case 0:
-          limit = _args19.length > 0 && _args19[0] !== undefined ? _args19[0] : 20;
-          if (!(loadingMore || hasMore === false)) {
-            _context19.next = 3;
-            break;
-          }
-          return _context19.abrupt("return");
-        case 3:
-          currentMessages = channel.state.messages;
-          if (currentMessages.length) {
-            _context19.next = 6;
-            break;
-          }
-          return _context19.abrupt("return", setLoadingMore(false));
-        case 6:
-          oldestMessage = currentMessages && currentMessages[0];
-          if (!(oldestMessage && oldestMessage.status !== _utils.MessageStatusTypes.RECEIVED)) {
-            _context19.next = 9;
-            break;
-          }
-          return _context19.abrupt("return", setLoadingMore(false));
-        case 9:
-          setLoadingMore(true);
-          oldestID = oldestMessage && oldestMessage.id;
-          _context19.prev = 11;
-          if (!channel) {
-            _context19.next = 18;
-            break;
-          }
-          _context19.next = 15;
-          return channel.query({
-            messages: {
-              id_lt: oldestID,
-              limit: limit
-            }
-          });
-        case 15:
-          queryResponse = _context19.sent;
-          updatedHasMore = queryResponse.messages.length === limit;
-          loadMoreFinished(updatedHasMore, channel.state.messages);
-        case 18:
-          _context19.next = 25;
-          break;
-        case 20:
-          _context19.prev = 20;
-          _context19.t0 = _context19["catch"](11);
-          if (_context19.t0 instanceof Error) {
-            setError(_context19.t0);
-          } else {
-            setError(true);
-          }
-          setLoadingMore(false);
-          throw _context19.t0;
-        case 25:
-        case "end":
-          return _context19.stop();
-      }
-    }, _callee19, null, [[11, 20]]);
-  })), [channelId, hasMore, loadingMore]);
-  var loadMoreRecent = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee20() {
-    var limit,
-      latestMessageSet,
-      latestLengthBeforeMerge,
-      didMerge,
-      shouldSetStateUpToDate,
-      currentMessages,
-      recentMessage,
-      queryResponse,
-      gotAllRecentMessages,
-      currentSet,
-      _args20 = arguments;
-    return _regenerator["default"].wrap(function _callee20$(_context20) {
-      while (1) switch (_context20.prev = _context20.next) {
-        case 0:
-          limit = _args20.length > 0 && _args20[0] !== undefined ? _args20[0] : 5;
-          latestMessageSet = channel.state.messageSets.find(function (set) {
-            return set.isLatest;
-          });
-          latestLengthBeforeMerge = (latestMessageSet == null ? void 0 : latestMessageSet.messages.length) || 0;
-          didMerge = mergeOverlappingMessageSetsRef.current(true);
-          if (!didMerge) {
-            _context20.next = 13;
-            break;
-          }
-          if (!(latestMessageSet && latestLengthBeforeMerge > 0)) {
-            _context20.next = 13;
-            break;
-          }
-          shouldSetStateUpToDate = latestMessageSet.messages.length < limit && latestMessageSet.isCurrent;
-          setLoadingMoreRecent(true);
-          channel.state.setIsUpToDate(shouldSetStateUpToDate);
-          setHasNoMoreRecentMessagesToLoad(shouldSetStateUpToDate);
-          loadMoreRecentFinished(channel.state.messages);
-          restartSetsMergeFuncRef.current();
-          return _context20.abrupt("return");
-        case 13:
-          if (!channel.state.isUpToDate) {
-            _context20.next = 16;
-            break;
-          }
-          setLoadingMoreRecent(false);
-          return _context20.abrupt("return");
-        case 16:
-          currentMessages = channel.state.messages;
-          recentMessage = currentMessages[currentMessages.length - 1];
-          if (!((recentMessage == null ? void 0 : recentMessage.status) !== _utils.MessageStatusTypes.RECEIVED)) {
-            _context20.next = 21;
-            break;
-          }
-          setLoadingMoreRecent(false);
-          return _context20.abrupt("return");
-        case 21:
-          setLoadingMoreRecent(true);
-          _context20.prev = 22;
-          if (!channel) {
-            _context20.next = 33;
-            break;
-          }
-          _context20.next = 26;
-          return channel.query({
-            messages: {
-              id_gte: recentMessage.id,
-              limit: limit
-            },
-            watch: true
-          });
-        case 26:
-          queryResponse = _context20.sent;
-          gotAllRecentMessages = queryResponse.messages.length < limit;
-          currentSet = channel.state.messageSets.find(function (set) {
-            return set.isCurrent;
-          });
-          if (gotAllRecentMessages && currentSet && !currentSet.isLatest) {
-            channel.state.messageSets = channel.state.messageSets.filter(function (set) {
-              return !set.isLatest;
-            });
-            currentSet.isLatest = true;
-          }
-          channel.state.setIsUpToDate(gotAllRecentMessages);
-          setHasNoMoreRecentMessagesToLoad(gotAllRecentMessages);
-          loadMoreRecentFinished(channel.state.messages);
-        case 33:
-          _context20.next = 41;
-          break;
-        case 35:
-          _context20.prev = 35;
-          _context20.t0 = _context20["catch"](22);
-          console.warn('Message pagination request failed with error', _context20.t0);
-          if (_context20.t0 instanceof Error) {
-            setError(_context20.t0);
-          } else {
-            setError(true);
-          }
-          setLoadingMoreRecent(false);
-          throw _context20.t0;
-        case 41:
-        case "end":
-          return _context20.stop();
-      }
-    }, _callee20, null, [[22, 35]]);
-  })), [channelId, hasNoMoreRecentMessagesToLoad]);
-  var loadMoreRecentFinished = (0, _react.useRef)((0, _debounce["default"])(function (newMessages) {
-    setLoadingMoreRecent(false);
-    setMessages(newMessages);
-    setError(false);
-  }, defaultDebounceInterval, debounceOptions)).current;
   var editMessage = function editMessage(updatedMessage) {
     return doUpdateMessageRequest ? doUpdateMessageRequest((channel == null ? void 0 : channel.cid) || '', updatedMessage) : client.updateMessage(updatedMessage);
   };
@@ -1983,30 +1301,46 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return setEditing(undefined);
   };
   var clearQuotedMessageState = function clearQuotedMessageState() {
-    return setQuotedMessage(false);
-  };
-  var removeMessage = function removeMessage(message) {
-    if (channel) {
-      channel.state.removeMessage(message);
-      setMessages(channel.state.messages);
-      if (thread) {
-        setThreadMessages(channel.state.threads[thread.id] || []);
-      }
-    }
-    if (enableOfflineSupport) {
-      dbApi.deleteMessage({
-        id: message.id
-      });
-    }
+    return setQuotedMessage(undefined);
   };
+  var removeMessage = function () {
+    var _ref12 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(message) {
+      return _regenerator["default"].wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
+          case 0:
+            if (channel) {
+              channel.state.removeMessage(message);
+              copyMessagesStateFromChannel(channel);
+              if (thread) {
+                setThreadMessages(channel.state.threads[thread.id] || []);
+              }
+            }
+            if (!enableOfflineSupport) {
+              _context10.next = 4;
+              break;
+            }
+            _context10.next = 4;
+            return dbApi.deleteMessage({
+              id: message.id
+            });
+          case 4:
+          case "end":
+            return _context10.stop();
+        }
+      }, _callee10);
+    }));
+    return function removeMessage(_x7) {
+      return _ref12.apply(this, arguments);
+    };
+  }();
   var sendReaction = function () {
-    var _ref26 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee21(type, messageId) {
+    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(type, messageId) {
       var payload, sendReactionResponse;
-      return _regenerator["default"].wrap(function _callee21$(_context21) {
-        while (1) switch (_context21.prev = _context21.next) {
+      return _regenerator["default"].wrap(function _callee11$(_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context21.next = 2;
+              _context11.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
@@ -2017,13 +1351,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
               enforce_unique: enforceUniqueReaction
             }];
             if (enableOfflineSupport) {
-              _context21.next = 7;
+              _context11.next = 7;
               break;
             }
-            _context21.next = 6;
+            _context11.next = 6;
             return channel.sendReaction.apply(channel, payload);
           case 6:
-            return _context21.abrupt("return");
+            return _context11.abrupt("return");
           case 7:
             (0, _addReactionToLocalState.addReactionToLocalState)({
               channel: channel,
@@ -2032,8 +1366,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
               reactionType: type,
               user: client.user
             });
-            setMessages(channel.state.messages);
-            _context21.next = 11;
+            copyMessagesStateFromChannel(channel);
+            _context11.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -2045,7 +1379,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             });
           case 11:
-            sendReactionResponse = _context21.sent;
+            sendReactionResponse = _context11.sent;
             if (sendReactionResponse != null && sendReactionResponse.message) {
               threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
                 message: sendReactionResponse.message
@@ -2053,53 +1387,59 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           case 13:
           case "end":
-            return _context21.stop();
+            return _context11.stop();
         }
-      }, _callee21);
+      }, _callee11);
     }));
-    return function sendReaction(_x11, _x12) {
-      return _ref26.apply(this, arguments);
+    return function sendReaction(_x8, _x9) {
+      return _ref13.apply(this, arguments);
     };
   }();
   var deleteMessage = function () {
-    var _ref27 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee22(message) {
+    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message) {
       var _updatedMessage3, _data;
-      return _regenerator["default"].wrap(function _callee22$(_context22) {
-        while (1) switch (_context22.prev = _context22.next) {
+      return _regenerator["default"].wrap(function _callee12$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
             if (channel.id) {
-              _context22.next = 2;
+              _context12.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized yet');
           case 2:
             if (enableOfflineSupport) {
-              _context22.next = 9;
+              _context12.next = 10;
               break;
             }
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context22.next = 6;
+              _context12.next = 7;
               break;
             }
-            removeMessage(message);
-            return _context22.abrupt("return");
+            _context12.next = 6;
+            return removeMessage(message);
           case 6:
-            _context22.next = 8;
+            return _context12.abrupt("return");
+          case 7:
+            _context12.next = 9;
             return client.deleteMessage(message.id);
-          case 8:
-            return _context22.abrupt("return");
           case 9:
+            return _context12.abrupt("return");
+          case 10:
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context22.next = 14;
+              _context12.next = 17;
               break;
             }
-            _DBSyncManager.DBSyncManager.dropPendingTasks({
+            _context12.next = 13;
+            return _DBSyncManager.DBSyncManager.dropPendingTasks({
               messageId: message.id
             });
-            removeMessage(message);
-            _context22.next = 21;
+          case 13:
+            _context12.next = 15;
+            return removeMessage(message);
+          case 15:
+            _context12.next = 24;
             break;
-          case 14:
+          case 17:
             _updatedMessage3 = Object.assign({}, message, {
               cid: channel.cid,
               deleted_at: new Date().toISOString(),
@@ -2109,7 +1449,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null ? void 0 : threadInstance.upsertReplyLocally({
               message: _updatedMessage3
             });
-            _context22.next = 19;
+            _context12.next = 22;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -2120,42 +1460,42 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 type: 'delete-message'
               }
             });
-          case 19:
-            _data = _context22.sent;
+          case 22:
+            _data = _context12.sent;
             if (_data != null && _data.message) {
               updateMessage(Object.assign({}, _data.message));
             }
-          case 21:
+          case 24:
           case "end":
-            return _context22.stop();
+            return _context12.stop();
         }
-      }, _callee22);
+      }, _callee12);
     }));
-    return function deleteMessage(_x13) {
-      return _ref27.apply(this, arguments);
+    return function deleteMessage(_x10) {
+      return _ref14.apply(this, arguments);
     };
   }();
   var deleteReaction = function () {
-    var _ref28 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee23(type, messageId) {
+    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(type, messageId) {
       var payload;
-      return _regenerator["default"].wrap(function _callee23$(_context23) {
-        while (1) switch (_context23.prev = _context23.next) {
+      return _regenerator["default"].wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context23.next = 2;
+              _context13.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
           case 2:
             payload = [messageId, type];
             if (enableOfflineSupport) {
-              _context23.next = 7;
+              _context13.next = 7;
               break;
             }
-            _context23.next = 6;
+            _context13.next = 6;
             return channel.deleteReaction.apply(channel, payload);
           case 6:
-            return _context23.abrupt("return");
+            return _context13.abrupt("return");
           case 7:
             (0, _removeReactionFromLocalState.removeReactionFromLocalState)({
               channel: channel,
@@ -2163,8 +1503,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
               reactionType: type,
               user: client.user
             });
-            setMessages(channel.state.messages);
-            _context23.next = 11;
+            copyMessagesStateFromChannel(channel);
+            _context13.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -2177,12 +1517,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 11:
           case "end":
-            return _context23.stop();
+            return _context13.stop();
         }
-      }, _callee23);
+      }, _callee13);
     }));
-    return function deleteReaction(_x14, _x15) {
-      return _ref28.apply(this, arguments);
+    return function deleteReaction(_x11, _x12) {
+      return _ref15.apply(this, arguments);
     };
   }();
   var openThread = (0, _react.useCallback)(function (message) {
@@ -2203,95 +1543,87 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setThreadMessages(updatedThreadMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
   var loadMoreThread = function () {
-    var _ref29 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee24() {
+    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14() {
       var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
-      return _regenerator["default"].wrap(function _callee24$(_context24) {
-        while (1) switch (_context24.prev = _context24.next) {
+      return _regenerator["default"].wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
             if (!(threadLoadingMore || !(thread != null && thread.id))) {
-              _context24.next = 2;
+              _context14.next = 2;
               break;
             }
-            return _context24.abrupt("return");
+            return _context14.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context24.prev = 3;
+            _context14.prev = 3;
             if (!channel) {
-              _context24.next = 15;
+              _context14.next = 15;
               break;
             }
             parentID = thread.id;
             channel.state.threads[parentID] = threadMessages;
             oldestMessageID = threadMessages == null ? void 0 : (_threadMessages$ = threadMessages[0]) == null ? void 0 : _threadMessages$.id;
             limit = 50;
-            _context24.next = 11;
+            _context14.next = 11;
             return channel.getReplies(parentID, {
               id_lt: oldestMessageID,
               limit: limit
             });
           case 11:
-            queryResponse = _context24.sent;
+            queryResponse = _context14.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
           case 15:
-            _context24.next = 23;
+            _context14.next = 23;
             break;
           case 17:
-            _context24.prev = 17;
-            _context24.t0 = _context24["catch"](3);
-            console.warn('Message pagination request failed with error', _context24.t0);
-            if (_context24.t0 instanceof Error) {
-              setError(_context24.t0);
+            _context14.prev = 17;
+            _context14.t0 = _context14["catch"](3);
+            console.warn('Message pagination request failed with error', _context14.t0);
+            if (_context14.t0 instanceof Error) {
+              setError(_context14.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context24.t0;
+            throw _context14.t0;
           case 23:
           case "end":
-            return _context24.stop();
+            return _context14.stop();
         }
-      }, _callee24, null, [[3, 17]]);
+      }, _callee14, null, [[3, 17]]);
     }));
     return function loadMoreThread() {
-      return _ref29.apply(this, arguments);
+      return _ref16.apply(this, arguments);
     };
   }();
-  var disabledValue = (0, _react.useMemo)(function () {
-    var _channel$data;
-    return !!(channel != null && (_channel$data = channel.data) != null && _channel$data.frozen) && disableIfFrozenChannel;
-  }, [(_channel$data2 = channel.data) == null ? void 0 : _channel$data2.frozen, disableIfFrozenChannel]);
   var ownCapabilitiesContext = (0, _useCreateOwnCapabilitiesContext.useCreateOwnCapabilitiesContext)({
     channel: channel,
     overrideCapabilities: overrideOwnCapabilities
   });
   var channelContext = (0, _useCreateChannelContext.useCreateChannelContext)({
     channel: channel,
-    disabled: disabledValue,
+    disabled: !!(channel != null && (_channel$data = channel.data) != null && _channel$data.frozen),
     EmptyStateIndicator: EmptyStateIndicator,
     enableMessageGroupingByUser: enableMessageGroupingByUser,
     enforceUniqueReaction: enforceUniqueReaction,
     error: error,
-    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref30 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref30.some(function (command) {
+    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref17 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref17.some(function (command) {
       return command.name === 'giphy';
     })),
     hideDateSeparators: hideDateSeparators,
     hideStickyDateHeader: hideStickyDateHeader,
-    isAdmin: isAdmin,
     isChannelActive: shouldSyncChannel,
-    isModerator: isModerator,
-    isOwner: isOwner,
     lastRead: lastRead,
     loadChannelAroundMessage: loadChannelAroundMessage,
-    loadChannelAtMessage: loadChannelAtMessage,
-    loading: loading,
+    loading: channelMessagesState.loading,
     LoadingIndicator: LoadingIndicator,
     markRead: markRead,
     maxTimeBetweenGroupedMessages: maxTimeBetweenGroupedMessages,
-    members: members,
+    members: (_channelState$members = channelState.members) != null ? _channelState$members : {},
     NetworkDownIndicator: NetworkDownIndicator,
-    read: read,
+    read: (_channelState$read = channelState.read) != null ? _channelState$read : {},
     reloadChannel: reloadChannel,
     scrollToFirstUnreadThreshold: scrollToFirstUnreadThreshold,
     setLastRead: setLastRead,
@@ -2300,8 +1632,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     targetedMessage: targetedMessage,
     threadList: threadList,
     uploadAbortControllerRef: uploadAbortControllerRef,
-    watcherCount: watcherCount,
-    watchers: watchers
+    watcherCount: channelState.watcherCount,
+    watchers: channelState.watchers
   });
   var sendMessageRef = (0, _react.useRef)(sendMessage);
   sendMessageRef.current = sendMessage;
@@ -2346,7 +1678,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     InputEditingStateHeader: InputEditingStateHeader,
     InputGiphySearch: InputGiphySearch,
     InputReplyStateHeader: InputReplyStateHeader,
-    maxMessageLength: (_ref31 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref31 : undefined,
+    maxMessageLength: (_ref18 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref18 : undefined,
     maxNumberOfFiles: maxNumberOfFiles,
     mentionAllAppUsersEnabled: mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery: mentionAllAppUsersQuery,
@@ -2370,18 +1702,16 @@ var ChannelWithContext = function ChannelWithContext(props) {
   });
   var messageListContext = (0, _useCreatePaginatedMessageListContext.useCreatePaginatedMessageListContext)({
     channelId: channelId,
-    hasMore: hasMore,
-    hasNoMoreRecentMessagesToLoad: hasNoMoreRecentMessagesToLoad,
-    loadingMore: loadingMoreProp !== undefined ? loadingMoreProp : loadingMore,
-    loadingMoreRecent: loadingMoreRecentProp !== undefined ? loadingMoreRecentProp : loadingMoreRecent,
+    hasMore: channelMessagesState.hasMore,
+    loadingMore: loadingMoreProp !== undefined ? loadingMoreProp : channelMessagesState.loadingMore,
+    loadingMoreRecent: loadingMoreRecentProp !== undefined ? loadingMoreRecentProp : channelMessagesState.loadingMoreRecent,
+    loadLatestMessages: loadLatestMessages,
     loadMore: loadMore,
     loadMoreRecent: loadMoreRecent,
-    messages: messages,
-    setLoadingMore: setLoadingMore,
-    setLoadingMoreRecent: setLoadingMoreRecent
+    messages: (_channelMessagesState3 = channelMessagesState.messages) != null ? _channelMessagesState3 : []
   });
   var messagesContext = (0, _useCreateMessagesContext.useCreateMessagesContext)({
-    additionalTouchableProps: additionalTouchableProps,
+    additionalPressableProps: additionalPressableProps,
     Attachment: Attachment,
     AttachmentActions: AttachmentActions,
     AudioAttachment: AudioAttachment,
@@ -2407,7 +1737,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     Giphy: Giphy,
     giphyVersion: giphyVersion,
     handleBan: handleBan,
-    handleBlock: handleBlock,
     handleCopy: handleCopy,
     handleDelete: handleDelete,
     handleEdit: handleEdit,
@@ -2429,6 +1758,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
     markdownRules: markdownRules,
     Message: Message,
+    MessageActionList: MessageActionList,
+    MessageActionListItem: MessageActionListItem,
     messageActions: messageActions,
     MessageAvatar: MessageAvatar,
     MessageBounce: MessageBounce,
@@ -2440,21 +1771,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
     MessageFooter: MessageFooter,
     MessageHeader: MessageHeader,
     MessageList: MessageList,
+    MessageMenu: MessageMenu,
     MessagePinnedHeader: MessagePinnedHeader,
+    MessageReactionPicker: MessageReactionPicker,
     MessageReplies: MessageReplies,
     MessageRepliesAvatars: MessageRepliesAvatars,
     MessageSimple: MessageSimple,
     MessageStatus: MessageStatus,
     MessageSystem: MessageSystem,
     MessageText: MessageText,
+    messageTextNumberOfLines: messageTextNumberOfLines,
     MessageTimestamp: MessageTimestamp,
+    MessageUserReactions: MessageUserReactions,
+    MessageUserReactionsAvatar: MessageUserReactionsAvatar,
+    MessageUserReactionsItem: MessageUserReactionsItem,
     myMessageTheme: myMessageTheme,
     onLongPressMessage: onLongPressMessage,
     onPressInMessage: onPressInMessage,
     onPressMessage: onPressMessage,
-    OverlayReactionList: OverlayReactionList,
     PollContent: PollContent,
-    ReactionList: ReactionList,
+    ReactionListBottom: ReactionListBottom,
+    reactionListPosition: reactionListPosition,
+    ReactionListTop: ReactionListTop,
     removeMessage: removeMessage,
     Reply: Reply,
     retrySendMessage: retrySendMessage,
@@ -2492,10 +1830,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
     threadMessages: threadMessages
   });
   var typingContext = (0, _useCreateTypingContext.useCreateTypingContext)({
-    typing: typing
+    typing: (_channelState$typing = channelState.typing) != null ? _channelState$typing : {}
   });
   if (deleted) return null;
-  if (!channel || error && messages.length === 0) {
+  if (!channel || error && ((_channelMessagesState4 = channelMessagesState.messages) == null ? void 0 : _channelMessagesState4.length) === 0) {
     return (0, _jsxRuntime.jsx)(LoadingErrorIndicator, {
       error: error,
       listType: "message",
@@ -2564,20 +1902,8 @@ var Channel = function Channel(props) {
   };
   var shouldSyncChannel = threadMessage != null && threadMessage.id ? !!props.threadList : true;
   var _useChannelState = (0, _useChannelState2.useChannelState)(props.channel, props.threadList ? threadMessage == null ? void 0 : threadMessage.id : undefined),
-    members = _useChannelState.members,
-    messages = _useChannelState.messages,
-    read = _useChannelState.read,
-    setMembers = _useChannelState.setMembers,
-    setMessages = _useChannelState.setMessages,
-    setRead = _useChannelState.setRead,
     setThreadMessages = _useChannelState.setThreadMessages,
-    setTyping = _useChannelState.setTyping,
-    setWatcherCount = _useChannelState.setWatcherCount,
-    setWatchers = _useChannelState.setWatchers,
-    threadMessages = _useChannelState.threadMessages,
-    typing = _useChannelState.typing,
-    watcherCount = _useChannelState.watcherCount,
-    watchers = _useChannelState.watchers;
+    threadMessages = _useChannelState.threadMessages;
   return (0, _jsxRuntime.jsx)(ChannelWithContext, Object.assign({
     client: client,
     enableOfflineSupport: enableOfflineSupport,
@@ -2585,21 +1911,9 @@ var Channel = function Channel(props) {
   }, props, {
     shouldSyncChannel: shouldSyncChannel,
     isMessageAIGenerated: isMessageAIGenerated,
-    members: members,
-    messages: props.messages || messages,
-    read: read,
-    setMembers: setMembers,
-    setMessages: setMessages,
-    setRead: setRead,
     setThreadMessages: setThreadMessages,
-    setTyping: setTyping,
-    setWatcherCount: setWatcherCount,
-    setWatchers: setWatchers,
     thread: thread,
-    threadMessages: threadMessages,
-    typing: typing,
-    watcherCount: watcherCount,
-    watchers: watchers
+    threadMessages: threadMessages
   }));
 };
 exports.Channel = Channel;