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

package/index.modern.js

@@ -9070,7 +9070,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) {
@@ -10319,6 +10319,7 @@ var initialState$1 = {
   attachmentsUploadingState: {},
   scrollToMessage: null,
   scrollToMessageHighlight: true,
+  scrollToMessageBehavior: 'smooth',
   scrollToMentionedMessage: false,
   reactionsList: [],
   reactionsHasNext: true,
@@ -10345,6 +10346,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;
@@ -10374,7 +10376,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);
@@ -10396,7 +10398,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);
@@ -10585,8 +10587,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,
@@ -11596,7 +11598,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;
   }
@@ -11608,7 +11610,8 @@ function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliv
       messageId: messageId,
       limit: limit,
       withDeliveredMessages: withDeliveredMessages,
-      highlight: highlight
+      highlight: highlight,
+      behavior: behavior
     }
   };
 }
@@ -11622,13 +11625,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) {
@@ -17089,6 +17093,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;
 };
@@ -18482,7 +18489,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:
@@ -18490,9 +18497,9 @@ function getMessagesQuery(action) {
         _context9.n = 1;
         return 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();
@@ -18520,6 +18527,7 @@ function getMessagesQuery(action) {
           break;
         }
         setHasPrevCached(false);
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         _context9.n = 3;
         return call(messageQuery.loadPreviousMessageId, '0');
@@ -18576,13 +18584,13 @@ function getMessagesQuery(action) {
           break;
         }
         _context9.n = 12;
-        return put(setScrollToMessagesAC(messageId, highlight));
+        return 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();
@@ -18591,7 +18599,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);
@@ -18600,151 +18608,160 @@ function getMessagesQuery(action) {
       case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
+        _context9.n = 15;
+        return 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 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 call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 17:
+      case 18:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 18;
+        _context9.n = 19;
         return 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 put(setMessagesHasNextAC(true));
+        return put(setMessagesHasPrevAC(_secondResult.hasNext));
       case 20:
+        log.info('result from server ....... ', result);
         _context9.n = 21;
         return 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 put(setScrollToMessagesAC(messageId));
+        return put(setMessagesHasNextAC(true));
       case 23:
         _context9.n = 24;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return put(setScrollToMessagesAC(messageId, true, behavior));
       case 24:
-        _context9.n = 45;
-        break;
+        _context9.n = 25;
+        return 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 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 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 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 call(messageQuery.loadPrevious);
+        _context9.n = 35;
+        break;
       case 32:
+        _context9.n = 33;
+        return 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 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 put(setMessagesHasPrevAC(true));
       case 35:
         _context9.n = 36;
-        return put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
+        return put(setMessagesHasPrevAC(true));
       case 36:
-        setAllMessages([].concat(result.messages));
         _context9.n = 37;
-        return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
+        return 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 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 put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 39:
+      case 40:
         log.info('load message from server');
-        _context9.n = 40;
+        _context9.n = 41;
         return 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 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, {
@@ -18756,18 +18773,18 @@ function getMessagesQuery(action) {
         });
         setMessagesToMap(channel.id, updatedMessages);
         setAllMessages([].concat(updatedMessages));
-        _context9.n = 43;
-        return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
-      case 43:
         _context9.n = 44;
-        return put(setMessagesHasPrevAC(result.hasNext));
+        return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return put(setMessagesHasNextAC(false));
+        return put(setMessagesHasPrevAC(result.hasNext));
       case 45:
+        _context9.n = 46;
+        return put(setMessagesHasNextAC(false));
+      case 46:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18777,38 +18794,38 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 46;
+        _context9.n = 47;
         return 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 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 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 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:
@@ -18816,34 +18833,53 @@ function getMessageQuery(action) {
         payload = action.payload;
         channelId = payload.channelId, messageId = payload.messageId;
         _context0.n = 1;
-        return call(getChannelFromMap, channelId);
+        return call(getChannelFromAllChannels, channelId);
       case 1:
         channel = _context0.v;
-        _context0.n = 2;
-        return call(channel.getMessagesById, [messageId]);
+        if (channel) {
+          _context0.n = 2;
+          break;
+        }
+        return _context0.a(2);
       case 2:
-        messages = _context0.v;
         _context0.n = 3;
-        return put(updateMessageAC(messageId, messages[0]));
+        return 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 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 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 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;
@@ -18932,25 +18968,38 @@ function loadMoreMessages(action) {
         _context1.n = 11;
         return put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 11:
-        _context1.n = 13;
+        _context1.n = 16;
         break;
       case 12:
         _context1.n = 13;
         return put(addMessagesAC([], direction));
       case 13:
+        if (!(direction === MESSAGE_LOAD_DIRECTION.NEXT)) {
+          _context1.n = 15;
+          break;
+        }
         _context1.n = 14;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return put(setMessagesHasNextAC(false));
       case 14:
         _context1.n = 16;
         break;
       case 15:
-        _context1.p = 15;
+        _context1.n = 16;
+        return put(setMessagesHasPrevAC(false));
+      case 16:
+        _context1.n = 17;
+        return 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;
@@ -19374,7 +19423,7 @@ function MessageSaga() {
         return takeLatest(GET_MESSAGES, getMessagesQuery);
       case 7:
         _context18.n = 8;
-        return takeLatest(GET_MESSAGE, getMessageQuery);
+        return takeEvery(GET_MESSAGE, getMessageQuery);
       case 8:
         _context18.n = 9;
         return takeLatest(GET_MESSAGES_ATTACHMENTS, getMessageAttachments);
@@ -20979,6 +21028,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,
@@ -20995,6 +21088,9 @@ var Avatar = function Avatar(_ref) {
   var theme = useSelector(themeSelector);
   var _useColor = useColors(),
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
+  var _useState = useState(image || null),
+    resolvedImageSrc = _useState[0],
+    setResolvedImageSrc = _useState[1];
   var isDeletedUserAvatar = !image && !name;
   var avatarText = '';
   if (!image && name) {
@@ -21011,11 +21107,68 @@ var Avatar = function Avatar(_ref) {
       avatarText = _firstCharOfFirstWord ? String.fromCodePoint(_firstCharOfFirstWord) : '';
     }
   }
+  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,
@@ -21029,7 +21182,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: ''
   })));
@@ -21143,7 +21296,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],
@@ -21181,13 +21337,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 = useRef(null);
   var messageTimeAndStatusRef = useRef(null);
   useUpdatePresence(channel, true);
@@ -21272,6 +21421,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 = 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 = useCallback(function (type) {
+    return !doNotShowMessageDeliveryTypes.includes(type);
+  }, [doNotShowMessageDeliveryTypes]);
   return /*#__PURE__*/React__default.createElement(Container$2, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -21282,7 +21468,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, {
@@ -21308,7 +21494,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),
@@ -21344,7 +21546,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,
@@ -21411,9 +21613,9 @@ var Container$2 = styled.div(_templateObject6$1 || (_templateObject6$1 = _tagged
   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;
@@ -21428,9 +21630,9 @@ var DraftMessageText = styled.span(_templateObject8$1 || (_templateObject8$1 = _
 });
 var LastMessageAuthor = styled.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.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
@@ -21487,7 +21689,7 @@ var MessageTextContainer = styled.div(_templateObject20$1 || (_templateObject20$
 
 var _templateObject$5, _templateObject2$5;
 var SearchInputContainer = styled.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) {
@@ -21514,14 +21716,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
@@ -23302,6 +23506,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,
@@ -23348,7 +23553,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],
@@ -23416,11 +23624,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 = {
@@ -23576,6 +23779,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,
@@ -23589,6 +23799,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,
@@ -23610,6 +23821,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,
@@ -23620,13 +23832,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,
@@ -23652,7 +23864,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,
@@ -23660,7 +23875,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,
@@ -23686,7 +23901,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,
@@ -23695,7 +23913,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,
@@ -23726,7 +23944,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,
@@ -23752,7 +23970,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,
@@ -23773,7 +23994,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,
@@ -23799,7 +24020,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,
@@ -23810,7 +24034,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,
@@ -23836,7 +24060,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,
@@ -23844,7 +24071,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,
@@ -23870,7 +24097,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
@@ -23909,7 +24139,7 @@ var NoData = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTempl
   return props.color;
 });
 var LoadingWrapper = styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
-var ChannelListHeader = styled.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.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';
@@ -24523,50 +24753,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) {
@@ -26030,6 +26216,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;
@@ -26048,7 +26235,19 @@ var Message = function Message(_ref) {
   };
   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 () {
@@ -31164,7 +31363,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 = useState(null),
@@ -31176,6 +31375,15 @@ var OGMetadata = function OGMetadata(_ref) {
   var _useState3 = useState(true),
     faviconLoadError = _useState3[0],
     setFaviconLoadError = _useState3[1];
+  var _useState4 = useState(false),
+    imageLoaded = _useState4[0],
+    setImageLoaded = _useState4[1];
+  var _useState5 = useState(0),
+    imageWidth = _useState5[0],
+    setImageWidth = _useState5[1];
+  var _useState6 = useState(0),
+    imageHeight = _useState6[0],
+    setImageHeight = _useState6[1];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -31190,7 +31398,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);
                 });
               });
@@ -31213,7 +31421,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);
@@ -31242,6 +31450,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]);
+  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 = useMemo(function () {
+    return imageHeight / (imageWidth / 400);
+  }, [imageWidth, imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -31249,43 +31480,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.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.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.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.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  transition: all 0.2s ease;\n"])));
+var Url = styled.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.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 OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  width: 80%;\n  padding: 0.5rem;\n  margin: 0;\n"])));
-var Url = styled.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.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.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n"])));
-var Img = styled.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.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])));
+var Desc = styled.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.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 Favicon = styled.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) {
@@ -32625,14 +32882,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,
@@ -32842,6 +33091,7 @@ var MessageList = function MessageList(_ref2) {
   var scrollToMentionedMessage = useSelector(scrollToMentionedMessageSelector, shallowEqual);
   var scrollToRepliedMessage = useSelector(scrollToMessageSelector, shallowEqual);
   var scrollToMessageHighlight = useSelector(scrollToMessageHighlightSelector, shallowEqual);
+  var scrollToMessageBehavior = useSelector(scrollToMessageBehaviorSelector, shallowEqual);
   var browserTabIsActive = useSelector(browserTabIsActiveSelector, shallowEqual);
   var hasNextMessages = useSelector(messagesHasNextSelector, shallowEqual);
   var hasPrevMessages = useSelector(messagesHasPrevSelector, shallowEqual);
@@ -32882,35 +33132,41 @@ var MessageList = function MessageList(_ref2) {
     setShouldPreserveScroll = _useState0[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var messageTopDateRef = useRef(null);
+  var _useState1 = useState(''),
+    topDateLabel = _useState1[0],
+    setTopDateLabel = _useState1[1];
   var scrollRef = useRef(null);
+  var loadFromServerRef = useRef(false);
+  var loadDirectionRef = useRef('');
+  var nextDisableRef = useRef(false);
+  var prevDisableRef = useRef(false);
+  var scrollToBottomRef = useRef(false);
+  var shouldLoadMessagesRef = useRef('');
+  var loadingRef = useRef(false);
+  var messagesIndexMapRef = useRef({});
+  var scrollRafRef = useRef(null);
+  var loadingMessagesTimeoutRef = 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 - 28) {
+        var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
+        text = span ? span.innerText || '' : '';
+        setTopDateLabel(text);
+        break;
       }
     }
-    if (text) {
-      messageTopDate.innerText = text;
-      messageTopDate.style.display = 'inline';
-    } else {
-      messageTopDate.style.display = 'none';
-    }
   };
-  var handleMessagesListScroll = useCallback(function (event) {
+  var handleMessagesListScroll = 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));
@@ -32923,7 +33179,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;
@@ -32938,51 +33193,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 = useCallback(function () {
+    if (scrollRafRef.current !== null) return;
+    scrollRafRef.current = window.requestAnimationFrame(function () {
+      scrollRafRef.current = null;
+      handleMessagesListScroll();
+    });
+  }, [handleMessagesListScroll]);
+  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) {
@@ -32996,8 +33268,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 {
@@ -33018,10 +33290,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));
       }
     }
@@ -33052,39 +33324,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);
@@ -33097,34 +33372,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);
@@ -33136,21 +33384,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]);
   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');
         }
@@ -33160,9 +33408,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));
@@ -33178,15 +33426,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);
       }
     }
@@ -33204,11 +33452,18 @@ var MessageList = function MessageList(_ref2) {
   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) {
@@ -33231,9 +33486,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]);
   useEffect(function () {
@@ -33248,7 +33503,7 @@ var MessageList = function MessageList(_ref2) {
         setUnreadMessageId('');
       }
     }
-  }, [messages]);
+  }, [messages, hiddenMessagesProperties, user === null || user === void 0 ? void 0 : user.id]);
   useEffect(function () {
     if (scrollRef.current) {
       var isAtBottom = scrollRef.current.scrollTop > -50;
@@ -33257,35 +33512,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 {
@@ -33295,22 +33555,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 () {
@@ -33323,13 +33587,43 @@ var MessageList = function MessageList(_ref2) {
         setPreviousScrollTop(0);
       });
     }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
   }, [messages]);
+  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]);
   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) {
@@ -33338,7 +33632,8 @@ var MessageList = function MessageList(_ref2) {
     }
   }, [connectionStatus]);
   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';
       }
@@ -33351,7 +33646,14 @@ var MessageList = function MessageList(_ref2) {
         setUnreadScrollTo(false);
       }
     }
-  });
+  }, [channel.id, channel.newMessageCount, channel.lastDisplayedMessageId]);
+  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,
@@ -33386,7 +33688,7 @@ var MessageList = function MessageList(_ref2) {
     backgroundColor: surface1,
     draggable: true,
     iconColor: accentColor
-  }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null)), "Drag & drop to send as media")))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showTopFixedDate && (/*#__PURE__*/React__default.createElement(MessageTopDate, {
+  }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null)), "Drag & drop to send as media")))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showTopFixedDate && topDateLabel && (/*#__PURE__*/React__default.createElement(MessageTopDate, {
     visible: showTopDate,
     dateDividerFontSize: dateDividerFontSize,
     dateDividerTextColor: dateDividerTextColor || textOnPrimary,
@@ -33394,14 +33696,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);
     },
@@ -33420,8 +33720,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,
@@ -37360,7 +37662,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);
@@ -40497,7 +40799,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
@@ -40951,10 +41253,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) {