stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

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

@@ -81,7 +81,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 _AttachButton = require("../MessageInput/AttachButton");
 var _CommandsButton = require("../MessageInput/CommandsButton");
 var _AudioRecorder = require("../MessageInput/components/AudioRecorder/AudioRecorder");
@@ -112,7 +113,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", "text"],
@@ -156,10 +163,10 @@ var debounceOptions = {
   trailing: true
 };
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _client$user, _channel$data2, _ref30, _ref31;
+  var _client$user, _channel$data2, _ref24, _ref25;
   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,
@@ -183,7 +190,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,
@@ -259,7 +266,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,
@@ -275,7 +281,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$hasCommands = props.hasCommands,
     hasCommands = _props$hasCommands === void 0 ? true : _props$hasCommands,
     _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,
     _props$hideDateSepara = props.hideDateSeparators,
@@ -328,6 +334,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
     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,
@@ -349,8 +359,12 @@ 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,
@@ -363,8 +377,16 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _props$MessageSystem = props.MessageSystem,
     MessageSystem = _props$MessageSystem === void 0 ? _MessageSystem.MessageSystem : _props$MessageSystem,
     MessageText = props.MessageText,
+    _props$messageTextNum = props.messageTextNumberOfLines,
+    messageTextNumberOfLines = _props$messageTextNum === void 0 ? 5 : _props$messageTextNum,
     _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,
@@ -378,11 +400,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
     onLongPressMessage = props.onLongPressMessage,
     onPressInMessage = props.onPressInMessage,
     onPressMessage = props.onPressMessage,
-    _props$OverlayReactio = props.OverlayReactionList,
-    OverlayReactionList = _props$OverlayReactio === void 0 ? _OverlayReactionList.OverlayReactionList : _props$OverlayReactio,
     overrideOwnCapabilities = props.overrideOwnCapabilities,
-    _props$ReactionList = props.ReactionList,
-    ReactionList = _props$ReactionList === void 0 ? _ReactionList.ReactionList : _props$ReactionList,
+    _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,
     read = props.read,
     _props$Reply = props.Reply,
     Reply = _props$Reply === void 0 ? _Reply.Reply : _props$Reply,
@@ -471,7 +495,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
     loadingMoreRecent = _useState16[0],
     setLoadingMoreRecent = _useState16[1];
-  var _useState17 = (0, _react.useState)(false),
+  var _useState17 = (0, _react.useState)(undefined),
     _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
     quotedMessage = _useState18[0],
     setQuotedMessage = _useState18[1];
@@ -931,33 +955,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
       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;
@@ -1012,14 +1009,14 @@ var ChannelWithContext = function ChannelWithContext(props) {
     clearInterval(mergeSetsIntervalRef.current);
     if (!hasOverlappingRecentMessagesRef.current) return;
   });
-  var loadLatestMessagesRef = (0, _react.useRef)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+  var loadLatestMessagesRef = (0, _react.useRef)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
     var clearLatest,
       latestSet,
-      _args7 = arguments;
-    return _regenerator["default"].wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
+      _args6 = arguments;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
-          clearLatest = _args7.length > 0 && _args7[0] !== undefined ? _args7[0] : false;
+          clearLatest = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : false;
           mergeOverlappingMessageSetsRef.current();
           if (clearLatest) {
             latestSet = channel.state.messageSets.find(function (set) {
@@ -1028,138 +1025,138 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (latestSet) latestSet.messages = [];
           }
           if (!(channel.state.latestMessages.length === 0)) {
-            _context7.next = 6;
+            _context6.next = 6;
             break;
           }
-          _context7.next = 6;
+          _context6.next = 6;
           return channel.query({}, 'latest');
         case 6:
-          _context7.next = 8;
+          _context6.next = 8;
           return channel.state.loadMessageIntoState('latest');
         case 8:
         case "end":
-          return _context7.stop();
+          return _context6.stop();
       }
-    }, _callee7);
+    }, _callee6);
   })));
   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) {
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             if (!(!(channel != null && channel.initialized) || !channel.state.isUpToDate)) {
-              _context8.next = 5;
+              _context7.next = 5;
               break;
             }
-            _context8.next = 3;
+            _context7.next = 3;
             return channel == null ? void 0 : channel.watch();
           case 3:
-            _context8.next = 7;
+            _context7.next = 7;
             break;
           case 5:
-            _context8.next = 7;
+            _context7.next = 7;
             return channel.state.loadMessageIntoState('latest');
           case 7:
           case "end":
-            return _context8.stop();
+            return _context7.stop();
         }
