sceyt-chat-react-uikit 1.8.6 → 1.8.7-beta.2

package/index.js

@@ -18695,7 +18695,6 @@ function markMessagesRead(action) {
           _context0.n = 9;
           break;
         }
-        console.log('Mark Messages As Read', messageIds);
         _context0.n = 4;
         return effects.call(channel.markMessagesAsDisplayed, messageIds);
       case 4:
@@ -18956,7 +18955,6 @@ function markMessagesDelivered(action) {
           _context12.n = 7;
           break;
         }
-        console.log('Mark Messages As Delivered', messageIds);
         _context12.n = 3;
         return effects.call(channel.markMessagesAsReceived, messageIds);
       case 3:
@@ -31333,10 +31331,12 @@ var UsersPopup = function UsersPopup(_ref2) {
   })));
 };
 var List = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  margin-top: 12px;\n  min-height: 150px;\n  box-sizing: border-box;\n"])));
-var MembersContainer = styled__default(List)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-height: ", ";\n  overflow-y: auto;\n  padding-right: 16px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var MembersContainer = styled__default(List)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-height: ", ";\n  overflow-y: auto;\n  padding-right: 16px;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
   return "calc(100% - (" + ((props.isAdd ? 67 : 70) + props.selectedMembersHeight) + "px))";
 }, function (props) {
   return props.thumbColor;
+}, function (props) {
+  return props.thumbColor;
 });
 var SearchUserCont = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 24px 12px 0;\n\n  ", " {\n    top: 10px;\n    right: 11px;\n  }\n"])), ClearTypedText);
 var SearchUsersInput = styled__default.input(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  width: 100%;\n  font-size: 14px;\n  border: ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-left: 36px;\n  color: ", ";\n  background-color: ", ";\n\n  &::placeholder {\n    color: ", ";\n    font-size: 14px;\n    opacity: 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), function (props) {
@@ -31357,7 +31357,7 @@ var UserNamePresence = styled__default.div(_templateObject6$3 || (_templateObjec
 var MemberName = styled__default.h4(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 16px;\n  color: ", ";\n  margin: 0;\n  max-width: calc(100% - 10px);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), function (props) {
   return props.color;
 });
-var SelectedMembersContainer = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  max-height: 85px;\n  overflow-x: hidden;\n  padding: 2px 12px 0;\n  box-sizing: border-box;\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var SelectedMembersContainer = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  max-height: 85px;\n  overflow-x: hidden;\n  padding: 2px 12px 0;\n  box-sizing: border-box;\n  overflow-y: auto;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.thumbColor;
 });
 var SelectedMemberBubble = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  background: ", ";\n  border-radius: 16px;\n  align-items: center;\n  padding: 4px 10px 4px 0;\n  height: 28px;\n  margin: 8px 8px 0 0;\n  box-sizing: border-box;\n"])), function (props) {
@@ -33144,7 +33144,9 @@ var Container$7 = styled__default.div(_templateObject$i || (_templateObject$i =
 }, function (props) {
   return props.withCustomList ? '' : "\n    @media  " + device.laptopL + " {\n      width: 400px;\n      min-width: 400px;\n    }\n ";
 });
-var ChannelsList = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var ChannelsList = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
+  return props.thumbColor;
+}, function (props) {
   return props.thumbColor;
 });
 var SearchedChannels = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  height: calc(100vh - 123px);\n  overflow-x: hidden;\n"])));
@@ -34993,10 +34995,12 @@ function ForwardMessagePopup(_ref2) {
     onClick: handleForwardMessage
   }, buttonText || 'Forward'))));
 }
-var ForwardChannelsCont = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  margin-top: 16px;\n  max-height: ", ";\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var ForwardChannelsCont = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  margin-top: 16px;\n  max-height: ", ";\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
   return "calc(100% - " + (props.selectedChannelsHeight + 82) + "px)";
 }, function (props) {
   return props.thumbColor;
+}, function (props) {
+  return props.thumbColor;
 });
 var ChannelItem = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 8px;\n  position: relative;\n\n  ", "\n"])), function (_ref3) {
   var disabled = _ref3.disabled,
@@ -39877,7 +39881,9 @@ var AllVotesPopup = function AllVotesPopup(_ref) {
     color: textSecondary
   }, "Loading...")))))));
 };
-var VotesList = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  max-height: 500px;\n  padding: 8px 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding-right: 14px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var VotesList = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  max-height: 500px;\n  padding: 8px 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding-right: 14px;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
+  return props.thumbColor;
+}, function (props) {
   return props.thumbColor;
 });
 var VoterRow = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
@@ -40060,10 +40066,12 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
     })) === null || _poll$options$find === void 0 ? void 0 : _poll$options$find.name) || ''
   })));
 };
-var OptionsList = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-height: calc(554px - ", "px);\n  border-radius: 10px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  width: calc(100% + 20px);\n  padding-right: 14px;\n  box-sizing: border-box;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var OptionsList = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-height: calc(554px - ", "px);\n  border-radius: 10px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  width: calc(100% + 20px);\n  padding-right: 14px;\n  box-sizing: border-box;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
   return props.titleHeight;
 }, function (props) {
   return props.thumbColor;
+}, function (props) {
+  return props.thumbColor;
 });
 var OptionBlock = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 10px;\n  border: 1px solid ", "0F; /* subtle */\n  padding: 14px 16px 0 16px;\n"])), function (p) {
   return p.backgroundColor;
@@ -42797,7 +42805,7 @@ var MESSAGE_ACTIONS_HOVER_DELAY = 450;
 var MAX_SELECTED_MESSAGES = 30;
 var EMOJI_POPUP_THRESHOLD = 300;
 var Message$1 = function Message(_ref) {
-  var _message$reactionTota;
+  var _tabIsActiveRef$curre, _message$reactionTota;
   var message = _ref.message,
     channel = _ref.channel,
     MessageActionsMenu = _ref.MessageActionsMenu,
@@ -42953,6 +42961,7 @@ var Message$1 = function Message(_ref) {
     openedMessageMenuId = _ref.openedMessageMenuId,
     _ref$tabIsActive = _ref.tabIsActive,
     tabIsActive = _ref$tabIsActive === void 0 ? true : _ref$tabIsActive,
+    tabIsActiveRef = _ref.tabIsActiveRef,
     connectionStatus = _ref.connectionStatus,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
@@ -42965,6 +42974,7 @@ var Message$1 = function Message(_ref) {
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
     ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview;
+  var isTabActive = (_tabIsActiveRef$curre = tabIsActiveRef === null || tabIsActiveRef === void 0 ? void 0 : tabIsActiveRef.current) != null ? _tabIsActiveRef$curre : tabIsActive;
   var getComparableUserId = function getComparableUserId(messageUser) {
     return messageUser !== null && messageUser !== void 0 && messageUser.id ? String(messageUser.id) : 'deleted';
   };
@@ -43206,14 +43216,14 @@ var Message$1 = function Message(_ref) {
     }
     if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-    })) && !disableAutoReadTracking && tabIsActive && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
+    })) && !disableAutoReadTracking && isTabActive && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
       if (queueReadMarker) {
         queueReadMarker(channel.id, message.id);
       } else {
         dispatch(markMessagesAsReadAC(channel.id, [message.id]));
       }
     }
