sceyt-chat-react-uikit 1.7.6-beta.1 → 1.7.6-beta.11

package/index.modern.js

@@ -8955,7 +8955,7 @@ var EditorTheme = {
   }
 };
 var isMessageUnsupported = function isMessageUnsupported(message) {
-  return (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.TEXT && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.MEDIA && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.FILE && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.LINK && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.POLL && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.DELETED && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.SYSTEM;
+  return (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.TEXT && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.MEDIA && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.FILE && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.LINK && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.POLL && !((message === null || message === void 0 ? void 0 : message.type) === MESSAGE_TYPE.DELETED && message.state === MESSAGE_STATUS.DELETE) && (message === null || message === void 0 ? void 0 : message.type) !== MESSAGE_TYPE.SYSTEM;
 };
 var deleteVoteFromPollDetails = function deleteVoteFromPollDetails(votes, deletedVote) {
   var newVotes = [];
@@ -9101,15 +9101,6 @@ var query = {
   ReactionsQuery: null,
   PollVotesQueries: {}
 };
-var unreadScrollTo = {
-  isScrolled: true
-};
-function getUnreadScrollTo() {
-  return unreadScrollTo.isScrolled;
-}
-function setUnreadScrollTo(state) {
-  unreadScrollTo.isScrolled = state;
-}
 function getUploadImageIcon() {
   return UploadImageIcon;
 }
@@ -10314,6 +10305,11 @@ function showScrollToNewMessageButtonAC(state) {
     state: state
   });
 }
+function setUnreadScrollToAC(state) {
+  return setUnreadScrollTo({
+    state: state
+  });
+}
 function loadMoreMessagesAC(channelId, limit, direction, messageId, hasNext) {
   return {
     type: LOAD_MORE_MESSAGES,
@@ -10646,6 +10642,51 @@ var MESSAGE_LOAD_DIRECTION = {
   PREV: 'prev',
   NEXT: 'next'
 };
+var shouldSkipDeliveryStatusUpdate = function shouldSkipDeliveryStatusUpdate(markerName, currentDeliveryStatus) {
+  if (markerName === MESSAGE_DELIVERY_STATUS.SENT && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.READ && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+    return true;
+  }
+  return false;
+};
+var updateMessageDeliveryStatusAndMarkers = function updateMessageDeliveryStatusAndMarkers(message, markerName) {
+  var _message$markerTotals;
+  if (shouldSkipDeliveryStatusUpdate(markerName, message.deliveryStatus)) {
+    return {
+      markerTotals: message.markerTotals,
+      deliveryStatus: message.deliveryStatus
+    };
+  }
+  var markerInMarkersTotal = message === null || message === void 0 ? void 0 : (_message$markerTotals = message.markerTotals) === null || _message$markerTotals === void 0 ? void 0 : _message$markerTotals.find(function (marker) {
+    return marker.name === markerName;
+  });
+  if (!markerInMarkersTotal) {
+    return {
+      markerTotals: [].concat(message.markerTotals || [], [{
+        name: markerName,
+        count: 1
+      }]),
+      deliveryStatus: markerName
+    };
+  } else {
+    return {
+      markerTotals: message.markerTotals.map(function (marker) {
+        return marker.name === markerName ? _extends({}, marker, {
+          count: marker.count + 1
+        }) : marker;
+      }),
+      deliveryStatus: markerName
+    };
+  }
+};
 var sendMessageHandler;
 var setSendMessageHandler = function setSendMessageHandler(handler) {
   sendMessageHandler = handler;
@@ -10677,7 +10718,8 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
       if (updatedParams.state === MESSAGE_STATUS.DELETE) {
         return _extends({}, updatedParams);
       }
-      var updatedMessage = _extends({}, message, updatedParams);
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, updatedParams.deliveryStatus);
+      var updatedMessage = _extends({}, message, updatedParams, statusUpdatedMessage);
       if (voteDetails) {
         updatedMessage = _extends({}, updatedMessage, {
           pollDetails: handleVoteDetails(voteDetails, updatedMessage)
@@ -10688,6 +10730,15 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
     return message;
   });
 };
+var updateMessageStatusOnAllMessages = function updateMessageStatusOnAllMessages(name, markersMap) {
+  activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
+    if (markersMap[message.id]) {
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+      return _extends({}, message, statusUpdatedMessage);
+    }
+    return message;
+  });
+};
 var removeMessageFromAllMessages = function removeMessageFromAllMessages(messageId) {
   activeChannelAllMessages = [].concat(activeChannelAllMessages).filter(function (msg) {
     return !(msg.id === messageId || msg.tid === messageId);
@@ -10695,12 +10746,11 @@ var removeMessageFromAllMessages = function removeMessageFromAllMessages(message
 };
 var updateMarkersOnAllMessages = function updateMarkersOnAllMessages(markersMap, name) {
   activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
-    if (markersMap[message.id] && (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-      return _extends({}, message, {
-        deliveryStatus: name
-      });
+    if (!markersMap[message.id]) {
+      return message;
     }
-    return message;
+    var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+    return _extends({}, message, statusUpdatedMessage);
   });
 };
 var getAllMessages = function getAllMessages() {
@@ -10756,17 +10806,18 @@ var getFromAllMessagesByMessageId = function getFromAllMessagesByMessageId(messa
   return messagesForAdd;
 };
 function setMessagesToMap(channelId, messages) {
-  messagesMap[channelId] = messages;
+  if (!messagesMap[channelId]) {
+    messagesMap[channelId] = {};
+  }
+  messages.forEach(function (msg) {
+    messagesMap[channelId][msg.id] = msg;
+  });
 }
 function addMessageToMap(channelId, message) {
-  if (messagesMap[channelId] && messagesMap[channelId].length >= MESSAGES_MAX_LENGTH) {
-    messagesMap[channelId].shift();
-  }
-  if (messagesMap[channelId]) {
-    messagesMap[channelId].push(message);
-  } else {
-    messagesMap[channelId] = [message];
+  if (!messagesMap[channelId]) {
+    messagesMap[channelId] = {};
   }
+  messagesMap[channelId][message.id] = message;
   if (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.PENDING) {
     setPendingMessage(channelId, message);
   }
@@ -10778,7 +10829,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
       var _pendingMessagesMap$c;
       var updatedPendingMessages = (_pendingMessagesMap$c = pendingMessagesMap[channelId]) === null || _pendingMessagesMap$c === void 0 ? void 0 : _pendingMessagesMap$c.map(function (msg) {
         if (msg.tid === updatedMessage.messageId) {
-          return _extends({}, msg, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(msg, updatedMessage.params.deliveryStatus);
+          return _extends({}, msg, updatedMessage.params, statusUpdatedMessage);
         }
         return msg;
       });
@@ -10792,15 +10844,16 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
   var updatedMessageData = null;
   if (messagesMap[channelId]) {
     var messagesList = [];
-    for (var _iterator = _createForOfIteratorHelperLoose(messagesMap[channelId]), _step; !(_step = _iterator()).done;) {
-      var mes = _step.value;
+    for (var _i = 0, _Object$values = Object.values(messagesMap[channelId] || {}); _i < _Object$values.length; _i++) {
+      var mes = _Object$values[_i];
       if (mes.tid === updatedMessage.messageId || mes.id === updatedMessage.messageId) {
         if (updatedMessage.params.state === MESSAGE_STATUS.DELETE) {
           updatedMessageData = _extends({}, updatedMessage.params);
           messagesList.push(_extends({}, mes, updatedMessageData));
           continue;
         } else {
-          updatedMessageData = _extends({}, mes, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, updatedMessage.params.deliveryStatus);
+          updatedMessageData = _extends({}, mes, updatedMessage.params, statusUpdatedMessage);
           var voteDetailsData = void 0;
           if (voteDetails) {
             voteDetailsData = handleVoteDetails(voteDetails, updatedMessageData);
@@ -10814,28 +10867,29 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
       }
       messagesList.push(mes);
     }
-    messagesMap[channelId] = messagesList;
+    messagesList.forEach(function (msg) {
+      if (!messagesMap[channelId]) {
+        messagesMap[channelId] = {};
+      }
+      messagesMap[channelId][msg.id] = msg;
+    });
   }
   return updatedMessageData;
 }
 function addReactionToMessageOnMap(channelId, message, reaction, isSelf) {
   if (messagesMap[channelId]) {
-    messagesMap[channelId] = messagesMap[channelId].map(function (msg) {
-      if (msg.id === message.id) {
-        var slfReactions = [].concat(msg.userReactions);
-        if (isSelf) {
-          if (slfReactions) {
-            slfReactions.push(reaction);
-          } else {
-            slfReactions = [reaction];
-          }
-        }
-        return _extends({}, msg, {
-          userReactions: slfReactions,
-          reactionTotals: message.reactionTotals
-        });
+    var messageShouldBeUpdated = messagesMap[channelId][message.id];
+    var slfReactions = [].concat(messageShouldBeUpdated.userReactions);
+    if (isSelf) {
+      if (slfReactions) {
+        slfReactions.push(reaction);
+      } else {
+        slfReactions = [reaction];
       }
-      return msg;
+    }
+    messagesMap[channelId][message.id] = _extends({}, messageShouldBeUpdated, {
+      userReactions: slfReactions,
+      reactionTotals: message.reactionTotals
     });
   }
 }
@@ -10860,20 +10914,16 @@ var addReactionOnAllMessages = function addReactionOnAllMessages(message, reacti
 };
 function removeReactionToMessageOnMap(channelId, message, reaction, isSelf) {
   if (messagesMap[channelId]) {
-    messagesMap[channelId] = messagesMap[channelId].map(function (msg) {
-      if (msg.id === message.id) {
-        var userReactions = msg.userReactions;
-        if (isSelf) {
-          userReactions = msg.userReactions.filter(function (selfReaction) {
-            return selfReaction.key !== reaction.key;
-          });
-        }
-        return _extends({}, msg, {
-          reactionTotals: message.reactionTotals,
-          userReactions: userReactions
-        });
-      }
-      return msg;
+    var messageShouldBeUpdated = messagesMap[channelId][message.id];
+    var userReactions = messageShouldBeUpdated.userReactions;
+    if (isSelf) {
+      userReactions = messageShouldBeUpdated.userReactions.filter(function (selfReaction) {
+        return selfReaction.key !== reaction.key;
+      });
+    }
+    messagesMap[channelId][message.id] = _extends({}, messageShouldBeUpdated, {
+      reactionTotals: message.reactionTotals,
+      userReactions: userReactions
     });
   }
 }
@@ -10896,15 +10946,18 @@ var removeReactionOnAllMessages = function removeReactionOnAllMessages(message,
 };
 function updateMessageStatusOnMap(channelId, newMarkers) {
   if (messagesMap[channelId] && newMarkers && newMarkers.markersMap) {
-    messagesMap[channelId] = messagesMap[channelId].map(function (mes) {
-      var name = newMarkers.name;
-      var markersMap = newMarkers.markersMap;
-      if (markersMap[mes.id] && (mes.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-        return _extends({}, mes, {
-          deliveryStatus: name
-        });
+    var messageIds = [];
+    Object.keys(newMarkers.markersMap).forEach(function (messageId) {
+      if (newMarkers.markersMap[messageId]) {
+        messageIds.push(messageId);
+      }
+    });
+    messageIds.forEach(function (messageId) {
+      var messageShouldBeUpdated = messagesMap[channelId][messageId];
+      if (messageShouldBeUpdated) {
+        var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(messageShouldBeUpdated, newMarkers.name);
+        messagesMap[channelId][messageId] = _extends({}, messageShouldBeUpdated, statusUpdatedMessage);
       }
-      return mes;
     });
   }
 }
@@ -10915,9 +10968,7 @@ function removeMessagesFromMap(channelId) {
   delete messagesMap[channelId];
 }
 function removeMessageFromMap(channelId, messageId) {
-  messagesMap[channelId] = [].concat(messagesMap[channelId]).filter(function (msg) {
-    return !(msg.id === messageId || msg.tid === messageId);
-  });
+  delete messagesMap[channelId][messageId];
   store.dispatch(removePendingMessageAC(channelId, messageId));
 }
 function updatePendingMessageOnMap(channelId, messageId, updatedMessage) {
@@ -11125,7 +11176,8 @@ var initialState$1 = {
   pollVotesLoadingState: {},
   pollVotesInitialCount: null,
   pendingPollActions: {},
-  pendingMessagesMap: {}
+  pendingMessagesMap: {},
+  unreadScrollTo: true
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -11159,6 +11211,9 @@ var messageSlice = createSlice({
     setShowScrollToNewMessageButton: function setShowScrollToNewMessageButton(state, action) {
       state.showScrollToNewMessageButton = action.payload.state;
     },
+    setUnreadScrollTo: function setUnreadScrollTo(state, action) {
+      state.unreadScrollTo = action.payload.state;
+    },
     setMessages: function setMessages(state, action) {
       state.activeChannelMessages = action.payload.messages;
     },
@@ -11219,8 +11274,18 @@ var messageSlice = createSlice({
         markersMap = _action$payload2.markersMap;
       var markerName = name;
       for (var index = 0; index < state.activeChannelMessages.length; index++) {
-        if (markersMap[state.activeChannelMessages[index].id] && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || markerName === MESSAGE_DELIVERY_STATUS.READ) && state.activeChannelMessages[index].state !== 'Deleted') {
-          state.activeChannelMessages[index].deliveryStatus = markerName;
+        if (!markersMap[state.activeChannelMessages[index].id]) {
+          continue;
+        }
+        if (state.activeChannelMessages[index].state !== 'Deleted') {
+          var message = state.activeChannelMessages[index];
+          var _updateMessageDeliver = updateMessageDeliveryStatusAndMarkers(message, markerName),
+            markerTotals = _updateMessageDeliver.markerTotals,
+            deliveryStatus = _updateMessageDeliver.deliveryStatus;
+          state.activeChannelMessages[index] = _extends({}, message, {
+            markerTotals: markerTotals,
+            deliveryStatus: deliveryStatus
+          });
         }
       }
     },
@@ -11237,10 +11302,15 @@ var messageSlice = createSlice({
           if (params.state === MESSAGE_STATUS.DELETE) {
             return _extends({}, params);
           } else {
-            var messageData = _extends({}, message, params);
+            var statusUpdatedMessage = null;
+            if (params !== null && params !== void 0 && params.deliveryStatus) {
+              statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, params.deliveryStatus);
+            }
+            var messageOldData = _extends({}, message, params, statusUpdatedMessage);
+            var messageData = _extends({}, messageOldData);
             if (voteDetails) {
-              messageData = _extends({}, messageData, {
-                pollDetails: handleVoteDetails(voteDetails, messageData)
+              messageData = _extends({}, messageOldData, {
+                pollDetails: handleVoteDetails(voteDetails, messageOldData)
               });
             }
             if (messageData.deliveryStatus !== MESSAGE_DELIVERY_STATUS.PENDING) {
@@ -11684,6 +11754,7 @@ var _messageSlice$actions = messageSlice.actions,
   setScrollToMentionedMessage = _messageSlice$actions.setScrollToMentionedMessage,
   setScrollToNewMessage = _messageSlice$actions.setScrollToNewMessage,
   setShowScrollToNewMessageButton = _messageSlice$actions.setShowScrollToNewMessageButton,
+  setUnreadScrollTo = _messageSlice$actions.setUnreadScrollTo,
   setMessages = _messageSlice$actions.setMessages,
   addMessages = _messageSlice$actions.addMessages,
   updateMessagesStatus = _messageSlice$actions.updateMessagesStatus,
@@ -14008,8 +14079,8 @@ function updateActiveChannelMembersRemove(removedMembers) {
 var _marked$1 = /*#__PURE__*/_regenerator().m(watchForEvents);
 function watchForEvents() {
   var SceytChatClient, channelListener, connectionListener, usersTimeout, chan, _loop;
-  return _regenerator().w(function (_context3) {
-    while (1) switch (_context3.n) {
+  return _regenerator().w(function (_context2) {
+    while (1) switch (_context2.n) {
       case 0:
         SceytChatClient = getClient();
         channelListener = new SceytChatClient.ChannelListener();
@@ -14407,46 +14478,46 @@ function watchForEvents() {
             SceytChatClient.removeConnectionListener('CONNECTION_EVENTS');
           };
         });
-        _loop = /*#__PURE__*/_regenerator().m(function _callee2() {
-          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _pollDetailsData$chan, _pollDetailsData$chan2, _channel1, pollDetails, messageId, pollDetailsData, _activeChannelId0, addedVotes, deletedVotes, objs, _iterator, _step, vote, _iterator2, _step2, _vote, _i, _objs, obj, _store$getState$Messa, key, hasNext, _i2, _objs2, _obj, _pollDetailsData$chan3, _channel10, _pollDetails, _messageId, _pollDetailsData, _activeChannelId1, _deletedVotes, _objs3, _iterator3, _step3, _vote2, _i3, _objs4, _obj2, _i4, _objs5, _obj3, _pollDetailsData2$cha, _channel11, _pollDetails2, _messageId2, _activeChannelId10, _pollDetailsData2, retractedVotes, _objs6, _iterator4, _step4, _vote4, _i5, _objs7, _obj4, _iterator5, _step5, _vote3, _channel12, _messageId3, _activeChannelId11, _obj5, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId13, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId14, i, _channel25, _channel26, _channelId2, from, name, status, _t, _t2;
-          return _regenerator().w(function (_context2) {
-            while (1) switch (_context2.p = _context2.n) {
+        _loop = /*#__PURE__*/_regenerator().m(function _callee() {
+          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, _iterator, _step, messageId, isPendingMessage, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _pollDetailsData$chan, _pollDetailsData$chan2, _channel1, pollDetails, _messageId, pollDetailsData, _activeChannelId0, addedVotes, deletedVotes, objs, _iterator2, _step2, vote, _iterator3, _step3, _vote, _i, _objs, obj, _store$getState$Messa, key, hasNext, _i2, _objs2, _obj, _pollDetailsData$chan3, _channel10, _pollDetails, _messageId2, _pollDetailsData, _activeChannelId1, _deletedVotes, _objs3, _iterator4, _step4, _vote2, _i3, _objs4, _obj2, _i4, _objs5, _obj3, _pollDetailsData2$cha, _channel11, _pollDetails2, _messageId3, _activeChannelId10, _pollDetailsData2, retractedVotes, _objs6, _iterator5, _step5, _vote4, _i5, _objs7, _obj4, _iterator6, _step6, _vote3, _channel12, _messageId4, _activeChannelId11, _obj5, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId13, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId14, i, _channel25, _channel26, _channelId2, from, name, status, _t, _t2;
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.p = _context.n) {
               case 0:
-                _context2.p = 0;
-                _context2.n = 1;
+                _context.p = 0;
+                _context.n = 1;
                 return take(chan);
               case 1:
-                _yield$take = _context2.v;
+                _yield$take = _context.v;
                 type = _yield$take.type;
                 args = _yield$take.args;
                 _t = type;
-                _context2.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 22 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 24 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 25 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 36 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 46 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 51 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 68 : _t === CHANNEL_EVENT_TYPES.DELETE ? 75 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 77 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 82 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 87 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 95 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 105 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 113 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 121 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 125 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 130 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 133 : _t === CHANNEL_EVENT_TYPES.MUTE ? 139 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 141 : _t === CHANNEL_EVENT_TYPES.PINED ? 143 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 145 : _t === CHANNEL_EVENT_TYPES.HIDE ? 147 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 149 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 151 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 154 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 157 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 164 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 165 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 166 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 175 : 178;
+                _context.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 22 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 24 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 25 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 36 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 46 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 51 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 68 : _t === CHANNEL_EVENT_TYPES.DELETE ? 81 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 83 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 88 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 93 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 101 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 111 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 119 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 127 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 131 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 136 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 139 : _t === CHANNEL_EVENT_TYPES.MUTE ? 145 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 147 : _t === CHANNEL_EVENT_TYPES.PINED ? 149 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 151 : _t === CHANNEL_EVENT_TYPES.HIDE ? 153 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 155 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 157 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 160 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 163 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 170 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 171 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 172 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 181 : 184;
                 break;
               case 2:
                 createdChannel = args.createdChannel;
                 log.info('CHANNEL_EVENT_CREATE ... ', createdChannel);
                 channelFilterTypes = getChannelTypesFilter();
                 if (!(channelFilterTypes !== null && channelFilterTypes !== void 0 && channelFilterTypes.length ? channelFilterTypes.includes(createdChannel.type) : true)) {
-                  _context2.n = 6;
+                  _context.n = 6;
                   break;
                 }
                 getFromContacts = getShowOnlyContactUsers();
                 channelExists = checkChannelExists(createdChannel.id);
                 if (channelExists) {
-                  _context2.n = 5;
+                  _context.n = 5;
                   break;
                 }
                 if (!getFromContacts) {
-                  _context2.n = 3;
+                  _context.n = 3;
                   break;
                 }
-                _context2.n = 3;
+                _context.n = 3;
                 return put(getContactsAC());
               case 3:
-                _context2.n = 4;
+                _context.n = 4;
                 return call(setChannelInMap, createdChannel);
               case 4:
-                _context2.n = 5;
+                _context.n = 5;
                 return put(setChannelToAddAC(JSON.parse(JSON.stringify(createdChannel))));
               case 5:
                 _chan = getChannelFromAllChannels(createdChannel.id);
@@ -14454,73 +14525,73 @@ function watchForEvents() {
                   addChannelToAllChannels(createdChannel);
                 }
               case 6:
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 7:
                 channel = args.channel;
                 log.info('channel JOIN ... . ', channel);
-                _context2.n = 8;
+                _context.n = 8;
                 return call(getActiveChannelId);
               case 8:
                 _chan2 = getChannelFromAllChannels(channel.id);
                 if (!_chan2) {
                   addChannelToAllChannels(channel);
                 }
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 9:
                 _channel = args.channel, member = args.member;
                 log.info('channel LEAVE ... ', _channel, member);
                 _channelExists = checkChannelExists(_channel.id);
-                _context2.n = 10;
+                _context.n = 10;
                 return call(getActiveChannelId);
               case 10:
-                _activeChannelId = _context2.v;
+                _activeChannelId = _context.v;
                 if (!(member.id === SceytChatClient.user.id)) {
-                  _context2.n = 15;
+                  _context.n = 15;
                   break;
                 }
-                _context2.n = 11;
+                _context.n = 11;
                 return put(switchChannelActionAC(null));
               case 11:
-                _context2.n = 12;
+                _context.n = 12;
                 return put(removeChannelAC(_channel.id));
               case 12:
                 removeChannelFromMap(_channel.id);
                 deleteChannelFromAllChannels(_channel.id);
-                _context2.n = 13;
+                _context.n = 13;
                 return put(setChannelToRemoveAC(_channel));
               case 13:
-                _context2.n = 14;
+                _context.n = 14;
                 return put(removeChannelCachesAC(_channel.id));
               case 14:
-                _context2.n = 21;
+                _context.n = 21;
                 break;
               case 15:
                 groupName = getChannelGroupName(_channel);
                 if (!_channelExists) {
-                  _context2.n = 19;
+                  _context.n = 19;
                   break;
                 }
                 updateChannelData = {};
                 if (!(_activeChannelId === _channel.id)) {
-                  _context2.n = 18;
+                  _context.n = 18;
                   break;
                 }
-                _context2.n = 16;
+                _context.n = 16;
                 return put(removeMemberFromListAC([member]));
               case 16:
-                _context2.n = 17;
+                _context.n = 17;
                 return call(updateActiveChannelMembersRemove, [member]) || {};
               case 17:
-                updateChannelData = _context2.v;
+                updateChannelData = _context.v;
               case 18:
-                _context2.n = 19;
+                _context.n = 19;
                 return put(updateChannelDataAC(_channel.id, _extends({
                   memberCount: _channel.memberCount,
                   muted: _channel.muted,
                   mutedTill: _channel.mutedTill
                 }, updateChannelData)));
               case 19:
-                _context2.n = 20;
+                _context.n = 20;
                 return put(updateSearchedChannelDataAC(_channel.id, {
                   memberCount: _channel.memberCount,
                   muted: _channel.muted,
@@ -14533,80 +14604,80 @@ function watchForEvents() {
                   mutedTill: _channel.mutedTill
                 });
               case 21:
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 22:
                 log.info('channel BLOCK ... ');
                 _channel2 = args.channel;
                 _channelExists2 = checkChannelExists(_channel2.id);
                 if (!_channelExists2) {
-                  _context2.n = 23;
+                  _context.n = 23;
                   break;
                 }
-                _context2.n = 23;
+                _context.n = 23;
                 return put(removeChannelAC(_channel2.id));
               case 23:
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 24:
                 log.info('channel UNBLOCK ... ');
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 25:
                 _channel3 = args.channel, removedMembers = args.removedMembers;
                 log.info('channel KICK_MEMBERS ... ', removedMembers);
-                _context2.n = 26;
+                _context.n = 26;
                 return call(getActiveChannelId);
               case 26:
-                _activeChannelId2 = _context2.v;
+                _activeChannelId2 = _context.v;
                 _channelExists3 = checkChannelExists(_channel3.id);
                 if (!_channelExists3) {
-                  _context2.n = 35;
+                  _context.n = 35;
                   break;
                 }
                 if (!removedMembers.find(function (mem) {
                   return mem.id === SceytChatClient.user.id;
                 })) {
-                  _context2.n = 30;
+                  _context.n = 30;
                   break;
                 }
                 removeChannelFromMap(_channel3.id);
-                _context2.n = 27;
+                _context.n = 27;
                 return put(removeChannelAC(_channel3.id));
               case 27:
-                _context2.n = 28;
+                _context.n = 28;
                 return call(getLastChannelFromMap);
               case 28:
-                activeChannel = _context2.v;
+                activeChannel = _context.v;
                 if (!activeChannel) {
-                  _context2.n = 29;
+                  _context.n = 29;
                   break;
                 }
-                _context2.n = 29;
+                _context.n = 29;
                 return put(switchChannelActionAC(JSON.parse(JSON.stringify(activeChannel))));
               case 29:
-                _context2.n = 35;
+                _context.n = 35;
                 break;
               case 30:
                 _updateChannelData = {};
                 if (!(_activeChannelId2 === _channel3.id)) {
-                  _context2.n = 33;
+                  _context.n = 33;
                   break;
                 }
-                _context2.n = 31;
+                _context.n = 31;
                 return put(removeMemberFromListAC(removedMembers));
               case 31:
-                _context2.n = 32;
+                _context.n = 32;
                 return call(updateActiveChannelMembersRemove, removedMembers) || {};
               case 32:
-                _updateChannelData = _context2.v;
+                _updateChannelData = _context.v;
               case 33:
                 _groupName = getChannelGroupName(_channel3);
-                _context2.n = 34;
+                _context.n = 34;
                 return put(updateSearchedChannelDataAC(_channel3.id, {
                   memberCount: _channel3.memberCount,
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
                 }, _groupName));
               case 34:
-                _context2.n = 35;
+                _context.n = 35;
                 return put(updateChannelDataAC(_channel3.id, _extends({
                   memberCount: _channel3.memberCount,
                   muted: _channel3.muted,
@@ -14618,50 +14689,50 @@ function watchForEvents() {
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
                 });
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 36:
                 _channel4 = args.channel, addedMembers = args.addedMembers;
                 log.info('channel ADD_MEMBERS ... ', addedMembers);
-                _context2.n = 37;
+                _context.n = 37;
                 return call(getActiveChannelId);
               case 37:
-                _activeChannelId3 = _context2.v;
+                _activeChannelId3 = _context.v;
                 _channelExists4 = checkChannelExists(_channel4.id);
                 if (!_channelExists4) {
-                  _context2.n = 42;
+                  _context.n = 42;
                   break;
                 }
                 _updateChannelData2 = {};
                 if (!(_activeChannelId3 === _channel4.id)) {
-                  _context2.n = 40;
+                  _context.n = 40;
                   break;
                 }
-                _context2.n = 38;
+                _context.n = 38;
                 return put(addMembersToListAC(addedMembers));
               case 38:
-                _context2.n = 39;
+                _context.n = 39;
                 return call(updateActiveChannelMembersAdd, addedMembers) || {};
               case 39:
-                _updateChannelData2 = _context2.v;
+                _updateChannelData2 = _context.v;
               case 40:
-                _context2.n = 41;
+                _context.n = 41;
                 return put(updateChannelDataAC(_channel4.id, _extends({
                   memberCount: _channel4.memberCount,
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
                 }, _updateChannelData2)));
               case 41:
-                _context2.n = 44;
+                _context.n = 44;
                 break;
               case 42:
-                _context2.n = 43;
+                _context.n = 43;
                 return call(setChannelInMap, _channel4);
               case 43:
-                _context2.n = 44;
+                _context.n = 44;
                 return put(setAddedToChannelAC(JSON.parse(JSON.stringify(_channel4))));
               case 44:
                 _groupName2 = getChannelGroupName(_channel4);
-                _context2.n = 45;
+                _context.n = 45;
                 return put(updateSearchedChannelDataAC(_channel4.id, {
                   memberCount: _channel4.memberCount,
                   muted: _channel4.muted,
@@ -14673,17 +14744,17 @@ function watchForEvents() {
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
                 });
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 46:
                 log.info('channel UPDATE_CHANNEL ... ');
                 updatedChannel = args.updatedChannel;
                 _channelExists5 = checkChannelExists(updatedChannel.id);
                 subject = updatedChannel.subject, avatarUrl = updatedChannel.avatarUrl, muted = updatedChannel.muted, mutedTill = updatedChannel.mutedTill, metadata = updatedChannel.metadata;
                 if (!_channelExists5) {
-                  _context2.n = 49;
+                  _context.n = 49;
                   break;
                 }
-                _context2.n = 47;
+                _context.n = 47;
                 return put(updateChannelDataAC(updatedChannel.id, {
                   subject: subject,
                   avatarUrl: avatarUrl,
@@ -14691,21 +14762,21 @@ function watchForEvents() {
                   mutedTill: mutedTill
                 }));
               case 47:
-                _context2.n = 48;
+                _context.n = 48;
                 return call(getActiveChannelId);
               case 48:
-                _activeChannelId4 = _context2.v;
+                _activeChannelId4 = _context.v;
                 if (!(_activeChannelId4 === updatedChannel.id)) {
-                  _context2.n = 49;
+                  _context.n = 49;
                   break;
                 }
-                _context2.n = 49;
+                _context.n = 49;
                 return put(setActiveChannelAC(_extends({}, updatedChannel, {
                   metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
                 })));
               case 49:
                 _groupName3 = getChannelGroupName(updatedChannel);
-                _context2.n = 50;
+                _context.n = 50;
                 return put(updateSearchedChannelDataAC(updatedChannel.id, {
                   subject: subject,
                   avatarUrl: avatarUrl,
@@ -14720,67 +14791,65 @@ function watchForEvents() {
                   mutedTill: mutedTill,
                   metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
                 });
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 51:
                 _channel5 = args.channel, message = args.message;
                 log.info('channel MESSAGE ... id : ', message.id, ', channel.id: ', _channel5.id);
                 messageToHandle = handleNewMessages ? handleNewMessages(message, _channel5) : message;
                 _channelFilterTypes = getChannelTypesFilter();
                 if (!(messageToHandle && _channel5 && (_channelFilterTypes !== null && _channelFilterTypes !== void 0 && _channelFilterTypes.length ? _channelFilterTypes.includes(_channel5.type) : true))) {
-                  _context2.n = 67;
+                  _context.n = 67;
                   break;
                 }
                 _channel5.metadata = isJSON(_channel5.metadata) ? JSON.parse(_channel5.metadata) : _channel5.metadata;
-                _context2.n = 52;
+                _context.n = 52;
                 return call(getActiveChannelId);
               case 52:
-                _activeChannelId5 = _context2.v;
+                _activeChannelId5 = _context.v;
                 _channelExists6 = checkChannelExists(_channel5.id);
                 channelForAdd = JSON.parse(JSON.stringify(_channel5));
-                _context2.n = 53;
+                _context.n = 53;
                 return put(addChannelAC(channelForAdd));
               case 53:
                 if (_channelExists6) {
-                  _context2.n = 55;
+                  _context.n = 55;
                   break;
                 }
-                _context2.n = 54;
+                _context.n = 54;
                 return call(setChannelInMap, _channel5);
               case 54:
-                _context2.n = 56;
+                _context.n = 56;
                 break;
               case 55:
                 if (message.repliedInThread) {
-                  _context2.n = 56;
+                  _context.n = 56;
                   break;
                 }
-                _context2.n = 56;
+                _context.n = 56;
                 return put(updateChannelLastMessageAC(message, channelForAdd));
               case 56:
                 if (!(_channel5.id === _activeChannelId5)) {
-                  _context2.n = 58;
+                  _context.n = 58;
                   break;
                 }
                 if (getHasNextCached()) {
-                  _context2.n = 57;
+                  _context.n = 57;
                   break;
                 }
-                _context2.n = 57;
+                _context.n = 57;
                 return put(addMessageAC(message));
               case 57:
                 addAllMessages([message], MESSAGE_LOAD_DIRECTION.NEXT);
                 hasNextMessage = store.getState().MessageReducer.messagesHasNext;
                 if (!(!getHasNextCached() && !hasNextMessage)) {
-                  _context2.n = 58;
+                  _context.n = 58;
                   break;
                 }
-                _context2.n = 58;
+                _context.n = 58;
                 return put(scrollToNewMessageAC(true, false, true));
               case 58:
-                if (getMessagesFromMap(_channel5.id) && getMessagesFromMap(_channel5.id).length) {
-                  addMessageToMap(_channel5.id, message);
-                }
-                _context2.n = 59;
+                addMessageToMap(_channel5.id, message);
+                _context.n = 59;
                 return put(updateChannelDataAC(_channel5.id, {
                   messageCount: channelForAdd.messageCount,
                   unread: channelForAdd.unread,
@@ -14798,7 +14867,7 @@ function watchForEvents() {
                 }));
               case 59:
                 _groupName4 = getChannelGroupName(_channel5);
-                _context2.n = 60;
+                _context.n = 60;
                 return put(updateSearchedChannelDataAC(_channel5.id, {
                   messageCount: channelForAdd.messageCount,
                   unread: channelForAdd.unread,
@@ -14817,25 +14886,25 @@ function watchForEvents() {
               case 60:
                 showNotifications = getShowNotifications();
                 if (!(showNotifications && !message.silent && message.user.id !== SceytChatClient.user.id && !_channel5.muted)) {
-                  _context2.n = 63;
+                  _context.n = 63;
                   break;
                 }
                 if (!(Notification.permission === 'granted')) {
-                  _context2.n = 63;
+                  _context.n = 63;
                   break;
                 }
-                _context2.n = 61;
+                _context.n = 61;
                 return select(browserTabIsActiveSelector);
               case 61:
-                tabIsActive = _context2.v;
+                tabIsActive = _context.v;
                 if (!(document.visibilityState !== 'visible' || !tabIsActive || _channel5.id !== _activeChannelId5)) {
-                  _context2.n = 63;
+                  _context.n = 63;
                   break;
                 }
-                _context2.n = 62;
+                _context.n = 62;
                 return select(contactsMapSelector);
               case 62:
-                contactsMap = _context2.v;
+                contactsMap = _context.v;
                 _getFromContacts = getShowOnlyContactUsers();
                 state = store.getState();
                 theme = state.ThemeReducer.theme || 'light';
@@ -14856,16 +14925,16 @@ function watchForEvents() {
                 }) : undefined);
               case 63:
                 if (!(message.repliedInThread && message.parentMessage.id)) {
-                  _context2.n = 65;
+                  _context.n = 65;
                   break;
                 }
-                _context2.n = 64;
+                _context.n = 64;
                 return put(markMessagesAsDeliveredAC(message.parentMessage.id, [message.id]));
               case 64:
-                _context2.n = 66;
+                _context.n = 66;
                 break;
               case 65:
-                _context2.n = 66;
+                _context.n = 66;
                 return put(markMessagesAsDeliveredAC(_channel5.id, [message.id]));
               case 66:
                 updateChannelOnAllChannels(_channel5.id, {
@@ -14885,157 +14954,157 @@ function watchForEvents() {
                 });
                 updateChannelLastMessageOnAllChannels(_channel5.id, _channel5.lastMessage);
               case 67:
-                return _context2.a(3, 179);
+                return _context.a(3, 185);
               case 68:
                 channelId = args.channelId, markerList = args.markerList;
-                _context2.n = 69;
+                _context.n = 69;
                 return call(getChannelFromMap, channelId);
               case 69:
-                _channel6 = _context2.v;
+                _channel6 = _context.v;
                 log.info('channel MESSAGE_MARKERS_RECEIVED ... channel: ', _channel6, 'markers list: ', markerList);
                 if (!_channel6) {
-                  _context2.n = 74;
+                  _context.n = 80;
                   break;
                 }
-                _context2.n = 70;
+                _context.n = 70;
                 return call(getActiveChannelId);
               case 70:
-                _activeChannelId6 = _context2.v;
+                _activeChannelId6 = _context.v;
                 updateLastMessage = false;
                 markersMap = {};
                 activeChannelMessages = getMessagesFromMap(_activeChannelId6);
-                markerList.messageIds.forEach(/*#__PURE__*/_regenerator().m(function _callee(messageId) {
-                  var isPendingMessage;
-                  return _regenerator().w(function (_context) {
-                    while (1) switch (_context.n) {
-                      case 0:
-                        if (!(activeChannelMessages !== null && activeChannelMessages !== void 0 && activeChannelMessages.find(function (message) {
-                          return message.id === messageId;
-                        }))) {
-                          _context.n = 2;
-                          break;
-                        }
-                        _context.n = 1;
-                        return put(removePendingMessageAC(channelId, messageId));
-                      case 1:
-                        _context.n = 3;
-                        break;
-                      case 2:
-                        isPendingMessage = getMessageFromPendingMessagesMap(_activeChannelId6, messageId);
-                        if (isPendingMessage) {
-                          updatePendingMessageOnMap(_activeChannelId6, messageId, {
-                            deliveryStatus: markerList.name
-                          });
-                        }
-                      case 3:
-                        markersMap[messageId] = true;
-                        if (_channel6) {
-                          if (_channel6.lastMessage && messageId === _channel6.lastMessage.id && _channel6.lastMessage.deliveryStatus !== MESSAGE_DELIVERY_STATUS.READ) {
-                            updateLastMessage = true;
-                          }
-                        }
-                        updateChannelOnAllChannels(channelId, {}, {
-                          id: messageId,
-                          deliveryStatus: markerList.name
-                        });
-                      case 4:
-                        return _context.a(2);
-                    }
-                  }, _callee);
-                }));
+                _iterator = _createForOfIteratorHelperLoose(markerList.messageIds);
+              case 71:
+                if ((_step = _iterator()).done) {
+                  _context.n = 76;
+                  break;
+                }
+                messageId = _step.value;
+                if (!(activeChannelMessages !== null && activeChannelMessages !== void 0 && activeChannelMessages[messageId])) {
+                  _context.n = 73;
+                  break;
+                }
+                _context.n = 72;
+                return put(removePendingMessageAC(channelId, messageId));
+              case 72:
+                _context.n = 74;
+                break;
+              case 73:
+                isPendingMessage = getMessageFromPendingMessagesMap(_activeChannelId6, messageId);
+                if (isPendingMessage) {
+                  updatePendingMessageOnMap(_activeChannelId6, messageId, {
+                    deliveryStatus: markerList.name
+                  });
+                }
+              case 74:
+                markersMap[messageId] = true;
+                if (_channel6) {
+                  if (_channel6.lastMessage && messageId === _channel6.lastMessage.id && _channel6.lastMessage.deliveryStatus !== MESSAGE_DELIVERY_STATUS.READ) {
+                    updateLastMessage = true;
+                  }
+                }
+                updateChannelOnAllChannels(channelId, {}, {
+                  id: messageId,
+                  deliveryStatus: markerList.name
+                });
+              case 75:
+                _context.n = 71;
+                break;
+              case 76:
                 if (!updateLastMessage) {
-                  _context2.n = 71;
+                  _context.n = 77;
                   break;
                 }
                 lastMessage = _extends({}, _channel6.lastMessage, {
                   deliveryStatus: markerList.name
                 });
                 updateChannelLastMessageOnAllChannels(_channel6.id, lastMessage);
-                _context2.n = 71;
+                _context.n = 77;
                 return put(updateChannelLastMessageStatusAC(lastMessage, _channel6));
-              case 71:
+              case 77:
                 if (!(_activeChannelId6 === channelId)) {
-                  _context2.n = 73;
+                  _context.n = 79;
                   break;
                 }
-                _context2.n = 72;
+                _context.n = 78;
                 return put(updateMessagesStatusAC(markerList.name, markersMap));
-              case 72:
+              case 78:
                 updateMarkersOnAllMessages(markersMap, markerList.name);
-              case 73:
+              case 79:
                 updateMessageStatusOnMap(_channel6.id, {
                   name: markerList.name,
                   markersMap: markersMap
                 });
-                _context2.n = 74;
+                updateMessageStatusOnAllMessages(markerList.name, markersMap);
+                _context.n = 80;
                 return put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
-              case 74:
-                return _context2.a(3, 179);
-              case 75:
+              case 80:
+                return _context.a(3, 185);
+              case 81:
                 _channelId = args.channelId;
                 log.info('channel DELETE ... ');
                 _channel7 = getChannelFromMap(_channelId);
-                _context2.n = 76;
+                _context.n = 82;
                 return put(setChannelToRemoveAC(_channel7));
-              case 76:
+              case 82:
                 deleteChannelFromAllChannels(_channelId);
-                return _context2.a(3, 179);
-              case 77:
+                return _context.a(3, 185);
+              case 83:
                 _channel8 = args.channel, deletedMessage = args.deletedMessage;
-                _context2.n = 78;
+                _context.n = 84;
                 return call(getActiveChannelId);
-              case 78:
-                _activeChannelId7 = _context2.v;
+              case 84:
+                _activeChannelId7 = _context.v;
                 log.info('channel DELETE_MESSAGE ... ');
                 _channelExists7 = checkChannelExists(_channel8.id);
                 if (!(_channel8.id === _activeChannelId7)) {
-                  _context2.n = 79;
+                  _context.n = 85;
                   break;
                 }
                 updateMessageOnAllMessages(deletedMessage.id, deletedMessage);
-                _context2.n = 79;
+                _context.n = 85;
                 return put(updateMessageAC(deletedMessage.id, deletedMessage));
-              case 79:
+              case 85:
                 updateMessageOnMap(_channel8.id, {
                   messageId: deletedMessage.id,
                   params: deletedMessage
                 });
                 if (!_channelExists7) {
-                  _context2.n = 81;
+                  _context.n = 87;
                   break;
                 }
-                _context2.n = 80;
+                _context.n = 86;
                 return put(updateChannelDataAC(_channel8.id, {
                   newMessageCount: _channel8.newMessageCount,
                   muted: _channel8.muted,
                   mutedTill: _channel8.mutedTill
                 }));
-              case 80:
+              case 86:
                 if (!(_channel8.lastMessage.id === deletedMessage.id)) {
-                  _context2.n = 81;
+                  _context.n = 87;
                   break;
                 }
-                _context2.n = 81;
+                _context.n = 87;
                 return put(updateChannelLastMessageAC(deletedMessage, _channel8));
-              case 81:
+              case 87:
                 updateChannelOnAllChannels(_channel8.id, {
                   newMessageCount: _channel8.newMessageCount,
                   muted: _channel8.muted,
                   mutedTill: _channel8.mutedTill
                 }, deletedMessage);
-                return _context2.a(3, 179);
-              case 82:
+                return _context.a(3, 185);
+              case 88:
                 _channel9 = args.channel, _message = args.message;
-                _context2.n = 83;
+                _context.n = 89;
                 return call(getActiveChannelId);
-              case 83:
-                _activeChannelId8 = _context2.v;
+              case 89:
+                _activeChannelId8 = _context.v;
                 _channelExists8 = checkChannelExists(_channel9.id);
                 if (!(_channel9.id === _activeChannelId8)) {
-                  _context2.n = 85;
+                  _context.n = 91;
                   break;
                 }
-                _context2.n = 84;
+                _context.n = 90;
                 return put(updateMessageAC(_message.id, {
                   body: _message.body,
                   state: _message.state,
@@ -15044,7 +15113,7 @@ function watchForEvents() {
                   mentionedUsers: _message.mentionedUsers,
                   updatedAt: _message.updatedAt
                 }));
-              case 84:
+              case 90:
                 updateMessageOnAllMessages(_message.id, {
                   body: _message.body,
                   state: _message.state,
@@ -15053,18 +15122,18 @@ function watchForEvents() {
                   mentionedUsers: _message.mentionedUsers,
                   updatedAt: _message.updatedAt
                 });
-              case 85:
+              case 91:
                 if (!_channelExists8) {
-                  _context2.n = 86;
+                  _context.n = 92;
                   break;
                 }
                 if (!(_channel9.lastMessage.id === _message.id)) {
-                  _context2.n = 86;
+                  _context.n = 92;
                   break;
                 }
-                _context2.n = 86;
+                _context.n = 92;
                 return put(updateChannelLastMessageAC(_message, _channel9));
-              case 86:
+              case 92:
                 if (checkChannelExistsOnMessagesMap(_channel9.id)) {
                   updateMessageOnMap(_channel9.id, {
                     messageId: _message.id,
@@ -15072,39 +15141,39 @@ function watchForEvents() {
                   });
                 }
                 updateChannelOnAllChannels(_channel9.id, {}, _message);
-                return _context2.a(3, 179);
-              case 87:
+                return _context.a(3, 185);
+              case 93:
                 _channel0 = args.channel, user = args.user, _message2 = args.message, reaction = args.reaction;
                 isSelf = user.id === SceytChatClient.user.id;
-                _context2.n = 88;
+                _context.n = 94;
                 return call(getActiveChannelId);
-              case 88:
-                _activeChannelId9 = _context2.v;
+              case 94:
+                _activeChannelId9 = _context.v;
                 if (!(_channel0.id === _activeChannelId9)) {
-                  _context2.n = 90;
+                  _context.n = 96;
                   break;
                 }
-                _context2.n = 89;
+                _context.n = 95;
                 return put(addReactionToMessageAC(_message2, reaction, isSelf));
-              case 89:
+              case 95:
                 addReactionOnAllMessages(_message2, reaction, true);
-              case 90:
+              case 96:
                 if (!(_message2.user.id === SceytChatClient.user.id)) {
-                  _context2.n = 94;
+                  _context.n = 100;
                   break;
                 }
                 if (!(!isSelf && Notification.permission === 'granted')) {
-                  _context2.n = 92;
+                  _context.n = 98;
                   break;
                 }
                 if (!(document.visibilityState !== 'visible' || _channel0.id !== _activeChannelId9)) {
-                  _context2.n = 92;
+                  _context.n = 98;
                   break;
                 }
-                _context2.n = 91;
+                _context.n = 97;
                 return select(contactsMapSelector);
-              case 91:
-                _contactsMap = _context2.v;
+              case 97:
+                _contactsMap = _context.v;
                 _getFromContacts2 = getShowOnlyContactUsers();
                 _state = store.getState();
                 _theme = _state.ThemeReducer.theme || 'light';
@@ -15123,9 +15192,9 @@ function watchForEvents() {
                 setNotification(_messageBody, reaction.user, _channel0, reaction.key, _message2.attachments && _message2.attachments.length ? _message2.attachments.find(function (att) {
                   return att.type !== attachmentTypes.link;
                 }) : undefined);
-              case 92:
+              case 98:
                 if (!(_channel0.newReactions && _channel0.newReactions.length)) {
-                  _context2.n = 93;
+                  _context.n = 99;
                   break;
                 }
                 channelUpdateParams = {
@@ -15135,9 +15204,9 @@ function watchForEvents() {
                   muted: _channel0.muted,
                   mutedTill: _channel0.mutedTill
                 };
-                _context2.n = 93;
+                _context.n = 99;
                 return put(updateChannelDataAC(_channel0.id, channelUpdateParams));
-              case 93:
+              case 99:
                 updateChannelOnAllChannels(_channel0.id, {
                   userMessageReactions: _channel0.newReactions,
                   lastReactedMessage: _message2,
@@ -15145,31 +15214,31 @@ function watchForEvents() {
                   muted: _channel0.muted,
                   mutedTill: _channel0.mutedTill
                 });
-              case 94:
+              case 100:
                 if (checkChannelExistsOnMessagesMap(_channel0.id)) {
                   addReactionToMessageOnMap(_channel0.id, _message2, reaction, true);
                 }
-                return _context2.a(3, 179);
-              case 95:
-                _channel1 = args.channel, pollDetails = args.pollDetails, messageId = args.messageId;
+                return _context.a(3, 185);
+              case 101:
+                _channel1 = args.channel, pollDetails = args.pollDetails, _messageId = args.messageId;
                 pollDetailsData = pollDetails;
-                _context2.n = 96;
+                _context.n = 102;
                 return call(getActiveChannelId);
-              case 96:
-                _activeChannelId0 = _context2.v;
+              case 102:
+                _activeChannelId0 = _context.v;
                 addedVotes = (pollDetailsData === null || pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan = pollDetailsData.changedVotes) === null || _pollDetailsData$chan === void 0 ? void 0 : _pollDetailsData$chan.addedVotes) || [];
                 deletedVotes = (pollDetailsData === null || pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan2 = pollDetailsData.changedVotes) === null || _pollDetailsData$chan2 === void 0 ? void 0 : _pollDetailsData$chan2.removedVotes) || [];
                 objs = [];
-                for (_iterator = _createForOfIteratorHelperLoose(deletedVotes); !(_step = _iterator()).done;) {
-                  vote = _step.value;
+                for (_iterator2 = _createForOfIteratorHelperLoose(deletedVotes); !(_step2 = _iterator2()).done;) {
+                  vote = _step2.value;
                   objs.push({
                     type: vote.user.id === SceytChatClient.user.id ? 'deleteOwn' : 'delete',
                     vote: vote,
                     incrementVotesPerOptionCount: -((deletedVotes === null || deletedVotes === void 0 ? void 0 : deletedVotes.length) || 0)
                   });
                 }
-                for (_iterator2 = _createForOfIteratorHelperLoose(addedVotes); !(_step2 = _iterator2()).done;) {
-                  _vote = _step2.value;
+                for (_iterator3 = _createForOfIteratorHelperLoose(addedVotes); !(_step3 = _iterator3()).done;) {
+                  _vote = _step3.value;
                   objs.push({
                     type: _vote.user.id === SceytChatClient.user.id ? 'addOwn' : 'add',
                     vote: _vote,
@@ -15177,44 +15246,44 @@ function watchForEvents() {
                   });
                 }
                 _i = 0, _objs = objs;
-              case 97:
+              case 103:
                 if (!(_i < _objs.length)) {
-                  _context2.n = 101;
+                  _context.n = 107;
                   break;
                 }
                 obj = _objs[_i];
                 if (!(pollDetailsData !== null && pollDetailsData !== void 0 && pollDetailsData.id && obj.vote)) {
-                  _context2.n = 100;
+                  _context.n = 106;
                   break;
                 }
                 key = pollDetailsData.id + "_" + obj.vote.optionId;
                 hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[key]) || false;
                 if (!(obj.type === 'addOwn')) {
-                  _context2.n = 99;
+                  _context.n = 105;
                   break;
                 }
-                _context2.n = 98;
+                _context.n = 104;
                 return put(addPollVotesToListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], hasNext, undefined));
-              case 98:
-                _context2.n = 100;
+              case 104:
+                _context.n = 106;
                 break;
-              case 99:
-                _context2.n = 100;
-                return put(deletePollVotesFromListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], messageId));
-              case 100:
+              case 105:
+                _context.n = 106;
+                return put(deletePollVotesFromListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], _messageId));
+              case 106:
                 _i++;
-                _context2.n = 97;
+                _context.n = 103;
                 break;
-              case 101:
+              case 107:
                 _i2 = 0, _objs2 = objs;
-              case 102:
+              case 108:
                 if (!(_i2 < _objs2.length)) {
-                  _context2.n = 104;
+                  _context.n = 110;
                   break;
                 }
                 _obj = _objs2[_i2];
                 updateMessageOnMap(_channel1.id, {
-                  messageId: messageId,
+                  messageId: _messageId,
                   params: {}
                 }, {
                   type: _obj.type,
@@ -15222,29 +15291,29 @@ function watchForEvents() {
                   incrementVotesPerOptionCount: _obj.incrementVotesPerOptionCount
                 });
                 if (!(_channel1.id === _activeChannelId0)) {
-                  _context2.n = 103;
+                  _context.n = 109;
                   break;
                 }
-                updateMessageOnAllMessages(messageId, {}, _obj);
-                _context2.n = 103;
-                return put(updateMessageAC(messageId, {}, undefined, _obj));
-              case 103:
+                updateMessageOnAllMessages(_messageId, {}, _obj);
+                _context.n = 109;
+                return put(updateMessageAC(_messageId, {}, undefined, _obj));
+              case 109:
                 _i2++;
-                _context2.n = 102;
+                _context.n = 108;
                 break;
-              case 104:
-                return _context2.a(3, 179);
-              case 105:
-                _channel10 = args.channel, _pollDetails = args.pollDetails, _messageId = args.messageId;
+              case 110:
+                return _context.a(3, 185);
+              case 111:
+                _channel10 = args.channel, _pollDetails = args.pollDetails, _messageId2 = args.messageId;
                 _pollDetailsData = _pollDetails;
-                _context2.n = 106;
+                _context.n = 112;
                 return call(getActiveChannelId);
-              case 106:
-                _activeChannelId1 = _context2.v;
+              case 112:
+                _activeChannelId1 = _context.v;
                 _deletedVotes = (_pollDetailsData === null || _pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan3 = _pollDetailsData.changedVotes) === null || _pollDetailsData$chan3 === void 0 ? void 0 : _pollDetailsData$chan3.removedVotes) || [];
                 _objs3 = [];
-                for (_iterator3 = _createForOfIteratorHelperLoose(_deletedVotes); !(_step3 = _iterator3()).done;) {
-                  _vote2 = _step3.value;
+                for (_iterator4 = _createForOfIteratorHelperLoose(_deletedVotes); !(_step4 = _iterator4()).done;) {
+                  _vote2 = _step4.value;
                   _objs3.push({
                     type: _vote2.user.id === SceytChatClient.user.id ? 'deleteOwn' : 'delete',
                     vote: _vote2,
@@ -15252,58 +15321,58 @@ function watchForEvents() {
                   });
                 }
                 _i3 = 0, _objs4 = _objs3;
-              case 107:
+              case 113:
                 if (!(_i3 < _objs4.length)) {
-                  _context2.n = 109;
+                  _context.n = 115;
                   break;
                 }
                 _obj2 = _objs4[_i3];
                 if (!(_pollDetailsData !== null && _pollDetailsData !== void 0 && _pollDetailsData.id && _obj2.vote)) {
-                  _context2.n = 108;
+                  _context.n = 114;
                   break;
                 }
-                _context2.n = 108;
-                return put(deletePollVotesFromListAC(_pollDetailsData.id, _obj2.vote.optionId, [_obj2.vote], _messageId));
-              case 108:
+                _context.n = 114;
+                return put(deletePollVotesFromListAC(_pollDetailsData.id, _obj2.vote.optionId, [_obj2.vote], _messageId2));
+              case 114:
                 _i3++;
-                _context2.n = 107;
+                _context.n = 113;
                 break;
-              case 109:
+              case 115:
                 _i4 = 0, _objs5 = _objs3;
-              case 110:
+              case 116:
                 if (!(_i4 < _objs5.length)) {
-                  _context2.n = 112;
+                  _context.n = 118;
                   break;
                 }
                 _obj3 = _objs5[_i4];
                 updateMessageOnMap(_channel10.id, {
-                  messageId: _messageId,
+                  messageId: _messageId2,
                   params: {}
                 }, _obj3);
                 if (!(_channel10.id === _activeChannelId1)) {
-                  _context2.n = 111;
+                  _context.n = 117;
                   break;
                 }
-                updateMessageOnAllMessages(_messageId, {}, _obj3);
-                _context2.n = 111;
-                return put(updateMessageAC(_messageId, {}, undefined, _obj3));
-              case 111:
+                updateMessageOnAllMessages(_messageId2, {}, _obj3);
+                _context.n = 117;
+                return put(updateMessageAC(_messageId2, {}, undefined, _obj3));
+              case 117:
                 _i4++;
-                _context2.n = 110;
+                _context.n = 116;
                 break;
-              case 112:
-                return _context2.a(3, 179);
-              case 113:
-                _channel11 = args.channel, _pollDetails2 = args.pollDetails, _messageId2 = args.messageId;
-                _context2.n = 114;
+              case 118:
+                return _context.a(3, 185);
+              case 119:
+                _channel11 = args.channel, _pollDetails2 = args.pollDetails, _messageId3 = args.messageId;
+                _context.n = 120;
                 return call(getActiveChannelId);
-              case 114:
-                _activeChannelId10 = _context2.v;
+              case 120:
+                _activeChannelId10 = _context.v;
                 _pollDetailsData2 = _pollDetails2;
                 retractedVotes = (_pollDetailsData2 === null || _pollDetailsData2 === void 0 ? void 0 : (_pollDetailsData2$cha = _pollDetailsData2.changedVotes) === null || _pollDetailsData2$cha === void 0 ? void 0 : _pollDetailsData2$cha.removedVotes) || [];
                 _objs6 = [];
-                for (_iterator4 = _createForOfIteratorHelperLoose(retractedVotes); !(_step4 = _iterator4()).done;) {
-                  _vote4 = _step4.value;
+                for (_iterator5 = _createForOfIteratorHelperLoose(retractedVotes); !(_step5 = _iterator5()).done;) {
+                  _vote4 = _step5.value;
                   _objs6.push({
                     type: _vote4.user.id === SceytChatClient.user.id ? 'deleteOwn' : 'delete',
                     vote: _vote4,
@@ -15311,109 +15380,109 @@ function watchForEvents() {
                   });
                 }
                 _i5 = 0, _objs7 = _objs6;
-              case 115:
+              case 121:
                 if (!(_i5 < _objs7.length)) {
-                  _context2.n = 120;
+                  _context.n = 126;
                   break;
                 }
                 _obj4 = _objs7[_i5];
                 updateMessageOnMap(_channel11.id, {
-                  messageId: _messageId2,
+                  messageId: _messageId3,
                   params: {}
                 }, _obj4);
                 if (!(_pollDetailsData2 !== null && _pollDetailsData2 !== void 0 && _pollDetailsData2.id && retractedVotes.length > 0)) {
-                  _context2.n = 118;
+                  _context.n = 124;
                   break;
                 }
-                _iterator5 = _createForOfIteratorHelperLoose(retractedVotes);
-              case 116:
-                if ((_step5 = _iterator5()).done) {
-                  _context2.n = 118;
+                _iterator6 = _createForOfIteratorHelperLoose(retractedVotes);
+              case 122:
+                if ((_step6 = _iterator6()).done) {
+                  _context.n = 124;
                   break;
                 }
-                _vote3 = _step5.value;
-                _context2.n = 117;
-                return put(deletePollVotesFromListAC(_pollDetailsData2.id, _vote3.optionId, [_vote3], _messageId2));
-              case 117:
-                _context2.n = 116;
+                _vote3 = _step6.value;
+                _context.n = 123;
+                return put(deletePollVotesFromListAC(_pollDetailsData2.id, _vote3.optionId, [_vote3], _messageId3));
+              case 123:
+                _context.n = 122;
                 break;
-              case 118:
+              case 124:
                 if (!(_channel11.id === _activeChannelId10)) {
-                  _context2.n = 119;
+                  _context.n = 125;
                   break;
                 }
-                updateMessageOnAllMessages(_messageId2, {}, _obj4);
-                _context2.n = 119;
-                return put(updateMessageAC(_messageId2, {}, undefined, _obj4));
-              case 119:
+                updateMessageOnAllMessages(_messageId3, {}, _obj4);
+                _context.n = 125;
+                return put(updateMessageAC(_messageId3, {}, undefined, _obj4));
+              case 125:
                 _i5++;
-                _context2.n = 115;
+                _context.n = 121;
                 break;
-              case 120:
-                return _context2.a(3, 179);
-              case 121:
-                _channel12 = args.channel, _messageId3 = args.messageId;
-                _context2.n = 122;
+              case 126:
+                return _context.a(3, 185);
+              case 127:
+                _channel12 = args.channel, _messageId4 = args.messageId;
+                _context.n = 128;
                 return call(getActiveChannelId);
-              case 122:
-                _activeChannelId11 = _context2.v;
+              case 128:
+                _activeChannelId11 = _context.v;
                 _obj5 = {
                   type: 'close',
                   incrementVotesPerOptionCount: 0
                 };
                 updateMessageOnMap(_channel12.id, {
-                  messageId: _messageId3,
+                  messageId: _messageId4,
                   params: {}
                 }, _obj5);
                 if (!(_channel12.id === _activeChannelId11)) {
-                  _context2.n = 124;
+                  _context.n = 130;
                   break;
                 }
-                updateMessageOnAllMessages(_messageId3, {}, _obj5);
-                _context2.n = 123;
-                return put(updateMessageAC(_messageId3, {}, undefined, _obj5));
-              case 123:
-                return _context2.a(3, 179);
-              case 124:
-                return _context2.a(3, 179);
-              case 125:
+                updateMessageOnAllMessages(_messageId4, {}, _obj5);
+                _context.n = 129;
+                return put(updateMessageAC(_messageId4, {}, undefined, _obj5));
+              case 129:
+                return _context.a(3, 185);
+              case 130:
+                return _context.a(3, 185);
+              case 131:
                 _channel13 = args.channel, _user = args.user, _message3 = args.message, _reaction = args.reaction;
                 log.info('channel REACTION_DELETED ... ', _channel13);
                 channelFromMap = getChannelFromMap(_channel13.id);
                 _isSelf = _user.id === SceytChatClient.user.id;
-                _context2.n = 126;
+                _context.n = 132;
                 return call(getActiveChannelId);
-              case 126:
-                _activeChannelId12 = _context2.v;
+              case 132:
+                _activeChannelId12 = _context.v;
                 if (!(_channel13.id === _activeChannelId12)) {
-                  _context2.n = 128;
+                  _context.n = 134;
                   break;
                 }
-                _context2.n = 127;
+                _context.n = 133;
                 return put(deleteReactionFromMessageAC(_message3, _reaction, _isSelf));
-              case 127:
+              case 133:
                 removeReactionOnAllMessages(_message3, _reaction, true);
-              case 128:
+              case 134:
                 _channelUpdateParams = JSON.parse(JSON.stringify(_channel13));
                 if (channelFromMap && channelFromMap.lastReactedMessage && channelFromMap.lastReactedMessage.id === _message3.id) {
                   _channelUpdateParams.lastReactedMessage = null;
                 }
-                _context2.n = 129;
+                _context.n = 135;
                 return put(updateChannelDataAC(_channel13.id, _channelUpdateParams));
-              case 129:
+              case 135:
                 updateChannelOnAllChannels(_channel13.id, _channelUpdateParams);
                 if (checkChannelExistsOnMessagesMap(_channel13.id)) {
                   removeReactionToMessageOnMap(_channel13.id, _message3, _reaction, true);
                 }
-                return _context2.a(3, 179);
-              case 130:
+                return _context.a(3, 185);
+              case 136:
                 _channel14 = args.channel;
                 if (!_channel14) {
-                  _context2.n = 132;
+                  _context.n = 138;
                   break;
                 }
                 _updatedChannel = JSON.parse(JSON.stringify(_channel14));
-                _context2.n = 131;
+                _context.n = 137;
                 return put(updateChannelDataAC(_channel14.id, {
                   lastMessage: _channel14.lastMessage,
                   newMessageCount: _channel14.newMessageCount,
@@ -15426,36 +15495,36 @@ function watchForEvents() {
                   lastDisplayedMessageId: _channel14.lastDisplayedMessageId,
                   messageRetentionPeriod: _channel14.messageRetentionPeriod
                 }));
-              case 131:
+              case 137:
                 updateChannelOnAllChannels(_channel14.id, _updatedChannel);
-              case 132:
-                return _context2.a(3, 179);
-              case 133:
+              case 138:
+                return _context.a(3, 185);
+              case 139:
                 _channel15 = args.channel;
                 log.info('CLEAR_HISTORY: ', _channel15);
-                _context2.n = 134;
+                _context.n = 140;
                 return call(getActiveChannelId);
-              case 134:
-                _activeChannelId13 = _context2.v;
-                _context2.n = 135;
+              case 140:
+                _activeChannelId13 = _context.v;
+                _context.n = 141;
                 return call(checkChannelExists, _channel15.id);
-              case 135:
-                channelExist = _context2.v;
+              case 141:
+                channelExist = _context.v;
                 if (!(_channel15.id === _activeChannelId13)) {
-                  _context2.n = 137;
+                  _context.n = 143;
                   break;
                 }
-                _context2.n = 136;
+                _context.n = 142;
                 return put(clearMessagesAC());
-              case 136:
+              case 142:
                 removeAllMessages();
-              case 137:
+              case 143:
                 removeMessagesFromMap(_channel15.id);
                 if (!channelExist) {
-                  _context2.n = 138;
+                  _context.n = 144;
                   break;
                 }
-                _context2.n = 138;
+                _context.n = 144;
                 return put(updateChannelDataAC(_channel15.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -15463,7 +15532,7 @@ function watchForEvents() {
                   muted: _channel15.muted,
                   mutedTill: _channel15.mutedTill
                 }));
-              case 138:
+              case 144:
                 updateChannelOnAllChannels(_channel15.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -15471,173 +15540,173 @@ function watchForEvents() {
                   muted: _channel15.muted,
                   mutedTill: _channel15.mutedTill
                 });
-                return _context2.a(3, 179);
-              case 139:
+                return _context.a(3, 185);
+              case 145:
                 _channel16 = args.channel;
                 log.info('channel MUTE ... ');
-                _context2.n = 140;
+                _context.n = 146;
                 return put(updateChannelDataAC(_channel16.id, {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 }));
-              case 140:
+              case 146:
                 updateChannelOnAllChannels(_channel16.id, {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 });
-                return _context2.a(3, 179);
-              case 141:
+                return _context.a(3, 185);
+              case 147:
                 _channel17 = args.channel;
                 log.info('channel UNMUTE ... ');
-                _context2.n = 142;
+                _context.n = 148;
                 return put(updateChannelDataAC(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 }));
-              case 142:
+              case 148:
                 updateChannelOnAllChannels(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 });
-                return _context2.a(3, 179);
-              case 143:
+                return _context.a(3, 185);
+              case 149:
                 _channel18 = args.channel;
                 log.info('channel PINED ... ');
-                _context2.n = 144;
+                _context.n = 150;
                 return put(updateChannelDataAC(_channel18.id, {
                   pinnedAt: _channel18.pinnedAt
                 }, true));
-              case 144:
+              case 150:
                 updateChannelOnAllChannels(_channel18.id, {
                   pinnedAt: _channel18.pinnedAt
                 });
-                return _context2.a(3, 179);
-              case 145:
+                return _context.a(3, 185);
+              case 151:
                 _channel19 = args.channel;
                 log.info('channel UNPINED ... ');
-                _context2.n = 146;
+                _context.n = 152;
                 return put(updateChannelDataAC(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 }, false, true));
-              case 146:
+              case 152:
                 updateChannelOnAllChannels(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 });
-                return _context2.a(3, 179);
-              case 147:
+                return _context.a(3, 185);
+              case 153:
                 _channel20 = args.channel;
                 log.info('channel HIDE ... ');
-                _context2.n = 148;
+                _context.n = 154;
                 return put(setChannelToHideAC(_channel20));
-              case 148:
-                return _context2.a(3, 179);
-              case 149:
+              case 154:
+                return _context.a(3, 185);
+              case 155:
                 _channel21 = args.channel;
                 log.info('channel UNHIDE ... ');
-                _context2.n = 150;
+                _context.n = 156;
                 return put(setChannelToUnHideAC(_channel21));
-              case 150:
-                return _context2.a(3, 179);
-              case 151:
+              case 156:
+                return _context.a(3, 185);
+              case 157:
                 _channel22 = args.channel;
-                _context2.n = 152;
+                _context.n = 158;
                 return put(updateChannelDataAC(_channel22.id, {
                   unread: _channel22.unread,
                   muted: _channel22.muted,
                   mutedTill: _channel22.mutedTill
                 }));
-              case 152:
+              case 158:
                 _groupName5 = getChannelGroupName(_channel22);
-                _context2.n = 153;
+                _context.n = 159;
                 return put(updateSearchedChannelDataAC(_channel22.id, {
                   unread: _channel22.unread
                 }, _groupName5));
-              case 153:
+              case 159:
                 updateChannelOnAllChannels(_channel22.id, {
                   unread: _channel22.unread
                 });
-                return _context2.a(3, 179);
-              case 154:
+                return _context.a(3, 185);
+              case 160:
                 _channel23 = args.channel;
-                _context2.n = 155;
+                _context.n = 161;
                 return put(updateChannelDataAC(_channel23.id, {
                   unread: _channel23.unread,
                   muted: _channel23.muted,
                   mutedTill: _channel23.mutedTill
                 }));
-              case 155:
+              case 161:
                 _groupName6 = getChannelGroupName(_channel23);
-                _context2.n = 156;
+                _context.n = 162;
                 return put(updateSearchedChannelDataAC(_channel23.id, {
                   unread: _channel23.unread
                 }, _groupName6));
-              case 156:
+              case 162:
                 updateChannelOnAllChannels(_channel23.id, {
                   unread: _channel23.unread
                 });
-                return _context2.a(3, 179);
-              case 157:
+                return _context.a(3, 185);
+              case 163:
                 _channel24 = args.channel, members = args.members;
                 log.info('channel CHANGE_ROLE  channel ... ', _channel24);
                 log.info('channel CHANGE_ROLE  member ... ', members);
-                _context2.n = 158;
+                _context.n = 164;
                 return call(getActiveChannelId);
-              case 158:
-                _activeChannelId14 = _context2.v;
+              case 164:
+                _activeChannelId14 = _context.v;
                 if (!(_channel24.id === _activeChannelId14)) {
-                  _context2.n = 159;
+                  _context.n = 165;
                   break;
                 }
-                _context2.n = 159;
+                _context.n = 165;
                 return put(updateMembersAC(members));
-              case 159:
+              case 165:
                 i = 0;
-              case 160:
+              case 166:
                 if (!(i < members.length)) {
-                  _context2.n = 163;
+                  _context.n = 169;
                   break;
                 }
                 if (!(members[i].id === SceytChatClient.user.id)) {
-                  _context2.n = 162;
+                  _context.n = 168;
                   break;
                 }
-                _context2.n = 161;
+                _context.n = 167;
                 return put(updateChannelDataAC(_channel24.id, {
                   userRole: members[i].role,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 }));
-              case 161:
+              case 167:
                 updateChannelOnAllChannels(_channel24.id, {
                   userRole: members[i].role,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 });
-              case 162:
+              case 168:
                 i++;
-                _context2.n = 160;
+                _context.n = 166;
                 break;
-              case 163:
-                return _context2.a(3, 179);
-              case 164:
+              case 169:
+                return _context.a(3, 185);
+              case 170:
                 _channel25 = args.channel;
                 log.info('channel frozen  channel ... ', _channel25);
-                return _context2.a(3, 179);
-              case 165:
+                return _context.a(3, 185);
+              case 171:
                 _channel26 = args.channel;
                 log.info('channel unfrozen  channel ... ', _channel26);
-                return _context2.a(3, 179);
-              case 166:
+                return _context.a(3, 185);
+              case 172:
                 _channelId2 = args.channelId, from = args.from, name = args.name;
                 log.info('channel event received >>>... . . . . . ', args);
                 if (!(from.id === SceytChatClient.user.id)) {
-                  _context2.n = 167;
+                  _context.n = 173;
                   break;
                 }
-                return _context2.a(3, 179);
-              case 167:
+                return _context.a(3, 185);
+              case 173:
                 if (!(name === 'start_typing')) {
-                  _context2.n = 169;
+                  _context.n = 175;
                   break;
                 }
                 if (!usersTimeout[_channelId2]) {
@@ -15649,27 +15718,27 @@ function watchForEvents() {
                 usersTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_typing');
                 }, 5000);
-                _context2.n = 168;
+                _context.n = 174;
                 return put(switchTypingIndicatorAC(true, _channelId2, from));
-              case 168:
-                _context2.n = 174;
+              case 174:
+                _context.n = 180;
                 break;
-              case 169:
+              case 175:
                 if (!(name === 'stop_typing')) {
-                  _context2.n = 171;
+                  _context.n = 177;
                   break;
                 }
                 if (usersTimeout[_channelId2] && usersTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout[_channelId2][from.id]);
                 }
-                _context2.n = 170;
+                _context.n = 176;
                 return put(switchTypingIndicatorAC(false, _channelId2, from));
-              case 170:
-                _context2.n = 174;
+              case 176:
+                _context.n = 180;
                 break;
-              case 171:
+              case 177:
                 if (!(name === 'start_recording')) {
-                  _context2.n = 173;
+                  _context.n = 179;
                   break;
                 }
                 if (!usersTimeout[_channelId2]) {
@@ -15681,58 +15750,58 @@ function watchForEvents() {
                 usersTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_recording');
                 }, 5000);
-                _context2.n = 172;
+                _context.n = 178;
                 return put(switchRecordingIndicatorAC(true, _channelId2, from));
-              case 172:
-                _context2.n = 174;
+              case 178:
+                _context.n = 180;
                 break;
-              case 173:
+              case 179:
                 if (!(name === 'stop_recording')) {
-                  _context2.n = 174;
+                  _context.n = 180;
                   break;
                 }
                 if (usersTimeout[_channelId2] && usersTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout[_channelId2][from.id]);
                 }
-                _context2.n = 174;
+                _context.n = 180;
                 return put(switchRecordingIndicatorAC(false, _channelId2, from));
-              case 174:
-                return _context2.a(3, 179);
-              case 175:
+              case 180:
+                return _context.a(3, 185);
+              case 181:
                 status = args.status;
                 log.info('connection status changed . . . . . ', status);
-                _context2.n = 176;
+                _context.n = 182;
                 return put(setConnectionStatusAC(status));
-              case 176:
+              case 182:
                 if (!(status === CONNECTION_STATUS.CONNECTED)) {
-                  _context2.n = 177;
+                  _context.n = 183;
                   break;
                 }
-                _context2.n = 177;
+                _context.n = 183;
                 return put(getRolesAC());
-              case 177:
-                return _context2.a(3, 179);
-              case 178:
+              case 183:
+                return _context.a(3, 185);
+              case 184:
                 log.warn('UNHANDLED EVENT FROM REDUX-SAGA EVENT-CHANNEL');
-              case 179:
-                _context2.n = 181;
+              case 185:
+                _context.n = 187;
                 break;
-              case 180:
-                _context2.p = 180;
-                _t2 = _context2.v;
+              case 186:
+                _context.p = 186;
+                _t2 = _context.v;
                 log.error('Error in watchForEvents:', _t2);
-              case 181:
-                return _context2.a(2);
+              case 187:
+                return _context.a(2);
             }
-          }, _callee2, null, [[0, 180]]);
+          }, _callee, null, [[0, 186]]);
         });
       case 1:
-        return _context3.d(_regeneratorValues(_loop()), 2);
+        return _context2.d(_regeneratorValues(_loop()), 2);
       case 2:
-        _context3.n = 1;
+        _context2.n = 1;
         break;
       case 3:
-        return _context3.a(2);
+        return _context2.a(2);
     }
   }, _marked$1);
 }
@@ -16590,7 +16659,7 @@ function channelsForForwardLoadMore(action) {
           channelQueryForward.limit = limit;
         }
         _context8.n = 1;
-        return put(setChannelsLoadingStateAC(LOADING_STATE.LOADING));
+        return put(setChannelsLoadingStateAC(LOADING_STATE.LOADING, true));
       case 1:
         _context8.n = 2;
         return call(channelQueryForward.loadNextPage);
@@ -16613,7 +16682,7 @@ function channelsForForwardLoadMore(action) {
         return put(addChannelsForForwardAC(mappedChannels));
       case 5:
         _context8.n = 6;
-        return put(setChannelsLoadingStateAC(LOADING_STATE.LOADED));
+        return put(setChannelsLoadingStateAC(LOADING_STATE.LOADED, true));
       case 6:
         _context8.n = 8;
         break;
@@ -16835,7 +16904,7 @@ function switchChannel(action) {
         }
         currentActiveChannel = getChannelFromMap(getActiveChannelId());
         _context10.n = 11;
-        return call(setUnreadScrollTo, true);
+        return put(setUnreadScrollToAC(true));
       case 11:
         _context10.n = 12;
         return call(setActiveChannelId, channel && channel.id);
@@ -18479,6 +18548,9 @@ var pendingPollActionsSelector = function pendingPollActionsSelector(store) {
 var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
   return store.MessageReducer.pendingMessagesMap;
 };
+var unreadScrollToSelector = function unreadScrollToSelector(store) {
+  return store.MessageReducer.unreadScrollTo;
+};
 
 var getFrame = function getFrame(videoSrc, time) {
   try {
@@ -19046,7 +19118,7 @@ function sendMessage(action) {
   }, _marked$3, null, [[1, 18]]);
 }
 function sendTextMessage(action) {
-  var payload, message, connectionState, channelId, channel, sendMessageTid, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t3;
+  var payload, message, connectionState, channelId, channel, sendMessageTid, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, _messageResponse, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t3;
   return _regenerator().w(function (_context4) {
     while (1) switch (_context4.p = _context4.n) {
       case 0:
@@ -19159,6 +19231,7 @@ function sendTextMessage(action) {
           parentMessage: messageResponse.parentMessage,
           repliedInThread: messageResponse.repliedInThread,
           createdAt: messageResponse.createdAt,
+          pollDetails: (_messageResponse = messageResponse) === null || _messageResponse === void 0 ? void 0 : _messageResponse.pollDetails,
           channelId: channel.id
         };
         if (!(activeChannelId === channel.id)) {
@@ -19199,15 +19272,12 @@ function sendTextMessage(action) {
         throw new Error('Connection required to send message');
       case 17:
         _context4.n = 18;
-        return put(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
-      case 18:
-        _context4.n = 19;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -19217,23 +19287,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, isForward, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -19439,7 +19509,7 @@ function forwardMessage(action) {
   }, _marked3$1, null, [[0, 20]]);
 }
 function resendMessage(action) {
-  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, thumbnailMetas, fileSize, meta, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy2, _getMessagesFromMap, _messageResponse, _messageUpdateData, isInActiveChannel, activeChannelId, _messageToUpdate, _t5, _t6;
+  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, thumbnailMetas, fileSize, meta, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy2, _messageResponse2, _messageUpdateData, isInActiveChannel, activeChannelId, _messageToUpdate, _t5, _t6;
   return _regenerator().w(function (_context6) {
     while (1) switch (_context6.p = _context6.n) {
       case 0:
@@ -19692,29 +19762,27 @@ function resendMessage(action) {
         _context6.n = 27;
         return call(channel.sendMessage, _messageCopy2);
       case 27:
-        _messageResponse = _context6.v;
+        _messageResponse2 = _context6.v;
         _context6.n = 28;
         return put(removePendingMessageAC(channel.id, _messageCopy2.tid || _messageCopy2.id));
       case 28:
         _messageUpdateData = {
-          id: _messageResponse.id,
-          body: _messageResponse.body,
-          type: _messageResponse.type,
-          state: _messageResponse.state,
-          displayCount: _messageResponse.displayCount,
-          deliveryStatus: _messageResponse.deliveryStatus,
+          id: _messageResponse2.id,
+          body: _messageResponse2.body,
+          type: _messageResponse2.type,
+          state: _messageResponse2.state,
+          displayCount: _messageResponse2.displayCount,
+          deliveryStatus: _messageResponse2.deliveryStatus,
           attachments: [],
-          mentionedUsers: _messageResponse.mentionedUsers,
-          metadata: _messageResponse.metadata,
-          parentMessage: _messageResponse.parentMessage,
-          repliedInThread: _messageResponse.repliedInThread,
-          bodyAttributes: _messageResponse.bodyAttributes,
-          createdAt: _messageResponse.createdAt,
+          mentionedUsers: _messageResponse2.mentionedUsers,
+          metadata: _messageResponse2.metadata,
+          parentMessage: _messageResponse2.parentMessage,
+          repliedInThread: _messageResponse2.repliedInThread,
+          bodyAttributes: _messageResponse2.bodyAttributes,
+          createdAt: _messageResponse2.createdAt,
           channelId: channel.id
         };
-        isInActiveChannel = (_getMessagesFromMap = getMessagesFromMap(channelId)) === null || _getMessagesFromMap === void 0 ? void 0 : _getMessagesFromMap.find(function (message) {
-          return message.id === _messageCopy2.tid;
-        });
+        isInActiveChannel = getMessagesFromMap(channelId)[_messageCopy2.tid];
         if (!isInActiveChannel) {
           _context6.n = 29;
           break;
@@ -19735,7 +19803,7 @@ function resendMessage(action) {
           break;
         }
         _context6.n = 31;
-        return put(updateMessageAC(_messageCopy2.tid, JSON.parse(JSON.stringify(_messageResponse))));
+        return put(updateMessageAC(_messageCopy2.tid, JSON.parse(JSON.stringify(_messageResponse2))));
       case 31:
         updateMessageOnMap(channel.id, {
           messageId: _messageCopy2.tid,
@@ -19744,7 +19812,7 @@ function resendMessage(action) {
         updateMessageOnAllMessages(_messageCopy2.tid, _messageUpdateData);
       case 32:
         updateChannelOnAllChannels(channel.id, channel);
-        _messageToUpdate = JSON.parse(JSON.stringify(_messageResponse));
+        _messageToUpdate = JSON.parse(JSON.stringify(_messageResponse2));
         updateChannelLastMessageOnAllChannels(channel.id, _messageToUpdate);
         _context6.n = 33;
         return put(updateChannelLastMessageAC(_messageToUpdate, {
@@ -19905,7 +19973,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -19927,7 +19995,9 @@ function getMessagesQuery(action) {
       case 2:
         messageQuery = _context9.v;
         query.messageQuery = messageQuery;
-        cachedMessages = getMessagesFromMap(channel.id);
+        cachedMessages = Object.values(getMessagesFromMap(channel.id) || {}).sort(function (a, b) {
+          return Number(a.id) - Number(b.id);
+        });
         result = {
           messages: [],
           hasNext: false
@@ -20149,6 +20219,7 @@ function getMessagesQuery(action) {
         _context9.n = 46;
         break;
       case 39:
+        previousAllMessages = getAllMessages();
         setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
@@ -20186,13 +20257,30 @@ function getMessagesQuery(action) {
           updateMessageOnAllMessages(msg.id, updatedMessage || msg);
           updatedMessages.push(updatedMessage || msg);
         });
+        lastMessageId = updatedMessages[updatedMessages.length - 1].id;
+        _allMessages2 = getAllMessages();
+        setMappedAllMessages = {};
+        previousAllMessages.forEach(function (msg) {
+          if (msg.channelId === channel.id) {
+            setMappedAllMessages[msg.id] = msg;
+          }
+        });
+        _allMessages2.forEach(function (msg) {
+          if (msg.channelId === channel.id) {
+            setMappedAllMessages[msg.id] = msg;
+          }
+        });
+        allMessagesAfterLastMessage = (_Object$values = Object.values(setMappedAllMessages || {})) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (msg) {
+          return msg.id > lastMessageId;
+        });
+        updatedMessages = [].concat(updatedMessages, allMessagesAfterLastMessage || []);
         setMessagesToMap(channel.id, updatedMessages);
-        setAllMessages([].concat(updatedMessages));
+        setAllMessages(updatedMessages);
         _context9.n = 44;
         return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return put(setMessagesHasPrevAC(result.hasNext));
+        return put(setMessagesHasPrevAC(true));
       case 45:
         _context9.n = 46;
         return put(setMessagesHasNextAC(false));
@@ -20341,6 +20429,7 @@ function loadMoreMessages(action) {
         result = _context1.v;
         if (result.messages.length) {
           addAllMessages(result.messages, MESSAGE_LOAD_DIRECTION.PREV);
+          setMessagesToMap(channelId, result.messages);
         }
         _context1.n = 5;
         return put(setMessagesHasPrevAC(result.hasNext));
@@ -20368,6 +20457,7 @@ function loadMoreMessages(action) {
         result = _context1.v;
         if (result.messages.length) {
           addAllMessages(result.messages, MESSAGE_LOAD_DIRECTION.NEXT);
+          setMessagesToMap(channelId, result.messages);
         }
         _context1.n = 9;
         return put(setMessagesHasNextAC(result.hasNext));
@@ -20980,7 +21070,7 @@ function updateMessageOptimisticallyForAddPollVote(channelId, message, vote) {
   }, _marked18$1);
 }
 function addPollVote(action) {
-  var payload, channelId, pollId, optionId, _message4, isResend, sceytChatClient, _user$presence2, connectionState, user, vote, pendingAction, conflictCheck, channel, _getMessagesFromMap2, _store$getState$Messa, _currentMessage$pollD, _currentMessage$pollD2, _currentMessage$pollD3, currentMessage, hasNext, obj, _t19;
+  var payload, channelId, pollId, optionId, _message4, isResend, sceytChatClient, _user$presence2, connectionState, user, vote, pendingAction, conflictCheck, channel, _Object$values2, _store$getState$Messa, _currentMessage$pollD, _currentMessage$pollD2, _currentMessage$pollD3, currentMessage, hasNext, obj, _t19;
   return _regenerator().w(function (_context21) {
     while (1) switch (_context21.p = _context21.n) {
       case 0:
@@ -21039,7 +21129,7 @@ function addPollVote(action) {
           _context21.n = 3;
           break;
         }
-        currentMessage = ((_getMessagesFromMap2 = getMessagesFromMap(channelId)) === null || _getMessagesFromMap2 === void 0 ? void 0 : _getMessagesFromMap2.find(function (msg) {
+        currentMessage = ((_Object$values2 = Object.values(getMessagesFromMap(channelId) || {})) === null || _Object$values2 === void 0 ? void 0 : _Object$values2.find(function (msg) {
           return msg.id === _message4.id || msg.tid === _message4.id;
         })) || _message4;
         hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[pollId]) || false;
@@ -21181,7 +21271,7 @@ function updateMessageOptimisticallyForDeletePollVote(channelId, message, vote)
   }, _marked21$1);
 }
 function deletePollVote(action) {
-  var payload, channelId, pollId, optionId, _message5, isResend, sceytChatClient, _message5$pollDetails, _message5$pollDetails2, _message5$pollDetails3, connectionState, vote, pendingAction, conflictCheck, channel, _getMessagesFromMap3, _currentMessage$pollD4, _currentMessage$pollD5, _currentMessage$pollD6, currentMessage, obj, _t20;
+  var payload, channelId, pollId, optionId, _message5, isResend, sceytChatClient, _message5$pollDetails, _message5$pollDetails2, _message5$pollDetails3, connectionState, vote, pendingAction, conflictCheck, channel, _Object$values3, _currentMessage$pollD4, _currentMessage$pollD5, _currentMessage$pollD6, currentMessage, obj, _t20;
   return _regenerator().w(function (_context24) {
     while (1) switch (_context24.p = _context24.n) {
       case 0:
@@ -21227,7 +21317,7 @@ function deletePollVote(action) {
           _context24.n = 4;
           break;
         }
-        currentMessage = ((_getMessagesFromMap3 = getMessagesFromMap(channelId)) === null || _getMessagesFromMap3 === void 0 ? void 0 : _getMessagesFromMap3.find(function (msg) {
+        currentMessage = ((_Object$values3 = Object.values(getMessagesFromMap(channelId) || {})) === null || _Object$values3 === void 0 ? void 0 : _Object$values3.find(function (msg) {
           return msg.id === _message5.id || msg.tid === _message5.id;
         })) || _message5;
         _context24.n = 3;
@@ -23226,7 +23316,7 @@ var MembersText = styled.div(_templateObject7$1 || (_templateObject7$1 = _tagged
 });
 var Center = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 24px;\n"])));
 
-var _templateObject$5, _templateObject2$4;
+var _templateObject$5, _templateObject2$4, _templateObject3$4;
 var SceytChat = function SceytChat(_ref) {
   var client = _ref.client,
     theme = _ref.theme,
@@ -23251,7 +23341,9 @@ var SceytChat = function SceytChat(_ref) {
     memberCount = _ref.memberCount,
     _ref$disableFrowardMe = _ref.disableFrowardMentionsCount,
     disableFrowardMentionsCount = _ref$disableFrowardMe === void 0 ? false : _ref$disableFrowardMe,
-    chatMinWidth = _ref.chatMinWidth;
+    chatMinWidth = _ref.chatMinWidth,
+    _ref$embeddedJoinGrou = _ref.embeddedJoinGroupPopup,
+    embeddedJoinGroupPopup = _ref$embeddedJoinGrou === void 0 ? false : _ref$embeddedJoinGrou;
   var useInviteLink = getUseInviteLink();
   var _useColor = useColors(),
     backgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -23484,6 +23576,11 @@ var SceytChat = function SceytChat(_ref) {
     window.history.pushState({}, '', window.location.pathname);
     dispatch(setJoinableChannelAC(null));
   };
+  var joinPopup = joinableChannel && getUseInviteLink() ? (/*#__PURE__*/React__default.createElement(JoinGroupPopup, {
+    onClose: handleCloseJoinPopup,
+    onJoin: handleJoinChannel,
+    channel: joinableChannel
+  })) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, SceytChatClient ? (/*#__PURE__*/React__default.createElement(ChatContainer, {
     onDrop: handleDropFile,
     onDragOver: handleDragOver,
@@ -23493,14 +23590,10 @@ var SceytChat = function SceytChat(_ref) {
     highlightedBackground: highlightedBackground,
     id: 'sceyt_chat_container',
     chatMinWidth: chatMinWidth
-  }, children)) : '', joinableChannel && getUseInviteLink() && (/*#__PURE__*/React__default.createElement(JoinGroupPopup, {
-    onClose: handleCloseJoinPopup,
-    onJoin: handleJoinChannel,
-    channel: joinableChannel
-  })));
+  }, children, embeddedJoinGroupPopup && joinPopup && /*#__PURE__*/React__default.createElement(EmbeddedPopupWrapper, null, joinPopup))) : '', !embeddedJoinGroupPopup && joinPopup);
 };
 var Container$2 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100vh;\n"])));
-var ChatContainer = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  max-height: 100vh;\n  min-width: ", ";\n  background-color: ", ";\n\n  /* Global highlighted background styles */\n  ::selection {\n    background-color: ", ";\n  }\n\n  ::-moz-selection {\n    background-color: ", ";\n  }\n\n  /* For text selection highlighting */\n  *::selection {\n    background-color: ", ";\n  }\n\n  *::-moz-selection {\n    background-color: ", ";\n  }\n"])), function (props) {
+var ChatContainer = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  max-height: 100vh;\n  min-width: ", ";\n  background-color: ", ";\n  position: relative;\n\n  /* Global highlighted background styles */\n  ::selection {\n    background-color: ", ";\n  }\n\n  ::-moz-selection {\n    background-color: ", ";\n  }\n\n  /* For text selection highlighting */\n  *::selection {\n    background-color: ", ";\n  }\n\n  *::-moz-selection {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.withChannelsList && (props.chatMinWidth || '1200px');
 }, function (props) {
   return props.backgroundColor;
@@ -23513,6 +23606,7 @@ var ChatContainer = styled.div(_templateObject2$4 || (_templateObject2$4 = _tagg
 }, function (props) {
   return props.highlightedBackground;
 });
+var EmbeddedPopupWrapper = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  overflow: hidden;\n\n  > * {\n    pointer-events: all;\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n"])));
 
 var SceytChatContainer = function SceytChatContainer(_ref) {
   var client = _ref.client,
@@ -23547,7 +23641,9 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
       JoinGroupPopup: {},
       InviteLinkModal: {},
       ResetLinkConfirmModal: {}
-    } : _ref$inviteLinkOption;
+    } : _ref$inviteLinkOption,
+    _ref$embeddedJoinGrou = _ref.embeddedJoinGroupPopup,
+    embeddedJoinGroupPopup = _ref$embeddedJoinGrou === void 0 ? false : _ref$embeddedJoinGrou;
   useEffect(function () {
     log.setLevel(logLevel);
     if (baseUrlForInviteMembers) {
@@ -23583,7 +23679,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     channelTypeFilter: channelTypeFilter,
     memberCount: memberCount,
     disableFrowardMentionsCount: disableFrowardMentionsCount,
-    chatMinWidth: chatMinWidth
+    chatMinWidth: chatMinWidth,
+    embeddedJoinGroupPopup: embeddedJoinGroupPopup
   }));
 };
 
@@ -23835,7 +23932,7 @@ function SvgPoll(props) {
   })));
 }
 
-var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
 var LastMessageAttachments = function LastMessageAttachments(_ref) {
   var lastMessage = _ref.lastMessage;
   return !!(lastMessage.attachments && lastMessage.attachments.length || lastMessage !== null && lastMessage !== void 0 && lastMessage.pollDetails && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === MESSAGE_TYPE.POLL) && (lastMessage !== null && lastMessage !== void 0 && lastMessage.pollDetails && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === MESSAGE_TYPE.POLL ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPoll, null), lastMessage.body ? '' : 'Poll')) : lastMessage.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPicture, null), lastMessage.body ? '' : 'Photo')) : lastMessage.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVideoCall, null), lastMessage.body ? '' : 'Video')) : lastMessage.attachments[0].type === attachmentTypes.file ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File')) : lastMessage.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), lastMessage.body ? '' : 'Voice')) : null);
@@ -23875,7 +23972,7 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
-  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'Joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
+  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
     poll: (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.pollDetails) && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === MESSAGE_TYPE.POLL
   }, channel.lastReactedMessage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Reacted", /*#__PURE__*/React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "')), LastMessageAttachments({
     lastMessage: lastMessage
@@ -24215,7 +24312,7 @@ var ChannelInfo = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTe
 var MutedIcon = styled.span(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    height: 16px;\n    width: 16px;\n    margin-left: 5px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var LastMessage = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  color: ", ";\n  max-width: ", ";\n\n  height: ", ";\n"])), function (props) {
+var LastMessage = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  color: ", ";\n  max-width: ", ";\n\n  height: ", ";\n"])), function (props) {
   return props.fontSize || '14px';
 }, function (props) {
   return props.color;
@@ -24374,7 +24471,7 @@ var ChannelSearch = function ChannelSearch(_ref) {
   }));
 };
 
-var _templateObject$8, _templateObject2$7, _templateObject3$5, _templateObject4$5;
+var _templateObject$8, _templateObject2$7, _templateObject3$6, _templateObject4$5;
 var ContactItem = function ContactItem(_ref) {
   var contact = _ref.contact,
     createChatWithContact = _ref.createChatWithContact,
@@ -24434,7 +24531,7 @@ var ChannelInfo$1 = styled.div(_templateObject$8 || (_templateObject$8 = _tagged
   return props.subjectColor || props.textColor;
 });
 var AvatarWrapper$1 = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
-var UserStatus$1 = styled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  background-color: ", ";\n  border: 2.5px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
+var UserStatus$1 = styled.span(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  background-color: ", ";\n  border: 2.5px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
   return props.backgroundColor || '#56E464';
 }, function (props) {
   return props.borderColor || '#ffffff';
@@ -24680,7 +24777,7 @@ function SvgLinkIconWb(props) {
   })));
 }
 
-var _templateObject$a, _templateObject2$9, _templateObject3$6, _templateObject4$6;
+var _templateObject$a, _templateObject2$9, _templateObject3$7, _templateObject4$6;
 function AddMembersListItemInviteLink(_ref) {
   var _getInviteLinkOptions;
   var onClick = _ref.onClick;
@@ -24733,14 +24830,14 @@ var Row$1 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplate
 var IconCircle = styled.span(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  min-width: 40px;\n  border-radius: 50%;\n  background-color: ", ";\n  box-sizing: border-box;\n  border: 0.5px solid rgba(0, 0, 0, 0.14);\n  overflow: hidden;\n"])), function (props) {
   return props.backgroundColor;
 });
-var StyledLinkIcon = styled(SvgLinkIconWb)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  /* keep default fill from theme surface */\n"])), function (props) {
+var StyledLinkIcon = styled(SvgLinkIconWb)(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  /* keep default fill from theme surface */\n"])), function (props) {
   return props.color;
 });
 var Title$1 = styled.h4(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  margin: 0 0 0 12px;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 16px;\n  color: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$b, _templateObject2$a, _templateObject3$7, _templateObject4$7, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$2;
+var _templateObject$b, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$2;
 var UsersPopup = function UsersPopup(_ref) {
   var channel = _ref.channel,
     toggleCreatePopup = _ref.toggleCreatePopup,
@@ -25084,7 +25181,7 @@ var MembersContainer = styled(List)(_templateObject2$a || (_templateObject2$a =
 }, function (props) {
   return props.thumbColor;
 });
-var SearchUserCont = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 24px 12px 0;\n\n  ", " {\n    top: 10px;\n    right: 11px;\n  }\n"])), ClearTypedText);
+var SearchUserCont = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 24px 12px 0;\n\n  ", " {\n    top: 10px;\n    right: 11px;\n  }\n"])), ClearTypedText);
 var SearchUsersInput = styled.input(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  width: 100%;\n  font-size: 14px;\n  border: ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-left: 36px;\n  color: ", ";\n  background-color: ", ";\n\n  &::placeholder {\n    color: ", ";\n    font-size: 14px;\n    opacity: 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), function (props) {
   return props.widthBorder ? "1px solid " + props.borderColor : 'none';
 }, function (props) {
@@ -25309,7 +25406,7 @@ var Controls = styled.div(_templateObject2$b || (_templateObject2$b = _taggedTem
   return props.tickColor;
 });
 
-var _templateObject$d, _templateObject2$c, _templateObject3$8, _templateObject4$8, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$3;
+var _templateObject$d, _templateObject2$c, _templateObject3$9, _templateObject4$8, _templateObject5$5, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$3;
 function CreateChannel(_ref) {
   var handleClose = _ref.handleClose,
     channelType = _ref.channelType,
@@ -25670,7 +25767,7 @@ var UploadAvatarLabel = styled.label(_templateObject2$c || (_templateObject2$c =
 }, function (props) {
   return props.iconColor;
 });
-var URILabel = styled.label(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 15px;\n  margin-top: 18px;\n  margin-bottom: 5px;\n"])));
+var URILabel = styled.label(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 15px;\n  margin-top: 18px;\n  margin-bottom: 5px;\n"])));
 var UploadChannelAvatar = styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
 var FileUploaderInput = styled.input(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 var RemoveSelectedAvatar = styled.span(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-left: 16px;\n  cursor: pointer;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
@@ -25686,7 +25783,7 @@ var UriPrefix = styled.span(_templateObject9$3 || (_templateObject9$3 = _taggedT
   return props.color;
 });
 
-var _templateObject$e, _templateObject2$d, _templateObject3$9;
+var _templateObject$e, _templateObject2$d, _templateObject3$a;
 var DropDownContainer = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", ";\n  order: ", ";\n  margin: ", ";\n  ", ";\n"])), function (props) {
   return props.height ? props.height : '100%';
 }, function (props) {
@@ -25703,7 +25800,7 @@ var DropDownTriggerContainer = styled.div(_templateObject2$d || (_templateObject
 }, function (props) {
   return props.isOpen && "\n        &::after {\n            transform: translateY(-50%) rotate(-45deg);\n            top: calc(50% + 2px);\n        }\n        ";
 });
-var DropDownBody = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: ", ";\n  min-width: 200px;\n  right: ", ";\n  left: ", ";\n  top: 100%;\n  display: flex;\n  direction: initial;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  max-height: 220px;\n  overflow-y: auto;\n  border: 0.5px solid ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n\n  & > * {\n    &:first-child {\n      margin-top: 5px;\n    }\n\n    &:first-child {\n      margin-bottom: 5px;\n    }\n  }\n\n  ", "\n"])), function (props) {
+var DropDownBody = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: ", ";\n  min-width: 200px;\n  right: ", ";\n  left: ", ";\n  top: 100%;\n  display: flex;\n  direction: initial;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  max-height: 220px;\n  overflow-y: auto;\n  border: 0.5px solid ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n\n  & > * {\n    &:first-child {\n      margin-top: 5px;\n    }\n\n    &:first-child {\n      margin-bottom: 5px;\n    }\n  }\n\n  ", "\n"])), function (props) {
   return props.zIndex || '30';
 }, function (props) {
   return props.position !== 'left' && '0';
@@ -25999,7 +26096,7 @@ function SvgLeave(props) {
   })));
 }
 
-var _templateObject$g, _templateObject2$e, _templateObject3$a;
+var _templateObject$g, _templateObject2$e, _templateObject3$b;
 var EditProfile = function EditProfile(_ref) {
   var handleCloseEditProfile = _ref.handleCloseEditProfile,
     user = _ref.user;
@@ -26080,9 +26177,9 @@ var Container$5 = styled.div(_templateObject$g || (_templateObject$g = _taggedTe
   return props.backgroundColor;
 });
 var EditAvatarCont = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  margin: 20px 0 24px;\n"])));
-var EditProfileBody = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  padding: 0 16px;\n  margin-bottom: 16px;\n"])));
+var EditProfileBody = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  padding: 0 16px;\n  margin-bottom: 16px;\n"])));
 
-var _templateObject$h, _templateObject2$f, _templateObject3$b, _templateObject4$9, _templateObject5$6, _templateObject6$5;
+var _templateObject$h, _templateObject2$f, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$5;
 var settingsPages = {
   profile: 'Profile',
   notifications: 'Notifications',
@@ -26166,7 +26263,7 @@ var Container$6 = styled.div(_templateObject$h || (_templateObject$h = _taggedTe
 var SettingsHeader = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  height: 64px;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
   return props.borderColor;
 });
-var ArrowLeftWrapper = styled.span(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  margin-right: 12px;\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var ArrowLeftWrapper = styled.span(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  margin-right: 12px;\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.color;
 });
 var ProfileInfo = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin: 20px 0 24px;\n"])));
@@ -26177,9 +26274,9 @@ var UserNumber = styled.h4(_templateObject6$5 || (_templateObject6$5 = _taggedTe
   return props.color;
 });
 
-var _templateObject$i, _templateObject2$g, _templateObject3$c, _templateObject4$a, _templateObject5$7, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$4, _templateObject0$3;
+var _templateObject$i, _templateObject2$g, _templateObject3$d, _templateObject4$a, _templateObject5$7, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$4, _templateObject0$3;
 var ChannelList = function ChannelList(_ref) {
-  var _activeChannel$member, _channelListRef$curre2, _searchedChannels$cha, _searchedChannels$cha2, _searchedChannels$con, _searchedChannels$cha3, _searchedChannels$cha4, _searchedChannels$cha5, _searchedChannels$cha6;
+  var _activeChannel$member, _searchedChannels$cha, _searchedChannels$cha2, _searchedChannels$con, _searchedChannels$cha3, _searchedChannels$cha4, _searchedChannels$cha5, _searchedChannels$cha6;
   var className = _ref.className,
     selectedChannelBackground = _ref.selectedChannelBackground,
     selectedChannelLeftBorder = _ref.selectedChannelLeftBorder,
@@ -26478,7 +26575,7 @@ var ChannelList = function ChannelList(_ref) {
     backgroundColor: backgroundColor || background
   }, /*#__PURE__*/React__default.createElement(ChannelListHeader, {
     withCustomList: !!List,
-    maxWidth: channelListRef.current && ((_channelListRef$curre2 = channelListRef.current) === null || _channelListRef$curre2 === void 0 ? void 0 : _channelListRef$curre2.clientWidth) || 0,
+    maxWidth: '100%',
     borderColor: borderColor,
     padding: searchChannelsPadding
   }, Profile, showSearch && searchChannelsPosition === 'inline' ? (/*#__PURE__*/React__default.createElement(ChannelSearch, {
@@ -26812,7 +26909,7 @@ var Container$7 = styled.div(_templateObject$i || (_templateObject$i = _taggedTe
 var ChannelsList = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.thumbColor;
 });
-var SearchedChannels = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  height: calc(100vh - 123px);\n  overflow-x: hidden;\n"])));
+var SearchedChannels = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  height: calc(100vh - 123px);\n  overflow-x: hidden;\n"])));
 var SearchedChannelsHeader = styled.p(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  padding-left: 16px;\n  font-weight: 500;\n  font-size: ", ";\n  line-height: 14px;\n  color: ", ";\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
@@ -26830,7 +26927,7 @@ var NoData = styled.div(_templateObject8$5 || (_templateObject8$5 = _taggedTempl
 });
 var LoadingWrapper = styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
 var ChannelListHeader = styled.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
-  return props.maxWidth ? props.maxWidth + "px" : 'inherit';
+  return props.maxWidth ? "" + props.maxWidth : 'inherit';
 }, function (props) {
   return props.padding || '12px';
 }, function (props) {
@@ -26864,7 +26961,7 @@ function SvgMessage(props) {
   })));
 }
 
-var _templateObject$j, _templateObject2$h, _templateObject3$d, _templateObject4$b, _templateObject5$8;
+var _templateObject$j, _templateObject2$h, _templateObject3$e, _templateObject4$b, _templateObject5$8;
 var detailsSwitcherTimeout;
 function Chat(_ref) {
   var children = _ref.children,
@@ -26957,7 +27054,7 @@ var Container$8 = styled.div(_templateObject$j || (_templateObject$j = _taggedTe
 var SelectChatContainer = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  z-index: 99;\n"])), function (props) {
   return props.backgroundColor;
 });
-var SelectChatContent = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var SelectChatContent = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
 var SelectChatTitle = styled.h3(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n  margin: 24px 0 8px;\n"])), function (props) {
@@ -26992,7 +27089,7 @@ function SvgInfo(props) {
   })));
 }
 
-var _templateObject$k, _templateObject2$i, _templateObject3$e, _templateObject4$c, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$6, _templateObject9$5, _templateObject0$4;
+var _templateObject$k, _templateObject2$i, _templateObject3$f, _templateObject4$c, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$6, _templateObject9$5, _templateObject0$4;
 function ChatHeader(_ref) {
   var infoIcon = _ref.infoIcon,
     backgroundColor = _ref.backgroundColor,
@@ -27120,7 +27217,7 @@ var ChannelInfo$2 = styled.div(_templateObject2$i || (_templateObject2$i = _tagg
 }, function (props) {
   return props.order;
 }, UserStatus);
-var ChannelName = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  margin-left: 7px;\n  width: 100%;\n\n  & > ", " {\n    max-width: calc(100% - 8px);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])), SectionHeader);
+var ChannelName = styled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  margin-left: 7px;\n  width: 100%;\n\n  & > ", " {\n    max-width: calc(100% - 8px);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])), SectionHeader);
 var CustomActionsWrapper = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  order: ", ";\n"])), function (props) {
   return props.order;
 });
@@ -27586,7 +27683,7 @@ function SvgFullscreenExit(props) {
   })));
 }
 
-var _templateObject$m, _templateObject2$j, _templateObject3$f, _templateObject4$d, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$6, _templateObject0$5, _templateObject1$3;
+var _templateObject$m, _templateObject2$j, _templateObject3$g, _templateObject4$d, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$6, _templateObject0$5, _templateObject1$3;
 var timerInterval;
 var VideoPlayer = function VideoPlayer(_ref) {
   var src = _ref.src,
@@ -27802,7 +27899,7 @@ var Component = styled.div(_templateObject$m || (_templateObject$m = _taggedTemp
   return props.loaded && '';
 });
 var UploadCont = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  min-height: 100px;\n  min-width: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var PlayPauseWrapper = styled.span(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin-right: 16px;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    margin-right: 8px;\n    width: 18px;\n    height: 18px;\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 480px) {\n    margin-right: 8px;\n    width: 16px;\n    height: 16px;\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
+var PlayPauseWrapper = styled.span(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin-right: 16px;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    margin-right: 8px;\n    width: 18px;\n    height: 18px;\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 480px) {\n    margin-right: 8px;\n    width: 16px;\n    height: 16px;\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
 var ControlsContainer = styled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  width: calc(100% - 32px);\n  background: linear-gradient(360deg, rgba(23, 25, 28, 0.8) 0%, rgba(23, 25, 28, 0) 100%);\n  padding: 10px 16px 16px;\n  z-index: 20;\n\n  @media (max-width: 768px) {\n    width: calc(100% - 20px);\n    padding: 0 10px;\n  }\n"])));
 var ControlTime = styled.span(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  @media (max-width: 768px) {\n    font-size: 14px;\n  }\n  @media (max-width: 480px) {\n    font-size: 12px;\n  }\n"])), function (props) {
   return props.color;
@@ -27814,7 +27911,7 @@ var VolumeSlide = styled.input(_templateObject9$6 || (_templateObject9$6 = _tagg
 var Progress = styled.input(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  margin-right: 15px;\n  width: 100%;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.6);\n  border-radius: 5px;\n  background-image: linear-gradient(#fff, #fff);\n  //background-size: 70% 100%;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 2px 0 #555;\n    transition: all 0.3s ease-in-out;\n  }\n  &::-moz-range-thumb {\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 2px 0 #555;\n    transition: all 0.3s ease-in-out;\n  }\n\n  &::-ms-thumb {\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 2px 0 #555;\n    transition: all 0.3s ease-in-out;\n  }\n\n  &::-webkit-slider-thumb:hover {\n    background: #fff;\n  }\n  &::-moz-range-thumb:hover {\n    background: #fff;\n  }\n  &::-ms-thumb:hover {\n    background: #fff;\n  }\n\n  &::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    transition: all 0.3s ease-in-out;\n  }\n\n  &::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    transition: all 0.3s ease-in-out;\n  }\n  &::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    transition: all 0.3s ease-in-out;\n  }\n"])));
 var FullScreenWrapper = styled.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-left: 16px;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    margin-left: 12px;\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 480px) {\n    margin-left: auto;\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
 
-var _templateObject$n, _templateObject2$k, _templateObject3$g, _templateObject4$e, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject0$6, _templateObject1$4;
+var _templateObject$n, _templateObject2$k, _templateObject3$h, _templateObject4$e, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject0$6, _templateObject1$4;
 function ForwardMessagePopup(_ref) {
   var title = _ref.title,
     buttonText = _ref.buttonText,
@@ -27865,7 +27962,7 @@ function ForwardMessagePopup(_ref) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
       if (channelsLoading === LOADING_STATE.LOADED && channelsHasNext && !loadingRef.current) {
         loadingRef.current = true;
-        dispatch(loadMoreChannelsForForward(15));
+        dispatch(loadMoreChannelsForForward(20));
         var timeout = setTimeout(function () {
           loadingRef.current = false;
           clearTimeout(timeout);
@@ -28138,7 +28235,7 @@ var ForwardChannelsCont = styled.div(_templateObject$n || (_templateObject$n = _
 var ChannelItem = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 8px;\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])), function (props) {
   return props.backgroundHover;
 });
-var ChannelInfo$3 = styled.div(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  margin-right: auto;\n  max-width: calc(100% - 74px);\n"])));
+var ChannelInfo$3 = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  margin-right: auto;\n  max-width: calc(100% - 74px);\n"])));
 var ChannelsGroupTitle = styled.h4(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 14px;\n  margin: ", ";\n  color: ", ";\n"])), function (props) {
   return props.margin || '20px 0 12px';
 }, function (props) {
@@ -28334,7 +28431,7 @@ var DeleteOptionItem = styled.div(_templateObject2$m || (_templateObject2$m = _t
   return props.color;
 });
 
-var _templateObject$q, _templateObject2$n, _templateObject3$h, _templateObject4$f, _templateObject5$c, _templateObject6$a, _templateObject7$9, _templateObject8$9, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
+var _templateObject$q, _templateObject2$n, _templateObject3$i, _templateObject4$f, _templateObject5$c, _templateObject6$a, _templateObject7$9, _templateObject8$9, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
 var SliderPopup = function SliderPopup(_ref) {
   var channel = _ref.channel,
     setIsSliderOpen = _ref.setIsSliderOpen,
@@ -28859,7 +28956,7 @@ var SliderPopup = function SliderPopup(_ref) {
 };
 var Container$b = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 100vh;\n  z-index: 999;\n"])));
 var ProgressWrapper = styled.span(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 35px;\n  height: 35px;\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 SliderHeader = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 16px;\n  background-color: rgba(0, 0, 0, 0.8);\n"])));
+var SliderHeader = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 16px;\n  background-color: rgba(0, 0, 0, 0.8);\n"])));
 var SliderBody = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: calc(100% - 60px);\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & .custom_carousel {\n    height: 100%;\n\n    & .rec.rec-carousel,\n    & .rec.rec-slider {\n      height: 100% !important;\n    }\n  }\n\n  & .rec-carousel-item {\n    display: flex;\n    align-items: center;\n  }\n"])));
 var FileInfo = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 40%;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 14px;\n  min-width: 230px;\n"])));
 var Info = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n"])));
@@ -29052,7 +29149,7 @@ function SvgSelectionIcon(props) {
   })));
 }
 
-var _templateObject$s, _templateObject2$o, _templateObject3$i, _templateObject4$g, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$a, _templateObject9$9, _templateObject0$8;
+var _templateObject$s, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$a, _templateObject9$9, _templateObject0$8;
 var reactionsPrevLength = 0;
 function ReactionsPopup(_ref) {
   var messageId = _ref.messageId,
@@ -29282,7 +29379,7 @@ var Container$d = styled.div(_templateObject$s || (_templateObject$s = _taggedTe
   return props.backgroundColor;
 });
 var UserNamePresence$1 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 70px);\n  margin-left: 12px;\n"])));
-var MemberName$1 = styled.h3(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  max-width: calc(100% - 7px);\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n  & > span {\n    color: ", ";\n  }\n"])), function (props) {
+var MemberName$1 = styled.h3(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  max-width: calc(100% - 7px);\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n  & > span {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.color;
@@ -29648,7 +29745,7 @@ function SvgInfoAction(props) {
   })));
 }
 
-var _templateObject$t, _templateObject2$p, _templateObject3$j;
+var _templateObject$t, _templateObject2$p, _templateObject3$k;
 function MessageActions(_ref) {
   var _ref$isPollMessage = _ref.isPollMessage,
     isPollMessage = _ref$isPollMessage === void 0 ? false : _ref$isPollMessage,
@@ -29908,7 +30005,7 @@ var EditMessageContainer = styled.div(_templateObject2$p || (_templateObject2$p
 }, function (props) {
   return props.backgroundColor;
 });
-var Action = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  padding: 4px;\n  margin: 8px 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  order: ", ";\n  color: ", ";\n  border-radius: 50%;\n\n  &:first-child {\n    margin-left: 8px;\n  }\n\n  &:last-child {\n    margin-right: 8px;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (props) {
+var Action = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  padding: 4px;\n  margin: 8px 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  order: ", ";\n  color: ", ";\n  border-radius: 50%;\n\n  &:first-child {\n    margin-left: 8px;\n  }\n\n  &:last-child {\n    margin-right: 8px;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (props) {
   return props.order || 1;
 }, function (props) {
   return props.iconColor;
@@ -30032,7 +30129,7 @@ function SvgPlayVideo(props) {
   })));
 }
 
-var _templateObject$u, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$b;
+var _templateObject$u, _templateObject2$q, _templateObject3$l, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$b;
 var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -30145,7 +30242,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
     preload: 'auto',
     id: 'video',
     src: file.attachmentUrl || videoUrl
-  }), videoCurrentTime && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
+  }), videoCurrentTime && !isRepliedMessage && (!isDetailsView || !loading) && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
   /*#__PURE__*/
   React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
     isDetailsView: isDetailsView,
@@ -30172,7 +30269,7 @@ var VideoTime = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTe
 }, function (props) {
   return props.color;
 });
-var VideoPlayButton = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  visibility: ", ";\n"])), function (props) {
+var VideoPlayButton = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  visibility: ", ";\n"])), function (props) {
   return props.showOnHover && 'hidden';
 });
 var Component$1 = styled.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 100%;\n  max-height: 100%;\n  width: ", ";\n  height: ", ";\n  min-height: ", ";\n\n  ", ";\n  /*width: 100vw;\n  background-color: transparent;\n  margin-top: -50vw;\n  padding: 0 40px;\n  z-index: 20;*/\n\n  & > video {\n    max-width: 100%;\n    max-height: 100%;\n    width: ", ";\n    height: ", ";\n    min-height: ", ";\n    border: ", ";\n    object-fit: cover;\n    box-sizing: border-box;\n    border-radius: ", ";\n  }\n\n  &:hover {\n    & ", " {\n      visibility: visible;\n    }\n  }\n"])), function (props) {
@@ -32139,7 +32236,7 @@ class WaveSurfer extends Player {
 WaveSurfer.BasePlugin = BasePlugin;
 WaveSurfer.dom = dom;
 
-var _templateObject$v, _templateObject2$r, _templateObject3$l, _templateObject4$i, _templateObject5$f, _templateObject6$d;
+var _templateObject$v, _templateObject2$r, _templateObject3$m, _templateObject4$i, _templateObject5$f, _templateObject6$d;
 var AudioPlayer = function AudioPlayer(_ref) {
   var url = _ref.url,
     file = _ref.file,
@@ -32359,7 +32456,7 @@ var Container$e = styled.div(_templateObject$v || (_templateObject$v = _taggedTe
 var PlayPause = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n    display: flex;\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var AudioVisualization = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var AudioVisualization = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var AudioRate = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  width: 30px;\n  min-width: 30px;\n  border-radius: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 14px;\n  color: ", ";\n  height: 18px;\n  box-sizing: border-box;\n  margin-left: 14px;\n  cursor: pointer;\n\n  & > span {\n    margin-top: auto;\n    line-height: 16px;\n    font-size: 9px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
@@ -32370,7 +32467,7 @@ var Timer$1 = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemp
   return props.color;
 });
 
-var _templateObject$w, _templateObject2$s, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$c, _templateObject8$b, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
+var _templateObject$w, _templateObject2$s, _templateObject3$n, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$c, _templateObject8$b, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -33028,7 +33125,7 @@ var AttachmentImgCont = styled.div(_templateObject2$s || (_templateObject2$s = _
 }, DownloadImage, function (props) {
   return props.isPreview && "\n      width: 48px;\n      min-width: 48px;\n      height: 48px;\n  ";
 });
-var FileThumbnail = styled.img(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 8px;\n"])));
+var FileThumbnail = styled.img(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 8px;\n"])));
 var DownloadFile$1 = styled.span(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
@@ -33098,7 +33195,7 @@ var VideoCont = styled.div(_templateObject11$3 || (_templateObject11$3 = _tagged
   return props.isDetailsView && '100%';
 });
 
-var _templateObject$x, _templateObject2$t, _templateObject3$n, _templateObject4$k;
+var _templateObject$x, _templateObject2$t, _templateObject3$o, _templateObject4$k;
 var RepliedMessage = function RepliedMessage(_ref) {
   var _message$parentMessag;
   var message = _ref.message,
@@ -33221,7 +33318,7 @@ var ReplyMessageBody = styled.div(_templateObject2$t || (_templateObject2$t = _t
 }, function (props) {
   return props.maxWidth || '100%';
 });
-var MessageStatusDeleted = styled.span(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
+var MessageStatusDeleted = styled.span(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.fontSize;
@@ -33710,7 +33807,7 @@ var EMOJIS = [{
   }]
 }];
 
-var _templateObject$z, _templateObject2$u, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$d, _templateObject8$c;
+var _templateObject$z, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$d, _templateObject8$c;
 var EmojiIcon = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -33911,7 +34008,7 @@ var EmojiHeader = styled.div(_templateObject2$u || (_templateObject2$u = _tagged
 }, function (props) {
   return props.padding || '6px 18px';
 });
-var EmojiSection = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
+var EmojiSection = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
 var EmojiCollection = styled.span(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & > * {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
@@ -33949,7 +34046,7 @@ function SvgPlus(props) {
   })));
 }
 
-var _templateObject$A, _templateObject2$v, _templateObject3$p;
+var _templateObject$A, _templateObject2$v, _templateObject3$q;
 function FrequentlyEmojis(_ref) {
   var handleAddEmoji = _ref.handleAddEmoji,
     handleEmojiPopupToggle = _ref.handleEmojiPopupToggle,
@@ -34086,7 +34183,7 @@ var EmojiItem = styled.span(_templateObject2$v || (_templateObject2$v = _taggedT
 }, function (props) {
   return props.activeBackground;
 });
-var OpenMoreEmojis = styled.span(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  background-color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n    height: 18px;\n    width: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n    & > svg {\n      color: ", ";\n    }\n  }\n  border-radius: 50%;\n"])), function (props) {
+var OpenMoreEmojis = styled.span(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  background-color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n    height: 18px;\n    width: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n    & > svg {\n      color: ", ";\n    }\n  }\n  border-radius: 50%;\n"])), function (props) {
   return props.iconBackgroundColor;
 }, function (props) {
   return props.iconColor;
@@ -34096,7 +34193,7 @@ var OpenMoreEmojis = styled.span(_templateObject3$p || (_templateObject3$p = _ta
   return props.iconHoverColor;
 });
 
-var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m;
+var _templateObject$B, _templateObject2$w, _templateObject3$r, _templateObject4$m;
 var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
   var message = _ref.message,
     _ref$messageStatusDis = _ref.messageStatusDisplayingType,
@@ -34168,7 +34265,7 @@ var HiddenMessageTime = styled.span(_templateObject2$w || (_templateObject2$w =
 }, function (props) {
   return props.color;
 });
-var MessageStatusAndTimeContainer = styled.span(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  display: ", ";\n  align-items: flex-end;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  float: right;\n  line-height: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  direction: ", ";\n  transform: translate(0px, 4px);\n  white-space: nowrap;\n  width: ", ";\n  justify-content: ", ";\n  z-index: 10;\n\n  & > svg {\n    margin-left: 4px;\n    height: 14px;\n    width: 16px;\n  }\n\n  & > ", " {\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
+var MessageStatusAndTimeContainer = styled.span(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  display: ", ";\n  align-items: flex-end;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  float: right;\n  line-height: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  direction: ", ";\n  transform: translate(0px, 4px);\n  white-space: nowrap;\n  width: ", ";\n  justify-content: ", ";\n  z-index: 10;\n\n  & > svg {\n    margin-left: 4px;\n    height: 14px;\n    width: 16px;\n  }\n\n  & > ", " {\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
   return props.showOnlyOnHover && 'hidden';
 }, function (props) {
   return props.hide ? 'none' : 'flex';
@@ -34201,7 +34298,7 @@ var MessageStatusUpdated = styled.span(_templateObject4$m || (_templateObject4$m
   return props.color;
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4;
+var _templateObject$C, _templateObject2$x, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4;
 var POLL_VOTES_LIMIT = 20;
 var AllVotesPopup = function AllVotesPopup(_ref) {
   var _pollVotesHasMore$key, _poll$voteDetails, _poll$voteDetails$vot, _poll$voteDetails3;
@@ -34317,7 +34414,7 @@ var AllVotesPopup = function AllVotesPopup(_ref) {
 };
 var VotesList = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 500px;\n  padding: 8px 0;\n"])));
 var VoterRow = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
-var VoterInfo = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
+var VoterInfo = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
 var VoterName = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  max-width: calc(100% - 120px);\n"])), function (p) {
   return p.color;
 });
@@ -34344,7 +34441,7 @@ var Loader = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTem
   return p.color;
 });
 
-var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$5;
+var _templateObject$D, _templateObject2$y, _templateObject3$t, _templateObject4$o, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$5;
 var VotesResultsPopup = function VotesResultsPopup(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$options$find;
   var onClose = _ref.onClose,
@@ -34478,7 +34575,7 @@ var OptionBlock = styled.div(_templateObject2$y || (_templateObject2$y = _tagged
 }, function (p) {
   return p.border;
 });
-var OptionHeader = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
+var OptionHeader = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
 var OptionTitle = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  max-width: calc(100% - 60px);\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n"])), function (p) {
   return p.color;
 });
@@ -34523,7 +34620,7 @@ function SvgFilledCheckbox(props) {
   })));
 }
 
-var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
+var _templateObject$E, _templateObject2$z, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
 var PollMessage = function PollMessage(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$voteDetails5, _poll$voteDetails6, _poll$voteDetails7;
   var message = _ref.message;
@@ -34576,7 +34673,7 @@ var PollMessage = function PollMessage(_ref) {
     color: textPrimary
   }, poll.name), /*#__PURE__*/React__default.createElement(SubTitle$1, {
     color: textSecondary
-  }, poll.closed ? 'Poll finished' : poll.anonymous ? 'Anonymous poll' : 'Public poll'), /*#__PURE__*/React__default.createElement(Options, null, (poll.options || []).map(function (opt) {
+  }, poll.anonymous ? 'Anonymous poll · ' : '', poll.allowMultipleVotes ? 'Multiple Votes' : 'Single Vote'), /*#__PURE__*/React__default.createElement(Options, null, (poll.options || []).map(function (opt) {
     var votes = votesPerOption[opt.id] || 0;
     var pct = maxVotes > 0 ? Math.round(votes / maxVotes * 100) : 0;
     var selected = ownVotedOptionIds.has(opt.id);
@@ -34654,10 +34751,10 @@ var PollMessage = function PollMessage(_ref) {
   })));
 };
 var Container$h = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n  width: 100%;\n"])));
-var Question$1 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n"])), function (p) {
+var Question$1 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n  word-break: break-word;\n"])), function (p) {
   return p.color;
 });
-var SubTitle$1 = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin: 4px 0 6px 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.08px;\n"])), function (p) {
+var SubTitle$1 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin: 4px 0 6px 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.08px;\n  word-break: break-word;\n"])), function (p) {
   return p.color;
 });
 var Options = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n"])));
@@ -34678,7 +34775,7 @@ var EmptyCircle = styled.span(_templateObject8$f || (_templateObject8$f = _tagge
 var StyledCheck = styled(SvgFilledCheckbox)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  width: 18.5px;\n  height: 18.5px;\n"])), function (p) {
   return p.color;
 });
-var Title$2 = styled.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n  color: ", ";\n  margin-right: auto;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  max-width: calc(100% - 80px);\n"])), function (p) {
+var Title$2 = styled.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n  color: ", ";\n  margin-right: auto;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  max-width: calc(100% - 80px);\n  word-break: break-word;\n"])), function (p) {
   return p.color;
 });
 var Votes = styled.span(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  margin-left: 4px;\n"])), function (p) {
@@ -34692,7 +34789,7 @@ var Bar = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTempla
 var Fill = styled.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  border-radius: 6px;\n  transition: width 0.3s ease-in-out;\n"])));
 var UsersContainer = styled.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding-left: 16px;\n  height: max-content;\n"])));
 
-var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$a;
+var _templateObject$F, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$a;
 var validateUrl = function validateUrl(url) {
   try {
     var urlObj = new URL(url);
@@ -34748,7 +34845,8 @@ var OGMetadata = function OGMetadata(_ref) {
   var _useColor = useColors(),
     incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
     outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -34874,7 +34972,7 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !(oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url])) {
       setShouldAnimate(true);
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
@@ -34882,6 +34980,7 @@ var OGMetadata = function OGMetadata(_ref) {
           try {
             if (cachedMetadata) {
               handleMetadata(cachedMetadata);
+              setMetadataLoaded(true);
             }
             ogMetadataQueryBuilder(url);
             return Promise.resolve();
@@ -34894,7 +34993,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment, metadata]);
+  }, [attachment, oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]]);
   var ogUrl = useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -34929,18 +35028,23 @@ var OGMetadata = function OGMetadata(_ref) {
       link: 4
     };
   }, [order]);
+  var MIN_IMAGE_HEIGHT = 180;
+  var MAX_IMAGE_HEIGHT = 400;
+  var showImage = useMemo(function () {
+    return hasImage && calculatedImageHeight >= MIN_IMAGE_HEIGHT && calculatedImageHeight <= MAX_IMAGE_HEIGHT;
+  }, [hasImage, calculatedImageHeight]);
   useEffect(function () {
     if (metadataLoaded || oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) {
-      if (metadata && metadataGetSuccessCallback && (hasImage || faviconUrl)) {
-        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, hasImage);
+      if (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, metadata);
       } else {
-        metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false);
+        metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false, metadata);
       }
     }
-  }, [metadata, metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, hasImage]);
+  }, [metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var elements = useMemo(function () {
-    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _resolvedOrder$link;
-    return [hasImage ? {
+    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og13$title, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _metadata$og15$descri, _resolvedOrder$link;
+    return [showImage ? {
       key: 'image',
       order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
       render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
@@ -34961,8 +35065,9 @@ var OGMetadata = function OGMetadata(_ref) {
       render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && (/*#__PURE__*/React__default.createElement(Title$3, {
         maxWidth: maxWidth,
         shouldAnimate: shouldAnimate,
-        padding: infoPadding
-      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.title)))
+        padding: infoPadding,
+        color: textPrimary
+      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$title = _metadata$og13.title) === null || _metadata$og13$title === void 0 ? void 0 : _metadata$og13$title.trim())))
     }, {
       key: 'description',
       order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
@@ -34971,7 +35076,7 @@ var OGMetadata = function OGMetadata(_ref) {
         shouldAnimate: shouldAnimate,
         color: textSecondary,
         padding: infoPadding
-      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description))
+      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$descri = _metadata$og15.description) === null || _metadata$og15$descri === void 0 ? void 0 : _metadata$og15$descri.trim()))
     }, {
       key: 'link',
       order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -35029,7 +35134,8 @@ var OGMetadata = function OGMetadata(_ref) {
     borderRadius: ogContainerBorderRadius,
     padding: ogContainerPadding,
     className: ogContainerClassName,
-    containerMargin: ogContainerMargin
+    containerMargin: ogContainerMargin,
+    maxWidth: maxWidth
   }, isInviteLink ? {
     as: 'div',
     onClick: function onClick() {
@@ -35043,87 +35149,93 @@ var OGMetadata = function OGMetadata(_ref) {
   }), content);
 };
 var sharedKeyframes = "\n  @keyframes fadeInSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes expandHeight {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: 1000px;\n      opacity: 1;\n    }\n  }\n";
-var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
-  var showBackground = _ref2.showBackground,
-    customBg = _ref2.customBg,
-    bgColor = _ref2.bgColor;
-  return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
+var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: ", ";\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  border-radius: 8px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  // color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth ? maxWidth + "px" : 'inherit';
 }, function (_ref3) {
-  var borderRadius = _ref3.borderRadius;
-  return borderRadius !== undefined ? borderRadius : '8px';
+  var showBackground = _ref3.showBackground,
+    customBg = _ref3.customBg,
+    bgColor = _ref3.bgColor;
+  return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
 }, function (_ref4) {
-  var containerMargin = _ref4.containerMargin;
-  return containerMargin != null ? containerMargin : '0.8rem auto 0';
+  var borderRadius = _ref4.borderRadius;
+  return borderRadius !== undefined ? borderRadius : '8px';
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata;
-  return showOGMetadata ? '0.4rem' : '0';
+  var containerMargin = _ref5.containerMargin;
+  return containerMargin != null ? containerMargin : '0.8rem auto 0';
 }, function (_ref6) {
-  var padding = _ref6.padding;
+  var showOGMetadata = _ref6.showOGMetadata;
+  return showOGMetadata ? '0.4rem' : '0';
+}, function (_ref7) {
+  var padding = _ref7.padding;
   return padding != null ? padding : '0';
 });
-var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref7) {
-  var containerHeight = _ref7.containerHeight;
+var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref8) {
+  var containerHeight = _ref8.containerHeight;
   return containerHeight ? containerHeight + "px" : '0px';
-}, function (_ref8) {
-  var showOGMetadata = _ref8.showOGMetadata,
-    containerHeight = _ref8.containerHeight;
-  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref9) {
-  var shouldAnimate = _ref9.shouldAnimate,
-    showOGMetadata = _ref9.showOGMetadata,
+  var showOGMetadata = _ref9.showOGMetadata,
     containerHeight = _ref9.containerHeight;
+  return showOGMetadata && containerHeight ? 1 : 0;
+}, function (_ref0) {
+  var shouldAnimate = _ref0.shouldAnimate,
+    showOGMetadata = _ref0.showOGMetadata,
+    containerHeight = _ref0.containerHeight;
   return shouldAnimate && showOGMetadata && containerHeight && "\n    animation: expandHeight 0.3s ease-out forwards;\n  ";
 });
-var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref0) {
-  var shouldAnimate = _ref0.shouldAnimate;
+var OGText = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref1) {
+  var shouldAnimate = _ref1.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out forwards;\n  ";
-}, function (_ref1) {
-  var margin = _ref1.margin;
+}, function (_ref10) {
+  var margin = _ref10.margin;
   return margin ? '12px' : '0';
 });
-var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: bold;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 8px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref10) {
-  var padding = _ref10.padding;
+var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  // font-family: Inter;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0px;\n  color: ", ";\n  margin: 4px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref11) {
+  var color = _ref11.color;
+  return color;
+}, function (_ref12) {
+  var padding = _ref12.padding;
   return padding != null ? padding : '0';
-}, function (_ref11) {
-  var maxWidth = _ref11.maxWidth;
+}, function (_ref13) {
+  var maxWidth = _ref13.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref12) {
-  var shouldAnimate = _ref12.shouldAnimate;
+}, function (_ref14) {
+  var shouldAnimate = _ref14.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n  ";
 });
-var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 8px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref13) {
-  var padding = _ref13.padding;
+var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 4px 0 4px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref15) {
+  var padding = _ref15.padding;
   return padding != null ? padding : '0';
-}, function (_ref14) {
-  var color = _ref14.color;
+}, function (_ref16) {
+  var color = _ref16.color;
   return color;
-}, function (_ref15) {
-  var maxWidth = _ref15.maxWidth;
+}, function (_ref17) {
+  var maxWidth = _ref17.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref16) {
-  var shouldAnimate = _ref16.shouldAnimate;
+}, function (_ref18) {
+  var shouldAnimate = _ref18.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n  ";
 });
-var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref17) {
-  var padding = _ref17.padding;
+var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref19) {
+  var padding = _ref19.padding;
   return padding != null ? padding : '0';
-}, function (_ref18) {
-  var maxWidth = _ref18.maxWidth;
+}, function (_ref20) {
+  var maxWidth = _ref20.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref19) {
-  var shouldAnimate = _ref19.shouldAnimate;
+}, function (_ref21) {
+  var shouldAnimate = _ref21.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n  ";
 });
-var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref20) {
-  var shouldAnimate = _ref20.shouldAnimate;
+var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // object-fit: cover;\n  // object-position: center;\n  // image-rendering: auto;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref22) {
+  var shouldAnimate = _ref22.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
 });
-var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
+var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0;\n"])));
 var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
-var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px;\n  flex: 0 0 52px;\n"])));
+var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 8px;\n  flex: 0 0 52px;\n"])));
 var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
-var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m;
+var _templateObject$G, _templateObject2$B, _templateObject3$w, _templateObject4$r, _templateObject5$m;
 var MessageBody = function MessageBody(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -35349,6 +35461,41 @@ var MessageBody = function MessageBody(_ref) {
   var selectionIsActive = useMemo(function () {
     return selectedMessagesMap && selectedMessagesMap.size > 0;
   }, [selectedMessagesMap]);
+  var hasLongLinkAttachmentUrl = useMemo(function () {
+    if (!linkAttachment || !linkAttachment.url) return false;
+    return linkAttachment.url.length > 100;
+  }, [linkAttachment]);
+  var oGMetadata = useSelector(function (state) {
+    return state.MessageReducer.oGMetadata;
+  });
+  var linkMetadata = useMemo(function () {
+    if (!(linkAttachment !== null && linkAttachment !== void 0 && linkAttachment.url)) return null;
+    return (oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[linkAttachment.url]) || null;
+  }, [oGMetadata, linkAttachment === null || linkAttachment === void 0 ? void 0 : linkAttachment.url]);
+  var ogMetadataContainerWidth = useMemo(function () {
+    var _linkMetadata$og, _linkMetadata$og$imag, _linkMetadata$og$imag2, _linkMetadata$og2, _linkMetadata$og3, _linkMetadata$og3$fav;
+    if (!linkMetadata || !linkAttachment) return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
+    if (hasLongLinkAttachmentUrl) {
+      return 400;
+    }
+    var hasImage = (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og = linkMetadata.og) === null || _linkMetadata$og === void 0 ? void 0 : (_linkMetadata$og$imag = _linkMetadata$og.image) === null || _linkMetadata$og$imag === void 0 ? void 0 : (_linkMetadata$og$imag2 = _linkMetadata$og$imag[0]) === null || _linkMetadata$og$imag2 === void 0 ? void 0 : _linkMetadata$og$imag2.url) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight);
+    var imageWidth = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth;
+    var imageHeight = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight;
+    var calculatedImageHeight = imageWidth && imageHeight ? imageHeight / (imageWidth / ((ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400)) : 0;
+    var showImage = hasImage && calculatedImageHeight >= 180 && calculatedImageHeight <= 400;
+    var hasDescription = linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og2 = linkMetadata.og) === null || _linkMetadata$og2 === void 0 ? void 0 : _linkMetadata$og2.description;
+    var hasFavicon = (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.faviconLoaded) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og3 = linkMetadata.og) === null || _linkMetadata$og3 === void 0 ? void 0 : (_linkMetadata$og3$fav = _linkMetadata$og3.favicon) === null || _linkMetadata$og3$fav === void 0 ? void 0 : _linkMetadata$og3$fav.url);
+    if (showImage) {
+      return 400;
+    }
+    if (hasDescription && hasFavicon) {
+      return 336;
+    }
+    if (hasDescription) {
+      return 356;
+    }
+    return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
+  }, [linkMetadata, linkAttachment, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon, hasLongLinkAttachmentUrl]);
   var handleRemoveFailedAttachment = function handleRemoveFailedAttachment(attachmentId) {
     log.info('remove attachment .. ', attachmentId);
   };
@@ -35366,7 +35513,10 @@ var MessageBody = function MessageBody(_ref) {
     },
     borderRadius: borderRadius,
     withAttachments: notLinkAttachment,
-    attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 420 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
+    hasLinkAttachment: !!linkAttachment,
+    hasLongLinkAttachmentUrl: hasLongLinkAttachmentUrl,
+    attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 400 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
+    ogMetadataMaxWidth: ogMetadataContainerWidth,
     noBody: !message.body && !withAttachments,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -35522,7 +35672,7 @@ var MessageBody = function MessageBody(_ref) {
     unsupportedMessage: unsupportedMessage,
     unsupportedMessageColor: textSecondary
   }, ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
-    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxWidth: ogMetadataContainerWidth,
     maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
@@ -35561,7 +35711,7 @@ var MessageBody = function MessageBody(_ref) {
   }))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
-    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxWidth: ogMetadataContainerWidth,
     maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
@@ -35583,7 +35733,7 @@ var MessageBody = function MessageBody(_ref) {
     ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
     infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding,
     isInviteLink: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink
-  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && !!linkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
     messageStatusDisplayingType: messageStatusDisplayingType,
@@ -35599,25 +35749,31 @@ var MessageBody = function MessageBody(_ref) {
     messageStatusVisible: !!messageStatusVisible,
     leftMargin: true,
     messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
-  })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
-    message: message,
-    showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
-    messageStatusDisplayingType: messageStatusDisplayingType,
-    messageStatusSize: messageStatusSize,
-    messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
-    messageReadStatusColor: messageReadStatusColor,
-    messageStateFontSize: messageStateFontSize,
-    messageStateColor: messageStateColor,
-    messageTimeFontSize: messageTimeFontSize,
-    messageTimeColor: messageTimeColor,
-    messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    messageTimeVisible: !!messageTimeVisible,
-    messageStatusVisible: !!messageStatusVisible,
-    withAttachment: withAttachments,
-    leftMargin: true,
-    fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
-    messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
-  })), withAttachments && message.attachments.map(function (attachment) {
+  })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && function () {
+    var nonLinkAttachment = message.attachments.find(function (a) {
+      return a.type !== attachmentTypes.link;
+    });
+    var attachmentType = nonLinkAttachment === null || nonLinkAttachment === void 0 ? void 0 : nonLinkAttachment.type;
+    return /*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+      message: message,
+      showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
+      messageStatusDisplayingType: messageStatusDisplayingType,
+      messageStatusSize: messageStatusSize,
+      messageStatusColor: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : messageStateColor || textSecondary,
+      messageReadStatusColor: messageReadStatusColor,
+      messageStateFontSize: messageStateFontSize,
+      messageStateColor: messageStateColor,
+      messageTimeFontSize: messageTimeFontSize,
+      messageTimeColor: messageTimeColor,
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      messageTimeVisible: !!messageTimeVisible,
+      messageStatusVisible: !!messageStatusVisible,
+      withAttachment: withAttachments,
+      leftMargin: true,
+      fileAttachment: withAttachments && (attachmentType === 'file' || attachmentType === 'voice'),
+      messageTimeColorOnAttachment: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : textSecondary
+    });
+  }(), withAttachments && message.attachments.map(function (attachment) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
       handleMediaItemClick: selectionIsActive ? undefined : handleMediaItemClick,
@@ -35690,7 +35846,7 @@ var MessageStatusDeleted$1 = styled.span(_templateObject2$B || (_templateObject2
 }, function (props) {
   return props.fontSize;
 });
-var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: max-content;\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
+var MessageBodyContainer = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: ", ";\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ", "\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
   var _props$outgoingMessag, _props$incomingMessag;
   return props.isSelfMessage ? (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.background : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.background;
 }, function (props) {
@@ -35698,10 +35854,14 @@ var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v
 }, function (props) {
   return props.rtlDirection ? 'initial' : '';
 }, function (props) {
-  return props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 420 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '420px' : '100%';
+  return props.hasLinkAttachment && !props.withAttachments ? props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px' : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '400px' : props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 400 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '400px' : '100%';
+}, function (props) {
+  return props.hasLinkAttachment && !props.withAttachments && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '416px' : 'max-content';
+}, function (props) {
+  return props.hasLongLinkAttachmentUrl && "\n    & a {\n      overflow-wrap: anywhere;\n      word-break: break-all;\n      white-space: normal;\n      max-width: " + (props.withAttachments ? '400px' : props.hasLinkAttachment && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px') + ";\n    }\n  ";
 }, function (props) {
   var _props$outgoingMessag2, _props$incomingMessag2;
-  return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
+  return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.hasLinkAttachment ? '8px' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
 }, function (props) {
   return props.isSelfMessage ? 'initial' : '';
 }, function (props) {
@@ -35724,7 +35884,7 @@ var FrequentlyEmojisContainer = styled.div(_templateObject5$m || (_templateObjec
   return props.rtlDirection && '0';
 });
 
-var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$b;
+var _templateObject$H, _templateObject2$C, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$b;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -36104,7 +36264,7 @@ var Tab = styled.button(_templateObject2$C || (_templateObject2$C = _taggedTempl
 }, function (p) {
   return p.active ? p.background : p.borderColor;
 });
-var List$1 = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (p) {
+var List$1 = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (p) {
   return p.maxHeight ? p.maxHeight + "px" : 'unset';
 });
 var Row$2 = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px;\n  border-radius: 10px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (p) {
@@ -36158,7 +36318,7 @@ function ConfirmEndPollPopup(_ref) {
   });
 }
 
-var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
+var _templateObject$I, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -36368,6 +36528,7 @@ var Message$1 = function Message(_ref) {
     reactionsPopupHorizontalPosition = _useState10[0],
     setReactionsPopupHorizontalPosition = _useState10[1];
   var scrollToNewMessage = useSelector(scrollToNewMessageSelector, shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, shallowEqual);
   var messageItemRef = useRef();
   var isVisible = useOnScreen(messageItemRef);
   var reactionsCount = message.reactionTotals && message.reactionTotals.reduce(function (prevValue, currentValue) {
@@ -36521,20 +36682,20 @@ var Message$1 = function Message(_ref) {
     setFrequentlyEmojisOpen(false);
   };
   var handleSendReadMarker = function handleSendReadMarker() {
-    if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
-      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      dispatch(markMessagesAsReadAC(channel.id, [message.id]));
-    }
     if (!message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.DELIVERED;
     })) {
       if (message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
         return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-      })) {
+      }) && message.incoming && !unreadScrollTo) {
         dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
       }
     }
+    if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
+      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
+    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED && !unreadScrollTo) {
+      dispatch(markMessagesAsReadAC(channel.id, [message.id]));
+    }
   };
   var handleForwardMessage = function handleForwardMessage(channelIds) {
     if (channelIds && channelIds.length) {
@@ -36962,7 +37123,7 @@ var MessageReactionKey = styled.span(_templateObject$I || (_templateObject$I = _
 var ReactionItemCount = styled.span(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var MessageReaction = styled.span(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  //min-width: 23px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: ", ";\n  margin-right: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  white-space: nowrap;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (props) {
+var MessageReaction = styled.span(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  //min-width: 23px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: ", ";\n  margin-right: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  white-space: nowrap;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (props) {
   return props.margin || '0 8px 0 0';
 }, function (props) {
   return props.isLastReaction && '0';
@@ -37061,7 +37222,7 @@ var MessageItem = styled.div(_templateObject12$4 || (_templateObject12$4 = _tagg
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$d;
+var _templateObject$J, _templateObject2$E, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$d;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -37270,6 +37431,9 @@ var MessageList = function MessageList(_ref2) {
   var dispatch = useDispatch();
   var theme = useSelector(themeSelector);
   var channel = useSelector(activeChannelSelector);
+  var _useState = useState(false),
+    scrollIntoView = _useState[0],
+    setScrollIntoView = _useState[1];
   var contactsMap = useSelector(contactsMapSelector, shallowEqual);
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
   var openedMessageMenuId = useSelector(openedMessageMenuSelector, shallowEqual);
@@ -37288,43 +37452,44 @@ var MessageList = function MessageList(_ref2) {
   var pollPendingPollActions = useSelector(pendingPollActionsSelector, shallowEqual);
   var pendingMessagesMap = useSelector(pendingMessagesMapSelector, shallowEqual);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector, shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, shallowEqual);
   var messages = useSelector(activeChannelMessagesSelector, shallowEqual) || [];
-  var _useState = useState(''),
-    unreadMessageId = _useState[0],
-    setUnreadMessageId = _useState[1];
-  var _useState2 = useState(null),
-    mediaFile = _useState2[0],
-    setMediaFile = _useState2[1];
+  var _useState2 = useState(''),
+    unreadMessageId = _useState2[0],
+    setUnreadMessageId = _useState2[1];
   var _useState3 = useState(null),
-    isDragging = _useState3[0],
-    setIsDragging = _useState3[1];
+    mediaFile = _useState3[0],
+    setMediaFile = _useState3[1];
   var _useState4 = useState(null),
-    showTopDate = _useState4[0],
-    setShowTopDate = _useState4[1];
-  var _useState5 = useState(false),
-    stopScrolling = _useState5[0],
-    setStopScrolling = _useState5[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(null),
+    showTopDate = _useState5[0],
+    setShowTopDate = _useState5[1];
   var _useState6 = useState(false),
-    isScrolling = _useState6[0],
-    setIsScrolling = _useState6[1];
+    stopScrolling = _useState6[0],
+    setStopScrolling = _useState6[1];
+  var _useState7 = useState(false),
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
   var hideTopDateTimeout = useRef(null);
-  var _useState7 = useState(''),
-    lastVisibleMessageId = _useState7[0],
-    _setLastVisibleMessageId = _useState7[1];
-  var _useState8 = useState(null),
-    scrollToReply = _useState8[0],
-    setScrollToReply = _useState8[1];
-  var _useState9 = useState(0),
-    previousScrollTop = _useState9[0],
-    setPreviousScrollTop = _useState9[1];
-  var _useState0 = useState(false),
-    shouldPreserveScroll = _useState0[0],
-    setShouldPreserveScroll = _useState0[1];
+  var _useState8 = useState(''),
+    lastVisibleMessageId = _useState8[0],
+    _setLastVisibleMessageId = _useState8[1];
+  var _useState9 = useState(null),
+    scrollToReply = _useState9[0],
+    setScrollToReply = _useState9[1];
+  var _useState0 = useState(0),
+    previousScrollTop = _useState0[0],
+    setPreviousScrollTop = _useState0[1];
+  var _useState1 = useState(false),
+    shouldPreserveScroll = _useState1[0],
+    setShouldPreserveScroll = _useState1[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var _useState1 = useState(''),
-    topDateLabel = _useState1[0],
-    setTopDateLabel = _useState1[1];
+  var _useState10 = useState(''),
+    topDateLabel = _useState10[0],
+    setTopDateLabel = _useState10[1];
   var scrollRef = useRef(null);
   var loadFromServerRef = useRef(false);
   var loadDirectionRef = useRef('');
@@ -37619,6 +37784,9 @@ var MessageList = function MessageList(_ref2) {
             behavior: 'smooth'
           });
         }
+        setTimeout(function () {
+          dispatch(scrollToNewMessageAC(false, false, false));
+        }, 800);
       } else {
         nextDisableRef.current = true;
         prevDisableRef.current = true;
@@ -37629,6 +37797,7 @@ var MessageList = function MessageList(_ref2) {
         dispatch(showScrollToNewMessageButtonAC(false));
         setTimeout(function () {
           prevDisableRef.current = false;
+          dispatch(scrollToNewMessageAC(false, false, false));
         }, 800);
       }
     }
@@ -37813,6 +37982,8 @@ var MessageList = function MessageList(_ref2) {
     };
   }, [messagesLoading, messages, lastVisibleMessageId]);
   useEffect(function () {
+    var interval = null;
+    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
       Object.keys(pendingMessagesMap).forEach(function (key) {
         pendingMessagesMap[key].forEach(function (msg) {
@@ -37822,37 +37993,50 @@ var MessageList = function MessageList(_ref2) {
       if (Object.keys(pollPendingPollActions).length > 0) {
         dispatch(resendPendingPollActionsAC(connectionStatus));
       }
+      var count = 0;
+      interval = setInterval(function () {
+        if (count > 20) {
+          clearInterval(interval);
+        }
+        count++;
+        if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
+          clearInterval(interval);
+          loadingRef.current = false;
+          prevDisableRef.current = false;
+          nextDisableRef.current = false;
+          clearMessagesMap();
+          removeAllMessages();
+          dispatch(getMessagesAC(channel));
+        }
+      }, 100);
     }
-  }, [connectionStatus]);
-  useEffect(function () {
-    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
-        loadingRef.current = false;
-        prevDisableRef.current = false;
-        nextDisableRef.current = false;
-        clearMessagesMap();
-        removeAllMessages();
-        dispatch(getMessagesAC(channel));
+    return function () {
+      if (interval) {
+        clearInterval(interval);
       }
-    }
-  }, [connectionStatus, pollPendingPollActions, pendingMessagesMap]);
+    };
+  }, [connectionStatus]);
   useEffect(function () {
-    var unreadScrollTo = getUnreadScrollTo();
     if (channel.newMessageCount && channel.newMessageCount > 0 && unreadScrollTo) {
-      if (scrollRef.current) {
-        scrollRef.current.style.scrollBehavior = 'inherit';
+      var scrollElement = document.getElementById('scrollableDiv');
+      if (scrollElement) {
+        scrollElement.style.scrollBehavior = 'inherit';
       }
+      setScrollIntoView(true);
       var lastReadMessageNode = document.getElementById(channel.lastDisplayedMessageId);
-      if (lastReadMessageNode) {
-        scrollRef.current.scrollTop = lastReadMessageNode.offsetTop;
-        if (scrollRef.current) {
-          scrollRef.current.style.scrollBehavior = 'smooth';
-        }
-        setUnreadScrollTo(false);
+      if (lastReadMessageNode && scrollElement) {
+        dispatch(scrollToNewMessageAC(false));
+        scrollElement.scrollTo({
+          top: lastReadMessageNode.offsetTop - 200,
+          behavior: 'auto'
+        });
+        setTimeout(function () {
+          dispatch(setUnreadScrollToAC(false));
+          setScrollIntoView(false);
+        }, 100);
       }
     }
-  }, [channel.id, channel.newMessageCount, channel.lastDisplayedMessageId]);
+  }, [channel.id, channel.newMessageCount, scrollRef.current, unreadScrollTo, channel.lastDisplayedMessageId, scrollIntoView, messages.length]);
   useEffect(function () {
     return function () {
       if (hideTopDateTimeout.current) {
@@ -38135,7 +38319,7 @@ var Container$i = styled.div(_templateObject$J || (_templateObject$J = _taggedTe
   return props.thumbColor;
 });
 var EmptyDiv = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
-var MessagesBox = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  //height: auto;\n  display: flex;\n  //flex-direction: column-reverse;\n  flex-direction: column;\n  padding-bottom: 20px;\n  //overflow: auto;\n  //scroll-behavior: unset;\n"])));
+var MessagesBox = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  //height: auto;\n  display: flex;\n  //flex-direction: column-reverse;\n  flex-direction: column;\n  padding-bottom: 20px;\n  //overflow: auto;\n  //scroll-behavior: unset;\n"])));
 var MessageTopDate = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  justify-content: center;\n  width: 100%;\n  top: ", ";\n  left: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  text-align: center;\n  z-index: 10;\n  background: transparent;\n  opacity: ", ";\n  transition: all 0.2s ease-in-out;\n  width: calc(100% - 8px);\n\n  span {\n    display: inline-block;\n    max-width: 380px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    border: ", ";\n    box-sizing: border-box;\n    border-radius: ", ";\n    padding: 5px 16px;\n    box-shadow:\n      0 0 2px rgba(0, 0, 0, 0.08),\n      0 2px 24px rgba(0, 0, 0, 0.08);\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])), function (props) {
   return props.topOffset ? props.topOffset + 22 + "px" : '22px';
 }, function (props) {
@@ -38606,7 +38790,7 @@ function $isMentionNode(node) {
   return node instanceof MentionNode;
 }
 
-var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$v, _templateObject5$q;
+var _templateObject$K, _templateObject2$F, _templateObject3$A, _templateObject4$v, _templateObject5$q;
 var PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 var NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 var DocumentMentionsRegex = {
@@ -38896,7 +39080,7 @@ var MentionsList = styled.ul(_templateObject2$F || (_templateObject2$F = _tagged
 }, function (props) {
   return props.hidden ? 'hidden' : 'visible';
 });
-var MemberItem = styled.li(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n  background-color: ", ";\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
+var MemberItem = styled.li(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n  background-color: ", ";\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
   return props.isActiveItem && props.activeBackgroundColor;
 }, UserStatus);
 var UserNamePresence$2 = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 44px);\n  margin-left: 12px;\n"])));
@@ -39740,7 +39924,7 @@ function FormatMessagePlugin(_ref) {
   return null;
 }
 
-var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$k;
+var _templateObject$M, _templateObject2$H, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$k;
 var EmojiIcon$1 = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -39961,7 +40145,7 @@ var EmojiHeader$1 = styled.div(_templateObject2$H || (_templateObject2$H = _tagg
 }, function (props) {
   return props.padding || '6px 18px';
 });
-var EmojiSection$1 = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
+var EmojiSection$1 = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
 var EmojiCollection$1 = styled.span(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & > * {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
@@ -40173,7 +40357,7 @@ function SvgRecordButton(props) {
   })));
 }
 
-var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m;
+var _templateObject$N, _templateObject2$I, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m;
 var shouldDraw = false;
 var DEFAULT_MAX_RECORDING_DURATION = 600;
 var AudioRecord = function AudioRecord(_ref) {
@@ -40763,7 +40947,7 @@ var AudioWrapper = styled.div(_templateObject2$I || (_templateObject2$I = _tagge
 }, function (props) {
   return props.recording ? '0 12px 0 0' : '0';
 });
-var RecordIconWrapper = styled.span(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var RecordIconWrapper = styled.span(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
 var AudioVisualization$1 = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
@@ -40795,10 +40979,10 @@ var Timer$2 = styled.div(_templateObject7$m || (_templateObject7$m = _taggedTemp
   return props.color;
 });
 
-var _templateObject$O, _templateObject2$J, _templateObject3$C;
+var _templateObject$O, _templateObject2$J, _templateObject3$D;
 var wave = keyframes(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  0%, 100% {\n    transform: scaleY(0.5);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scaleY(1.2);\n    opacity: 1;\n  }\n"])));
 var Wrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
-var Bar$1 = styled.span(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 3px;\n  height: 8px;\n  border-radius: 2px;\n  background: ", ";\n  animation: ", " 1s infinite;\n  animation-delay: ", "s;\n"])), function (props) {
+var Bar$1 = styled.span(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 3px;\n  height: 8px;\n  border-radius: 2px;\n  background: ", ";\n  animation: ", " 1s infinite;\n  animation-delay: ", "s;\n"])), function (props) {
   return props.borderColor;
 }, wave, function (_ref) {
   var delay = _ref.delay;
@@ -40846,7 +41030,7 @@ function SvgDotsVertica(props) {
   })));
 }
 
-var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$i;
+var _templateObject$P, _templateObject2$K, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$i;
 var CreatePollPopup = function CreatePollPopup(_ref) {
   var togglePopup = _ref.togglePopup,
     onCreate = _ref.onCreate;
@@ -41236,7 +41420,7 @@ var CustomTextArea = styled.textarea(_templateObject2$K || (_templateObject2$K =
 }, function (props) {
   return props.placeholderColor;
 });
-var TextCounter = styled.span(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 20px;\n  margin-left: auto;\n"])), function (props) {
+var TextCounter = styled.span(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 20px;\n  margin-left: auto;\n"])), function (props) {
   return props.color;
 });
 var OptionsList$1 = styled.div(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  max-height: 200px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n"])));
@@ -41266,7 +41450,7 @@ var SettingItem = styled.div(_templateObject9$i || (_templateObject9$i = _tagged
   return props.color;
 });
 
-var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$Q, _templateObject2$L, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -42899,7 +43083,7 @@ var Container$l = styled.div(_templateObject2$L || (_templateObject2$L = _tagged
 }, function (props) {
   return props.mentionColor;
 });
-var EditReplyMessageCont = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  position: relative;\n  left: ", ";\n  bottom: ", ";\n  width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  z-index: 19;\n  box-sizing: content-box;\n"])), function (props) {
+var EditReplyMessageCont = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  left: ", ";\n  bottom: ", ";\n  width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  z-index: 19;\n  box-sizing: content-box;\n"])), function (props) {
   return props.left || '0';
 }, function (props) {
   return props.bottom || '0';
@@ -43266,7 +43450,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$R, _templateObject2$M, _templateObject3$F, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$n, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$R, _templateObject2$M, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$n, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
@@ -43734,7 +43918,7 @@ var Container$m = styled.div(_templateObject$R || (_templateObject$R = _taggedTe
   return props.borderColor;
 });
 var ActionHeader = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 25px 0 22px;\n  cursor: pointer;\n"])));
-var MenuTriggerIcon = styled.span(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
+var MenuTriggerIcon = styled.span(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
 var ActionsMenu = styled.ul(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
@@ -43824,7 +44008,7 @@ function SvgMoreVert(props) {
   })));
 }
 
-var _templateObject$S, _templateObject2$N, _templateObject3$G;
+var _templateObject$S, _templateObject2$N, _templateObject3$H;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -43929,7 +44113,7 @@ var RoleLabel = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTe
   var color = _ref2.color;
   return color;
 });
-var RoleSpan = styled.span(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled.span(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
 function ResetLinkConfirmModal(_ref) {
   var _getInviteLinkOptions;
@@ -43966,7 +44150,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+var _templateObject$T, _templateObject2$O, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -44456,7 +44640,7 @@ var Tabs$1 = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTempl
 }, function (p) {
   return p.borderColor;
 });
-var TabButton = styled.button(_templateObject3$H || (_templateObject3$H = _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.button(_templateObject3$I || (_templateObject3$I = _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  ";
@@ -44498,7 +44682,7 @@ var QrHint = styled.p(_templateObject13$5 || (_templateObject13$5 = _taggedTempl
   return p.color;
 });
 
-var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$m;
+var _templateObject$U, _templateObject2$P, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -44822,7 +45006,7 @@ var Members = function Members(_ref) {
 };
 var Container$n = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose([""])));
 var ActionsMenu$1 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNamePresence = styled.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
 var MemberNameWrapper = styled.div(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
 var MemberName$3 = styled.h4(_templateObject5$x || (_templateObject5$x = _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;
@@ -44895,7 +45079,7 @@ var Media = function Media(_ref) {
   })));
 };
 var Container$o = styled.div(_templateObject$V || (_templateObject$V = _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.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\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 MediaItem = styled.div(_templateObject2$Q || (_templateObject2$Q = _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 _rect$3, _path$1u;
 function _extends$1y() {
@@ -44951,7 +45135,7 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$W, _templateObject2$R, _templateObject3$J, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$q;
+var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$q;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -45075,7 +45259,7 @@ var DownloadWrapper = styled.a(_templateObject2$R || (_templateObject2$R = _tagg
 }, function (props) {
   return props.iconColor;
 });
-var ProgressWrapper$2 = styled.span(_templateObject3$J || (_templateObject3$J = _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 ProgressWrapper$2 = styled.span(_templateObject3$K || (_templateObject3$K = _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.span(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
@@ -45129,7 +45313,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$X, _templateObject2$S, _templateObject3$K, _templateObject4$E, _templateObject5$z;
+var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$E, _templateObject5$z;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -45170,7 +45354,7 @@ var LinkHoverIconCont = styled.span(_templateObject2$S || (_templateObject2$S =
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var LinkInfoCont = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
 var FileItem$1 = styled.li(_templateObject4$E || (_templateObject4$E = _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);
@@ -45259,7 +45443,7 @@ function SvgVoicePreviewPause(props) {
   })));
 }
 
-var _templateObject$Z, _templateObject2$T, _templateObject3$L, _templateObject4$F, _templateObject5$A, _templateObject6$v, _templateObject7$t, _templateObject8$r;
+var _templateObject$Z, _templateObject2$T, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$v, _templateObject7$t, _templateObject8$r;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -45394,7 +45578,7 @@ var FileHoverIconCont$1 = styled.span(_templateObject2$T || (_templateObject2$T
 }, function (props) {
   return props.fill || 'transparent';
 });
-var FileItem$2 = styled.li(_templateObject3$L || (_templateObject3$L = _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.li(_templateObject3$M || (_templateObject3$M = _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.div(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
@@ -45612,7 +45796,7 @@ var DetailsTabHeader = styled.div(_templateObject2$U || (_templateObject2$U = _t
   return props.activeTabColor;
 });
 
-var _templateObject$10, _templateObject2$V, _templateObject3$M, _templateObject4$G;
+var _templateObject$10, _templateObject2$V, _templateObject3$N, _templateObject4$G;
 var Container$t = styled.div(_templateObject$10 || (_templateObject$10 = _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) {
@@ -45621,7 +45805,7 @@ var Container$t = styled.div(_templateObject$10 || (_templateObject$10 = _tagged
   return props.backgroundColor;
 });
 var AvatarCont = styled.div(_templateObject2$V || (_templateObject2$V = _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.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var DropDownWrapper = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
 var EditChannelFooter = styled(ButtonBlock)(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
 var EditChannel = function EditChannel(_ref) {
   var channel = _ref.channel,
@@ -45877,7 +46061,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$11, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$B, _templateObject6$w, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
+var _templateObject$11, _templateObject2$W, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$w, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -46317,7 +46501,7 @@ var Container$u = styled.div(_templateObject$11 || (_templateObject$11 = _tagged
 var ChannelDetailsHeader = styled.div(_templateObject2$W || (_templateObject2$W = _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.div(_templateObject3$N || (_templateObject3$N = _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.div(_templateObject3$O || (_templateObject3$O = _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';