-      }, _callee8);
+      }, _callee7);
     })), 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 _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8() {
       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) {
+      return _regenerator["default"].wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
             if (!(!channel || !(thread != null && thread.id))) {
-              _context9.next = 2;
+              _context8.next = 2;
               break;
             }
-            return _context9.abrupt("return");
+            return _context8.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context9.prev = 3;
+            _context8.prev = 3;
             parentID = thread.id;
             limit = 50;
             channel.state.threads[parentID] = [];
-            _context9.next = 9;
+            _context8.next = 9;
             return channel.getReplies(parentID, {
               limit: limit
             });
           case 9:
-            queryResponse = _context9.sent;
+            queryResponse = _context8.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-            _context9.next = 15;
+            _context8.next = 15;
             return channel.getMessagesById([parentID]);
           case 15:
-            _yield$channel$getMes = _context9.sent;
+            _yield$channel$getMes = _context8.sent;
             _messages = _yield$channel$getMes.messages;
             _messages2 = (0, _slicedToArray2["default"])(_messages, 1), threadMessage = _messages2[0];
             if (threadMessage && !threadInstance) {
               formattedMessage = channel.state.formatMessage(threadMessage);
               setThread(formattedMessage);
             }
-            _context9.next = 27;
+            _context8.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);
+            _context8.prev = 21;
+            _context8.t0 = _context8["catch"](3);
+            console.warn('Thread loading request failed with error', _context8.t0);
+            if (_context8.t0 instanceof Error) {
+              setError(_context8.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context9.t0;
+            throw _context8.t0;
           case 27:
           case "end":
-            return _context9.stop();
+            return _context8.stop();
         }
-      }, _callee9, null, [[3, 21]]);
+      }, _callee8, null, [[3, 21]]);
     }));
     return function reloadThread() {
-      return _ref12.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
   var resyncChannel = function () {
-    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10() {
+    var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9() {
       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) {
+      return _regenerator["default"].wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             if (!(!channel || syncingChannelRef.current)) {
-              _context10.next = 2;
+              _context9.next = 2;
               break;
             }
-            return _context10.abrupt("return");
+            return _context9.abrupt("return");
           case 2:
             hasOverlappingRecentMessagesRef.current = false;
             clearInterval(mergeSetsIntervalRef.current);
             syncingChannelRef.current = true;
             setError(false);
-            _context10.prev = 6;
-            _context10.next = 9;
+            _context9.prev = 6;
+            _context9.next = 9;
             return channel.watch({
               messages: {
                 limit: messages.length + 30
               }
             });
           case 9:
-            state = _context10.sent;
+            state = _context9.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;
+              _context9.next = 22;
               break;
             }
             channel.state.clearMessages();
@@ -1167,7 +1164,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             channel.state.addMessagesSorted(state.messages);
             channel.state.addPinnedMessages(state.pinned_messages);
             copyChannelState();
-            return _context10.abrupt("return");
+            return _context9.abrupt("return");
           case 22:
             parseMessage = function parseMessage(message) {
               var _message$pinned_at, _message$updated_at;
@@ -1207,20 +1204,20 @@ var ChannelWithContext = function ChannelWithContext(props) {
               channel.state.addMessagesSorted(failedMessages);
               copyChannelState();
             }
-            _context10.next = 41;
+            _context9.next = 41;
             return reloadThread();
           case 41:
             if (thread && failedThreadMessages.length) {
               channel.state.addMessagesSorted(failedThreadMessages);
               setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
             }
-            _context10.next = 48;
+            _context9.next = 48;
             break;
           case 44:
-            _context10.prev = 44;
-            _context10.t0 = _context10["catch"](6);
-            if (_context10.t0 instanceof Error) {
-              setError(_context10.t0);
+            _context9.prev = 44;
+            _context9.t0 = _context9["catch"](6);
+            if (_context9.t0 instanceof Error) {
+              setError(_context9.t0);
             } else {
               setError(true);
             }
@@ -1229,12 +1226,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
             syncingChannelRef.current = false;
           case 49:
           case "end":
-            return _context10.stop();
+            return _context9.stop();
         }
-      }, _callee10, null, [[6, 44]]);
+      }, _callee9, null, [[6, 44]]);
     }));
     return function resyncChannel() {
-      return _ref13.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
   var resyncChannelRef = (0, _react.useRef)(resyncChannel);
@@ -1264,12 +1261,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
     };
   }, [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) {
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10() {
+      return _regenerator["default"].wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
           case 0:
             setLoading(true);
-            _context11.next = 3;
+            _context10.next = 3;
             return loadLatestMessagesRef.current(true);
           case 3:
             setLoading(false);
@@ -1277,146 +1274,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
             setHasNoMoreRecentMessagesToLoad(true);
           case 6:
           case "end":
-            return _context11.stop();
+            return _context10.stop();
         }
-      }, _callee11);
+      }, _callee10);
     })));
   };
