npm - sceyt-chat-react-uikit - Versions diffs - 1.7.1-beta.9 → 1.7.1 - Mend

sceyt-chat-react-uikit 1.7.1-beta.9 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/components/Channel/index.d.ts +22 -1
package/components/ChannelList/ChannelSearch/index.d.ts +1 -0
package/components/ChannelList/index.d.ts +6 -1
package/index.js +697 -396
package/index.modern.js +697 -396
package/package.json +1 -1

package/index.js CHANGED Viewed

@@ -9091,7 +9091,7 @@ function updateChannelLastMessageOnAllChannels(channelId, message) {
   var updateChannel = allChannels.find(function (chan) {
     return chan.id === channelId;
   });
-  if (message.state === 'Deleted' || message.state === 'Edited') {
+  if ((message === null || message === void 0 ? void 0 : message.state) === 'Deleted' || (message === null || message === void 0 ? void 0 : message.state) === 'Edited') {
     var _updateChannel;
     if (((_updateChannel = updateChannel) === null || _updateChannel === void 0 ? void 0 : _updateChannel.lastMessage.id) === message.id) {
       allChannels = allChannels.map(function (chan) {
@@ -10340,6 +10340,7 @@ var initialState$1 = {
   attachmentsUploadingState: {},
   scrollToMessage: null,
   scrollToMessageHighlight: true,
+  scrollToMessageBehavior: 'smooth',
   scrollToMentionedMessage: false,
   reactionsList: [],
   reactionsHasNext: true,
@@ -10366,6 +10367,7 @@ var messageSlice = createSlice({
     setScrollToMessage: function setScrollToMessage(state, action) {
       state.scrollToMessage = action.payload.messageId;
       state.scrollToMessageHighlight = action.payload.highlight;
+      state.scrollToMessageBehavior = action.payload.behavior || 'smooth';
     },
     setScrollToMentionedMessage: function setScrollToMentionedMessage(state, action) {
       state.scrollToMentionedMessage = action.payload.isScrollToMentionedMessage;
@@ -10395,7 +10397,7 @@ var messageSlice = createSlice({
           return msg.tid === message.tid || msg.id === message.id;
         });
       });
-      if (direction === MESSAGE_LOAD_DIRECTION.PREV) {
+      if (direction === MESSAGE_LOAD_DIRECTION.PREV && newMessagesLength > 0) {
         if (currentMessagesLength + newMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM;
           setHasNextCached(true);
@@ -10417,7 +10419,7 @@ var messageSlice = createSlice({
           var _state$activeChannelM3;
           (_state$activeChannelM3 = state.activeChannelMessages).splice.apply(_state$activeChannelM3, [0, 0].concat(messagesIsNotIncludeInActiveChannelMessages));
         }
-      } else if (direction === 'next') {
+      } else if (direction === 'next' && newMessagesLength > 0) {
         if (currentMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM4;
           setHasPrevCached(true);
@@ -10606,8 +10608,8 @@ var messageSlice = createSlice({
       var _action$payload8 = action.payload,
         uploaded = _action$payload8.uploaded,
         total = _action$payload8.total,
-        attachmentId = _action$payload8.attachmentId,
-        progress = _action$payload8.progress;
+        attachmentId = _action$payload8.attachmentId;
+      var progress = uploaded / total;
       var updateData = {
         uploaded: uploaded,
         total: total,
@@ -11617,7 +11619,7 @@ function setMessageToEditAC(message) {
     message: message
   });
 }
-function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight) {
+function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior) {
   if (highlight === void 0) {
     highlight = true;
   }
@@ -11629,7 +11631,8 @@ function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliv
       messageId: messageId,
       limit: limit,
       withDeliveredMessages: withDeliveredMessages,
-      highlight: highlight
+      highlight: highlight,
+      behavior: behavior
     }
   };
 }
@@ -11643,13 +11646,14 @@ function getMessageAC(channelId, messageId, limit) {
     }
   };
 }
-function setScrollToMessagesAC(messageId, highlight) {
+function setScrollToMessagesAC(messageId, highlight, behavior) {
   if (highlight === void 0) {
     highlight = true;
   }
   return setScrollToMessage({
     messageId: messageId || '',
-    highlight: highlight
+    highlight: highlight,
+    behavior: behavior
   });
 }
 function setScrollToMentionedMessageAC(isScrollToMentionedMessage) {
@@ -17110,6 +17114,9 @@ var scrollToMessageSelector = function scrollToMessageSelector(store) {
 var scrollToMessageHighlightSelector = function scrollToMessageHighlightSelector(store) {
   return store.MessageReducer.scrollToMessageHighlight;
 };
+var scrollToMessageBehaviorSelector = function scrollToMessageBehaviorSelector(store) {
+  return store.MessageReducer.scrollToMessageBehavior;
+};
 var reactionsListSelector = function reactionsListSelector(store) {
   return store.MessageReducer.reactionsList;
 };
@@ -18503,7 +18510,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -18511,9 +18518,9 @@ function getMessagesQuery(action) {
         _context9.n = 1;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
-        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight;
+        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight, behavior = _action$payload.behavior;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 47;
+          _context9.n = 48;
           break;
         }
         SceytChatClient = getClient();
@@ -18541,6 +18548,7 @@ function getMessagesQuery(action) {
           break;
         }
         setHasPrevCached(false);
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         _context9.n = 3;
         return effects.call(messageQuery.loadPreviousMessageId, '0');
@@ -18597,13 +18605,13 @@ function getMessagesQuery(action) {
           break;
         }
         _context9.n = 12;
-        return effects.put(setScrollToMessagesAC(messageId, highlight));
+        return effects.put(setScrollToMessagesAC(messageId, highlight, behavior));
       case 12:
-        _context9.n = 45;
+        _context9.n = 46;
         break;
       case 13:
         if (!messageId) {
-          _context9.n = 25;
+          _context9.n = 26;
           break;
         }
         _allMessages = getAllMessages();
@@ -18612,7 +18620,7 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 15;
+          _context9.n = 16;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
@@ -18621,151 +18629,160 @@ function getMessagesQuery(action) {
       case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
+        _context9.n = 15;
+        return effects.put(setMessagesHasPrevAC(true));
+      case 15:
         _context9.n = 22;
         break;
-      case 15:
+      case 16:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 16;
+        _context9.n = 17;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 16:
+      case 17:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 19;
+          _context9.n = 20;
           break;
         }
-        messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.n = 17;
+        messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
+        _context9.n = 18;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 17:
+      case 18:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 18;
+        _context9.n = 19;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 18:
+      case 19:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 19:
-        log.info('result from server ....... ', result);
         _context9.n = 20;
-        return effects.put(setMessagesHasNextAC(true));
+        return effects.put(setMessagesHasPrevAC(_secondResult.hasNext));
       case 20:
+        log.info('result from server ....... ', result);
         _context9.n = 21;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 21:
+        setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
       case 22:
         _context9.n = 23;
-        return effects.put(setScrollToMessagesAC(messageId));
+        return effects.put(setMessagesHasNextAC(true));
       case 23:
         _context9.n = 24;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
       case 24:
-        _context9.n = 45;
-        break;
+        _context9.n = 25;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 25:
+        _context9.n = 46;
+        break;
+      case 26:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 38;
+          _context9.n = 39;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 31;
+          _context9.n = 32;
           break;
         }
-        _context9.n = 26;
+        _context9.n = 27;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 26:
+      case 27:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 30;
+          _context9.n = 31;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 27;
+        _context9.n = 28;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 27:
+      case 28:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 29;
+          _context9.n = 30;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 28;
+        _context9.n = 29;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 28:
+      case 29:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 30;
+        _context9.n = 31;
         break;
-      case 29:
-        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 30:
-        _context9.n = 34;
-        break;
+        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 31:
-        _context9.n = 32;
-        return effects.call(messageQuery.loadPrevious);
+        _context9.n = 35;
+        break;
       case 32:
+        _context9.n = 33;
+        return effects.call(messageQuery.loadPrevious);
+      case 33:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 34;
+          _context9.n = 35;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 33;
+        _context9.n = 34;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 33:
+      case 34:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 34:
-        setMessagesToMap(channel.id, result.messages);
-        _context9.n = 35;
-        return effects.put(setMessagesHasPrevAC(true));
       case 35:
         _context9.n = 36;
-        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
+        return effects.put(setMessagesHasPrevAC(true));
       case 36:
-        setAllMessages([].concat(result.messages));
         _context9.n = 37;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
+        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
       case 37:
-        _context9.n = 45;
-        break;
+        setMessagesToMap(channel.id, result.messages);
+        setAllMessages([].concat(result.messages));
+        _context9.n = 38;
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 38:
+        _context9.n = 46;
+        break;
+      case 39:
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 39;
+          _context9.n = 40;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 39;
+        _context9.n = 40;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 39:
+      case 40:
         log.info('load message from server');
-        _context9.n = 40;
+        _context9.n = 41;
         return effects.call(messageQuery.loadPrevious);
-      case 40:
+      case 41:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 42;
+          _context9.n = 43;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 41;
+        _context9.n = 42;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 41:
+      case 42:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 42:
+      case 43:
         updatedMessages = [];
         result.messages.forEach(function (msg) {
           var updatedMessage = updateMessageOnMap(channel.id, {
@@ -18777,18 +18794,18 @@ function getMessagesQuery(action) {
         });
         setMessagesToMap(channel.id, updatedMessages);
         setAllMessages([].concat(updatedMessages));
-        _context9.n = 43;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
-      case 43:
         _context9.n = 44;
-        return effects.put(setMessagesHasPrevAC(result.hasNext));
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return effects.put(setMessagesHasNextAC(false));
+        return effects.put(setMessagesHasPrevAC(result.hasNext));
       case 45:
+        _context9.n = 46;
+        return effects.put(setMessagesHasNextAC(false));
+      case 46:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18798,38 +18815,38 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 46;
+        _context9.n = 47;
         return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
-      case 46:
-        _context9.n = 48;
-        break;
       case 47:
+        _context9.n = 49;
+        break;
+      case 48:
         if (!channel.isMockChannel) {
-          _context9.n = 48;
+          _context9.n = 49;
           break;
         }
-        _context9.n = 48;
+        _context9.n = 49;
         return effects.put(setMessagesAC([]));
-      case 48:
-        _context9.n = 50;
-        break;
       case 49:
-        _context9.p = 49;
-        _t9 = _context9.v;
-        log.error('error in message query', _t9);
+        _context9.n = 51;
+        break;
       case 50:
         _context9.p = 50;
-        _context9.n = 51;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        _t9 = _context9.v;
+        log.error('error in message query', _t9);
       case 51:
-        return _context9.f(50);
+        _context9.p = 51;
+        _context9.n = 52;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 52:
+        return _context9.f(51);
+      case 53:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[0, 49, 50, 52]]);
+  }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function getMessageQuery(action) {
-  var payload, channelId, messageId, channel, messages, _t0;
+  var payload, channelId, messageId, channel, messages, fetchedMessage, _t0;
   return _regenerator().w(function (_context0) {
     while (1) switch (_context0.p = _context0.n) {
       case 0:
@@ -18837,34 +18854,53 @@ function getMessageQuery(action) {
         payload = action.payload;
         channelId = payload.channelId, messageId = payload.messageId;
         _context0.n = 1;
-        return effects.call(getChannelFromMap, channelId);
+        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:
-        messages = _context0.v;
         _context0.n = 3;
-        return effects.put(updateMessageAC(messageId, messages[0]));
+        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 = 6;
+          break;
+        }
+        _context0.n = 4;
+        return effects.put(updateMessageAC(messageId, fetchedMessage));
+      case 4:
         updateMessageOnMap(channel.id, {
           messageId: messageId,
-          params: messages[0]
+          params: fetchedMessage
         });
-        updateMessageOnAllMessages(messageId, messages[0]);
-        _context0.n = 4;
+        updateMessageOnAllMessages(messageId, fetchedMessage);
+        _context0.n = 5;
         return effects.put(setScrollToMessagesAC(messageId, false));
-      case 4:
+      case 5:
+        if (!(channel.lastMessage && channel.lastMessage.id === messageId)) {
+          _context0.n = 6;
+          break;
+        }
+        updateChannelLastMessageOnAllChannels(channel.id, fetchedMessage);
         _context0.n = 6;
+        return effects.put(updateChannelLastMessageAC(fetchedMessage, channel));
+      case 6:
+        _context0.n = 8;
         break;
-      case 5:
-        _context0.p = 5;
+      case 7:
+        _context0.p = 7;
         _t0 = _context0.v;
         log.error('error in message query', _t0);
-      case 6:
+      case 8:
         return _context0.a(2);
     }
-  }, _marked8$1, null, [[0, 5]]);
+  }, _marked8$1, null, [[0, 7]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t1;
@@ -18953,25 +18989,38 @@ function loadMoreMessages(action) {
         _context1.n = 11;
         return effects.put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 11:
-        _context1.n = 13;
+        _context1.n = 16;
         break;
       case 12:
         _context1.n = 13;
         return effects.put(addMessagesAC([], direction));
       case 13:
+        if (!(direction === MESSAGE_LOAD_DIRECTION.NEXT)) {
+          _context1.n = 15;
+          break;
+        }
         _context1.n = 14;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setMessagesHasNextAC(false));
       case 14:
         _context1.n = 16;
         break;
       case 15:
-        _context1.p = 15;
+        _context1.n = 16;
+        return effects.put(setMessagesHasPrevAC(false));
+      case 16:
+        _context1.n = 17;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 17:
+        _context1.n = 19;
+        break;
+      case 18:
+        _context1.p = 18;
         _t1 = _context1.v;
         log.error('error in load more messages', _t1);
-      case 16:
+      case 19:
         return _context1.a(2);
     }
-  }, _marked9$1, null, [[0, 15]]);
+  }, _marked9$1, null, [[0, 18]]);
 }
 function addReaction(action) {
   var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, _message2, reaction, channelUpdateParam, _t10;
@@ -19395,7 +19444,7 @@ function MessageSaga() {
         return effects.takeLatest(GET_MESSAGES, getMessagesQuery);
       case 7:
         _context18.n = 8;
-        return effects.takeLatest(GET_MESSAGE, getMessageQuery);
+        return effects.takeEvery(GET_MESSAGE, getMessageQuery);
       case 8:
         _context18.n = 9;
         return effects.takeLatest(GET_MESSAGES_ATTACHMENTS, getMessageAttachments);
@@ -21000,6 +21049,50 @@ function SvgAvatar(props) {
   })));
 }
+var ATTACHMENTS_CACHE = 'attachments-cache';
+var isBrowser = typeof window !== 'undefined';
+var cacheAvailable;
+if (isBrowser) {
+  cacheAvailable = 'caches' in window;
+} else {
+  cacheAvailable = 'caches' in global;
+}
+var setAttachmentToCache = function setAttachmentToCache(attachmentUrl, attachmentResponse) {
+  if (cacheAvailable) {
+    caches.open(ATTACHMENTS_CACHE).then(function (cache) {
+      try {
+        cache.put(attachmentUrl, attachmentResponse).then(function () {
+          log.info('Cache success');
+        })["catch"](function (e) {
+          log.info('Error on cache attachment ... ', e);
+          caches["delete"](attachmentUrl);
+        });
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    });
+  }
+};
+var getAttachmentUrlFromCache = function getAttachmentUrlFromCache(attachmentUrl) {
+  try {
+    if (!cacheAvailable) {
+      log.error('Cache is not available');
+      return Promise.reject(new Error('Cache not available'));
+    }
+    return Promise.resolve(caches.match(attachmentUrl)).then(function (response) {
+      if (response) {
+        return Promise.resolve(response.blob()).then(URL.createObjectURL);
+      } else {
+        log.info('The image or video is not cached', attachmentUrl);
+        return false;
+      }
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 var _templateObject$3, _templateObject2$3, _templateObject3$2, _templateObject4$2;
 var Avatar = function Avatar(_ref) {
   var image = _ref.image,
@@ -21016,6 +21109,9 @@ var Avatar = function Avatar(_ref) {
   var theme = useSelector(themeSelector);
   var _useColor = useColors(),
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
+  var _useState = React.useState(image || null),
+    resolvedImageSrc = _useState[0],
+    setResolvedImageSrc = _useState[1];
   var isDeletedUserAvatar = !image && !name;
   var avatarText = '';
   if (!image && name) {
@@ -21032,11 +21128,68 @@ var Avatar = function Avatar(_ref) {
       avatarText = _firstCharOfFirstWord ? String.fromCodePoint(_firstCharOfFirstWord) : '';
     }
   }
+  React.useEffect(function () {
+    var isCancelled = false;
+    if (!image) {
+      setResolvedImageSrc(null);
+      return;
+    }
+    var isHttpUrl = /^https?:\/\//i.test(image);
+    if (!isHttpUrl) {
+      setResolvedImageSrc(image);
+      return;
+    }
+    getAttachmentUrlFromCache(image).then(function (cachedUrl) {
+      try {
+        if (isCancelled) return Promise.resolve();
+        var _temp2 = function () {
+          if (cachedUrl) {
+            setResolvedImageSrc(cachedUrl);
+          } else {
+            var _temp = _catch(function () {
+              return Promise.resolve(fetch(image, {
+                credentials: 'same-origin'
+              })).then(function (response) {
+                setAttachmentToCache(image, response.clone());
+                setResolvedImageSrc(image);
+              });
+            }, function () {
+              setResolvedImageSrc(image);
+            });
+            if (_temp && _temp.then) return _temp.then(function () {});
+          }
+        }();
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    })["catch"](function () {
+      try {
+        if (isCancelled) return Promise.resolve();
+        var _temp3 = _catch(function () {
+          return Promise.resolve(fetch(image, {
+            credentials: 'same-origin'
+          })).then(function (response) {
+            setAttachmentToCache(image, response.clone());
+            setResolvedImageSrc(image);
+          });
+        }, function () {
+          setResolvedImageSrc(image);
+        });
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    });
+    return function () {
+      isCancelled = true;
+    };
+  }, [image]);
   return /*#__PURE__*/React__default.createElement(Container$1, {
     border: border,
     marginAuto: marginAuto,
     size: size,
-    isImage: !!(image || setDefaultAvatar),
+    isImage: !!(resolvedImageSrc || setDefaultAvatar),
     avatarName: name,
     textSize: textSize,
     onClick: handleAvatarClick,
@@ -21050,7 +21203,7 @@ var Avatar = function Avatar(_ref) {
   }) : (/*#__PURE__*/React__default.createElement("span", null, avatarText)) : (/*#__PURE__*/React__default.createElement(AvatarImage, {
     draggable: false,
     showImage: true,
-    src: image,
+    src: resolvedImageSrc || image,
     size: size,
     alt: ''
   })));
@@ -21164,7 +21317,10 @@ var Channel = function Channel(_ref3) {
     channelLastMessageTimeFontSize = _ref3.channelLastMessageTimeFontSize,
     channelLastMessageHeight = _ref3.channelLastMessageHeight,
     channelAvatarSize = _ref3.channelAvatarSize,
-    channelAvatarTextSize = _ref3.channelAvatarTextSize;
+    channelAvatarTextSize = _ref3.channelAvatarTextSize,
+    setSelectedChannel = _ref3.setSelectedChannel,
+    getCustomLatestMessage = _ref3.getCustomLatestMessage,
+    doNotShowMessageDeliveryTypes = _ref3.doNotShowMessageDeliveryTypes;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -21202,13 +21358,6 @@ var Channel = function Channel(_ref3) {
     statusWidth = _useState3[0],
     setStatusWidth = _useState3[1];
   var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? 'Me' : '');
-  var handleChangeActiveChannel = function handleChangeActiveChannel(chan) {
-    if (activeChannel.id !== chan.id) {
-      dispatch(sendTypingAC(false));
-      dispatch(clearMessagesAC());
-      dispatch(switchChannelActionAC(chan));
-    }
-  };
   var messageAuthorRef = React.useRef(null);
   var messageTimeAndStatusRef = React.useRef(null);
   useUpdatePresence(channel, true);
@@ -21293,6 +21442,43 @@ var Channel = function Channel(_ref3) {
       isDirectChannel: isDirectChannel
     });
   }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
+  var getCustomLatestMessageComponent = React.useCallback(function (_ref4) {
+    var lastMessage = _ref4.lastMessage,
+      typingOrRecording = _ref4.typingOrRecording,
+      draftMessageText = _ref4.draftMessageText,
+      textSecondary = _ref4.textSecondary,
+      channel = _ref4.channel,
+      channelLastMessageFontSize = _ref4.channelLastMessageFontSize,
+      channelLastMessageHeight = _ref4.channelLastMessageHeight,
+      isDirectChannel = _ref4.isDirectChannel,
+      textPrimary = _ref4.textPrimary,
+      messageAuthorRef = _ref4.messageAuthorRef,
+      contactsMap = _ref4.contactsMap,
+      getFromContacts = _ref4.getFromContacts,
+      warningColor = _ref4.warningColor,
+      user = _ref4.user,
+      MessageText = _ref4.MessageText;
+    return getCustomLatestMessage && getCustomLatestMessage({
+      lastMessage: lastMessage,
+      typingOrRecording: typingOrRecording,
+      draftMessageText: draftMessageText,
+      textSecondary: textSecondary,
+      channel: channel,
+      channelLastMessageFontSize: channelLastMessageFontSize,
+      channelLastMessageHeight: channelLastMessageHeight,
+      isDirectChannel: isDirectChannel,
+      textPrimary: textPrimary,
+      messageAuthorRef: messageAuthorRef,
+      contactsMap: contactsMap,
+      getFromContacts: getFromContacts,
+      warningColor: warningColor,
+      user: user,
+      MessageText: MessageText
+    });
+  }, [getCustomLatestMessage, lastMessage, typingOrRecording, draftMessageText, textSecondary, channel, channelLastMessageFontSize, channelLastMessageHeight, isDirectChannel, textPrimary, messageAuthorRef, contactsMap, getFromContacts, warningColor, user, MessageText]);
+  var isTypeValid = React.useCallback(function (type) {
+    return !doNotShowMessageDeliveryTypes.includes(type);
+  }, [doNotShowMessageDeliveryTypes]);
   return /*#__PURE__*/React__default.createElement(Container$2, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -21303,7 +21489,7 @@ var Channel = function Channel(_ref3) {
     selectedChannelBorderRadius: selectedChannelBorderRadius,
     channelsMargin: channelsMargin,
     onClick: function onClick() {
-      return handleChangeActiveChannel(channel);
+      return setSelectedChannel(channel);
     },
     hoverBackground: channelHoverBackground || backgroundHovered
   }, showAvatar && (/*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
@@ -21329,7 +21515,23 @@ var Channel = function Channel(_ref3) {
     avatarSize: channelAvatarSize
   }, /*#__PURE__*/React__default.createElement("h3", null, channel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap && contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? 'Me' : '')), channel.muted && (/*#__PURE__*/React__default.createElement(MutedIcon, {
     color: notificationsIsMutedIconColor || iconInactive
-  }, notificationsIsMutedIcon || /*#__PURE__*/React__default.createElement(SvgUnmuteNotifications, null))), (lastMessage || typingOrRecording.items.length > 0 || draftMessageText) && (/*#__PURE__*/React__default.createElement(LastMessage, {
+  }, notificationsIsMutedIcon || /*#__PURE__*/React__default.createElement(SvgUnmuteNotifications, null))), getCustomLatestMessage ? getCustomLatestMessageComponent({
+    lastMessage: lastMessage,
+    typingOrRecording: typingOrRecording,
+    draftMessageText: draftMessageText,
+    textSecondary: textSecondary,
+    channel: channel,
+    channelLastMessageFontSize: channelLastMessageFontSize || '14px',
+    channelLastMessageHeight: channelLastMessageHeight || '20px',
+    isDirectChannel: isDirectChannel,
+    textPrimary: textPrimary,
+    messageAuthorRef: messageAuthorRef,
+    contactsMap: contactsMap || {},
+    getFromContacts: getFromContacts,
+    warningColor: warningColor,
+    user: user,
+    MessageText: MessageText
+  }) : (lastMessage || typingOrRecording.items.length > 0 || draftMessageText) && (/*#__PURE__*/React__default.createElement(LastMessage, {
     color: textSecondary,
     markedAsUnread: !!(channel.unread || channel.newMessageCount && channel.newMessageCount > 0),
     unreadMentions: !!(channel.newMentionCount && channel.newMentionCount > 0),
@@ -21365,7 +21567,7 @@ var Channel = function Channel(_ref3) {
   }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
     color: iconInactive,
     ref: messageTimeAndStatusRef
-  }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && lastMessage.type !== 'system' && MessageStatusIcon({
+  }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && isTypeValid(lastMessage.type) && MessageStatusIcon({
     messageStatus: lastMessage.deliveryStatus,
     messageStatusDisplayingType: 'ticks',
     readIconColor: accentColor,
@@ -21432,9 +21634,9 @@ var Container$2 = styled__default.div(_templateObject6$1 || (_templateObject6$1
   return props.channelsMargin || '0 8px';
 }, function (props) {
   return props.selectedChannelBorderRadius || '12px';
-}, function (_ref4) {
-  var selectedChannel = _ref4.selectedChannel,
-    hoverBackground = _ref4.hoverBackground;
+}, function (_ref5) {
+  var selectedChannel = _ref5.selectedChannel,
+    hoverBackground = _ref5.hoverBackground;
   return !selectedChannel && "\n      background-color: " + hoverBackground + ";\n    ";
 }, UserStatus, function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
@@ -21449,9 +21651,9 @@ var DraftMessageText = styled__default.span(_templateObject8$1 || (_templateObje
 });
 var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
   return props.color;
-}, function (_ref5) {
-  var typing = _ref5.typing,
-    recording = _ref5.recording;
+}, function (_ref6) {
+  var typing = _ref6.typing,
+    recording = _ref6.recording;
   return (typing || recording) && "\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: calc(100% - " + (typing ? 62 : 76) + "px);\n  ";
 });
 var Points = styled__default.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
@@ -21508,7 +21710,7 @@ var MessageTextContainer = styled__default.div(_templateObject20$1 || (_template
 var _templateObject$5, _templateObject2$5;
 var SearchInputContainer = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  max-width: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n\n  & ", " {\n    ", ";\n  }\n"])), function (props) {
-  return props.inline && 'calc(100% - 24px)';
+  return props.width || props.inline && 'calc(100% - 24px)';
 }, function (props) {
   return !props.inline && '0 12px 16px';
 }, ClearTypedText, function (props) {
@@ -21535,14 +21737,16 @@ var ChannelSearch = function ChannelSearch(_ref) {
     borderRadius = _ref.borderRadius,
     searchInputBackgroundColor = _ref.searchInputBackgroundColor,
     searchInputTextColor = _ref.searchInputTextColor,
-    fontSize = _ref.fontSize;
+    fontSize = _ref.fontSize,
+    width = _ref.width;
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
     footnoteColor = _useColor[THEME_COLORS.TEXT_FOOTNOTE];
   return /*#__PURE__*/React__default.createElement(SearchInputContainer, {
-    inline: inline
+    inline: inline,
+    width: width
   }, /*#__PURE__*/React__default.createElement(StyledSearchSvg, {
     left: !inline ? '22px' : '',
     color: iconInactive
@@ -23323,6 +23527,7 @@ var ChannelList = function ChannelList(_ref) {
     searchInputTextColor = _ref.searchInputTextColor,
     _ref$searchChannelsPo = _ref.searchChannelsPosition,
     searchChannelsPosition = _ref$searchChannelsPo === void 0 ? 'bottom' : _ref$searchChannelsPo,
+    channelSearchWidth = _ref.channelSearchWidth,
     searchInputBorderRadius = _ref.searchInputBorderRadius,
     selectedChannelBorderRadius = _ref.selectedChannelBorderRadius,
     selectedChannelPaddings = _ref.selectedChannelPaddings,
@@ -23369,7 +23574,10 @@ var ChannelList = function ChannelList(_ref) {
     channelAvatarTextSize = _ref.channelAvatarTextSize,
     searchChannelInputFontSize = _ref.searchChannelInputFontSize,
     searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize,
-    searchChannelsPadding = _ref.searchChannelsPadding;
+    searchChannelsPadding = _ref.searchChannelsPadding,
+    getCustomLatestMessage = _ref.getCustomLatestMessage,
+    _ref$doNotShowMessage = _ref.doNotShowMessageDeliveryTypes,
+    doNotShowMessageDeliveryTypes = _ref$doNotShowMessage === void 0 ? ['system'] : _ref$doNotShowMessage;
   var _useColor = useColors(),
     background = _useColor[THEME_COLORS.BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -23437,11 +23645,6 @@ var ChannelList = function ChannelList(_ref) {
       handleLoadMoreChannels();
     }
   };
-  var handleChangeActiveChannel = function handleChangeActiveChannel(chan) {
-    if (activeChannel.id !== chan.id) {
-      dispatch(switchChannelActionAC(chan));
-    }
-  };
   var handleCrateChatWithContact = function handleCrateChatWithContact(contact) {
     if (contact) {
       var channelData = {
@@ -23597,6 +23800,13 @@ var ChannelList = function ChannelList(_ref) {
       setListWidthIsSet(false);
     }
   }, [channels]);
+  var setSelectedChannel = function setSelectedChannel(channel) {
+    if (activeChannel.id !== channel.id) {
+      dispatch(sendTypingAC(false));
+      dispatch(clearMessagesAC());
+      dispatch(switchChannelActionAC(channel));
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Container$7, {
     className: className,
     withCustomList: !!List,
@@ -23610,6 +23820,7 @@ var ChannelList = function ChannelList(_ref) {
     padding: searchChannelsPadding
   }, Profile, showSearch && searchChannelsPosition === 'inline' ? (/*#__PURE__*/React__default.createElement(ChannelSearch, {
     inline: true,
+    width: channelSearchWidth,
     borderRadius: searchInputBorderRadius,
     searchValue: searchValue,
     handleSearchValueChange: handleSearchValueChange,
@@ -23631,6 +23842,7 @@ var ChannelList = function ChannelList(_ref) {
   })))), showSearch && searchChannelsPosition === 'bottom' && (/*#__PURE__*/React__default.createElement(ChannelSearch, {
     searchValue: searchValue,
     theme: theme,
+    width: channelSearchWidth,
     borderRadius: searchInputBorderRadius,
     handleSearchValueChange: handleSearchValueChange,
     getMyChannels: getMyChannels,
@@ -23641,13 +23853,13 @@ var ChannelList = function ChannelList(_ref) {
     channels: channels,
     searchedChannels: searchedChannels,
     selectedChannel: activeChannel,
-    setSelectedChannel: handleChangeActiveChannel,
+    setSelectedChannel: setSelectedChannel,
     loadMoreChannels: handleLoadMoreChannels,
     searchValue: searchValue
   }, !searchValue ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, channels.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       channel: channel,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
       theme: theme,
@@ -23673,7 +23885,10 @@ var ChannelList = function ChannelList(_ref) {
       avatarBorderRadius: avatarBorderRadius,
       channel: channel,
       key: channel.id,
-      contactsMap: contactsMap
+      contactsMap: contactsMap,
+      setSelectedChannel: setSelectedChannel,
+      getCustomLatestMessage: getCustomLatestMessage,
+      doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
     }));
   }))) : channelsLoading === LOADING_STATE.LOADED && searchValue ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$cha = searchedChannels.chats_groups) !== null && _searchedChannels$cha !== void 0 && _searchedChannels$cha.length || searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$cha2 = searchedChannels.channels) !== null && _searchedChannels$cha2 !== void 0 && _searchedChannels$cha2.length || searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$con = searchedChannels.contacts) !== null && _searchedChannels$con !== void 0 && _searchedChannels$con.length ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(searchedChannels.chats_groups && searchedChannels.chats_groups.length) && (/*#__PURE__*/React__default.createElement(DirectChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
     color: textSecondary,
@@ -23681,7 +23896,7 @@ var ChannelList = function ChannelList(_ref) {
   }, "Chats & Groups"), searchedChannels.chats_groups.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       channel: channel,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
       theme: theme,
@@ -23707,7 +23922,10 @@ var ChannelList = function ChannelList(_ref) {
       avatarBorderRadius: avatarBorderRadius,
       channel: channel,
       key: channel.id,
-      contactsMap: contactsMap
+      contactsMap: contactsMap,
+      setSelectedChannel: setSelectedChannel,
+      getCustomLatestMessage: getCustomLatestMessage,
+      doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
     }));
   }))), !!(searchedChannels.contacts && searchedChannels.contacts.length) && (/*#__PURE__*/React__default.createElement(GroupChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
     color: textSecondary,
@@ -23716,7 +23934,7 @@ var ChannelList = function ChannelList(_ref) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       contact: contact,
       createChatWithContact: handleCrateChatWithContact,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: contact.id
     })) : (/*#__PURE__*/React__default.createElement(ContactItem, {
       theme: theme,
@@ -23747,7 +23965,7 @@ var ChannelList = function ChannelList(_ref) {
   }, "Channels"), searchedChannels.channels.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       channel: channel,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
       theme: theme,
@@ -23773,7 +23991,10 @@ var ChannelList = function ChannelList(_ref) {
       avatarBorderRadius: avatarBorderRadius,
       channel: channel,
       key: channel.id,
-      contactsMap: contactsMap
+      contactsMap: contactsMap,
+      setSelectedChannel: setSelectedChannel,
+      getCustomLatestMessage: getCustomLatestMessage,
+      doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
     }));
   }))))) : (/*#__PURE__*/React__default.createElement(NoData, {
     color: textSecondary,
@@ -23794,7 +24015,7 @@ var ChannelList = function ChannelList(_ref) {
   }, channels.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       channel: channel,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
       theme: theme,
@@ -23820,7 +24041,10 @@ var ChannelList = function ChannelList(_ref) {
       avatarBorderRadius: avatarBorderRadius,
       channel: channel,
       key: channel.id,
-      contactsMap: contactsMap
+      contactsMap: contactsMap,
+      setSelectedChannel: setSelectedChannel,
+      getCustomLatestMessage: getCustomLatestMessage,
+      doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
     }));
   }))), !!searchValue && (channelsLoading === LOADING_STATE.LOADED ? !((_searchedChannels$cha4 = searchedChannels.chats_groups) !== null && _searchedChannels$cha4 !== void 0 && _searchedChannels$cha4.length) && !((_searchedChannels$cha5 = searchedChannels.chats_groups) !== null && _searchedChannels$cha5 !== void 0 && _searchedChannels$cha5.length) && !((_searchedChannels$cha6 = searchedChannels.channels) !== null && _searchedChannels$cha6 !== void 0 && _searchedChannels$cha6.length) ? (/*#__PURE__*/React__default.createElement(NoData, {
     color: textSecondary,
@@ -23831,7 +24055,7 @@ var ChannelList = function ChannelList(_ref) {
   }, "Chats & Groups"), searchedChannels.chats_groups.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       channel: channel,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
       theme: theme,
@@ -23857,7 +24081,10 @@ var ChannelList = function ChannelList(_ref) {
       avatarBorderRadius: avatarBorderRadius,
       channel: channel,
       contactsMap: contactsMap,
-      key: channel.id
+      key: channel.id,
+      setSelectedChannel: setSelectedChannel,
+      getCustomLatestMessage: getCustomLatestMessage,
+      doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
     }));
   }))), !!searchedChannels.channels.length && (/*#__PURE__*/React__default.createElement(GroupChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
     color: textSecondary,
@@ -23865,7 +24092,7 @@ var ChannelList = function ChannelList(_ref) {
   }, "Channels"), searchedChannels.channels.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
       channel: channel,
-      setSelectedChannel: handleChangeActiveChannel,
+      setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
       theme: theme,
@@ -23891,7 +24118,10 @@ var ChannelList = function ChannelList(_ref) {
       avatarBorderRadius: avatarBorderRadius,
       channel: channel,
       key: channel.id,
-      contactsMap: contactsMap
+      contactsMap: contactsMap,
+      setSelectedChannel: setSelectedChannel,
+      getCustomLatestMessage: getCustomLatestMessage,
+      doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
     }));
   }))))) : (/*#__PURE__*/React__default.createElement(LoadingWrapper, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
     color: textFootnote
@@ -23930,7 +24160,7 @@ var NoData = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _ta
   return props.color;
 });
 var LoadingWrapper = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
