sceyt-chat-react-uikit 1.8.4-beta.5 → 1.8.4-beta.6

package/index.js

@@ -10722,9 +10722,10 @@ function addMessagesAC(messages, direction) {
     direction: direction
   });
 }
-function setMessagesAC(messages) {
+function setMessagesAC(messages, channelId) {
   return setMessages({
-    messages: messages
+    messages: messages,
+    channelId: channelId
   });
 }
 function addReactionAC(channelId, messageId, key, score, reason, enforceUnique) {
@@ -11294,13 +11295,18 @@ var setAllMessages = function setAllMessages(messages) {
   activeChannelAllMessages = messages;
 };
 var addAllMessages = function addAllMessages(messages, direction) {
+  var toAdd = messages.filter(function (m) {
+    return !activeChannelAllMessages.some(function (e) {
+      return e.tid === m.tid || m.id && e.id === m.id;
+    });
+  });
   if (direction === MESSAGE_LOAD_DIRECTION.PREV) {
-    activeChannelAllMessages = [].concat(messages, activeChannelAllMessages);
+    activeChannelAllMessages = [].concat(toAdd, activeChannelAllMessages);
     if (activeChannelAllMessages.length > MESSAGES_MAX_PAGE_COUNT) {
       setHasNextCached(true);
     }
   } else {
-    activeChannelAllMessages = [].concat(activeChannelAllMessages, messages);
+    activeChannelAllMessages = [].concat(activeChannelAllMessages, toAdd);
     if (activeChannelAllMessages.length > MESSAGES_MAX_PAGE_COUNT) {
       setHasPrevCached(true);
     }
@@ -11868,12 +11874,32 @@ var messageSlice = createSlice({
       state.unreadScrollTo = action.payload.state;
     },
     setMessages: function setMessages(state, action) {
-      state.activeChannelMessages = action.payload.messages;
-    },
-    addMessages: function addMessages(state, action) {
       var _action$payload = action.payload,
         messages = _action$payload.messages,
-        direction = _action$payload.direction;
+        channelId = _action$payload.channelId;
+      var pendingForChannel = channelId ? state.pendingMessagesMap[channelId] : undefined;
+      if (pendingForChannel !== null && pendingForChannel !== void 0 && pendingForChannel.length) {
+        var merged = [].concat(messages);
+        var _loop = function _loop() {
+          var pending = _step.value;
+          if (!merged.some(function (m) {
+            return m.tid === pending.tid || pending.id && m.id === pending.id;
+          })) {
+            merged.push(pending);
+          }
+        };
+        for (var _iterator = _createForOfIteratorHelperLoose(pendingForChannel), _step; !(_step = _iterator()).done;) {
+          _loop();
+        }
+        state.activeChannelMessages = merged;
+      } else {
+        state.activeChannelMessages = messages;
+      }
+    },
+    addMessages: function addMessages(state, action) {
+      var _action$payload2 = action.payload,
+        messages = _action$payload2.messages,
+        direction = _action$payload2.direction;
       var newMessagesLength = messages.length;
       var currentMessagesLength = state.activeChannelMessages.length;
       var messagesIsNotIncludeInActiveChannelMessages = messages.filter(function (message) {
@@ -11916,10 +11942,10 @@ var messageSlice = createSlice({
       }
     },
     updateMessagesStatus: function updateMessagesStatus(state, action) {
-      var _action$payload2 = action.payload,
-        name = _action$payload2.name,
-        markersMap = _action$payload2.markersMap,
-        isOwnMarker = _action$payload2.isOwnMarker;
+      var _action$payload3 = action.payload,
+        name = _action$payload3.name,
+        markersMap = _action$payload3.markersMap,
+        isOwnMarker = _action$payload3.isOwnMarker;
       var markerName = name;
       for (var index = 0; index < state.activeChannelMessages.length; index++) {
         if (!markersMap[state.activeChannelMessages[index].id]) {
@@ -11932,15 +11958,17 @@ var messageSlice = createSlice({
         }
       }
       state.activeChannelMessages.sort(function (a, b) {
-        return !(a !== null && a !== void 0 && a.id) ? 1 : (a === null || a === void 0 ? void 0 : a.id) < (b === null || b === void 0 ? void 0 : b.id) ? -1 : 1;
+        if (!(a !== null && a !== void 0 && a.id)) return 1;
+        if (!(b !== null && b !== void 0 && b.id)) return -1;
+        return BigInt(a.id) < BigInt(b.id) ? -1 : 1;
       });
     },
     updateMessage: function updateMessage(state, action) {
-      var _action$payload3 = action.payload,
-        messageId = _action$payload3.messageId,
-        params = _action$payload3.params,
-        addIfNotExists = _action$payload3.addIfNotExists,
-        voteDetails = _action$payload3.voteDetails;
+      var _action$payload4 = action.payload,
+        messageId = _action$payload4.messageId,
+        params = _action$payload4.params,
+        addIfNotExists = _action$payload4.addIfNotExists,
+        voteDetails = _action$payload4.voteDetails;
       var messageFound = false;
       state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
         if (message.tid === messageId || message.id === messageId) {
@@ -11982,20 +12010,22 @@ var messageSlice = createSlice({
         state.activeChannelMessages.push(params);
       }
       state.activeChannelMessages.sort(function (a, b) {
-        return !(a !== null && a !== void 0 && a.id) ? 1 : (a === null || a === void 0 ? void 0 : a.id) < (b === null || b === void 0 ? void 0 : b.id) ? -1 : 1;
+        if (!(a !== null && a !== void 0 && a.id)) return 1;
+        if (!(b !== null && b !== void 0 && b.id)) return -1;
+        return BigInt(a.id) < BigInt(b.id) ? -1 : 1;
       });
     },
     updateMessageAttachment: function updateMessageAttachment(state, action) {
-      var _action$payload4 = action.payload,
-        url = _action$payload4.url,
-        attachmentUrl = _action$payload4.attachmentUrl;
+      var _action$payload5 = action.payload,
+        url = _action$payload5.url,
+        attachmentUrl = _action$payload5.attachmentUrl;
       state.attachmentUpdatedMap[url] = attachmentUrl;
     },
     addReactionToMessage: function addReactionToMessage(state, action) {
-      var _action$payload5 = action.payload,
-        message = _action$payload5.message,
-        reaction = _action$payload5.reaction,
-        isSelf = _action$payload5.isSelf;
+      var _action$payload6 = action.payload,
+        message = _action$payload6.message,
+        reaction = _action$payload6.reaction,
+        isSelf = _action$payload6.isSelf;
       state.activeChannelMessages = state.activeChannelMessages.map(function (msg) {
         if (msg.id === message.id) {
           var slfReactions = [].concat(msg.userReactions);
@@ -12015,10 +12045,10 @@ var messageSlice = createSlice({
       });
     },
     deleteReactionFromMessage: function deleteReactionFromMessage(state, action) {
-      var _action$payload6 = action.payload,
-        reaction = _action$payload6.reaction,
-        message = _action$payload6.message,
-        isSelf = _action$payload6.isSelf;
+      var _action$payload7 = action.payload,
+        reaction = _action$payload7.reaction,
+        message = _action$payload7.message,
+        isSelf = _action$payload7.isSelf;
       state.activeChannelMessages = state.activeChannelMessages.map(function (msg) {
         if (msg.id === message.id) {
           var userReactions = msg.userReactions;
@@ -12067,9 +12097,9 @@ var messageSlice = createSlice({
       (_state$activeTabAttac = state.activeTabAttachments).push.apply(_state$activeTabAttac, action.payload.attachments);
     },
     addAttachmentsForPopup: function addAttachmentsForPopup(state, action) {
-      var _action$payload7 = action.payload,
-        attachments = _action$payload7.attachments,
-        direction = _action$payload7.direction;
+      var _action$payload8 = action.payload,
+        attachments = _action$payload8.attachments,
+        direction = _action$payload8.direction;
       if (direction === 'prev') {
         var _state$attachmentsFor;
         (_state$attachmentsFor = state.attachmentsForPopup).unshift.apply(_state$attachmentsFor, attachments);
@@ -12090,10 +12120,10 @@ var messageSlice = createSlice({
       }
     },
     updateUploadProgress: function updateUploadProgress(state, action) {
-      var _action$payload8 = action.payload,
-        uploaded = _action$payload8.uploaded,
-        total = _action$payload8.total,
-        attachmentId = _action$payload8.attachmentId;
+      var _action$payload9 = action.payload,
+        uploaded = _action$payload9.uploaded,
+        total = _action$payload9.total,
+        attachmentId = _action$payload9.attachmentId;
       var progress = uploaded / total;
       var updateData = {
         uploaded: uploaded,
@@ -12125,23 +12155,23 @@ var messageSlice = createSlice({
       state.messageForReply = action.payload.message;
     },
     uploadAttachmentCompilation: function uploadAttachmentCompilation(state, action) {
-      var _action$payload9 = action.payload,
-        attachmentUploadingState = _action$payload9.attachmentUploadingState,
-        attachmentId = _action$payload9.attachmentId;
+      var _action$payload0 = action.payload,
+        attachmentUploadingState = _action$payload0.attachmentUploadingState,
+        attachmentId = _action$payload0.attachmentId;
       state.attachmentsUploadingState[attachmentId] = attachmentUploadingState;
     },
     setReactionsList: function setReactionsList(state, action) {
-      var _action$payload0 = action.payload,
-        reactions = _action$payload0.reactions,
-        hasNext = _action$payload0.hasNext;
+      var _action$payload1 = action.payload,
+        reactions = _action$payload1.reactions,
+        hasNext = _action$payload1.hasNext;
       state.reactionsHasNext = hasNext;
       state.reactionsList = [].concat(reactions);
     },
     addReactionsToList: function addReactionsToList(state, action) {
       var _state$reactionsList;
-      var _action$payload1 = action.payload,
-        reactions = _action$payload1.reactions,
-        hasNext = _action$payload1.hasNext;
+      var _action$payload10 = action.payload,
+        reactions = _action$payload10.reactions,
+        hasNext = _action$payload10.hasNext;
       state.reactionsHasNext = hasNext;
       (_state$reactionsList = state.reactionsList).push.apply(_state$reactionsList, reactions);
     },
@@ -12185,18 +12215,18 @@ var messageSlice = createSlice({
       state.selectedMessagesMap = null;
     },
     setOGMetadata: function setOGMetadata(state, action) {
-      var _action$payload10 = action.payload,
-        url = _action$payload10.url,
-        metadata = _action$payload10.metadata;
+      var _action$payload11 = action.payload,
+        url = _action$payload11.url,
+        metadata = _action$payload11.metadata;
       if (!state.oGMetadata) {
         state.oGMetadata = {};
       }
       state.oGMetadata[url] = metadata;
     },
     updateOGMetadata: function updateOGMetadata(state, action) {
-      var _action$payload11 = action.payload,
-        url = _action$payload11.url,
-        metadata = _action$payload11.metadata;
+      var _action$payload12 = action.payload,
+        url = _action$payload12.url,
+        metadata = _action$payload12.metadata;
       if (metadata) {
         if (!state.oGMetadata) {
           state.oGMetadata = {};
@@ -12206,19 +12236,19 @@ var messageSlice = createSlice({
       }
     },
     setMessageMarkers: function setMessageMarkers(state, action) {
-      var _action$payload12 = action.payload,
-        channelId = _action$payload12.channelId,
-        messageId = _action$payload12.messageId,
-        messageMarkers = _action$payload12.messageMarkers,
-        deliveryStatuses = _action$payload12.deliveryStatuses;
+      var _action$payload13 = action.payload,
+        channelId = _action$payload13.channelId,
+        messageId = _action$payload13.messageId,
+        messageMarkers = _action$payload13.messageMarkers,
+        deliveryStatuses = _action$payload13.deliveryStatuses;
       if (!state.messageMarkers[channelId]) {
         state.messageMarkers[channelId] = {};
       }
       if (!state.messageMarkers[channelId][messageId]) {
         state.messageMarkers[channelId][messageId] = {};
       }
-      for (var _iterator = _createForOfIteratorHelperLoose(deliveryStatuses), _step; !(_step = _iterator()).done;) {
-        var deliveryStatus = _step.value;
+      for (var _iterator2 = _createForOfIteratorHelperLoose(deliveryStatuses), _step2; !(_step2 = _iterator2()).done;) {
+        var deliveryStatus = _step2.value;
         if (!state.messageMarkers[channelId][messageId][deliveryStatus]) {
           state.messageMarkers[channelId][messageId][deliveryStatus] = [];
         }
@@ -12227,14 +12257,14 @@ var messageSlice = createSlice({
     },
     updateMessagesMarkers: function updateMessagesMarkers(state, action) {
       var _marker$user;
-      var _action$payload13 = action.payload,
-        channelId = _action$payload13.channelId,
-        deliveryStatus = _action$payload13.deliveryStatus,
-        marker = _action$payload13.marker;
+      var _action$payload14 = action.payload,
+        channelId = _action$payload14.channelId,
+        deliveryStatus = _action$payload14.deliveryStatus,
+        marker = _action$payload14.marker;
       var userId = (_marker$user = marker.user) === null || _marker$user === void 0 ? void 0 : _marker$user.id;
       var messageIds = marker.messageIds;
-      for (var _iterator2 = _createForOfIteratorHelperLoose(messageIds), _step2; !(_step2 = _iterator2()).done;) {
-        var messageId = _step2.value;
+      for (var _iterator3 = _createForOfIteratorHelperLoose(messageIds), _step3; !(_step3 = _iterator3()).done;) {
+        var messageId = _step3.value;
         if (!state.messageMarkers[channelId]) {
           state.messageMarkers[channelId] = {};
         }
@@ -12269,11 +12299,11 @@ var messageSlice = createSlice({
       state.messagesMarkersLoadingState = action.payload.state;
     },
     setPollVotesList: function setPollVotesList(state, action) {
-      var _action$payload14 = action.payload,
-        pollId = _action$payload14.pollId,
-        optionId = _action$payload14.optionId,
-        votes = _action$payload14.votes,
-        hasNext = _action$payload14.hasNext;
+      var _action$payload15 = action.payload,
+        pollId = _action$payload15.pollId,
+        optionId = _action$payload15.optionId,
+        votes = _action$payload15.votes,
+        hasNext = _action$payload15.hasNext;
       var key = pollId + "_" + optionId;
       state.pollVotesHasMore[key] = hasNext;
       var sortedVotes = [].concat(votes).sort(function (a, b) {
@@ -12282,12 +12312,12 @@ var messageSlice = createSlice({
       state.pollVotesList[key] = sortedVotes;
     },
     addPollVotesToList: function addPollVotesToList(state, action) {
-      var _action$payload15 = action.payload,
-        pollId = _action$payload15.pollId,
-        optionId = _action$payload15.optionId,
-        votes = _action$payload15.votes,
-        hasNext = _action$payload15.hasNext,
-        previousVotes = _action$payload15.previousVotes;
+      var _action$payload16 = action.payload,
+        pollId = _action$payload16.pollId,
+        optionId = _action$payload16.optionId,
+        votes = _action$payload16.votes,
+        hasNext = _action$payload16.hasNext,
+        previousVotes = _action$payload16.previousVotes;
       var key = pollId + "_" + optionId;
       state.pollVotesHasMore[key] = hasNext;
       var existing = state.pollVotesList[key];
@@ -12308,11 +12338,11 @@ var messageSlice = createSlice({
     },
     deletePollVotesFromList: function deletePollVotesFromList(state, action) {
       var _state$pollVotesList$;
-      var _action$payload16 = action.payload,
-        pollId = _action$payload16.pollId,
-        optionId = _action$payload16.optionId,
-        votes = _action$payload16.votes,
-        messageId = _action$payload16.messageId;
+      var _action$payload17 = action.payload,
+        pollId = _action$payload17.pollId,
+        optionId = _action$payload17.optionId,
+        votes = _action$payload17.votes,
+        messageId = _action$payload17.messageId;
       var key = pollId + "_" + optionId;
       var existing = state.pollVotesList[key];
       if (!existing || !(existing !== null && existing !== void 0 && existing.length)) {
@@ -12328,10 +12358,10 @@ var messageSlice = createSlice({
       }
     },
     setPollVotesLoadingState: function setPollVotesLoadingState(state, action) {
-      var _action$payload17 = action.payload,
-        pollId = _action$payload17.pollId,
-        optionId = _action$payload17.optionId,
-        loadingState = _action$payload17.loadingState;
+      var _action$payload18 = action.payload,
+        pollId = _action$payload18.pollId,
+        optionId = _action$payload18.optionId,
+        loadingState = _action$payload18.loadingState;
       var key = pollId + "_" + optionId;
       state.pollVotesLoadingState[key] = loadingState;
     },
@@ -12339,10 +12369,10 @@ var messageSlice = createSlice({
       state.pollVotesInitialCount = action.payload.initialCount;
     },
     removePendingPollAction: function removePendingPollAction(state, action) {
-      var _action$payload18 = action.payload,
-        messageId = _action$payload18.messageId,
-        actionType = _action$payload18.actionType,
-        optionId = _action$payload18.optionId;
+      var _action$payload19 = action.payload,
+        messageId = _action$payload19.messageId,
+        actionType = _action$payload19.actionType,
+        optionId = _action$payload19.optionId;
       if (!state.pendingPollActions[messageId]) {
         return;
       }
@@ -12354,18 +12384,18 @@ var messageSlice = createSlice({
       }
     },
     setPendingPollActionsMap: function setPendingPollActionsMap(state, action) {
-      var _action$payload19 = action.payload,
-        messageId = _action$payload19.messageId,
-        event = _action$payload19.event;
+      var _action$payload20 = action.payload,
+        messageId = _action$payload20.messageId,
+        event = _action$payload20.event;
       if (!state.pendingPollActions[messageId]) {
         state.pendingPollActions[messageId] = [];
       }
       state.pendingPollActions[messageId] = [].concat(state.pendingPollActions[messageId], [event]);
     },
     updatePendingPollAction: function updatePendingPollAction(state, action) {
-      var _action$payload20 = action.payload,
-        messageId = _action$payload20.messageId,
-        message = _action$payload20.message;
+      var _action$payload21 = action.payload,
+        messageId = _action$payload21.messageId,
+        message = _action$payload21.message;
       if (!state.pendingPollActions[messageId]) {
         return;
       }
@@ -12377,9 +12407,9 @@ var messageSlice = createSlice({
       });
     },
     setPendingMessage: function setPendingMessage(state, action) {
-      var _action$payload21 = action.payload,
-        channelId = _action$payload21.channelId,
-        message = _action$payload21.message;
+      var _action$payload22 = action.payload,
+        channelId = _action$payload22.channelId,
+        message = _action$payload22.message;
       if (!state.pendingMessagesMap[channelId]) {
         state.pendingMessagesMap[channelId] = [];
       }
@@ -12391,9 +12421,9 @@ var messageSlice = createSlice({
       }
     },
     removePendingMessage: function removePendingMessage(state, action) {
-      var _action$payload22 = action.payload,
-        channelId = _action$payload22.channelId,
-        messageId = _action$payload22.messageId;
+      var _action$payload23 = action.payload,
+        channelId = _action$payload23.channelId,
+        messageId = _action$payload23.messageId;
       if (state.pendingMessagesMap[channelId]) {
         state.pendingMessagesMap[channelId] = state.pendingMessagesMap[channelId].filter(function (msg) {
           return !(msg.id === messageId || msg.tid === messageId);
@@ -12404,10 +12434,10 @@ var messageSlice = createSlice({
       }
     },
     updatePendingMessage: function updatePendingMessage(state, action) {
-      var _action$payload23 = action.payload,
-        channelId = _action$payload23.channelId,
-        messageId = _action$payload23.messageId,
-        updatedMessage = _action$payload23.updatedMessage;
+      var _action$payload24 = action.payload,
+        channelId = _action$payload24.channelId,
+        messageId = _action$payload24.messageId,
+        updatedMessage = _action$payload24.updatedMessage;
       if (state.pendingMessagesMap[channelId]) {
         state.pendingMessagesMap[channelId] = state.pendingMessagesMap[channelId].map(function (msg) {
           if (msg.id === messageId || msg.tid === messageId) {
@@ -20672,13 +20702,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
                 return {};
               }
             }();
-            var attachmentMeta = attachment.cachedUrl ? attachment.metadata : JSON.stringify(_extends({}, parsedAttachmentMeta, thumbnailMetas && thumbnailMetas.thumbnail && _extends({
-              tmb: thumbnailMetas.thumbnail,
-              szw: thumbnailMetas.imageWidth,
-              szh: thumbnailMetas.imageHeight
-            }, thumbnailMetas.duration ? {
-              dur: thumbnailMetas.duration
-            } : {})));
+            var attachmentMeta = attachment.cachedUrl ? attachment.metadata : JSON.stringify(_extends({}, parsedAttachmentMeta));
             var attachmentBuilder = channel.createAttachmentBuilder(uriLocal, attachment.type);
             var attachmentToSend = attachmentBuilder.setName(attachment.name).setMetadata(attachmentMeta).setFileSize(fileSize || attachment.size).setUpload(false).create();
             if (attachment.tid) {
@@ -20686,113 +20710,101 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
             }
             return attachmentToSend;
           }
-          var thumbnailMetas;
           var _temp9 = function () {
             if (!attachment.cachedUrl && attachment.url.type.split('/')[0] === 'image') {
-              return Promise.resolve(createImageThumbnail(null, filePath, attachment.type === 'file' ? 50 : undefined, attachment.type === 'file' ? 50 : undefined)).then(function (_createImageThumbnail) {
-                thumbnailMetas = _createImageThumbnail;
-                return _catch(function () {
-                  var _temp2 = function () {
-                    if (blobLocal && blobLocal.type.startsWith('image/')) {
-                      var file = attachment.url instanceof File ? attachment.url : new File([attachment.url], attachment.name || 'image', {
-                        type: attachment.url.type || blobLocal.type
-                      });
-                      var _calculateRenderedIma = calculateRenderedImageWidth(thumbnailMetas.imageWidth || 1280, thumbnailMetas.imageHeight || 1080),
-                        newWidth = _calculateRenderedIma[0],
-                        newHeight = _calculateRenderedIma[1];
-                      return Promise.resolve(resizeImageWithPica(file, newWidth, newHeight, 1)).then(function (_ref) {
-                        var resizedBlob = _ref.blob;
-                        var _temp = function () {
-                          if (resizedBlob) {
-                            var resizedResponse = new Response(resizedBlob, {
+              return _catch(function () {
+                var _temp2 = function () {
+                  if (blobLocal && blobLocal.type.startsWith('image/')) {
+                    var file = attachment.url instanceof File ? attachment.url : new File([attachment.url], attachment.name || 'image', {
+                      type: attachment.url.type || blobLocal.type
+                    });
+                    var _calculateRenderedIma = calculateRenderedImageWidth((attachment === null || attachment === void 0 ? void 0 : attachment.metadata.szw) || 1280, (attachment === null || attachment === void 0 ? void 0 : attachment.metadata.szh) || 1080),
+                      newWidth = _calculateRenderedIma[0],
+                      newHeight = _calculateRenderedIma[1];
+                    return Promise.resolve(resizeImageWithPica(file, newWidth, newHeight, 1)).then(function (_ref) {
+                      var resizedBlob = _ref.blob;
+                      var _temp = function () {
+                        if (resizedBlob) {
+                          var resizedResponse = new Response(resizedBlob, {
+                            headers: {
+                              'Content-Type': resizedBlob.type || blobLocal.type
+                            }
+                          });
+                          return Promise.resolve(setAttachmentToCache(uriLocal, resizedResponse)).then(function () {
+                            filePath = URL.createObjectURL(resizedBlob);
+                            store.dispatch(setUpdateMessageAttachmentAC(uriLocal, filePath));
+                            message.attachments[0] = _extends({}, message.attachments[0], {
+                              attachmentUrl: filePath
+                            });
+                            setAttachmentToCache(uriLocal + "_original_image_url", new Response(blobLocal, {
                               headers: {
-                                'Content-Type': resizedBlob.type || blobLocal.type
+                                'Content-Type': blobLocal.type
                               }
-                            });
-                            return Promise.resolve(setAttachmentToCache(uriLocal, resizedResponse)).then(function () {
-                              filePath = URL.createObjectURL(resizedBlob);
-                              store.dispatch(setUpdateMessageAttachmentAC(uriLocal, filePath));
-                              message.attachments[0] = _extends({}, message.attachments[0], {
-                                attachmentUrl: filePath
-                              });
-                              setAttachmentToCache(uriLocal + "_original_image_url", new Response(blobLocal, {
-                                headers: {
-                                  'Content-Type': blobLocal.type
-                                }
-                              }));
-                              var originalImageUrl = URL.createObjectURL(blobLocal);
-                              store.dispatch(setUpdateMessageAttachmentAC(uriLocal + "_original_image_url", originalImageUrl));
-                            });
-                          }
-                        }();
-                        if (_temp && _temp.then) return _temp.then(function () {});
-                      });
-                    }
-                  }();
-                  if (_temp2 && _temp2.then) return _temp2.then(function () {});
-                }, function (error) {
-                  log.error('Error resizing and caching image during upload:', error);
-                });
+                            }));
+                            var originalImageUrl = URL.createObjectURL(blobLocal);
+                            store.dispatch(setUpdateMessageAttachmentAC(uriLocal + "_original_image_url", originalImageUrl));
+                          });
+                        }
+                      }();
+                      if (_temp && _temp.then) return _temp.then(function () {});
+                    });
+                  }
+                }();
+                if (_temp2 && _temp2.then) return _temp2.then(function () {});
+              }, function (error) {
+                log.error('Error resizing and caching image during upload:', error);
               });
             } else {
               var _temp11 = function () {
                 if (!attachment.cachedUrl && attachment.url.type.split('/')[0] === 'video') {
-                  return Promise.resolve(getFrame(filePath)).then(function (meta) {
-                    thumbnailMetas = {
-                      thumbnail: meta.thumb,
-                      imageWidth: meta.width,
-                      imageHeight: meta.height,
-                      duration: meta.duration
-                    };
-                    var _temp7 = function () {
-                      if (blobLocal) {
-                        var _calculateRenderedIma2 = calculateRenderedImageWidth(thumbnailMetas.imageWidth || 1280, thumbnailMetas.imageHeight || 1080),
-                          newWidth = _calculateRenderedIma2[0],
-                          newHeight = _calculateRenderedIma2[1];
-                        return Promise.resolve(getVideoFirstFrame(blobLocal, newWidth, newHeight, 0.8)).then(function (result) {
-                          var _temp6 = function () {
-                            if (result) {
-                              var frameBlobUrl = result.frameBlobUrl,
-                                blob = result.blob;
-                              var _temp5 = function () {
-                                if (frameBlobUrl && blob) {
-                                  var _temp4 = function _temp4() {
-                                    return Promise.resolve(setAttachmentToCache(uriLocal, response)).then(function () {
-                                      store.dispatch(setUpdateMessageAttachmentAC(uriLocal, frameBlobUrl));
-                                      message.attachments[0] = _extends({}, message.attachments[0], {
-                                        attachmentUrl: frameBlobUrl
-                                      });
+                  var _temp7 = function () {
+                    if (blobLocal) {
+                      var _calculateRenderedIma2 = calculateRenderedImageWidth((attachment === null || attachment === void 0 ? void 0 : attachment.metadata.szw) || 1280, (attachment === null || attachment === void 0 ? void 0 : attachment.metadata.szh) || 1080),
+                        newWidth = _calculateRenderedIma2[0],
+                        newHeight = _calculateRenderedIma2[1];
+                      return Promise.resolve(getVideoFirstFrame(blobLocal, newWidth, newHeight, 0.8)).then(function (result) {
+                        var _temp6 = function () {
+                          if (result) {
+                            var frameBlobUrl = result.frameBlobUrl,
+                              blob = result.blob;
+                            var _temp5 = function () {
+                              if (frameBlobUrl && blob) {
+                                var _temp4 = function _temp4() {
+                                  return Promise.resolve(setAttachmentToCache(uriLocal, response)).then(function () {
+                                    store.dispatch(setUpdateMessageAttachmentAC(uriLocal, frameBlobUrl));
+                                    message.attachments[0] = _extends({}, message.attachments[0], {
+                                      attachmentUrl: frameBlobUrl
                                     });
-                                  };
-                                  var response = new Response(blob, {
-                                    headers: {
-                                      'Content-Type': blob.type
-                                    }
                                   });
-                                  var _temp3 = function () {
-                                    if (blobLocal) {
-                                      return Promise.resolve(setAttachmentToCache(uriLocal + "_original_video_url", new Response(blobLocal, {
-                                        headers: {
-                                          'Content-Type': blobLocal.type
-                                        }
-                                      }))).then(function () {
-                                        var originalVideoUrl = URL.createObjectURL(blobLocal);
-                                        store.dispatch(setUpdateMessageAttachmentAC(uriLocal + "_original_video_url", originalVideoUrl));
-                                      });
-                                    }
-                                  }();
-                                  return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
-                                }
-                              }();
-                              if (_temp5 && _temp5.then) return _temp5.then(function () {});
-                            }
-                          }();
-                          if (_temp6 && _temp6.then) return _temp6.then(function () {});
-                        });
-                      }
-                    }();
-                    if (_temp7 && _temp7.then) return _temp7.then(function () {});
-                  });
+                                };
+                                var response = new Response(blob, {
+                                  headers: {
+                                    'Content-Type': blob.type
+                                  }
+                                });
+                                var _temp3 = function () {
+                                  if (blobLocal) {
+                                    return Promise.resolve(setAttachmentToCache(uriLocal + "_original_video_url", new Response(blobLocal, {
+                                      headers: {
+                                        'Content-Type': blobLocal.type
+                                      }
+                                    }))).then(function () {
+                                      var originalVideoUrl = URL.createObjectURL(blobLocal);
+                                      store.dispatch(setUpdateMessageAttachmentAC(uriLocal + "_original_video_url", originalVideoUrl));
+                                    });
+                                  }
+                                }();
+                                return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+                              }
+                            }();
+                            if (_temp5 && _temp5.then) return _temp5.then(function () {});
+                          }
+                        }();
+                        if (_temp6 && _temp6.then) return _temp6.then(function () {});
+                      });
+                    }
+                  }();
+                  if (_temp7 && _temp7.then) return _temp7.then(function () {});
                 }
               }();
               if (_temp11 && _temp11.then) return _temp11.then(function () {});
@@ -20866,13 +20878,13 @@ var updateMessage$1 = function updateMessage(actionType, pending, channelId, scr
     isNotShowOwnMessageForward = false;
   }
   return /*#__PURE__*/_regenerator().m(function _callee() {
-    var activeChannelId, channel, messages, _channel$lastMessage2, repliedMessage, scrollRef, _channel$lastMessage3;
+    var activeChannelId, channel, messages, lastMsgIdx, _channel$lastMessage2;
     return _regenerator().w(function (_context) {
       while (1) switch (_context.n) {
         case 0:
           activeChannelId = getActiveChannelId();
           if (!(actionType !== RESEND_MESSAGE)) {
-            _context.n = 7;
+            _context.n = 6;
             break;
           }
           if (activeChannelId === channelId) {
@@ -20893,7 +20905,7 @@ var updateMessage$1 = function updateMessage(actionType, pending, channelId, scr
           return effects.call(addPendingMessage, message, pending, channelId);
         case 2:
           if (!scrollToNewMessage) {
-            _context.n = 7;
+            _context.n = 6;
             break;
           }
           _context.n = 3;
@@ -20901,39 +20913,27 @@ var updateMessage$1 = function updateMessage(actionType, pending, channelId, scr
         case 3:
           channel = _context.v;
           messages = store.getState().MessageReducer.activeChannelMessages;
-          if (!(messages.findIndex(function (msg) {
+          lastMsgIdx = messages.findIndex(function (msg) {
             var _channel$lastMessage;
             return msg.id === (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id);
-          }) >= 10)) {
-            _context.n = 6;
+          });
+          if (!(lastMsgIdx >= 0)) {
+            _context.n = 5;
             break;
           }
           _context.n = 4;
           return effects.put(scrollToNewMessageAC(true, false, false));
         case 4:
-          _context.n = 5;
-          return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
-        case 5:
-          repliedMessage = document.getElementById(channel === null || channel === void 0 ? void 0 : (_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id);
-          if (repliedMessage) {
-            scrollRef = document.getElementById('scrollableDiv');
-            if (scrollRef) {
-              scrollRef.scrollTo({
-                top: 1000,
-                behavior: 'smooth'
-              });
-            }
-          }
-          _context.n = 7;
+          _context.n = 6;
           break;
-        case 6:
+        case 5:
           if (!(channel !== null && channel !== void 0 && channel.id)) {
-            _context.n = 7;
+            _context.n = 6;
             break;
           }
-          _context.n = 7;
-          return effects.put(getMessagesAC(channel, true, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, undefined, false, 'smooth', true));
-        case 7:
+          _context.n = 6;
+          return effects.put(getMessagesAC(channel, true, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id, undefined, false, 'smooth', true));
+        case 6:
           return _context.a(2);
       }
     }, _callee);
@@ -22586,7 +22586,7 @@ function loadOGMetadataForLinkSaga(action) {
   }, _marked9$1);
 }
 function getMessagesQuery(action) {
-  var _action$payload3, channel, loadWithLastMessage, messageId, limit, highlight, behavior, scrollToMessage, networkChanged, channelNewMessageCount, connectionState, messages, SceytChatClient, _updatedChannel, messageQueryBuilder, messageQuery, cachedMessages, _result, _result$messages$, _result$messages, _result$messages$2, _result$messages2, loadNextMessageId, loadPreviousMessageId, nextLoadLimit, previousLoadLimit, centerMessageIndex, firstResult, secondResult, _result$messages$3, _result$messages3, _channel$lastMessage4, _channel$lastMessage5, _channel$lastMessage6, _result$messages4, _messages, _filteredPendingMessages, updatedMessages, messageIdForLoad, _updatedMessages$, filteredPendingMessages, waitToSendPendingMessages, updatedChannel, _t13, _t14, _t15, _t16, _t17, _t18, _t19, _t20, _t21, _t22, _t23;
+  var _action$payload3, channel, loadWithLastMessage, messageId, limit, highlight, behavior, scrollToMessage, networkChanged, channelNewMessageCount, connectionState, messages, SceytChatClient, _updatedChannel, messageQueryBuilder, messageQuery, cachedMessages, result, _result$messages$, _result$messages, _result$messages$2, _result$messages2, _result$messages$3, _result$messages3, loadNextMessageId, loadPreviousMessageId, nextLoadLimit, previousLoadLimit, centerMessageIndex, firstResult, secondResult, _result$messages$4, _result$messages4, _channel$lastMessage3, _channel$lastMessage4, _channel$lastMessage5, _result$messages5, _messages, _filteredPendingMessages, updatedMessages, messageIdForLoad, _updatedMessages$, filteredPendingMessages, waitToSendPendingMessages, updatedChannel, _t13, _t14, _t15, _t16, _t17, _t18, _t19, _t20, _t21, _t22, _t23;
   return _regenerator().w(function (_context14) {
     while (1) switch (_context14.p = _context14.n) {
       case 0:
@@ -22599,7 +22599,7 @@ function getMessagesQuery(action) {
         connectionState = store.getState().UserReducer.connectionStatus;
         messages = store.getState().MessageReducer.activeChannelMessages;
         if (!(channel !== null && channel !== void 0 && channel.id && !(channel !== null && channel !== void 0 && channel.isMockChannel))) {
-          _context14.n = 84;
+          _context14.n = 87;
           break;
         }
         SceytChatClient = getClient();
@@ -22663,12 +22663,12 @@ function getMessagesQuery(action) {
         cachedMessages = Object.values(getMessagesFromMap(channel.id) || {}).sort(function (a, b) {
           return Number(a.id) - Number(b.id);
         });
-        _result = {
+        result = {
           messages: [],
           hasNext: false
         };
         if (!loadWithLastMessage) {
-          _context14.n = 31;
+          _context14.n = 34;
           break;
         }
         if (!(channelNewMessageCount && channelNewMessageCount > 0)) {
@@ -22698,7 +22698,7 @@ function getMessagesQuery(action) {
           hasNext: false
         };
       case 14:
-        _result = _t15;
+        result = _t15;
         _context14.n = 19;
         break;
       case 15:
@@ -22718,58 +22718,75 @@ function getMessagesQuery(action) {
           hasNext: false
         };
       case 18:
-        _result = _t16;
+        result = _t16;
       case 19:
         _context14.n = 20;
-        return effects.call(loadOGMetadataForLinkMessages, _result.messages);
+        return effects.call(loadOGMetadataForLinkMessages, result.messages);
       case 20:
         _context14.n = 21;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(_result.messages))));
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages)), channel.id));
       case 21:
-        setMessagesToMap(channel.id, _result.messages, (_result$messages$ = _result.messages[0]) === null || _result$messages$ === void 0 ? void 0 : _result$messages$.id, (_result$messages = _result.messages[_result.messages.length - 1]) === null || _result$messages === void 0 ? void 0 : _result$messages.id);
-        setAllMessages(_result.messages);
+        setMessagesToMap(channel.id, result.messages, (_result$messages$ = result.messages[0]) === null || _result$messages$ === void 0 ? void 0 : _result$messages$.id, (_result$messages = result.messages[result.messages.length - 1]) === null || _result$messages === void 0 ? void 0 : _result$messages.id);
+        setAllMessages(result.messages);
         _context14.n = 22;
         return effects.put(setMessagesHasPrevAC(true));
       case 22:
-        _context14.n = 26;
+        _context14.n = 29;
         break;
       case 23:
-        _result.messages = getFromAllMessagesByMessageId('', '', true);
+        if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
+          _context14.n = 25;
+          break;
+        }
+        messageQuery.limit = MESSAGES_MAX_LENGTH;
         _context14.n = 24;
-        return effects.call(loadOGMetadataForLinkMessages, _result.messages);
+        return effects.call(messageQuery.loadPrevious);
       case 24:
-        _context14.n = 25;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(_result.messages))));
-      case 25:
+        result = _context14.v;
+        if (result.messages.length) {
+          setMessagesToMap(channel.id, result.messages, (_result$messages$2 = result.messages[0]) === null || _result$messages$2 === void 0 ? void 0 : _result$messages$2.id, (_result$messages2 = result.messages[result.messages.length - 1]) === null || _result$messages2 === void 0 ? void 0 : _result$messages2.id);
+          setAllMessages(result.messages);
+        }
         _context14.n = 26;
-        return effects.put(setMessagesHasPrevAC(true));
+        break;
+      case 25:
+        result.messages = getFromAllMessagesByMessageId('', '', true);
       case 26:
         _context14.n = 27;
-        return effects.put(setMessagesHasNextAC(false));
+        return effects.call(loadOGMetadataForLinkMessages, result.messages);
       case 27:
+        _context14.n = 28;
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages)), channel.id));
+      case 28:
+        _context14.n = 29;
+        return effects.put(setMessagesHasPrevAC(true));
+      case 29:
+        _context14.n = 30;
+        return effects.put(setMessagesHasNextAC(false));
+      case 30:
         setHasNextCached(false);
         if (!(messageId && scrollToMessage)) {
-          _context14.n = 30;
+          _context14.n = 33;
           break;
         }
         if (!(channelNewMessageCount && channelNewMessageCount > 0)) {
-          _context14.n = 29;
+          _context14.n = 32;
           break;
         }
-        _context14.n = 28;
+        _context14.n = 31;
         return effects.put(setScrollToMessagesAC(channel.lastDisplayedMessageId, highlight, behavior));
-      case 28:
-        _context14.n = 30;
+      case 31:
+        _context14.n = 33;
         break;
-      case 29:
-        _context14.n = 30;
+      case 32:
+        _context14.n = 33;
         return effects.put(scrollToNewMessageAC(true));
-      case 30:
-        _context14.n = 76;
+      case 33:
+        _context14.n = 79;
         break;
-      case 31:
+      case 34:
         if (!(messageId && messages !== null && messages !== void 0 && messages.length)) {
-          _context14.n = 43;
+          _context14.n = 46;
           break;
         }
         loadNextMessageId = '';
@@ -22786,23 +22803,22 @@ function getMessagesQuery(action) {
           loadPreviousMessageId = messageId;
         }
         messageQuery.limit = previousLoadLimit;
-        log.info('load by message id from server ...............', messageId);
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context14.n = 33;
+          _context14.n = 36;
           break;
         }
-        _context14.n = 32;
+        _context14.n = 35;
         return effects.call(messageQuery.loadPreviousMessageId, loadPreviousMessageId);
-      case 32:
+      case 35:
         _t17 = _context14.v;
-        _context14.n = 34;
+        _context14.n = 37;
         break;
-      case 33:
+      case 36:
         _t17 = {
           messages: [],
           hasNext: false
         };
-      case 34:
+      case 37:
         firstResult = _t17;
         if (!networkChanged && firstResult.messages.length > 0) {
           loadNextMessageId = firstResult.messages[firstResult.messages.length - 1].id;
@@ -22812,190 +22828,189 @@ function getMessagesQuery(action) {
         messageQuery.reverse = false;
         messageQuery.limit = nextLoadLimit;
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context14.n = 36;
+          _context14.n = 39;
           break;
         }
-        _context14.n = 35;
+        _context14.n = 38;
         return effects.call(messageQuery.loadNextMessageId, loadNextMessageId);
-      case 35:
+      case 38:
         _t18 = _context14.v;
-        _context14.n = 37;
+        _context14.n = 40;
         break;
-      case 36:
+      case 39:
         _t18 = {
           messages: [],
           hasNext: false
         };
-      case 37:
+      case 40:
         secondResult = _t18;
-        _result.messages = [].concat(firstResult.messages, secondResult.messages);
-        _context14.n = 38;
-        return effects.call(loadOGMetadataForLinkMessages, _result.messages);
-      case 38:
-        _context14.n = 39;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(_result.messages))));
-      case 39:
-        setMessagesToMap(channel.id, _result.messages, (_result$messages$2 = _result.messages[0]) === null || _result$messages$2 === void 0 ? void 0 : _result$messages$2.id, (_result$messages2 = _result.messages[_result.messages.length - 1]) === null || _result$messages2 === void 0 ? void 0 : _result$messages2.id);
-        setAllMessages([].concat(_result.messages));
+        result.messages = [].concat(firstResult.messages, secondResult.messages);
+        _context14.n = 41;
+        return effects.call(loadOGMetadataForLinkMessages, result.messages);
+      case 41:
+        _context14.n = 42;
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages)), channel.id));
+      case 42:
+        setMessagesToMap(channel.id, result.messages, (_result$messages$3 = result.messages[0]) === null || _result$messages$3 === void 0 ? void 0 : _result$messages$3.id, (_result$messages3 = result.messages[result.messages.length - 1]) === null || _result$messages3 === void 0 ? void 0 : _result$messages3.id);
+        setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
-        _context14.n = 40;
+        _context14.n = 43;
         return effects.put(setMessagesHasNextAC(true));
-      case 40:
+      case 43:
         if (!(scrollToMessage && !networkChanged)) {
-          _context14.n = 41;
+          _context14.n = 44;
           break;
         }
-        _context14.n = 41;
+        _context14.n = 44;
         return effects.put(setScrollToMessagesAC(messageId, highlight, behavior));
-      case 41:
-        _context14.n = 42;
+      case 44:
+        _context14.n = 45;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 42:
-        _context14.n = 76;
+      case 45:
+        _context14.n = 79;
         break;
-      case 43:
+      case 46:
         if (!(channelNewMessageCount && channel.lastDisplayedMessageId)) {
-          _context14.n = 58;
+          _context14.n = 61;
           break;
         }
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context14.n = 47;
+          _context14.n = 50;
           break;
         }
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context14.n = 45;
+          _context14.n = 48;
           break;
         }
-        _context14.n = 44;
+        _context14.n = 47;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 44:
+      case 47:
         _t19 = _context14.v;
-        _context14.n = 46;
+        _context14.n = 49;
         break;
-      case 45:
+      case 48:
         _t19 = {
           messages: [],
           hasNext: false
         };
-      case 46:
-        _result = _t19;
-        _context14.n = 51;
+      case 49:
+        result = _t19;
+        _context14.n = 54;
         break;
-      case 47:
+      case 50:
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context14.n = 49;
+          _context14.n = 52;
           break;
         }
-        _context14.n = 48;
+        _context14.n = 51;
         return effects.call(messageQuery.loadPrevious);
-      case 48:
+      case 51:
         _t20 = _context14.v;
-        _context14.n = 50;
+        _context14.n = 53;
         break;
-      case 49:
+      case 52:
         _t20 = {
           messages: [],
           hasNext: false
         };
-      case 50:
-        _result = _t20;
-      case 51:
-        _context14.n = 52;
-        return effects.put(setMessagesHasPrevAC(true));
-      case 52:
-        _context14.n = 53;
-        return effects.put(setMessagesHasNextAC(channel.lastMessage && _result.messages.length > 0 && channel.lastMessage.id !== _result.messages[_result.messages.length - 1].id));
       case 53:
-        setMessagesToMap(channel.id, _result.messages, (_result$messages$3 = _result.messages[0]) === null || _result$messages$3 === void 0 ? void 0 : _result$messages$3.id, (_result$messages3 = _result.messages[_result.messages.length - 1]) === null || _result$messages3 === void 0 ? void 0 : _result$messages3.id);
-        setAllMessages([].concat(_result.messages));
-        _context14.n = 54;
-        return effects.call(loadOGMetadataForLinkMessages, _result.messages);
+        result = _t20;
       case 54:
         _context14.n = 55;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(_result.messages))));
+        return effects.put(setMessagesHasPrevAC(true));
       case 55:
         _context14.n = 56;
-        return effects.put(scrollToNewMessageAC(false));
+        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
       case 56:
+        setMessagesToMap(channel.id, result.messages, (_result$messages$4 = result.messages[0]) === null || _result$messages$4 === void 0 ? void 0 : _result$messages$4.id, (_result$messages4 = result.messages[result.messages.length - 1]) === null || _result$messages4 === void 0 ? void 0 : _result$messages4.id);
+        setAllMessages([].concat(result.messages));
         _context14.n = 57;
-        return effects.put(setUnreadScrollToAC(true));
+        return effects.call(loadOGMetadataForLinkMessages, result.messages);
       case 57:
-        _context14.n = 76;
-        break;
+        _context14.n = 58;
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages)), channel.id));
       case 58:
-        if (!(cachedMessages && cachedMessages.length)) {
-          _context14.n = 63;
-          break;
-        }
-        _messages = getFromAllMessagesByMessageId('', '', true, cachedMessages !== null && cachedMessages !== void 0 && cachedMessages.length ? cachedMessages : undefined);
         _context14.n = 59;
-        return effects.call(loadOGMetadataForLinkMessages, _messages);
+        return effects.put(scrollToNewMessageAC(false));
       case 59:
         _context14.n = 60;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(_messages))));
+        return effects.put(setUnreadScrollToAC(true));
       case 60:
-        _context14.n = 61;
-        return effects.delay(0);
+        _context14.n = 79;
+        break;
       case 61:
-        _filteredPendingMessages = getFilteredPendingMessages(_messages);
+        if (!(cachedMessages && cachedMessages.length)) {
+          _context14.n = 66;
+          break;
+        }
+        _messages = getFromAllMessagesByMessageId('', '', true, cachedMessages !== null && cachedMessages !== void 0 && cachedMessages.length ? cachedMessages : undefined);
         _context14.n = 62;
-        return effects.put(addMessagesAC(_filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
+        return effects.call(loadOGMetadataForLinkMessages, _messages);
       case 62:
         _context14.n = 63;
-        return effects.call(loadOGMetadataForLinkMessages, _filteredPendingMessages);
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(_messages)), channel.id));
       case 63:
-        log.info('load message from server');
-        _result = {
+        _context14.n = 64;
+        return effects.delay(0);
+      case 64:
+        _filteredPendingMessages = getFilteredPendingMessages(_messages);
+        _context14.n = 65;
+        return effects.put(addMessagesAC(_filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
+      case 65:
+        _context14.n = 66;
+        return effects.call(loadOGMetadataForLinkMessages, _filteredPendingMessages);
+      case 66:
+        result = {
           messages: [],
           hasNext: false
         };
-        if (!((channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId) > (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage4 = channel.lastMessage) === null || _channel$lastMessage4 === void 0 ? void 0 : _channel$lastMessage4.id))) {
-          _context14.n = 67;
+        if (!((channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId) > (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id))) {
+          _context14.n = 70;
           break;
         }
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context14.n = 65;
+          _context14.n = 68;
           break;
         }
-        _context14.n = 64;
+        _context14.n = 67;
         return effects.call(messageQuery.loadPreviousMessageId, channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId);
-      case 64:
+      case 67:
         _t21 = _context14.v;
-        _context14.n = 66;
+        _context14.n = 69;
         break;
-      case 65:
+      case 68:
         _t21 = {
           messages: [],
           hasNext: false
         };
-      case 66:
-        _result = _t21;
-        _context14.n = 71;
+      case 69:
+        result = _t21;
+        _context14.n = 74;
         break;
-      case 67:
+      case 70:
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context14.n = 69;
+          _context14.n = 72;
           break;
         }
-        _context14.n = 68;
+        _context14.n = 71;
         return effects.call(messageQuery.loadPrevious);
-      case 68:
+      case 71:
         _t22 = _context14.v;
-        _context14.n = 70;
+        _context14.n = 73;
         break;
-      case 69:
+      case 72:
         _t22 = {
           messages: [],
           hasNext: false
         };
-      case 70:
-        _result = _t22;
-      case 71:
+      case 73:
+        result = _t22;
+      case 74:
         updatedMessages = [];
-        _result.messages.forEach(function (msg) {
+        result.messages.forEach(function (msg) {
           var updatedMessage = updateMessageOnMap(channel.id, {
             messageId: msg.id,
             params: msg
@@ -23003,87 +23018,89 @@ function getMessagesQuery(action) {
           updateMessageOnAllMessages(msg.id, updatedMessage || msg);
           updatedMessages.push(updatedMessage || msg);
         });
-        messageIdForLoad = (channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId) > (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage5 = channel.lastMessage) === null || _channel$lastMessage5 === void 0 ? void 0 : _channel$lastMessage5.id) ? (channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId) || '0' : (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage6 = channel.lastMessage) === null || _channel$lastMessage6 === void 0 ? void 0 : _channel$lastMessage6.id) || '0';
+        messageIdForLoad = (channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId) > (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage4 = channel.lastMessage) === null || _channel$lastMessage4 === void 0 ? void 0 : _channel$lastMessage4.id) ? (channel === null || channel === void 0 ? void 0 : channel.lastDisplayedMessageId) || '0' : (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage5 = channel.lastMessage) === null || _channel$lastMessage5 === void 0 ? void 0 : _channel$lastMessage5.id) || '0';
         if (!updatedMessages.length) {
-          _context14.n = 75;
+          _context14.n = 78;
           break;
         }
-        _context14.n = 72;
+        _context14.n = 75;
         return effects.call(updateMessages, channel, updatedMessages, (_updatedMessages$ = updatedMessages[0]) === null || _updatedMessages$ === void 0 ? void 0 : _updatedMessages$.id, messageIdForLoad);
-      case 72:
-        _context14.n = 73;
-        return effects.put(setMessagesHasPrevAC(true));
-      case 73:
-        _context14.n = 74;
-        return effects.put(setMessagesHasNextAC(false));
-      case 74:
-        _context14.n = 76;
-        break;
       case 75:
-        if (!(!(cachedMessages !== null && cachedMessages !== void 0 && cachedMessages.length) && !((_result$messages4 = _result.messages) !== null && _result$messages4 !== void 0 && _result$messages4.length))) {
-          _context14.n = 76;
-          break;
-        }
+        setHasPrevCached(false);
+        setHasNextCached(false);
         _context14.n = 76;
-        return effects.put(setMessagesAC([]));
+        return effects.put(setMessagesHasPrevAC(true));
       case 76:
-        filteredPendingMessages = getFilteredPendingMessages(_result.messages);
         _context14.n = 77;
-        return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
+        return effects.put(setMessagesHasNextAC(false));
       case 77:
-        _context14.n = 78;
-        return effects.call(loadOGMetadataForLinkMessages, filteredPendingMessages);
+        _context14.n = 79;
+        break;
       case 78:
-        waitToSendPendingMessages = store.getState().UserReducer.waitToSendPendingMessages;
-        if (!(connectionState === CONNECTION_STATUS.CONNECTED && waitToSendPendingMessages)) {
-          _context14.n = 80;
+        if (!(!(cachedMessages !== null && cachedMessages !== void 0 && cachedMessages.length) && !((_result$messages5 = result.messages) !== null && _result$messages5 !== void 0 && _result$messages5.length))) {
+          _context14.n = 79;
           break;
         }
         _context14.n = 79;
-        return effects.put(setWaitToSendPendingMessagesAC(false));
+        return effects.put(setMessagesAC([]));
       case 79:
+        filteredPendingMessages = getFilteredPendingMessages(result.messages);
         _context14.n = 80;
-        return effects.spawn(sendPendingMessages, connectionState);
+        return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
       case 80:
         _context14.n = 81;
-        return effects.call(SceytChatClient.getChannel, channel.id, true);
+        return effects.call(loadOGMetadataForLinkMessages, filteredPendingMessages);
       case 81:
-        updatedChannel = _context14.v;
-        if (!(updatedChannel && updatedChannel !== null && updatedChannel !== void 0 && updatedChannel.lastMessage)) {
+        waitToSendPendingMessages = store.getState().UserReducer.waitToSendPendingMessages;
+        if (!(connectionState === CONNECTION_STATUS.CONNECTED && waitToSendPendingMessages)) {
           _context14.n = 83;
           break;
         }
         _context14.n = 82;
-        return effects.put(updateChannelLastMessageAC(updatedChannel.lastMessage, updatedChannel));
+        return effects.put(setWaitToSendPendingMessagesAC(false));
       case 82:
-        updateChannelLastMessageOnAllChannels(channel.id, updatedChannel.lastMessage);
+        _context14.n = 83;
+        return effects.spawn(sendPendingMessages, connectionState);
       case 83:
-        _context14.n = 85;
-        break;
+        _context14.n = 84;
+        return effects.call(SceytChatClient.getChannel, channel.id, true);
       case 84:
-        if (!(channel !== null && channel !== void 0 && channel.isMockChannel)) {
-          _context14.n = 85;
+        updatedChannel = _context14.v;
+        if (!(updatedChannel && updatedChannel !== null && updatedChannel !== void 0 && updatedChannel.lastMessage)) {
+          _context14.n = 86;
           break;
         }
         _context14.n = 85;
-        return effects.put(setMessagesAC([]));
+        return effects.put(updateChannelLastMessageAC(updatedChannel.lastMessage, updatedChannel));
       case 85:
-        _context14.n = 87;
-        break;
+        updateChannelLastMessageOnAllChannels(channel.id, updatedChannel.lastMessage);
       case 86:
-        _context14.p = 86;
-        _t23 = _context14.v;
-        log.error('error in message query', _t23);
+        _context14.n = 88;
+        break;
       case 87:
-        _context14.p = 87;
+        if (!(channel !== null && channel !== void 0 && channel.isMockChannel)) {
+          _context14.n = 88;
+          break;
+        }
         _context14.n = 88;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setMessagesAC([]));
       case 88:
-        return _context14.f(87);
+        _context14.n = 90;
+        break;
       case 89:
+        _context14.p = 89;
+        _t23 = _context14.v;
+        log.error('error in message query', _t23);
+      case 90:
+        _context14.p = 90;
+        _context14.n = 91;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 91:
+        return _context14.f(90);
+      case 92:
         return _context14.a(2);
     }
-  }, _marked0$1, null, [[2, 7], [0, 86, 87, 89]]);
+  }, _marked0$1, null, [[2, 7], [0, 89, 90, 92]]);
 }
 function getMessageQuery(action) {
   var payload, channelId, messageId, channel, connectionState, messages, fetchedMessage, _t24;
@@ -23144,7 +23161,7 @@ function getMessageQuery(action) {
   }, _marked1$1, null, [[0, 7]]);
 }
 function loadMoreMessages(action) {
-  var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, now, _result2, _result2$messages$, _result2$messages, _result2$messages$2, _result2$messages2, _t25;
+  var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _result$messages$5, _result$messages6, _result$messages$6, _result$messages7, _t25;
   return _regenerator().w(function (_context16) {
     while (1) switch (_context16.p = _context16.n) {
       case 0:
@@ -23159,11 +23176,10 @@ function loadMoreMessages(action) {
       case 1:
         messageQuery = _context16.v;
         messageQuery.limit = limit || 5;
-        now = Date.now();
         _context16.n = 2;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 2:
-        _result2 = {
+        result = {
           messages: [],
           hasNext: false
         };
@@ -23175,7 +23191,7 @@ function loadMoreMessages(action) {
           _context16.n = 3;
           break;
         }
-        _result2.messages = getFromAllMessagesByMessageId(messageId, MESSAGE_LOAD_DIRECTION.PREV);
+        result.messages = getFromAllMessagesByMessageId(messageId, MESSAGE_LOAD_DIRECTION.PREV);
         _context16.n = 5;
         break;
       case 3:
@@ -23186,13 +23202,13 @@ function loadMoreMessages(action) {
         _context16.n = 4;
         return effects.call(messageQuery.loadPreviousMessageId, messageId);
       case 4:
-        _result2 = _context16.v;
-        if (_result2.messages.length) {
-          addAllMessages(_result2.messages, MESSAGE_LOAD_DIRECTION.PREV);
-          setMessagesToMap(channelId, _result2.messages, (_result2$messages$ = _result2.messages[0]) === null || _result2$messages$ === void 0 ? void 0 : _result2$messages$.id, (_result2$messages = _result2.messages[_result2.messages.length - 1]) === null || _result2$messages === void 0 ? void 0 : _result2$messages.id);
+        result = _context16.v;
+        if (result.messages.length) {
+          addAllMessages(result.messages, MESSAGE_LOAD_DIRECTION.PREV);
+          setMessagesToMap(channelId, result.messages, (_result$messages$5 = result.messages[0]) === null || _result$messages$5 === void 0 ? void 0 : _result$messages$5.id, (_result$messages6 = result.messages[result.messages.length - 1]) === null || _result$messages6 === void 0 ? void 0 : _result$messages6.id);
         }
         _context16.n = 5;
-        return effects.put(setMessagesHasPrevAC(_result2.hasNext));
+        return effects.put(setMessagesHasPrevAC(result.hasNext));
       case 5:
         _context16.n = 10;
         break;
@@ -23201,7 +23217,7 @@ function loadMoreMessages(action) {
           _context16.n = 7;
           break;
         }
-        _result2.messages = getFromAllMessagesByMessageId(messageId, MESSAGE_LOAD_DIRECTION.NEXT);
+        result.messages = getFromAllMessagesByMessageId(messageId, MESSAGE_LOAD_DIRECTION.NEXT);
         _context16.n = 9;
         break;
       case 7:
@@ -23209,31 +23225,30 @@ function loadMoreMessages(action) {
           _context16.n = 9;
           break;
         }
-        log.info('saga load next from server ... ', messageId);
         messageQuery.reverse = false;
         _context16.n = 8;
         return effects.call(messageQuery.loadNextMessageId, messageId);
       case 8:
-        _result2 = _context16.v;
-        if (_result2.messages.length) {
-          addAllMessages(_result2.messages, MESSAGE_LOAD_DIRECTION.NEXT);
-          setMessagesToMap(channelId, _result2.messages, (_result2$messages$2 = _result2.messages[0]) === null || _result2$messages$2 === void 0 ? void 0 : _result2$messages$2.id, (_result2$messages2 = _result2.messages[_result2.messages.length - 1]) === null || _result2$messages2 === void 0 ? void 0 : _result2$messages2.id);
+        result = _context16.v;
+        if (result.messages.length) {
+          addAllMessages(result.messages, MESSAGE_LOAD_DIRECTION.NEXT);
+          setMessagesToMap(channelId, result.messages, (_result$messages$6 = result.messages[0]) === null || _result$messages$6 === void 0 ? void 0 : _result$messages$6.id, (_result$messages7 = result.messages[result.messages.length - 1]) === null || _result$messages7 === void 0 ? void 0 : _result$messages7.id);
         }
         _context16.n = 9;
-        return effects.put(setMessagesHasNextAC(_result2.hasNext));
+        return effects.put(setMessagesHasNextAC(result.hasNext));
       case 9:
         _context16.n = 10;
         return effects.put(setMessagesHasPrevAC(true));
       case 10:
-        if (!(_result2.messages && _result2.messages.length && _result2.messages.length > 0)) {
+        if (!(result.messages && result.messages.length && result.messages.length > 0)) {
           _context16.n = 13;
           break;
         }
         _context16.n = 11;
-        return effects.call(loadOGMetadataForLinkMessages, _result2.messages);
+        return effects.call(loadOGMetadataForLinkMessages, result.messages);
       case 11:
         _context16.n = 12;
-        return effects.put(addMessagesAC(JSON.parse(JSON.stringify(_result2.messages)), direction));
+        return effects.put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 12:
         _context16.n = 15;
         break;
@@ -23248,29 +23263,20 @@ function loadMoreMessages(action) {
         _context16.n = 15;
         return effects.put(setMessagesHasNextAC(false));
       case 15:
-        if (!(Date.now() - now < 10)) {
-          _context16.n = 16;
-          break;
-        }
-        setTimeout(function () {
-          store.dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-        }, 10);
         _context16.n = 17;
         break;
       case 16:
-        _context16.n = 17;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        _context16.p = 16;
+        _t25 = _context16.v;
+        log.error('[MESSAGE_LIST] loadMoreMessages ERROR:', _t25);
       case 17:
-        _context16.n = 19;
-        break;
+        _context16.p = 17;
+        store.dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return _context16.f(17);
       case 18:
-        _context16.p = 18;
-        _t25 = _context16.v;
-        log.error('error in load more messages', _t25);
-      case 19:
         return _context16.a(2);
     }
-  }, _marked10$1, null, [[0, 18]]);
+  }, _marked10$1, null, [[0, 16, 17, 18]]);
 }
 function addReaction(action) {
   var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, message, reaction, channelUpdateParam, _t26;
@@ -23390,7 +23396,7 @@ function deleteReaction(action) {
   }, _marked12$1, null, [[0, 7]]);
 }
 function getReactions(action) {
-  var payload, messageId, key, limit, SceytChatClient, reactionQueryBuilder, reactionQuery, _result3, _t28;
+  var payload, messageId, key, limit, SceytChatClient, reactionQueryBuilder, reactionQuery, result, _t28;
   return _regenerator().w(function (_context19) {
     while (1) switch (_context19.p = _context19.n) {
       case 0:
@@ -23413,10 +23419,10 @@ function getReactions(action) {
         _context19.n = 3;
         return effects.call(reactionQuery.loadNext);
       case 3:
-        _result3 = _context19.v;
+        result = _context19.v;
         query.ReactionsQuery = reactionQuery;
         _context19.n = 4;
-        return effects.put(setReactionsListAC(_result3.reactions, _result3.hasNext));
+        return effects.put(setReactionsListAC(result.reactions, result.hasNext));
       case 4:
         _context19.n = 5;
         return effects.put(setReactionsLoadingStateAC(LOADING_STATE.LOADED));
@@ -23433,7 +23439,7 @@ function getReactions(action) {
   }, _marked13$1, null, [[0, 6]]);
 }
 function loadMoreReactions(action) {
-  var payload, limit, ReactionQuery, _result4, _t29;
+  var payload, limit, ReactionQuery, result, _t29;
   return _regenerator().w(function (_context20) {
     while (1) switch (_context20.p = _context20.n) {
       case 0:
@@ -23450,9 +23456,9 @@ function loadMoreReactions(action) {
         _context20.n = 2;
         return effects.call(ReactionQuery.loadNext);
       case 2:
-        _result4 = _context20.v;
+        result = _context20.v;
         _context20.n = 3;
-        return effects.put(addReactionsToListAC(_result4.reactions, _result4.hasNext));
+        return effects.put(addReactionsToListAC(result.reactions, result.hasNext));
       case 3:
         _context20.n = 4;
         return effects.put(setReactionsLoadingStateAC(LOADING_STATE.LOADED));
@@ -23469,7 +23475,7 @@ function loadMoreReactions(action) {
   }, _marked14$1, null, [[0, 5]]);
 }
 function getMessageAttachments(action) {
-  var _action$payload4, channelId, attachmentType, limit, direction, attachmentId, forPopup, SceytChatClient, typeList, AttachmentByTypeQueryBuilder, AttachmentByTypeQuery, _result5, attachments, attachmentIndex, hasPrev, hasNext, _t30;
+  var _action$payload4, channelId, attachmentType, limit, direction, attachmentId, forPopup, SceytChatClient, typeList, AttachmentByTypeQueryBuilder, AttachmentByTypeQuery, result, attachments, attachmentIndex, hasPrev, hasNext, _t30;
   return _regenerator().w(function (_context21) {
     while (1) switch (_context21.p = _context21.n) {
       case 0:
@@ -23505,7 +23511,7 @@ function getMessageAttachments(action) {
         _context21.n = 4;
         return effects.call(AttachmentByTypeQuery.loadPrevious);
       case 4:
-        _result5 = _context21.v;
+        result = _context21.v;
         _context21.n = 9;
         break;
       case 5:
@@ -23516,16 +23522,16 @@ function getMessageAttachments(action) {
         _context21.n = 6;
         return effects.call(AttachmentByTypeQuery.loadNearMessageId, attachmentId);
       case 6:
-        _result5 = _context21.v;
+        result = _context21.v;
         _context21.n = 9;
         break;
       case 7:
         _context21.n = 8;
         return effects.call(AttachmentByTypeQuery.loadPrevious);
       case 8:
-        _result5 = _context21.v;
+        result = _context21.v;
       case 9:
-        attachments = _result5.attachments.sort(function (a, b) {
+        attachments = result.attachments.sort(function (a, b) {
           return forPopup ? Number(a.id || 0) - Number(b.id || 0) : Number(b.id || 0) - Number(a.id || 0);
         });
         if (!forPopup) {
@@ -23540,13 +23546,13 @@ function getMessageAttachments(action) {
           return attachment.id === attachmentId;
         });
         hasPrev = false;
-        if (attachmentIndex >= limit / 2 && _result5.hasNext && limit === attachments.length) {
+        if (attachmentIndex >= limit / 2 && result.hasNext && limit === attachments.length) {
           hasPrev = true;
         } else {
           hasPrev = false;
         }
         hasNext = false;
-        if (attachmentIndex <= limit / 2 - 1 && _result5.hasNext && limit === attachments.length) {
+        if (attachmentIndex <= limit / 2 - 1 && result.hasNext && limit === attachments.length) {
           hasNext = true;
         } else {
           hasNext = false;
@@ -23559,7 +23565,7 @@ function getMessageAttachments(action) {
       case 12:
         query.AttachmentByTypeQuery = AttachmentByTypeQuery;
         _context21.n = 13;
-        return effects.put(setAttachmentsCompleteAC(_result5.hasNext));
+        return effects.put(setAttachmentsCompleteAC(result.hasNext));
       case 13:
         _context21.n = 14;
         return effects.put(setAttachmentsAC(JSON.parse(JSON.stringify(attachments))));
@@ -23582,7 +23588,7 @@ function getMessageAttachments(action) {
   }, _marked15$1, null, [[1, 15, 16, 18]]);
 }
 function loadMoreMessageAttachments(action) {
-  var _action$payload5, limit, direction, forPopup, attachmentId, AttachmentQuery, _result6, _result7, attachments, hasNext, _t31;
+  var _action$payload5, limit, direction, forPopup, attachmentId, AttachmentQuery, result, _result, attachments, hasNext, _t31;
   return _regenerator().w(function (_context22) {
     while (1) switch (_context22.p = _context22.n) {
       case 0:
@@ -23603,7 +23609,7 @@ function loadMoreMessageAttachments(action) {
         return effects.put(setAttachmentsLoadingStateAC(LOADING_STATE.LOADING, forPopup));
       case 3:
         AttachmentQuery.limit = limit;
-        _result6 = {
+        result = {
           attachments: [],
           hasNext: false
         };
@@ -23618,14 +23624,14 @@ function loadMoreMessageAttachments(action) {
         _context22.n = 4;
         return effects.call(AttachmentQuery.loadNextAttachmentId, attachmentId);
       case 4:
-        _result6 = _context22.v;
+        result = _context22.v;
         _context22.n = 7;
         break;
       case 5:
         _context22.n = 6;
         return effects.call(AttachmentQuery.loadPreviousAttachmentId, attachmentId);
       case 6:
-        _result6 = _context22.v;
+        result = _context22.v;
       case 7:
         _context22.n = 12;
         break;
@@ -23637,16 +23643,16 @@ function loadMoreMessageAttachments(action) {
         _context22.n = 9;
         return effects.call(AttachmentQuery.loadNext);
       case 9:
-        _result6 = _context22.v;
+        result = _context22.v;
         _context22.n = 12;
         break;
       case 10:
         _context22.n = 11;
         return effects.call(AttachmentQuery.loadPrevious);
       case 11:
-        _result6 = _context22.v;
+        result = _context22.v;
       case 12:
-        _result7 = _result6, attachments = _result7.attachments, hasNext = _result7.hasNext;
+        _result = result, attachments = _result.attachments, hasNext = _result.hasNext;
         if (!forPopup) {
           _context22.n = 17;
           break;
@@ -23659,7 +23665,7 @@ function loadMoreMessageAttachments(action) {
           break;
         }
         _context22.n = 14;
-        return effects.put(setAttachmentsCompleteForPopupAC(undefined, _result6.hasNext));
+        return effects.put(setAttachmentsCompleteForPopupAC(undefined, result.hasNext));
       case 14:
         _context22.n = 16;
         break;
@@ -23669,7 +23675,7 @@ function loadMoreMessageAttachments(action) {
           break;
         }
         _context22.n = 16;
-        return effects.put(setAttachmentsCompleteForPopupAC(_result6.hasNext, undefined));
+        return effects.put(setAttachmentsCompleteForPopupAC(result.hasNext, undefined));
       case 16:
         _context22.n = 20;
         break;
@@ -24476,7 +24482,7 @@ function resendPendingPollActions(action) {
   }, _marked32$1, null, [[0, 2]]);
 }
 function getPollVotes(action) {
-  var payload, messageId, pollId, optionId, limit, key, SceytChatClient, queryBuilder, pollVotesQuery, _result8, formattedVotes, _t40;
+  var payload, messageId, pollId, optionId, limit, key, SceytChatClient, queryBuilder, pollVotesQuery, result, formattedVotes, _t40;
   return _regenerator().w(function (_context39) {
     while (1) switch (_context39.p = _context39.n) {
       case 0:
@@ -24504,12 +24510,12 @@ function getPollVotes(action) {
         _context39.n = 4;
         return effects.call(pollVotesQuery.loadNext);
       case 4:
-        _result8 = _context39.v;
+        result = _context39.v;
         if (!query.PollVotesQueries) {
           query.PollVotesQueries = {};
         }
         query.PollVotesQueries[key] = pollVotesQuery;
-        formattedVotes = (_result8.votes || []).map(function (vote) {
+        formattedVotes = (result.votes || []).map(function (vote) {
           return {
             optionId: vote.optionId || optionId,
             createdAt: vote.createdAt || new Date().getTime(),
@@ -24533,7 +24539,7 @@ function getPollVotes(action) {
           };
         });
         _context39.n = 5;
-        return effects.put(setPollVotesListAC(pollId, optionId, formattedVotes, _result8.hasNext || false));
+        return effects.put(setPollVotesListAC(pollId, optionId, formattedVotes, result.hasNext || false));
       case 5:
         _context39.n = 6;
         return effects.put(setPollVotesLoadingStateAC(pollId, optionId, LOADING_STATE.LOADED));
@@ -24552,7 +24558,7 @@ function getPollVotes(action) {
   }, _marked33$1, null, [[0, 7]]);
 }
 function loadMorePollVotes(action) {
-  var payload, pollId, optionId, limit, key, pollVotesQuery, _result9, formattedVotes, _t41;
+  var payload, pollId, optionId, limit, key, pollVotesQuery, result, formattedVotes, _t41;
   return _regenerator().w(function (_context40) {
     while (1) switch (_context40.p = _context40.n) {
       case 0:
@@ -24576,8 +24582,8 @@ function loadMorePollVotes(action) {
         _context40.n = 3;
         return effects.call(pollVotesQuery.loadNext);
       case 3:
-        _result9 = _context40.v;
-        formattedVotes = (_result9.votes || []).map(function (vote) {
+        result = _context40.v;
+        formattedVotes = (result.votes || []).map(function (vote) {
           return {
             optionId: vote.optionId || optionId,
             createdAt: vote.createdAt || new Date().getTime(),
@@ -24601,7 +24607,7 @@ function loadMorePollVotes(action) {
           };
         });
         _context40.n = 4;
-        return effects.put(addPollVotesToListAC(pollId, optionId, formattedVotes, _result9.hasNext || false));
+        return effects.put(addPollVotesToListAC(pollId, optionId, formattedVotes, result.hasNext || false));
       case 4:
         _context40.n = 5;
         return effects.put(setPollVotesLoadingStateAC(pollId, optionId, LOADING_STATE.LOADED));
@@ -31000,7 +31006,7 @@ var Carousel = function Carousel(_ref) {
   }, [initialActiveIndex]);
   var items = React__default.Children.toArray(children);
   var totalItems = items.length;
-  React.useEffect(function () {
+  React.useLayoutEffect(function () {
     if (!isInternalNavigationRef.current && initialActiveIndex >= 0 && initialActiveIndex < totalItems && initialActiveIndex !== currentIndex && lastInitialIndexRef.current !== initialActiveIndex) {
       if (skipTransition) {
         setIsTransitioning(false);
@@ -31197,7 +31203,7 @@ var Carousel = function Carousel(_ref) {
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [goToNext, goToPrev, isRTL]);
-  React.useEffect(function () {
+  React.useLayoutEffect(function () {
     if (containerRef.current && !isDraggingRef.current && totalItems > 0) {
       var translateX = -currentIndex * 100 / totalItems;
       if (skipTransition) {
@@ -31211,7 +31217,7 @@ var Carousel = function Carousel(_ref) {
     }
   }, [currentIndex, isTransitioning, totalItems, skipTransition]);
   var isFirstRenderRef = React.useRef(true);
-  React.useEffect(function () {
+  React.useLayoutEffect(function () {
     if (containerRef.current && totalItems > 0) {
       var translateX = -currentIndex * 100 / totalItems;
       containerRef.current.style.transform = "translateX(" + translateX + "%)";
@@ -32457,31 +32463,40 @@ var SliderPopup = function SliderPopup(_ref) {
   var _useState2 = React.useState({}),
     downloadingFilesMap = _useState2[0],
     setDownloadingFilesMap = _useState2[1];
-  var _useState3 = React.useState({}),
-    itemsLoadedMap = _useState3[0],
-    setItemsLoadedMap = _useState3[1];
-  var _useState4 = React.useState(),
-    playedVideo = _useState4[0],
-    setPlayedVideo = _useState4[1];
+  var _useState3 = React.useState(),
+    playedVideo = _useState3[0],
+    setPlayedVideo = _useState3[1];
+  var _useState4 = React.useState(true),
+    nextButtonDisabled = _useState4[0],
+    setNextButtonDisabled = _useState4[1];
   var _useState5 = React.useState(true),
-    nextButtonDisabled = _useState5[0],
-    setNextButtonDisabled = _useState5[1];
-  var _useState6 = React.useState(true),
-    prevButtonDisabled = _useState6[0],
-    setPrevButtonDisabled = _useState6[1];
-  var _useState7 = React.useState(false),
-    forwardPopupOpen = _useState7[0],
-    setForwardPopupOpen = _useState7[1];
-  var _useState8 = React.useState(true),
-    readyToPlay = _useState8[0],
-    setReadyToPlay = _useState8[1];
-  var _useState9 = React.useState(),
-    messageToDelete = _useState9[0],
-    setMessageToDelete = _useState9[1];
+    prevButtonDisabled = _useState5[0],
+    setPrevButtonDisabled = _useState5[1];
+  var _useState6 = React.useState(false),
+    forwardPopupOpen = _useState6[0],
+    setForwardPopupOpen = _useState6[1];
+  var _useState7 = React.useState(true),
+    readyToPlay = _useState7[0],
+    setReadyToPlay = _useState7[1];
+  var _useState8 = React.useState(),
+    messageToDelete = _useState8[0],
+    setMessageToDelete = _useState8[1];
   var attachmentLoadingStateForPopup = useSelector(attachmentForPopupLoadingStateSelector);
   var attachmentsForPopupHasPrev = useSelector(attachmentsForPopupHasPrevSelector);
   var attachmentsForPopupHasNext = useSelector(attachmentsForPopupHasNextSelector);
   var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
+  var _useState9 = React.useState(function () {
+      if (currentMediaFile.id && currentMediaFile.type === 'image') {
+        var imageKey = getAttachmentURLWithVersion(currentMediaFile.url + '_original_image_url');
+        if (attachmentUpdatedMap[imageKey]) {
+          var _ref2;
+          return _ref2 = {}, _ref2[currentMediaFile.id] = true, _ref2;
+        }
+      }
+      return {};
+    }),
+    itemsLoadedMap = _useState9[0],
+    setItemsLoadedMap = _useState9[1];
   var prefixUrl = React.useMemo(function () {
     return (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'image' ? '_original_image_url' : (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'video' ? '_original_video_url' : '';
   }, [currentFile === null || currentFile === void 0 ? void 0 : currentFile.type]);
@@ -32768,11 +32783,12 @@ var SliderPopup = function SliderPopup(_ref) {
         log.error('Error getting initial attachment from cache:', error);
       });
     }
-    if (currentMediaFile && !attachmentsList.find(function (item) {
+    if (!attachmentsList.find(function (item) {
       return item.id === currentMediaFile.id;
     })) {
-      dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media, 34, queryDirection.NEAR, currentMediaFile.id, true));
+      dispatch(setAttachmentsForPopupAC([currentMediaFile]));
     }
+    dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media, 34, queryDirection.NEAR, currentMediaFile.id, true));
   }, []);
   var activeFileIndex = React.useMemo(function () {
     if (!(currentFile !== null && currentFile !== void 0 && currentFile.id)) return -1;
@@ -32833,9 +32849,7 @@ var SliderPopup = function SliderPopup(_ref) {
       dispatch(loadMoreAttachmentsAC(34, queryDirection.PREV, attachmentsList[0].id, true));
     }
   }, [activeFileIndex, attachmentLoadingStateForPopup, attachmentsForPopupHasPrev, attachmentsList, dispatch]);
-  var isCarouselLoading = React.useMemo(function () {
-    return attachmentLoadingStateForPopup !== LOADING_STATE.LOADED || activeFileIndex < 0 || !attachmentsList || !attachmentsList.length;
-  }, [attachmentLoadingStateForPopup, activeFileIndex, attachmentsList]);
+  var isCarouselLoading = !attachmentsList.length || activeFileIndex < 0;
   var isItemLoading = React.useCallback(function (fileId) {
     if (!fileId) return false;
     return !itemsLoadedMap[fileId];
@@ -32938,10 +32952,10 @@ var SliderPopup = function SliderPopup(_ref) {
         setPrevButtonDisabled(!attachmentsList[pageIndex - 1]);
       }
     },
-    renderArrow: function renderArrow(_ref2) {
-      var type = _ref2.type,
-        _onClick = _ref2.onClick,
-        isEdge = _ref2.isEdge;
+    renderArrow: function renderArrow(_ref3) {
+      var type = _ref3.type,
+        _onClick = _ref3.onClick,
+        isEdge = _ref3.isEdge;
       var pointer = type === 'PREV' ? /*#__PURE__*/React__default.createElement(SvgSliderButtonLeft, null) : /*#__PURE__*/React__default.createElement(SvgSliderButtonRight, null);
       var disabled = type === 'PREV' ? prevButtonDisabled && !attachmentsForPopupHasPrev : nextButtonDisabled && !attachmentsForPopupHasNext;
       var isEdgeButton = isEdge || (type === 'PREV' ? prevButtonDisabled : nextButtonDisabled);
@@ -32970,7 +32984,7 @@ var SliderPopup = function SliderPopup(_ref) {
       }
     }, isItemLoading(file.id) && file.type === 'image' && (/*#__PURE__*/React__default.createElement(ItemLoadingCont, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
       color: textOnPrimary
-    }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachmentLoadingStateForPopup === LOADING_STATE.LOADED && attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] && (/*#__PURE__*/React__default.createElement("img", {
+    }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] && (/*#__PURE__*/React__default.createElement("img", {
       loading: 'lazy',
       decoding: 'async',
       draggable: false,
@@ -34788,7 +34802,8 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     return null;
   }, [parsedMetadata]);
   var attachmentVideoFirstFrame = React.useMemo(function () {
-    return attachmentUpdatedMap[getAttachmentURLWithVersion(file.url)];
+    var _file$metadata;
+    return attachmentUpdatedMap[getAttachmentURLWithVersion((_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : _file$metadata.tmb)] || attachmentUpdatedMap[getAttachmentURLWithVersion(file.url)];
   }, [attachmentUpdatedMap, file.url]);
   var attachmentThumb = React.useMemo(function () {
     if (parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.tmb) {
@@ -34901,7 +34916,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     isPreview: isPreview,
     backgroundColor: backgroundColor,
     isDetailsView: isDetailsView
-  }, !uploading && (/*#__PURE__*/React__default.createElement(UploadInProgress, {
+  }, /*#__PURE__*/React__default.createElement(UploadInProgress, {
     isRepliedMessage: isRepliedMessage,
     src: attachmentVideoFirstFrame || (attachmentThumb !== null && attachmentThumb !== void 0 && attachmentThumb.withPrefix ? "data:image/jpeg;base64," + attachmentThumb.thumbnail : attachmentThumb === null || attachmentThumb === void 0 ? void 0 : attachmentThumb.thumbnail),
     width: parseInt(width),
@@ -34913,8 +34928,9 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     loading: 'lazy',
     decoding: 'async',
     fetchpriority: 'high',
-    isPreview: isPreview
-  })), !isRepliedMessage && !downloading && (/*#__PURE__*/React__default.createElement(VideoControls, {
+    isPreview: isPreview,
+    borderRadius: borderRadius
+  }), !isRepliedMessage && !downloading && (/*#__PURE__*/React__default.createElement(VideoControls, {
     className: 'video-controls'
   }, !isPreview && !isRepliedMessage && !uploading && !isDetailsView && (/*#__PURE__*/React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
     isDetailsView: isDetailsView,
@@ -35042,7 +35058,8 @@ var Attachment = function Attachment(_ref) {
   var imageContRef = React.useRef(null);
   var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
   var attachmentUrlFromMap = React.useMemo(function () {
-    return attachmentUpdatedMap[getAttachmentURLWithVersion(attachment.url)];
+    var _attachment$metadata;
+    return attachmentUpdatedMap[getAttachmentURLWithVersion((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata = attachment.metadata) === null || _attachment$metadata === void 0 ? void 0 : _attachment$metadata.tmb) || '')] || attachmentUpdatedMap[getAttachmentURLWithVersion(attachment.url)];
   }, [attachmentUpdatedMap, attachment.url]);
   var _useState = React.useState(false),
     viewOnceVoiceModalOpen = _useState[0],
@@ -35092,7 +35109,7 @@ var Attachment = function Attachment(_ref) {
     renderWidth = _useMemo[0],
     renderHeight = _useMemo[1];
   var isInUploadingState = attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED);
-  var attachmentThumb;
+  var attachmentThumb = '';
   var withPrefix = true;
   if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
     try {
@@ -35603,7 +35620,7 @@ var Attachment = function Attachment(_ref) {
     isPreview: isPreview,
     isRepliedMessage: isRepliedMessage,
     withBorder: !isPreview && !isDetailsView,
-    src: attachment.attachmentUrl || attachmentUrlFromMap || attachmentUrl || attachmentThumb,
+    src: attachmentUrlFromMap || attachmentUrl || attachmentThumb,
     fitTheContainer: true,
     imageMaxHeight: (renderHeight || 400) + "px",
     isDetailsView: isDetailsView,
@@ -35614,9 +35631,9 @@ var Attachment = function Attachment(_ref) {
     "$shouldAnimate": shouldAnimateImage,
     "$isLoaded": imageLoaded,
     onLoad: function onLoad() {
-      var currentSrc = attachment.attachmentUrl || attachmentUrlFromMap || attachmentUrl || attachmentThumb;
+      var currentSrc = attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl || attachmentThumb;
       var wasThumbnail = previousImageSrcRef.current === attachmentThumb;
-      var isNowFullImage = currentSrc && currentSrc !== attachmentThumb && (attachment.attachmentUrl || attachmentUrlFromMap || attachmentUrl);
+      var isNowFullImage = currentSrc && currentSrc !== attachmentThumb && (attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl);
       if (wasThumbnail && isNowFullImage) {
         setShouldAnimateImage(true);
       }
@@ -35624,11 +35641,12 @@ var Attachment = function Attachment(_ref) {
       previousImageSrcRef.current = currentSrc;
     }
   }), !isPreview && !isRepliedMessage && (isInUploadingState || !(attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl || attachmentThumb)) ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
-    backgroundImage: attachmentThumb,
+    backgroundImage: !attachmentUrlFromMap ? attachmentThumb : '',
     isRepliedMessage: isRepliedMessage,
     width: renderWidth,
     height: renderHeight,
     withBorder: !isPreview && !isDetailsView,
+    borderRadius: borderRadius,
     backgroundColor: backgroundColor && backgroundColor !== 'inherit' ? backgroundColor : overlayBackground2,
     isDetailsView: isDetailsView,
     imageMinWidth: imageMinWidth,
@@ -35679,9 +35697,13 @@ var Attachment = function Attachment(_ref) {
     isDetailsView: isDetailsView,
     isRepliedMessage: isRepliedMessage,
     withPrefix: withPrefix,
-    backgroundImage: attachmentThumb || '',
+    backgroundImage: !attachmentUrlFromMap ? attachmentThumb : '',
     zIndex: 9,
-    borderColor: borderColor
+    borderColor: borderColor,
+    withBorder: !isPreview && !isDetailsView,
+    borderRadius: borderRadius,
+    width: renderWidth,
+    height: renderHeight
   }, /*#__PURE__*/React__default.createElement(UploadPercent, {
     isRepliedMessage: isRepliedMessage,
     isDetailsView: isDetailsView,
@@ -35719,7 +35741,7 @@ var Attachment = function Attachment(_ref) {
     height: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderHeight || videoAttachmentMaxHeight || 240) + "px",
     downloading: downloadingFile,
     file: attachment,
-    src: attachment.attachmentUrl || attachmentUrl,
+    src: attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl,
     isCachedFile: isCached,
     uploading: attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED),
     borderRadius: isRepliedMessage ? '4px' : borderRadius,
@@ -35734,7 +35756,7 @@ var Attachment = function Attachment(_ref) {
     height: '48px',
     downloading: downloadingFile,
     file: attachment,
-    src: attachment.attachmentUrl || attachmentUrl,
+    src: attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl,
     borderRadius: borderRadius,
     setVideoIsReadyToSend: setVideoIsReadyToSend,
     backgroundColor: backgroundColor && backgroundColor !== 'inherit' ? backgroundColor : overlayBackground2,
@@ -37500,6 +37522,75 @@ var UsersContainer = styled__default.div(_templateObject12$3 || (_templateObject
 });
 
 var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$a;
+var OG_IMAGE_CACHE = 'og-images-v1';
+var useCachedOGImage = function useCachedOGImage(url) {
+  var dispatch = useDispatch();
+  var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector);
+  var reduxCached = url ? attachmentUpdatedMap[getAttachmentURLWithVersion(url)] : undefined;
+  var _useState = React.useState(reduxCached || url),
+    src = _useState[0],
+    setSrc = _useState[1];
+  React.useEffect(function () {
+    if (!url) return;
+    if (reduxCached) {
+      setSrc(reduxCached);
+      return;
+    }
+    setSrc(url);
+    if (!('caches' in window)) return;
+    caches.open(OG_IMAGE_CACHE).then(function (cache) {
+      return cache.match(url);
+    }).then(function (cached) {
+      if (cached) {
+        cached.blob().then(function (blob) {
+          var blobUrl = URL.createObjectURL(blob);
+          setSrc(blobUrl);
+          dispatch(setUpdateMessageAttachmentAC(url, blobUrl));
+        });
+      }
+    })["catch"](function () {});
+  }, [url, reduxCached]);
+  var onImageLoad = React.useCallback(function () {
+    if (!url || !('caches' in window)) return;
+    try {
+      if (new URL(url).origin !== window.location.origin) return;
+    } catch (_unused) {
+      return;
+    }
+    fetch(url, {
+      credentials: 'omit'
+    }).then(function (response) {
+      if (response.ok) {
+        response.clone().blob().then(function (blob) {
+          var blobUrl = URL.createObjectURL(blob);
+          dispatch(setUpdateMessageAttachmentAC(url, blobUrl));
+          caches.open(OG_IMAGE_CACHE).then(function (cache) {
+            return cache.put(url, response);
+          });
+        });
+      }
+    })["catch"](function () {});
+  }, [url]);
+  var onImageError = React.useCallback(function () {
+    if (!url || !('caches' in window)) return;
+    caches.open(OG_IMAGE_CACHE).then(function (cache) {
+      return cache.match(url);
+    }).then(function (cached) {
+      if (cached) {
+        cached.blob().then(function (blob) {
+          var blobUrl = URL.createObjectURL(blob);
+          setSrc(blobUrl);
+          dispatch(setUpdateMessageAttachmentAC(url, blobUrl));
+        });
+      }
+    })["catch"](function () {});
+  }, [url]);
+  return {
+    src: src,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError
+  };
+};
 var validateUrl = function validateUrl(url) {
   try {
     var urlObj = new URL(url);
@@ -37515,7 +37606,7 @@ var isDescriptionOnlySymbol = function isDescriptionOnlySymbol(description) {
 };
 var MIN_IMAGE_SIZE = 200;
 var OGMetadata = function OGMetadata(_ref) {
-  var _metadata$og3, _metadata$og4, _metadata$og7, _metadata$og12, _metadata$og12$image, _metadata$og12$image$, _metadata$og16, _metadata$og16$favico, _metadata$og20, _metadata$og21, _metadata$og22;
+  var _metadata$og, _metadata$og$image, _metadata$og$image$, _metadata$og2, _metadata$og2$favicon, _metadata$og5, _metadata$og6, _metadata$og9, _metadata$og14, _metadata$og14$image, _metadata$og14$image$, _metadata$og18, _metadata$og18$favico, _metadata$og21, _metadata$og22, _metadata$og23;
   var attachments = _ref.attachments,
     state = _ref.state,
     incoming = _ref.incoming,
@@ -37569,15 +37660,27 @@ var OGMetadata = function OGMetadata(_ref) {
   var metadata = React.useMemo(function () {
     return (oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) || null;
   }, [attachment, oGMetadata]);
-  var _useState = React.useState(false),
-    shouldAnimate = _useState[0],
-    setShouldAnimate = _useState[1];
   var _useState2 = React.useState(false),
-    imageLoadError = _useState2[0],
-    setImageLoadError = _useState2[1];
+    shouldAnimate = _useState2[0],
+    setShouldAnimate = _useState2[1];
+  var _useState3 = React.useState(false),
+    imageLoadError = _useState3[0],
+    setImageLoadError = _useState3[1];
+  var _useCachedOGImage = useCachedOGImage(metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : (_metadata$og$image = _metadata$og.image) === null || _metadata$og$image === void 0 ? void 0 : (_metadata$og$image$ = _metadata$og$image[0]) === null || _metadata$og$image$ === void 0 ? void 0 : _metadata$og$image$.url),
+    cachedImageSrc = _useCachedOGImage.src,
+    onImageLoad = _useCachedOGImage.onImageLoad,
+    onImageError = _useCachedOGImage.onImageError;
+  var _useCachedOGImage2 = useCachedOGImage(metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$favicon = _metadata$og2.favicon) === null || _metadata$og2$favicon === void 0 ? void 0 : _metadata$og2$favicon.url),
+    cachedFaviconSrc = _useCachedOGImage2.src,
+    onFaviconLoad = _useCachedOGImage2.onImageLoad;
   React.useEffect(function () {
     setImageLoadError(false);
   }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  React.useEffect(function () {
+    if (cachedImageSrc !== null && cachedImageSrc !== void 0 && cachedImageSrc.startsWith('blob:')) {
+      setImageLoadError(false);
+    }
+  }, [cachedImageSrc]);
   var ogUrl = React.useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -37587,20 +37690,20 @@ var OGMetadata = function OGMetadata(_ref) {
     return url;
   }, [attachment]);
   var shouldShowTitle = React.useMemo(function () {
-    var _metadata$og, _metadata$og2;
-    return ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && !isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.description);
-  }, [ogShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.title, metadata === null || metadata === void 0 ? void 0 : (_metadata$og4 = metadata.og) === null || _metadata$og4 === void 0 ? void 0 : _metadata$og4.description]);
+    var _metadata$og3, _metadata$og4;
+    return ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.title) && !isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og4 = metadata.og) === null || _metadata$og4 === void 0 ? void 0 : _metadata$og4.description);
+  }, [ogShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : _metadata$og5.title, metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : _metadata$og6.description]);
   var shouldShowDescription = React.useMemo(function () {
-    var _metadata$og5, _metadata$og6;
-    return ogShowDescription && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : _metadata$og5.description) && !isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : _metadata$og6.description);
-  }, [ogShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og7 = metadata.og) === null || _metadata$og7 === void 0 ? void 0 : _metadata$og7.description]);
+    var _metadata$og7, _metadata$og8;
+    return ogShowDescription && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og7 = metadata.og) === null || _metadata$og7 === void 0 ? void 0 : _metadata$og7.description) && !isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : _metadata$og8.description);
+  }, [ogShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.description]);
   var showOGMetadata = React.useMemo(function () {
-    var _metadata$og8, _metadata$og9, _metadata$og0, _metadata$og1, _metadata$og1$image, _metadata$og1$image$, _metadata$og10, _metadata$og10$favico;
-    var descriptionIsSymbol = isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : _metadata$og8.description);
+    var _metadata$og0, _metadata$og1, _metadata$og10, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _metadata$og12, _metadata$og12$favico;
+    var descriptionIsSymbol = isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og0 = metadata.og) === null || _metadata$og0 === void 0 ? void 0 : _metadata$og0.description);
     if (descriptionIsSymbol) {
       return false;
     }
-    return state !== 'deleted' && ((metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og0 = metadata.og) === null || _metadata$og0 === void 0 ? void 0 : _metadata$og0.description) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$image = _metadata$og1.image) === null || _metadata$og1$image === void 0 ? void 0 : (_metadata$og1$image$ = _metadata$og1$image[0]) === null || _metadata$og1$image$ === void 0 ? void 0 : _metadata$og1$image$.url) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : (_metadata$og10$favico = _metadata$og10.favicon) === null || _metadata$og10$favico === void 0 ? void 0 : _metadata$og10$favico.url)) && metadata;
+    return state !== 'deleted' && ((metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.title) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.description) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og11 = metadata.og) === null || _metadata$og11 === void 0 ? void 0 : (_metadata$og11$image = _metadata$og11.image) === null || _metadata$og11$image === void 0 ? void 0 : (_metadata$og11$image$ = _metadata$og11$image[0]) === null || _metadata$og11$image$ === void 0 ? void 0 : _metadata$og11$image$.url) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : (_metadata$og12$favico = _metadata$og12.favicon) === null || _metadata$og12$favico === void 0 ? void 0 : _metadata$og12$favico.url)) && metadata;
   }, [state, metadata]);
   var calculatedImageHeight = React.useMemo(function () {
     if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth) || !(metadata !== null && metadata !== void 0 && metadata.imageHeight)) {
@@ -37613,17 +37716,17 @@ var OGMetadata = function OGMetadata(_ref) {
     return Math.floor((metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / maxSize));
   }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight, maxWidth]);
   var hasImage = React.useMemo(function () {
-    var _metadata$og11, _metadata$og11$image, _metadata$og11$image$;
-    return (metadata === null || metadata === void 0 ? void 0 : (_metadata$og11 = metadata.og) === null || _metadata$og11 === void 0 ? void 0 : (_metadata$og11$image = _metadata$og11.image) === null || _metadata$og11$image === void 0 ? void 0 : (_metadata$og11$image$ = _metadata$og11$image[0]) === null || _metadata$og11$image$ === void 0 ? void 0 : _metadata$og11$image$.url) && !imageLoadError;
-  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : (_metadata$og12$image = _metadata$og12.image) === null || _metadata$og12$image === void 0 ? void 0 : (_metadata$og12$image$ = _metadata$og12$image[0]) === null || _metadata$og12$image$ === void 0 ? void 0 : _metadata$og12$image$.url, imageLoadError]);
+    var _metadata$og13, _metadata$og13$image, _metadata$og13$image$;
+    return (metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$image = _metadata$og13.image) === null || _metadata$og13$image === void 0 ? void 0 : (_metadata$og13$image$ = _metadata$og13$image[0]) === null || _metadata$og13$image$ === void 0 ? void 0 : _metadata$og13$image$.url) && (!imageLoadError || (cachedImageSrc === null || cachedImageSrc === void 0 ? void 0 : cachedImageSrc.startsWith('blob:')));
+  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og14 = metadata.og) === null || _metadata$og14 === void 0 ? void 0 : (_metadata$og14$image = _metadata$og14.image) === null || _metadata$og14$image === void 0 ? void 0 : (_metadata$og14$image$ = _metadata$og14$image[0]) === null || _metadata$og14$image$ === void 0 ? void 0 : _metadata$og14$image$.url, imageLoadError, cachedImageSrc]);
   var faviconUrl = React.useMemo(function () {
-    var _metadata$og14, _metadata$og14$favico, _metadata$og15, _metadata$og15$favico;
+    var _metadata$og16, _metadata$og16$favico, _metadata$og17, _metadata$og17$favico;
     if (ogShowFavicon && hasImage && ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) < MIN_IMAGE_SIZE || (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) < MIN_IMAGE_SIZE)) {
-      var _metadata$og13, _metadata$og13$image, _metadata$og13$image$;
-      return metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$image = _metadata$og13.image) === null || _metadata$og13$image === void 0 ? void 0 : (_metadata$og13$image$ = _metadata$og13$image[0]) === null || _metadata$og13$image$ === void 0 ? void 0 : _metadata$og13$image$.url;
+      var _metadata$og15, _metadata$og15$image, _metadata$og15$image$;
+      return cachedImageSrc || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$image = _metadata$og15.image) === null || _metadata$og15$image === void 0 ? void 0 : (_metadata$og15$image$ = _metadata$og15$image[0]) === null || _metadata$og15$image$ === void 0 ? void 0 : _metadata$og15$image$.url);
     }
-    return ogShowFavicon && !hasImage && metadata !== null && metadata !== void 0 && (_metadata$og14 = metadata.og) !== null && _metadata$og14 !== void 0 && (_metadata$og14$favico = _metadata$og14.favicon) !== null && _metadata$og14$favico !== void 0 && _metadata$og14$favico.url ? metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$favico = _metadata$og15.favicon) === null || _metadata$og15$favico === void 0 ? void 0 : _metadata$og15$favico.url : '';
-  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og16 = metadata.og) === null || _metadata$og16 === void 0 ? void 0 : (_metadata$og16$favico = _metadata$og16.favicon) === null || _metadata$og16$favico === void 0 ? void 0 : _metadata$og16$favico.url, metadata === null || metadata === void 0 ? void 0 : metadata.faviconLoaded, ogShowFavicon, hasImage]);
+    return ogShowFavicon && !hasImage && metadata !== null && metadata !== void 0 && (_metadata$og16 = metadata.og) !== null && _metadata$og16 !== void 0 && (_metadata$og16$favico = _metadata$og16.favicon) !== null && _metadata$og16$favico !== void 0 && _metadata$og16$favico.url ? cachedFaviconSrc || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og17 = metadata.og) === null || _metadata$og17 === void 0 ? void 0 : (_metadata$og17$favico = _metadata$og17.favicon) === null || _metadata$og17$favico === void 0 ? void 0 : _metadata$og17$favico.url) : '';
+  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og18 = metadata.og) === null || _metadata$og18 === void 0 ? void 0 : (_metadata$og18$favico = _metadata$og18.favicon) === null || _metadata$og18$favico === void 0 ? void 0 : _metadata$og18$favico.url, metadata === null || metadata === void 0 ? void 0 : metadata.faviconLoaded, ogShowFavicon, hasImage, cachedImageSrc, cachedFaviconSrc]);
   var resolvedOrder = React.useMemo(function () {
     return order || {
       image: 1,
@@ -37640,14 +37743,15 @@ var OGMetadata = function OGMetadata(_ref) {
   React.useEffect(function () {
     if (oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) {
       if (showOGMetadata && oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] && metadataGetSuccessCallback && metadata) {
-        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, showImage || hasImage && ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) < MIN_IMAGE_SIZE || (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) < MIN_IMAGE_SIZE), metadata);
+        var show = showImage || hasImage && ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) < MIN_IMAGE_SIZE || (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) < MIN_IMAGE_SIZE);
+        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, !!show, metadata);
       } else {
         metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false, metadata);
       }
     }
   }, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata, showOGMetadata, showImage]);
   var elements = React.useMemo(function () {
-    var _resolvedOrder$image, _metadata$og17, _metadata$og17$image, _metadata$og17$image$, _resolvedOrder$title, _metadata$og18, _metadata$og18$title, _resolvedOrder$descri, _metadata$og19, _metadata$og19$descri, _resolvedOrder$link;
+    var _resolvedOrder$image, _resolvedOrder$title, _metadata$og19, _metadata$og19$title, _resolvedOrder$descri, _metadata$og20, _metadata$og20$descri, _resolvedOrder$link;
     return [showImage ? {
       key: 'image',
       order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
@@ -37659,11 +37763,13 @@ var OGMetadata = function OGMetadata(_ref) {
         maxWidth: maxWidth,
         maxHeight: maxHeight || calculatedImageHeight
       }, /*#__PURE__*/React__default.createElement(Img, {
-        src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og17 = metadata.og) === null || _metadata$og17 === void 0 ? void 0 : (_metadata$og17$image = _metadata$og17.image) === null || _metadata$og17$image === void 0 ? void 0 : (_metadata$og17$image$ = _metadata$og17$image[0]) === null || _metadata$og17$image$ === void 0 ? void 0 : _metadata$og17$image$.url,
+        src: cachedImageSrc,
         alt: 'OG image',
         shouldAnimate: shouldAnimate,
+        onLoad: onImageLoad,
         onError: function onError() {
-          return setImageLoadError(true);
+          onImageError();
+          setImageLoadError(true);
         }
       })))
     } : null, {
@@ -37674,7 +37780,7 @@ var OGMetadata = function OGMetadata(_ref) {
         shouldAnimate: shouldAnimate,
         padding: infoPadding,
         color: textPrimary
-      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og18 = metadata.og) === null || _metadata$og18 === void 0 ? void 0 : (_metadata$og18$title = _metadata$og18.title) === null || _metadata$og18$title === void 0 ? void 0 : _metadata$og18$title.trim())))
+      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og19 = metadata.og) === null || _metadata$og19 === void 0 ? void 0 : (_metadata$og19$title = _metadata$og19.title) === null || _metadata$og19$title === void 0 ? void 0 : _metadata$og19$title.trim())))
     }, {
       key: 'description',
       order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
@@ -37683,7 +37789,7 @@ var OGMetadata = function OGMetadata(_ref) {
         shouldAnimate: shouldAnimate,
         color: textSecondary,
         padding: infoPadding
-      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og19 = metadata.og) === null || _metadata$og19 === void 0 ? void 0 : (_metadata$og19$descri = _metadata$og19.description) === null || _metadata$og19$descri === void 0 ? void 0 : _metadata$og19$descri.trim()))
+      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og20 = metadata.og) === null || _metadata$og20 === void 0 ? void 0 : (_metadata$og20$descri = _metadata$og20.description) === null || _metadata$og20$descri === void 0 ? void 0 : _metadata$og20$descri.trim()))
     }, {
       key: 'link',
       order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -37698,7 +37804,7 @@ var OGMetadata = function OGMetadata(_ref) {
       var _a$order, _b$order;
       return ((_a$order = a.order) != null ? _a$order : 0) - ((_b$order = b.order) != null ? _b$order : 0);
     });
-  }, [hasImage, resolvedOrder, showOGMetadata, maxWidth, calculatedImageHeight, maxHeight, metadata === null || metadata === void 0 ? void 0 : (_metadata$og20 = metadata.og) === null || _metadata$og20 === void 0 ? void 0 : _metadata$og20.image, shouldAnimate, shouldShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og21 = metadata.og) === null || _metadata$og21 === void 0 ? void 0 : _metadata$og21.title, infoPadding, shouldShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og22 = metadata.og) === null || _metadata$og22 === void 0 ? void 0 : _metadata$og22.description, textSecondary, ogShowUrl, ogUrl]);
+  }, [hasImage, resolvedOrder, showOGMetadata, maxWidth, calculatedImageHeight, maxHeight, metadata === null || metadata === void 0 ? void 0 : (_metadata$og21 = metadata.og) === null || _metadata$og21 === void 0 ? void 0 : _metadata$og21.image, shouldAnimate, shouldShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og22 = metadata.og) === null || _metadata$og22 === void 0 ? void 0 : _metadata$og22.title, infoPadding, shouldShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og23 = metadata.og) === null || _metadata$og23 === void 0 ? void 0 : _metadata$og23.description, textSecondary, ogShowUrl, ogUrl]);
   var textContent = React.useMemo(function () {
     return /*#__PURE__*/React__default.createElement(OGText, {
       shouldAnimate: shouldAnimate,
@@ -37725,7 +37831,8 @@ var OGMetadata = function OGMetadata(_ref) {
       src: faviconUrl,
       alt: '',
       loading: 'lazy',
-      decoding: 'async'
+      decoding: 'async',
+      onLoad: onFaviconLoad
     })))) : textContent;
   }, [hasImage, elements, shouldAnimate, ogContainerShowBackground, ogShowFavicon, faviconUrl, textContent]);
   var getChannel = React.useCallback(function () {
@@ -41052,6 +41159,7 @@ var MessageList = function MessageList(_ref2) {
   var loadingRef = React.useRef(false);
   var messagesIndexMapRef = React.useRef({});
   var scrollRafRef = React.useRef(null);
+  var preserveScrollRafRef = React.useRef(null);
   var loadingMessagesTimeoutRef = React.useRef(null);
   var renderTopDate = function renderTopDate() {
     var container = scrollRef.current;
@@ -41113,6 +41221,8 @@ var MessageList = function MessageList(_ref2) {
         if (showScrollToNewMessageButton) {
           dispatch(showScrollToNewMessageButtonAC(false));
         }
+        nextDisableRef.current = false;
+        prevDisableRef.current = false;
       }
       if (scrollToReply) {
         target.scrollTop = scrollToReply;
@@ -41172,15 +41282,20 @@ var MessageList = function MessageList(_ref2) {
         cancelAnimationFrame(scrollRafRef.current);
         scrollRafRef.current = null;
       }
+      if (preserveScrollRafRef.current !== null) {
+        cancelAnimationFrame(preserveScrollRafRef.current);
+        preserveScrollRafRef.current = null;
+      }
     };
   }, []);
   var handleScrollToRepliedMessage = function handleScrollToRepliedMessage(messageId) {
     try {
+      var idx = messages.findIndex(function (msg) {
+        return msg.id === messageId;
+      });
       prevDisableRef.current = true;
       nextDisableRef.current = true;
-      if (messages.findIndex(function (msg) {
-        return msg.id === messageId;
-      }) >= 10) {
+      if (idx >= 10) {
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {
           scrollRef.current.scrollTo({
@@ -41318,29 +41433,34 @@ var MessageList = function MessageList(_ref2) {
     if (scrollToRepliedMessage) {
       loadingRef.current = false;
       scrollRef.current.style.scrollBehavior = 'inherit';
+      dispatch(setScrollToMessagesAC(null));
       var repliedMessage = document.getElementById(scrollToRepliedMessage);
       if (repliedMessage) {
-        setScrollToReply(repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200));
+        var targetTop = channel.backToLinkedChannel ? repliedMessage.offsetTop : repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2;
+        setScrollToReply(targetTop);
+        prevDisableRef.current = true;
+        nextDisableRef.current = true;
         scrollRef.current.scrollTo({
-          top: repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200),
+          top: targetTop,
           behavior: scrollToMessageBehavior
         });
         scrollRef.current.style.scrollBehavior = scrollToMessageBehavior;
         if (!channel.backToLinkedChannel && scrollToMessageHighlight) {
-          repliedMessage && repliedMessage.classList.add('highlight');
+          repliedMessage.classList.add('highlight');
         }
         var positiveValue = repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2 < 0 ? repliedMessage.offsetTop - scrollRef.current.offsetHeight * -1 : repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2;
         setTimeout(function () {
           if (!channel.backToLinkedChannel && scrollToMessageHighlight) {
-            var _repliedMessage = document.getElementById(scrollToRepliedMessage);
-            _repliedMessage && _repliedMessage.classList.remove('highlight');
+            var el = document.getElementById(scrollToRepliedMessage);
+            el && el.classList.remove('highlight');
           }
           prevDisableRef.current = false;
+          nextDisableRef.current = false;
+          shouldLoadMessagesRef.current = '';
           setScrollToReply(null);
           scrollRef.current.style.scrollBehavior = 'instant';
         }, 1000 + positiveValue * 0.1);
       }
-      dispatch(setScrollToMessagesAC(null));
     }
   }, [scrollToRepliedMessage]);
   React.useEffect(function () {
@@ -41353,8 +41473,6 @@ var MessageList = function MessageList(_ref2) {
           });
         }
       } else {
-        nextDisableRef.current = true;
-        prevDisableRef.current = true;
         scrollRef.current.scrollTo({
           top: 0,
           behavior: 'smooth'
@@ -41429,14 +41547,17 @@ var MessageList = function MessageList(_ref2) {
     }
   }, [messages, hiddenMessagesProperties, user === null || user === void 0 ? void 0 : user.id]);
   React.useEffect(function () {
-    if (scrollRef.current) {
+    var isPaginating = loadingRef.current && loadDirectionRef.current !== '';
+    var isSendScrollToBottom = scrollToNewMessage.scrollToBottom && !scrollToNewMessage.isIncomingMessage;
+    var shouldRestore = isPaginating && !isSendScrollToBottom;
+    if (shouldRestore && scrollRef.current) {
       var isAtBottom = scrollRef.current.scrollTop > -50;
       if (!isAtBottom) {
         setPreviousScrollTop(scrollRef.current.scrollTop);
         setShouldPreserveScroll(true);
       }
     }
-    if (loadingRef.current) {
+    if (shouldRestore) {
       if (loadDirectionRef.current !== 'next') {
         var lastVisibleMessage = document.getElementById(lastVisibleMessageIdRef.current);
         if (lastVisibleMessage) {
@@ -41501,7 +41622,11 @@ var MessageList = function MessageList(_ref2) {
       scrollToBottomRef.current = false;
     }
     if (shouldPreserveScroll && scrollRef.current && previousScrollTop > 0) {
-      requestAnimationFrame(function () {
+      if (preserveScrollRafRef.current !== null) {
+        cancelAnimationFrame(preserveScrollRafRef.current);
+      }
+      preserveScrollRafRef.current = requestAnimationFrame(function () {
+        preserveScrollRafRef.current = null;
         if (scrollRef.current) {
           scrollRef.current.style.scrollBehavior = 'inherit';
           scrollRef.current.scrollTop = previousScrollTop;
@@ -41519,16 +41644,25 @@ var MessageList = function MessageList(_ref2) {
   }, [messages]);
   React.useEffect(function () {
     if (messagesLoading === LOADING_STATE.LOADED) {
+      var _messages2, _channel$lastMessage4;
+      var windowHasLatest = messages.length > 0 && ((_messages2 = messages[messages.length - 1]) === null || _messages2 === void 0 ? void 0 : _messages2.id) === (channel === null || channel === void 0 ? void 0 : (_channel$lastMessage4 = channel.lastMessage) === null || _channel$lastMessage4 === void 0 ? void 0 : _channel$lastMessage4.id);
+      if (scrollToNewMessage.scrollToBottom && !scrollToNewMessage.isIncomingMessage && !windowHasLatest && connectionStatus === CONNECTION_STATUS.CONNECTED && channel !== null && channel !== void 0 && channel.id) {
+        dispatch(getMessagesAC(channel, true));
+      }
       var timeout = setTimeout(function () {
         loadingRef.current = false;
         loadFromServerRef.current = false;
+        loadDirectionRef.current = '';
         nextDisableRef.current = false;
+        prevDisableRef.current = false;
         var currentIndex = messagesIndexMapRef.current[lastVisibleMessageIdRef.current];
         if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
           handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
+          shouldLoadMessagesRef.current = '';
         }
         if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
           handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
+          shouldLoadMessagesRef.current = '';
         }
       }, 50);
       if (loadingMessagesTimeoutRef.current) {
@@ -41541,17 +41675,16 @@ var MessageList = function MessageList(_ref2) {
         clearTimeout(loadingMessagesTimeoutRef.current);
       }
     };
-  }, [messagesLoading, messages, lastVisibleMessageIdRef]);
+  }, [messagesLoading, messages, lastVisibleMessageIdRef, scrollToNewMessage, hasNextMessages, connectionStatus, channel === null || channel === void 0 ? void 0 : channel.id]);
   React.useEffect(function () {
-    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED && channel !== null && channel !== void 0 && channel.id) {
-      var _channel$lastMessage4;
+      var _channel$lastMessage5;
       loadingRef.current = false;
       prevDisableRef.current = false;
       nextDisableRef.current = false;
       clearMessagesMap();
       removeAllMessages();
-      var isWithLastVisibleMessageId = lastVisibleMessageIdRef.current !== ((_channel$lastMessage4 = channel.lastMessage) === null || _channel$lastMessage4 === void 0 ? void 0 : _channel$lastMessage4.id) && lastVisibleMessageIdRef.current ? lastVisibleMessageIdRef.current : '';
+      var isWithLastVisibleMessageId = lastVisibleMessageIdRef.current !== ((_channel$lastMessage5 = channel.lastMessage) === null || _channel$lastMessage5 === void 0 ? void 0 : _channel$lastMessage5.id) && lastVisibleMessageIdRef.current ? lastVisibleMessageIdRef.current : '';
       dispatch(getMessagesAC(channel, false, isWithLastVisibleMessageId, 0, false, 'instant', false, true));
     }
   }, [connectionStatus]);
@@ -46280,6 +46413,33 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       var fileType = file.type.split('/')[0];
       var tid = uuid.v4();
       var reader = new FileReader();
+      var handleAttachmentImageForCache = function handleAttachmentImageForCache(attachment) {
+        try {
+          var _attachment$metadata;
+          var url = URL.createObjectURL(attachment.data);
+          dispatch(setUpdateMessageAttachmentAC((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata = attachment.metadata) === null || _attachment$metadata === void 0 ? void 0 : _attachment$metadata.tmb) || '', url));
+          return Promise.resolve();
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+      var handleAttachmentVideoForCache = function handleAttachmentVideoForCache(attachment) {
+        try {
+          var _calculateRenderedIma = calculateRenderedImageWidth(attachment.metadata.szh || 400, attachment.metadata.szh || 400),
+            newWidth = _calculateRenderedIma[0],
+            newHeight = _calculateRenderedIma[1];
+          var url = URL.createObjectURL(attachment.data);
+          return Promise.resolve(getVideoFirstFrame(url, newWidth, newHeight, 0.8)).then(function (result) {
+            if (result) {
+              var _attachment$metadata2;
+              var frameBlobUrl = result.frameBlobUrl;
+              dispatch(setUpdateMessageAttachmentAC((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata2 = attachment.metadata) === null || _attachment$metadata2 === void 0 ? void 0 : _attachment$metadata2.tmb) || '', frameBlobUrl));
+            }
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
       reader.onload = function () {
         try {
           setPendingAttachment(tid, {
@@ -46292,24 +46452,26 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                   resizeImage(file).then(function (resizedFile) {
                     try {
                       return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
+                        var _resizedFile$blob;
                         var thumbnail = _ref4.thumbnail,
                           imageWidth = _ref4.imageWidth,
                           imageHeight = _ref4.imageHeight;
+                        var attachment = {
+                          data: file,
+                          upload: false,
+                          type: isMediaAttachment ? fileType : 'file',
+                          attachmentUrl: URL.createObjectURL(resizedFile.blob),
+                          tid: tid,
+                          size: isMediaAttachment ? resizedFile !== null && resizedFile !== void 0 && resizedFile.blob ? resizedFile === null || resizedFile === void 0 ? void 0 : (_resizedFile$blob = resizedFile.blob) === null || _resizedFile$blob === void 0 ? void 0 : _resizedFile$blob.size : file.size : file.size,
+                          metadata: {
+                            szw: imageWidth,
+                            szh: imageHeight,
+                            tmb: thumbnail
+                          }
+                        };
+                        handleAttachmentImageForCache(attachment);
                         setAttachments(function (prevState) {
-                          var _resizedFile$blob;
-                          return [].concat(prevState, [{
-                            data: file,
-                            upload: false,
-                            type: isMediaAttachment ? fileType : 'file',
-                            attachmentUrl: URL.createObjectURL(resizedFile.blob),
-                            tid: tid,
-                            size: isMediaAttachment ? resizedFile !== null && resizedFile !== void 0 && resizedFile.blob ? resizedFile === null || resizedFile === void 0 ? void 0 : (_resizedFile$blob = resizedFile.blob) === null || _resizedFile$blob === void 0 ? void 0 : _resizedFile$blob.size : file.size : file.size,
-                            metadata: {
-                              szw: imageWidth,
-                              szh: imageHeight,
-                              tmb: thumbnail
-                            }
-                          }]);
+                          return [].concat(prevState, [attachment]);
                         });
                       });
                     } catch (e) {
@@ -46324,21 +46486,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           width = _ref5.width,
                           height = _ref5.height,
                           duration = _ref5.duration;
+                        var attachment = {
+                          data: file,
+                          upload: false,
+                          type: isMediaAttachment ? fileType : 'file',
+                          attachmentUrl: URL.createObjectURL(file),
+                          tid: tid,
+                          size: file.size,
+                          metadata: {
+                            szw: width,
+                            szh: height,
+                            tmb: thumb,
+                            dur: duration
+                          }
+                        };
+                        handleAttachmentVideoForCache(attachment);
                         setAttachments(function (prevState) {
-                          return [].concat(prevState, [{
-                            data: file,
-                            upload: false,
-                            type: isMediaAttachment ? fileType : 'file',
-                            attachmentUrl: URL.createObjectURL(file),
-                            tid: tid,
-                            size: file.size,
-                            metadata: {
-                              szw: width,
-                              szh: height,
-                              tmb: thumb,
-                              dur: duration
-                            }
-                          }]);
+                          return [].concat(prevState, [attachment]);
                         });
                       });
                     } else {
@@ -46391,20 +46555,22 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           resizeImage(file).then(function (resizedFileData) {
                             try {
                               var resizedFile = new File([resizedFileData.blob], resizedFileData.file.name);
+                              var attachment = {
+                                data: resizedFile,
+                                upload: true,
+                                attachmentUrl: URL.createObjectURL(resizedFile),
+                                tid: tid,
+                                type: fileType,
+                                size: resizedFile.size,
+                                metadata: JSON.stringify({
+                                  tmb: metas.thumbnail,
+                                  szw: resizedFileData.newWidth,
+                                  szh: resizedFileData.newHeight
+                                })
+                              };
+                              handleAttachmentImageForCache(attachment);
                               setAttachments(function (prevState) {
-                                return [].concat(prevState, [{
-                                  data: resizedFile,
-                                  upload: true,
-                                  attachmentUrl: URL.createObjectURL(resizedFile),
-                                  tid: tid,
-                                  type: fileType,
-                                  size: resizedFile.size,
-                                  metadata: JSON.stringify({
-                                    tmb: metas.thumbnail,
-                                    szw: resizedFileData.newWidth,
-                                    szh: resizedFileData.newHeight
-                                  })
-                                }]);
+                                return [].concat(prevState, [attachment]);
                               });
                               return Promise.resolve();
                             } catch (e) {
@@ -46447,16 +46613,18 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           height: height,
                           dur: duration
                         });
+                        var attachment = {
+                          data: file,
+                          type: 'video',
+                          upload: true,
+                          size: file.size,
+                          attachmentUrl: URL.createObjectURL(file),
+                          tid: tid,
+                          metadata: metas
+                        };
+                        handleAttachmentVideoForCache(attachment);
                         setAttachments(function (prevState) {
-                          return [].concat(prevState, [{
-                            data: file,
-                            type: 'video',
-                            upload: true,
-                            size: file.size,
-                            attachmentUrl: URL.createObjectURL(file),
-                            tid: tid,
-                            metadata: metas
-                          }]);
+                          return [].concat(prevState, [attachment]);
                         });
                       });
                     } else {
@@ -48771,44 +48939,12 @@ var DisappearingMessagesStatus = styled__default.span(_templateObject19$3 || (_t
 });
 var ChevronRightIconWrapper$1 = styled__default.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _templateObject$_;
-var MonthHeader = function MonthHeader(_ref) {
-  var currentCreatedAt = _ref.currentCreatedAt,
-    previousCreatedAt = _ref.previousCreatedAt,
-    isFirst = _ref.isFirst,
-    padding = _ref.padding,
-    fullWidth = _ref.fullWidth;
-  var _useColor = useColors(),
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
-  var monthComponent = React.useMemo(function () {
-    var shouldShowHeader = isFirst || previousCreatedAt && new Date(currentCreatedAt).getMonth() !== new Date(previousCreatedAt).getMonth();
-    if (!shouldShowHeader) {
-      return null;
-    }
-    return /*#__PURE__*/React__default.createElement(MonthHeaderContainer, {
-      color: textSecondary,
-      padding: padding,
-      fullWidth: fullWidth
-    }, new Date(currentCreatedAt).toLocaleDateString('en-US', {
-      month: 'long',
-      year: 'numeric'
-    }));
-  }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
-  return monthComponent;
-};
-var MonthHeaderContainer = styled__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
-  return props.padding || '9px 12px';
-}, function (props) {
-  return props.fullWidth ? '100%' : 'auto';
-}, function (props) {
-  return props.color;
-});
-
-var _templateObject$$, _templateObject2$V;
+var _templateObject$_, _templateObject2$V, _templateObject3$N, _templateObject4$G, _templateObject5$B;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
-    background = _useColor[THEME_COLORS.BACKGROUND];
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
   var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
   var _useState = React.useState(null),
     mediaFile = _useState[0],
@@ -48823,40 +48959,63 @@ var Media = function Media(_ref) {
     dispatch(setAttachmentsAC([]));
     dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media, 35));
   }, [channel.id]);
-  return /*#__PURE__*/React__default.createElement(Container$o, null, attachments.map(function (file, index) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: file.id + "_" + index
-    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
-      currentCreatedAt: file.createdAt,
-      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
-      isFirst: index === 0,
-      padding: '9px 6px',
-      fullWidth: true
-    }), /*#__PURE__*/React__default.createElement(MediaItem, null, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(Attachment$1, {
-      attachment: _extends({}, file, {
-        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-      }),
-      handleMediaItemClick: handleMediaItemClick,
-      backgroundColor: background,
-      borderRadius: '8px',
-      isDetailsView: true
-    })) : (/*#__PURE__*/React__default.createElement(Attachment$1, {
-      attachment: _extends({}, file, {
-        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-      }),
-      handleMediaItemClick: handleMediaItemClick,
-      backgroundColor: background,
-      borderRadius: '8px',
-      isDetailsView: true
-    }))));
+  var groups = React.useMemo(function () {
+    var result = [];
+    attachments.forEach(function (att) {
+      var date = new Date(att.createdAt);
+      var key = date.getFullYear() + "-" + date.getMonth();
+      var existing = result.find(function (g) {
+        return g.key === key;
+      });
+      if (existing) {
+        existing.items.push(att);
+      } else {
+        result.push({
+          key: key,
+          date: date,
+          items: [att]
+        });
+      }
+    });
+    return result;
+  }, [attachments]);
+  return /*#__PURE__*/React__default.createElement(Container$o, null, groups.map(function (group) {
+    return /*#__PURE__*/React__default.createElement(MonthSection, {
+      key: group.key
+    }, /*#__PURE__*/React__default.createElement(StickyMonthHeader, {
+      color: textSecondary,
+      background: background
+    }, group.date.toLocaleDateString('en-US', {
+      month: 'long',
+      year: 'numeric'
+    })), /*#__PURE__*/React__default.createElement(ItemsGrid, null, group.items.map(function (file, index) {
+      return /*#__PURE__*/React__default.createElement(MediaItem, {
+        key: file.id + "_" + index
+      }, /*#__PURE__*/React__default.createElement(Attachment$1, {
+        attachment: _extends({}, file, {
+          metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
+        }),
+        handleMediaItemClick: handleMediaItemClick,
+        backgroundColor: background,
+        borderRadius: '8px',
+        isDetailsView: true
+      }));
+    })));
   }), mediaFile && /*#__PURE__*/React__default.createElement(SliderPopup, {
     channel: channel,
     setIsSliderOpen: setMediaFile,
     currentMediaFile: mediaFile
   }));
 };
-var Container$o = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var MediaItem = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var Container$o = styled__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MonthSection = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var StickyMonthHeader = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 44px;\n  z-index: 10;\n  background: ", ";\n  padding: 9px 6px;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+  return props.background;
+}, function (props) {
+  return props.color;
+});
+var ItemsGrid = styled__default.div(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n"])));
+var MediaItem = styled__default.div(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
 var _rect$3, _path$1D;
 function _extends$1H() {
@@ -48911,7 +49070,40 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$10, _templateObject2$W, _templateObject3$N, _templateObject4$G, _templateObject5$B, _templateObject6$x, _templateObject7$v, _templateObject8$q;
+var _templateObject$$;
+var MonthHeader = function MonthHeader(_ref) {
+  var currentCreatedAt = _ref.currentCreatedAt,
+    previousCreatedAt = _ref.previousCreatedAt,
+    isFirst = _ref.isFirst,
+    padding = _ref.padding,
+    fullWidth = _ref.fullWidth;
+  var _useColor = useColors(),
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+  var monthComponent = React.useMemo(function () {
+    var shouldShowHeader = isFirst || previousCreatedAt && new Date(currentCreatedAt).getMonth() !== new Date(previousCreatedAt).getMonth();
+    if (!shouldShowHeader) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(MonthHeaderContainer, {
+      color: textSecondary,
+      padding: padding,
+      fullWidth: fullWidth
+    }, new Date(currentCreatedAt).toLocaleDateString('en-US', {
+      month: 'long',
+      year: 'numeric'
+    }));
+  }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
+  return monthComponent;
+};
+var MonthHeaderContainer = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
+  return props.padding || '9px 12px';
+}, function (props) {
+  return props.fullWidth ? '100%' : 'auto';
+}, function (props) {
+  return props.color;
+});
+
+var _templateObject$10, _templateObject2$W, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$x, _templateObject7$v, _templateObject8$q;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -49043,13 +49235,13 @@ var DownloadWrapper = styled__default.a(_templateObject2$W || (_templateObject2$
 }, function (props) {
   return props.iconColor;
 });
-var ProgressWrapper$2 = styled__default.span(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var FileIconCont = styled__default.span(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var ProgressWrapper$2 = styled__default.span(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var FileIconCont = styled__default.span(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled__default.span(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var FileHoverIconCont = styled__default.span(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
@@ -49066,7 +49258,7 @@ var FileSizeAndDate = styled__default.span(_templateObject8$q || (_templateObjec
   return props.color;
 });
 
-var _templateObject$11, _templateObject2$X, _templateObject3$O, _templateObject4$H, _templateObject5$C;
+var _templateObject$11, _templateObject2$X, _templateObject3$P, _templateObject4$I, _templateObject5$D;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -49107,11 +49299,11 @@ var LinkHoverIconCont = styled__default.span(_templateObject2$X || (_templateObj
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled__default.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
-var FileItem$1 = styled__default.li(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+var LinkInfoCont = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled__default.li(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, LinkIconCont, LinkHoverIconCont);
-var LinkUrl = styled__default.span(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
+var LinkUrl = styled__default.span(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -49202,7 +49394,7 @@ function SvgVoicePreviewPause(props) {
   })));
 }
 
-var _templateObject$13, _templateObject2$Y, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$y, _templateObject7$w, _templateObject8$r;
+var _templateObject$13, _templateObject2$Y, _templateObject3$Q, _templateObject4$J, _templateObject5$E, _templateObject6$y, _templateObject7$w, _templateObject8$r;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -49338,11 +49530,11 @@ var FileHoverIconCont$1 = styled__default.span(_templateObject2$Y || (_templateO
 }, function (props) {
   return props.fill || 'transparent';
 });
-var FileItem$2 = styled__default.li(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+var FileItem$2 = styled__default.li(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, FileIconCont$1, FileHoverIconCont$1);
-var AudioInfo = styled__default.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var AudioTitle = styled__default.span(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
+var AudioInfo = styled__default.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled__default.span(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var AudioDate = styled__default.span(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
@@ -49451,7 +49643,7 @@ function SvgMoreVert(props) {
   })));
 }
 
-var _templateObject$15, _templateObject2$Z, _templateObject3$Q;
+var _templateObject$15, _templateObject2$Z, _templateObject3$R;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var channelId = _ref.channelId,
     member = _ref.member,
@@ -49555,7 +49747,7 @@ var RoleLabel = styled__default.div(_templateObject2$Z || (_templateObject2$Z =
   var color = _ref2.color;
   return color;
 });
-var RoleSpan = styled__default.span(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled__default.span(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
 function ResetLinkConfirmModal(_ref) {
   var _getInviteLinkOptions;
@@ -49592,7 +49784,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$16, _templateObject2$_, _templateObject3$R, _templateObject4$J, _templateObject5$E, _templateObject6$z, _templateObject7$x, _templateObject8$s, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$6;
+var _templateObject$16, _templateObject2$_, _templateObject3$S, _templateObject4$K, _templateObject5$F, _templateObject6$z, _templateObject7$x, _templateObject8$s, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$6;
 function loadImage$1(src) {
   return new Promise(function (resolve, reject) {
     var img = document.createElement('img');
@@ -50176,17 +50368,17 @@ var Tabs$1 = styled__default.div(_templateObject2$_ || (_templateObject2$_ = _ta
 }, function (p) {
   return p.borderColor;
 });
-var TabButton = styled__default.button(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
+var TabButton = styled__default.button(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
   return p.active ? p.activeBackgroundColor : p.backgroundColor;
 }, function (p) {
   return p.active && "\n    box-shadow: 0px 3px 6px -4px #0000001F;\n  ";
 }, function (p) {
   return p.active ? p.activeColor : p.inactiveColor;
 });
-var Description = styled__default.p(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var Description = styled__default.p(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var FieldLabel = styled__default.span(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var FieldLabel = styled__default.span(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
 var LinkField = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
@@ -50218,7 +50410,7 @@ var QrHint = styled__default.p(_templateObject13$6 || (_templateObject13$6 = _ta
   return p.color;
 });
 
-var _templateObject$17, _templateObject2$$, _templateObject3$S, _templateObject4$K, _templateObject5$F, _templateObject6$A, _templateObject7$y, _templateObject8$t, _templateObject9$m;
+var _templateObject$17, _templateObject2$$, _templateObject3$T, _templateObject4$L, _templateObject5$G, _templateObject6$A, _templateObject7$y, _templateObject8$t, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -50528,9 +50720,9 @@ var Members = function Members(_ref) {
 };
 var Container$s = styled__default.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose([""])));
 var ActionsMenu$1 = styled__default.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled__default.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
-var MemberNameWrapper = styled__default.div(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var MemberName$3 = styled__default.h4(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
+var MemberNamePresence = styled__default.div(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNameWrapper = styled__default.div(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled__default.h4(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var EditMemberIcon = styled__default.span(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
@@ -50724,7 +50916,7 @@ var DetailsTabHeader = styled__default.div(_templateObject2$10 || (_templateObje
   return props.activeTabColor;
 });
 
-var _templateObject$19, _templateObject2$11, _templateObject3$T, _templateObject4$L;
+var _templateObject$19, _templateObject2$11, _templateObject3$U, _templateObject4$M;
 var Container$u = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
   return props.active ? 'display: block' : 'display: none';
 }, function (props) {
@@ -50733,8 +50925,8 @@ var Container$u = styled__default.div(_templateObject$19 || (_templateObject$19
   return props.backgroundColor;
 });
 var AvatarCont = styled__default.div(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin-bottom: 4px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .dropdown-body {\n    top: inherit;\n    right: inherit;\n    bottom: -90px;\n  }\n"])));
-var DropDownWrapper = styled__default.div(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
-var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
+var DropDownWrapper = styled__default.div(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
 var EditChannel = function EditChannel(_ref) {
   var channel = _ref.channel,
     handleToggleEditMode = _ref.handleToggleEditMode,
@@ -50984,7 +51176,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$1a, _templateObject2$12, _templateObject3$U, _templateObject4$M, _templateObject5$G, _templateObject6$B, _templateObject7$z, _templateObject8$u, _templateObject9$n, _templateObject0$k, _templateObject1$g, _templateObject10$b, _templateObject11$9;
+var _templateObject$1a, _templateObject2$12, _templateObject3$V, _templateObject4$N, _templateObject5$H, _templateObject6$B, _templateObject7$z, _templateObject8$u, _templateObject9$n, _templateObject0$k, _templateObject1$g, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -51442,7 +51634,7 @@ var Container$v = styled__default.div(_templateObject$1a || (_templateObject$1a
 var ChannelDetailsHeader = styled__default.div(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.borderColor;
 });
-var ChatDetails = styled__default.div(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var ChatDetails = styled__default.div(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
 }, function (props) {
   return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
@@ -51451,8 +51643,8 @@ var ChatDetails = styled__default.div(_templateObject3$U || (_templateObject3$U
 }, function (props) {
   return props.thumbColor;
 });
-var AboutChannel = styled__default.div(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var AboutChannelTitle = styled__default.h4(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AboutChannel = styled__default.div(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var AboutChannelTitle = styled__default.h4(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var AboutChannelText = styled__default.h3(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
@@ -51786,17 +51978,6 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
         return msg.id === messageId;
       }) >= 10) {
         dispatch(scrollToNewMessageAC(true, false, false));
-        dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
-        var repliedMessage = document.getElementById(messageId);
-        if (repliedMessage) {
-          var scrollRef = document.getElementById('scrollableDiv');
-          if (scrollRef) {
-            scrollRef.scrollTo({
-              top: 1000,
-              behavior: 'smooth'
-            });
-          }
-        }
       } else if (channel !== null && channel !== void 0 && channel.id) {
         dispatch(getMessagesAC(channel, true, messageId, undefined, false, 'smooth', true));
       }