sceyt-chat-react-uikit 1.6.9-beta.17 → 1.6.9-beta.19

package/index.js

@@ -10075,18 +10075,29 @@ function updateMessageOnMap(channelId, updatedMessage) {
       }
     }
   }
+  var updatedMessageData = null;
   if (messagesMap[channelId]) {
-    messagesMap[channelId] = messagesMap[channelId].map(function (mes) {
+    messagesMap[channelId].map(function (mes) {
       if (mes.tid === updatedMessage.messageId || mes.id === updatedMessage.messageId) {
         if (updatedMessage.params.state === MESSAGE_STATUS.DELETE) {
-          return _extends({}, updatedMessage.params);
+          updatedMessageData = _extends({}, updatedMessage.params);
+          return updatedMessageData;
         } else {
-          return _extends({}, mes, updatedMessage.params);
+          var _updatedMessage$param;
+          updatedMessageData = _extends({}, mes, updatedMessage.params, {
+            attachments: [].concat(mes.attachments, ((_updatedMessage$param = updatedMessage.params) === null || _updatedMessage$param === void 0 ? void 0 : _updatedMessage$param.attachments) || []).filter(function (att, index, self) {
+              return index === self.findIndex(function (t) {
+                return t.url === att.url && t.type === att.type && t.name === att.name;
+              });
+            })
+          });
+          return updatedMessage;
         }
       }
       return mes;
     });
   }
+  return updatedMessageData;
 }
 function addReactionToMessageOnMap(channelId, message, reaction, isSelf) {
   if (messagesMap[channelId]) {
@@ -10330,7 +10341,6 @@ var messageSlice = createSlice({
   reducers: {
     addMessage: function addMessage(state, action) {
       var message = action.payload.message;
-      log.info('addMessage ... ', message);
       state.activeChannelMessages.push(message);
     },
     deleteMessageFromList: function deleteMessageFromList(state, action) {
@@ -10448,11 +10458,48 @@ var messageSlice = createSlice({
         state.activeChannelMessages.push(params);
       }
     },
-    addReactionToMessage: function addReactionToMessage(state, action) {
+    updateMessageAttachment: function updateMessageAttachment(state, action) {
       var _action$payload4 = action.payload,
-        message = _action$payload4.message,
-        reaction = _action$payload4.reaction,
-        isSelf = _action$payload4.isSelf;
+        url = _action$payload4.url,
+        messageId = _action$payload4.messageId,
+        params = _action$payload4.params;
+      state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
+        if (message.id === messageId) {
+          for (var index = 0; index < message.attachments.length; index++) {
+            var attachment = message.attachments[index];
+            if (attachment.url === url) {
+              message.attachments[index] = _extends({}, attachment, params);
+            }
+          }
+        }
+        if (message.attachments.length) {
+          var detachedAttachments = message.attachments.map(function (att) {
+            var _att$user, _att$user2;
+            return _extends({}, att, {
+              user: _extends({}, att.user, {
+                metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
+                presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
+              })
+            });
+          });
+          updateMessageOnAllMessages(messageId, {
+            attachments: detachedAttachments
+          });
+          updateMessageOnMap(message.channelId, {
+            messageId: messageId,
+            params: {
+              attachments: detachedAttachments
+            }
+          });
+        }
+        return message;
+      });
+    },
+    addReactionToMessage: function addReactionToMessage(state, action) {
+      var _action$payload5 = action.payload,
+        message = _action$payload5.message,
+        reaction = _action$payload5.reaction,
+        isSelf = _action$payload5.isSelf;
       state.activeChannelMessages = state.activeChannelMessages.map(function (msg) {
         if (msg.id === message.id) {
           var slfReactions = [].concat(msg.userReactions);
@@ -10472,10 +10519,10 @@ var messageSlice = createSlice({
       });
     },
     deleteReactionFromMessage: function deleteReactionFromMessage(state, action) {
-      var _action$payload5 = action.payload,
-        reaction = _action$payload5.reaction,
-        message = _action$payload5.message,
-        isSelf = _action$payload5.isSelf;
+      var _action$payload6 = action.payload,
+        reaction = _action$payload6.reaction,
+        message = _action$payload6.message,
+        isSelf = _action$payload6.isSelf;
       state.activeChannelMessages = state.activeChannelMessages.map(function (msg) {
         if (msg.id === message.id) {
           var userReactions = msg.userReactions;
@@ -10524,9 +10571,9 @@ var messageSlice = createSlice({
       (_state$activeTabAttac = state.activeTabAttachments).push.apply(_state$activeTabAttac, action.payload.attachments);
     },
     addAttachmentsForPopup: function addAttachmentsForPopup(state, action) {
-      var _action$payload6 = action.payload,
-        attachments = _action$payload6.attachments,
-        direction = _action$payload6.direction;
+      var _action$payload7 = action.payload,
+        attachments = _action$payload7.attachments,
+        direction = _action$payload7.direction;
       if (direction === 'prev') {
         var _state$attachmentsFor;
         (_state$attachmentsFor = state.attachmentsForPopup).push.apply(_state$attachmentsFor, attachments);
@@ -10542,11 +10589,11 @@ var messageSlice = createSlice({
       state.attachmentForPopupHasNext = action.payload.hasPrev;
     },
     updateUploadProgress: function updateUploadProgress(state, action) {
-      var _action$payload7 = action.payload,
-        uploaded = _action$payload7.uploaded,
-        total = _action$payload7.total,
-        attachmentId = _action$payload7.attachmentId,
-        progress = _action$payload7.progress;
+      var _action$payload8 = action.payload,
+        uploaded = _action$payload8.uploaded,
+        total = _action$payload8.total,
+        attachmentId = _action$payload8.attachmentId,
+        progress = _action$payload8.progress;
       var updateData = {
         uploaded: uploaded,
         total: total,
@@ -10570,23 +10617,23 @@ var messageSlice = createSlice({
       state.messageForReply = action.payload.message;
     },
     uploadAttachmentCompilation: function uploadAttachmentCompilation(state, action) {
-      var _action$payload8 = action.payload,
-        attachmentUploadingState = _action$payload8.attachmentUploadingState,
-        attachmentId = _action$payload8.attachmentId;
+      var _action$payload9 = action.payload,
+        attachmentUploadingState = _action$payload9.attachmentUploadingState,
+        attachmentId = _action$payload9.attachmentId;
       state.attachmentsUploadingState[attachmentId] = attachmentUploadingState;
     },
     setReactionsList: function setReactionsList(state, action) {
-      var _action$payload9 = action.payload,
-        reactions = _action$payload9.reactions,
-        hasNext = _action$payload9.hasNext;
+      var _action$payload0 = action.payload,
+        reactions = _action$payload0.reactions,
+        hasNext = _action$payload0.hasNext;
       state.reactionsHasNext = hasNext;
       state.reactionsList = [].concat(reactions);
     },
     addReactionsToList: function addReactionsToList(state, action) {
       var _state$reactionsList;
-      var _action$payload0 = action.payload,
-        reactions = _action$payload0.reactions,
-        hasNext = _action$payload0.hasNext;
+      var _action$payload1 = action.payload,
+        reactions = _action$payload1.reactions,
+        hasNext = _action$payload1.hasNext;
       state.reactionsHasNext = hasNext;
       (_state$reactionsList = state.reactionsList).push.apply(_state$reactionsList, reactions);
     },
@@ -10647,6 +10694,7 @@ var _messageSlice$actions = messageSlice.actions,
   addMessages = _messageSlice$actions.addMessages,
   updateMessagesStatus = _messageSlice$actions.updateMessagesStatus,
   updateMessage = _messageSlice$actions.updateMessage,
+  updateMessageAttachment = _messageSlice$actions.updateMessageAttachment,
   addReactionToMessage = _messageSlice$actions.addReactionToMessage,
   deleteReactionFromMessage = _messageSlice$actions.deleteReactionFromMessage,
   setHasPrevMessages = _messageSlice$actions.setHasPrevMessages,
@@ -11738,6 +11786,13 @@ function setMessagesHasNextAC(hasNext) {
     hasNext: hasNext
   });
 }
+function setUpdateMessageAttachmentAC(url, messageId, params) {
+  return updateMessageAttachment({
+    url: url,
+    messageId: messageId,
+    params: params
+  });
+}
 function updateMessageAC(messageId, params, addIfNotExists) {
   return updateMessage({
     messageId: messageId,
@@ -17153,12 +17208,6 @@ var addPendingMessage = function addPendingMessage(message, messageCopy, channel
     addMessageToMap(channel.id, messageToAdd);
     addAllMessages([messageToAdd], MESSAGE_LOAD_DIRECTION.NEXT);
     setPendingMessages(channel.id, [messageToAdd]);
-    var hasNextMessages = store.getState().MessageReducer.messagesHasNext;
-    var activeChannelMessages = store.getState().MessageReducer.activeChannelMessages;
-    var isLatestMessageInChannelMessages = activeChannelMessages[activeChannelMessages.length - 1].id === channel.lastMessage.id;
-    if (hasNextMessages || !isLatestMessageInChannelMessages) {
-      store.dispatch(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
-    }
     store.dispatch(scrollToNewMessageAC(true));
     store.dispatch(addMessageAC(messageToAdd));
     return Promise.resolve();
@@ -18332,7 +18381,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, pendingMessages, _messagesMap, filteredPendingMessages, index, mes, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, index, mes, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -18342,7 +18391,7 @@ function getMessagesQuery(action) {
       case 1:
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 47;
+          _context9.n = 48;
           break;
         }
         SceytChatClient = getClient();
@@ -18428,7 +18477,7 @@ function getMessagesQuery(action) {
         _context9.n = 12;
         return effects.put(setScrollToMessagesAC(messageId, highlight));
       case 12:
-        _context9.n = 44;
+        _context9.n = 45;
         break;
       case 13:
         if (!messageId) {
@@ -18494,7 +18543,7 @@ function getMessagesQuery(action) {
         _context9.n = 24;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 24:
-        _context9.n = 44;
+        _context9.n = 45;
         break;
       case 25:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
@@ -18566,7 +18615,7 @@ function getMessagesQuery(action) {
         _context9.n = 37;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 37:
-        _context9.n = 44;
+        _context9.n = 45;
         break;
       case 38:
         setAllMessages([]);
@@ -18595,22 +18644,29 @@ function getMessagesQuery(action) {
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
       case 42:
+        updatedMessages = [];
         result.messages.forEach(function (msg) {
-          updateMessageOnMap(channel.id, {
+          var updatedMessage = updateMessageOnMap(channel.id, {
             messageId: msg.id,
             params: msg
           });
-          updateMessageOnAllMessages(msg.id, msg);
+          updateMessageOnAllMessages(msg.id, updatedMessage || msg);
+          updatedMessages.push(updatedMessage || msg);
         });
+        setMessagesToMap(channel.id, updatedMessages);
+        setAllMessages([].concat(updatedMessages));
         _context9.n = 43;
-        return effects.put(setMessagesHasPrevAC(result.hasNext));
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 43:
         _context9.n = 44;
-        return effects.put(setMessagesHasNextAC(false));
+        return effects.put(setMessagesHasPrevAC(result.hasNext));
       case 44:
+        _context9.n = 45;
+        return effects.put(setMessagesHasNextAC(false));
+      case 45:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18620,40 +18676,40 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 45;
+        _context9.n = 46;
         return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
-      case 45:
+      case 46:
         for (index = 0; index < filteredPendingMessages.length; index++) {
           mes = filteredPendingMessages[index];
           removePendingMessageFromMap(channel === null || channel === void 0 ? void 0 : channel.id, mes.tid || mes.id);
         }
-      case 46:
-        _context9.n = 48;
-        break;
       case 47:
+        _context9.n = 49;
+        break;
+      case 48:
         if (!channel.isMockChannel) {
-          _context9.n = 48;
+          _context9.n = 49;
           break;
         }
-        _context9.n = 48;
+        _context9.n = 49;
         return effects.put(setMessagesAC([]));
-      case 48:
-        _context9.n = 50;
-        break;
       case 49:
-        _context9.p = 49;
-        _t9 = _context9.v;
-        log.error('error in message query', _t9);
+        _context9.n = 51;
+        break;
       case 50:
         _context9.p = 50;
-        _context9.n = 51;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        _t9 = _context9.v;
+        log.error('error in message query', _t9);
       case 51:
-        return _context9.f(50);
+        _context9.p = 51;
+        _context9.n = 52;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 52:
+        return _context9.f(51);
+      case 53:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[0, 49, 50, 52]]);
+  }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t0;
@@ -20895,7 +20951,15 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
     color: textSecondary
-  }, audioRecording && /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), draftMessageText)) : lastMessage.state === MESSAGE_STATUS.DELETE ? 'Message was deleted.' : lastMessage.type === 'system' ? (lastMessage.user && (lastMessage.user.id === user.id ? 'You ' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts))) + " " + (lastMessage.body === 'CC' ? 'created this channel' : lastMessage.body === 'CG' ? 'created this group' : lastMessage.body === 'AM' ? " added " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
+  }, audioRecording && /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), MessageTextFormat({
+    text: draftMessageText,
+    message: lastMessage,
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    isLastMessage: true,
+    accentColor: accentColor,
+    textSecondary: textSecondary
+  }))) : lastMessage.state === MESSAGE_STATUS.DELETE ? 'Message was deleted.' : lastMessage.type === 'system' ? (lastMessage.user && (lastMessage.user.id === user.id ? 'You ' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts))) + " " + (lastMessage.body === 'CC' ? 'created this channel' : lastMessage.body === 'CG' ? 'created this group' : lastMessage.body === 'AM' ? " added " + (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 === '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);
@@ -20965,11 +21029,14 @@ var Channel = function Channel(_ref3) {
   var _useState = React.useState(),
     draftMessageText = _useState[0],
     setDraftMessageText = _useState[1];
+  var _useState2 = React.useState(),
+    draftMessage = _useState2[0],
+    setDraftMessage = _useState2[1];
   var lastMessage = channel.lastReactedMessage || channel.lastMessage;
   var lastMessageMetas = lastMessage && lastMessage.type === 'system' && lastMessage.metadata && (isJSON(lastMessage.metadata) ? JSON.parse(lastMessage.metadata) : lastMessage.metadata);
-  var _useState2 = React.useState(0),
-    statusWidth = _useState2[0],
-    setStatusWidth = _useState2[1];
+  var _useState3 = React.useState(0),
+    statusWidth = _useState3[0],
+    setStatusWidth = _useState3[1];
   var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? 'Me' : '');
   var handleChangeActiveChannel = function handleChangeActiveChannel(chan) {
     if (activeChannel.id !== chan.id) {
@@ -20993,17 +21060,25 @@ var Channel = function Channel(_ref3) {
       if (channelDraftMessage || draftAudioRecording) {
         if (channelDraftMessage) {
           setDraftMessageText(channelDraftMessage.text);
+          setDraftMessage({
+            mentionedUsers: channelDraftMessage.mentionedMembers,
+            body: channelDraftMessage.text,
+            bodyAttributes: channelDraftMessage.bodyAttributes
+          });
         } else if (draftAudioRecording) {
           setDraftMessageText('Voice');
+          setDraftMessage(undefined);
         }
       } else if (draftMessageText) {
         setDraftMessageText(undefined);
+        setDraftMessage(undefined);
       }
     }
   }, [activeChannel.id]);
   React.useEffect(function () {
     if (channelDraftIsRemoved && channelDraftIsRemoved === channel.id) {
       setDraftMessageText(undefined);
+      setDraftMessage(undefined);
       dispatch(setChannelDraftMessageIsRemovedAC());
     }
   }, [channelDraftIsRemoved]);
@@ -21050,7 +21125,7 @@ var Channel = function Channel(_ref3) {
       textPrimary: textPrimary,
       textSecondary: textSecondary,
       draftMessageText: draftMessageText,
-      lastMessage: lastMessage,
+      lastMessage: draftMessage || lastMessage,
       isDirectChannel: isDirectChannel
     });
   }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
@@ -23129,7 +23204,8 @@ var ChannelList = function ChannelList(_ref) {
     channelAvatarSize = _ref.channelAvatarSize,
     channelAvatarTextSize = _ref.channelAvatarTextSize,
     searchChannelInputFontSize = _ref.searchChannelInputFontSize,
-    searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize;
+    searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize,
+    searchChannelsPadding = _ref.searchChannelsPadding;
   var _useColor = useColors(),
     background = _useColor[THEME_COLORS.BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -23366,7 +23442,8 @@ var ChannelList = function ChannelList(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChannelListHeader, {
     withCustomList: !!List,
     maxWidth: channelListRef.current && ((_channelListRef$curre2 = channelListRef.current) === null || _channelListRef$curre2 === void 0 ? void 0 : _channelListRef$curre2.clientWidth) || 0,
-    borderColor: borderColor
+    borderColor: borderColor,
+    padding: searchChannelsPadding
   }, Profile, showSearch && searchChannelsPosition === 'inline' ? (/*#__PURE__*/React__default.createElement(ChannelSearch, {
     inline: true,
     borderRadius: searchInputBorderRadius,
@@ -23689,8 +23766,10 @@ 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  padding-left: 22px;\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: ", ";\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.padding || '12px';
 }, function (props) {
   return props.withoutProfile && '52px';
 }, function (props) {
@@ -29227,7 +29306,15 @@ var Attachment = function Attachment(_ref) {
     if (downloadIsCancelled) {
       setDownloadIsCancelled(false);
       if (customDownloader) {
-        customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
+        customDownloader(attachment.url, false, function (progress) {
+          var loadedRes = progress.loaded && progress.loaded / progress.total;
+          var uploadPercent = loadedRes && loadedRes * 100;
+          setSizeProgress({
+            loaded: progress.loaded || 0,
+            total: progress.total || 0
+          });
+          setProgress(uploadPercent);
+        }, messageType).then(function (url) {
           downloadImage(url);
         });
       } else {
@@ -29355,23 +29442,35 @@ var Attachment = function Attachment(_ref) {
     }
   }, [attachmentUrl]);
   React.useEffect(function () {
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
+    if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
       getAttachmentUrlFromCache(attachment.url).then(function (cachedUrl) {
         try {
           if (attachment.type === 'image' && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
+              dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
+                attachmentUrl: cachedUrl
+              }));
               setIsCached(true);
             } else {
               setIsCached(false);
               setDownloadingFile(true);
               if (customDownloader) {
-                customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
+                customDownloader(attachment.url, false, function (progress) {
+                  var loadedRes = progress.loaded && progress.loaded / progress.total;
+                  var uploadPercent = loadedRes && loadedRes * 100;
+                  setSizeProgress({
+                    loaded: progress.loaded || 0,
+                    total: progress.total || 0
+                  });
+                  setProgress(uploadPercent);
+                }, messageType).then(function (url) {
                   try {
                     downloadImage(url);
                     return Promise.resolve(fetch(url)).then(function (response) {
                       setAttachmentToCache(attachment.url, response);
                       setIsCached(true);
+                      setDownloadingFile(false);
                     });
                   } catch (e) {
                     return Promise.reject(e);
@@ -29410,7 +29509,15 @@ var Attachment = function Attachment(_ref) {
         log.info('error on get attachment url from cache. .. ', e);
         if (customDownloader) {
           setDownloadingFile(true);
-          customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
+          customDownloader(attachment.url, true, function (progress) {
+            var loadedRes = progress.loaded && progress.loaded / progress.total;
+            var uploadPercent = loadedRes && loadedRes * 100;
+            setSizeProgress({
+              loaded: progress.loaded || 0,
+              total: progress.total || 0
+            });
+            setProgress(uploadPercent);
+          }, messageType).then(function (url) {
             try {
               return Promise.resolve(fetch(url)).then(function (response) {
                 setAttachmentToCache(attachment.url, response);
@@ -29515,7 +29622,7 @@ var Attachment = function Attachment(_ref) {
     imageMinWidth: imageMinWidth,
     withPrefix: withPrefix,
     borderColor: borderColor
-  }, /*#__PURE__*/React__default.createElement(UploadPercent, {
+  }, !isPreview && (isInUploadingState || downloadingFile) && sizeProgress && sizeProgress.loaded < sizeProgress.total && (/*#__PURE__*/React__default.createElement(UploadPercent, {
     isRepliedMessage: isRepliedMessage,
     isDetailsView: isDetailsView,
     backgroundColor: overlayBackground2
@@ -29545,7 +29652,7 @@ var Attachment = function Attachment(_ref) {
     }
   })), sizeProgress && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
-  }, bytesToSize(sizeProgress.loaded, 1), " / ", bytesToSize(sizeProgress.total, 1)))))))) : null, isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
+  }, bytesToSize(sizeProgress.loaded, 1), " / ", bytesToSize(sizeProgress.total, 1))))))))) : null, isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
     backgroundColor: background,
     color: iconInactive,
     onClick: function onClick() {
@@ -30985,25 +31092,33 @@ var OGMetadata = function OGMetadata(_ref) {
   }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
   var showOGMetadata = React.useMemo(function () {
     var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
-    return state === 'deleted' || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) === '' || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) === '' || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) === '' || !metadata;
+    return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
   }, [state, metadata]);
-  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, null, /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
+    showOGMetadata: !!showOGMetadata
+  }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: showOGMetadata
+    showOGMetadata: !!showOGMetadata
   }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url ? /*#__PURE__*/React__default.createElement(Img, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
     alt: 'OG metadata image'
-  }) : null), showOGMetadata ? null : (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url ? /*#__PURE__*/React__default.createElement(Favicon, {
+  }) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url ? /*#__PURE__*/React__default.createElement(Favicon, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null))));
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
 };
-var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: 0.8rem;\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])));
-var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 200px;\n  width: 100%;\n  height: 200px;\n  margin: 0 auto;\n  padding: 0.3rem;\n  height: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref2) {
+var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var showOGMetadata = _ref2.showOGMetadata;
-  return !showOGMetadata ? '200px' : '0';
+  return showOGMetadata ? '0.8rem' : '0';
+});
+var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 200px;\n  width: 100%;\n  margin: 0 auto;\n  padding: ", ";\n  height: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref3) {
+  var showOGMetadata = _ref3.showOGMetadata;
+  return showOGMetadata ? '0.3rem' : '0';
+}, function (_ref4) {
+  var showOGMetadata = _ref4.showOGMetadata;
+  return showOGMetadata ? '200px' : '0';
 });
 var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  width: 80%;\n  padding: 0.5rem;\n  margin: 0;\n"])));
 var Url = styled__default.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n"])));
@@ -32939,7 +33054,7 @@ var MessageList = function MessageList(_ref2) {
         clearVisibleMessagesMap();
       }
       if (channel) {
-        dispatch(getMessagesAC(channel, true, undefined, undefined, true));
+        dispatch(getMessagesAC(channel, undefined, undefined, undefined, true));
       }
       if (channel.id) {
         if (channel.newMessageCount && channel.newMessageCount > 0) {
@@ -35863,11 +35978,11 @@ var AudioRecord = function AudioRecord(_ref) {
       setShowRecording(false);
       setStartRecording(false);
       setPlayAudio(false);
-      setCurrentTime(0);
       var audioRecording = getAudioRecordingFromMap(channelId);
       setRecordedFile(audioRecording || null);
       setRecordingIsReadyToPlay(!!audioRecording);
     }
+    setCurrentTime(0);
     handleStopRecording();
     setCurrentChannelId(channelId);
   }, [channelId]);
@@ -37099,14 +37214,16 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           text: messageText,
           mentionedMembers: draftMessage.mentionedMembers,
           messageForReply: messageForReply,
-          editorState: realEditorState
+          editorState: realEditorState,
+          bodyAttributes: messageBodyAttributes
         });
       } else {
         setDraftMessageToMap(activeChannel.id, {
           text: messageText,
           mentionedMembers: mentionedMembers,
           messageForReply: messageForReply,
-          editorState: realEditorState
+          editorState: realEditorState,
+          bodyAttributes: messageBodyAttributes
         });
       }
       if (!listenerIsAdded) {
@@ -37127,7 +37244,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedMembers: mentionedMembers,
-        messageForReply: messageForReply
+        messageForReply: messageForReply,
+        bodyAttributes: messageBodyAttributes
       });
     }
   }, [mentionedMembers]);
@@ -37181,7 +37299,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedMembers: mentionedMembers,
-        messageForReply: messageForReply
+        messageForReply: messageForReply,
+        bodyAttributes: messageBodyAttributes
       });
     }
     if (messageForReply && messageToEdit) {
@@ -40642,7 +40761,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var showScrollToNewMessageButton = reactRedux.useSelector(showScrollToNewMessageButtonSelector);
   var messages = reactRedux.useSelector(activeChannelMessagesSelector) || [];
   var handleScrollToBottom = function handleScrollToBottom() {
-    dispatch(markMessagesAsReadAC(channel.id, [channel.lastMessage.id]));
+    var user = getClient().user;
+    if (channel.lastMessage.user.id !== user.id) {
+      dispatch(markMessagesAsReadAC(channel.id, [channel.lastMessage.id]));
+    }
     handleScrollToLastMessage(channel.lastMessage.id);
   };
   var handleScrollToLastMessage = function handleScrollToLastMessage(messageId) {