stream-chat-react-native-core 6.0.2 → 6.1.0-beta.2

package/lib/commonjs/components/Channel/Channel.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.reactionData = exports.Channel = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -15,7 +15,6 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 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");
@@ -117,6 +116,7 @@ var _ScrollToBottomButton = require("../MessageList/ScrollToBottomButton");
 var _StickyHeader = require("../MessageList/StickyHeader");
 var _TypingIndicator = require("../MessageList/TypingIndicator");
 var _TypingIndicatorContainer = require("../MessageList/TypingIndicatorContainer");
+var _UnreadMessagesNotification = require("../MessageList/UnreadMessagesNotification");
 var _MessageActionList = require("../MessageMenu/MessageActionList");
 var _MessageActionListItem = require("../MessageMenu/MessageActionListItem");
 var _MessageMenu = require("../MessageMenu/MessageMenu");
@@ -126,8 +126,10 @@ var _MessageUserReactionsAvatar = require("../MessageMenu/MessageUserReactionsAv
 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"],
-  _excluded2 = ["channel_mutes", "devices", "mutes"];
+var _excluded = ["user"],
+  _excluded2 = ["user"],
+  _excluded3 = ["attachments", "mentioned_users", "parent_id", "poll", "poll_id", "text"],
+  _excluded4 = ["channel_mutes", "devices", "mutes"];
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Channel/Channel.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -167,7 +169,7 @@ var debounceOptions = {
   trailing: true
 };
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _channel$getConfig, _channel$data, _ref17, _channelState$members, _channelState$read, _ref18, _channelMessagesState3, _channelState$typing, _channelMessagesState4;
+  var _channel$getConfig, _channel$data, _ref19, _channelState$members, _channelState$read, _ref20, _channelMessagesState3, _channelState$typing, _channelMessagesState4;
   var additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
     additionalPressableProps = props.additionalPressableProps,
     additionalTextInputProps = props.additionalTextInputProps,
@@ -273,6 +275,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     handleDelete = props.handleDelete,
     handleEdit = props.handleEdit,
     handleFlag = props.handleFlag,
+    handleMarkUnread = props.handleMarkUnread,
     handleMute = props.handleMute,
     handlePinMessage = props.handlePinMessage,
     handleQuotedReply = props.handleQuotedReply,
@@ -332,6 +335,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     loadingMoreProp = props.loadingMore,
     loadingMoreRecentProp = props.loadingMoreRecent,
     markdownRules = props.markdownRules,
+    _props$markReadOnMoun = props.markReadOnMount,
+    markReadOnMount = _props$markReadOnMoun === void 0 ? true : _props$markReadOnMoun,
     maxMessageLengthProp = props.maxMessageLength,
     _props$maxNumberOfFil = props.maxNumberOfFiles,
     maxNumberOfFiles = _props$maxNumberOfFil === void 0 ? 10 : _props$maxNumberOfFil,
@@ -451,6 +456,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     TypingIndicator = _props$TypingIndicato === void 0 ? _TypingIndicator.TypingIndicator : _props$TypingIndicato,
     _props$TypingIndicato2 = props.TypingIndicatorContainer,
     TypingIndicatorContainer = _props$TypingIndicato2 === void 0 ? _TypingIndicatorContainer.TypingIndicatorContainer : _props$TypingIndicato2,
+    _props$UnreadMessages = props.UnreadMessagesNotification,
+    UnreadMessagesNotification = _props$UnreadMessages === void 0 ? _UnreadMessagesNotification.UnreadMessagesNotification : _props$UnreadMessages,
     _props$UploadProgress = props.UploadProgressIndicator,
     UploadProgressIndicator = _props$UploadProgress === void 0 ? _UploadProgressIndicator.UploadProgressIndicator : _props$UploadProgress,
     _props$UrlPreview = props.UrlPreview,
@@ -496,8 +503,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
     threadLoadingMore = _useState16[0],
     setThreadLoadingMore = _useState16[1];
+  var _useState17 = (0, _react.useState)(undefined),
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    channelUnreadState = _useState18[0],
+    setChannelUnreadState = _useState18[1];
   var syncingChannelRef = (0, _react.useRef)(false);
   var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(),
+    highlightedMessageId = _useTargetedMessage.highlightedMessageId,
     setTargetedMessage = _useTargetedMessage.setTargetedMessage,
     targetedMessage = _useTargetedMessage.targetedMessage;
   var uploadAbortControllerRef = (0, _react.useRef)(new Map());
@@ -506,6 +518,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
   var _useChannelDataState = (0, _useChannelDataState2.useChannelDataState)(channel),
     copyStateFromChannel = _useChannelDataState.copyStateFromChannel,
     initStateFromChannel = _useChannelDataState.initStateFromChannel,
+    setRead = _useChannelDataState.setRead,
     setTyping = _useChannelDataState.setTyping,
     channelState = _useChannelDataState.state;
   var _useMessageListPagina = (0, _useMessageListPagination.useMessageListPagination)({
@@ -544,6 +557,21 @@ var ChannelWithContext = function ChannelWithContext(props) {
           }
         }
       }
+      if (event.type === 'notification.mark_unread') {
+        setChannelUnreadState(function (prev) {
+          var _event$unread_message;
+          if (!(event.last_read_at && event.user)) return prev;
+          return {
+            first_unread_message_id: event.first_unread_message_id,
+            last_read: new Date(event.last_read_at),
+            last_read_message_id: event.last_read_message_id,
+            unread_messages: (_event$unread_message = event.unread_messages) != null ? _event$unread_message : 0
+          };
+        });
+      }
+      if (event.type === 'channel.truncated' && event.cid === channel.cid) {
+        setChannelUnreadState(undefined);
+      }
       if (channel && channel.initialized) {
         copyChannelState();
       }
@@ -553,66 +581,85 @@ var ChannelWithContext = function ChannelWithContext(props) {
     var listener;
     var initChannel = function () {
       var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
-        var errored;
+        var _client$user;
+        var unreadCount, errored, _channel$state$read$c, user, ownReadState, _channel$state$read$c2, _user, _ownReadState;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              setLastRead(new Date());
+              unreadCount = channel.countUnread();
               if (!(!channel || !shouldSyncChannel || channel.offlineMode)) {
-                _context.next = 2;
+                _context.next = 4;
                 break;
               }
               return _context.abrupt("return");
-            case 2:
+            case 4:
               errored = false;
               if (!(!channel.initialized || !channel.state.isUpToDate)) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
-              _context.prev = 4;
-              _context.next = 7;
+              _context.prev = 6;
+              _context.next = 9;
               return channel == null ? void 0 : channel.watch();
-            case 7:
-              _context.next = 14;
-              break;
             case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](4);
+              _context.next = 16;
+              break;
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](6);
               console.warn('Channel watch request failed with error:', _context.t0);
               setError(true);
               errored = true;
-            case 14:
+            case 16:
               if (!errored) {
                 initStateFromChannel(channel);
                 loadInitialMessagesStateFromChannel(channel, channel.state.messagePagination.hasPrev);
               }
+              if ((_client$user = client.user) != null && _client$user.id && channel.state.read[client.user.id]) {
+                _channel$state$read$c = channel.state.read[client.user.id], user = _channel$state$read$c.user, ownReadState = (0, _objectWithoutProperties2["default"])(_channel$state$read$c, _excluded);
+                setChannelUnreadState(ownReadState);
+              }
               if (!messageId) {
-                _context.next = 20;
+                _context.next = 23;
                 break;
               }
-              _context.next = 18;
+              _context.next = 21;
               return loadChannelAroundMessage({
                 messageId: messageId,
                 setTargetedMessage: setTargetedMessage
               });
-            case 18:
-              _context.next = 23;
+            case 21:
+              _context.next = 27;
               break;
-            case 20:
-              if (!(initialScrollToFirstUnreadMessage && channel.countUnread() > scrollToFirstUnreadThreshold)) {
-                _context.next = 23;
+            case 23:
+              if (!(initialScrollToFirstUnreadMessage && client.user && unreadCount > scrollToFirstUnreadThreshold)) {
+                _context.next = 27;
                 break;
               }
-              _context.next = 23;
+              _channel$state$read$c2 = channel.state.read[client.user.id], _user = _channel$state$read$c2.user, _ownReadState = (0, _objectWithoutProperties2["default"])(_channel$state$read$c2, _excluded2);
+              _context.next = 27;
               return loadChannelAtFirstUnreadMessage({
+                channelUnreadState: _ownReadState,
+                setChannelUnreadState: setChannelUnreadState,
                 setTargetedMessage: setTargetedMessage
               });
-            case 23:
+            case 27:
+              if (!(unreadCount > 0 && markReadOnMount)) {
+                _context.next = 30;
+                break;
+              }
+              _context.next = 30;
+              return markRead({
+                updateChannelUnreadState: false
+              });
+            case 30:
               listener = channel.on(handleEvent);
-            case 24:
+            case 31:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[4, 9]]);
+        }, _callee, null, [[6, 11]]);
       }));
       return function initChannel() {
         return _ref.apply(this, arguments);
@@ -637,12 +684,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
   }, [channel == null ? void 0 : channel.cid, client]);
   (0, _react.useEffect)(function () {
     var handleEvent = function handleEvent(event) {
-      if (channel.cid === event.cid) copyChannelState();
+      if (channel.cid === event.cid) setRead(channel);
     };
     var _client$on2 = client.on('notification.mark_read', handleEvent),
       unsubscribe = _client$on2.unsubscribe;
     return unsubscribe;
-  }, [channel.cid, client, copyChannelState]);
+  }, [channel, client, setRead]);
   var threadPropsExists = !!threadProps;
   (0, _react.useEffect)(function () {
     if (threadProps && shouldSyncChannel) {
@@ -666,86 +713,125 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   }, [thread == null ? void 0 : thread.id, channelId]);
   (0, _useAppStateListener.useAppStateListener)(undefined, handleAppBackground);
-  var markRead = (0, _react.useRef)((0, _throttle["default"])(function () {
-    if (!channel || channel != null && channel.disconnected || !(clientChannelConfig != null && clientChannelConfig.read_events)) {
-      return;
-    }
-    if (doMarkReadRequest) {
-      doMarkReadRequest(channel);
-    } else {
-      (0, _streamChat.logChatPromiseExecution)(channel.markRead(), 'mark read');
-    }
-  }, defaultThrottleInterval, throttleOptions)).current;
-  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;
+  var markRead = (0, _throttle["default"])(function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(options) {
+      var _ref3, _ref3$updateChannelUn, updateChannelUnreadState, response;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            if (!(!channel || !(thread != null && thread.id))) {
-              _context2.next = 2;
+            _ref3 = options != null ? options : {}, _ref3$updateChannelUn = _ref3.updateChannelUnreadState, updateChannelUnreadState = _ref3$updateChannelUn === void 0 ? true : _ref3$updateChannelUn;
+            if (!(!channel || channel != null && channel.disconnected || !(clientChannelConfig != null && clientChannelConfig.read_events))) {
+              _context2.next = 3;
               break;
             }
             return _context2.abrupt("return");
+          case 3:
+            if (!doMarkReadRequest) {
+              _context2.next = 7;
+              break;
+            }
+            doMarkReadRequest(channel, updateChannelUnreadState ? setChannelUnreadState : undefined);
+            _context2.next = 17;
+            break;
+          case 7:
+            _context2.prev = 7;
+            _context2.next = 10;
+            return channel.markRead();
+          case 10:
+            response = _context2.sent;
+            if (updateChannelUnreadState && response && lastRead) {
+              setChannelUnreadState({
+                last_read: lastRead,
+                last_read_message_id: response == null ? void 0 : response.event.last_read_message_id,
+                unread_messages: 0
+              });
+            }
+            _context2.next = 17;
+            break;
+          case 14:
+            _context2.prev = 14;
+            _context2.t0 = _context2["catch"](7);
+            console.log('Error marking channel as read:', _context2.t0);
+          case 17:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[7, 14]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), defaultThrottleInterval, throttleOptions);
+  var reloadThread = function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+      var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, messages, _messages, threadMessage, formattedMessage;
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(!channel || !(thread != null && thread.id))) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context2.prev = 3;
+            _context3.prev = 3;
             parentID = thread.id;
             limit = 50;
             channel.state.threads[parentID] = [];
-            _context2.next = 9;
+            _context3.next = 9;
             return channel.getReplies(parentID, {
               limit: limit
             });
           case 9:
-            queryResponse = _context2.sent;
+            queryResponse = _context3.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-            _context2.next = 15;
+            _context3.next = 15;
             return channel.getMessagesById([parentID]);
           case 15:
-            _yield$channel$getMes = _context2.sent;
+            _yield$channel$getMes = _context3.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);
             }
