sceyt-chat-react-uikit 1.7.1-beta.16 → 1.7.1-beta.18

package/index.js

@@ -10340,6 +10340,7 @@ var initialState$1 = {
   attachmentsUploadingState: {},
   scrollToMessage: null,
   scrollToMessageHighlight: true,
+  scrollToMessageBehavior: 'smooth',
   scrollToMentionedMessage: false,
   reactionsList: [],
   reactionsHasNext: true,
@@ -10366,6 +10367,7 @@ var messageSlice = createSlice({
     setScrollToMessage: function setScrollToMessage(state, action) {
       state.scrollToMessage = action.payload.messageId;
       state.scrollToMessageHighlight = action.payload.highlight;
+      state.scrollToMessageBehavior = action.payload.behavior || 'smooth';
     },
     setScrollToMentionedMessage: function setScrollToMentionedMessage(state, action) {
       state.scrollToMentionedMessage = action.payload.isScrollToMentionedMessage;
@@ -10395,7 +10397,7 @@ var messageSlice = createSlice({
           return msg.tid === message.tid || msg.id === message.id;
         });
       });
-      if (direction === MESSAGE_LOAD_DIRECTION.PREV) {
+      if (direction === MESSAGE_LOAD_DIRECTION.PREV && newMessagesLength > 0) {
         if (currentMessagesLength + newMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM;
           setHasNextCached(true);
@@ -10417,7 +10419,7 @@ var messageSlice = createSlice({
           var _state$activeChannelM3;
           (_state$activeChannelM3 = state.activeChannelMessages).splice.apply(_state$activeChannelM3, [0, 0].concat(messagesIsNotIncludeInActiveChannelMessages));
         }
-      } else if (direction === 'next') {
+      } else if (direction === 'next' && newMessagesLength > 0) {
         if (currentMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM4;
           setHasPrevCached(true);
@@ -11617,7 +11619,7 @@ function setMessageToEditAC(message) {
     message: message
   });
 }
-function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight) {
+function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior) {
   if (highlight === void 0) {
     highlight = true;
   }
@@ -11629,7 +11631,8 @@ function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliv
       messageId: messageId,
       limit: limit,
       withDeliveredMessages: withDeliveredMessages,
-      highlight: highlight
+      highlight: highlight,
+      behavior: behavior
     }
   };
 }
@@ -11643,13 +11646,14 @@ function getMessageAC(channelId, messageId, limit) {
     }
   };
 }
-function setScrollToMessagesAC(messageId, highlight) {
+function setScrollToMessagesAC(messageId, highlight, behavior) {
   if (highlight === void 0) {
     highlight = true;
   }
   return setScrollToMessage({
     messageId: messageId || '',
-    highlight: highlight
+    highlight: highlight,
+    behavior: behavior
   });
 }
 function setScrollToMentionedMessageAC(isScrollToMentionedMessage) {
@@ -17110,6 +17114,9 @@ var scrollToMessageSelector = function scrollToMessageSelector(store) {
 var scrollToMessageHighlightSelector = function scrollToMessageHighlightSelector(store) {
   return store.MessageReducer.scrollToMessageHighlight;
 };
+var scrollToMessageBehaviorSelector = function scrollToMessageBehaviorSelector(store) {
+  return store.MessageReducer.scrollToMessageBehavior;
+};
 var reactionsListSelector = function reactionsListSelector(store) {
   return store.MessageReducer.reactionsList;
 };
@@ -18503,7 +18510,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -18511,9 +18518,9 @@ function getMessagesQuery(action) {
         _context9.n = 1;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
-        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight;
+        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight, behavior = _action$payload.behavior;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 47;
+          _context9.n = 48;
           break;
         }
         SceytChatClient = getClient();
@@ -18541,6 +18548,7 @@ function getMessagesQuery(action) {
           break;
         }
         setHasPrevCached(false);
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         _context9.n = 3;
         return effects.call(messageQuery.loadPreviousMessageId, '0');
@@ -18597,13 +18605,13 @@ function getMessagesQuery(action) {
           break;
         }
         _context9.n = 12;
-        return effects.put(setScrollToMessagesAC(messageId, highlight));
+        return effects.put(setScrollToMessagesAC(messageId, highlight, behavior));
       case 12:
-        _context9.n = 45;
+        _context9.n = 46;
         break;
       case 13:
         if (!messageId) {
-          _context9.n = 25;
+          _context9.n = 26;
           break;
         }
         _allMessages = getAllMessages();
@@ -18612,7 +18620,7 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 15;
+          _context9.n = 16;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
@@ -18621,151 +18629,160 @@ function getMessagesQuery(action) {
       case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
+        _context9.n = 15;
+        return effects.put(setMessagesHasPrevAC(true));
+      case 15:
         _context9.n = 22;
         break;
-      case 15:
+      case 16:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 16;
+        _context9.n = 17;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 16:
+      case 17:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 19;
+          _context9.n = 20;
           break;
         }
-        messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.n = 17;
+        messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
+        _context9.n = 18;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 17:
+      case 18:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 18;
+        _context9.n = 19;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 18:
+      case 19:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 19:
-        log.info('result from server ....... ', result);
         _context9.n = 20;
-        return effects.put(setMessagesHasNextAC(true));
+        return effects.put(setMessagesHasPrevAC(_secondResult.hasNext));
       case 20:
+        log.info('result from server ....... ', result);
         _context9.n = 21;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 21:
+        setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
       case 22:
         _context9.n = 23;
-        return effects.put(setScrollToMessagesAC(messageId));
+        return effects.put(setMessagesHasNextAC(true));
       case 23:
         _context9.n = 24;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
       case 24:
-        _context9.n = 45;
-        break;
+        _context9.n = 25;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 25:
+        _context9.n = 46;
+        break;
+      case 26:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 38;
+          _context9.n = 39;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 31;
+          _context9.n = 32;
           break;
         }
-        _context9.n = 26;
+        _context9.n = 27;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 26:
+      case 27:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 30;
+          _context9.n = 31;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 27;
+        _context9.n = 28;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 27:
+      case 28:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 29;
+          _context9.n = 30;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 28;
+        _context9.n = 29;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 28:
+      case 29:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 30;
+        _context9.n = 31;
         break;
-      case 29:
-        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 30:
-        _context9.n = 34;
-        break;
+        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 31:
-        _context9.n = 32;
-        return effects.call(messageQuery.loadPrevious);
+        _context9.n = 35;
+        break;
       case 32:
+        _context9.n = 33;
+        return effects.call(messageQuery.loadPrevious);
+      case 33:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 34;
+          _context9.n = 35;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 33;
+        _context9.n = 34;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 33:
+      case 34:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 34:
-        setMessagesToMap(channel.id, result.messages);
-        _context9.n = 35;
-        return effects.put(setMessagesHasPrevAC(true));
       case 35:
         _context9.n = 36;
-        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
+        return effects.put(setMessagesHasPrevAC(true));
       case 36:
-        setAllMessages([].concat(result.messages));
         _context9.n = 37;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
+        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
       case 37:
-        _context9.n = 45;
-        break;
+        setMessagesToMap(channel.id, result.messages);
+        setAllMessages([].concat(result.messages));
+        _context9.n = 38;
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 38:
+        _context9.n = 46;
+        break;
+      case 39:
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 39;
+          _context9.n = 40;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 39;
+        _context9.n = 40;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 39:
+      case 40:
         log.info('load message from server');
-        _context9.n = 40;
+        _context9.n = 41;
         return effects.call(messageQuery.loadPrevious);
-      case 40:
+      case 41:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 42;
+          _context9.n = 43;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 41;
+        _context9.n = 42;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 41:
+      case 42:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 42:
+      case 43:
         updatedMessages = [];
         result.messages.forEach(function (msg) {
           var updatedMessage = updateMessageOnMap(channel.id, {
@@ -18777,18 +18794,18 @@ function getMessagesQuery(action) {
         });
         setMessagesToMap(channel.id, updatedMessages);
         setAllMessages([].concat(updatedMessages));
-        _context9.n = 43;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
-      case 43:
         _context9.n = 44;
-        return effects.put(setMessagesHasPrevAC(result.hasNext));
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return effects.put(setMessagesHasNextAC(false));
+        return effects.put(setMessagesHasPrevAC(result.hasNext));
       case 45:
+        _context9.n = 46;
+        return effects.put(setMessagesHasNextAC(false));
+      case 46:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18798,35 +18815,35 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 46;
+        _context9.n = 47;
         return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
-      case 46:
-        _context9.n = 48;
-        break;
       case 47:
+        _context9.n = 49;
+        break;
+      case 48:
         if (!channel.isMockChannel) {
-          _context9.n = 48;
+          _context9.n = 49;
           break;
         }
-        _context9.n = 48;
+        _context9.n = 49;
         return effects.put(setMessagesAC([]));
-      case 48:
-        _context9.n = 50;
-        break;
       case 49:
-        _context9.p = 49;
-        _t9 = _context9.v;
-        log.error('error in message query', _t9);
+        _context9.n = 51;
+        break;
       case 50:
         _context9.p = 50;
-        _context9.n = 51;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        _t9 = _context9.v;
+        log.error('error in message query', _t9);
       case 51:
-        return _context9.f(50);
+        _context9.p = 51;
+        _context9.n = 52;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 52:
+        return _context9.f(51);
+      case 53:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[0, 49, 50, 52]]);
+  }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function getMessageQuery(action) {
   var payload, channelId, messageId, channel, messages, fetchedMessage, _t0;
@@ -18972,25 +18989,38 @@ function loadMoreMessages(action) {
         _context1.n = 11;
         return effects.put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 11:
-        _context1.n = 13;
+        _context1.n = 16;
         break;
       case 12:
         _context1.n = 13;
         return effects.put(addMessagesAC([], direction));
       case 13:
+        if (!(direction === MESSAGE_LOAD_DIRECTION.NEXT)) {
+          _context1.n = 15;
+          break;
+        }
         _context1.n = 14;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setMessagesHasNextAC(false));
       case 14:
         _context1.n = 16;
         break;
       case 15:
-        _context1.p = 15;
+        _context1.n = 16;
+        return effects.put(setMessagesHasPrevAC(false));
+      case 16:
+        _context1.n = 17;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 17:
+        _context1.n = 19;
+        break;
+      case 18:
+        _context1.p = 18;
         _t1 = _context1.v;
         log.error('error in load more messages', _t1);
-      case 16:
+      case 19:
         return _context1.a(2);
     }
-  }, _marked9$1, null, [[0, 15]]);
+  }, _marked9$1, null, [[0, 18]]);
 }
 function addReaction(action) {
   var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, _message2, reaction, channelUpdateParam, _t10;
@@ -26142,6 +26172,7 @@ var Message = function Message(_ref) {
   var _useColor = useColors(),
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
     overlayBackground = _useColor[THEME_COLORS.OVERLAY_BACKGROUND];
+  var scrollToNewMessage = useSelector(scrollToNewMessageSelector);
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -26160,7 +26191,19 @@ var Message = function Message(_ref) {
   };
   React.useEffect(function () {
     if (isVisible) {
+      var _channel$lastMessage;
       handleSendReadMarker();
+      if (!channel.isLinkedChannel) {
+        setMessageToVisibleMessagesMap(message);
+      }
+      if (scrollToNewMessage.scrollToBottom && ((message === null || message === void 0 ? void 0 : message.id) === ((_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id) || !(message !== null && message !== void 0 && message.id))) {
+        dispatch(scrollToNewMessageAC(false, false, false));
+        dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      }
+    } else {
+      if (!channel.isLinkedChannel) {
+        removeMessageFromVisibleMessagesMap(message);
+      }
     }
   }, [isVisible]);
   useDidUpdate(function () {
@@ -32813,14 +32856,6 @@ var HiddenMessageProperty;
 })(HiddenMessageProperty || (HiddenMessageProperty = {}));
 
 var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8;
-var loadFromServer = false;
-var loadDirection = '';
-var nextDisable = false;
-var prevDisable = false;
-var scrollToBottom = false;
-var shouldLoadMessages;
-var loading = false;
-var messagesIndexMap = {};
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -33030,6 +33065,7 @@ var MessageList = function MessageList(_ref2) {
   var scrollToMentionedMessage = useSelector(scrollToMentionedMessageSelector, reactRedux.shallowEqual);
   var scrollToRepliedMessage = useSelector(scrollToMessageSelector, reactRedux.shallowEqual);
   var scrollToMessageHighlight = useSelector(scrollToMessageHighlightSelector, reactRedux.shallowEqual);
+  var scrollToMessageBehavior = useSelector(scrollToMessageBehaviorSelector, reactRedux.shallowEqual);
   var browserTabIsActive = useSelector(browserTabIsActiveSelector, reactRedux.shallowEqual);
   var hasNextMessages = useSelector(messagesHasNextSelector, reactRedux.shallowEqual);
   var hasPrevMessages = useSelector(messagesHasPrevSelector, reactRedux.shallowEqual);
@@ -33070,35 +33106,40 @@ var MessageList = function MessageList(_ref2) {
     setShouldPreserveScroll = _useState0[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var messageTopDateRef = React.useRef(null);
+  var _useState1 = React.useState(''),
+    topDateLabel = _useState1[0],
+    setTopDateLabel = _useState1[1];
   var scrollRef = React.useRef(null);
+  var loadFromServerRef = React.useRef(false);
+  var loadDirectionRef = React.useRef('');
+  var nextDisableRef = React.useRef(false);
+  var prevDisableRef = React.useRef(false);
+  var scrollToBottomRef = React.useRef(false);
+  var shouldLoadMessagesRef = React.useRef('');
+  var loadingRef = React.useRef(false);
+  var messagesIndexMapRef = React.useRef({});
+  var scrollRafRef = React.useRef(null);
+  var loadingMessagesTimeoutRef = React.useRef(null);
   var renderTopDate = function renderTopDate() {
-    var dateLabels = document.querySelectorAll('.divider');
-    var messageTopDate = messageTopDateRef.current;
+    var container = scrollRef.current;
+    if (!container) return;
+    var dateLabels = container.querySelectorAll('.divider');
     var text = '';
     for (var i = dateLabels.length - 1; i >= 0; i--) {
-      var _dateLabel$firstChild;
       var dateLabel = dateLabels[i];
-      var span = dateLabel === null || dateLabel === void 0 ? void 0 : (_dateLabel$firstChild = dateLabel.firstChild) === null || _dateLabel$firstChild === void 0 ? void 0 : _dateLabel$firstChild.firstChild;
-      if (!text && scrollRef.current.scrollTop > dateLabel.offsetTop) {
-        text = span && span.innerText;
-        span.style.display = 'none';
-      } else {
-        span.style.display = 'block';
+      if (!text && container.scrollTop > dateLabel.offsetTop) {
+        var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
+        text = span ? span.innerText || '' : '';
       }
     }
-    if (text) {
-      messageTopDate.innerText = text;
-      messageTopDate.style.display = 'inline';
-    } else {
-      messageTopDate.style.display = 'none';
-    }
+    setTopDateLabel(text);
   };
-  var handleMessagesListScroll = React.useCallback(function (event) {
+  var handleMessagesListScroll = React.useCallback(function () {
     try {
+      var target = scrollRef.current;
+      if (!target) return Promise.resolve();
       if (scrollToMentionedMessage) {
-        var _target = event.target;
-        if (_target.scrollTop <= -50 || channel.lastMessage.id !== messages[messages.length - 1].id) {
+        if (target.scrollTop <= -50 || channel.lastMessage.id !== messages[messages.length - 1].id) {
           dispatch(showScrollToNewMessageButtonAC(true));
         } else {
           dispatch(showScrollToNewMessageButtonAC(false));
@@ -33111,7 +33152,6 @@ var MessageList = function MessageList(_ref2) {
         setShowTopDate(false);
       }, 1000);
       renderTopDate();
-      var target = event.target;
       var forceLoadPrevMessages = false;
       if (-target.scrollTop + target.offsetHeight + 30 > target.scrollHeight) {
         forceLoadPrevMessages = true;
@@ -33126,51 +33166,68 @@ var MessageList = function MessageList(_ref2) {
       }
       if (scrollToReply) {
         target.scrollTop = scrollToReply;
-      } else {
-        if (messagesIndexMap[lastVisibleMessageId] < 15 || forceLoadPrevMessages) {
-          if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && hasPrevMessages) {
-            if (loading || messagesLoading === LOADING_STATE.LOADING || prevDisable) {
-              shouldLoadMessages = 'prev';
-            } else {
-              if (shouldLoadMessages === 'prev') {
-                shouldLoadMessages = '';
-              }
-              loadDirection = 'prev';
-              handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
-              if (!getHasPrevCached()) {
-                loadFromServer = true;
-              }
-              nextDisable = true;
+        return Promise.resolve();
+      }
+      var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+      var hasIndex = typeof currentIndex === 'number';
+      if (hasIndex && currentIndex < 15 || forceLoadPrevMessages) {
+        if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && hasPrevMessages) {
+          if (loadingRef.current || messagesLoading === LOADING_STATE.LOADING || prevDisableRef.current) {
+            shouldLoadMessagesRef.current = 'prev';
+          } else {
+            if (shouldLoadMessagesRef.current === 'prev') {
+              shouldLoadMessagesRef.current = '';
+            }
+            loadDirectionRef.current = 'prev';
+            handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
+            if (!getHasPrevCached()) {
+              loadFromServerRef.current = true;
             }
+            nextDisableRef.current = true;
           }
         }
-        if (messagesIndexMap[lastVisibleMessageId] >= messages.length - 15 || target.scrollTop === 0) {
-          if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && (hasNextMessages || getHasNextCached())) {
-            if (loading || messagesLoading === LOADING_STATE.LOADING || nextDisable) {
-              shouldLoadMessages = 'next';
-            } else {
-              if (shouldLoadMessages === 'next') {
-                shouldLoadMessages = '';
-              }
-              loadDirection = 'next';
-              prevDisable = true;
-              handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
+      }
+      if (hasIndex && currentIndex >= messages.length - 15 || target.scrollTop === 0) {
+        if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && (hasNextMessages || getHasNextCached())) {
+          if (loadingRef.current || messagesLoading === LOADING_STATE.LOADING || nextDisableRef.current) {
+            shouldLoadMessagesRef.current = 'next';
+          } else {
+            if (shouldLoadMessagesRef.current === 'next') {
+              shouldLoadMessagesRef.current = '';
             }
+            loadDirectionRef.current = 'next';
+            prevDisableRef.current = true;
+            handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
           }
         }
-        if (messagesIndexMap[lastVisibleMessageId] > messages.length - 10) {
-          nextDisable = false;
-        }
+      }
+      if (hasIndex && currentIndex > messages.length - 10) {
+        nextDisableRef.current = false;
       }
       return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [channel === null || channel === void 0 ? void 0 : (_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id, messages, scrollToMentionedMessage, scrollToNewMessage, messagesLoading, hasPrevMessages, hasNextMessages, messagesIndexMap, lastVisibleMessageId, connectionStatus, shouldLoadMessages, loadDirection, getHasPrevCached, getHasNextCached, scrollToReply, loading, prevDisable, nextDisable]);
+  }, [channel === null || channel === void 0 ? void 0 : (_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id, messages, scrollToMentionedMessage, scrollToNewMessage, messagesLoading, hasPrevMessages, hasNextMessages, lastVisibleMessageId, connectionStatus, getHasPrevCached, getHasNextCached, scrollToReply]);
+  var onScroll = React.useCallback(function () {
+    if (scrollRafRef.current !== null) return;
+    scrollRafRef.current = window.requestAnimationFrame(function () {
+      scrollRafRef.current = null;
+      handleMessagesListScroll();
+    });
+  }, [handleMessagesListScroll]);
+  React.useEffect(function () {
+    return function () {
+      if (scrollRafRef.current !== null) {
+        cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = null;
+      }
+    };
+  }, []);
   var handleScrollToRepliedMessage = function handleScrollToRepliedMessage(messageId) {
     try {
-      prevDisable = true;
-      nextDisable = true;
+      prevDisableRef.current = true;
+      nextDisableRef.current = true;
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
       }) >= 10) {
@@ -33184,8 +33241,8 @@ var MessageList = function MessageList(_ref2) {
           var positiveValue = repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2 < 0 ? repliedMessage.offsetTop - scrollRef.current.offsetHeight * -1 : repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2;
           setTimeout(function () {
             repliedMessage.classList.remove('highlight');
-            prevDisable = false;
-            nextDisable = false;
+            prevDisableRef.current = false;
+            nextDisableRef.current = false;
           }, 1000 + positiveValue * 0.1);
         }
       } else {
@@ -33206,10 +33263,10 @@ var MessageList = function MessageList(_ref2) {
     var hasNextCached = getHasNextCached();
     if (messagesLoading === LOADING_STATE.LOADED && connectionStatus === CONNECTION_STATUS.CONNECTED) {
       if (direction === MESSAGE_LOAD_DIRECTION.PREV && firstMessageId && (hasPrevMessages || hasPrevCached)) {
-        loading = true;
+        loadingRef.current = true;
         dispatch(loadMoreMessagesAC(channel.id, limit, direction, firstMessageId, hasPrevMessages));
       } else if (direction === MESSAGE_LOAD_DIRECTION.NEXT && lastMessageId && (hasNextMessages || hasNextCached)) {
-        loading = true;
+        loadingRef.current = true;
         dispatch(loadMoreMessagesAC(channel.id, limit, direction, lastMessageId, hasNextMessages));
       }
     }
@@ -33240,39 +33297,42 @@ var MessageList = function MessageList(_ref2) {
       setIsDragging(false);
     }
   };
+  var readDroppedFiles = function readDroppedFiles(e) {
+    return new Promise(function (resolve) {
+      var fileList = Object.values(e.dataTransfer.files);
+      var attachmentsFiles = [];
+      var readFiles = 0;
+      var errorCount = 0;
+      fileList.forEach(function (attachment) {
+        var fileReader = new FileReader();
+        fileReader.onload = function (event) {
+          var file = event.target.result;
+          attachmentsFiles.push({
+            name: attachment.name,
+            data: file,
+            type: attachment.type
+          });
+          readFiles++;
+          if (readFiles + errorCount === fileList.length) {
+            resolve(attachmentsFiles);
+          }
+        };
+        fileReader.onerror = function () {
+          errorCount++;
+          if (readFiles + errorCount === fileList.length) {
+            resolve(attachmentsFiles);
+          }
+        };
+        fileReader.readAsDataURL(attachment);
+      });
+    });
+  };
   var handleDropFile = function handleDropFile(e) {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      var fileList = Object.values(e.dataTransfer.files);
-      new Promise(function (resolve) {
-        var attachmentsFiles = [];
-        var readFiles = 0;
-        var errorCount = 0;
-        fileList.forEach(function (attachment) {
-          var fileReader = new FileReader();
-          fileReader.onload = function (event) {
-            var file = event.target.result;
-            attachmentsFiles.push({
-              name: attachment.name,
-              data: file,
-              type: attachment.type
-            });
-            readFiles++;
-            if (readFiles + errorCount === fileList.length) {
-              resolve(attachmentsFiles);
-            }
-          };
-          fileReader.onerror = function () {
-            errorCount++;
-            if (readFiles + errorCount === fileList.length) {
-              resolve(attachmentsFiles);
-            }
-          };
-          fileReader.readAsDataURL(attachment);
-        });
-      }).then(function (result) {
+      readDroppedFiles(e).then(function (result) {
         dispatch(setDraggedAttachmentsAC(result, 'file'));
       })["catch"](function (error) {
         console.error('Error in handleDropFile:', error);
@@ -33285,34 +33345,7 @@ var MessageList = function MessageList(_ref2) {
     e.stopPropagation();
     setIsDragging(false);
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      var fileList = Object.values(e.dataTransfer.files);
-      new Promise(function (resolve) {
-        var attachmentsFiles = [];
-        var readFiles = 0;
-        var errorCount = 0;
-        fileList.forEach(function (attachment) {
-          var fileReader = new FileReader();
-          fileReader.onload = function (event) {
-            var file = event.target.result;
-            attachmentsFiles.push({
-              name: attachment.name,
-              data: file,
-              type: attachment.type
-            });
-            readFiles++;
-            if (readFiles + errorCount === fileList.length) {
-              resolve(attachmentsFiles);
-            }
-          };
-          fileReader.onerror = function () {
-            errorCount++;
-            if (readFiles + errorCount === fileList.length) {
-              resolve(attachmentsFiles);
-            }
-          };
-          fileReader.readAsDataURL(attachment);
-        });
-      }).then(function (result) {
+      readDroppedFiles(e).then(function (result) {
         dispatch(setDraggedAttachmentsAC(result, 'media'));
       })["catch"](function (error) {
         console.error('Error in handleDropMedia:', error);
@@ -33324,21 +33357,21 @@ var MessageList = function MessageList(_ref2) {
     var _messages, _channel$lastMessage2;
     if (messages.length > 0 && ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.id) === ((_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id) && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
       dispatch(showScrollToNewMessageButtonAC(false));
-      prevDisable = false;
+      prevDisableRef.current = false;
     }
   }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
   React.useEffect(function () {
     if (scrollToRepliedMessage) {
-      loading = false;
+      loadingRef.current = false;
       scrollRef.current.style.scrollBehavior = 'inherit';
       var repliedMessage = document.getElementById(scrollToRepliedMessage);
       if (repliedMessage) {
         setScrollToReply(repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200));
         scrollRef.current.scrollTo({
           top: repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200),
-          behavior: 'smooth'
+          behavior: scrollToMessageBehavior
         });
-        scrollRef.current.style.scrollBehavior = 'smooth';
+        scrollRef.current.style.scrollBehavior = scrollToMessageBehavior;
         if (!channel.backToLinkedChannel && scrollToMessageHighlight) {
           repliedMessage && repliedMessage.classList.add('highlight');
         }
@@ -33348,9 +33381,9 @@ var MessageList = function MessageList(_ref2) {
             var _repliedMessage = document.getElementById(scrollToRepliedMessage);
             _repliedMessage && _repliedMessage.classList.remove('highlight');
           }
-          prevDisable = false;
+          prevDisableRef.current = false;
           setScrollToReply(null);
-          scrollRef.current.style.scrollBehavior = 'smooth';
+          scrollRef.current.style.scrollBehavior = 'instant';
         }, 1000 + positiveValue * 0.1);
       }
       dispatch(setScrollToMessagesAC(null));
@@ -33366,15 +33399,15 @@ var MessageList = function MessageList(_ref2) {
           });
         }
       } else {
-        nextDisable = true;
-        prevDisable = true;
+        nextDisableRef.current = true;
+        prevDisableRef.current = true;
         scrollRef.current.scrollTo({
           top: 0,
           behavior: 'smooth'
         });
         dispatch(showScrollToNewMessageButtonAC(false));
         setTimeout(function () {
-          prevDisable = false;
+          prevDisableRef.current = false;
         }, 800);
       }
     }
@@ -33392,11 +33425,18 @@ var MessageList = function MessageList(_ref2) {
   React.useEffect(function () {
     setHasNextCached(false);
     setHasPrevCached(false);
+    messagesIndexMapRef.current = {};
+    loadFromServerRef.current = false;
+    loadDirectionRef.current = '';
+    nextDisableRef.current = false;
+    prevDisableRef.current = false;
+    shouldLoadMessagesRef.current = '';
+    loadingRef.current = false;
     if (channel.backToLinkedChannel) {
       var visibleMessages = getVisibleMessagesMap();
       var visibleMessagesIds = Object.keys(visibleMessages);
       var messageId = visibleMessagesIds[visibleMessagesIds.length - 1];
-      dispatch(getMessagesAC(channel, undefined, messageId));
+      dispatch(getMessagesAC(channel, undefined, messageId, undefined, undefined, undefined, 'instant'));
       setUnreadMessageId(messageId);
     } else {
       if (!channel.isLinkedChannel) {
@@ -33419,9 +33459,9 @@ var MessageList = function MessageList(_ref2) {
     }
     setPreviousScrollTop(0);
     setShouldPreserveScroll(false);
-    nextDisable = false;
-    prevDisable = false;
-    scrollToBottom = true;
+    nextDisableRef.current = false;
+    prevDisableRef.current = false;
+    scrollToBottomRef.current = true;
     setAllowEditDeleteIncomingMessage(allowEditDeleteIncomingMessage);
   }, [channel.id]);
   React.useEffect(function () {
@@ -33436,7 +33476,7 @@ var MessageList = function MessageList(_ref2) {
         setUnreadMessageId('');
       }
     }
-  }, [messages]);
+  }, [messages, hiddenMessagesProperties, user === null || user === void 0 ? void 0 : user.id]);
   React.useEffect(function () {
     if (scrollRef.current) {
       var isAtBottom = scrollRef.current.scrollTop > -50;
@@ -33445,35 +33485,40 @@ var MessageList = function MessageList(_ref2) {
         setShouldPreserveScroll(true);
       }
     }
-    if (loading) {
-      if (loadDirection !== 'next') {
+    if (loadingRef.current) {
+      if (loadDirectionRef.current !== 'next') {
         var lastVisibleMessage = document.getElementById(lastVisibleMessageId);
         if (lastVisibleMessage) {
           scrollRef.current.style.scrollBehavior = 'inherit';
           scrollRef.current.scrollTop = lastVisibleMessage.offsetTop;
           scrollRef.current.style.scrollBehavior = 'smooth';
         }
-        if (loadFromServer) {
-          setTimeout(function () {
-            loading = false;
-            loadFromServer = false;
-            nextDisable = false;
-            if (shouldLoadMessages === 'prev' && messagesIndexMap[lastVisibleMessageId] < 15) {
+        if (loadFromServerRef.current) {
+          var timeout = setTimeout(function () {
+            loadingRef.current = false;
+            loadFromServerRef.current = false;
+            nextDisableRef.current = false;
+            var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+            if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
               handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
             }
-            if (shouldLoadMessages === 'next' && messagesIndexMap[lastVisibleMessageId] > messages.length - 15) {
+            if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
               handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
             }
           }, 50);
+          if (loadingMessagesTimeoutRef.current) {
+            clearTimeout(loadingMessagesTimeoutRef.current);
+          }
+          loadingMessagesTimeoutRef.current = timeout;
         } else {
-          loading = false;
-          if (shouldLoadMessages === 'prev') {
+          loadingRef.current = false;
+          if (shouldLoadMessagesRef.current === 'prev') {
             handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
-            shouldLoadMessages = '';
+            shouldLoadMessagesRef.current = '';
           }
-          if (shouldLoadMessages === 'next') {
+          if (shouldLoadMessagesRef.current === 'next') {
             handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
-            shouldLoadMessages = '';
+            shouldLoadMessagesRef.current = '';
           }
         }
       } else {
@@ -33483,22 +33528,26 @@ var MessageList = function MessageList(_ref2) {
           scrollRef.current.scrollTop = _lastVisibleMessage.offsetTop - scrollRef.current.offsetHeight + _lastVisibleMessage.offsetHeight;
           scrollRef.current.style.scrollBehavior = 'smooth';
         }
-        loading = false;
-        prevDisable = false;
-        if (shouldLoadMessages === 'prev') {
+        loadingRef.current = false;
+        prevDisableRef.current = false;
+        if (shouldLoadMessagesRef.current === 'prev') {
           handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
-          shouldLoadMessages = '';
+          shouldLoadMessagesRef.current = '';
         }
-        if (shouldLoadMessages === 'next') {
+        if (shouldLoadMessagesRef.current === 'next') {
           handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
-          shouldLoadMessages = '';
+          shouldLoadMessagesRef.current = '';
         }
       }
     }
     renderTopDate();
-    if (scrollToBottom) {
-      dispatch(scrollToNewMessageAC(true));
-      scrollToBottom = false;
+    if (scrollToBottomRef.current) {
+      if (channel.backToLinkedChannel) {
+        dispatch(scrollToNewMessageAC(false));
+      } else {
+        dispatch(scrollToNewMessageAC(true));
+      }
+      scrollToBottomRef.current = false;
     }
     if (shouldPreserveScroll && scrollRef.current && previousScrollTop > 0) {
       requestAnimationFrame(function () {
@@ -33511,13 +33560,43 @@ var MessageList = function MessageList(_ref2) {
         setPreviousScrollTop(0);
       });
     }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
   }, [messages]);
+  React.useEffect(function () {
+    if (messagesLoading === LOADING_STATE.LOADED) {
+      var timeout = setTimeout(function () {
+        loadingRef.current = false;
+        loadFromServerRef.current = false;
+        nextDisableRef.current = false;
+        var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+        if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
+        }
+        if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
+        }
+      }, 50);
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+      loadingMessagesTimeoutRef.current = timeout;
+    }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
+  }, [messagesLoading, messages, lastVisibleMessageId]);
   React.useEffect(function () {
     log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      loading = false;
-      prevDisable = false;
-      nextDisable = false;
+      loadingRef.current = false;
+      prevDisableRef.current = false;
+      nextDisableRef.current = false;
       clearMessagesMap();
       removeAllMessages();
       if (channel.id) {
@@ -33526,7 +33605,8 @@ var MessageList = function MessageList(_ref2) {
     }
   }, [connectionStatus]);
   React.useEffect(function () {
-    if (channel.newMessageCount && channel.newMessageCount > 0 && getUnreadScrollTo()) {
+    var unreadScrollTo = getUnreadScrollTo();
+    if (channel.newMessageCount && channel.newMessageCount > 0 && unreadScrollTo) {
       if (scrollRef.current) {
         scrollRef.current.style.scrollBehavior = 'inherit';
       }
@@ -33539,7 +33619,14 @@ var MessageList = function MessageList(_ref2) {
         setUnreadScrollTo(false);
       }
     }
-  });
+  }, [channel.id, channel.newMessageCount, channel.lastDisplayedMessageId]);
+  React.useEffect(function () {
+    return function () {
+      if (hideTopDateTimeout.current) {
+        clearTimeout(hideTopDateTimeout.current);
+      }
+    };
+  }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isDragging && !(attachmentsPreview !== null && attachmentsPreview !== void 0 && attachmentsPreview.show && mediaFile) && (/*#__PURE__*/React__default.createElement(DragAndDropContainer, {
     id: 'draggingContainer',
     draggable: true,
@@ -33582,14 +33669,12 @@ var MessageList = function MessageList(_ref2) {
     dateDividerBackgroundColor: dateDividerBackgroundColor || overlayBackground,
     dateDividerBorderRadius: dateDividerBorderRadius,
     topOffset: scrollRef && scrollRef.current && scrollRef.current.offsetTop
-  }, /*#__PURE__*/React__default.createElement("span", {
-    ref: messageTopDateRef
-  }))), /*#__PURE__*/React__default.createElement(Container$h, {
+  }, /*#__PURE__*/React__default.createElement("span", null, topDateLabel))), /*#__PURE__*/React__default.createElement(Container$h, {
     id: 'scrollableDiv',
     className: isScrolling ? 'show-scrollbar' : '',
     ref: scrollRef,
     stopScrolling: stopScrolling,
-    onScroll: handleMessagesListScroll,
+    onScroll: onScroll,
     onMouseEnter: function onMouseEnter() {
       return setIsScrolling(true);
     },
@@ -33608,8 +33693,10 @@ var MessageList = function MessageList(_ref2) {
     var prevMessage = messages[index - 1];
     var nextMessage = messages[index + 1];
     var isUnreadMessage = !!(unreadMessageId && unreadMessageId === message.id && nextMessage) && !channel.backToLinkedChannel;
-    messagesIndexMap[message.id] = index;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
+    messagesIndexMapRef.current[message.id] = index;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: message.id || message.tid
+    }, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
       noMargin: !isUnreadMessage && prevMessage && prevMessage.type === 'system' && message.type !== 'system',
       theme: theme,
       lastIndex: false,
@@ -41139,10 +41226,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   };
   var handleScrollToLastMessage = function handleScrollToLastMessage(messageId) {
     try {
-      dispatch(scrollToNewMessageAC(true, false, false));
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
       }) >= 10) {
+        dispatch(scrollToNewMessageAC(true, false, false));
         dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {