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

package/components/ChannelList/index.d.ts

@@ -29,6 +29,7 @@ interface IChannelListProps {
     searchInputTextColor?: string;
     searchChannelsPosition?: 'inline' | 'bottom';
     searchInputBorderRadius?: string;
+    searchChannelsPadding?: string;
     getSelectedChannel?: (channel: IChannel) => void;
     filter?: {
         channelType?: string;

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;
@@ -23129,7 +23185,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 +23423,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 +23747,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 +29287,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 +29423,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 +29490,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 +29603,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 +29633,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() {
@@ -32939,7 +33027,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) {
@@ -40642,7 +40730,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) {

package/index.modern.js

@@ -10054,18 +10054,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]) {
@@ -10309,7 +10320,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) {
@@ -10427,11 +10437,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);
@@ -10451,10 +10498,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;
@@ -10503,9 +10550,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);
@@ -10521,11 +10568,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,
@@ -10549,23 +10596,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);
     },
@@ -10626,6 +10673,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,
@@ -11717,6 +11765,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,
@@ -17132,12 +17187,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();
@@ -18311,7 +18360,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:
@@ -18321,7 +18370,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();
@@ -18407,7 +18456,7 @@ function getMessagesQuery(action) {
         _context9.n = 12;
         return put(setScrollToMessagesAC(messageId, highlight));
       case 12:
-        _context9.n = 44;
+        _context9.n = 45;
         break;
       case 13:
         if (!messageId) {
@@ -18473,7 +18522,7 @@ function getMessagesQuery(action) {
         _context9.n = 24;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 24:
-        _context9.n = 44;
+        _context9.n = 45;
         break;
       case 25:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
@@ -18545,7 +18594,7 @@ function getMessagesQuery(action) {
         _context9.n = 37;
         return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 37:
-        _context9.n = 44;
+        _context9.n = 45;
         break;
       case 38:
         setAllMessages([]);
@@ -18574,22 +18623,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 put(setMessagesHasPrevAC(result.hasNext));
+        return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 43:
         _context9.n = 44;
-        return put(setMessagesHasNextAC(false));
+        return put(setMessagesHasPrevAC(result.hasNext));
       case 44:
+        _context9.n = 45;
+        return put(setMessagesHasNextAC(false));
+      case 45:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18599,40 +18655,40 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 45;
+        _context9.n = 46;
         return 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 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 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 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;
@@ -23108,7 +23164,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],
@@ -23345,7 +23402,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,
@@ -23668,8 +23726,10 @@ var NoData = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTempl
   return props.color;
 });
 var LoadingWrapper = styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
-var ChannelListHeader = styled.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: 12px;\n  padding-left: 22px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
+var ChannelListHeader = styled.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: ", ";\n  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) {
@@ -29206,7 +29266,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 {
@@ -29334,23 +29402,35 @@ var Attachment = function Attachment(_ref) {
     }
   }, [attachmentUrl]);
   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);
@@ -29389,7 +29469,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);
@@ -29494,7 +29582,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
@@ -29524,7 +29612,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() {
@@ -32918,7 +33006,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) {
@@ -40621,7 +40709,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector);
   var messages = 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.6.9-beta.17",
+  "version": "1.6.9-beta.18",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",