-            _context2.next = 27;
+            _context3.next = 27;
             break;
           case 21:
-            _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);
+            _context3.prev = 21;
+            _context3.t0 = _context3["catch"](3);
+            console.warn('Thread loading request failed with error', _context3.t0);
+            if (_context3.t0 instanceof Error) {
+              setError(_context3.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context2.t0;
+            throw _context3.t0;
           case 27:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2, null, [[3, 21]]);
+      }, _callee3, null, [[3, 21]]);
     }));
     return function reloadThread() {
-      return _ref2.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var resyncChannel = function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
       var parseMessage, _channelMessagesState, failedMessages, failedThreadMessages;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (!(!channel || syncingChannelRef.current)) {
-              _context3.next = 2;
+              _context4.next = 2;
               break;
             }
-            return _context3.abrupt("return");
+            return _context4.abrupt("return");
           case 2:
             syncingChannelRef.current = true;
             setError(false);
@@ -757,9 +843,9 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 updated_at: (_message$updated_at = message.updated_at) == null ? void 0 : _message$updated_at.toString()
               });
             };
-            _context3.prev = 5;
+            _context4.prev = 5;
             if (thread) {
-              _context3.next = 12;
+              _context4.next = 12;
               break;
             }
             copyChannelState();
@@ -769,10 +855,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (failedMessages != null && failedMessages.length) {
               channel.state.addMessagesSorted(failedMessages);
             }
-            _context3.next = 16;
+            _context4.next = 16;
             break;
           case 12:
-            _context3.next = 14;
+            _context4.next = 14;
             return reloadThread();
           case 14:
             failedThreadMessages = thread ? threadMessages.filter(function (message) {
@@ -783,13 +869,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
               setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
             }
           case 16:
-            _context3.next = 21;
+            _context4.next = 21;
             break;
           case 18:
-            _context3.prev = 18;
-            _context3.t0 = _context3["catch"](5);
-            if (_context3.t0 instanceof Error) {
-              setError(_context3.t0);
+            _context4.prev = 18;
+            _context4.t0 = _context4["catch"](5);
+            if (_context4.t0 instanceof Error) {
+              setError(_context4.t0);
             } else {
               setError(true);
             }
@@ -797,12 +883,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
             syncingChannelRef.current = false;
           case 22:
           case "end":
-            return _context3.stop();
+            return _context4.stop();
         }
-      }, _callee3, null, [[5, 18]]);
+      }, _callee4, null, [[5, 18]]);
     }));
     return function resyncChannel() {
-      return _ref3.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var resyncChannelRef = (0, _react.useRef)(resyncChannel);
@@ -840,51 +926,51 @@ var ChannelWithContext = function ChannelWithContext(props) {
   };
   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) {
+    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            _context4.prev = 0;
-            _context4.next = 3;
+            _context5.prev = 0;
+            _context5.next = 3;
             return loadLatestMessages();
           case 3:
-            _context4.next = 8;
+            _context5.next = 8;
             break;
           case 5:
-            _context4.prev = 5;
-            _context4.t0 = _context4["catch"](0);
-            console.warn('Reloading channel failed with error:', _context4.t0);
+            _context5.prev = 5;
+            _context5.t0 = _context5["catch"](0);
+            console.warn('Reloading channel failed with error:', _context5.t0);
           case 8:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
-      }, _callee4, null, [[0, 5]]);
+      }, _callee5, null, [[0, 5]]);
     }));
     return function reloadChannel() {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var loadChannelAroundMessage = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5(_ref5) {
+    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6(_ref7) {
       var messageIdToLoadAround;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
-            messageIdToLoadAround = _ref5.messageId;
+            messageIdToLoadAround = _ref7.messageId;
             if (messageIdToLoadAround) {
-              _context5.next = 3;
+              _context6.next = 3;
               break;
             }
-            return _context5.abrupt("return");
+            return _context6.abrupt("return");
           case 3:
-            _context5.prev = 3;
+            _context6.prev = 3;
             if (!thread) {
-              _context5.next = 20;
+              _context6.next = 20;
               break;
             }
             setThreadLoadingMore(true);
-            _context5.prev = 6;
-            _context5.next = 9;
+            _context6.prev = 6;
+            _context6.next = 9;
             return channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
           case 9:
             setThreadLoadingMore(false);
@@ -892,41 +978,41 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (setTargetedMessage) {
               setTargetedMessage(messageIdToLoadAround);
             }
-            _context5.next = 18;
+            _context6.next = 18;
             break;
           case 14:
-            _context5.prev = 14;
-            _context5.t0 = _context5["catch"](6);
-            if (_context5.t0 instanceof Error) {
-              setError(_context5.t0);
+            _context6.prev = 14;
+            _context6.t0 = _context6["catch"](6);
+            if (_context6.t0 instanceof Error) {
+              setError(_context6.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
           case 18:
-            _context5.next = 22;
+            _context6.next = 22;
             break;
           case 20:
-            _context5.next = 22;
+            _context6.next = 22;
             return loadChannelAroundMessageFn({
               messageId: messageIdToLoadAround,
               setTargetedMessage: setTargetedMessage
             });
           case 22:
-            _context5.next = 27;
+            _context6.next = 27;
             break;
           case 24:
-            _context5.prev = 24;
-            _context5.t1 = _context5["catch"](3);
-            console.warn('Loading channel around message failed with error:', _context5.t1);
+            _context6.prev = 24;
+            _context6.t1 = _context6["catch"](3);
+            console.warn('Loading channel around message failed with error:', _context6.t1);
           case 27:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5, null, [[3, 24], [6, 14]]);
+      }, _callee6, null, [[3, 24], [6, 14]]);
     }));
-    return function loadChannelAroundMessage(_x) {
-      return _ref6.apply(this, arguments);
+    return function loadChannelAroundMessage(_x2) {
+      return _ref8.apply(this, arguments);
     };
   }();
   var updateMessage = function updateMessage(updatedMessage) {
@@ -950,19 +1036,19 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }
     }
   };
-  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 createMessagePreview = function createMessagePreview(_ref9) {
+    var attachments = _ref9.attachments,
+      mentioned_users = _ref9.mentioned_users,
+      parent_id = _ref9.parent_id,
+      poll = _ref9.poll,
+      poll_id = _ref9.poll_id,
+      text = _ref9.text,
+      extraFields = (0, _objectWithoutProperties2["default"])(_ref9, _excluded3);
+    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, _excluded4);
     var preview = Object.assign({
       __html: text,
       attachments: attachments,
@@ -995,28 +1081,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return preview;
   };
   var uploadPendingAttachments = function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6(message) {
+    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7(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 _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             updatedMessage = Object.assign({}, message);
             if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length)) {
-              _context6.next = 50;
+              _context7.next = 50;
               break;
             }
             i = 0;
           case 3:
             if (!(i < ((_updatedMessage$attac2 = updatedMessage.attachments) == null ? void 0 : _updatedMessage$attac2.length))) {
-              _context6.next = 50;
+              _context7.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))) {
-              _context6.next = 29;
+              _context7.next = 29;
               break;
             }
             filename = (_image$name = image.name) != null ? _image$name : (0, _utils.getFileNameFromPath)(image.uri);