-  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) {
-          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");
-          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:
-          case "end":
-            return _context12.stop();
-        }
-      }, _callee12);
-    }));
-    return function queryAtMessage(_x3) {
-      return _ref16.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) {
-          case 0:
-            limit = _args13.length > 1 && _args13[1] !== undefined ? _args13[1] : 5;
-            if (channel) {
-              _context13.next = 3;
-              break;
-            }
-            return _context13.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;
-              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);
-            } else {
-              splitLatestCurrentMessageSetRef.current();
-              channel.state.setIsUpToDate(false);
-              setHasNoMoreRecentMessagesToLoad(false);
-            }
-          case 7:
-          case "end":
-            return _context14.stop();
-        }
-      }, _callee14);
-    }));
-    return function queryAfterMessage(_x5) {
-      return _ref18.apply(this, arguments);
-    };
-  }();
   var getChannelConfigSafely = function getChannelConfigSafely() {
     try {
       return channel == null ? void 0 : channel.getConfig();
@@ -1447,12 +1309,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
       setMessages(channel.state.messages);
     }
   };
-  var createMessagePreview = function createMessagePreview(_ref19) {
-    var attachments = _ref19.attachments,
-      mentioned_users = _ref19.mentioned_users,
-      parent_id = _ref19.parent_id,
-      text = _ref19.text,
-      extraFields = (0, _objectWithoutProperties2["default"])(_ref19, _excluded);
+  var createMessagePreview = function createMessagePreview(_ref13) {
+    var attachments = _ref13.attachments,
+      mentioned_users = _ref13.mentioned_users,
+      parent_id = _ref13.parent_id,
+      text = _ref13.text,
+      extraFields = (0, _objectWithoutProperties2["default"])(_ref13, _excluded);
     var _client$user2 = client.user,
       channel_mutes = _client$user2.channel_mutes,
       devices = _client$user2.devices,
@@ -1487,28 +1349,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return preview;
   };
   var uploadPendingAttachments = function () {
-    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15(message) {
+    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(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 _callee11$(_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
           case 0:
             updatedMessage = Object.assign({}, message);
             if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length)) {
-              _context15.next = 48;
+              _context11.next = 48;
               break;
             }
             i = 0;
           case 3:
             if (!(i < ((_updatedMessage$attac2 = updatedMessage.attachments) == null ? void 0 : _updatedMessage$attac2.length))) {
-              _context15.next = 48;
+              _context11.next = 48;
               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;
+              _context11.next = 28;
               break;
             }
             filename = (_image$name = image.name) != null ? _image$name : (0, _utils.getFileNameFromPath)(image.uri);
@@ -1517,28 +1379,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
               controller.abort();
               uploadAbortControllerRef.current["delete"](filename);
             }
-            _context15.next = 13;
+            _context11.next = 13;
             return (0, _compressImage.compressedImageURI)(image, compressImageQuality);
           case 13:
-            compressedUri = _context15.sent;
+            compressedUri = _context11.sent;
             contentType = (0, _mimeTypes.lookup)(filename) || 'multipart/form-data';
             if (!doImageUploadRequest) {
-              _context15.next = 21;
+              _context11.next = 21;
               break;
             }
-            _context15.next = 18;
+            _context11.next = 18;
             return doImageUploadRequest(image, channel);
           case 18:
-            _context15.t0 = _context15.sent;
-            _context15.next = 24;
+            _context11.t0 = _context11.sent;
+            _context11.next = 24;
             break;
           case 21:
-            _context15.next = 23;
+            _context11.next = 23;
             return channel.sendImage(compressedUri, filename, contentType);
           case 23:
-            _context15.t0 = _context15.sent;
+            _context11.t0 = _context11.sent;
           case 24:
-            uploadResponse = _context15.t0;
+            uploadResponse = _context11.t0;
             attachment.image_url = uploadResponse.file;
             delete attachment.originalFile;
             dbApi.updateMessage({
@@ -1548,7 +1410,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 28:
             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;
+              _context11.next = 45;
               break;
             }
             _controller = uploadAbortControllerRef.current.get(file.name);
@@ -1557,22 +1419,22 @@ var ChannelWithContext = function ChannelWithContext(props) {
               uploadAbortControllerRef.current["delete"](file.name);
             }
             if (!doDocUploadRequest) {
-              _context15.next = 37;
+              _context11.next = 37;
               break;
             }
-            _context15.next = 34;
+            _context11.next = 34;
             return doDocUploadRequest(file, channel);
           case 34:
-            _context15.t1 = _context15.sent;
-            _context15.next = 40;
+            _context11.t1 = _context11.sent;
+            _context11.next = 40;
             break;
           case 37:
-            _context15.next = 39;
+            _context11.next = 39;
             return channel.sendFile(file.uri, file.name, file.mimeType);
           case 39:
-            _context15.t1 = _context15.sent;
+            _context11.t1 = _context11.sent;
           case 40:
-            response = _context15.t1;
+            response = _context11.t1;
             attachment.asset_url = response.file;
             if (response.thumb_url) {
               attachment.thumb_url = response.thumb_url;
@@ -1585,38 +1447,38 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 45:
             i++;
-            _context15.next = 3;
+            _context11.next = 3;
             break;
           case 48:
-            return _context15.abrupt("return", updatedMessage);
+            return _context11.abrupt("return", updatedMessage);
           case 49:
           case "end":
-            return _context15.stop();
+            return _context11.stop();
         }
-      }, _callee15);
+      }, _callee11);
     }));
-    return function uploadPendingAttachments(_x6) {
-      return _ref20.apply(this, arguments);
+    return function uploadPendingAttachments(_x3) {
+      return _ref14.apply(this, arguments);
     };
   }();
   var sendMessageRequest = function () {
-    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16(message, retrying) {
+    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(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 _callee12$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
-            _context16.prev = 0;
-            _context16.next = 3;
+            _context12.prev = 0;
+            _context12.next = 3;
             return uploadPendingAttachments(message);
           case 3:
-            _updatedMessage = _context16.sent;
+            _updatedMessage = _context12.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;
+              _context12.next = 8;
               break;
             }
-            return _context16.abrupt("return");
+            return _context12.abrupt("return");
           case 8:
             mentionedUserIds = (mentioned_users == null ? void 0 : mentioned_users.map(function (user) {
               return user.id;
@@ -1630,24 +1492,24 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }, extraFields);
             messageResponse = {};
             if (!doSendMessageRequest) {
-              _context16.next = 17;
+              _context12.next = 17;
               break;
             }
-            _context16.next = 14;
+            _context12.next = 14;
             return doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', _messageData);
           case 14:
-            messageResponse = _context16.sent;
-            _context16.next = 21;
+            messageResponse = _context12.sent;
+            _context12.next = 21;
             break;
           case 17:
             if (!channel) {
-              _context16.next = 21;
+              _context12.next = 21;
               break;
             }
-            _context16.next = 20;
+            _context12.next = 20;
             return channel.sendMessage(_messageData);
           case 20:
-            messageResponse = _context16.sent;
+            messageResponse = _context12.sent;
           case 21:
             if (messageResponse.message) {
               messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
@@ -1667,12 +1529,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 message: messageResponse.message
               });
             }
-            _context16.next = 32;
+            _context12.next = 32;
             break;
           case 24:
-            _context16.prev = 24;
-            _context16.t0 = _context16["catch"](0);
-            console.log(_context16.t0);
+            _context12.prev = 24;
+            _context12.t0 = _context12["catch"](0);
+            console.log(_context12.t0);
             message.status = _utils.MessageStatusTypes.FAILED;
             _updatedMessage2 = Object.assign({}, message, {
               cid: channel.cid
@@ -1690,20 +1552,20 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           case 32:
           case "end":
-            return _context16.stop();
+            return _context12.stop();
         }
-      }, _callee16, null, [[0, 24]]);
+      }, _callee12, null, [[0, 24]]);
     }));
-    return function sendMessageRequest(_x7, _x8) {
-      return _ref21.apply(this, arguments);
+    return function sendMessageRequest(_x4, _x5) {
+      return _ref15.apply(this, arguments);
     };
   }();
   var sendMessage = function () {
-    var _ref22 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17(message) {
+    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(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 _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
             if (channel != null && (_channel$state = channel.state) != null && _channel$state.filterErrorMessages) {
               channel.state.filterErrorMessages();
@@ -1727,23 +1589,23 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 })]
               });
             }
-            _context17.next = 8;
+            _context13.next = 8;
             return sendMessageRequest(messagePreview);
           case 8:
           case "end":
-            return _context17.stop();
+            return _context13.stop();
         }
-      }, _callee17);
+      }, _callee13);
     }));
-    return function sendMessage(_x9) {
-      return _ref22.apply(this, arguments);
+    return function sendMessage(_x6) {
+      return _ref16.apply(this, arguments);
     };
   }();
   var retrySendMessage = function () {
-    var _ref23 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee18(message) {
+    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message) {
       var statusPendingMessage, messageWithoutReservedFields;
-      return _regenerator["default"].wrap(function _callee18$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+      return _regenerator["default"].wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
             statusPendingMessage = Object.assign({}, message, {
               status: _utils.MessageStatusTypes.SENDING
@@ -1752,16 +1614,16 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (!(0, _utils.isBouncedMessage)(message)) {
               updateMessage(messageWithoutReservedFields);
             }
-            _context18.next = 5;
+            _context14.next = 5;
             return sendMessageRequest(messageWithoutReservedFields, true);
           case 5:
           case "end":
-            return _context18.stop();
+            return _context14.stop();
         }
-      }, _callee18);
+      }, _callee14);
     }));
-    return function retrySendMessage(_x10) {
-      return _ref23.apply(this, arguments);
+    return function retrySendMessage(_x7) {
+      return _ref17.apply(this, arguments);
     };
   }();
   var loadMoreFinished = (0, _react.useRef)((0, _debounce["default"])(function (updatedHasMore, newMessages) {
@@ -1771,46 +1633,46 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setHasMore(updatedHasMore);
     setMessages(newMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
-  var loadMore = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee19() {
+  var loadMore = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
     var limit,
       currentMessages,
       oldestMessage,
       oldestID,
       queryResponse,
       updatedHasMore,
-      _args19 = arguments;
-    return _regenerator["default"].wrap(function _callee19$(_context19) {
-      while (1) switch (_context19.prev = _context19.next) {
+      _args15 = arguments;
+    return _regenerator["default"].wrap(function _callee15$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
         case 0:
-          limit = _args19.length > 0 && _args19[0] !== undefined ? _args19[0] : 20;
+          limit = _args15.length > 0 && _args15[0] !== undefined ? _args15[0] : 20;
           if (!(loadingMore || hasMore === false)) {
-            _context19.next = 3;
+            _context15.next = 3;
             break;
           }
-          return _context19.abrupt("return");
+          return _context15.abrupt("return");
         case 3:
           currentMessages = channel.state.messages;
           if (currentMessages.length) {
-            _context19.next = 6;
+            _context15.next = 6;
             break;
           }
-          return _context19.abrupt("return", setLoadingMore(false));
+          return _context15.abrupt("return", setLoadingMore(false));
         case 6:
           oldestMessage = currentMessages && currentMessages[0];
           if (!(oldestMessage && oldestMessage.status !== _utils.MessageStatusTypes.RECEIVED)) {
-            _context19.next = 9;
+            _context15.next = 9;
             break;
           }
-          return _context19.abrupt("return", setLoadingMore(false));
+          return _context15.abrupt("return", setLoadingMore(false));
         case 9:
           setLoadingMore(true);
           oldestID = oldestMessage && oldestMessage.id;
-          _context19.prev = 11;
+          _context15.prev = 11;
           if (!channel) {
-            _context19.next = 18;
+            _context15.next = 18;
             break;
           }
-          _context19.next = 15;
+          _context15.next = 15;
           return channel.query({
             messages: {
               id_lt: oldestID,
@@ -1818,29 +1680,29 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           });
         case 15:
-          queryResponse = _context19.sent;
+          queryResponse = _context15.sent;
           updatedHasMore = queryResponse.messages.length === limit;
           loadMoreFinished(updatedHasMore, channel.state.messages);
         case 18:
-          _context19.next = 25;
+          _context15.next = 25;
           break;
         case 20:
-          _context19.prev = 20;
-          _context19.t0 = _context19["catch"](11);
-          if (_context19.t0 instanceof Error) {
-            setError(_context19.t0);
+          _context15.prev = 20;
+          _context15.t0 = _context15["catch"](11);
+          if (_context15.t0 instanceof Error) {
+            setError(_context15.t0);
           } else {
             setError(true);
           }
           setLoadingMore(false);
-          throw _context19.t0;
+          throw _context15.t0;
         case 25:
         case "end":
-          return _context19.stop();
+          return _context15.stop();
       }
-    }, _callee19, null, [[11, 20]]);
+    }, _callee15, null, [[11, 20]]);
   })), [channelId, hasMore, loadingMore]);
-  var loadMoreRecent = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee20() {
+  var loadMoreRecent = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16() {
     var limit,
       latestMessageSet,
       latestLengthBeforeMerge,
@@ -1850,22 +1712,22 @@ var ChannelWithContext = function ChannelWithContext(props) {
       queryResponse,
       gotAllRecentMessages,
       currentSet,
-      _args20 = arguments;
-    return _regenerator["default"].wrap(function _callee20$(_context20) {
-      while (1) switch (_context20.prev = _context20.next) {
+      _args16 = arguments;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
         case 0:
-          limit = _args20.length > 0 && _args20[0] !== undefined ? _args20[0] : 5;
+          limit = _args16.length > 0 && _args16[0] !== undefined ? _args16[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 = 12;
+            _context16.next = 12;
             break;
           }
           if (!(latestMessageSet && latestLengthBeforeMerge >= limit)) {
-            _context20.next = 12;
+            _context16.next = 12;
             break;
           }
           setLoadingMoreRecent(true);
@@ -1873,31 +1735,31 @@ var ChannelWithContext = function ChannelWithContext(props) {
           setHasNoMoreRecentMessagesToLoad(true);
           loadMoreRecentFinished(channel.state.messages);
           restartSetsMergeFuncRef.current();
-          return _context20.abrupt("return");
+          return _context16.abrupt("return");
         case 12:
           if (!channel.state.isUpToDate) {
-            _context20.next = 15;
+            _context16.next = 15;
             break;
           }
           setLoadingMoreRecent(false);
-          return _context20.abrupt("return");
+          return _context16.abrupt("return");
         case 15:
           currentMessages = channel.state.messages;
           recentMessage = currentMessages[currentMessages.length - 1];
           if (!((recentMessage == null ? void 0 : recentMessage.status) !== _utils.MessageStatusTypes.RECEIVED)) {
-            _context20.next = 20;
+            _context16.next = 20;
             break;
           }
           setLoadingMoreRecent(false);
-          return _context20.abrupt("return");
+          return _context16.abrupt("return");
         case 20:
           setLoadingMoreRecent(true);
-          _context20.prev = 21;
+          _context16.prev = 21;
           if (!channel) {
-            _context20.next = 32;
+            _context16.next = 32;
             break;
           }
-          _context20.next = 25;
+          _context16.next = 25;
           return channel.query({
             messages: {
               id_gte: recentMessage.id,
@@ -1906,7 +1768,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             watch: true
           });
         case 25:
-          queryResponse = _context20.sent;
+          queryResponse = _context16.sent;
           gotAllRecentMessages = queryResponse.messages.length < limit;
           currentSet = channel.state.messageSets.find(function (set) {
             return set.isCurrent;
@@ -1921,24 +1783,24 @@ var ChannelWithContext = function ChannelWithContext(props) {
           setHasNoMoreRecentMessagesToLoad(gotAllRecentMessages);
           loadMoreRecentFinished(channel.state.messages);
         case 32:
-          _context20.next = 40;
+          _context16.next = 40;
           break;
         case 34:
-          _context20.prev = 34;
-          _context20.t0 = _context20["catch"](21);
-          console.warn('Message pagination request failed with error', _context20.t0);
-          if (_context20.t0 instanceof Error) {
-            setError(_context20.t0);
+          _context16.prev = 34;
+          _context16.t0 = _context16["catch"](21);
+          console.warn('Message pagination request failed with error', _context16.t0);
+          if (_context16.t0 instanceof Error) {
+            setError(_context16.t0);
           } else {
             setError(true);
           }
           setLoadingMoreRecent(false);
-          throw _context20.t0;
+          throw _context16.t0;
         case 40:
         case "end":
-          return _context20.stop();
+          return _context16.stop();
       }
-    }, _callee20, null, [[21, 34]]);
+    }, _callee16, null, [[21, 34]]);
   })), [channelId, hasNoMoreRecentMessagesToLoad]);
   var loadMoreRecentFinished = (0, _react.useRef)((0, _debounce["default"])(function (newMessages) {
     setLoadingMoreRecent(false);
@@ -1959,7 +1821,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return setEditing(undefined);
   };
   var clearQuotedMessageState = function clearQuotedMessageState() {
-    return setQuotedMessage(false);
+    return setQuotedMessage(undefined);
   };
   var removeMessage = function removeMessage(message) {
     if (channel) {
@@ -1976,13 +1838,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   };
   var sendReaction = function () {
-    var _ref26 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee21(type, messageId) {
+    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17(type, messageId) {
       var payload, sendReactionResponse;
-      return _regenerator["default"].wrap(function _callee21$(_context21) {
-        while (1) switch (_context21.prev = _context21.next) {
+      return _regenerator["default"].wrap(function _callee17$(_context17) {
+        while (1) switch (_context17.prev = _context17.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context21.next = 2;
+              _context17.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
@@ -1993,13 +1855,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
               enforce_unique: enforceUniqueReaction
             }];
             if (enableOfflineSupport) {
-              _context21.next = 7;
+              _context17.next = 7;
               break;
             }
-            _context21.next = 6;
+            _context17.next = 6;
             return channel.sendReaction.apply(channel, payload);
           case 6:
-            return _context21.abrupt("return");
+            return _context17.abrupt("return");
           case 7:
             (0, _addReactionToLocalState.addReactionToLocalState)({
               channel: channel,
@@ -2009,7 +1871,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               user: client.user
             });
             setMessages(channel.state.messages);
-            _context21.next = 11;
+            _context17.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -2021,7 +1883,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             });
           case 11:
-            sendReactionResponse = _context21.sent;
+            sendReactionResponse = _context17.sent;
             if (sendReactionResponse != null && sendReactionResponse.message) {
               threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
                 message: sendReactionResponse.message
@@ -2029,51 +1891,51 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           case 13:
           case "end":
-            return _context21.stop();
+            return _context17.stop();
         }
-      }, _callee21);
+      }, _callee17);
     }));
-    return function sendReaction(_x11, _x12) {
-      return _ref26.apply(this, arguments);
+    return function sendReaction(_x8, _x9) {
+      return _ref20.apply(this, arguments);
     };
   }();
   var deleteMessage = function () {
-    var _ref27 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee22(message) {
+    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee18(message) {
       var _updatedMessage3, _data;
-      return _regenerator["default"].wrap(function _callee22$(_context22) {
-        while (1) switch (_context22.prev = _context22.next) {
+      return _regenerator["default"].wrap(function _callee18$(_context18) {
+        while (1) switch (_context18.prev = _context18.next) {
           case 0:
             if (channel.id) {
-              _context22.next = 2;
+              _context18.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized yet');
           case 2:
             if (enableOfflineSupport) {
-              _context22.next = 9;
+              _context18.next = 9;
               break;
             }
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context22.next = 6;
+              _context18.next = 6;
               break;
             }
             removeMessage(message);
-            return _context22.abrupt("return");
+            return _context18.abrupt("return");
           case 6:
-            _context22.next = 8;
+            _context18.next = 8;
             return client.deleteMessage(message.id);
           case 8:
-            return _context22.abrupt("return");
+            return _context18.abrupt("return");
           case 9:
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context22.next = 14;
+              _context18.next = 14;
               break;
             }
             _DBSyncManager.DBSyncManager.dropPendingTasks({
               messageId: message.id
             });
             removeMessage(message);
-            _context22.next = 21;
+            _context18.next = 21;
             break;
           case 14:
             _updatedMessage3 = Object.assign({}, message, {
@@ -2085,7 +1947,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null ? void 0 : threadInstance.upsertReplyLocally({
               message: _updatedMessage3
             });
-            _context22.next = 19;
+            _context18.next = 19;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -2097,41 +1959,41 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             });
           case 19:
-            _data = _context22.sent;
+            _data = _context18.sent;
             if (_data != null && _data.message) {
               updateMessage(Object.assign({}, _data.message));
             }
           case 21:
           case "end":
-            return _context22.stop();
+            return _context18.stop();
         }
-      }, _callee22);
+      }, _callee18);
     }));
-    return function deleteMessage(_x13) {
-      return _ref27.apply(this, arguments);
+    return function deleteMessage(_x10) {
+      return _ref21.apply(this, arguments);
     };
   }();
   var deleteReaction = function () {
-    var _ref28 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee23(type, messageId) {
+    var _ref22 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee19(type, messageId) {
       var payload;
-      return _regenerator["default"].wrap(function _callee23$(_context23) {
-        while (1) switch (_context23.prev = _context23.next) {
+      return _regenerator["default"].wrap(function _callee19$(_context19) {
+        while (1) switch (_context19.prev = _context19.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context23.next = 2;
+              _context19.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
           case 2:
             payload = [messageId, type];
             if (enableOfflineSupport) {
-              _context23.next = 7;
+              _context19.next = 7;
               break;
             }
-            _context23.next = 6;
+            _context19.next = 6;
             return channel.deleteReaction.apply(channel, payload);
           case 6:
-            return _context23.abrupt("return");
+            return _context19.abrupt("return");
           case 7:
             (0, _removeReactionFromLocalState.removeReactionFromLocalState)({
               channel: channel,
@@ -2140,7 +2002,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               user: client.user
             });
             setMessages(channel.state.messages);
-            _context23.next = 11;
+            _context19.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -2153,12 +2015,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 11:
           case "end":
-            return _context23.stop();
+            return _context19.stop();
         }
-      }, _callee23);
+      }, _callee19);
     }));
-    return function deleteReaction(_x14, _x15) {
-      return _ref28.apply(this, arguments);
+    return function deleteReaction(_x11, _x12) {
+      return _ref22.apply(this, arguments);
     };
   }();
   var openThread = (0, _react.useCallback)(function (message) {
@@ -2179,59 +2041,59 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setThreadMessages(updatedThreadMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
   var loadMoreThread = function () {
-    var _ref29 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee24() {
+    var _ref23 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee20() {
       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 _callee20$(_context20) {
+        while (1) switch (_context20.prev = _context20.next) {
           case 0:
             if (!(threadLoadingMore || !(thread != null && thread.id))) {
-              _context24.next = 2;
+              _context20.next = 2;
               break;
             }
-            return _context24.abrupt("return");
+            return _context20.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context24.prev = 3;
+            _context20.prev = 3;
             if (!channel) {
-              _context24.next = 15;
+              _context20.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;
+            _context20.next = 11;
             return channel.getReplies(parentID, {
               id_lt: oldestMessageID,
               limit: limit
             });
           case 11:
-            queryResponse = _context24.sent;
+            queryResponse = _context20.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
           case 15:
-            _context24.next = 23;
+            _context20.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);
+            _context20.prev = 17;
+            _context20.t0 = _context20["catch"](3);
+            console.warn('Message pagination request failed with error', _context20.t0);
+            if (_context20.t0 instanceof Error) {
+              setError(_context20.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context24.t0;
+            throw _context20.t0;
           case 23:
           case "end":
-            return _context24.stop();
+            return _context20.stop();
         }
-      }, _callee24, null, [[3, 17]]);
+      }, _callee20, null, [[3, 17]]);
     }));
     return function loadMoreThread() {
-      return _ref29.apply(this, arguments);
+      return _ref23.apply(this, arguments);
     };
   }();
   var disabledValue = (0, _react.useMemo)(function () {
@@ -2249,7 +2111,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     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 : !!((_ref24 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref24.some(function (command) {
       return command.name === 'giphy';
     })),
     hideDateSeparators: hideDateSeparators,
@@ -2260,7 +2122,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     isOwner: isOwner,
     lastRead: lastRead,
     loadChannelAroundMessage: loadChannelAroundMessage,
-    loadChannelAtMessage: loadChannelAtMessage,
     loading: loading,
     LoadingIndicator: LoadingIndicator,
     markRead: markRead,
@@ -2321,7 +2182,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: (_ref25 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref25 : undefined,
     maxNumberOfFiles: maxNumberOfFiles,
     mentionAllAppUsersEnabled: mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery: mentionAllAppUsersQuery,
@@ -2354,7 +2215,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setLoadingMoreRecent: setLoadingMoreRecent
   });
   var messagesContext = (0, _useCreateMessagesContext.useCreateMessagesContext)({
-    additionalTouchableProps: additionalTouchableProps,
+    additionalPressableProps: additionalPressableProps,
     Attachment: Attachment,
     AttachmentActions: AttachmentActions,
     AudioAttachment: AudioAttachment,
@@ -2380,7 +2241,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     Giphy: Giphy,
     giphyVersion: giphyVersion,
     handleBan: handleBan,
-    handleBlock: handleBlock,
     handleCopy: handleCopy,
     handleDelete: handleDelete,
     handleEdit: handleEdit,
@@ -2400,6 +2260,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
     markdownRules: markdownRules,
     Message: Message,
+    MessageActionList: MessageActionList,
+    MessageActionListItem: MessageActionListItem,
     messageActions: messageActions,
     MessageAvatar: MessageAvatar,
     MessageBounce: MessageBounce,
@@ -2411,20 +2273,27 @@ 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,
-    ReactionList: ReactionList,
+    ReactionListBottom: ReactionListBottom,
+    reactionListPosition: reactionListPosition,
+    ReactionListTop: ReactionListTop,
     removeMessage: removeMessage,
     Reply: Reply,
     retrySendMessage: retrySendMessage,