sceyt-chat-react-uikit 1.6.9-beta.2 → 1.6.9-beta.3

package/index.js

@@ -17129,14 +17129,14 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 21]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, pendingMessages, messagesMap, filteredPendingMessages, _secondResult2, _thirdResult, _secondResult3, _pendingMessages, _messagesMap, _filteredPendingMessages, _secondResult4, _pendingMessages2, _messagesMap2, _filteredPendingMessages2;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, pendingMessages, _messagesMap, filteredPendingMessages, _secondResult2, _thirdResult, _secondResult3, _pendingMessages, _messagesMap2, _filteredPendingMessages, _secondResult4, _pendingMessages2, _messagesMap3, _filteredPendingMessages2;
   return _regeneratorRuntime().wrap(function getMessagesQuery$(_context9) {
     while (1) switch (_context9.prev = _context9.next) {
       case 0:
         _context9.prev = 0;
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.next = 175;
+          _context9.next = 178;
           break;
         }
         SceytChatClient = getClient();
@@ -17157,13 +17157,13 @@ function getMessagesQuery(action) {
           hasNext: false
         };
         if (!loadWithLastMessage) {
-          _context9.next = 54;
+          _context9.next = 57;
           break;
         }
         allMessages = getAllMessages();
         havLastMessage = allMessages && allMessages.length && channel.lastMessage && allMessages[allMessages.length - 1] && allMessages[allMessages.length - 1].id === channel.lastMessage.id;
         if (!(channel.newMessageCount && channel.newMessageCount > 0 || !havLastMessage)) {
-          _context9.next = 44;
+          _context9.next = 47;
           break;
         }
         setHasPrevCached(false);
@@ -17188,37 +17188,44 @@ function getMessagesQuery(action) {
         if (withDeliveredMessages) {
           sentMessages = getFromAllMessagesByMessageId('', '', true);
         }
-        result.messages = [].concat(result.messages, sentMessages);
-        _context9.next = 36;
+        messagesMap = {};
+        result.messages.forEach(function (msg) {
+          messagesMap[msg.tid || ''] = msg;
+        });
+        filteredSentMessages = sentMessages.filter(function (msg) {
+          return !messagesMap[msg.tid || ''];
+        });
+        result.messages = [].concat(result.messages, filteredSentMessages);
+        _context9.next = 39;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 36:
+      case 39:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages(result.messages);
-        _context9.next = 40;
+        _context9.next = 43;
         return effects.put(setMessagesHasPrevAC(true));
-      case 40:
-        _context9.next = 42;
+      case 43:
+        _context9.next = 45;
         return effects.put(markChannelAsReadAC(channel.id));
-      case 42:
-        _context9.next = 49;
+      case 45:
+        _context9.next = 52;
         break;
-      case 44:
+      case 47:
         result.messages = getFromAllMessagesByMessageId('', '', true);
-        _context9.next = 47;
+        _context9.next = 50;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 47:
-        _context9.next = 49;
+      case 50:
+        _context9.next = 52;
         return effects.put(setMessagesHasPrevAC(true));
-      case 49:
-        _context9.next = 51;
+      case 52:
+        _context9.next = 54;
         return effects.put(setMessagesHasNextAC(false));
-      case 51:
+      case 54:
         setHasNextCached(false);
-        _context9.next = 164;
+        _context9.next = 167;
         break;
-      case 54:
+      case 57:
         if (!messageId) {
-          _context9.next = 97;
+          _context9.next = 100;
           break;
         }
         _allMessages = getAllMessages();
@@ -17227,181 +17234,181 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.next = 66;
+          _context9.next = 69;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
-        _context9.next = 62;
+        _context9.next = 65;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 62:
+      case 65:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
-        _context9.next = 93;
+        _context9.next = 96;
         break;
-      case 66:
+      case 69:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.next = 70;
+        _context9.next = 73;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 70:
+      case 73:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 83;
+          _context9.next = 86;
           break;
         }
         messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.next = 75;
+        _context9.next = 78;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 75:
+      case 78:
         _secondResult = _context9.sent;
         messageQuery.reverse = false;
-        _context9.next = 79;
+        _context9.next = 82;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 79:
+      case 82:
         thirdResult = _context9.sent;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 83:
+      case 86:
         log.info('result from server ....... ', result);
-        _context9.next = 86;
+        _context9.next = 89;
         return effects.put(setMessagesHasNextAC(true));
-      case 86:
+      case 89:
         pendingMessages = getPendingMessages(channel.id);
         if (pendingMessages && pendingMessages.length) {
-          messagesMap = {};
+          _messagesMap = {};
           result.messages.forEach(function (msg) {
-            messagesMap[msg.tid || ''] = msg;
+            _messagesMap[msg.tid || ''] = msg;
           });
           filteredPendingMessages = pendingMessages.filter(function (msg) {
-            return !messagesMap[msg.tid || ''];
+            return !_messagesMap[msg.tid || ''];
           });
           setPendingMessages(channel.id, filteredPendingMessages);
           result.messages = [].concat(result.messages, filteredPendingMessages);
         }
-        _context9.next = 90;
+        _context9.next = 93;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 90:
+      case 93:
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
-      case 93:
-        _context9.next = 95;
+      case 96:
+        _context9.next = 98;
         return effects.put(setScrollToMessagesAC(messageId));
-      case 95:
-        _context9.next = 164;
+      case 98:
+        _context9.next = 167;
         break;
-      case 97:
+      case 100:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.next = 143;
+          _context9.next = 146;
           break;
         }
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.next = 121;
+          _context9.next = 124;
           break;
         }
-        _context9.next = 103;
+        _context9.next = 106;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 103:
+      case 106:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 119;
+          _context9.next = 122;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.next = 108;
+        _context9.next = 111;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 108:
+      case 111:
         _secondResult2 = _context9.sent;
         if (!(channel.newMessageCount > 25)) {
-          _context9.next = 118;
+          _context9.next = 121;
           break;
         }
         messageQuery.reverse = false;
-        _context9.next = 113;
+        _context9.next = 116;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 113:
+      case 116:
         _thirdResult = _context9.sent;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.next = 119;
+        _context9.next = 122;
         break;
-      case 118:
+      case 121:
         result.messages = [].concat(_secondResult2.messages, result.messages);
-      case 119:
-        _context9.next = 131;
+      case 122:
+        _context9.next = 134;
         break;
-      case 121:
-        _context9.next = 123;
+      case 124:
+        _context9.next = 126;
         return effects.call(messageQuery.loadPrevious);
-      case 123:
+      case 126:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 131;
+          _context9.next = 134;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.next = 128;
+        _context9.next = 131;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 128:
+      case 131:
         _secondResult3 = _context9.sent;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 131:
+      case 134:
         setMessagesToMap(channel.id, result.messages);
-        _context9.next = 134;
+        _context9.next = 137;
         return effects.put(setMessagesHasPrevAC(true));
-      case 134:
-        _context9.next = 136;
+      case 137:
+        _context9.next = 139;
         return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
-      case 136:
+      case 139:
         _pendingMessages = getPendingMessages(channel.id);
         if (_pendingMessages && _pendingMessages.length) {
-          _messagesMap = {};
+          _messagesMap2 = {};
           result.messages.forEach(function (msg) {
-            _messagesMap[msg.tid || ''] = msg;
+            _messagesMap2[msg.tid || ''] = msg;
           });
           _filteredPendingMessages = _pendingMessages.filter(function (msg) {
-            return !_messagesMap[msg.tid || ''];
+            return !_messagesMap2[msg.tid || ''];
           });
           setPendingMessages(channel.id, _filteredPendingMessages);
           result.messages = [].concat(result.messages, _filteredPendingMessages);
         }
         setAllMessages([].concat(result.messages));
-        _context9.next = 141;
+        _context9.next = 144;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 141:
-        _context9.next = 164;
+      case 144:
+        _context9.next = 167;
         break;
-      case 143:
+      case 146:
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.next = 148;
+          _context9.next = 151;
           break;
         }
         setAllMessages([].concat(cachedMessages));
-        _context9.next = 148;
+        _context9.next = 151;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 148:
+      case 151:
         log.info('load message from server');
-        _context9.next = 151;
+        _context9.next = 154;
         return effects.call(messageQuery.loadPrevious);
-      case 151:
+      case 154:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 159;
+          _context9.next = 162;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.next = 156;
+        _context9.next = 159;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 156:
+      case 159:
         _secondResult4 = _context9.sent;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 159:
+      case 162:
         result.messages.forEach(function (msg) {
           updateMessageOnMap(channel.id, {
             messageId: msg.id,
@@ -17409,58 +17416,58 @@ function getMessagesQuery(action) {
           });
           updateMessageOnAllMessages(msg.id, msg);
         });
-        _context9.next = 162;
+        _context9.next = 165;
         return effects.put(setMessagesHasPrevAC(result.hasNext));
-      case 162:
-        _context9.next = 164;
+      case 165:
+        _context9.next = 167;
         return effects.put(setMessagesHasNextAC(false));
-      case 164:
+      case 167:
         if (cachedMessages && cachedMessages.length) {
-          _context9.next = 171;
+          _context9.next = 174;
           break;
         }
         _pendingMessages2 = getPendingMessages(channel.id);
         if (_pendingMessages2 && _pendingMessages2.length) {
-          _messagesMap2 = {};
+          _messagesMap3 = {};
           result.messages.forEach(function (msg) {
-            _messagesMap2[msg.tid || ''] = msg;
+            _messagesMap3[msg.tid || ''] = msg;
           });
           _filteredPendingMessages2 = _pendingMessages2.filter(function (msg) {
-            return !_messagesMap2[msg.tid || ''];
+            return !_messagesMap3[msg.tid || ''];
           });
           setPendingMessages(channel.id, _filteredPendingMessages2);
           result.messages = [].concat(result.messages, _filteredPendingMessages2);
         }
-        _context9.next = 169;
+        _context9.next = 172;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 169:
+      case 172:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
-      case 171:
-        _context9.next = 173;
+      case 174:
+        _context9.next = 176;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 173:
-        _context9.next = 178;
+      case 176:
+        _context9.next = 181;
         break;
-      case 175:
+      case 178:
         if (!channel.isMockChannel) {
-          _context9.next = 178;
+          _context9.next = 181;
           break;
         }
-        _context9.next = 178;
+        _context9.next = 181;
         return effects.put(setMessagesAC([]));
-      case 178:
-        _context9.next = 183;
+      case 181:
+        _context9.next = 186;
         break;
-      case 180:
-        _context9.prev = 180;
+      case 183:
+        _context9.prev = 183;
         _context9.t0 = _context9["catch"](0);
         log.error('error in message query', _context9.t0);
-      case 183:
+      case 186:
       case "end":
         return _context9.stop();
     }
-  }, _marked7$1, null, [[0, 180]]);
+  }, _marked7$1, null, [[0, 183]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result;
@@ -19620,20 +19627,24 @@ var DeletedAvatarWrapper = styled__default(SvgDeletedUserAvatar)(_templateObject
 });
 
 var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _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 ChannelMessageText = function ChannelMessageText(_ref) {
-  var isTypingOrRecording = _ref.isTypingOrRecording,
-    textPrimary = _ref.textPrimary,
-    textSecondary = _ref.textSecondary,
-    draftMessageText = _ref.draftMessageText,
-    lastMessage = _ref.lastMessage,
-    user = _ref.user,
-    contactsMap = _ref.contactsMap,
-    getFromContacts = _ref.getFromContacts,
-    lastMessageMetas = _ref.lastMessageMetas,
-    accentColor = _ref.accentColor,
-    typingOrRecording = _ref.typingOrRecording,
-    channel = _ref.channel,
-    isDirectChannel = _ref.isDirectChannel;
+var LastMessageAttachments = function LastMessageAttachments(_ref) {
+  var lastMessage = _ref.lastMessage;
+  return !!(lastMessage.attachments && lastMessage.attachments.length) && (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);
+};
+var ChannelMessageText = function ChannelMessageText(_ref2) {
+  var isTypingOrRecording = _ref2.isTypingOrRecording,
+    textPrimary = _ref2.textPrimary,
+    textSecondary = _ref2.textSecondary,
+    draftMessageText = _ref2.draftMessageText,
+    lastMessage = _ref2.lastMessage,
+    user = _ref2.user,
+    contactsMap = _ref2.contactsMap,
+    getFromContacts = _ref2.getFromContacts,
+    lastMessageMetas = _ref2.lastMessageMetas,
+    accentColor = _ref2.accentColor,
+    typingOrRecording = _ref2.typingOrRecording,
+    channel = _ref2.channel,
+    isDirectChannel = _ref2.isDirectChannel;
   return /*#__PURE__*/React__default.createElement(MessageTextContainer, null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
@@ -19642,7 +19653,9 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
     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' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, 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", ' "')), !!(lastMessage.attachments && lastMessage.attachments.length) && (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), /*#__PURE__*/React__default.createElement(LastMessageDescription, null, !!(lastMessage && lastMessage.id) && MessageTextFormat({
+  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, null, 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
+  }), !!(lastMessage && lastMessage.id) && MessageTextFormat({
     text: lastMessage.body,
     message: lastMessage,
     contactsMap: contactsMap,
@@ -19650,34 +19663,34 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
     isLastMessage: true,
     accentColor: accentColor,
     textSecondary: textSecondary
-  })), channel.lastReactedMessage && '"'))));
+  }), channel.lastReactedMessage && '"')))));
 };
-var Channel = function Channel(_ref2) {
+var Channel = function Channel(_ref3) {
   var _channel$metadata, _channel$metadata2;
-  var channel = _ref2.channel,
-    theme = _ref2.theme,
-    _ref2$showAvatar = _ref2.showAvatar,
-    showAvatar = _ref2$showAvatar === void 0 ? true : _ref2$showAvatar,
-    avatarBorderRadius = _ref2.avatarBorderRadius,
-    notificationsIsMutedIcon = _ref2.notificationsIsMutedIcon,
-    notificationsIsMutedIconColor = _ref2.notificationsIsMutedIconColor,
-    pinedIcon = _ref2.pinedIcon,
-    selectedChannelLeftBorder = _ref2.selectedChannelLeftBorder,
-    selectedChannelBackground = _ref2.selectedChannelBackground,
-    contactsMap = _ref2.contactsMap,
-    selectedChannelBorderRadius = _ref2.selectedChannelBorderRadius,
-    selectedChannelPaddings = _ref2.selectedChannelPaddings,
-    channelsPaddings = _ref2.channelsPaddings,
-    channelsMargin = _ref2.channelsMargin,
-    channelHoverBackground = _ref2.channelHoverBackground,
-    channelSubjectFontSize = _ref2.channelSubjectFontSize,
-    channelSubjectLineHeight = _ref2.channelSubjectLineHeight,
-    channelSubjectColor = _ref2.channelSubjectColor,
-    channelLastMessageFontSize = _ref2.channelLastMessageFontSize,
-    channelLastMessageTimeFontSize = _ref2.channelLastMessageTimeFontSize,
-    channelLastMessageHeight = _ref2.channelLastMessageHeight,
-    channelAvatarSize = _ref2.channelAvatarSize,
-    channelAvatarTextSize = _ref2.channelAvatarTextSize;
+  var channel = _ref3.channel,
+    theme = _ref3.theme,
+    _ref3$showAvatar = _ref3.showAvatar,
+    showAvatar = _ref3$showAvatar === void 0 ? true : _ref3$showAvatar,
+    avatarBorderRadius = _ref3.avatarBorderRadius,
+    notificationsIsMutedIcon = _ref3.notificationsIsMutedIcon,
+    notificationsIsMutedIconColor = _ref3.notificationsIsMutedIconColor,
+    pinedIcon = _ref3.pinedIcon,
+    selectedChannelLeftBorder = _ref3.selectedChannelLeftBorder,
+    selectedChannelBackground = _ref3.selectedChannelBackground,
+    contactsMap = _ref3.contactsMap,
+    selectedChannelBorderRadius = _ref3.selectedChannelBorderRadius,
+    selectedChannelPaddings = _ref3.selectedChannelPaddings,
+    channelsPaddings = _ref3.channelsPaddings,
+    channelsMargin = _ref3.channelsMargin,
+    channelHoverBackground = _ref3.channelHoverBackground,
+    channelSubjectFontSize = _ref3.channelSubjectFontSize,
+    channelSubjectLineHeight = _ref3.channelSubjectLineHeight,
+    channelSubjectColor = _ref3.channelSubjectColor,
+    channelLastMessageFontSize = _ref3.channelLastMessageFontSize,
+    channelLastMessageTimeFontSize = _ref3.channelLastMessageTimeFontSize,
+    channelLastMessageHeight = _ref3.channelLastMessageHeight,
+    channelAvatarSize = _ref3.channelAvatarSize,
+    channelAvatarTextSize = _ref3.channelAvatarTextSize;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -19929,9 +19942,9 @@ var Container$2 = styled__default.div(_templateObject6$1 || (_templateObject6$1
   return props.channelsMargin || '0 8px';
 }, function (props) {
   return props.selectedChannelBorderRadius || '12px';
-}, function (_ref3) {
-  var selectedChannel = _ref3.selectedChannel,
-    hoverBackground = _ref3.hoverBackground;
+}, function (_ref4) {
+  var selectedChannel = _ref4.selectedChannel,
+    hoverBackground = _ref4.hoverBackground;
   return !selectedChannel && "\n      background-color: " + hoverBackground + ";\n    ";
 }, UserStatus, function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
@@ -19946,9 +19959,9 @@ var DraftMessageText = styled__default.span(_templateObject8$1 || (_templateObje
 });
 var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
   return props.color;
-}, function (_ref4) {
-  var typing = _ref4.typing,
-    recording = _ref4.recording;
+}, function (_ref5) {
+  var typing = _ref5.typing,
+    recording = _ref5.recording;
   return (typing || recording) && "\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: calc(100% - " + (typing ? 62 : 76) + "px);\n  ";
 });
 var Points = styled__default.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
@@ -19965,7 +19978,7 @@ var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObjec
 }, function (props) {
   return props.color;
 });
-var LastMessageDescription = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n"])));
+var LastMessageDescription = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  & > svg {\n    width: 18px;\n    height: 18px;\n    margin: 3px 0 -3px 0;\n    margin-right: 4px;\n  }\n"])));
 var ChannelStatus = styled__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  display: flex;\n  flex-wrap: wrap;\n  height: 42px;\n  margin-left: auto;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
@@ -30907,8 +30920,7 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
 };
 var MessageList = function MessageList(_ref2) {
   var _channel$lastMessage, _channel$lastMessage3, _scrollRef$current;
-  var messages = _ref2.messages,
-    fontFamily = _ref2.fontFamily,
+  var fontFamily = _ref2.fontFamily,
     _ref2$ownMessageOnRig = _ref2.ownMessageOnRightSide,
     ownMessageOnRightSide = _ref2$ownMessageOnRig === void 0 ? true : _ref2$ownMessageOnRig,
     messageWidthPercent = _ref2.messageWidthPercent,
@@ -31081,6 +31093,7 @@ var MessageList = function MessageList(_ref2) {
   var messagesLoading = reactRedux.useSelector(messagesLoadingState);
   var draggingSelector = reactRedux.useSelector(isDraggingSelector, reactRedux.shallowEqual);
   var showScrollToNewMessageButton = reactRedux.useSelector(showScrollToNewMessageButtonSelector, reactRedux.shallowEqual);
+  var messages = reactRedux.useSelector(activeChannelMessagesSelector, reactRedux.shallowEqual) || [];
   var _useState = React.useState(''),
     unreadMessageId = _useState[0],
     setUnreadMessageId = _useState[1];
@@ -31167,14 +31180,14 @@ var MessageList = function MessageList(_ref2) {
       if (target.scrollTop === 0 && scrollToNewMessage.scrollToBottom && scrollToNewMessage.updateMessageList && messagesLoading !== LOADING_STATE.LOADING) {
         dispatch(getMessagesAC(channel, true));
       }
+      if (target.scrollTop <= -50) {
+        dispatch(showScrollToNewMessageButtonAC(true));
+      } else {
+        dispatch(showScrollToNewMessageButtonAC(false));
+      }
       if (scrollToReply) {
         target.scrollTop = scrollToReply;
       } else {
-        if (target.scrollTop <= -50) {
-          dispatch(showScrollToNewMessageButtonAC(true));
-        } else {
-          dispatch(showScrollToNewMessageButtonAC(false));
-        }
         if (messagesIndexMap[lastVisibleMessageId] < 15 || forceLoadPrevMessages) {
           if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && hasPrevMessages) {
             if (messagesLoading === LOADING_STATE.LOADING || loading || prevDisable) {
@@ -31224,7 +31237,10 @@ var MessageList = function MessageList(_ref2) {
       }) >= 10) {
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {
-          scrollRef.current.scrollTop = repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2;
+          scrollRef.current.scrollTo({
+            top: repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2,
+            behavior: 'smooth'
+          });
           repliedMessage.classList.add('highlight');
           setTimeout(function () {
             repliedMessage.classList.remove('highlight');
@@ -31357,7 +31373,10 @@ var MessageList = function MessageList(_ref2) {
       var repliedMessage = document.getElementById(scrollToRepliedMessage);
       if (repliedMessage) {
         setScrollToReply(repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200));
-        scrollRef.current.scrollTop = repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200);
+        scrollRef.current.scrollTo({
+          top: repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200),
+          behavior: 'smooth'
+        });
         scrollRef.current.style.scrollBehavior = 'smooth';
         if (!channel.backToLinkedChannel) {
           repliedMessage && repliedMessage.classList.add('highlight');
@@ -31379,12 +31398,18 @@ var MessageList = function MessageList(_ref2) {
     if (scrollToNewMessage.scrollToBottom) {
       if (scrollToNewMessage.isIncomingMessage) {
         if (scrollRef.current.scrollTop > -100) {
-          scrollRef.current.scrollTop = 0;
+          scrollRef.current.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
         }
       } else {
         nextDisable = true;
         prevDisable = true;
-        scrollRef.current.scrollTop = 0;
+        scrollRef.current.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
         dispatch(showScrollToNewMessageButtonAC(false));
         setTimeout(function () {
           prevDisable = false;
@@ -32031,9 +32056,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
     hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
-  var messages = reactRedux.useSelector(activeChannelMessagesSelector) || [];
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
-    messages: messages,
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
     messageWidthPercent: messageWidthPercent,
@@ -38986,7 +39009,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
         if (repliedMessage) {
           var scrollRef = document.getElementById('scrollableDiv');
           if (scrollRef) {
-            scrollRef.scrollTop = repliedMessage.offsetTop;
+            scrollRef.scrollTo({
+              top: repliedMessage.offsetTop - scrollRef.offsetHeight / 2,
+              behavior: 'smooth'
+            });
           }
         }
       } else {