@@ -1025,31 +1111,31 @@ var ChannelWithContext = function ChannelWithContext(props) {
               controller.abort();
               uploadAbortControllerRef.current["delete"](filename);
             }
-            _context6.next = 13;
+            _context7.next = 13;
             return (0, _compressImage.compressedImageURI)(image, compressImageQuality);
           case 13:
-            compressedUri = _context6.sent;
+            compressedUri = _context7.sent;
             contentType = (0, _mimeTypes.lookup)(filename) || 'multipart/form-data';
             if (!doImageUploadRequest) {
-              _context6.next = 21;
+              _context7.next = 21;
               break;
             }
-            _context6.next = 18;
+            _context7.next = 18;
             return doImageUploadRequest(image, channel);
           case 18:
-            _context6.t0 = _context6.sent;
-            _context6.next = 24;
+            _context7.t0 = _context7.sent;
+            _context7.next = 24;
             break;
           case 21:
-            _context6.next = 23;
+            _context7.next = 23;
             return channel.sendImage(compressedUri, filename, contentType);
           case 23:
-            _context6.t0 = _context6.sent;
+            _context7.t0 = _context7.sent;
           case 24:
-            uploadResponse = _context6.t0;
+            uploadResponse = _context7.t0;
             attachment.image_url = uploadResponse.file;
             delete attachment.originalFile;
-            _context6.next = 29;
+            _context7.next = 29;
             return dbApi.updateMessage({
               message: Object.assign({}, updatedMessage, {
                 cid: channel.cid
@@ -1057,7 +1143,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           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)) {
-              _context6.next = 47;
+              _context7.next = 47;
               break;
             }
             _controller = uploadAbortControllerRef.current.get(file.name);
@@ -1066,28 +1152,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
               uploadAbortControllerRef.current["delete"](file.name);
             }
             if (!doDocUploadRequest) {
-              _context6.next = 38;
+              _context7.next = 38;
               break;
             }
-            _context6.next = 35;
+            _context7.next = 35;
             return doDocUploadRequest(file, channel);
           case 35:
-            _context6.t1 = _context6.sent;
-            _context6.next = 41;
+            _context7.t1 = _context7.sent;
+            _context7.next = 41;
             break;
           case 38:
-            _context6.next = 40;
+            _context7.next = 40;
             return channel.sendFile(file.uri, file.name, file.mimeType);
           case 40:
-            _context6.t1 = _context6.sent;
+            _context7.t1 = _context7.sent;
           case 41:
-            response = _context6.t1;
+            response = _context7.t1;
             attachment.asset_url = response.file;
             if (response.thumb_url) {
               attachment.thumb_url = response.thumb_url;
             }
             delete attachment.originalFile;
-            _context6.next = 47;
+            _context7.next = 47;
             return dbApi.updateMessage({
               message: Object.assign({}, updatedMessage, {
                 cid: channel.cid
@@ -1095,38 +1181,38 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 47:
             i++;
-            _context6.next = 3;
+            _context7.next = 3;
             break;
           case 50:
-            return _context6.abrupt("return", updatedMessage);
+            return _context7.abrupt("return", updatedMessage);
           case 51:
           case "end":
-            return _context6.stop();
+            return _context7.stop();
         }
-      }, _callee6);
+      }, _callee7);
     }));
-    return function uploadPendingAttachments(_x2) {
-      return _ref8.apply(this, arguments);
+    return function uploadPendingAttachments(_x3) {
+      return _ref10.apply(this, arguments);
     };
   }();
   var sendMessageRequest = function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7(message, retrying) {
+    var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8(message, retrying) {
       var _updatedMessage, extraFields, attachments, id, mentioned_users, parent_id, text, mentionedUserIds, _messageData, messageResponse, _updatedMessage2;
-      return _regenerator["default"].wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
+      return _regenerator["default"].wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
-            _context7.prev = 0;
-            _context7.next = 3;
+            _context8.prev = 0;
+            _context8.next = 3;
             return uploadPendingAttachments(message);
           case 3:
-            _updatedMessage = _context7.sent;
+            _updatedMessage = _context8.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) {
-              _context7.next = 8;
+              _context8.next = 8;
               break;
             }
-            return _context7.abrupt("return");
+            return _context8.abrupt("return");
           case 8:
             mentionedUserIds = (mentioned_users == null ? void 0 : mentioned_users.map(function (user) {
               return user.id;
@@ -1140,35 +1226,35 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }, extraFields);
             messageResponse = {};
             if (!doSendMessageRequest) {
-              _context7.next = 17;
+              _context8.next = 17;
               break;
             }
-            _context7.next = 14;
+            _context8.next = 14;
             return doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', _messageData);
           case 14:
-            messageResponse = _context7.sent;
-            _context7.next = 21;
+            messageResponse = _context8.sent;
+            _context8.next = 21;
             break;
           case 17:
             if (!channel) {
-              _context7.next = 21;
+              _context8.next = 21;
               break;
             }
-            _context7.next = 20;
+            _context8.next = 20;
             return channel.sendMessage(_messageData);
           case 20:
-            messageResponse = _context7.sent;
+            messageResponse = _context8.sent;
           case 21:
             if (!messageResponse.message) {
-              _context7.next = 28;
+              _context8.next = 28;
               break;
             }
             messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
             if (!enableOfflineSupport) {
-              _context7.next = 26;
+              _context8.next = 26;
               break;
             }
-            _context7.next = 26;
+            _context8.next = 26;
             return dbApi.updateMessage({
               message: Object.assign({}, messageResponse.message, {
                 cid: channel.cid
@@ -1184,12 +1270,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
               message: messageResponse.message
             });
           case 28:
-            _context7.next = 40;
+            _context8.next = 40;
             break;
           case 30:
-            _context7.prev = 30;
-            _context7.t0 = _context7["catch"](0);
-            console.log(_context7.t0);
+            _context8.prev = 30;
+            _context8.t0 = _context8["catch"](0);
+            console.log(_context8.t0);
             message.status = _utils.MessageStatusTypes.FAILED;
             _updatedMessage2 = Object.assign({}, message, {
               cid: channel.cid
@@ -1199,10 +1285,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
               message: _updatedMessage2
             });
             if (!enableOfflineSupport) {
-              _context7.next = 40;
+              _context8.next = 40;
               break;
             }
-            _context7.next = 40;
+            _context8.next = 40;
             return dbApi.updateMessage({
               message: Object.assign({}, message, {
                 cid: channel.cid
@@ -1210,20 +1296,20 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 40:
           case "end":
-            return _context7.stop();
+            return _context8.stop();
         }
-      }, _callee7, null, [[0, 30]]);
+      }, _callee8, null, [[0, 30]]);
     }));
-    return function sendMessageRequest(_x3, _x4) {
-      return _ref9.apply(this, arguments);
+    return function sendMessageRequest(_x4, _x5) {
+      return _ref11.apply(this, arguments);
     };
   }();
   var sendMessage = function () {
-    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8(message) {
+    var _ref12 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(message) {
       var _channel$state;
       var messagePreview;
-      return _regenerator["default"].wrap(function _callee8$(_context8) {
-        while (1) switch (_context8.prev = _context8.next) {
+      return _regenerator["default"].wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             if (channel != null && (_channel$state = channel.state) != null && _channel$state.filterErrorMessages) {
               channel.state.filterErrorMessages();
@@ -1239,10 +1325,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
               message: messagePreview
             });
             if (!enableOfflineSupport) {
-              _context8.next = 7;
+              _context9.next = 7;
               break;
             }
-            _context8.next = 7;
+            _context9.next = 7;
             return dbApi.upsertMessages({
               messages: [Object.assign({}, messagePreview, {
                 cid: channel.cid,
@@ -1250,23 +1336,23 @@ var ChannelWithContext = function ChannelWithContext(props) {
               })]
             });
           case 7:
-            _context8.next = 9;
+            _context9.next = 9;
             return sendMessageRequest(messagePreview);
           case 9:
           case "end":
-            return _context8.stop();
+            return _context9.stop();
         }
-      }, _callee8);
+      }, _callee9);
     }));
-    return function sendMessage(_x5) {
-      return _ref10.apply(this, arguments);
+    return function sendMessage(_x6) {
+      return _ref12.apply(this, arguments);
     };
   }();
   var retrySendMessage = function () {
-    var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(message) {
+    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(message) {
       var statusPendingMessage, messageWithoutReservedFields;
-      return _regenerator["default"].wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+      return _regenerator["default"].wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
           case 0:
             statusPendingMessage = Object.assign({}, message, {
               status: _utils.MessageStatusTypes.SENDING
@@ -1275,16 +1361,16 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (!(0, _utils.isBouncedMessage)(message)) {
               updateMessage(messageWithoutReservedFields);
             }
-            _context9.next = 5;
+            _context10.next = 5;
             return sendMessageRequest(messageWithoutReservedFields, true);
           case 5:
           case "end":
-            return _context9.stop();
+            return _context10.stop();
         }
-      }, _callee9);
+      }, _callee10);
     }));
-    return function retrySendMessage(_x6) {
-      return _ref11.apply(this, arguments);
+    return function retrySendMessage(_x7) {
+      return _ref13.apply(this, arguments);
     };
   }();
   var editMessage = function editMessage(updatedMessage) {
@@ -1304,9 +1390,9 @@ var ChannelWithContext = function ChannelWithContext(props) {
     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) {
+    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(message) {
+      return _regenerator["default"].wrap(function _callee11$(_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
           case 0:
             if (channel) {
               channel.state.removeMessage(message);
@@ -1316,31 +1402,31 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             }
             if (!enableOfflineSupport) {
-              _context10.next = 4;
+              _context11.next = 4;
               break;
             }
-            _context10.next = 4;
+            _context11.next = 4;
             return dbApi.deleteMessage({
               id: message.id
             });
           case 4:
           case "end":
-            return _context10.stop();
+            return _context11.stop();
         }
-      }, _callee10);
+      }, _callee11);
     }));
-    return function removeMessage(_x7) {
-      return _ref12.apply(this, arguments);
+    return function removeMessage(_x8) {
+      return _ref14.apply(this, arguments);
     };
   }();
   var sendReaction = function () {
-    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(type, messageId) {
+    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(type, messageId) {
       var payload, sendReactionResponse;
-      return _regenerator["default"].wrap(function _callee11$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
+      return _regenerator["default"].wrap(function _callee12$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context11.next = 2;
+              _context12.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
@@ -1351,13 +1437,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
               enforce_unique: enforceUniqueReaction
             }];
             if (enableOfflineSupport) {
-              _context11.next = 7;
+              _context12.next = 7;
               break;
             }
-            _context11.next = 6;
+            _context12.next = 6;
             return channel.sendReaction.apply(channel, payload);
           case 6:
-            return _context11.abrupt("return");
+            return _context12.abrupt("return");
           case 7:
             (0, _addReactionToLocalState.addReactionToLocalState)({
               channel: channel,
@@ -1367,7 +1453,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               user: client.user
             });
             copyMessagesStateFromChannel(channel);
-            _context11.next = 11;
+            _context12.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -1379,7 +1465,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             });
           case 11:
-            sendReactionResponse = _context11.sent;
+            sendReactionResponse = _context12.sent;
             if (sendReactionResponse != null && sendReactionResponse.message) {
               threadInstance == null ? void 0 : threadInstance.upsertReplyLocally == null ? void 0 : threadInstance.upsertReplyLocally({
                 message: sendReactionResponse.message
@@ -1387,57 +1473,57 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           case 13:
           case "end":
-            return _context11.stop();
+            return _context12.stop();
         }
-      }, _callee11);
+      }, _callee12);
     }));
-    return function sendReaction(_x8, _x9) {
-      return _ref13.apply(this, arguments);
+    return function sendReaction(_x9, _x10) {
+      return _ref15.apply(this, arguments);
     };
   }();
   var deleteMessage = function () {
-    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message) {
+    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message) {
       var _updatedMessage3, _data;
-      return _regenerator["default"].wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
+      return _regenerator["default"].wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
             if (channel.id) {
-              _context12.next = 2;
+              _context13.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized yet');
           case 2:
             if (enableOfflineSupport) {
-              _context12.next = 10;
+              _context13.next = 10;
               break;
             }
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context12.next = 7;
+              _context13.next = 7;
               break;
             }
-            _context12.next = 6;
+            _context13.next = 6;
             return removeMessage(message);
           case 6:
-            return _context12.abrupt("return");
+            return _context13.abrupt("return");
           case 7:
-            _context12.next = 9;
+            _context13.next = 9;
             return client.deleteMessage(message.id);
           case 9:
-            return _context12.abrupt("return");
+            return _context13.abrupt("return");
           case 10:
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context12.next = 17;
+              _context13.next = 17;
               break;
             }
-            _context12.next = 13;
+            _context13.next = 13;
             return _DBSyncManager.DBSyncManager.dropPendingTasks({
               messageId: message.id
             });
           case 13:
-            _context12.next = 15;
+            _context13.next = 15;
             return removeMessage(message);
           case 15:
-            _context12.next = 24;
+            _context13.next = 24;
             break;
           case 17:
             _updatedMessage3 = Object.assign({}, message, {
@@ -1449,7 +1535,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null ? void 0 : threadInstance.upsertReplyLocally({
               message: _updatedMessage3
             });
-            _context12.next = 22;
+            _context13.next = 22;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -1461,41 +1547,41 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             });
           case 22:
-            _data = _context12.sent;
+            _data = _context13.sent;
             if (_data != null && _data.message) {
               updateMessage(Object.assign({}, _data.message));
             }
           case 24:
           case "end":
-            return _context12.stop();
+            return _context13.stop();
         }
-      }, _callee12);
+      }, _callee13);
     }));
-    return function deleteMessage(_x10) {
-      return _ref14.apply(this, arguments);
+    return function deleteMessage(_x11) {
+      return _ref16.apply(this, arguments);
     };
   }();
   var deleteReaction = function () {
-    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(type, messageId) {
+    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(type, messageId) {
       var payload;
-      return _regenerator["default"].wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
+      return _regenerator["default"].wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context13.next = 2;
+              _context14.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
           case 2:
             payload = [messageId, type];
             if (enableOfflineSupport) {
-              _context13.next = 7;
+              _context14.next = 7;
               break;
             }
-            _context13.next = 6;
+            _context14.next = 6;
             return channel.deleteReaction.apply(channel, payload);
           case 6:
-            return _context13.abrupt("return");
+            return _context14.abrupt("return");
           case 7:
             (0, _removeReactionFromLocalState.removeReactionFromLocalState)({
               channel: channel,
@@ -1504,7 +1590,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               user: client.user
             });
             copyMessagesStateFromChannel(channel);
-            _context13.next = 11;
+            _context14.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -1517,12 +1603,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 11:
           case "end":
-            return _context13.stop();
+            return _context14.stop();
         }
-      }, _callee13);
+      }, _callee14);
     }));
-    return function deleteReaction(_x11, _x12) {
-      return _ref15.apply(this, arguments);
+    return function deleteReaction(_x12, _x13) {
+      return _ref17.apply(this, arguments);
     };
   }();
   var openThread = (0, _react.useCallback)(function (message) {
@@ -1543,59 +1629,59 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setThreadMessages(updatedThreadMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
   var loadMoreThread = function () {
-    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14() {
+    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
       var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
-      return _regenerator["default"].wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
+      return _regenerator["default"].wrap(function _callee15$(_context15) {
+        while (1) switch (_context15.prev = _context15.next) {
           case 0:
             if (!(threadLoadingMore || !(thread != null && thread.id))) {
-              _context14.next = 2;
+              _context15.next = 2;
               break;
             }
-            return _context14.abrupt("return");
+            return _context15.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context14.prev = 3;
+            _context15.prev = 3;
             if (!channel) {
-              _context14.next = 15;
+              _context15.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;
-            _context14.next = 11;
+            _context15.next = 11;
             return channel.getReplies(parentID, {
               id_lt: oldestMessageID,
               limit: limit
             });
           case 11:
-            queryResponse = _context14.sent;
+            queryResponse = _context15.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
           case 15:
-            _context14.next = 23;
+            _context15.next = 23;
             break;
           case 17:
-            _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);
+            _context15.prev = 17;
+            _context15.t0 = _context15["catch"](3);
+            console.warn('Message pagination request failed with error', _context15.t0);
+            if (_context15.t0 instanceof Error) {
+              setError(_context15.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context14.t0;
+            throw _context15.t0;
           case 23:
           case "end":
-            return _context14.stop();
+            return _context15.stop();
         }
-      }, _callee14, null, [[3, 17]]);
+      }, _callee15, null, [[3, 17]]);
     }));
     return function loadMoreThread() {
-      return _ref16.apply(this, arguments);
+      return _ref18.apply(this, arguments);
     };
   }();
   var ownCapabilitiesContext = (0, _useCreateOwnCapabilitiesContext.useCreateOwnCapabilitiesContext)({
@@ -1604,19 +1690,22 @@ var ChannelWithContext = function ChannelWithContext(props) {
   });
   var channelContext = (0, _useCreateChannelContext.useCreateChannelContext)({
     channel: channel,
+    channelUnreadState: channelUnreadState,
     disabled: !!(channel != null && (_channel$data = channel.data) != null && _channel$data.frozen),
     EmptyStateIndicator: EmptyStateIndicator,
     enableMessageGroupingByUser: enableMessageGroupingByUser,
     enforceUniqueReaction: enforceUniqueReaction,
     error: error,
-    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref17 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref17.some(function (command) {
+    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref19 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref19.some(function (command) {
       return command.name === 'giphy';
     })),
     hideDateSeparators: hideDateSeparators,
     hideStickyDateHeader: hideStickyDateHeader,
+    highlightedMessageId: highlightedMessageId,
     isChannelActive: shouldSyncChannel,
     lastRead: lastRead,
     loadChannelAroundMessage: loadChannelAroundMessage,
+    loadChannelAtFirstUnreadMessage: loadChannelAtFirstUnreadMessage,
     loading: channelMessagesState.loading,
     LoadingIndicator: LoadingIndicator,
     markRead: markRead,
@@ -1626,6 +1715,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     read: (_channelState$read = channelState.read) != null ? _channelState$read : {},
     reloadChannel: reloadChannel,
     scrollToFirstUnreadThreshold: scrollToFirstUnreadThreshold,
+    setChannelUnreadState: setChannelUnreadState,
     setLastRead: setLastRead,
     setTargetedMessage: setTargetedMessage,
     StickyHeader: StickyHeader,
@@ -1678,7 +1768,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     InputEditingStateHeader: InputEditingStateHeader,
     InputGiphySearch: InputGiphySearch,
     InputReplyStateHeader: InputReplyStateHeader,
-    maxMessageLength: (_ref18 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref18 : undefined,
+    maxMessageLength: (_ref20 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref20 : undefined,
     maxNumberOfFiles: maxNumberOfFiles,
     mentionAllAppUsersEnabled: mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery: mentionAllAppUsersQuery,
@@ -1741,6 +1831,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     handleDelete: handleDelete,
     handleEdit: handleEdit,
     handleFlag: handleFlag,
+    handleMarkUnread: handleMarkUnread,
     handleMute: handleMute,
     handlePinMessage: handlePinMessage,
     handleQuotedReply: handleQuotedReply,
@@ -1807,6 +1898,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     targetedMessage: targetedMessage,
     TypingIndicator: TypingIndicator,
     TypingIndicatorContainer: TypingIndicatorContainer,
+    UnreadMessagesNotification: UnreadMessagesNotification,
     updateMessage: updateMessage,
     UrlPreview: UrlPreview,
     VideoThumbnail: VideoThumbnail