sceyt-chat-react-uikit 1.7.1-beta.15 → 1.7.1-beta.17

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;
@@ -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,7 +18518,7 @@ 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;
           break;
@@ -18597,7 +18604,7 @@ 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;
         break;
@@ -18660,7 +18667,7 @@ function getMessagesQuery(action) {
         setHasNextCached(false);
       case 22:
         _context9.n = 23;
-        return effects.put(setScrollToMessagesAC(messageId));
+        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
       case 23:
         _context9.n = 24;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
@@ -18840,44 +18847,50 @@ function getMessageQuery(action) {
         return effects.call(getChannelFromAllChannels, channelId);
       case 1:
         channel = _context0.v;
-        _context0.n = 2;
-        return effects.call(channel.getMessagesById, [messageId]);
+        if (channel) {
+          _context0.n = 2;
+          break;
+        }
+        return _context0.a(2);
       case 2:
+        _context0.n = 3;
+        return effects.call(channel.getMessagesById, [messageId]);
+      case 3:
         messages = _context0.v;
         fetchedMessage = messages && messages[0] ? JSON.parse(JSON.stringify(messages[0])) : null;
         if (!fetchedMessage) {
-          _context0.n = 5;
+          _context0.n = 6;
           break;
         }
-        _context0.n = 3;
+        _context0.n = 4;
         return effects.put(updateMessageAC(messageId, fetchedMessage));
-      case 3:
+      case 4:
         updateMessageOnMap(channel.id, {
           messageId: messageId,
           params: fetchedMessage
         });
         updateMessageOnAllMessages(messageId, fetchedMessage);
-        _context0.n = 4;
+        _context0.n = 5;
         return effects.put(setScrollToMessagesAC(messageId, false));
-      case 4:
+      case 5:
         if (!(channel.lastMessage && channel.lastMessage.id === messageId)) {
-          _context0.n = 5;
+          _context0.n = 6;
           break;
         }
         updateChannelLastMessageOnAllChannels(channel.id, fetchedMessage);
-        _context0.n = 5;
+        _context0.n = 6;
         return effects.put(updateChannelLastMessageAC(fetchedMessage, channel));
-      case 5:
-        _context0.n = 7;
-        break;
       case 6:
-        _context0.p = 6;
+        _context0.n = 8;
+        break;
+      case 7:
+        _context0.p = 7;
         _t0 = _context0.v;
         log.error('error in message query', _t0);
-      case 7:
+      case 8:
         return _context0.a(2);
     }
-  }, _marked8$1, null, [[0, 6]]);
+  }, _marked8$1, null, [[0, 7]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t1;
@@ -26136,6 +26149,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;
@@ -26154,7 +26168,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 () {
@@ -31421,53 +31447,50 @@ var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObj
   var showOGMetadata = _ref2.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  overflow: hidden;\n  width: 100%;\n  margin: 0 auto;\n  padding: ", ";\n  height: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref3) {
+var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref3) {
   var width = _ref3.width;
-  return width + "px";
+  return width ? "\n    max-width: " + (width + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
 }, function (_ref4) {
-  var height = _ref4.height;
-  return height + "px";
+  var height = _ref4.height,
+    showOGMetadata = _ref4.showOGMetadata;
+  return height ? "\n    max-height: " + (height + "px") + ";\n    height: " + (showOGMetadata ? height + "px" : '0') + ";\n  " : "\n    max-height: 200px;\n    height: " + (showOGMetadata ? '200px' : '0') + ";\n  ";
 }, function (_ref5) {
   var showOGMetadata = _ref5.showOGMetadata;
   return showOGMetadata ? 1 : 0;
 }, function (_ref6) {
   var showOGMetadata = _ref6.showOGMetadata;
   return showOGMetadata ? '0.3rem' : '0';
-}, function (_ref7) {
-  var showOGMetadata = _ref7.showOGMetadata,
-    height = _ref7.height;
-  return showOGMetadata ? height + "px" : '0';
 });
-var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  width: 80%;\n  padding: 0.5rem;\n  margin: 0;\n  transition: all 0.2s ease;\n"])));
-var Url = styled__default.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n  max-width: ", ";\n  transition: all 0.2s ease;\n"])), function (_ref8) {
+var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  transition: all 0.2s ease;\n"])));
+var Url = styled__default.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref7) {
+  var maxWidth = _ref7.maxWidth;
+  return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+});
+var Title = styled__default.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  font-size: 13px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref8) {
   var maxWidth = _ref8.maxWidth;
-  return maxWidth + "px";
+  return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
 });
-var Title = styled__default.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  font-size: 13px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  max-width: ", ";\n  transition: all 0.2s ease;\n"])), function (_ref9) {
+var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref9) {
   var maxWidth = _ref9.maxWidth;
-  return maxWidth + "px";
-});
-var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  max-width: ", ";\n  transition: all 0.2s ease;\n"])), function (_ref0) {
-  var maxWidth = _ref0.maxWidth;
-  return maxWidth + "px";
+  return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
 });
-var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  min-width: ", ";\n  max-height: ", ";\n  min-height: ", ";\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref1) {
+var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  min-width: ", ";\n  max-height: ", ";\n  min-height: ", ";\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
+  var width = _ref0.width;
+  return width + "px";
+}, function (_ref1) {
   var width = _ref1.width;
   return width + "px";
 }, function (_ref10) {
-  var width = _ref10.width;
-  return width + "px";
+  var height = _ref10.height;
+  return height + "px";
 }, function (_ref11) {
   var height = _ref11.height;
   return height + "px";
 }, function (_ref12) {
-  var height = _ref12.height;
-  return height + "px";
-}, function (_ref13) {
-  var width = _ref13.width;
+  var width = _ref12.width;
   return width + "px";
-}, function (_ref14) {
-  var height = _ref14.height;
+}, function (_ref13) {
+  var height = _ref13.height;
   return height + "px";
 });
 var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s ease;\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])));
@@ -32810,14 +32833,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,
@@ -33027,6 +33042,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);
@@ -33067,35 +33083,39 @@ 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 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));
@@ -33108,7 +33128,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;
@@ -33123,51 +33142,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) {
@@ -33181,8 +33217,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 {
@@ -33203,10 +33239,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));
       }
     }
@@ -33237,39 +33273,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);
@@ -33282,34 +33321,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);
@@ -33321,21 +33333,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');
         }
@@ -33345,9 +33357,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));
@@ -33363,15 +33375,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);
       }
     }
@@ -33389,11 +33401,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) {
@@ -33416,9 +33435,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 () {
@@ -33442,35 +33461,36 @@ 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) {
+        if (loadFromServerRef.current) {
           setTimeout(function () {
-            loading = false;
-            loadFromServer = false;
-            nextDisable = false;
-            if (shouldLoadMessages === 'prev' && messagesIndexMap[lastVisibleMessageId] < 15) {
+            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);
         } 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 {
@@ -33480,22 +33500,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 () {
@@ -33512,9 +33536,9 @@ var MessageList = function MessageList(_ref2) {
   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) {
@@ -33523,7 +33547,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';
       }
@@ -33536,7 +33561,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,
@@ -33579,14 +33611,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);
     },
@@ -33605,8 +33635,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,