-  }, [dispatch, message.incoming, message.userMarkers, message.id, isVisible, channel.id, channel.newMessageCount, connectionStatus, queueReadMarker, queueDeliveredMarker, disableAutoReadTracking, tabIsActive]);
+  }, [dispatch, message.incoming, message.userMarkers, message.id, isVisible, channel.id, channel.newMessageCount, connectionStatus, queueReadMarker, queueDeliveredMarker, disableAutoReadTracking, isTabActive]);
   var handleForwardMessage = React.useCallback(function (channelIds) {
     if (channelIds && channelIds.length) {
       channelIds.forEach(function (channelId) {
@@ -43267,7 +43277,7 @@ var Message$1 = function Message(_ref) {
         removeMessageFromVisibleMessagesMap(message);
       }
     }
-  }, [isVisible, setLastVisibleMessageId, message.id, handleSendReadMarker, channel.isLinkedChannel, channel.lastMessage, scrollToNewMessage.scrollToBottom, dispatch, message, tabIsActive]);
+  }, [isVisible, setLastVisibleMessageId, message.id, handleSendReadMarker, channel.isLinkedChannel, channel.lastMessage, scrollToNewMessage.scrollToBottom, dispatch, message, isTabActive]);
   React.useEffect(function () {
     return function () {
       if (!channel.isLinkedChannel) {
@@ -43633,7 +43643,7 @@ var Message$1 = function Message(_ref) {
   }));
 };
 var Message$2 = /*#__PURE__*/React__default.memo(Message$1, function (prev, next) {
-  var _prev$prevMessage, _next$prevMessage, _prev$prevMessage2, _prev$prevMessage2$us, _next$prevMessage2, _next$prevMessage2$us, _prev$prevMessage3, _next$prevMessage3, _prev$nextMessage, _next$nextMessage, _prev$nextMessage2, _prev$nextMessage2$us, _next$nextMessage2, _next$nextMessage2$us, _prev$nextMessage3, _next$nextMessage3;
+  var _prev$prevMessage, _next$prevMessage, _prev$prevMessage2, _prev$prevMessage2$us, _next$prevMessage2, _next$prevMessage2$us, _prev$prevMessage3, _next$prevMessage3, _prev$nextMessage, _next$nextMessage, _prev$nextMessage2, _prev$nextMessage2$us, _next$nextMessage2, _next$nextMessage2$us, _prev$nextMessage3, _next$nextMessage3, _prev$tabIsActiveRef$, _prev$tabIsActiveRef, _next$tabIsActiveRef$, _next$tabIsActiveRef;
   if (prev.message.id !== next.message.id) return false;
   if (prev.message.deliveryStatus !== next.message.deliveryStatus) return false;
   if (prev.message.state !== next.message.state) return false;
@@ -43661,7 +43671,7 @@ var Message$2 = /*#__PURE__*/React__default.memo(Message$1, function (prev, next
   if (prev.selectedMessagesMap !== next.selectedMessagesMap) return false;
   if (prev.contactsMap !== next.contactsMap) return false;
   if (prev.connectionStatus !== next.connectionStatus) return false;
-  if (prev.tabIsActive !== next.tabIsActive) return false;
+  if (((_prev$tabIsActiveRef$ = (_prev$tabIsActiveRef = prev.tabIsActiveRef) === null || _prev$tabIsActiveRef === void 0 ? void 0 : _prev$tabIsActiveRef.current) != null ? _prev$tabIsActiveRef$ : prev.tabIsActive) !== ((_next$tabIsActiveRef$ = (_next$tabIsActiveRef = next.tabIsActiveRef) === null || _next$tabIsActiveRef === void 0 ? void 0 : _next$tabIsActiveRef.current) != null ? _next$tabIsActiveRef$ : next.tabIsActive)) return false;
   if (prev.ifLatestAndHasNotPreview !== next.ifLatestAndHasNotPreview) return false;
   var prevMenuOpen = prev.openedMessageMenuId === (prev.message.id || prev.message.tid);
   var nextMenuOpen = next.openedMessageMenuId === (next.message.id || next.message.tid);
@@ -43713,7 +43723,7 @@ var MessageItem = styled__default.div(_templateObject6$n || (_templateObject6$n
 
 var PRELOAD_TRIGGER_PX = 5;
 var PRELOAD_RESET_PX = 50;
-var LATEST_EDGE_GAP_PX = 5;
+var LATEST_EDGE_GAP_PX = 0;
 var PINNED_TO_LATEST_PX = 96;
 var HIGHLIGHT_DURATION_MS = 1600;
 var DEFAULT_UNREAD_VISIBILITY_THRESHOLD = 0.5;
@@ -43749,20 +43759,65 @@ var setScrollTop = function setScrollTop(container, top, behavior) {
   }
   container.scrollTop = top;
 };
+var getMaxScrollTop = function getMaxScrollTop(container) {
+  return Math.max(0, container.scrollHeight - container.clientHeight);
+};
+var clampScrollTopToViewport = function clampScrollTopToViewport(container, nextScrollTop) {
+  var maxScrollTop = getMaxScrollTop(container);
+  var minScrollTop = Math.min(LATEST_EDGE_GAP_PX, maxScrollTop);
+  var maxVisibleScrollTop = Math.max(minScrollTop, maxScrollTop - LATEST_EDGE_GAP_PX);
+  return Math.min(maxVisibleScrollTop, Math.max(minScrollTop, nextScrollTop));
+};
+var getHistoryEdgeScrollTop = function getHistoryEdgeScrollTop(container) {
+  return clampScrollTopToViewport(container, LATEST_EDGE_GAP_PX);
+};
+var getLatestEdgeScrollTop = function getLatestEdgeScrollTop(container) {
+  return clampScrollTopToViewport(container, getMaxScrollTop(container) - LATEST_EDGE_GAP_PX);
+};
+var getWheelDelta = function getWheelDelta(event, container) {
+  if (event.deltaMode === 1) {
+    return event.deltaY * 16;
+  }
+  if (event.deltaMode === 2) {
+    return event.deltaY * container.clientHeight;
+  }
+  return event.deltaY;
+};
+var shouldUseFirefoxWheelInterop = function shouldUseFirefoxWheelInterop() {
+  return typeof window !== 'undefined' && /firefox/i.test(window.navigator.userAgent);
+};
 var scrollToLatestEdge = function scrollToLatestEdge(container, behavior) {
   if (behavior === void 0) {
     behavior = 'auto';
   }
-  setScrollTop(container, LATEST_EDGE_GAP_PX, behavior);
-};
-var getMaxScrollTop = function getMaxScrollTop(container) {
-  return Math.max(0, container.scrollHeight - container.clientHeight);
+  setScrollTop(container, getLatestEdgeScrollTop(container), behavior);
 };
 var scrollToHistoryEdge = function scrollToHistoryEdge(container, behavior) {
   if (behavior === void 0) {
     behavior = 'auto';
   }
-  setScrollTop(container, Math.max(LATEST_EDGE_GAP_PX, getMaxScrollTop(container) - LATEST_EDGE_GAP_PX), behavior);
+  setScrollTop(container, getHistoryEdgeScrollTop(container), behavior);
+};
+var getElementScrollTopInContainer = function getElementScrollTopInContainer(container, target, alignment) {
+  if (alignment === void 0) {
+    alignment = 'center';
+  }
+  var containerRect = container.getBoundingClientRect();
+  var targetRect = target.getBoundingClientRect();
+  var targetTop = container.scrollTop + (targetRect.top - containerRect.top);
+  var nextScrollTop = alignment === 'start' ? targetTop : targetTop - (container.clientHeight - targetRect.height) / 2;
+  return clampScrollTopToViewport(container, nextScrollTop);
+};
+var scrollElementInContainer = function scrollElementInContainer(container, target, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _options = options,
+    _options$behavior = _options.behavior,
+    behavior = _options$behavior === void 0 ? 'auto' : _options$behavior,
+    _options$alignment = _options.alignment,
+    alignment = _options$alignment === void 0 ? 'center' : _options$alignment;
+  setScrollTop(container, getElementScrollTopInContainer(container, target, alignment), behavior);
 };
 var scrollItemIntoView = function scrollItemIntoView(container, target, smooth, isInView, direction) {
   if (isInView === void 0) {
@@ -43778,19 +43833,17 @@ var scrollItemIntoView = function scrollItemIntoView(container, target, smooth,
     }
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        target.scrollIntoView({
+        scrollElementInContainer(container, target, {
           behavior: 'smooth',
-          block: 'center',
-          inline: 'nearest'
+          alignment: 'center'
         });
       });
     });
     return;
   }
-  target.scrollIntoView({
+  scrollElementInContainer(container, target, {
     behavior: 'auto',
-    block: 'center',
-    inline: 'nearest'
+    alignment: 'center'
   });
 };
 var getItemElement = function getItemElement(container, itemId) {
@@ -43849,7 +43902,7 @@ var isPinnedToLatest = function isPinnedToLatest(container) {
   if (!container) {
     return true;
   }
-  return container.scrollTop <= PINNED_TO_LATEST_PX;
+  return getLatestEdgeScrollTop(container) - container.scrollTop <= PINNED_TO_LATEST_PX;
 };
 var getVisibilityRatio = function getVisibilityRatio(containerRect, targetRect) {
   var visibleTop = Math.max(containerRect.top, targetRect.top);
@@ -43857,15 +43910,6 @@ var getVisibilityRatio = function getVisibilityRatio(containerRect, targetRect)
   var visibleHeight = Math.max(0, visibleBottom - visibleTop);
   return targetRect.height > 0 ? visibleHeight / targetRect.height : 0;
 };
-var getWheelDelta = function getWheelDelta(event, container) {
-  if (event.deltaMode === 1) {
-    return event.deltaY * 16;
-  }
-  if (event.deltaMode === 2) {
-    return event.deltaY * container.clientHeight;
-  }
-  return event.deltaY;
-};
 var isUnreadIncomingMessage = function isUnreadIncomingMessage(message) {
   var _message$userMarkers;
   return message.incoming && !((_message$userMarkers = message.userMarkers) !== null && _message$userMarkers !== void 0 && _message$userMarkers.some(function (marker) {
@@ -43976,6 +44020,7 @@ function useChatController(_ref5) {
   var historyArmTimerRef = React.useRef(null);
   var latestArmTimerRef = React.useRef(null);
   var pendingEdgeCheckAfterLoadRef = React.useRef(false);
+  var lastUnreadCheckAtRef = React.useRef(0);
   var _useState = React.useState(false),
     isLoadingPrevious = _useState[0],
     setIsLoadingPrevious = _useState[1];
@@ -44102,11 +44147,11 @@ function useChatController(_ref5) {
     return jumpLockModeRef.current === 'latest' && (isJumping.current || Date.now() < jumpLockUntilRef.current);
   }, []);
   var captureWindowPreserveAnchor = React.useCallback(function () {
-    var _restoreRef$current, _restoreRef$current2;
-    if (isLatestJumpLocked()) {
+    var _restoreRef$current, _restoreRef$current2, _restoreRef$current3;
+    if (isJumping.current || jumpLockModeRef.current !== null && Date.now() < jumpLockUntilRef.current) {
       return;
     }
-    if (((_restoreRef$current = restoreRef.current) === null || _restoreRef$current === void 0 ? void 0 : _restoreRef$current.mode) === 'to-bottom' || ((_restoreRef$current2 = restoreRef.current) === null || _restoreRef$current2 === void 0 ? void 0 : _restoreRef$current2.mode) === 'to-bottom-smooth') {
+    if (((_restoreRef$current = restoreRef.current) === null || _restoreRef$current === void 0 ? void 0 : _restoreRef$current.mode) === 'to-bottom' || ((_restoreRef$current2 = restoreRef.current) === null || _restoreRef$current2 === void 0 ? void 0 : _restoreRef$current2.mode) === 'to-bottom-smooth' || ((_restoreRef$current3 = restoreRef.current) === null || _restoreRef$current3 === void 0 ? void 0 : _restoreRef$current3.mode) === 'reveal-message') {
       return;
     }
     var container = scrollRef.current;
@@ -44123,7 +44168,7 @@ function useChatController(_ref5) {
       offsetFromTop: anchor.offsetFromTop,
       sourceScrollTop: container.scrollTop
     };
-  }, [isLatestJumpLocked]);
+  }, []);
   var syncLatestState = React.useCallback(function () {
     var nextIsViewingLatest = !hasNext && isPinnedToLatest(scrollRef.current);
     viewIsAtLatestRef.current = nextIsViewingLatest;
@@ -44298,8 +44343,8 @@ function useChatController(_ref5) {
     return !direction || activeRequest.direction === direction;
   }, []);
   var clearPreserveAnchorForRequest = React.useCallback(function (requestId) {
-    var _restoreRef$current3;
-    if (((_restoreRef$current3 = restoreRef.current) === null || _restoreRef$current3 === void 0 ? void 0 : _restoreRef$current3.mode) !== 'preserve-anchor') {
+    var _restoreRef$current4;
+    if (((_restoreRef$current4 = restoreRef.current) === null || _restoreRef$current4 === void 0 ? void 0 : _restoreRef$current4.mode) !== 'preserve-anchor') {
       return;
     }
     if (requestId && restoreRef.current.requestId !== requestId) {
@@ -44458,7 +44503,6 @@ function useChatController(_ref5) {
     try {
       var _channelRef$current, _pendingLatestJumpRef, _pendingLatestJumpRef2, _channelRef$current2, _channelRef$current2$;
       clearScrollIdleTimer();
-      isJumping.current = true;
       lockJumpScrolling(smooth, 'latest');
       invalidateEdgeDirection('previous');
       invalidateEdgeDirection('next');
@@ -44524,12 +44568,16 @@ function useChatController(_ref5) {
           cancelAnimationFrame(jumpToLatestFrameRef.current);
         }
         jumpToLatestFrameRef.current = requestAnimationFrame(function () {
+          var _restoreRef$current5, _restoreRef$current6;
           jumpToLatestFrameRef.current = null;
           var renderedContainer = scrollRef.current;
           if (!renderedContainer) {
             return;
           }
-          scrollToLatestEdge(renderedContainer, smooth ? 'smooth' : 'auto');
+          if (((_restoreRef$current5 = restoreRef.current) === null || _restoreRef$current5 === void 0 ? void 0 : _restoreRef$current5.mode) === 'to-bottom' || ((_restoreRef$current6 = restoreRef.current) === null || _restoreRef$current6 === void 0 ? void 0 : _restoreRef$current6.mode) === 'to-bottom-smooth') {
+            restoreRef.current = null;
+            scrollToLatestEdge(renderedContainer, smooth ? 'smooth' : 'auto');
+          }
         });
       });
     } catch (e) {
@@ -44558,9 +44606,12 @@ function useChatController(_ref5) {
       });
       setTimeout(function () {
         try {
+          clearScrollIdleTimer();
           clearPendingLatestJump();
           var jumpId = ++currentJumpIdRef.current;
-          isJumping.current = true;
+          if (!isLoaded) {
+            isJumping.current = true;
+          }
           invalidateEdgeDirection('previous');
           invalidateEdgeDirection('next');
           restoreRef.current = {
@@ -44920,26 +44971,32 @@ function useChatController(_ref5) {
     }
   }, [channel.id, clearPreserveAnchorForRequest, consumeSuppressedMessageChange, createEdgeRequestId, clearPendingLatestJump, dispatch, suppressNextMessageChange, hasNext, hasPrevious, isActiveEdgeRequestCurrent, isLoadingNext, loadNext, messages, requestDirectionalPrefetchIfNeeded]);
   var handleTimelineScroll = React.useCallback(function () {
-    var _restoreRef$current4, _restoreRef$current5;
+    var _restoreRef$current7, _restoreRef$current8;
     var container = scrollRef.current;
     if (!container) {
       return;
     }
+    var historyEdgeScrollTop = getHistoryEdgeScrollTop(container);
+    var latestEdgeScrollTop = getLatestEdgeScrollTop(container);
+    var currentScrollTop = container.scrollTop;
     lastScrollActivityAtRef.current = Date.now();
     if (isJumping.current) {
       return;
     }
+    if (currentScrollTop <= historyEdgeScrollTop + PRELOAD_TRIGGER_PX) {
+      currentScrollTop = historyEdgeScrollTop;
+    } else if (currentScrollTop >= latestEdgeScrollTop - PRELOAD_TRIGGER_PX) {
+      currentScrollTop = latestEdgeScrollTop;
+    }
+    var distanceFromLatest = latestEdgeScrollTop - currentScrollTop;
     if (Date.now() < jumpLockUntilRef.current) {
-      if (jumpLockModeRef.current === 'latest' && container.scrollTop > PRELOAD_RESET_PX) {
+      if (jumpLockModeRef.current === 'latest' && distanceFromLatest > PRELOAD_RESET_PX) {
         clearJumpScrollingLock();
       } else {
         return;
       }
     }
-    if (container.scrollTop < LATEST_EDGE_GAP_PX) {
-      setScrollTop(container, LATEST_EDGE_GAP_PX);
-    }
-    var pendingRestore = ((_restoreRef$current4 = restoreRef.current) === null || _restoreRef$current4 === void 0 ? void 0 : _restoreRef$current4.mode) === 'preserve-anchor' || ((_restoreRef$current5 = restoreRef.current) === null || _restoreRef$current5 === void 0 ? void 0 : _restoreRef$current5.mode) === 'preserve-anchor-window' ? restoreRef.current : null;
+    var pendingRestore = ((_restoreRef$current7 = restoreRef.current) === null || _restoreRef$current7 === void 0 ? void 0 : _restoreRef$current7.mode) === 'preserve-anchor' || ((_restoreRef$current8 = restoreRef.current) === null || _restoreRef$current8 === void 0 ? void 0 : _restoreRef$current8.mode) === 'preserve-anchor-window' ? restoreRef.current : null;
     if (pendingRestore && Math.abs(container.scrollTop - pendingRestore.sourceScrollTop) > PRESERVE_ANCHOR_SCROLL_EPSILON_PX && (pendingRestore.mode === 'preserve-anchor-window' || pendingRestore.mode === 'preserve-anchor' && isActiveEdgeRequestCurrent(pendingRestore.requestId))) {
       var currentAnchor = getTopViewportAnchor(container, itemElementsRef.current);
       restoreRef.current = currentAnchor ? pendingRestore.mode === 'preserve-anchor-window' ? {
@@ -44957,15 +45014,14 @@ function useChatController(_ref5) {
       } : null;
     }
     syncLatestState();
-    queueVisibleUnreadCheck();
-    var maxScrollTop = getMaxScrollTop(container);
-    if (container.scrollTop > maxScrollTop - LATEST_EDGE_GAP_PX) {
-      setScrollTop(container, maxScrollTop - LATEST_EDGE_GAP_PX);
-    }
-    var distanceFromHistory = maxScrollTop - container.scrollTop;
-    var historyTriggered = distanceFromHistory <= PRELOAD_TRIGGER_PX && hasPrevious;
-    var latestTriggered = container.scrollTop <= PRELOAD_TRIGGER_PX + LATEST_EDGE_GAP_PX && hasNext;
-    if (distanceFromHistory > PRELOAD_RESET_PX) {
+    var now = Date.now();
+    if (now - lastUnreadCheckAtRef.current >= 100) {
+      lastUnreadCheckAtRef.current = now;
+      queueVisibleUnreadCheck();
+    }
+    var historyTriggered = currentScrollTop <= historyEdgeScrollTop + PRELOAD_TRIGGER_PX && hasPrevious;
+    var latestTriggered = distanceFromLatest <= PRELOAD_TRIGGER_PX && hasNext;
+    if (currentScrollTop > historyEdgeScrollTop + PRELOAD_RESET_PX) {
       if (historyArmTimerRef.current === null) {
         historyArmTimerRef.current = setTimeout(function () {
           historyArmTimerRef.current = null;
@@ -44974,7 +45030,7 @@ function useChatController(_ref5) {
       }
       invalidateEdgeDirection('previous');
     }
-    if (container.scrollTop > PRELOAD_RESET_PX) {
+    if (distanceFromLatest > PRELOAD_RESET_PX) {
       if (latestArmTimerRef.current === null) {
         latestArmTimerRef.current = setTimeout(function () {
           latestArmTimerRef.current = null;
@@ -45047,39 +45103,45 @@ function useChatController(_ref5) {
   handleScrollRef.current = handleTimelineScroll;
   React.useEffect(function () {
     var el = scrollRef.current;
-    if (!el) {
+    if (!el || !messages || !messages.length) {
       return;
     }
     var onScroll = function onScroll() {
-      return handleScrollRef.current();
+      handleScrollRef.current();
     };
     el.addEventListener('scroll', onScroll, {
       passive: true
     });
     return function () {
-      return el.removeEventListener('scroll', onScroll);
+      el.removeEventListener('scroll', onScroll);
     };
-  }, [channel === null || channel === void 0 ? void 0 : channel.id]);
+  }, [channel === null || channel === void 0 ? void 0 : channel.id, messages]);
   React.useEffect(function () {
     var el = scrollRef.current;
-    if (!el) {
+    if (!el || !shouldUseFirefoxWheelInterop() || !messages.length) {
       return;
     }
     var onWheel = function onWheel(event) {
+      if (event.ctrlKey) {
+        return;
+      }
       event.preventDefault();
       if (isJumping.current || jumpLockModeRef.current === 'item' && Date.now() < jumpLockUntilRef.current) {
         return;
       }
-      el.scrollTop -= getWheelDelta(event, el);
+      var nextScrollTop = clampScrollTopToViewport(el, el.scrollTop + getWheelDelta(event, el));
+      if (nextScrollTop !== el.scrollTop) {
+        setScrollTop(el, nextScrollTop, 'auto');
+      }
       handleScrollRef.current();
     };
     el.addEventListener('wheel', onWheel, {
       passive: false
     });
     return function () {
-      return el.removeEventListener('wheel', onWheel);
+      el.removeEventListener('wheel', onWheel);
     };
-  }, [channel === null || channel === void 0 ? void 0 : channel.id]);
+  }, [channel === null || channel === void 0 ? void 0 : channel.id, messages]);
   React.useEffect(function () {
     var _pendingWindowLoadRef, _pendingEdgeLoadRefs$, _pendingEdgeLoadRefs$2;
     if (activeChannelIdRef.current === null) {
@@ -45141,6 +45203,7 @@ function useChatController(_ref5) {
     itemElementsRef.current.clear();
     previousMessagesRef.current = [];
     suppressedMessageChangesRef.current = 0;
+    lastScrollActivityAtRef.current = 0;
     pendingLatestJumpRef.current = null;
     pendingEdgeCheckAfterLoadRef.current = false;
     (_pendingWindowLoadRef = pendingWindowLoadRef.current) === null || _pendingWindowLoadRef === void 0 ? void 0 : _pendingWindowLoadRef.resolve({
@@ -45203,12 +45266,12 @@ function useChatController(_ref5) {
     }
   }
   React.useLayoutEffect(function () {
-    var _restoreRef$current6;
+    var _restoreRef$current9;
     var container = scrollRef.current;
     if (!container || !messages.length) {
       return;
     }
-    if (((_restoreRef$current6 = restoreRef.current) === null || _restoreRef$current6 === void 0 ? void 0 : _restoreRef$current6.mode) === 'restore-scroll-top') {
+    if (((_restoreRef$current9 = restoreRef.current) === null || _restoreRef$current9 === void 0 ? void 0 : _restoreRef$current9.mode) === 'restore-scroll-top') {
       var savedScrollTop = restoreRef.current.scrollTop;
       if (!lastBootKeyRef.current) {
         lastBootKeyRef.current = channel.id + ":" + getMessageLocalRef(messages[0]);
@@ -45222,9 +45285,10 @@ function useChatController(_ref5) {
     }
     if (!lastBootKeyRef.current) {
       lastBootKeyRef.current = channel.id + ":" + getMessageLocalRef(messages[0]);
+      var preservePendingHistoryEdge = pendingEdgeCheckAfterLoadRef.current && activeEdgeIntentRef.current === 'previous';
       restoreRef.current = unreadScrollTo && unreadMessageId ? {
         mode: 'reveal-unread-separator'
-      } : isScrollInteractionActive() ? null : {
+      } : preservePendingHistoryEdge ? null : isScrollInteractionActive() ? null : {
         mode: 'to-bottom'
       };
     }
@@ -45267,10 +45331,9 @@ function useChatController(_ref5) {
         unreadRestoreCompletedRef.current = true;
         viewIsAtLatestRef.current = false;
         setIsViewingLatest(false);
-        unreadDivider.scrollIntoView({
+        scrollElementInContainer(container, unreadDivider, {
           behavior: 'auto',
-          block: 'center',
-          inline: 'nearest'
+          alignment: 'center'
         });
       } else {
         return;
@@ -45292,6 +45355,13 @@ function useChatController(_ref5) {
       return;
     }
     if (restoreState.mode === 'preserve-anchor-window') {
+      if (!hasNextMessages && getLatestEdgeScrollTop(container) - container.scrollTop <= PRELOAD_TRIGGER_PX) {
+        restoreRef.current = null;
+        viewIsAtLatestRef.current = true;
+        setIsViewingLatest(true);
+        scrollToLatestEdge(container, 'auto');
+        return;
+      }
       var anchorElement = getItemElement(container, restoreState.itemId);
       if (!anchorElement) {
         return;
@@ -45301,7 +45371,7 @@ function useChatController(_ref5) {
       var offsetDelta = anchorRect.top - containerRect.top - restoreState.offsetFromTop;
       restoreRef.current = null;
       if (offsetDelta !== 0) {
-        setScrollTop(container, Math.max(LATEST_EDGE_GAP_PX, container.scrollTop - offsetDelta), 'auto');
+        setScrollTop(container, clampScrollTopToViewport(container, container.scrollTop + offsetDelta), 'auto');
       }
       return;
     }
@@ -45333,7 +45403,7 @@ function useChatController(_ref5) {
         cachedEdgeRequestRef.current = null;
       }
       if (_offsetDelta !== 0) {
-        var nextScrollTop = Math.max(LATEST_EDGE_GAP_PX, container.scrollTop - _offsetDelta);
+        var nextScrollTop = clampScrollTopToViewport(container, container.scrollTop + _offsetDelta);
         setScrollTop(container, nextScrollTop, 'auto');
       }
     }
@@ -45354,10 +45424,9 @@ function useChatController(_ref5) {
     restoreRef.current = null;
     viewIsAtLatestRef.current = false;
     setIsViewingLatest(false);
-    unreadDivider.scrollIntoView({
+    scrollElementInContainer(container, unreadDivider, {
       behavior: 'auto',
-      block: 'center',
-      inline: 'nearest'
+      alignment: 'center'
     });
   }, [messages, unreadMessageId, unreadScrollTo]);
   React.useEffect(function () {
@@ -45562,9 +45631,8 @@ function useChatController(_ref5) {
     }) : false;
     var reconnectContainer = scrollRef.current;
     if (reconnectContainer) {
-      var maxTop = getMaxScrollTop(reconnectContainer);
-      var atHistoryEdge = maxTop - reconnectContainer.scrollTop <= PRELOAD_TRIGGER_PX;
-      var atLatestEdge = reconnectContainer.scrollTop <= PRELOAD_TRIGGER_PX + LATEST_EDGE_GAP_PX;
+      var atHistoryEdge = reconnectContainer.scrollTop <= getHistoryEdgeScrollTop(reconnectContainer) + PRELOAD_TRIGGER_PX;
+      var atLatestEdge = getLatestEdgeScrollTop(reconnectContainer) - reconnectContainer.scrollTop <= PRELOAD_TRIGGER_PX;
       if (atHistoryEdge || atLatestEdge) {
         pendingEdgeCheckAfterLoadRef.current = true;
       }
@@ -46082,12 +46150,9 @@ var MessageList = function MessageList(_ref) {
   var _useState3 = React.useState(false),
     stopScrolling = _useState3[0],
     setStopScrolling = _useState3[1];
-  var _useState4 = React.useState(false),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-  var _useState5 = React.useState(''),
-    stickyDate = _useState5[0],
-    setStickyDate = _useState5[1];
+  var _useState4 = React.useState(''),
+    stickyDate = _useState4[0],
+    setStickyDate = _useState4[1];
   var markerBatcherRef = React__default.useRef(null);
   if (!markerBatcherRef.current) {
     markerBatcherRef.current = createMessageMarkerBatcher({
@@ -46126,6 +46191,17 @@ var MessageList = function MessageList(_ref) {
     isJumpingToItem = _useChatController.isJumpingToItem,
     jumpToLatest = _useChatController.jumpToLatest,
     jumpToItem = _useChatController.jumpToItem;
+  var handleScrollToRepliedMessageRef = React__default.useRef(handleScrollToRepliedMessage);
+  React.useEffect(function () {
+    handleScrollToRepliedMessageRef.current = handleScrollToRepliedMessage;
+  }, [handleScrollToRepliedMessage]);
+  var stableHandleScrollToRepliedMessage = React.useCallback(function (messageId) {
+    handleScrollToRepliedMessageRef.current(messageId);
+  }, []);
+  var tabIsActiveRef = React__default.useRef(browserTabIsActive);
+  React.useEffect(function () {
+    tabIsActiveRef.current = browserTabIsActive;
+  }, [browserTabIsActive]);
   var queueReadMarker = React.useCallback(function (channelId, messageId) {
     var _markerBatcherRef$cur;
     (_markerBatcherRef$cur = markerBatcherRef.current) === null || _markerBatcherRef$cur === void 0 ? void 0 : _markerBatcherRef$cur.enqueueRead(channelId, messageId);
@@ -46220,7 +46296,7 @@ var MessageList = function MessageList(_ref) {
     var remainingMentionIds = mentionIds.filter(function (mentionId) {
       return mentionId !== nextUnreadMentionId;
     });
-    handleScrollToRepliedMessage(nextUnreadMentionId);
+    stableHandleScrollToRepliedMessage(nextUnreadMentionId);
     dispatch(markMessagesAsReadAC(channel.id, [nextUnreadMentionId]));
     dispatch(updateChannelDataAC(channel.id, {
       mentionsIds: remainingMentionIds
@@ -46228,7 +46304,7 @@ var MessageList = function MessageList(_ref) {
     if (channel.newMentionCount >= 3 && remainingMentionIds.length < 3) {
       dispatch(getChannelMentionsAC(channel.id));
     }
-  }, [channel === null || channel === void 0 ? void 0 : channel.id, channel.newMentionCount, dispatch, handleScrollToRepliedMessage, isMessageRead]);
+  }, [channel === null || channel === void 0 ? void 0 : channel.id, channel.newMentionCount, dispatch, isMessageRead, stableHandleScrollToRepliedMessage]);
   React.useEffect(function () {
     registerMessageListNavigator(jumpToItem);
     return function () {
@@ -46386,7 +46462,7 @@ var MessageList = function MessageList(_ref) {
       channel: channel,
       stopScrolling: setStopScrolling,
       handleMediaItemClick: handleMediaItemClickStable,
-      handleScrollToRepliedMessage: handleScrollToRepliedMessage,
+      handleScrollToRepliedMessage: stableHandleScrollToRepliedMessage,
       prevMessage: prevMessage,
       nextMessage: nextMessage,
       isUnreadMessage: isUnreadMessage,
@@ -46503,7 +46579,7 @@ var MessageList = function MessageList(_ref) {
       contactsMap: contactsMap,
       connectionStatus: connectionStatus,
       openedMessageMenuId: openedMessageMenuId,
-      tabIsActive: browserTabIsActive,
+      tabIsActiveRef: tabIsActiveRef,
       messageTextFontSize: messageTextFontSize,
       messageTextLineHeight: messageTextLineHeight,
       messageStatusSize: messageStatusSize,
@@ -46559,15 +46635,9 @@ var MessageList = function MessageList(_ref) {
     "$color": iconInactive
   }))), /*#__PURE__*/React__default.createElement(Container$j, {
     id: 'scrollableDiv',
-    className: isScrolling ? 'show-scrollbar' : '',
+    className: 'show-scrollbar',
     ref: scrollRef,
     stopScrolling: stopScrolling,
-    onMouseEnter: function onMouseEnter() {
-      return setIsScrolling(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsScrolling(false);
-    },
     onDragEnter: handleDragIn,
     backgroundColor: backgroundColor || themeBackgroundColor,
     thumbColor: surface2
@@ -46664,10 +46734,12 @@ var MessageList = function MessageList(_ref) {
     }
   })));
 };
-var Container$j = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  transform: scaleY(-1);\n  background-color: ", ";\n  overflow-y: overlay;\n  overflow-x: hidden;\n  overscroll-behavior-y: contain;\n  margin-top: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var Container$j = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  background-color: ", ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.thumbColor;
+}, function (props) {
+  return props.thumbColor;
 });
 var JumpOverlay = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n"])));
 var JumpSpinner = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: 2.5px solid transparent;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: spin 0.7s linear infinite;\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (props) {
@@ -46677,7 +46749,7 @@ var JumpSpinner = styled__default.div(_templateObject3$C || (_templateObject3$C
 }, function (props) {
   return props.$color || '#9EA6B0';
 });
-var MessagesBox = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-top: 5px;\n  flex-direction: column;\n  padding-bottom: 6px;\n  width: 100%;\n  transform: scaleY(-1);\n  backface-visibility: hidden;\n  filter: ", ";\n  transition: filter 0.2s ease;\n"])), function (props) {
+var MessagesBox = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-top: auto;\n  flex-shrink: 0;\n  filter: ", ";\n  transition: filter 0.2s ease;\n"])), function (props) {
   return props.$isJumping ? 'blur(4px)' : 'none';
 });
 var ScrollViewport = styled__default.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n"])));
@@ -46718,7 +46790,7 @@ var DropAttachmentArea = styled__default.div(_templateObject9$h || (_templateObj
 var MessageWrapper = styled__default.div(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.highlightBg || '#d5d5d5';
 });
-var NoMessagesContainer = styled__default.div(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  transform: scaleY(-1);\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesContainer = styled__default.div(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var NoMessagesTitle = styled__default.h4(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
@@ -50123,7 +50195,9 @@ var CustomTextArea = styled__default.textarea(_templateObject2$Q || (_templateOb
 var TextCounter = styled__default.span(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 20px;\n  margin-left: auto;\n"])), function (props) {
   return props.color;
 });
-var OptionsList$1 = styled__default.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  max-height: 200px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var OptionsList$1 = styled__default.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  max-height: 200px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
+  return props.thumbColor;
+}, function (props) {
   return props.thumbColor;
 });
 var OptionRow = styled__default.div(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  cursor: grab;\n  border: ", ";\n  border-radius: 6px;\n  padding: 4px;\n  opacity: ", ";\n"])), function (props) {
@@ -52170,7 +52244,7 @@ var MessageInputWrapper = styled__default.div(_templateObject12$6 || (_templateO
 }, function (props) {
   return props.borderRadius || '18px';
 });
-var LexicalWrapper = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    &::-webkit-scrollbar {\n      width: 8px;\n      background: transparent;\n    }\n    &::-webkit-scrollbar-thumb {\n      background: transparent;\n    }\n\n    &.show-scrollbar::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 4px;\n    }\n    &.show-scrollbar::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-modify: read-only;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
+var LexicalWrapper = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n    scrollbar-color: transparent transparent;\n    overscroll-behavior: none;\n\n    @supports (overflow: overlay) {\n      overflow-y: overlay;\n    }\n\n    &::-webkit-scrollbar {\n      width: 8px;\n      background: transparent;\n    }\n    &::-webkit-scrollbar-thumb {\n      background: transparent;\n    }\n\n    &.show-scrollbar::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 4px;\n    }\n    &.show-scrollbar::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &.show-scrollbar {\n      scrollbar-width: thin;\n      scrollbar-color: ", " transparent;\n    }\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-modify: read-only;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
   return props.borderRadius;
 }, function (props) {
   return props.backgroundColor;
@@ -52182,6 +52256,8 @@ var LexicalWrapper = styled__default.div(_templateObject13$5 || (_templateObject
   return props.order === 0 || props.order ? props.order : 1;
 }, function (props) {
   return props.thumbColor;
+}, function (props) {
+  return props.thumbColor;
 }, function (props) {
   return props.color;
 }, function (props) {
@@ -53017,7 +53093,9 @@ var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
     color: textSecondary
   }, "Loading more...")))));
 };
-var ChannelsList$1 = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  max-height: 400px;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var ChannelsList$1 = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  max-height: 400px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
+  return props.thumbColor;
+}, function (props) {
   return props.thumbColor;
 });
 var ChannelItem$1 = styled__default.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 6px 2px 6px 6px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
@@ -56362,7 +56440,7 @@ var Container$v = styled__default.div(_templateObject$1a || (_templateObject$1a
 var ChannelDetailsHeader = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.borderColor;
 });
-var ChatDetails = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var ChatDetails = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n  scrollbar-width: none;\n  scrollbar-color: transparent transparent;\n  overscroll-behavior: none;\n\n  @supports (overflow: overlay) {\n    overflow-y: overlay;\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &.show-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: ", " transparent;\n  }\n"])), function (props) {
   return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
 }, function (props) {
   return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
@@ -56370,6 +56448,8 @@ var ChatDetails = styled__default.div(_templateObject3$X || (_templateObject3$X
   return props.height && props.height - (props.heightOffset ? props.heightOffset + 2 : 0) + "px";
 }, function (props) {
   return props.thumbColor;
+}, function (props) {
+  return props.thumbColor;
 });
 var AboutChannel = styled__default.div(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
 var AboutChannelTitle = styled__default.h4(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {