sceyt-chat-react-uikit 1.6.8-beta.9 → 1.6.9

package/index.js

@@ -7692,6 +7692,7 @@ var DELETE_REACTION = 'DELETE_REACTION';
 var SET_SCROLL_TO_NEW_MESSAGE = 'SET_SCROLL_TO_NEW_MESSAGE';
 var SET_SHOW_SCROLL_TO_NEW_MESSAGE_BUTTON = 'SET_SHOW_SCROLL_TO_NEW_MESSAGE_BUTTON';
 var SET_MESSAGE_MENU_OPENED = 'SET_MESSAGE_MENU_OPENED';
+var SET_SCROLL_TO_MENTIONED_MESSAGE = 'SET_SCROLL_TO_MENTIONED_MESSAGE';
 var queryDirection = {
   PREV: 'prev',
   NEXT: 'next',
@@ -8290,9 +8291,6 @@ function checkChannelExistsOnMessagesMap(channelId) {
   return !!messagesMap[channelId];
 }
 var pendingVideoAttachmentsThumbs = {};
-var setVideoThumb = function setVideoThumb(attachmentId, thumb) {
-  pendingVideoAttachmentsThumbs[attachmentId] = thumb;
-};
 var getVideoThumb = function getVideoThumb(attachmentId) {
   return pendingVideoAttachmentsThumbs[attachmentId];
 };
@@ -8395,6 +8393,7 @@ var initialState$1 = {
   messageForReply: null,
   attachmentsUploadingState: {},
   scrollToMessage: null,
+  scrollToMentionedMessage: false,
   reactionsList: [],
   reactionsHasNext: true,
   reactionsLoadingState: null,
@@ -8437,6 +8436,11 @@ var MessageReducer = (function (state, _temp) {
         newState.scrollToMessage = payload.messageId;
         return newState;
       }
+    case SET_SCROLL_TO_MENTIONED_MESSAGE:
+      {
+        newState.scrollToMentionedMessage = payload.isScrollToMentionedMessage;
+        return newState;
+      }
     case SET_SCROLL_TO_NEW_MESSAGE:
       {
         newState.scrollToNewMessage = {
@@ -9205,8 +9209,8 @@ var defaultTheme = {
     light: '#C8D0FF',
     dark: '#3B3D68'
   }, _colors[THEME_COLORS.TOOLTIP_BACKGROUND] = {
-    light: '#11153980',
-    dark: '#00000080'
+    light: '#111539E5',
+    dark: '#000000E5'
   }, _colors)
 };
 var defaultThemeMode = 'light';
@@ -9863,6 +9867,14 @@ function setScrollToMessagesAC(messageId) {
     }
   };
 }
+function setScrollToMentionedMessageAC(isScrollToMentionedMessage) {
+  return {
+    type: SET_SCROLL_TO_MENTIONED_MESSAGE,
+    payload: {
+      isScrollToMentionedMessage: isScrollToMentionedMessage
+    }
+  };
+}
 function setMessagesLoadingStateAC(state) {
   return {
     type: SET_MESSAGES_LOADING_STATE,
@@ -10627,6 +10639,9 @@ var messageToEditSelector = function messageToEditSelector(store) {
 var scrollToNewMessageSelector = function scrollToNewMessageSelector(store) {
   return store.MessageReducer.scrollToNewMessage;
 };
+var scrollToMentionedMessageSelector = function scrollToMentionedMessageSelector(store) {
+  return store.MessageReducer.scrollToMentionedMessage;
+};
 var showScrollToNewMessageButtonSelector = function showScrollToNewMessageButtonSelector(store) {
   return store.MessageReducer.showScrollToNewMessageButton;
 };
@@ -10770,6 +10785,10 @@ var setAvatarColor = function setAvatarColor(colors) {
   };
 };
 var getAvatarColors = function getAvatarColors(theme) {
+  var _avatarColors$theme;
+  if (!((_avatarColors$theme = _avatarColors[theme]) !== null && _avatarColors$theme !== void 0 && _avatarColors$theme.length)) {
+    return _avatarColors.light;
+  }
   return _avatarColors[theme];
 };
 
@@ -11171,7 +11190,7 @@ var UploadAvatarButton = styled__default.button(_templateObject24 || (_templateO
 var UploadAvatarHandler = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled__default.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled__default.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -11185,6 +11204,8 @@ var StyledText = styled__default.span(_templateObject26 || (_templateObject26 =
   return props.color;
 }, function (props) {
   return props.isLastMessage && '500';
+}, function (props) {
+  return props.shouldOpenUserProfileForMention && 'pointer';
 });
 var MessageOwner = styled__default.h3(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n  margin: 0 12px 4px 0;\n  white-space: nowrap;\n  color: ", ";\n  margin-left: ", ";\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.color;
@@ -11430,7 +11451,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     isLastMessage = _ref2.isLastMessage,
     asSampleText = _ref2.asSampleText,
     accentColor = _ref2.accentColor,
-    textSecondary = _ref2.textSecondary;
+    textSecondary = _ref2.textSecondary,
+    onMentionNameClick = _ref2.onMentionNameClick,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -11475,12 +11498,18 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: "" + combinedAttributesList[index - 1].type,
                 isLastMessage: isLastMessage,
                 key: attributeOffset + index,
-                color: isLastMessage ? textSecondary : accentColor
+                color: isLastMessage ? textSecondary : accentColor,
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, firsTextPart, /*#__PURE__*/React__default.createElement(StyledText, {
                 className: 'mention',
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset + index
+                key: attributeOffset + index,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                }
               }, mentionDisplayName), secondTextPart)), index === combinedAttributesList.length - 1 ? secondPart : '');
             } else {
               nextPartIndex = attribute.offset + attribute.length;
@@ -11488,7 +11517,13 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: attribute.type,
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset
+                key: attributeOffset,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                },
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, mentionDisplayName)), index === combinedAttributesList.length - 1 ? secondPart : '');
             }
           } else {
@@ -13847,30 +13882,31 @@ function getChannelMentions(action) {
         mentionsQueryBuilder = new SceytChatClient.MentionsListQueryBuilder();
         mentionsQueryBuilder.setChannelId(channelId);
         mentionsQueryBuilder.limit(10);
-        _context7.next = 9;
+        mentionsQueryBuilder.setDirection(queryDirection.NEXT);
+        _context7.next = 10;
         return effects.call(mentionsQueryBuilder.build);
-      case 9:
+      case 10:
         mentionsQuery = _context7.sent;
-        _context7.next = 12;
+        _context7.next = 13;
         return effects.call(mentionsQuery.loadNext);
-      case 12:
+      case 13:
         mentions = _context7.sent;
-        _context7.next = 15;
+        _context7.next = 16;
         return effects.put(updateChannelDataAC(channelId, {
           mentionsIds: mentions.mentions
         }));
-      case 15:
-        _context7.next = 20;
+      case 16:
+        _context7.next = 21;
         break;
-      case 17:
-        _context7.prev = 17;
+      case 18:
+        _context7.prev = 18;
         _context7.t0 = _context7["catch"](0);
         log.error(_context7.t0, 'Error in get channel mentions');
-      case 20:
+      case 21:
       case "end":
         return _context7.stop();
     }
-  }, _marked7, null, [[0, 17]]);
+  }, _marked7, null, [[0, 18]]);
 }
 function channelsForForwardLoadMore(action) {
   var payload, limit, SceytChatClient, channelQueryForward, channelsData, channelsToAdd, _yield$call4, mappedChannels;
@@ -15490,21 +15526,6 @@ var addData = function addData(db, storeName, keyPath, data) {
   }
 };
 
-var getFrame3 = function getFrame3(video, time) {
-  try {
-    var canvas = document.createElement('canvas');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    var ctx = canvas.getContext('2d');
-    if (time) {
-      video.currentTime = time;
-    }
-    ctx.drawImage(video, 0, 0);
-    return Promise.resolve(createImageThumbnail(null, canvas.toDataURL(), 10, 10));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
 var getFrame = function getFrame(videoSrc, time) {
   try {
     var video = document.createElement('video');
@@ -18732,20 +18753,25 @@ var useStateComplex = function useStateComplex(initialState) {
   }];
 };
 
-function useOnScreen(ref) {
+function useOnScreen(ref, rootElement) {
   var _useState = React.useState(false),
     isIntersecting = _useState[0],
     setIntersecting = _useState[1];
-  var observer = new IntersectionObserver(function (_ref) {
-    var entry = _ref[0];
-    return setIntersecting(entry.isIntersecting);
-  });
   React.useEffect(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) return;
+    var observer = new IntersectionObserver(function (_ref) {
+      var entry = _ref[0];
+      return setIntersecting(entry.isIntersecting);
+    }, {
+      root: rootElement || null,
+      rootMargin: '0px',
+      threshold: 0.1
+    });
     observer.observe(ref.current);
     return function () {
       observer.disconnect();
     };
-  }, []);
+  }, [ref, rootElement]);
   return isIntersecting;
 }
 
@@ -19469,7 +19495,7 @@ var DeletedAvatarWrapper = styled__default(SvgDeletedUserAvatar)(_templateObject
   return props.color;
 });
 
-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;
+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,
@@ -19492,7 +19518,7 @@ 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), !!(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, 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({
     text: lastMessage.body,
     message: lastMessage,
     contactsMap: contactsMap,
@@ -19500,7 +19526,7 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
     isLastMessage: true,
     accentColor: accentColor,
     textSecondary: textSecondary
-  }), channel.lastReactedMessage && '"'))));
+  })), channel.lastReactedMessage && '"'))));
 };
 var Channel = function Channel(_ref2) {
   var _channel$metadata, _channel$metadata2;
@@ -19703,7 +19729,7 @@ var Channel = function Channel(_ref2) {
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
   }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !isTypingOrRecording && (isDirectChannel ? !isTypingOrRecording && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : isTypingOrRecording && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
-    color: draftMessageText && warningColor
+    color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
     withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && !isTypingOrRecording,
@@ -19804,7 +19830,7 @@ var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObje
 var Points = styled__default.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n  font-style: ", ";\n  transform: ", ";\n  //height: 20px;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n    margin-right: 4px;\n    color: ", ";\n    //transform: ", ";\n    transform: translate(0px, 3px);\n  }\n"])), function (props) {
+var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n  font-style: ", ";\n  transform: ", ";\n  //height: 20px;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n    min-width: 16px;\n    min-height: 16px;\n    margin-right: 4px;\n    color: ", ";\n    transform: translate(0px, 3px);\n  }\n  & > span {\n    display: flex;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n  & > div {\n    display: flex;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n    & > svg {\n      width: 18px;\n      height: 18px;\n      min-width: 18px;\n      min-height: 18px;\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.deletedMessage && 'italic';
@@ -19813,28 +19839,29 @@ var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObjec
 }, function (props) {
   return props.color;
 }, function (props) {
-  return props.withAttachments ? 'translate(0px, 3px)' : 'translate(0px, 2px)';
+  return props.color;
 });
-var ChannelStatus = styled__default.div(_templateObject10$1 || (_templateObject10$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) {
+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 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;
 });
-var LastMessageDate = styled__default.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  line-height: 16px;\n"])), function (props) {
+var LastMessageDate = styled__default.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.fontSize || '12px';
 });
-var DeliveryIconCont = styled__default.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 6px;\n  line-height: 13px;\n"])));
-var UnreadMentionIconWrapper = styled__default.span(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  line-height: 13px;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var DeliveryIconCont = styled__default.span(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 6px;\n  line-height: 13px;\n"])));
+var UnreadMentionIconWrapper = styled__default.span(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  line-height: 13px;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.rightMargin && '8px';
 }, function (props) {
   return props.iconColor;
 });
-var TypingIndicator = styled__default.span(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
-var ReactionItem = styled__default.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  padding: 0 3px;\n"])));
-var UnreadInfo = styled__default.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: 16px;\n  display: flex;\n  margin-top: 7px;\n  align-items: center;\n  flex: 0 0 auto;\n  margin-left: auto;\n"])), function (props) {
+var TypingIndicator = styled__default.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
+var ReactionItem = styled__default.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  padding: 0 3px;\n"])));
+var UnreadInfo = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: 16px;\n  display: flex;\n  margin-top: 7px;\n  align-items: center;\n  flex: 0 0 auto;\n  margin-left: auto;\n"])), function (props) {
   return props.bottom || '11px';
 });
-var UnreadCount = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n\n  ", "\n"])), function (props) {
+var UnreadCount = styled__default.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n\n  ", "\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';
@@ -19847,10 +19874,10 @@ var UnreadCount = styled__default.span(_templateObject17$1 || (_templateObject17
 }, function (props) {
   return props.isMuted && "background-color: " + props.mutedBackgroundColor + ";";
 });
-var PinnedIconWrapper = styled__default.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var PinnedIconWrapper = styled__default.span(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var MessageTextContainer = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])));
+var MessageTextContainer = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])));
 
 var _templateObject$5, _templateObject2$5;
 var SearchInputContainer = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  max-width: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n\n  & ", " {\n    ", ";\n  }\n"])), function (props) {
@@ -21660,7 +21687,7 @@ var UserNumber = styled__default.h4(_templateObject6$4 || (_templateObject6$4 =
 
 var _templateObject$g, _templateObject2$e, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject0$3;
 var ChannelList = function ChannelList(_ref) {
-  var _channelListRef$curre2, _searchedChannels$cha, _searchedChannels$cha2, _searchedChannels$con, _searchedChannels$cha3, _searchedChannels$cha4, _searchedChannels$cha5, _searchedChannels$cha6;
+  var _activeChannel$member, _channelListRef$curre2, _searchedChannels$cha, _searchedChannels$cha2, _searchedChannels$con, _searchedChannels$cha3, _searchedChannels$cha4, _searchedChannels$cha5, _searchedChannels$cha6;
   var className = _ref.className,
     selectedChannelBackground = _ref.selectedChannelBackground,
     selectedChannelLeftBorder = _ref.selectedChannelLeftBorder,
@@ -21911,10 +21938,12 @@ var ChannelList = function ChannelList(_ref) {
   }, [searchValue]);
   useDidUpdate(function () {
     if (getSelectedChannel) {
-      dispatch(getChannelMentionsAC(activeChannel.id));
+      if (!(activeChannel !== null && activeChannel !== void 0 && activeChannel.mentionsIds)) {
+        dispatch(getChannelMentionsAC(activeChannel.id));
+      }
       getSelectedChannel(activeChannel);
     }
-  }, [activeChannel && activeChannel.members && activeChannel.members.length]);
+  }, [activeChannel, activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.members, activeChannel === null || activeChannel === void 0 ? void 0 : (_activeChannel$member = activeChannel.members) === null || _activeChannel$member === void 0 ? void 0 : _activeChannel$member.length, activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id]);
   useDidUpdate(function () {
     if (closeSearchChannels) {
       getMyChannels();
@@ -22272,7 +22301,7 @@ var NoData = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _ta
   return props.color;
 });
 var LoadingWrapper = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
-var ChannelListHeader = styled__default.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: 12px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
+var ChannelListHeader = styled__default.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: 12px;\n  padding-left: 22px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
   return props.maxWidth ? props.maxWidth + "px" : 'inherit';
 }, function (props) {
   return props.withoutProfile && '52px';
@@ -22392,7 +22421,7 @@ function Chat(_ref) {
     color: textSecondary
   }, "Please select a chat to start messaging."))))), children);
 }
-var Container$8 = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  transition: all 0.1s;\n  flex-direction: column;\n"])), function (props) {
+var Container$8 = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  transition: all 0.1s;\n  flex-direction: column;\n  overflow: hidden;\n"])), function (props) {
   return props.widthOffset || props.channelDetailsWidth ? "calc(100% - " + (props.widthOffset + (props.channelDetailsWidth ? props.channelDetailsWidth + 1 : 0)) + "px)" : '';
 });
 var SelectChatContainer = styled__default.div(_templateObject2$f || (_templateObject2$f = _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) {
@@ -25379,18 +25408,21 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     border = _useColor[THEME_COLORS.BORDER],
     overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2],
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
-  var _useState = React.useState(0),
-    videoDuration = _useState[0],
-    setVideoDuration = _useState[1];
-  var _useState2 = React.useState(null),
-    videoCurrentTime = _useState2[0],
-    setVideoCurrentTime = _useState2[1];
-  var _useState3 = React.useState(true),
-    loading = _useState3[0],
-    setLoading = _useState3[1];
-  var _useState4 = React.useState(''),
-    videoUrl = _useState4[0],
-    setVideoUrl = _useState4[1];
+  var currentTime = '';
+  if (file.metadata && file.metadata.dur) {
+    var mins = Math.floor(file.metadata.dur / 60);
+    var seconds = Math.floor(file.metadata.dur % 60);
+    currentTime = mins + ":" + (seconds < 10 ? "0" + seconds : seconds);
+  }
+  var _useState = React.useState(currentTime),
+    videoCurrentTime = _useState[0],
+    setVideoCurrentTime = _useState[1];
+  var _useState2 = React.useState(true),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = React.useState(''),
+    videoUrl = _useState3[0],
+    setVideoUrl = _useState3[1];
   var videoRef = React.useRef(null);
   var attachmentThumb;
   var withPrefix = true;
@@ -25403,55 +25435,41 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     }
   }
   React.useEffect(function () {
-    var checkVideoInterval;
-    if (videoRef.current) {
-      var intervalCount = 0;
-      checkVideoInterval = setInterval(function () {
-        try {
-          var _temp4 = function _temp4() {
-            if (intervalCount >= 8) {
-              if (setVideoIsReadyToSend) {
-                setVideoIsReadyToSend(file.tid);
-                clearInterval(checkVideoInterval);
-              }
-            }
-          };
-          intervalCount++;
-          var _temp3 = function () {
-            if (videoRef.current && videoRef.current.readyState > 3) {
-              var _temp2 = function _temp2() {
-                clearInterval(checkVideoInterval);
-              };
-              setLoading(false);
-              setVideoDuration(videoRef.current.duration);
-              var minutes = Math.floor(videoRef.current.duration / 60);
-              var seconds = Math.floor(videoRef.current.duration % 60);
-              setVideoCurrentTime(minutes + ":" + (seconds < 10 ? "0" + seconds : seconds));
-              var _temp = function () {
-                if (isPreview) {
-                  return Promise.resolve(getFrame3(videoRef.current, 0)).then(function (thumb) {
-                    if (thumb) {
-                      setVideoThumb(file.tid, _extends({}, thumb, {
-                        duration: videoRef.current.duration
-                      }));
-                      if (setVideoIsReadyToSend) {
-                        setVideoIsReadyToSend(file.tid);
-                      }
-                    }
-                  });
-                }
-              }();
-              return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-            }
-          }();
-          return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
-        } catch (e) {
-          return Promise.reject(e);
+    var video = videoRef.current;
+    if (!video) return;
+    var checkReadyState = function checkReadyState() {
+      if (video.readyState > 3) {
+        setLoading(false);
+        var minutes = Math.floor(video.duration / 60);
+        var _seconds = Math.floor(video.duration % 60);
+        setVideoCurrentTime(minutes + ":" + (_seconds < 10 ? "0" + _seconds : _seconds));
+        console.log('videoCurrentTime **************', minutes + ":" + (_seconds < 10 ? "0" + _seconds : _seconds));
+        if (setVideoIsReadyToSend) {
+          setVideoIsReadyToSend(file.tid);
         }
-      }, 1000);
-    }
+        return true;
+      }
+      return false;
+    };
+    if (checkReadyState()) return;
+    var handleCanPlay = function handleCanPlay() {
+      return checkReadyState();
+    };
+    var handleLoadedMetadata = function handleLoadedMetadata() {
+      return checkReadyState();
+    };
+    video.addEventListener('canplay', handleCanPlay);
+    video.addEventListener('loadedmetadata', handleLoadedMetadata);
+    var interval = setInterval(function () {
+      console.log('checkReadyState **************');
+      if (checkReadyState()) {
+        clearInterval(interval);
+      }
+    }, 1000);
     return function () {
-      return clearInterval(checkVideoInterval);
+      video.removeEventListener('canplay', handleCanPlay);
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+      clearInterval(interval);
     };
   }, []);
   React.useEffect(function () {
@@ -25486,7 +25504,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     preload: 'auto',
     id: 'video',
     src: file.attachmentUrl || videoUrl
-  }), videoCurrentTime && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoDuration && !isRepliedMessage && !uploading && !isDetailsView && (
+  }), videoCurrentTime && (/*#__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,
@@ -25496,7 +25514,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
   }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
 });
 var VideoControls = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var VideoTime = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  font-size: ", ";\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  line-height: 14px;\n  color: ", ";\n\n  & > svg {\n    color: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
+var VideoTime = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  font-size: ", ";\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  line-height: 14px;\n  color: ", ";\n  z-index: 10;\n\n  & > svg {\n    color: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
   return props.isRepliedMessage ? '3px' : props.isDetailsView ? undefined : '8px';
 }, function (props) {
   return props.isDetailsView ? '8px' : undefined;
@@ -27685,7 +27703,10 @@ var Attachment = function Attachment(_ref) {
   var _useState5 = React.useState(3),
     progress = _useState5[0],
     setProgress = _useState5[1];
-  var _useState6 = React.useState(),
+  var _useState6 = React.useState({
+      loaded: 0,
+      total: (attachment === null || attachment === void 0 ? void 0 : attachment.size) || 0
+    }),
     sizeProgress = _useState6[0],
     setSizeProgress = _useState6[1];
   var _useState7 = React.useState(true),
@@ -29385,7 +29406,7 @@ var HiddenMessageTime = styled__default.span(_templateObject2$u || (_templateObj
 }, function (props) {
   return props.color;
 });
-var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (_templateObject3$o = _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\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__default.span(_templateObject3$o || (_templateObject3$o = _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';
@@ -29410,7 +29431,7 @@ var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (
 }, HiddenMessageTime, function (props) {
   return props.withAttachment ? props.messageTimeColorOnAttachment : '';
 }, function (props) {
-  return props.withAttachment && "\n    position: absolute;\n    z-index: 3;\n    right: " + (props.fileAttachment ? '6px' : '10px') + ";\n    bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n  ";
+  return props.withAttachment && "\n    position: absolute;\n    z-index: 10;\n    right: " + (props.fileAttachment ? '6px' : '10px') + ";\n    bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n  ";
 });
 var MessageStatusUpdated = styled__default.span(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  font-style: italic;\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
   return props.fontSize || '12px';
@@ -29553,7 +29574,9 @@ var MessageBody = function MessageBody(_ref) {
     handleMouseLeave = _ref.handleMouseLeave,
     handleReactionAddDelete = _ref.handleReactionAddDelete,
     handleCreateChat = _ref.handleCreateChat,
-    messageTextRef = _ref.messageTextRef;
+    messageTextRef = _ref.messageTextRef,
+    handleOpenUserProfile = _ref.handleOpenUserProfile,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -29754,7 +29777,9 @@ var MessageBody = function MessageBody(_ref) {
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
     accentColor: accentColor,
-    textSecondary: textSecondary
+    textSecondary: textSecondary,
+    onMentionNameClick: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention
   })), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
@@ -30040,7 +30065,8 @@ var Message$1 = function Message(_ref) {
     theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
-    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment;
+    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -30304,8 +30330,22 @@ var Message$1 = function Message(_ref) {
       document.removeEventListener('mousedown', handleClick);
     };
   }, []);
+  var handleOpenChannelDetails = function handleOpenChannelDetails() {
+    dispatch(switchChannelInfoAC(true));
+  };
+  var handleOpenUserProfile = function handleOpenUserProfile(user) {
+    if (getOpenChatOnUserInteraction() && user && !selectionIsActive) {
+      dispatch(createChannelAC({
+        metadata: '',
+        type: DEFAULT_CHANNEL_TYPE.DIRECT,
+        members: [_extends({}, user, {
+          role: 'owner'
+        })]
+      }, true));
+      handleOpenChannelDetails();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(MessageItem, {
-    key: message.id || message.tid,
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
     withAvatar: renderAvatar,
@@ -30343,7 +30383,7 @@ var Message$1 = function Message(_ref) {
   }, message.state === MESSAGE_STATUS.FAILED && (/*#__PURE__*/React__default.createElement(FailedMessageIcon, {
     rtl: ownMessageOnRightSide && !message.incoming
   }, /*#__PURE__*/React__default.createElement(ErrorIconWrapper, null))), CustomMessageItem ? (/*#__PURE__*/React__default.createElement(CustomMessageItem, {
-    key: message.id,
+    key: message.id || message.tid,
     channel: channel,
     message: message,
     prevMessage: prevMessage,
@@ -30373,7 +30413,8 @@ var Message$1 = function Message(_ref) {
     handleReactionAddDelete: handleReactionAddDelete,
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     handleMediaItemClick: handleMediaItemClick,
-    isThreadMessage: isThreadMessage
+    isThreadMessage: isThreadMessage,
+    handleOpenUserProfile: handleOpenUserProfile
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     message: message,
     channel: channel,
@@ -30493,7 +30534,9 @@ var Message$1 = function Message(_ref) {
     handleDeletePendingMessage: handleDeletePendingMessage,
     handleCreateChat: handleCreateChat,
     messageTextRef: messageTextRef,
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
+    handleOpenUserProfile: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -30741,6 +30784,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,
     _ref2$ownMessageOnRig = _ref2.ownMessageOnRightSide,
@@ -30881,7 +30925,8 @@ var MessageList = function MessageList(_ref2) {
     messageTimeFontSize = _ref2.messageTimeFontSize,
     messageTimeColor = _ref2.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref2.messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties = _ref2.hiddenMessagesProperties;
+    hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -30893,7 +30938,8 @@ var MessageList = function MessageList(_ref2) {
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     surface2 = _useColor[THEME_COLORS.SURFACE_2],
-    border = _useColor[THEME_COLORS.BORDER];
+    border = _useColor[THEME_COLORS.BORDER],
+    highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = reactRedux.useDispatch();
@@ -30905,12 +30951,14 @@ var MessageList = function MessageList(_ref2) {
   var tabIsActive = reactRedux.useSelector(tabIsActiveSelector, reactRedux.shallowEqual);
   var selectedMessagesMap = reactRedux.useSelector(selectedMessagesMapSelector);
   var scrollToNewMessage = reactRedux.useSelector(scrollToNewMessageSelector, reactRedux.shallowEqual);
+  var scrollToMentionedMessage = reactRedux.useSelector(scrollToMentionedMessageSelector, reactRedux.shallowEqual);
   var scrollToRepliedMessage = reactRedux.useSelector(scrollToMessageSelector, reactRedux.shallowEqual);
   var browserTabIsActive = reactRedux.useSelector(browserTabIsActiveSelector, reactRedux.shallowEqual);
   var hasNextMessages = reactRedux.useSelector(messagesHasNextSelector, reactRedux.shallowEqual);
   var hasPrevMessages = reactRedux.useSelector(messagesHasPrevSelector, reactRedux.shallowEqual);
   var messagesLoading = reactRedux.useSelector(messagesLoadingState);
   var draggingSelector = reactRedux.useSelector(isDraggingSelector, reactRedux.shallowEqual);
+  var showScrollToNewMessageButton = reactRedux.useSelector(showScrollToNewMessageButtonSelector, reactRedux.shallowEqual);
   var _useState = React.useState(''),
     unreadMessageId = _useState[0],
     setUnreadMessageId = _useState[1];
@@ -30936,6 +30984,12 @@ var MessageList = function MessageList(_ref2) {
   var _useState8 = React.useState(null),
     scrollToReply = _useState8[0],
     setScrollToReply = _useState8[1];
+  var _useState9 = React.useState(0),
+    previousScrollTop = _useState9[0],
+    setPreviousScrollTop = _useState9[1];
+  var _useState0 = React.useState(false),
+    shouldPreserveScroll = _useState0[0],
+    setShouldPreserveScroll = _useState0[1];
   var messageForReply = {};
   var messageList = React.useMemo(function () {
     return messages;
@@ -30966,8 +31020,17 @@ var MessageList = function MessageList(_ref2) {
       messageTopDate.style.display = 'none';
     }
   };
-  var handleMessagesListScroll = function handleMessagesListScroll(event) {
+  var handleMessagesListScroll = React.useCallback(function (event) {
     try {
+      if (scrollToMentionedMessage) {
+        var _target = event.target;
+        if (_target.scrollTop <= -50 || channel.lastMessage.id !== messages[messages.length - 1].id) {
+          dispatch(showScrollToNewMessageButtonAC(true));
+        } else {
+          dispatch(showScrollToNewMessageButtonAC(false));
+        }
+        return Promise.resolve();
+      }
       setShowTopDate(true);
       clearTimeout(hideTopDateTimeout.current);
       hideTopDateTimeout.current = setTimeout(function () {
@@ -31029,7 +31092,7 @@ var MessageList = function MessageList(_ref2) {
     } catch (e) {
       return Promise.reject(e);
     }
-  };
+  }, [channel === null || channel === void 0 ? void 0 : (_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id, messages, scrollToMentionedMessage, scrollToNewMessage, messagesLoading, loading, hasPrevMessages, hasNextMessages, messagesIndexMap, lastVisibleMessageId, connectionStatus, shouldLoadMessages, loadDirection, getHasPrevCached, getHasNextCached, scrollToReply]);
   var handleScrollToRepliedMessage = function handleScrollToRepliedMessage(messageId) {
     try {
       prevDisable = true;
@@ -31056,6 +31119,9 @@ var MessageList = function MessageList(_ref2) {
     }
   };
   var handleLoadMoreMessages = function handleLoadMoreMessages(direction, limit) {
+    if (scrollToMentionedMessage) {
+      return;
+    }
     var lastMessageId = messages.length && messages[messages.length - 1].id;
     var firstMessageId = messages.length && messages[0].id;
     var hasPrevCached = getHasPrevCached();
@@ -31156,6 +31222,12 @@ var MessageList = function MessageList(_ref2) {
       e.dataTransfer.clearData();
     }
   };
+  React.useEffect(function () {
+    var _messages, _channel$lastMessage2;
+    if (messages.length > 0 && ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.id) === ((_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id) && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
+      dispatch(showScrollToNewMessageButtonAC(false));
+    }
+  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
   React.useEffect(function () {
     if (scrollToRepliedMessage) {
       loading = false;
@@ -31164,6 +31236,7 @@ var MessageList = function MessageList(_ref2) {
       if (repliedMessage) {
         setScrollToReply(repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200));
         scrollRef.current.scrollTop = repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200);
+        scrollRef.current.style.scrollBehavior = 'smooth';
         if (!channel.backToLinkedChannel) {
           repliedMessage && repliedMessage.classList.add('highlight');
         }
@@ -31235,6 +31308,8 @@ var MessageList = function MessageList(_ref2) {
     if (selectedMessagesMap && selectedMessagesMap.size) {
       dispatch(clearSelectedMessagesAC());
     }
+    setPreviousScrollTop(0);
+    setShouldPreserveScroll(false);
     nextDisable = false;
     prevDisable = false;
     scrollToBottom = true;
@@ -31254,6 +31329,13 @@ var MessageList = function MessageList(_ref2) {
     }
   }, [messages]);
   React.useEffect(function () {
+    if (scrollRef.current) {
+      var isAtBottom = scrollRef.current.scrollTop > -50;
+      if (!isAtBottom) {
+        setPreviousScrollTop(scrollRef.current.scrollTop);
+        setShouldPreserveScroll(true);
+      }
+    }
     if (loading) {
       if (loadDirection !== 'next') {
         var lastVisibleMessage = document.getElementById(lastVisibleMessageId);
@@ -31314,6 +31396,17 @@ var MessageList = function MessageList(_ref2) {
       dispatch(scrollToNewMessageAC(true));
       scrollToBottom = false;
     }
+    if (shouldPreserveScroll && scrollRef.current && previousScrollTop > 0) {
+      requestAnimationFrame(function () {
+        if (scrollRef.current) {
+          scrollRef.current.style.scrollBehavior = 'inherit';
+          scrollRef.current.scrollTop = previousScrollTop;
+          scrollRef.current.style.scrollBehavior = 'smooth';
+        }
+        setShouldPreserveScroll(false);
+        setPreviousScrollTop(0);
+      });
+    }
   }, [messages]);
   useDidUpdate(function () {
     log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
@@ -31414,9 +31507,7 @@ var MessageList = function MessageList(_ref2) {
     var isUnreadMessage = !!(unreadMessageId && unreadMessageId === message.id && nextMessage) && !channel.backToLinkedChannel;
     var messageMetas = isJSON(message.metadata) ? JSON.parse(message.metadata) : message.metadata;
     messagesIndexMap[message.id] = index;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: message.id || message.tid
-    }, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
       noMargin: !isUnreadMessage && prevMessage && prevMessage.type === 'system' && message.type !== 'system',
       theme: theme,
       lastIndex: false,
@@ -31432,6 +31523,7 @@ var MessageList = function MessageList(_ref2) {
       marginBottom: prevMessage && prevMessage.type === 'system' && message.type !== 'system' ? '16px' : '0',
       marginTop: differentUserMessageSpacing
     }), message.type === 'system' ? (/*#__PURE__*/React__default.createElement(SystemMessage, {
+      key: message.id || message.tid,
       channel: channel,
       message: message,
       nextMessage: nextMessage,
@@ -31445,8 +31537,10 @@ var MessageList = function MessageList(_ref2) {
       backgroundColor: dateDividerBackgroundColor,
       borderRadius: dateDividerBorderRadius
     })) : (/*#__PURE__*/React__default.createElement(MessageWrapper, {
+      key: message.id || message.tid,
       id: message.id,
-      className: (message.incoming ? incomingMessageStyles === null || incomingMessageStyles === void 0 ? void 0 : incomingMessageStyles.classname : outgoingMessageStyles === null || outgoingMessageStyles === void 0 ? void 0 : outgoingMessageStyles.classname) || ''
+      className: (message.incoming ? incomingMessageStyles === null || incomingMessageStyles === void 0 ? void 0 : incomingMessageStyles.classname : outgoingMessageStyles === null || outgoingMessageStyles === void 0 ? void 0 : outgoingMessageStyles.classname) || '',
+      highlightBg: highlightedBackground
     }, /*#__PURE__*/React__default.createElement(Message$2, {
       message: _extends({}, message, {
         metadata: messageMetas
@@ -31577,7 +31671,8 @@ var MessageList = function MessageList(_ref2) {
       messageStateColor: messageStateColor,
       messageTimeFontSize: messageTimeFontSize,
       messageTimeColor: messageTimeColor,
-      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -31658,7 +31753,9 @@ var DropAttachmentArea = styled__default.div(_templateObject7$e || (_templateObj
 }, IconWrapper$1, function (props) {
   return props.iconBackgroundColor;
 });
-var MessageWrapper = styled__default.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .messageBody {\n      transform: scale(1.1);\n      background-color: #d5d5d5;\n    }\n  }\n"])));
+var MessageWrapper = styled__default.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .messageBody {\n      transform: scale(1.1);\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.highlightBg || '#d5d5d5';
+});
 var NoMessagesContainer = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
@@ -31810,7 +31907,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeColor = _ref.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref.messageStatusAndTimeLineHeight,
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
-    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr;
+    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,
@@ -31938,7 +32036,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeFontSize: messageTimeFontSize,
     messageTimeColor: messageTimeColor,
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties: hiddenMessagesProperties
+    hiddenMessagesProperties: hiddenMessagesProperties,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   }));
 };
 
@@ -34097,7 +34196,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1, _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$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _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 = LexicalComposerContext.useLexicalComposerContext(),
@@ -34412,17 +34511,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     }
   };
   var handleSendEditMessage = function handleSendEditMessage(event) {
-    if (typingTimout) {
-      if (!inTypingStateTimout) {
-        handleSendTypingState(true);
-      }
-      clearTimeout(typingTimout);
-    } else {
-      handleSendTypingState(true);
-    }
-    setTypingTimout(setTimeout(function () {
-      setTypingTimout(0);
-    }, 2000));
     var shiftKey = event.shiftKey,
       type = event.type,
       code = event.code;
@@ -34524,6 +34612,18 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setMentionedMembers([]);
       setMessageBodyAttributes([]);
       dispatch(setCloseSearchChannelsAC(true));
+    } else {
+      if (typingTimout) {
+        if (!inTypingStateTimout) {
+          handleSendTypingState(true);
+        }
+        clearTimeout(typingTimout);
+      } else {
+        handleSendTypingState(true);
+      }
+      setTypingTimout(setTimeout(function () {
+        setTypingTimout(0);
+      }, 2000));
     }
   };
   var handleEditMessage = function handleEditMessage() {
@@ -34752,7 +34852,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             fileChecksum = "" + reader.result;
           }
           return Promise.resolve(hashString(fileChecksum || '')).then(function (checksumHash) {
-            function _temp10() {
+            function _temp12() {
               if (dataFromDb) {
                 cachedUrl = dataFromDb.url;
                 setPendingAttachment(tid, {
@@ -34764,60 +34864,85 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                   checksum: checksumHash
                 });
               }
-              var _temp0 = function () {
+              var _temp10 = function () {
                 if (customUploader) {
-                  if (fileType === 'image') {
-                    resizeImage(file).then(function (resizedFile) {
-                      try {
-                        setAttachments(function (prevState) {
-                          return [].concat(prevState, [{
-                            data: file,
-                            cachedUrl: cachedUrl,
-                            upload: false,
-                            type: isMediaAttachment ? fileType : 'file',
-                            attachmentUrl: URL.createObjectURL(resizedFile.blob),
-                            tid: tid,
-                            size: dataFromDb ? dataFromDb.size : file.size,
-                            metadata: dataFromDb && dataFromDb.metadata
-                          }]);
-                        });
-                        return Promise.resolve();
-                      } catch (e) {
-                        return Promise.reject(e);
-                      }
-                    });
-                  } else if (fileType === 'video') {
-                    setAttachments(function (prevState) {
-                      return [].concat(prevState, [{
-                        data: file,
-                        cachedUrl: cachedUrl,
-                        upload: false,
-                        type: isMediaAttachment ? fileType : 'file',
-                        attachmentUrl: URL.createObjectURL(file),
-                        tid: tid,
-                        size: dataFromDb ? dataFromDb.size : file.size,
-                        metadata: dataFromDb && dataFromDb.metadata
-                      }]);
-                    });
-                  } else {
-                    setAttachments(function (prevState) {
-                      return [].concat(prevState, [{
-                        data: file,
-                        cachedUrl: cachedUrl,
-                        upload: false,
-                        type: 'file',
-                        tid: tid,
-                        size: dataFromDb ? dataFromDb.size : file.size,
-                        metadata: dataFromDb && dataFromDb.metadata
-                      }]);
-                    });
-                  }
+                  var _temp2 = function () {
+                    if (fileType === 'image') {
+                      resizeImage(file).then(function (resizedFile) {
+                        try {
+                          return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
+                            var thumbnail = _ref4.thumbnail,
+                              imageWidth = _ref4.imageWidth,
+                              imageHeight = _ref4.imageHeight;
+                            setAttachments(function (prevState) {
+                              return [].concat(prevState, [{
+                                data: file,
+                                cachedUrl: cachedUrl,
+                                upload: false,
+                                type: isMediaAttachment ? fileType : 'file',
+                                attachmentUrl: URL.createObjectURL(resizedFile.blob),
+                                tid: tid,
+                                size: dataFromDb ? dataFromDb.size : file.size,
+                                metadata: _extends({}, dataFromDb && dataFromDb.metadata, {
+                                  szw: imageWidth,
+                                  szh: imageHeight,
+                                  tmb: thumbnail
+                                })
+                              }]);
+                            });
+                          });
+                        } catch (e) {
+                          return Promise.reject(e);
+                        }
+                      });
+                    } else {
+                      var _temp13 = function () {
+                        if (fileType === 'video') {
+                          return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref5) {
+                            var thumb = _ref5.thumb,
+                              width = _ref5.width,
+                              height = _ref5.height;
+                            setAttachments(function (prevState) {
+                              return [].concat(prevState, [{
+                                data: file,
+                                cachedUrl: cachedUrl,
+                                upload: false,
+                                type: isMediaAttachment ? fileType : 'file',
+                                attachmentUrl: URL.createObjectURL(file),
+                                tid: tid,
+                                size: dataFromDb ? dataFromDb.size : file.size,
+                                metadata: _extends({}, dataFromDb && dataFromDb.metadata, {
+                                  szw: width,
+                                  szh: height,
+                                  tmb: thumb
+                                })
+                              }]);
+                            });
+                          });
+                        } else {
+                          setAttachments(function (prevState) {
+                            return [].concat(prevState, [{
+                              data: file,
+                              cachedUrl: cachedUrl,
+                              upload: false,
+                              type: 'file',
+                              tid: tid,
+                              size: dataFromDb ? dataFromDb.size : file.size,
+                              metadata: dataFromDb && dataFromDb.metadata
+                            }]);
+                          });
+                        }
+                      }();
+                      if (_temp13 && _temp13.then) return _temp13.then(function () {});
+                    }
+                  }();
+                  if (_temp2 && _temp2.then) return _temp2.then(function () {});
                 } else {
-                  var _temp9 = function () {
+                  var _temp1 = function () {
                     if (fileType === 'image') {
-                      var _temp5 = function () {
+                      var _temp7 = function () {
                         if (isMediaAttachment) {
-                          var _temp2 = function _temp2() {
+                          var _temp4 = function _temp4() {
                             if (file.type === 'image/gif') {
                               setAttachments(function (prevState) {
                                 return [].concat(prevState, [{
@@ -34877,23 +35002,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             }
                           };
                           var metas = {};
-                          var _temp = function () {
+                          var _temp3 = function () {
                             if (dataFromDb) {
                               metas = dataFromDb.metadata;
                             } else {
-                              return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
-                                var thumbnail = _ref4.thumbnail,
-                                  imageWidth = _ref4.imageWidth,
-                                  imageHeight = _ref4.imageHeight;
+                              return Promise.resolve(createImageThumbnail(file)).then(function (_ref6) {
+                                var thumbnail = _ref6.thumbnail,
+                                  imageWidth = _ref6.imageWidth,
+                                  imageHeight = _ref6.imageHeight;
                                 metas.imageHeight = imageHeight;
                                 metas.imageWidth = imageWidth;
                                 metas.thumbnail = thumbnail;
                               });
                             }
                           }();
-                          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+                          return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
                         } else {
-                          var _temp4 = function _temp4() {
+                          var _temp6 = function _temp6() {
                             setAttachments(function (prevState) {
                               return [].concat(prevState, [{
                                 data: file,
@@ -34910,24 +35035,24 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             });
                           };
                           var _metas = {};
-                          var _temp3 = function () {
+                          var _temp5 = function () {
                             if (dataFromDb) {
                               _metas = dataFromDb.metadata;
                             } else {
-                              return Promise.resolve(createImageThumbnail(file, undefined, 50, 50)).then(function (_ref5) {
-                                var thumbnail = _ref5.thumbnail;
+                              return Promise.resolve(createImageThumbnail(file, undefined, 50, 50)).then(function (_ref7) {
+                                var thumbnail = _ref7.thumbnail;
                                 _metas.thumbnail = thumbnail;
                               });
                             }
                           }();
-                          return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+                          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
                         }
                       }();
-                      if (_temp5 && _temp5.then) return _temp5.then(function () {});
+                      if (_temp7 && _temp7.then) return _temp7.then(function () {});
                     } else {
-                      var _temp11 = function () {
+                      var _temp14 = function () {
                         if (fileType === 'video') {
-                          var _temp7 = function _temp7() {
+                          var _temp9 = function _temp9() {
                             setAttachments(function (prevState) {
                               return [].concat(prevState, [{
                                 data: file,
@@ -34942,14 +35067,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             });
                           };
                           var metas = {};
-                          var _temp6 = function () {
+                          var _temp8 = function () {
                             if (dataFromDb) {
                               metas = dataFromDb.metadata;
                             } else {
-                              return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref6) {
-                                var thumb = _ref6.thumb,
-                                  width = _ref6.width,
-                                  height = _ref6.height;
+                              return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref8) {
+                                var thumb = _ref8.thumb,
+                                  width = _ref8.width,
+                                  height = _ref8.height;
                                 metas.tmb = thumb;
                                 metas.width = width;
                                 metas.height = height;
@@ -34957,7 +35082,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                               });
                             }
                           }();
-                          return _temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6);
+                          return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
                         } else {
                           setAttachments(function (prevState) {
                             return [].concat(prevState, [{
@@ -34972,23 +35097,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           });
                         }
                       }();
-                      if (_temp11 && _temp11.then) return _temp11.then(function () {});
+                      if (_temp14 && _temp14.then) return _temp14.then(function () {});
                     }
                   }();
-                  if (_temp9 && _temp9.then) return _temp9.then(function () {});
+                  if (_temp1 && _temp1.then) return _temp1.then(function () {});
                 }
               }();
-              if (_temp0 && _temp0.then) return _temp0.then(function () {});
+              if (_temp10 && _temp10.then) return _temp10.then(function () {});
             }
             var dataFromDb;
-            var _temp1 = _catch(function () {
+            var _temp11 = _catch(function () {
               return Promise.resolve(_getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
                 dataFromDb = _getDataFromDB;
               });
             }, function (e) {
               log.error('error in get data from db . . . . ', e);
             });
-            return _temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1);
+            return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
           });
         } catch (e) {
           return Promise.reject(e);
@@ -35635,10 +35760,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     showRecording: showRecording
   }))))))))));
 };
-var SendMessageWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (props) {
+var SendMessageWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 15;\n"])), function (props) {
   return props.backgroundColor;
 });
-var Container$k = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n\n  & span.rdw-suggestion-dropdown {\n    position: absolute;\n    bottom: 100%;\n    height: 160px;\n    min-width: 150px;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    padding: 6px 12px;\n    border: 1px solid #ccc;\n    background: #fff;\n    z-index: 99;\n  }\n\n  & .text_formatting_toolbar {\n    display: ", ";\n    position: fixed;\n    top: ", ";\n    left: ", ";\n  }\n\n  & .rdw-suggestion-option-active {\n    background-color: rgb(243, 245, 248);\n  }\n\n  & .custom_editor {\n    cursor: text;\n\n    & .rdw-mention-link {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var Container$k = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 15;\n\n  & span.rdw-suggestion-dropdown {\n    position: absolute;\n    bottom: 100%;\n    height: 160px;\n    min-width: 150px;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    padding: 6px 12px;\n    border: 1px solid #ccc;\n    background: #fff;\n    z-index: 99;\n  }\n\n  & .text_formatting_toolbar {\n    display: ", ";\n    position: fixed;\n    top: ", ";\n    left: ", ";\n  }\n\n  & .rdw-suggestion-option-active {\n    background-color: rgb(243, 245, 248);\n  }\n\n  & .custom_editor {\n    cursor: text;\n\n    & .rdw-mention-link {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin || '30px 0 16px';
 }, function (props) {
   return props.border || '';
@@ -35750,7 +35875,7 @@ var TypingIndicatorCont = styled__default.div(_templateObject18$2 || (_templateO
 var TypingFrom = styled__default.h5(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  margin: 0 4px 0 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var sizeAnimation = styled.keyframes(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  50% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  100% {\n    width: 6px;\n    height: 6px;\n    opacity: 1;\n  }\n"])));
+var sizeAnimation = styled.keyframes(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  50% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  100% {\n    width: 6px;\n    height: 6px;\n    opacity: 1;\n  }\n"])));
 var DotOne = styled__default.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose([""])));
 var DotTwo = styled__default.span(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose([""])));
 var DotThree = styled__default.span(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose([""])));
@@ -38713,7 +38838,9 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
     unreadCountWidth = _ref.unreadCountWidth,
     unreadCountHeight = _ref.unreadCountHeight,
     unreadCountFontSize = _ref.unreadCountFontSize,
-    unreadCountTextColor = _ref.unreadCountTextColor;
+    unreadCountTextColor = _ref.unreadCountTextColor,
+    _ref$animateFrom = _ref.animateFrom,
+    animateFrom = _ref$animateFrom === void 0 ? 'bottom' : _ref$animateFrom;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS];
@@ -38736,12 +38863,8 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
         if (repliedMessage) {
           var scrollRef = document.getElementById('scrollableDiv');
           if (scrollRef) {
-            scrollRef.scrollTop = repliedMessage.offsetTop - scrollRef.offsetHeight / 2;
+            scrollRef.scrollTop = repliedMessage.offsetTop;
           }
-          repliedMessage.classList.add('highlight');
-          setTimeout(function () {
-            repliedMessage.classList.remove('highlight');
-          }, 1000);
         }
       } else {
         dispatch(getMessagesAC(channel, undefined, messageId));
@@ -38751,7 +38874,9 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
       return Promise.reject(e);
     }
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollToNewMessageButton && (/*#__PURE__*/React__default.createElement(BottomButton, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BottomButton, {
+    show: !!showScrollToNewMessageButton,
+    animateFrom: animateFrom,
     theme: theme,
     width: buttonWidth,
     height: buttonHeight,
@@ -38771,12 +38896,16 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
     fontSize: unreadCountFontSize,
     backgroundColor: accentColor,
     isMuted: channel.muted
-  }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgChevronDown, null))));
+  }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgChevronDown, null)));
 };
-var BottomButton = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
-  return props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) + "px";
+var BottomButton = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  ", ";\n\n  ", ";\n\n  ", ";\n  right: ", "px;\n\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
+  return props.animateFrom === 'bottom' && "bottom: " + (props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) - 130) + "px";
 }, function (props) {
-  return (props.rightPosition === undefined ? 16 : props.rightPosition) + "px";
+  return props.animateFrom === 'right' && "right: " + (props.rightPosition === undefined ? 16 : props.rightPosition - 100) + "px";
+}, function (props) {
+  return props.show && "bottom: " + (props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition)) + "px";
+}, function (props) {
+  return props.rightPosition === undefined ? 16 : props.rightPosition;
 }, function (props) {
   return props.backgroundColor;
 });
@@ -38838,7 +38967,9 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     unreadCountWidth = _ref.unreadCountWidth,
     unreadCountHeight = _ref.unreadCountHeight,
     unreadCountFontSize = _ref.unreadCountFontSize,
-    unreadCountTextColor = _ref.unreadCountTextColor;
+    unreadCountTextColor = _ref.unreadCountTextColor,
+    _ref$animateFrom = _ref.animateFrom,
+    animateFrom = _ref$animateFrom === void 0 ? 'bottom' : _ref$animateFrom;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS];
@@ -38848,19 +38979,41 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
   var sendMessageInputHeight = reactRedux.useSelector(sendMessageInputHeightSelector);
   var showScrollToNewMessageButton = reactRedux.useSelector(showScrollToNewMessageButtonSelector);
   var messages = reactRedux.useSelector(activeChannelMessagesSelector) || [];
-  var handleScrollToBottom = function handleScrollToBottom() {
-    if (channel.newMentionCount >= 3 && (!channel.mentionsIds || channel.mentionsIds.length < 3)) {
-      dispatch(getChannelMentionsAC(channel.id));
-    }
-    if (channel.mentionsIds && channel.mentionsIds.length) {
-      handleScrollToRepliedMessage(channel.mentionsIds[0]);
-      dispatch(markMessagesAsReadAC(channel.id, [channel.mentionsIds[0]]));
+  var isMessageRead = React.useCallback(function (messageId) {
+    var _message$userMarkers;
+    var message = messages.find(function (msg) {
+      return msg.id === messageId;
+    });
+    return message === null || message === void 0 ? void 0 : (_message$userMarkers = message.userMarkers) === null || _message$userMarkers === void 0 ? void 0 : _message$userMarkers.find(function (marker) {
+      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
+    });
+  }, [messages]);
+  var _handleScrollToMentions = function handleScrollToMentions(mentionsIds) {
+    var newMentionsIds = [].concat(mentionsIds);
+    var isRead = isMessageRead(mentionsIds[0]);
+    if (!isRead) {
+      handleScrollToMentionedMessage(mentionsIds[0]);
+      dispatch(markMessagesAsReadAC(channel.id, [mentionsIds[0]]));
+      newMentionsIds = mentionsIds.slice(1);
       dispatch(updateChannelDataAC(channel.id, {
-        mentionsIds: channel.mentionsIds.slice(1)
+        mentionsIds: newMentionsIds
       }));
+    } else {
+      newMentionsIds = mentionsIds.slice(1);
+      if (newMentionsIds.length > 0) {
+        _handleScrollToMentions(newMentionsIds);
+      } else {
+        dispatch(updateChannelDataAC(channel.id, {
+          mentionsIds: []
+        }));
+        return;
+      }
+    }
+    if (channel.newMentionCount >= 3 && (!newMentionsIds || newMentionsIds.length < 3)) {
+      dispatch(getChannelMentionsAC(channel.id));
     }
   };
-  var handleScrollToRepliedMessage = function handleScrollToRepliedMessage(messageId) {
+  var handleScrollToMentionedMessage = function handleScrollToMentionedMessage(messageId) {
     try {
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
@@ -38869,12 +39022,38 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
         if (repliedMessage) {
           var scrollRef = document.getElementById('scrollableDiv');
           if (scrollRef) {
-            scrollRef.scrollTop = repliedMessage.offsetTop - scrollRef.offsetHeight / 2;
+            var handleScrollEnd = function handleScrollEnd() {
+              dispatch(setScrollToMentionedMessageAC(false));
+            };
+            var _handleScrollEndEvent = function handleScrollEndEvent() {
+              scrollRef.removeEventListener('scrollend', _handleScrollEndEvent);
+              handleScrollEnd();
+            };
+            var scrollTimeout;
+            var _handleScrollEvent = function handleScrollEvent() {
+              clearTimeout(scrollTimeout);
+              scrollTimeout = setTimeout(function () {
+                scrollRef.removeEventListener('scroll', _handleScrollEvent);
+                handleScrollEnd();
+              }, 150);
+            };
+            if ('onscrollend' in scrollRef) {
+              ;
+              scrollRef.addEventListener('scrollend', _handleScrollEndEvent);
+            } else {
+              ;
+              scrollRef.addEventListener('scroll', _handleScrollEvent);
+            }
+            dispatch(setScrollToMentionedMessageAC(true));
+            scrollRef.scrollTo({
+              top: repliedMessage.offsetTop - scrollRef.offsetHeight / 2,
+              behavior: 'smooth'
+            });
           }
           repliedMessage.classList.add('highlight');
           setTimeout(function () {
             repliedMessage.classList.remove('highlight');
-          }, 1000);
+          }, 1500);
         }
       } else {
         dispatch(getMessagesAC(channel, undefined, messageId));
@@ -38889,8 +39068,10 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
       dispatch(getChannelMentionsAC(channel.id));
     }
   }, [channel.newMentionCount]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, channel.newMentionCount ? (/*#__PURE__*/React__default.createElement(BottomButton$1, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BottomButton$1, {
     theme: theme,
+    animateFrom: animateFrom,
+    show: !!channel.newMentionCount,
     width: buttonWidth,
     height: buttonHeight,
     border: buttonBorder,
@@ -38898,7 +39079,9 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     backgroundColor: buttonBackgroundColor || backgroundSections,
     hoverBackgroundColor: buttonHoverBackgroundColor,
     shadow: buttonShadow,
-    onClick: handleScrollToBottom,
+    onClick: function onClick() {
+      return _handleScrollToMentions(channel.mentionsIds || []);
+    },
     bottomOffset: sendMessageInputHeight,
     bottomPosition: bottomPosition,
     showsUnreadMentionsButton: !!showScrollToNewMessageButton,
@@ -38910,10 +39093,14 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     fontSize: unreadCountFontSize,
     backgroundColor: accentColor,
     isMuted: channel.muted
-  }, channel.newMentionCount ? channel.newMentionCount > 99 ? '99+' : channel.newMentionCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgMention, null))) : null);
+  }, channel.newMentionCount ? channel.newMentionCount > 99 ? '99+' : channel.newMentionCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgMention, null)));
 };
-var BottomButton$1 = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
-  return props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) + (props.showsUnreadMentionsButton ? 60 : 0) + "px";
+var BottomButton$1 = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  ", ";\n\n  ", ";\n\n  ", ";\n  right: ", ";\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
+  return props.animateFrom === 'bottom' && "bottom: " + (props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) + (props.showsUnreadMentionsButton ? 60 : 0) - 180) + "px";
+}, function (props) {
+  return props.animateFrom === 'right' && "right: " + (props.rightPosition === undefined ? 16 : props.rightPosition - 100) + "px";
+}, function (props) {
+  return props.show && "bottom: " + (props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) + (props.showsUnreadMentionsButton ? 60 : 0)) + "px";
 }, function (props) {
   return (props.rightPosition === undefined ? 16 : props.rightPosition) + "px";
 }, function (props) {