-var ChannelListHeader = styled__default.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: ", ";\n  padding-left: 22px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
+var ChannelListHeader = styled__default.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
   return props.maxWidth ? props.maxWidth + "px" : 'inherit';
 }, function (props) {
   return props.padding || '12px';
@@ -24544,50 +24774,6 @@ function SvgDeleteChannel(props) {
   })));
 }
-var ATTACHMENTS_CACHE = 'attachments-cache';
-var isBrowser = typeof window !== 'undefined';
-var cacheAvailable;
-if (isBrowser) {
-  cacheAvailable = 'caches' in window;
-} else {
-  cacheAvailable = 'caches' in global;
-}
-var setAttachmentToCache = function setAttachmentToCache(attachmentUrl, attachmentResponse) {
-  if (cacheAvailable) {
-    caches.open(ATTACHMENTS_CACHE).then(function (cache) {
-      try {
-        cache.put(attachmentUrl, attachmentResponse).then(function () {
-          log.info('Cache success');
-        })["catch"](function (e) {
-          log.info('Error on cache attachment ... ', e);
-          caches["delete"](attachmentUrl);
-        });
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    });
-  }
-};
-var getAttachmentUrlFromCache = function getAttachmentUrlFromCache(attachmentUrl) {
-  try {
-    if (!cacheAvailable) {
-      log.error('Cache is not available');
-      return Promise.reject(new Error('Cache not available'));
-    }
-    return Promise.resolve(caches.match(attachmentUrl)).then(function (response) {
-      if (response) {
-        return Promise.resolve(response.blob()).then(URL.createObjectURL);
-      } else {
-        log.info('The image or video is not cached', attachmentUrl);
-        return false;
-      }
-    });
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
 var _path$A;
 function _extends$B() {
   return _extends$B = Object.assign ? Object.assign.bind() : function (n) {
@@ -26051,6 +26237,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;
@@ -26069,7 +26256,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 () {
@@ -31185,7 +31384,7 @@ var validateUrl = function validateUrl(url) {
   }
 };
 var OGMetadata = function OGMetadata(_ref) {
-  var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
+  var _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og8, _metadata$og8$image, _metadata$og8$image$, _metadata$og9, _metadata$og0, _metadata$og0$favicon, _metadata$og1, _metadata$og1$favicon, _metadata$og10, _metadata$og11, _metadata$og12;
   var attachments = _ref.attachments,
     state = _ref.state;
   var _useState = React.useState(null),
@@ -31197,6 +31396,15 @@ var OGMetadata = function OGMetadata(_ref) {
   var _useState3 = React.useState(true),
     faviconLoadError = _useState3[0],
     setFaviconLoadError = _useState3[1];
+  var _useState4 = React.useState(false),
+    imageLoaded = _useState4[0],
+    setImageLoaded = _useState4[1];
+  var _useState5 = React.useState(0),
+    imageWidth = _useState5[0],
+    setImageWidth = _useState5[1];
+  var _useState6 = React.useState(0),
+    imageHeight = _useState6[0],
+    setImageHeight = _useState6[1];
   var attachment = React.useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -31211,7 +31419,7 @@ var OGMetadata = function OGMetadata(_ref) {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url.replace('https://', '').replace('http://', ''), metadata)).then(function () {
+                return Promise.resolve(storeMetadata(url, metadata)).then(function () {
                   setMetadata(metadata);
                 });
               });
@@ -31234,7 +31442,7 @@ var OGMetadata = function OGMetadata(_ref) {
     if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
-        getMetadata(url.replace('https://', '').replace('http://', '')).then(function (cachedMetadata) {
+        getMetadata(url).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
               setMetadata(cachedMetadata);
@@ -31263,6 +31471,29 @@ var OGMetadata = function OGMetadata(_ref) {
     var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
     return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
   }, [state, metadata]);
+  React.useEffect(function () {
+    var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
+    if (metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url) {
+      var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
+      var image = new Image();
+      image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url;
+      image.onload = function () {
+        var imageWidth = image.width;
+        var imageHeight = image.height;
+        setImageWidth(imageWidth);
+        setImageHeight(imageHeight);
+        setImageLoadError(false);
+        setImageLoaded(true);
+      };
+      image.onerror = function () {
+        setImageLoadError(true);
+        setImageLoaded(true);
+      };
+    }
+  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
+  var calculatedImageHeight = React.useMemo(function () {
+    return imageHeight / (imageWidth / 400);
+  }, [imageWidth, imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -31270,43 +31501,69 @@ var OGMetadata = function OGMetadata(_ref) {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: !!showOGMetadata && !imageLoadError
-  }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url ? (/*#__PURE__*/React__default.createElement(Img, {
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
+    showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
+    width: 400,
+    height: calculatedImageHeight
+  }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
+    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
     alt: 'OG metadata image',
-    onLoad: function onLoad() {
-      return setImageLoadError(false);
-    },
-    onError: function onError() {
-      return setImageLoadError(true);
-    }
-  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
+    width: 400,
+    height: calculatedImageHeight
+  })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
+    maxWidth: 400
+  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
+    maxWidth: 400
+  }, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
+    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
     onLoad: function onLoad() {
       return setFaviconLoadError(false);
     },
     onError: function onError() {
       return setFaviconLoadError(true);
     }
-  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
+  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? /*#__PURE__*/React__default.createElement(Desc, {
+    maxWidth: 400
+  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description) : null)) : null));
 };
 var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var showOGMetadata = _ref2.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 200px;\n  width: 100%;\n  margin: 0 auto;\n  padding: ", ";\n  height: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref3) {
-  var showOGMetadata = _ref3.showOGMetadata;
-  return showOGMetadata ? '0.3rem' : '0';
+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 ? "\n    max-width: " + (width + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
 }, function (_ref4) {
-  var showOGMetadata = _ref4.showOGMetadata;
-  return showOGMetadata ? '200px' : '0';
+  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';
+});
+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 && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+});
+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 && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+});
+var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
+  var width = _ref0.width;
+  return width && "\n    max-width: " + (width + "px") + ";\n    min-width: " + (width + "px") + ";\n    width: " + (width + "px") + ";\n  ";
+}, function (_ref1) {
+  var height = _ref1.height;
+  return height && "\n    max-height: " + (height + "px") + ";\n    min-height: " + (height + "px") + ";\n    height: " + (height + "px") + ";\n  ";
 });
-var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  width: 80%;\n  padding: 0.5rem;\n  margin: 0;\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"])));
-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"])));
-var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n"])));
-var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])));
-var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])));
+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"])));
 var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
 var MessageBody = function MessageBody(_ref) {
@@ -32646,14 +32903,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,
@@ -32863,6 +33112,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);
@@ -32903,35 +33153,40 @@ var MessageList = function MessageList(_ref2) {
     setShouldPreserveScroll = _useState0[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var messageTopDateRef = React.useRef(null);
+  var _useState1 = React.useState(''),
+    topDateLabel = _useState1[0],
+    setTopDateLabel = _useState1[1];
   var scrollRef = React.useRef(null);
+  var loadFromServerRef = React.useRef(false);
+  var loadDirectionRef = React.useRef('');
+  var nextDisableRef = React.useRef(false);
+  var prevDisableRef = React.useRef(false);
+  var scrollToBottomRef = React.useRef(false);
+  var shouldLoadMessagesRef = React.useRef('');
+  var loadingRef = React.useRef(false);
+  var messagesIndexMapRef = React.useRef({});
+  var scrollRafRef = React.useRef(null);
+  var loadingMessagesTimeoutRef = React.useRef(null);
   var renderTopDate = function renderTopDate() {
-    var dateLabels = document.querySelectorAll('.divider');
-    var messageTopDate = messageTopDateRef.current;
+    var container = scrollRef.current;
+    if (!container) return;
+    var dateLabels = container.querySelectorAll('.divider');
     var text = '';
     for (var i = dateLabels.length - 1; i >= 0; i--) {
-      var _dateLabel$firstChild;
       var dateLabel = dateLabels[i];
-      var span = dateLabel === null || dateLabel === void 0 ? void 0 : (_dateLabel$firstChild = dateLabel.firstChild) === null || _dateLabel$firstChild === void 0 ? void 0 : _dateLabel$firstChild.firstChild;
-      if (!text && scrollRef.current.scrollTop > dateLabel.offsetTop) {
-        text = span && span.innerText;
-        span.style.display = 'none';
-      } else {
-        span.style.display = 'block';
+      if (!text && container.scrollTop > dateLabel.offsetTop) {
+        var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
+        text = span ? span.innerText || '' : '';
       }
     }
-    if (text) {
-      messageTopDate.innerText = text;
-      messageTopDate.style.display = 'inline';
-    } else {
-      messageTopDate.style.display = 'none';
-    }
+    setTopDateLabel(text);
   };
-  var handleMessagesListScroll = React.useCallback(function (event) {
+  var handleMessagesListScroll = React.useCallback(function () {
     try {
+      var target = scrollRef.current;
+      if (!target) return Promise.resolve();
       if (scrollToMentionedMessage) {
-        var _target = event.target;
-        if (_target.scrollTop <= -50 || channel.lastMessage.id !== messages[messages.length - 1].id) {
+        if (target.scrollTop <= -50 || channel.lastMessage.id !== messages[messages.length - 1].id) {
           dispatch(showScrollToNewMessageButtonAC(true));
         } else {
           dispatch(showScrollToNewMessageButtonAC(false));
@@ -32944,7 +33199,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;
@@ -32959,51 +33213,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) {
@@ -33017,8 +33288,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 {
@@ -33039,10 +33310,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));
       }
     }
@@ -33073,39 +33344,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);
@@ -33118,34 +33392,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);
@@ -33157,21 +33404,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');
         }
@@ -33181,9 +33428,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));
@@ -33199,15 +33446,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);
       }
     }
@@ -33225,11 +33472,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) {
@@ -33252,9 +33506,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 () {
@@ -33269,7 +33523,7 @@ var MessageList = function MessageList(_ref2) {
         setUnreadMessageId('');
       }
     }
-  }, [messages]);
+  }, [messages, hiddenMessagesProperties, user === null || user === void 0 ? void 0 : user.id]);
   React.useEffect(function () {
     if (scrollRef.current) {
       var isAtBottom = scrollRef.current.scrollTop > -50;
@@ -33278,35 +33532,40 @@ var MessageList = function MessageList(_ref2) {
         setShouldPreserveScroll(true);
       }
     }
-    if (loading) {
-      if (loadDirection !== 'next') {
+    if (loadingRef.current) {
+      if (loadDirectionRef.current !== 'next') {
         var lastVisibleMessage = document.getElementById(lastVisibleMessageId);
         if (lastVisibleMessage) {
           scrollRef.current.style.scrollBehavior = 'inherit';
           scrollRef.current.scrollTop = lastVisibleMessage.offsetTop;
           scrollRef.current.style.scrollBehavior = 'smooth';
         }
-        if (loadFromServer) {
-          setTimeout(function () {
-            loading = false;
-            loadFromServer = false;
-            nextDisable = false;
-            if (shouldLoadMessages === 'prev' && messagesIndexMap[lastVisibleMessageId] < 15) {
+        if (loadFromServerRef.current) {
+          var timeout = setTimeout(function () {
+            loadingRef.current = false;
+            loadFromServerRef.current = false;
+            nextDisableRef.current = false;
+            var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+            if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
               handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
             }
-            if (shouldLoadMessages === 'next' && messagesIndexMap[lastVisibleMessageId] > messages.length - 15) {
+            if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
               handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
             }
           }, 50);
+          if (loadingMessagesTimeoutRef.current) {
+            clearTimeout(loadingMessagesTimeoutRef.current);
+          }
+          loadingMessagesTimeoutRef.current = timeout;
         } else {
-          loading = false;
-          if (shouldLoadMessages === 'prev') {
+          loadingRef.current = false;
+          if (shouldLoadMessagesRef.current === 'prev') {
             handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
-            shouldLoadMessages = '';
+            shouldLoadMessagesRef.current = '';
           }
-          if (shouldLoadMessages === 'next') {
+          if (shouldLoadMessagesRef.current === 'next') {
             handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
-            shouldLoadMessages = '';
+            shouldLoadMessagesRef.current = '';
           }
         }
       } else {
@@ -33316,22 +33575,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 () {
@@ -33344,13 +33607,43 @@ var MessageList = function MessageList(_ref2) {
         setPreviousScrollTop(0);
       });
     }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
   }, [messages]);
+  React.useEffect(function () {
+    if (messagesLoading === LOADING_STATE.LOADED) {
+      var timeout = setTimeout(function () {
+        loadingRef.current = false;
+        loadFromServerRef.current = false;
+        nextDisableRef.current = false;
+        var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+        if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
+        }
+        if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
+        }
+      }, 50);
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+      loadingMessagesTimeoutRef.current = timeout;
+    }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
+  }, [messagesLoading, messages, lastVisibleMessageId]);
   React.useEffect(function () {
     log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      loading = false;
-      prevDisable = false;
-      nextDisable = false;
+      loadingRef.current = false;
+      prevDisableRef.current = false;
+      nextDisableRef.current = false;
       clearMessagesMap();
       removeAllMessages();
       if (channel.id) {
@@ -33359,7 +33652,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';
       }
@@ -33372,7 +33666,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,
@@ -33415,14 +33716,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);
     },
@@ -33441,8 +33740,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,
@@ -37381,7 +37682,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       if (attachments.length) {
         var videoAttachment = false;
         attachments.forEach(function (att) {
-          if (att.type === 'video' || att.data.type.split('/')[0] === 'video') {
+          if ((att.type === 'video' || att.data.type.split('/')[0] === 'video') && att.type !== 'file') {
             videoAttachment = true;
             if (!readyVideoAttachments[att.tid]) {
               setSendMessageIsActive(false);
@@ -40518,7 +40819,7 @@ var Details = function Details(_ref) {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight
-  }, showPhoneNumber ? "+" + (directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.id) : hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
+  }, showPhoneNumber && directChannelUser !== null && directChannelUser !== void 0 && directChannelUser.id ? "+" + (directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.id) : hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight
@@ -40972,10 +41273,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   };
   var handleScrollToLastMessage = function handleScrollToLastMessage(messageId) {
     try {
-      dispatch(scrollToNewMessageAC(true, false, false));
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
       }) >= 10) {
+        dispatch(scrollToNewMessageAC(true, false, false));
         dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {