sceyt-chat-react-uikit 1.7.6-beta.14 → 1.7.6-beta.16

package/index.modern.js

@@ -10056,7 +10056,10 @@ var queryDirection = {
   NEAR: 'near'
 };
 
-function sendMessageAC(message, channelId, connectionState, sendAttachmentsAsSeparateMessage, isResend) {
+function sendMessageAC(message, channelId, connectionState, sendAttachmentsAsSeparateMessage, isResend, isAddToPendingMessagesMap) {
+  if (isAddToPendingMessagesMap === void 0) {
+    isAddToPendingMessagesMap = true;
+  }
   return {
     type: SEND_MESSAGE,
     payload: {
@@ -10064,17 +10067,22 @@ function sendMessageAC(message, channelId, connectionState, sendAttachmentsAsSep
       channelId: channelId,
       connectionState: connectionState,
       sendAttachmentsAsSeparateMessage: sendAttachmentsAsSeparateMessage,
-      isResend: isResend
+      isResend: isResend,
+      isAddToPendingMessagesMap: isAddToPendingMessagesMap
     }
   };
 }
-function sendTextMessageAC(message, channelId, connectionState) {
+function sendTextMessageAC(message, channelId, connectionState, isAddToPendingMessagesMap) {
+  if (isAddToPendingMessagesMap === void 0) {
+    isAddToPendingMessagesMap = true;
+  }
   return {
     type: SEND_TEXT_MESSAGE,
     payload: {
       message: message,
       channelId: channelId,
-      connectionState: connectionState
+      connectionState: connectionState,
+      isAddToPendingMessagesMap: isAddToPendingMessagesMap
     }
   };
 }
@@ -10088,17 +10096,21 @@ function resendMessageAC(message, channelId, connectionState) {
     }
   };
 }
-function forwardMessageAC(message, channelId, connectionState, isForward) {
+function forwardMessageAC(message, channelId, connectionState, isForward, isAddToPendingMessagesMap) {
   if (isForward === void 0) {
     isForward = true;
   }
+  if (isAddToPendingMessagesMap === void 0) {
+    isAddToPendingMessagesMap = true;
+  }
   return {
     type: FORWARD_MESSAGE,
     payload: {
       message: message,
       channelId: channelId,
       connectionState: connectionState,
-      isForward: isForward
+      isForward: isForward,
+      isAddToPendingMessagesMap: isAddToPendingMessagesMap
     }
   };
 }
@@ -10815,17 +10827,20 @@ function setMessagesToMap(channelId, messages) {
     messagesMap[channelId] = {};
   }
   messages.forEach(function (msg) {
-    messagesMap[channelId][msg.id] = msg;
+    if (msg.tid && messagesMap[channelId][msg.tid]) {
+      delete messagesMap[channelId][msg.tid];
+    }
+    messagesMap[channelId][msg.id || msg.tid] = msg;
   });
 }
 function addMessageToMap(channelId, message) {
   if (!messagesMap[channelId]) {
     messagesMap[channelId] = {};
   }
-  messagesMap[channelId][message.id] = message;
-  if (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.PENDING) {
-    setPendingMessage(channelId, message);
+  if (message.tid && messagesMap[channelId][message.tid]) {
+    delete messagesMap[channelId][message.tid];
   }
+  messagesMap[channelId][message.id || message.tid] = message;
 }
 function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
   var pendingMessagesMap = store.getState().MessageReducer.pendingMessagesMap;
@@ -10876,7 +10891,10 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
       if (!messagesMap[channelId]) {
         messagesMap[channelId] = {};
       }
-      messagesMap[channelId][msg.id] = msg;
+      if (msg.tid && messagesMap[channelId][msg.tid]) {
+        delete messagesMap[channelId][msg.tid];
+      }
+      messagesMap[channelId][msg.id || msg.tid] = msg;
     });
   }
   return updatedMessageData;
@@ -10892,7 +10910,10 @@ function addReactionToMessageOnMap(channelId, message, reaction, isSelf) {
         slfReactions = [reaction];
       }
     }
-    messagesMap[channelId][message.id] = _extends({}, messageShouldBeUpdated, {
+    if (message.tid && messagesMap[channelId][message.tid]) {
+      delete messagesMap[channelId][message.tid];
+    }
+    messagesMap[channelId][message.id || message.tid] = _extends({}, messageShouldBeUpdated, {
       userReactions: slfReactions,
       reactionTotals: message.reactionTotals
     });
@@ -10926,7 +10947,10 @@ function removeReactionToMessageOnMap(channelId, message, reaction, isSelf) {
         return selfReaction.key !== reaction.key;
       });
     }
-    messagesMap[channelId][message.id] = _extends({}, messageShouldBeUpdated, {
+    if (message.tid && messagesMap[channelId][message.tid]) {
+      delete messagesMap[channelId][message.tid];
+    }
+    messagesMap[channelId][message.id || message.tid] = _extends({}, messageShouldBeUpdated, {
       reactionTotals: message.reactionTotals,
       userReactions: userReactions
     });
@@ -10961,6 +10985,9 @@ function updateMessageStatusOnMap(channelId, newMarkers) {
       var messageShouldBeUpdated = messagesMap[channelId][messageId];
       if (messageShouldBeUpdated) {
         var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(messageShouldBeUpdated, newMarkers.name);
+        if (messageShouldBeUpdated.tid && messagesMap[channelId][messageShouldBeUpdated.tid]) {
+          delete messagesMap[channelId][messageShouldBeUpdated.tid];
+        }
         messagesMap[channelId][messageId] = _extends({}, messageShouldBeUpdated, statusUpdatedMessage);
       }
     });
@@ -10994,13 +11021,6 @@ function clearMessagesMap() {
 function checkChannelExistsOnMessagesMap(channelId) {
   return !!messagesMap[channelId];
 }
-var pendingVideoAttachmentsThumbs = {};
-var getVideoThumb = function getVideoThumb(attachmentId) {
-  return pendingVideoAttachmentsThumbs[attachmentId];
-};
-var deleteVideoThumb = function deleteVideoThumb(attachmentId) {
-  delete pendingVideoAttachmentsThumbs[attachmentId];
-};
 var setPendingAttachment = function setPendingAttachment(attachmentId, data) {
   pendingAttachments[attachmentId] = _extends({}, pendingAttachments[attachmentId], data);
 };
@@ -16205,7 +16225,7 @@ function getChannels(action) {
       case 23:
         _context2.p = 23;
         _t4 = _context2.v;
-        log.error(_t4, 'Error on get channels');
+        log.error(JSON.stringify(_t4), 'Error on get channels');
       case 24:
         return _context2.a(2);
     }
@@ -18381,7 +18401,7 @@ var base64ToBinary = function base64ToBinary(base64) {
 var binaryThumbHashToDataURL = function binaryThumbHashToDataURL(binaryThumbHash) {
   return thumbHashToDataURL(binaryThumbHash);
 };
-var base64ToToDataURL = function base64ToToDataURL(base64) {
+var base64ToDataURL = function base64ToDataURL(base64) {
   try {
     var thumbHashFromBase64 = base64ToBinary(base64);
     if (thumbHashFromBase64.length === 0) {
@@ -18455,106 +18475,6 @@ function calculateSize(width, height, maxWidth, maxHeight) {
   return [width, height];
 }
 
-var activeChannelMessagesSelector = function activeChannelMessagesSelector(store) {
-  return store.MessageReducer.activeChannelMessages;
-};
-var messagesLoadingState = function messagesLoadingState(store) {
-  return store.MessageReducer.messagesLoadingState;
-};
-var messagesHasNextSelector = function messagesHasNextSelector(store) {
-  return store.MessageReducer.messagesHasNext;
-};
-var messagesHasPrevSelector = function messagesHasPrevSelector(store) {
-  return store.MessageReducer.messagesHasPrev;
-};
-var attachmentCompilationStateSelector = function attachmentCompilationStateSelector(store) {
-  return store.MessageReducer.attachmentsUploadingState;
-};
-var attachmentsUploadProgressSelector = function attachmentsUploadProgressSelector(store) {
-  return store.MessageReducer.attachmentsUploadingProgress;
-};
-var activeTabAttachmentsSelector = function activeTabAttachmentsSelector(store) {
-  return store.MessageReducer.activeTabAttachments;
-};
-var activeTabAttachmentsHasNextSelector = function activeTabAttachmentsHasNextSelector(store) {
-  return store.MessageReducer.attachmentHasNext;
-};
-var attachmentsForPopupSelector = function attachmentsForPopupSelector(store) {
-  return store.MessageReducer.attachmentsForPopup;
-};
-var messageForReplySelector = function messageForReplySelector(store) {
-  return store.MessageReducer.messageForReply;
-};
-var messageToEditSelector = function messageToEditSelector(store) {
-  return store.MessageReducer.messageToEdit;
-};
-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;
-};
-var sendMessageInputHeightSelector = function sendMessageInputHeightSelector(store) {
-  return store.MessageReducer.sendMessageInputHeight;
-};
-var scrollToMessageSelector = function scrollToMessageSelector(store) {
-  return store.MessageReducer.scrollToMessage;
-};
-var scrollToMessageHighlightSelector = function scrollToMessageHighlightSelector(store) {
-  return store.MessageReducer.scrollToMessageHighlight;
-};
-var scrollToMessageBehaviorSelector = function scrollToMessageBehaviorSelector(store) {
-  return store.MessageReducer.scrollToMessageBehavior;
-};
-var reactionsListSelector = function reactionsListSelector(store) {
-  return store.MessageReducer.reactionsList;
-};
-var reactionsHasNextSelector = function reactionsHasNextSelector(store) {
-  return store.MessageReducer.reactionsHasNext;
-};
-var reactionsLoadingStateSelector = function reactionsLoadingStateSelector(store) {
-  return store.MessageReducer.reactionsLoadingState;
-};
-var openedMessageMenuSelector = function openedMessageMenuSelector(store) {
-  return store.MessageReducer.openedMessageMenu;
-};
-var playingAudioIdSelector = function playingAudioIdSelector(store) {
-  return store.MessageReducer.playingAudioId;
-};
-var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
-  return store.MessageReducer.selectedMessagesMap;
-};
-var attachmentUpdatedMapSelector = function attachmentUpdatedMapSelector(store) {
-  return store.MessageReducer.attachmentUpdatedMap;
-};
-var messageMarkersSelector = function messageMarkersSelector(store) {
-  return store.MessageReducer.messageMarkers;
-};
-var messagesMarkersLoadingStateSelector = function messagesMarkersLoadingStateSelector(store) {
-  return store.MessageReducer.messagesMarkersLoadingState;
-};
-var pollVotesListSelector = function pollVotesListSelector(store) {
-  return store.MessageReducer.pollVotesList;
-};
-var pollVotesHasMoreSelector = function pollVotesHasMoreSelector(store) {
-  return store.MessageReducer.pollVotesHasMore;
-};
-var pollVotesLoadingStateSelector = function pollVotesLoadingStateSelector(store) {
-  return store.MessageReducer.pollVotesLoadingState;
-};
-var pendingPollActionsSelector = function pendingPollActionsSelector(store) {
-  return store.MessageReducer.pendingPollActions;
-};
-var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
-  return store.MessageReducer.pendingMessagesMap;
-};
-var unreadScrollToSelector = function unreadScrollToSelector(store) {
-  return store.MessageReducer.unreadScrollTo;
-};
-
 var getFrame = function getFrame(videoSrc, time) {
   try {
     var video = document.createElement('video');
@@ -18724,28 +18644,43 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
 };
 var addPendingMessage = function addPendingMessage(message, messageCopy, channel) {
   try {
-    var messageToAdd = JSON.parse(JSON.stringify(_extends({}, messageCopy, {
+    var messageToAdd = _extends({}, messageCopy, {
       createdAt: new Date(Date.now()),
       mentionedUsers: message.mentionedUsers,
       parentMessage: message.parentMessage
-    })));
+    });
     addMessageToMap(channel.id, messageToAdd);
-    addAllMessages([messageToAdd], MESSAGE_LOAD_DIRECTION.NEXT);
+    var activeChannelId = getActiveChannelId();
+    if (activeChannelId === channel.id) {
+      addAllMessages([messageToAdd], MESSAGE_LOAD_DIRECTION.NEXT);
+    }
     setPendingMessage(channel.id, messageToAdd);
     store.dispatch(scrollToNewMessageAC(true));
-    store.dispatch(addMessageAC(messageToAdd));
+    if (activeChannelId === channel.id) {
+      store.dispatch(addMessageAC(messageToAdd));
+    }
     return Promise.resolve();
   } catch (e) {
     return Promise.reject(e);
   }
 };
+var updatePendingMessage$1 = function updatePendingMessage(message, channel, updatedMessage) {
+  var messageToUpdate = _extends({}, message, updatedMessage);
+  updateMessageOnMap(channel.id, {
+    messageId: message.tid,
+    params: messageToUpdate
+  });
+  updateMessageOnAllMessages(message.tid, messageToUpdate);
+  updatePendingMessageOnMap(channel.id, message.tid, messageToUpdate);
+  store.dispatch(updateMessageAC(message.tid, messageToUpdate, false));
+};
 function sendMessage(action) {
-  var payload, message, connectionState, channelId, sendAttachmentsAsSeparateMessage, channel, SceytChatClient, createChannelData, mentionedUserIds, customUploader, linkAttachment, attachmentsToSend, messagesToSend, mediaAttachments, _loop, i, messageBuilder, messageToSend, messageCopy, _loop2, _i, _t2;
+  var payload, message, connectionState, channelId, sendAttachmentsAsSeparateMessage, isAddToPendingMessagesMap, channel, SceytChatClient, createChannelData, mentionedUserIds, customUploader, linkAttachment, attachmentsToSend, messagesToSend, mediaAttachments, _loop, i, messageBuilder, messageToSend, messageCopy, _loop2, _i, _t2;
   return _regenerator().w(function (_context3) {
     while (1) switch (_context3.p = _context3.n) {
       case 0:
         payload = action.payload;
-        message = payload.message, connectionState = payload.connectionState, channelId = payload.channelId, sendAttachmentsAsSeparateMessage = payload.sendAttachmentsAsSeparateMessage;
+        message = payload.message, connectionState = payload.connectionState, channelId = payload.channelId, sendAttachmentsAsSeparateMessage = payload.sendAttachmentsAsSeparateMessage, isAddToPendingMessagesMap = payload.isAddToPendingMessagesMap;
         _context3.p = 1;
         _context3.n = 2;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
@@ -18789,7 +18724,7 @@ function sendMessage(action) {
         }) : [];
         customUploader = getCustomUploader();
         if (!(message.attachments && message.attachments.length)) {
-          _context3.n = 17;
+          _context3.n = 22;
           break;
         }
         linkAttachment = null;
@@ -18802,7 +18737,7 @@ function sendMessage(action) {
           return att.type !== attachmentTypes.link;
         });
         if (!(mediaAttachments && mediaAttachments.length)) {
-          _context3.n = 14;
+          _context3.n = 18;
           break;
         }
         _loop = /*#__PURE__*/_regenerator().m(function _callee() {
@@ -18843,7 +18778,9 @@ function sendMessage(action) {
                     }
                   };
                 } else if (customUploader && attachment) {
-                  attachment.url = attachment.data;
+                  attachment = _extends({}, attachment, {
+                    url: attachment.data
+                  });
                 }
                 messageAttachment.tid = attachment.tid;
                 messageAttachment.attachmentUrl = attachment.attachmentUrl;
@@ -18851,7 +18788,7 @@ function sendMessage(action) {
                   messageAttachment.url = attachment.data;
                 }
                 if (!sendAttachmentsAsSeparateMessage) {
-                  _context.n = 2;
+                  _context.n = 4;
                   break;
                 }
                 _messageBuilder = channel.createMessageBuilder();
@@ -18871,22 +18808,34 @@ function sendMessage(action) {
                   attachments: [messageAttachment]
                 });
                 messagesToSend.push(messageForSend);
-                messageForSendCopy = JSON.parse(JSON.stringify(messageForSend));
+                messageForSendCopy = messageForSend;
+                if (!isAddToPendingMessagesMap) {
+                  _context.n = 2;
+                  break;
+                }
                 _context.n = 1;
-                return call(addPendingMessage, message, messageForSendCopy, channel);
+                return call(addPendingMessage, message, _extends({}, messageForSendCopy, {
+                  attachments: [attachment]
+                }), channel);
               case 1:
                 _context.n = 3;
                 break;
               case 2:
-                attachmentsToSend.push(messageAttachment);
+                _context.n = 3;
+                return call(updatePendingMessage$1, message, channel, messageForSendCopy);
               case 3:
+                _context.n = 5;
+                break;
+              case 4:
+                attachmentsToSend.push(messageAttachment);
+              case 5:
                 if (!(!messageAttachment.cachedUrl && customUploader)) {
-                  _context.n = 4;
+                  _context.n = 6;
                   break;
                 }
-                _context.n = 4;
+                _context.n = 6;
                 return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.UPLOADING, messageAttachment.tid));
-              case 4:
+              case 6:
                 return _context.a(2);
             }
           }, _callee);
@@ -18904,7 +18853,7 @@ function sendMessage(action) {
         break;
       case 10:
         if (sendAttachmentsAsSeparateMessage) {
-          _context3.n = 14;
+          _context3.n = 18;
           break;
         }
         messageBuilder = channel.createMessageBuilder();
@@ -18916,27 +18865,53 @@ function sendMessage(action) {
           messageBuilder.setReplyInThread();
         }
         messageToSend = messageBuilder.create();
-        messageCopy = JSON.parse(JSON.stringify(messageToSend));
+        messageCopy = messageToSend;
         if (!customUploader) {
-          _context3.n = 12;
+          _context3.n = 14;
           break;
         }
         if (sendAttachmentsAsSeparateMessage) {
-          _context3.n = 11;
+          _context3.n = 13;
+          break;
+        }
+        if (!isAddToPendingMessagesMap) {
+          _context3.n = 12;
           break;
         }
         _context3.n = 11;
-        return call(addPendingMessage, message, messageCopy, channel);
+        return call(addPendingMessage, message, _extends({}, messageCopy, {
+          attachments: message.attachments
+        }), channel);
       case 11:
         _context3.n = 13;
         break;
       case 12:
-        _context3.n = 13;
-        return call(addPendingMessage, message, messageCopy, channel);
+        updatePendingMessage$1(message, channel, messageCopy);
       case 13:
+        _context3.n = 17;
+        break;
+      case 14:
+        if (!isAddToPendingMessagesMap) {
+          _context3.n = 16;
+          break;
+        }
+        _context3.n = 15;
+        return call(addPendingMessage, message, messageCopy, channel);
+      case 15:
+        _context3.n = 17;
+        break;
+      case 16:
+        updatePendingMessage$1(message, channel, messageCopy);
+      case 17:
         messageToSend.attachments = attachmentsToSend;
         messagesToSend.push(messageToSend);
-      case 14:
+      case 18:
+        if (!(connectionState !== CONNECTION_STATUS.CONNECTED)) {
+          _context3.n = 19;
+          break;
+        }
+        throw new Error('Connection is required to send message');
+      case 19:
         _loop2 = /*#__PURE__*/_regenerator().m(function _callee2() {
           var messageAttachment, messageToSend, _messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, messageToUpdate, channelUpdateParam, _t;
           return _regenerator().w(function (_context2) {
@@ -19004,6 +18979,9 @@ function sendMessage(action) {
                 _context2.n = 5;
                 break;
               case 8:
+                if (!isAddToPendingMessagesMap) {
+                  store.dispatch(removePendingMessageAC(channel.id, messageToSend.tid));
+                }
                 attachmentsToUpdate = [];
                 if (messageResponse.attachments && messageResponse.attachments.length > 0) {
                   currentAttachmentsMap = {};
@@ -19064,7 +19042,7 @@ function sendMessage(action) {
                 _context2.n = 13;
                 break;
               case 12:
-                throw Error('Network error');
+                throw new Error('Connection required to send message');
               case 13:
                 _context2.n = 16;
                 break;
@@ -19098,35 +19076,35 @@ function sendMessage(action) {
           }, _callee2, null, [[1, 14]]);
         });
         _i = 0;
-      case 15:
+      case 20:
         if (!(_i < messagesToSend.length)) {
-          _context3.n = 17;
+          _context3.n = 22;
           break;
         }
-        return _context3.d(_regeneratorValues(_loop2()), 16);
-      case 16:
+        return _context3.d(_regeneratorValues(_loop2()), 21);
+      case 21:
         _i++;
-        _context3.n = 15;
+        _context3.n = 20;
         break;
-      case 17:
-        _context3.n = 19;
+      case 22:
+        _context3.n = 24;
         break;
-      case 18:
-        _context3.p = 18;
+      case 23:
+        _context3.p = 23;
         _t2 = _context3.v;
         log.error('error on send message ... ', _t2);
-      case 19:
+      case 24:
         return _context3.a(2);
     }
-  }, _marked$3, null, [[1, 18]]);
+  }, _marked$3, null, [[1, 23]]);
 }
 function sendTextMessage(action) {
-  var payload, message, connectionState, channelId, channel, sendMessageTid, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, _messageResponse, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t3;
+  var payload, message, connectionState, channelId, isAddToPendingMessagesMap, channel, sendMessageTid, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, _messageResponse, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t3;
   return _regenerator().w(function (_context4) {
     while (1) switch (_context4.p = _context4.n) {
       case 0:
         payload = action.payload;
-        message = payload.message, connectionState = payload.connectionState, channelId = payload.channelId;
+        message = payload.message, connectionState = payload.connectionState, channelId = payload.channelId, isAddToPendingMessagesMap = payload.isAddToPendingMessagesMap;
         _context4.n = 1;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
@@ -19194,32 +19172,41 @@ function sendTextMessage(action) {
           pendingMessage.metadata = JSON.parse(pendingMessage.metadata);
         }
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 8;
+          _context4.n = 10;
+          break;
+        }
+        if (!isAddToPendingMessagesMap) {
+          _context4.n = 9;
           break;
         }
         _context4.n = 8;
         return call(addPendingMessage, message, pendingMessage, channel);
       case 8:
+        _context4.n = 10;
+        break;
+      case 9:
+        updatePendingMessage$1(message, channel, pendingMessage);
+      case 10:
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context4.n = 16;
+          _context4.n = 18;
           break;
         }
         if (!sendMessageHandler) {
-          _context4.n = 10;
+          _context4.n = 12;
           break;
         }
-        _context4.n = 9;
+        _context4.n = 11;
         return call(sendMessageHandler, messageToSend, channel.id);
-      case 9:
+      case 11:
         messageResponse = _context4.v;
-        _context4.n = 12;
+        _context4.n = 14;
         break;
-      case 10:
-        _context4.n = 11;
+      case 12:
+        _context4.n = 13;
         return call(channel.sendMessage, messageToSend);
-      case 11:
+      case 13:
         messageResponse = _context4.v;
-      case 12:
+      case 14:
         messageUpdateData = {
           id: messageResponse.id,
           body: messageResponse.body,
@@ -19238,12 +19225,12 @@ function sendTextMessage(action) {
           channelId: channel.id
         };
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 13;
+          _context4.n = 15;
           break;
         }
-        _context4.n = 13;
+        _context4.n = 15;
         return put(updateMessageAC(messageToSend.tid, messageUpdateData));
-      case 13:
+      case 15:
         updateMessageOnMap(channel.id, {
           messageId: messageToSend.tid,
           params: messageUpdateData
@@ -19257,30 +19244,33 @@ function sendTextMessage(action) {
           lastMessage: messageToUpdate,
           lastReactedMessage: null
         };
-        _context4.n = 14;
+        _context4.n = 16;
         return put(updateChannelDataAC(channel.id, channelUpdateParam, true));
-      case 14:
+      case 16:
         updateChannelOnAllChannels(channel.id, channelUpdateParam);
         if (!channel.unread) {
-          _context4.n = 15;
+          _context4.n = 17;
           break;
         }
-        _context4.n = 15;
+        _context4.n = 17;
         return put(markChannelAsReadAC(channel.id));
-      case 15:
+      case 17:
         channel.lastMessage = messageToUpdate;
-        _context4.n = 17;
+        if (!isAddToPendingMessagesMap) {
+          store.dispatch(removePendingMessageAC(channel.id, messageToSend.tid));
+        }
+        _context4.n = 19;
         break;
-      case 16:
+      case 18:
         throw new Error('Connection required to send message');
-      case 17:
-        _context4.n = 18;
+      case 19:
+        _context4.n = 20;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 18:
-        _context4.n = 21;
+      case 20:
+        _context4.n = 23;
         break;
-      case 19:
-        _context4.p = 19;
+      case 21:
+        _context4.p = 21;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -19290,32 +19280,32 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 20;
+          _context4.n = 22;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 20;
+        _context4.n = 22;
         return put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 20:
-        _context4.n = 21;
+      case 22:
+        _context4.n = 23;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 21:
+      case 23:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 19]]);
+  }, _marked2$2, null, [[3, 21]]);
 }
 function forwardMessage(action) {
-  var payload, message, channelId, connectionState, isForward, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
+  var payload, message, channelId, connectionState, isForward, isAddToPendingMessagesMap, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, pendingMessage, activeChannelId, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
   return _regenerator().w(function (_context5) {
     while (1) switch (_context5.p = _context5.n) {
       case 0:
         _context5.p = 0;
         payload = action.payload;
-        message = payload.message, channelId = payload.channelId, connectionState = payload.connectionState, isForward = payload.isForward;
+        message = payload.message, channelId = payload.channelId, connectionState = payload.connectionState, isForward = payload.isForward, isAddToPendingMessagesMap = payload.isAddToPendingMessagesMap;
         _context5.n = 1;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
@@ -19350,7 +19340,7 @@ function forwardMessage(action) {
         }) : [];
         attachments = message.attachments;
         if ((channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC) && !(channel.userRole === 'admin' || channel.userRole === 'owner')) {
-          _context5.n = 19;
+          _context5.n = 16;
           break;
         }
         if (message.attachments && message.attachments.length) {
@@ -19378,9 +19368,9 @@ function forwardMessage(action) {
         }
         messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisableMentionsCount(getDisableFrowardMentionsCount()).setMetadata(message.metadata ? JSON.stringify(message.metadata) : '').setForwardingMessageId(message.forwardingDetails ? message.forwardingDetails.messageId : message.id).setPollDetails(pollDetails);
         messageToSend = messageBuilder.create();
-        pendingMessage = JSON.parse(JSON.stringify(_extends({}, messageToSend, {
+        pendingMessage = _extends({}, messageToSend, {
           createdAt: new Date(Date.now())
-        })));
+        });
         if (isForward) {
           if (message.forwardingDetails) {
             pendingMessage.forwardingDetails.user = message.forwardingDetails.user;
@@ -19392,50 +19382,42 @@ function forwardMessage(action) {
           pendingMessage.forwardingDetails.hops = message.forwardingDetails ? message.forwardingDetails.hops : 1;
         }
         activeChannelId = getActiveChannelId();
-        isCachedChannel = checkChannelExistsOnMessagesMap(channelId);
         if (!(channelId === activeChannelId)) {
-          _context5.n = 11;
+          _context5.n = 7;
           break;
         }
         hasNextMessages = store.getState().MessageReducer.messagesHasNext;
         if (getHasNextCached()) {
-          _context5.n = 9;
+          _context5.n = 7;
           break;
         }
         if (!hasNextMessages) {
-          _context5.n = 8;
+          _context5.n = 7;
           break;
         }
         _context5.n = 7;
         return put(getMessagesAC(channel));
       case 7:
-        _context5.n = 9;
-        break;
+        if (!isAddToPendingMessagesMap) {
+          _context5.n = 9;
+          break;
+        }
+        _context5.n = 8;
+        return call(addPendingMessage, message, pendingMessage, channel);
       case 8:
-        _context5.n = 9;
-        return put(addMessageAC(JSON.parse(JSON.stringify(pendingMessage))));
+        _context5.n = 10;
+        break;
       case 9:
-        addMessageToMap(channelId, pendingMessage);
-        addAllMessages([pendingMessage], MESSAGE_LOAD_DIRECTION.NEXT);
         _context5.n = 10;
-        return put(scrollToNewMessageAC(true, true));
+        return call(updatePendingMessage$1, message, channel, pendingMessage);
       case 10:
-        _context5.n = 12;
-        break;
-      case 11:
-        if (isCachedChannel) {
-          addMessageToMap(channelId, pendingMessage);
-        } else {
-          setPendingMessage(channelId, pendingMessage);
-        }
-      case 12:
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context5.n = 19;
+          _context5.n = 16;
           break;
         }
-        _context5.n = 13;
+        _context5.n = 11;
         return call(channel.sendMessage, messageToSend);
-      case 13:
+      case 11:
         messageResponse = _context5.v;
         messageUpdateData = {
           id: messageResponse.id,
@@ -19452,409 +19434,75 @@ function forwardMessage(action) {
           channelId: channel.id
         };
         if (!(channelId === activeChannelId)) {
-          _context5.n = 15;
+          _context5.n = 13;
           break;
         }
-        _context5.n = 14;
+        _context5.n = 12;
         return put(updateMessageAC(messageToSend.tid, JSON.parse(JSON.stringify(messageUpdateData))));
-      case 14:
-        updateMessageOnMap(channel.id, {
-          messageId: messageToSend.tid,
-          params: messageUpdateData
-        });
+      case 12:
         updateMessageOnAllMessages(messageToSend.tid, messageUpdateData);
-        _context5.n = 17;
-        break;
-      case 15:
-        if (!isCachedChannel) {
-          _context5.n = 16;
-          break;
-        }
+      case 13:
+        _context5.n = 14;
+        return put(removePendingMessageAC(channel.id, messageToSend.tid || messageToSend.id));
+      case 14:
         updateMessageOnMap(channel.id, {
           messageId: messageToSend.tid,
           params: messageUpdateData
         });
-        _context5.n = 17;
-        break;
-      case 16:
-        _context5.n = 17;
-        return put(removePendingMessageAC(channelId, messageToSend.tid || messageToSend.id));
-      case 17:
         messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
         updateChannelLastMessageOnAllChannels(channel.id, messageToUpdate);
         channelUpdateParam = {
           lastMessage: messageToUpdate,
           lastReactedMessage: null
         };
-        _context5.n = 18;
+        _context5.n = 15;
         return put(updateChannelDataAC(channel.id, channelUpdateParam, true));
-      case 18:
+      case 15:
         updateChannelOnAllChannels(channel.id, channelUpdateParam);
         if (!channel.unread) {
-          _context5.n = 19;
+          _context5.n = 16;
           break;
         }
-        _context5.n = 19;
+        _context5.n = 16;
         return put(markChannelAsReadAC(channel.id));
-      case 19:
-        _context5.n = 21;
+      case 16:
+        _context5.n = 18;
         break;
-      case 20:
-        _context5.p = 20;
+      case 17:
+        _context5.p = 17;
         _t4 = _context5.v;
         log.error('error on forward message ... ', _t4);
-      case 21:
-        _context5.n = 22;
+      case 18:
+        _context5.n = 19;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 19:
         return _context5.a(2);
     }
-  }, _marked3$1, null, [[0, 20]]);
+  }, _marked3$1, null, [[0, 17]]);
 }
 function resendMessage(action) {
-  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, thumbnailMetas, fileSize, meta, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy2, _messageResponse2, _messageUpdateData, isInActiveChannel, activeChannelId, _messageToUpdate, _t5, _t6;
+  var payload, message, connectionState, channelId, sendAttachmentsAsSeparateMessage, isVoiceMessage;
   return _regenerator().w(function (_context6) {
-    while (1) switch (_context6.p = _context6.n) {
+    while (1) switch (_context6.n) {
       case 0:
         payload = action.payload;
         message = payload.message, connectionState = payload.connectionState, channelId = payload.channelId;
-        _context6.n = 1;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
-      case 1:
-        _context6.n = 2;
-        return call(getChannelFromMap, channelId);
-      case 2:
-        channel = _context6.v;
-        _context6.p = 3;
-        if (!channel) {
-          channel = getChannelFromAllChannels(channelId);
-          if (channel) {
-            setChannelInMap(channel);
-          }
-        }
-        _context6.n = 4;
-        return put(addChannelAC(JSON.parse(JSON.stringify(channel))));
-      case 4:
-        customUploader = getCustomUploader();
-        _context6.n = 5;
-        return put(updateMessageAC(message.tid, {
-          state: MESSAGE_STATUS.UNMODIFIED
-        }));
-      case 5:
-        updateMessageOnMap(channel.id, {
-          messageId: message.tid,
-          params: {
-            state: MESSAGE_STATUS.UNMODIFIED
-          }
-        });
-        updateMessageOnAllMessages(message.tid, {
-          state: MESSAGE_STATUS.UNMODIFIED
-        });
-        if (!(message.attachments && message.attachments.length && message.state === MESSAGE_STATUS.FAILED)) {
-          _context6.n = 26;
-          break;
-        }
-        _context6.n = 6;
-        return select(attachmentCompilationStateSelector);
-      case 6:
-        attachmentCompilation = _context6.v;
-        messageAttachment = _extends({}, message.attachments[0]);
-        messageCopy = _extends({}, message, {
-          attachments: [messageAttachment]
-        });
-        log.info('attachmentCompilation. .. . .', attachmentCompilation);
-        if (!(connectionState === CONNECTION_STATUS.CONNECTED && attachmentCompilation[messageAttachment.tid] && attachmentCompilation[messageAttachment.tid] === UPLOAD_STATE.FAIL)) {
-          _context6.n = 25;
-          break;
-        }
-        _context6.n = 7;
-        return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.UPLOADING, messageAttachment.tid));
-      case 7:
-        if (!customUploader) {
-          _context6.n = 25;
-          break;
-        }
-        handleUploadProgress = function handleUploadProgress(_ref2) {
-          var loaded = _ref2.loaded,
-            total = _ref2.total;
-          log.info('progress ... ', loaded / total);
-        };
-        _context6.p = 8;
-        handleUpdateLocalPath = function handleUpdateLocalPath(updatedLink) {
-          filePath = updatedLink;
-          thumbnailMetas = getVideoThumb(messageAttachment.tid);
-          messageCopy.attachments[0] = _extends({}, messageCopy.attachments[0], {
-            attachmentUrl: updatedLink
-          });
-          var updateAttachmentPath = {
-            attachments: [_extends({}, messageCopy.attachments[0], {
-              attachmentUrl: updatedLink
-            })]
-          };
-          store.dispatch(updateMessageAC(message.tid, updateAttachmentPath));
-        };
-        pendingAttachment = getPendingAttachment(message.attachments[0].tid);
-        log.info('pendingAttachment ... ', pendingAttachment);
-        if (!messageAttachment.cachedUrl) {
-          _context6.n = 9;
-          break;
-        }
-        uri = pendingAttachment.file;
-        _context6.n = 11;
-        break;
-      case 9:
-        messageAttachment.data = pendingAttachment.file;
-        messageAttachment.url = pendingAttachment.file;
-        _context6.n = 10;
-        return call(customUpload, messageAttachment, handleUploadProgress, message.type, handleUpdateLocalPath);
-      case 10:
-        uri = _context6.v;
-      case 11:
-        log.info('messageAttachment ... ', messageAttachment);
-        _context6.n = 12;
-        return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.SUCCESS, messageAttachment.tid));
-      case 12:
-        delete messageCopy.createdAt;
-        thumbnailMetas = {};
-        fileSize = messageAttachment.cachedUrl ? messageAttachment.size : pendingAttachment.file.size;
-        log.info('uri ... ', uri);
-        if (!(!messageAttachment.cachedUrl && messageAttachment.url.type.split('/')[0] === 'image')) {
-          _context6.n = 15;
-          break;
-        }
-        _context6.n = 13;
-        return call(getImageSize, filePath);
-      case 13:
-        fileSize = _context6.v;
-        _context6.n = 14;
-        return call(createImageThumbnail, null, filePath, messageAttachment.type === 'file' ? 50 : undefined, messageAttachment.type === 'file' ? 50 : undefined);
-      case 14:
-        thumbnailMetas = _context6.v;
-        _context6.n = 17;
-        break;
-      case 15:
-        if (!(!messageAttachment.cachedUrl && messageAttachment.url.type.split('/')[0] === 'video')) {
-          _context6.n = 17;
-          break;
-        }
-        if (!filePath) {
-          _context6.n = 17;
-          break;
-        }
-        _context6.n = 16;
-        return call(getFrame, filePath);
-      case 16:
-        meta = _context6.v;
-        thumbnailMetas = {
-          thumbnail: meta.thumb,
-          imageWidth: meta.width,
-          imageHeight: meta.height,
-          duration: meta.duration
-        };
-      case 17:
-        if (messageAttachment.cachedUrl) {
-          attachmentMeta = messageAttachment.metadata;
+        if (message.forwardingDetails) {
+          store.dispatch(forwardMessageAC(message, channelId, connectionState, false, false));
+        } else if (message.attachments && message.attachments.length) {
+          sendAttachmentsAsSeparateMessage = getSendAttachmentsAsSeparateMessages();
+          isVoiceMessage = message.attachments[0].type === attachmentTypes.voice;
+          store.dispatch(sendMessageAC(message, channelId, connectionState, isVoiceMessage ? false : sendAttachmentsAsSeparateMessage, false, false));
         } else {
-          attachmentMeta = JSON.stringify(_extends({}, messageAttachment.metadata ? typeof messageAttachment.metadata === 'string' ? JSON.parse(messageAttachment.metadata) : messageAttachment.metadata : {}, thumbnailMetas && thumbnailMetas.thumbnail && _extends({
-            tmb: thumbnailMetas.thumbnail,
-            szw: thumbnailMetas.imageWidth,
-            szh: thumbnailMetas.imageHeight
-          }, thumbnailMetas.duration ? {
-            dur: thumbnailMetas.duration
-          } : {})));
-        }
-        log.info('attachmentMeta ... ', attachmentMeta);
-        attachmentBuilder = channel.createAttachmentBuilder(uri, messageAttachment.type);
-        attachmentToSend = attachmentBuilder.setName(messageAttachment.name).setMetadata(attachmentMeta).setFileSize(fileSize).setUpload(false).create();
-        log.info('attachmentToSend ... ', attachmentToSend);
-        attachmentToSend.tid = messageAttachment.tid;
-        attachmentToSend.attachmentUrl = messageAttachment.attachmentUrl;
-        _context6.n = 18;
-        return put(updateMessageAC(messageCopy.tid, JSON.parse(JSON.stringify(_extends({}, messageCopy, {
-          attachments: [attachmentToSend]
-        })))));
-      case 18:
-        messageCopy.attachments = [attachmentToSend];
-        if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context6.n = 22;
-          break;
-        }
-        _context6.n = 19;
-        return call(channel.sendMessage, messageCopy);
-      case 19:
-        messageResponse = _context6.v;
-        deletePendingAttachment(messageAttachment.tid);
-        messageUpdateData = {
-          id: messageResponse.id,
-          body: messageResponse.body,
-          type: messageResponse.type,
-          state: messageResponse.state,
-          displayCount: messageResponse.displayCount,
-          deliveryStatus: messageResponse.deliveryStatus,
-          attachments: [_extends({}, messageResponse.attachments[0], {
-            attachmentUrl: attachmentToSend.attachmentUrl,
-            tid: attachmentToSend.tid
-          })],
-          mentionedUsers: messageResponse.mentionedUsers,
-          metadata: messageResponse.metadata,
-          parentMessage: messageResponse.parentMessage,
-          repliedInThread: messageResponse.repliedInThread,
-          bodyAttributes: messageResponse.bodyAttributes,
-          createdAt: messageResponse.createdAt,
-          channelId: channel.id
-        };
-        _context6.n = 20;
-        return put(removePendingMessageAC(channel.id, messageCopy.tid || messageCopy.id));
-      case 20:
-        _context6.n = 21;
-        return put(updateMessageAC(messageCopy.tid, JSON.parse(JSON.stringify(messageUpdateData))));
-      case 21:
-        fileType = messageAttachment.data && messageAttachment.data.type ? messageAttachment.data.type.split('/')[0] : messageAttachment.type;
-        if (fileType === 'video') {
-          deleteVideoThumb(messageAttachment.tid);
+          store.dispatch(sendTextMessageAC(message, channelId, connectionState, false));
         }
-        updateMessageOnMap(channel.id, {
-          messageId: messageCopy.tid,
-          params: messageUpdateData
-        });
-        updateMessageOnAllMessages(messageCopy.tid, messageUpdateData);
-        messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
-        updateChannelLastMessageOnAllChannels(channel.id, messageToUpdate);
-        _context6.n = 22;
-        return put(updateChannelLastMessageAC(messageToUpdate, {
-          id: channel.id
-        }));
-      case 22:
-        _context6.n = 25;
-        break;
-      case 23:
-        _context6.p = 23;
-        _t5 = _context6.v;
-        log.error('fail upload attachment on resend message ... ', _t5);
-        _context6.n = 24;
-        return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, messageAttachment.tid));
-      case 24:
-        updateMessageOnMap(channel.id, {
-          messageId: messageCopy.tid,
-          params: {
-            state: MESSAGE_STATUS.FAILED
-          }
-        });
-        updateMessageOnAllMessages(messageCopy.tid, {
-          state: MESSAGE_STATUS.FAILED
-        });
-        _context6.n = 25;
-        return put(updateMessageAC(messageCopy.tid, {
-          state: MESSAGE_STATUS.FAILED
-        }));
-      case 25:
-        _context6.n = 33;
-        break;
-      case 26:
-        if (!(message.state === MESSAGE_STATUS.FAILED)) {
-          _context6.n = 33;
-          break;
-        }
-        log.info('send failed message ...');
-        _messageCopy2 = _extends({}, message);
-        delete _messageCopy2.createdAt;
-        if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context6.n = 33;
-          break;
-        }
-        _context6.n = 27;
-        return call(channel.sendMessage, _messageCopy2);
-      case 27:
-        _messageResponse2 = _context6.v;
-        _context6.n = 28;
-        return put(removePendingMessageAC(channel.id, _messageCopy2.tid || _messageCopy2.id));
-      case 28:
-        _messageUpdateData = {
-          id: _messageResponse2.id,
-          body: _messageResponse2.body,
-          type: _messageResponse2.type,
-          state: _messageResponse2.state,
-          displayCount: _messageResponse2.displayCount,
-          deliveryStatus: _messageResponse2.deliveryStatus,
-          attachments: [],
-          mentionedUsers: _messageResponse2.mentionedUsers,
-          metadata: _messageResponse2.metadata,
-          parentMessage: _messageResponse2.parentMessage,
-          repliedInThread: _messageResponse2.repliedInThread,
-          bodyAttributes: _messageResponse2.bodyAttributes,
-          createdAt: _messageResponse2.createdAt,
-          channelId: channel.id
-        };
-        isInActiveChannel = getMessagesFromMap(channelId)[_messageCopy2.tid];
-        if (!isInActiveChannel) {
-          _context6.n = 29;
-          break;
-        }
-        _context6.n = 29;
-        return put(removePendingMessageAC(channel.id, _messageCopy2.tid || _messageCopy2.id));
-      case 29:
-        _context6.n = 30;
-        return put(updateMessageAC(_messageCopy2.tid, _messageUpdateData));
-      case 30:
-        updateMessageOnMap(channel.id, {
-          messageId: _messageCopy2.tid,
-          params: _messageUpdateData
-        });
-        activeChannelId = getActiveChannelId();
-        if (!(channelId === activeChannelId)) {
-          _context6.n = 32;
-          break;
-        }
-        _context6.n = 31;
-        return put(updateMessageAC(_messageCopy2.tid, JSON.parse(JSON.stringify(_messageResponse2))));
-      case 31:
-        updateMessageOnMap(channel.id, {
-          messageId: _messageCopy2.tid,
-          params: _messageUpdateData
-        });
-        updateMessageOnAllMessages(_messageCopy2.tid, _messageUpdateData);
-      case 32:
-        updateChannelOnAllChannels(channel.id, channel);
-        _messageToUpdate = JSON.parse(JSON.stringify(_messageResponse2));
-        updateChannelLastMessageOnAllChannels(channel.id, _messageToUpdate);
-        _context6.n = 33;
-        return put(updateChannelLastMessageAC(_messageToUpdate, {
-          id: channel.id
-        }));
-      case 33:
-        _context6.n = 34;
-        return put(scrollToNewMessageAC(true));
-      case 34:
-        _context6.n = 37;
-        break;
-      case 35:
-        _context6.p = 35;
-        _t6 = _context6.v;
-        log.error('ERROR in resend message', _t6.message, 'channel.. . ', channel);
-        _context6.n = 36;
-        return put(updateMessageAC(message.tid, {
-          state: MESSAGE_STATUS.FAILED
-        }));
-      case 36:
-        updateMessageOnMap(channel.id, {
-          messageId: message.tid,
-          params: {
-            state: MESSAGE_STATUS.FAILED
-          }
-        });
-        updateMessageOnAllMessages(message.tid, {
-          state: MESSAGE_STATUS.FAILED
-        });
-      case 37:
-        _context6.n = 38;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 38:
+      case 1:
         return _context6.a(2);
     }
-  }, _marked4$1, null, [[8, 23], [3, 35]]);
+  }, _marked4$1);
 }
 function deleteMessage(action) {
-  var payload, messageId, channelId, deleteOption, channel, deletedMessage, messageToUpdate, _t7;
+  var payload, messageId, channelId, deleteOption, channel, deletedMessage, messageToUpdate, _t5;
   return _regenerator().w(function (_context7) {
     while (1) switch (_context7.p = _context7.n) {
       case 0:
@@ -19896,21 +19544,21 @@ function deleteMessage(action) {
         break;
       case 5:
         _context7.p = 5;
-        _t7 = _context7.v;
-        log.error('ERROR in delete message', _t7.message);
+        _t5 = _context7.v;
+        log.error('ERROR in delete message', _t5.message);
       case 6:
         return _context7.a(2);
     }
   }, _marked5$1, null, [[0, 5]]);
 }
 function editMessage(action) {
-  var payload, _message, channelId, channel, linkAttachments, anotherAttachments, linkAttachmentsToSend, editedMessage, messageToUpdate, _t8;
+  var payload, message, channelId, channel, linkAttachments, anotherAttachments, linkAttachmentsToSend, editedMessage, messageToUpdate, _t6;
   return _regenerator().w(function (_context8) {
     while (1) switch (_context8.p = _context8.n) {
       case 0:
         _context8.p = 0;
         payload = action.payload;
-        _message = payload.message, channelId = payload.channelId;
+        message = payload.message, channelId = payload.channelId;
         _context8.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
@@ -19921,11 +19569,11 @@ function editMessage(action) {
             setChannelInMap(channel);
           }
         }
-        if (_message.attachments.length > 0) {
-          linkAttachments = _message.attachments.filter(function (att) {
+        if (message.attachments.length > 0) {
+          linkAttachments = message.attachments.filter(function (att) {
             return att.type === attachmentTypes.link;
           });
-          anotherAttachments = _message.attachments.filter(function (att) {
+          anotherAttachments = message.attachments.filter(function (att) {
             return att.type !== attachmentTypes.link;
           });
           linkAttachmentsToSend = [];
@@ -19934,12 +19582,12 @@ function editMessage(action) {
             var linkAttachmentToSend = linkAttachmentBuilder.setName(linkAttachment.name).setUpload(linkAttachment.upload).create();
             linkAttachmentsToSend.push(linkAttachmentToSend);
           });
-          _message.attachments = [].concat(anotherAttachments, linkAttachmentsToSend);
+          message.attachments = [].concat(anotherAttachments, linkAttachmentsToSend);
         }
         _context8.n = 2;
-        return call(channel.editMessage, _extends({}, _message, {
-          metadata: isJSON(_message.metadata) ? _message.metadata : JSON.stringify(_message.metadata),
-          attachments: _message.attachments.map(function (att) {
+        return call(channel.editMessage, _extends({}, message, {
+          metadata: isJSON(message.metadata) ? message.metadata : JSON.stringify(message.metadata),
+          attachments: message.attachments.map(function (att) {
             return _extends({}, att, {
               metadata: isJSON(att.metadata) ? att.metadata : JSON.stringify(att.metadata)
             });
@@ -19954,8 +19602,8 @@ function editMessage(action) {
           messageId: editedMessage.id,
           params: editedMessage
         });
-        updateMessageOnAllMessages(_message.id, editedMessage);
-        if (!(channel.lastMessage.id === _message.id)) {
+        updateMessageOnAllMessages(message.id, editedMessage);
+        if (!(channel.lastMessage.id === message.id)) {
           _context8.n = 4;
           break;
         }
@@ -19968,15 +19616,15 @@ function editMessage(action) {
         break;
       case 5:
         _context8.p = 5;
-        _t8 = _context8.v;
-        log.error('ERROR in edit message', _t8.message);
+        _t6 = _context8.v;
+        log.error('ERROR in edit message', _t6.message);
       case 6:
         return _context8.a(2);
     }
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, _t7;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -20317,8 +19965,8 @@ function getMessagesQuery(action) {
         break;
       case 50:
         _context9.p = 50;
-        _t9 = _context9.v;
-        log.error('error in message query', _t9);
+        _t7 = _context9.v;
+        log.error('error in message query', _t7);
       case 51:
         _context9.p = 51;
         _context9.n = 52;
@@ -20331,7 +19979,7 @@ function getMessagesQuery(action) {
   }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function getMessageQuery(action) {
-  var payload, channelId, messageId, channel, messages, fetchedMessage, _t0;
+  var payload, channelId, messageId, channel, messages, fetchedMessage, _t8;
   return _regenerator().w(function (_context0) {
     while (1) switch (_context0.p = _context0.n) {
       case 0:
@@ -20380,15 +20028,15 @@ function getMessageQuery(action) {
         break;
       case 7:
         _context0.p = 7;
-        _t0 = _context0.v;
-        log.error('error in message query', _t0);
+        _t8 = _context0.v;
+        log.error('error in message query', _t8);
       case 8:
         return _context0.a(2);
     }
   }, _marked8$1, null, [[0, 7]]);
 }
 function loadMoreMessages(action) {
-  var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t1;
+  var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t9;
   return _regenerator().w(function (_context1) {
     while (1) switch (_context1.p = _context1.n) {
       case 0:
@@ -20501,15 +20149,15 @@ function loadMoreMessages(action) {
         break;
       case 18:
         _context1.p = 18;
-        _t1 = _context1.v;
-        log.error('error in load more messages', _t1);
+        _t9 = _context1.v;
+        log.error('error in load more messages', _t9);
       case 19:
         return _context1.a(2);
     }
   }, _marked9$1, null, [[0, 18]]);
 }
 function addReaction(action) {
-  var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, _message2, reaction, channelUpdateParam, _t10;
+  var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, message, reaction, channelUpdateParam, _t0;
   return _regenerator().w(function (_context10) {
     while (1) switch (_context10.p = _context10.n) {
       case 0:
@@ -20531,15 +20179,15 @@ function addReaction(action) {
         return call(channel.addReaction, messageId, key, score, reason, enforceUnique);
       case 2:
         _yield$call = _context10.v;
-        _message2 = _yield$call.message;
+        message = _yield$call.message;
         reaction = _yield$call.reaction;
-        if (!(user.id === _message2.user.id)) {
+        if (!(user.id === message.user.id)) {
           _context10.n = 4;
           break;
         }
         channelUpdateParam = {
           userMessageReactions: [reaction],
-          lastReactedMessage: _message2,
+          lastReactedMessage: message,
           newReactions: [reaction]
         };
         _context10.n = 3;
@@ -20554,23 +20202,23 @@ function addReaction(action) {
         return put(addReactionToListAC(reaction));
       case 6:
         _context10.n = 7;
-        return put(addReactionToMessageAC(_message2, reaction, true));
+        return put(addReactionToMessageAC(message, reaction, true));
       case 7:
-        addReactionToMessageOnMap(channelId, _message2, reaction, true);
-        addReactionOnAllMessages(_message2, reaction, true);
+        addReactionToMessageOnMap(channelId, message, reaction, true);
+        addReactionOnAllMessages(message, reaction, true);
         _context10.n = 9;
         break;
       case 8:
         _context10.p = 8;
-        _t10 = _context10.v;
-        log.error('ERROR in add reaction', _t10.message);
+        _t0 = _context10.v;
+        log.error('ERROR in add reaction', _t0.message);
       case 9:
         return _context10.a(2);
     }
   }, _marked0$1, null, [[0, 8]]);
 }
 function deleteReaction(action) {
-  var payload, channelId, messageId, key, isLastReaction, channel, _yield$call2, _message3, reaction, channelUpdateParam, _t11;
+  var payload, channelId, messageId, key, isLastReaction, channel, _yield$call2, message, reaction, channelUpdateParam, _t1;
   return _regenerator().w(function (_context11) {
     while (1) switch (_context11.p = _context11.n) {
       case 0:
@@ -20591,7 +20239,7 @@ function deleteReaction(action) {
         return call(channel.deleteReaction, messageId, key);
       case 2:
         _yield$call2 = _context11.v;
-        _message3 = _yield$call2.message;
+        message = _yield$call2.message;
         reaction = _yield$call2.reaction;
         if (!isLastReaction) {
           _context11.n = 4;
@@ -20610,23 +20258,23 @@ function deleteReaction(action) {
         return put(deleteReactionFromListAC(reaction));
       case 5:
         _context11.n = 6;
-        return put(deleteReactionFromMessageAC(_message3, reaction, true));
+        return put(deleteReactionFromMessageAC(message, reaction, true));
       case 6:
-        removeReactionToMessageOnMap(channelId, _message3, reaction, true);
-        removeReactionOnAllMessages(_message3, reaction, true);
+        removeReactionToMessageOnMap(channelId, message, reaction, true);
+        removeReactionOnAllMessages(message, reaction, true);
         _context11.n = 8;
         break;
       case 7:
         _context11.p = 7;
-        _t11 = _context11.v;
-        log.error('ERROR in delete reaction', _t11.message);
+        _t1 = _context11.v;
+        log.error('ERROR in delete reaction', _t1.message);
       case 8:
         return _context11.a(2);
     }
   }, _marked1$1, null, [[0, 7]]);
 }
 function getReactions(action) {
-  var payload, messageId, key, limit, SceytChatClient, reactionQueryBuilder, reactionQuery, result, _t12;
+  var payload, messageId, key, limit, SceytChatClient, reactionQueryBuilder, reactionQuery, result, _t10;
   return _regenerator().w(function (_context12) {
     while (1) switch (_context12.p = _context12.n) {
       case 0:
@@ -20661,15 +20309,15 @@ function getReactions(action) {
         break;
       case 6:
         _context12.p = 6;
-        _t12 = _context12.v;
-        log.error('ERROR in get reactions', _t12.message);
+        _t10 = _context12.v;
+        log.error('ERROR in get reactions', _t10.message);
       case 7:
         return _context12.a(2);
     }
   }, _marked10$1, null, [[0, 6]]);
 }
 function loadMoreReactions(action) {
-  var payload, limit, ReactionQuery, result, _t13;
+  var payload, limit, ReactionQuery, result, _t11;
   return _regenerator().w(function (_context13) {
     while (1) switch (_context13.p = _context13.n) {
       case 0:
@@ -20697,15 +20345,15 @@ function loadMoreReactions(action) {
         break;
       case 5:
         _context13.p = 5;
-        _t13 = _context13.v;
-        log.error('ERROR in load more reactions', _t13.message);
+        _t11 = _context13.v;
+        log.error('ERROR in load more reactions', _t11.message);
       case 6:
         return _context13.a(2);
     }
   }, _marked11$1, null, [[0, 5]]);
 }
 function getMessageAttachments(action) {
-  var _action$payload2, channelId, attachmentType, limit, direction, attachmentId, forPopup, SceytChatClient, typeList, AttachmentByTypeQueryBuilder, AttachmentByTypeQuery, result, _t14;
+  var _action$payload2, channelId, attachmentType, limit, direction, attachmentId, forPopup, SceytChatClient, typeList, AttachmentByTypeQueryBuilder, AttachmentByTypeQuery, result, _t12;
   return _regenerator().w(function (_context14) {
     while (1) switch (_context14.p = _context14.n) {
       case 0:
@@ -20783,15 +20431,15 @@ function getMessageAttachments(action) {
         break;
       case 13:
         _context14.p = 13;
-        _t14 = _context14.v;
-        log.error('error in message attachment query', _t14);
+        _t12 = _context14.v;
+        log.error('error in message attachment query', _t12);
       case 14:
         return _context14.a(2);
     }
   }, _marked12$1, null, [[0, 13]]);
 }
 function loadMoreMessageAttachments(action) {
-  var _action$payload3, limit, direction, forPopup, AttachmentQuery, _yield$call3, attachments, hasNext, _t15;
+  var _action$payload3, limit, direction, forPopup, AttachmentQuery, _yield$call3, attachments, hasNext, _t13;
   return _regenerator().w(function (_context15) {
     while (1) switch (_context15.p = _context15.n) {
       case 0:
@@ -20835,15 +20483,15 @@ function loadMoreMessageAttachments(action) {
         break;
       case 8:
         _context15.p = 8;
-        _t15 = _context15.v;
-        log.error('error in message attachment query', _t15);
+        _t13 = _context15.v;
+        log.error('error in message attachment query', _t13);
       case 9:
         return _context15.a(2);
     }
   }, _marked13$1, null, [[0, 8]]);
 }
 function pauseAttachmentUploading(action) {
-  var attachmentId, isPaused, _t16;
+  var attachmentId, isPaused, _t14;
   return _regenerator().w(function (_context16) {
     while (1) switch (_context16.p = _context16.n) {
       case 0:
@@ -20865,15 +20513,15 @@ function pauseAttachmentUploading(action) {
         break;
       case 2:
         _context16.p = 2;
-        _t16 = _context16.v;
-        log.error('error in pause attachment uploading', _t16);
+        _t14 = _context16.v;
+        log.error('error in pause attachment uploading', _t14);
       case 3:
         return _context16.a(2);
     }
   }, _marked14$1, null, [[0, 2]]);
 }
 function resumeAttachmentUploading(action) {
-  var attachmentId, isResumed, _t17;
+  var attachmentId, isResumed, _t15;
   return _regenerator().w(function (_context17) {
     while (1) switch (_context17.p = _context17.n) {
       case 0:
@@ -20896,15 +20544,15 @@ function resumeAttachmentUploading(action) {
         break;
       case 2:
         _context17.p = 2;
-        _t17 = _context17.v;
-        log.error('error in resume attachment uploading', _t17);
+        _t15 = _context17.v;
+        log.error('error in resume attachment uploading', _t15);
       case 3:
         return _context17.a(2);
     }
   }, _marked15$1, null, [[0, 2]]);
 }
 function getMessageMarkers(action) {
-  var _action$payload4, messageId, channelId, deliveryStatus, sceytChatClient, messageMarkerListQueryBuilder, messageMarkerListQuery, messageMarkers, _t18;
+  var _action$payload4, messageId, channelId, deliveryStatus, sceytChatClient, messageMarkerListQueryBuilder, messageMarkerListQuery, messageMarkers, _t16;
   return _regenerator().w(function (_context18) {
     while (1) switch (_context18.p = _context18.n) {
       case 0:
@@ -20934,8 +20582,8 @@ function getMessageMarkers(action) {
         break;
       case 5:
         _context18.p = 5;
-        _t18 = _context18.v;
-        log.error('error in get message markers', _t18);
+        _t16 = _context18.v;
+        log.error('error in get message markers', _t16);
       case 6:
         _context18.p = 6;
         _context18.n = 7;
@@ -21073,13 +20721,13 @@ function updateMessageOptimisticallyForAddPollVote(channelId, message, vote) {
   }, _marked18$1);
 }
 function addPollVote(action) {
-  var payload, channelId, pollId, optionId, _message4, isResend, sceytChatClient, _user$presence2, connectionState, user, vote, pendingAction, conflictCheck, channel, _Object$values2, _store$getState$Messa, _currentMessage$pollD, _currentMessage$pollD2, _currentMessage$pollD3, currentMessage, hasNext, obj, _t19;
+  var payload, channelId, pollId, optionId, message, isResend, sceytChatClient, _user$presence2, connectionState, user, vote, pendingAction, conflictCheck, channel, _Object$values2, _store$getState$Messa, _currentMessage$pollD, _currentMessage$pollD2, _currentMessage$pollD3, currentMessage, hasNext, obj, _t17;
   return _regenerator().w(function (_context21) {
     while (1) switch (_context21.p = _context21.n) {
       case 0:
         _context21.p = 0;
         payload = action.payload;
-        channelId = payload.channelId, pollId = payload.pollId, optionId = payload.optionId, _message4 = payload.message, isResend = payload.isResend;
+        channelId = payload.channelId, pollId = payload.pollId, optionId = payload.optionId, message = payload.message, isResend = payload.isResend;
         sceytChatClient = getClient();
         if (!sceytChatClient) {
           _context21.n = 7;
@@ -21117,7 +20765,7 @@ function addPollVote(action) {
           channelId: channelId,
           pollId: pollId,
           optionId: optionId,
-          message: _message4
+          message: message
         };
         conflictCheck = checkPendingPollActionConflict(pendingAction);
         if (!(conflictCheck.hasConflict && !conflictCheck.shouldSkip)) {
@@ -21133,11 +20781,11 @@ function addPollVote(action) {
           break;
         }
         currentMessage = ((_Object$values2 = Object.values(getMessagesFromMap(channelId) || {})) === null || _Object$values2 === void 0 ? void 0 : _Object$values2.find(function (msg) {
-          return msg.id === _message4.id || msg.tid === _message4.id;
-        })) || _message4;
+          return msg.id === message.id || msg.tid === message.id;
+        })) || message;
         hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[pollId]) || false;
         _context21.n = 2;
-        return put(addPollVotesToListAC(pollId, optionId, [(_currentMessage$pollD = currentMessage.pollDetails) === null || _currentMessage$pollD === void 0 ? void 0 : (_currentMessage$pollD2 = _currentMessage$pollD.voteDetails) === null || _currentMessage$pollD2 === void 0 ? void 0 : (_currentMessage$pollD3 = _currentMessage$pollD2.ownVotes) === null || _currentMessage$pollD3 === void 0 ? void 0 : _currentMessage$pollD3[0]], hasNext, _message4.id));
+        return put(addPollVotesToListAC(pollId, optionId, [(_currentMessage$pollD = currentMessage.pollDetails) === null || _currentMessage$pollD === void 0 ? void 0 : (_currentMessage$pollD2 = _currentMessage$pollD.voteDetails) === null || _currentMessage$pollD2 === void 0 ? void 0 : (_currentMessage$pollD3 = _currentMessage$pollD2.ownVotes) === null || _currentMessage$pollD3 === void 0 ? void 0 : _currentMessage$pollD3[0]], hasNext, message.id));
       case 2:
         obj = {
           type: 'addOwn',
@@ -21145,12 +20793,12 @@ function addPollVote(action) {
           incrementVotesPerOptionCount: 1
         };
         updateMessageOnMap(channel.id, {
-          messageId: _message4.id,
+          messageId: message.id,
           params: {}
         }, obj);
-        updateMessageOnAllMessages(_message4.id, {}, obj);
+        updateMessageOnAllMessages(message.id, {}, obj);
         _context21.n = 3;
-        return put(updateMessageAC(_message4.id, {}, undefined, obj));
+        return put(updateMessageAC(message.id, {}, undefined, obj));
       case 3:
         _context21.n = 5;
         break;
@@ -21159,21 +20807,21 @@ function addPollVote(action) {
           _context21.n = 5;
           break;
         }
-        return _context21.d(_regeneratorValues(updateMessageOptimisticallyForAddPollVote(channelId, _message4, vote)), 5);
+        return _context21.d(_regeneratorValues(updateMessageOptimisticallyForAddPollVote(channelId, message, vote)), 5);
       case 5:
         if (!conflictCheck.shouldSkip) {
           setPendingPollAction(pendingAction);
         }
         return _context21.a(2);
       case 6:
-        return _context21.d(_regeneratorValues(executeAddPollVote(channelId, pollId, optionId, _message4, isResend)), 7);
+        return _context21.d(_regeneratorValues(executeAddPollVote(channelId, pollId, optionId, message, isResend)), 7);
       case 7:
         _context21.n = 9;
         break;
       case 8:
         _context21.p = 8;
-        _t19 = _context21.v;
-        log.error('error in add poll vote', _t19);
+        _t17 = _context21.v;
+        log.error('error in add poll vote', _t17);
       case 9:
         return _context21.a(2);
     }
@@ -21274,20 +20922,20 @@ function updateMessageOptimisticallyForDeletePollVote(channelId, message, vote)
   }, _marked21$1);
 }
 function deletePollVote(action) {
-  var payload, channelId, pollId, optionId, _message5, isResend, sceytChatClient, _message5$pollDetails, _message5$pollDetails2, _message5$pollDetails3, connectionState, vote, pendingAction, conflictCheck, channel, _Object$values3, _currentMessage$pollD4, _currentMessage$pollD5, _currentMessage$pollD6, currentMessage, obj, _t20;
+  var payload, channelId, pollId, optionId, message, isResend, sceytChatClient, _message$pollDetails1, _message$pollDetails10, _message$pollDetails11, connectionState, vote, pendingAction, conflictCheck, channel, _Object$values3, _currentMessage$pollD4, _currentMessage$pollD5, _currentMessage$pollD6, currentMessage, obj, _t18;
   return _regenerator().w(function (_context24) {
     while (1) switch (_context24.p = _context24.n) {
       case 0:
         _context24.p = 0;
         payload = action.payload;
-        channelId = payload.channelId, pollId = payload.pollId, optionId = payload.optionId, _message5 = payload.message, isResend = payload.isResend;
+        channelId = payload.channelId, pollId = payload.pollId, optionId = payload.optionId, message = payload.message, isResend = payload.isResend;
         sceytChatClient = getClient();
         if (!sceytChatClient) {
           _context24.n = 8;
           break;
         }
         connectionState = sceytChatClient.connectionState;
-        vote = (_message5$pollDetails = _message5.pollDetails) === null || _message5$pollDetails === void 0 ? void 0 : (_message5$pollDetails2 = _message5$pollDetails.voteDetails) === null || _message5$pollDetails2 === void 0 ? void 0 : (_message5$pollDetails3 = _message5$pollDetails2.ownVotes) === null || _message5$pollDetails3 === void 0 ? void 0 : _message5$pollDetails3.find(function (vote) {
+        vote = (_message$pollDetails1 = message.pollDetails) === null || _message$pollDetails1 === void 0 ? void 0 : (_message$pollDetails10 = _message$pollDetails1.voteDetails) === null || _message$pollDetails10 === void 0 ? void 0 : (_message$pollDetails11 = _message$pollDetails10.ownVotes) === null || _message$pollDetails11 === void 0 ? void 0 : _message$pollDetails11.find(function (vote) {
           return vote.optionId === optionId;
         });
         if (vote) {
@@ -21305,7 +20953,7 @@ function deletePollVote(action) {
           channelId: channelId,
           pollId: pollId,
           optionId: optionId,
-          message: _message5
+          message: message
         };
         conflictCheck = checkPendingPollActionConflict(pendingAction);
         if (!(conflictCheck.hasConflict && conflictCheck.shouldSkip)) {
@@ -21321,10 +20969,10 @@ function deletePollVote(action) {
           break;
         }
         currentMessage = ((_Object$values3 = Object.values(getMessagesFromMap(channelId) || {})) === null || _Object$values3 === void 0 ? void 0 : _Object$values3.find(function (msg) {
-          return msg.id === _message5.id || msg.tid === _message5.id;
-        })) || _message5;
+          return msg.id === message.id || msg.tid === message.id;
+        })) || message;
         _context24.n = 3;
-        return put(deletePollVotesFromListAC(pollId, optionId, [(_currentMessage$pollD4 = currentMessage.pollDetails) === null || _currentMessage$pollD4 === void 0 ? void 0 : (_currentMessage$pollD5 = _currentMessage$pollD4.voteDetails) === null || _currentMessage$pollD5 === void 0 ? void 0 : (_currentMessage$pollD6 = _currentMessage$pollD5.ownVotes) === null || _currentMessage$pollD6 === void 0 ? void 0 : _currentMessage$pollD6[0]], _message5.id));
+        return put(deletePollVotesFromListAC(pollId, optionId, [(_currentMessage$pollD4 = currentMessage.pollDetails) === null || _currentMessage$pollD4 === void 0 ? void 0 : (_currentMessage$pollD5 = _currentMessage$pollD4.voteDetails) === null || _currentMessage$pollD5 === void 0 ? void 0 : (_currentMessage$pollD6 = _currentMessage$pollD5.ownVotes) === null || _currentMessage$pollD6 === void 0 ? void 0 : _currentMessage$pollD6[0]], message.id));
       case 3:
         obj = {
           type: 'deleteOwn',
@@ -21332,12 +20980,12 @@ function deletePollVote(action) {
           incrementVotesPerOptionCount: -1
         };
         updateMessageOnMap(channel.id, {
-          messageId: _message5.id,
+          messageId: message.id,
           params: {}
         }, obj);
-        updateMessageOnAllMessages(_message5.id, {}, obj);
+        updateMessageOnAllMessages(message.id, {}, obj);
         _context24.n = 4;
-        return put(updateMessageAC(_message5.id, {}, undefined, obj));
+        return put(updateMessageAC(message.id, {}, undefined, obj));
       case 4:
         _context24.n = 6;
         break;
@@ -21346,21 +20994,21 @@ function deletePollVote(action) {
           _context24.n = 6;
           break;
         }
-        return _context24.d(_regeneratorValues(updateMessageOptimisticallyForDeletePollVote(channelId, _message5, vote)), 6);
+        return _context24.d(_regeneratorValues(updateMessageOptimisticallyForDeletePollVote(channelId, message, vote)), 6);
       case 6:
         if (!conflictCheck.shouldSkip) {
           setPendingPollAction(pendingAction);
         }
         return _context24.a(2);
       case 7:
-        return _context24.d(_regeneratorValues(executeDeletePollVote(channelId, pollId, optionId, _message5, isResend)), 8);
+        return _context24.d(_regeneratorValues(executeDeletePollVote(channelId, pollId, optionId, message, isResend)), 8);
       case 8:
         _context24.n = 10;
         break;
       case 9:
         _context24.p = 9;
-        _t20 = _context24.v;
-        log.error('error in delete poll vote', _t20);
+        _t18 = _context24.v;
+        log.error('error in delete poll vote', _t18);
       case 10:
         return _context24.a(2);
     }
@@ -21438,13 +21086,13 @@ function updateMessageOptimisticallyForClosePoll(channelId, message) {
   }, _marked24$1);
 }
 function closePoll(action) {
-  var payload, channelId, pollId, _message6, sceytChatClient, connectionState, _t21;
+  var payload, channelId, pollId, message, sceytChatClient, connectionState, _t19;
   return _regenerator().w(function (_context27) {
     while (1) switch (_context27.p = _context27.n) {
       case 0:
         _context27.p = 0;
         payload = action.payload;
-        channelId = payload.channelId, pollId = payload.pollId, _message6 = payload.message;
+        channelId = payload.channelId, pollId = payload.pollId, message = payload.message;
         sceytChatClient = getClient();
         if (!sceytChatClient) {
           _context27.n = 3;
@@ -21455,24 +21103,24 @@ function closePoll(action) {
           _context27.n = 2;
           break;
         }
-        return _context27.d(_regeneratorValues(updateMessageOptimisticallyForClosePoll(channelId, _message6)), 1);
+        return _context27.d(_regeneratorValues(updateMessageOptimisticallyForClosePoll(channelId, message)), 1);
       case 1:
         setPendingPollAction({
           type: 'CLOSE_POLL',
           channelId: channelId,
           pollId: pollId,
-          message: _message6
+          message: message
         });
         return _context27.a(2);
       case 2:
-        return _context27.d(_regeneratorValues(executeClosePoll(channelId, pollId, _message6)), 3);
+        return _context27.d(_regeneratorValues(executeClosePoll(channelId, pollId, message)), 3);
       case 3:
         _context27.n = 5;
         break;
       case 4:
         _context27.p = 4;
-        _t21 = _context27.v;
-        log.error('error in close poll', _t21);
+        _t19 = _context27.v;
+        log.error('error in close poll', _t19);
       case 5:
         return _context27.a(2);
     }
@@ -21561,13 +21209,13 @@ function updateMessageOptimisticallyForRetractPollVote(channelId, message, objs)
   }, _marked27$1);
 }
 function retractPollVote(action) {
-  var payload, channelId, pollId, _message7, isResend, sceytChatClient, connectionState, objs, _iterator4, _step4, _message7$pollDetails, _message7$pollDetails2, vote, _t22;
+  var payload, channelId, pollId, message, isResend, sceytChatClient, connectionState, objs, _iterator4, _step4, _message$pollDetails12, _message$pollDetails13, vote, _t20;
   return _regenerator().w(function (_context30) {
     while (1) switch (_context30.p = _context30.n) {
       case 0:
         _context30.p = 0;
         payload = action.payload;
-        channelId = payload.channelId, pollId = payload.pollId, _message7 = payload.message, isResend = payload.isResend;
+        channelId = payload.channelId, pollId = payload.pollId, message = payload.message, isResend = payload.isResend;
         sceytChatClient = getClient();
         if (!sceytChatClient) {
           _context30.n = 3;
@@ -21575,7 +21223,7 @@ function retractPollVote(action) {
         }
         connectionState = sceytChatClient.connectionState;
         objs = [];
-        for (_iterator4 = _createForOfIteratorHelperLoose(((_message7$pollDetails = _message7.pollDetails) === null || _message7$pollDetails === void 0 ? void 0 : (_message7$pollDetails2 = _message7$pollDetails.voteDetails) === null || _message7$pollDetails2 === void 0 ? void 0 : _message7$pollDetails2.ownVotes) || []); !(_step4 = _iterator4()).done;) {
+        for (_iterator4 = _createForOfIteratorHelperLoose(((_message$pollDetails12 = message.pollDetails) === null || _message$pollDetails12 === void 0 ? void 0 : (_message$pollDetails13 = _message$pollDetails12.voteDetails) === null || _message$pollDetails13 === void 0 ? void 0 : _message$pollDetails13.ownVotes) || []); !(_step4 = _iterator4()).done;) {
           vote = _step4.value;
           objs.push({
             type: 'deleteOwn',
@@ -21587,31 +21235,31 @@ function retractPollVote(action) {
           _context30.n = 2;
           break;
         }
-        return _context30.d(_regeneratorValues(updateMessageOptimisticallyForRetractPollVote(channelId, _message7, objs)), 1);
+        return _context30.d(_regeneratorValues(updateMessageOptimisticallyForRetractPollVote(channelId, message, objs)), 1);
       case 1:
         setPendingPollAction({
           type: 'RETRACT_POLL_VOTE',
           channelId: channelId,
           pollId: pollId,
-          message: _message7
+          message: message
         });
         return _context30.a(2);
       case 2:
-        return _context30.d(_regeneratorValues(executeRetractPollVote(channelId, pollId, _message7, objs, isResend)), 3);
+        return _context30.d(_regeneratorValues(executeRetractPollVote(channelId, pollId, message, objs, isResend)), 3);
       case 3:
         _context30.n = 5;
         break;
       case 4:
         _context30.p = 4;
-        _t22 = _context30.v;
-        log.error('error in retract poll vote', _t22);
+        _t20 = _context30.v;
+        log.error('error in retract poll vote', _t20);
       case 5:
         return _context30.a(2);
     }
   }, _marked28$1, null, [[0, 4]]);
 }
 function resendPendingPollActions(action) {
-  var payload, connectionState, sceytChatClient, pendingPollActionsMap, pendingPollActionsMapCopy, _t23;
+  var payload, connectionState, sceytChatClient, pendingPollActionsMap, pendingPollActionsMapCopy, _t21;
   return _regenerator().w(function (_context31) {
     while (1) switch (_context31.p = _context31.n) {
       case 0:
@@ -21667,15 +21315,15 @@ function resendPendingPollActions(action) {
         break;
       case 3:
         _context31.p = 3;
-        _t23 = _context31.v;
-        log.error('error in resend pending poll actions', _t23);
+        _t21 = _context31.v;
+        log.error('error in resend pending poll actions', _t21);
       case 4:
         return _context31.a(2);
     }
   }, _marked29$1, null, [[0, 3]]);
 }
 function getPollVotes(action) {
-  var payload, messageId, pollId, optionId, limit, key, SceytChatClient, queryBuilder, pollVotesQuery, result, formattedVotes, _t24;
+  var payload, messageId, pollId, optionId, limit, key, SceytChatClient, queryBuilder, pollVotesQuery, result, formattedVotes, _t22;
   return _regenerator().w(function (_context32) {
     while (1) switch (_context32.p = _context32.n) {
       case 0:
@@ -21741,8 +21389,8 @@ function getPollVotes(action) {
         break;
       case 7:
         _context32.p = 7;
-        _t24 = _context32.v;
-        log.error('ERROR in get poll votes', _t24);
+        _t22 = _context32.v;
+        log.error('ERROR in get poll votes', _t22);
         _context32.n = 8;
         return put(setPollVotesLoadingStateAC(action.payload.pollId, action.payload.optionId, LOADING_STATE.LOADED));
       case 8:
@@ -21751,7 +21399,7 @@ function getPollVotes(action) {
   }, _marked30$1, null, [[0, 7]]);
 }
 function loadMorePollVotes(action) {
-  var payload, pollId, optionId, limit, key, pollVotesQuery, result, formattedVotes, _t25;
+  var payload, pollId, optionId, limit, key, pollVotesQuery, result, formattedVotes, _t23;
   return _regenerator().w(function (_context33) {
     while (1) switch (_context33.p = _context33.n) {
       case 0:
@@ -21809,8 +21457,8 @@ function loadMorePollVotes(action) {
         break;
       case 6:
         _context33.p = 6;
-        _t25 = _context33.v;
-        log.error('ERROR in load more poll votes', _t25);
+        _t23 = _context33.v;
+        log.error('ERROR in load more poll votes', _t23);
         _context33.n = 7;
         return put(setPollVotesLoadingStateAC(action.payload.pollId, action.payload.optionId, LOADING_STATE.LOADED));
       case 7:
@@ -27245,6 +26893,106 @@ var MobileBackButtonWrapper = styled.span(_templateObject8$6 || (_templateObject
 var DefaultInfoIcon = styled(SvgInfo)(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose([""])));
 var WrapArrowLeftIcon = styled(SvgArrowLeft)(_templateObject0$4 || (_templateObject0$4 = _taggedTemplateLiteralLoose([""])));
 
+var activeChannelMessagesSelector = function activeChannelMessagesSelector(store) {
+  return store.MessageReducer.activeChannelMessages;
+};
+var messagesLoadingState = function messagesLoadingState(store) {
+  return store.MessageReducer.messagesLoadingState;
+};
+var messagesHasNextSelector = function messagesHasNextSelector(store) {
+  return store.MessageReducer.messagesHasNext;
+};
+var messagesHasPrevSelector = function messagesHasPrevSelector(store) {
+  return store.MessageReducer.messagesHasPrev;
+};
+var attachmentCompilationStateSelector = function attachmentCompilationStateSelector(store) {
+  return store.MessageReducer.attachmentsUploadingState;
+};
+var attachmentsUploadProgressSelector = function attachmentsUploadProgressSelector(store) {
+  return store.MessageReducer.attachmentsUploadingProgress;
+};
+var activeTabAttachmentsSelector = function activeTabAttachmentsSelector(store) {
+  return store.MessageReducer.activeTabAttachments;
+};
+var activeTabAttachmentsHasNextSelector = function activeTabAttachmentsHasNextSelector(store) {
+  return store.MessageReducer.attachmentHasNext;
+};
+var attachmentsForPopupSelector = function attachmentsForPopupSelector(store) {
+  return store.MessageReducer.attachmentsForPopup;
+};
+var messageForReplySelector = function messageForReplySelector(store) {
+  return store.MessageReducer.messageForReply;
+};
+var messageToEditSelector = function messageToEditSelector(store) {
+  return store.MessageReducer.messageToEdit;
+};
+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;
+};
+var sendMessageInputHeightSelector = function sendMessageInputHeightSelector(store) {
+  return store.MessageReducer.sendMessageInputHeight;
+};
+var scrollToMessageSelector = function scrollToMessageSelector(store) {
+  return store.MessageReducer.scrollToMessage;
+};
+var scrollToMessageHighlightSelector = function scrollToMessageHighlightSelector(store) {
+  return store.MessageReducer.scrollToMessageHighlight;
+};
+var scrollToMessageBehaviorSelector = function scrollToMessageBehaviorSelector(store) {
+  return store.MessageReducer.scrollToMessageBehavior;
+};
+var reactionsListSelector = function reactionsListSelector(store) {
+  return store.MessageReducer.reactionsList;
+};
+var reactionsHasNextSelector = function reactionsHasNextSelector(store) {
+  return store.MessageReducer.reactionsHasNext;
+};
+var reactionsLoadingStateSelector = function reactionsLoadingStateSelector(store) {
+  return store.MessageReducer.reactionsLoadingState;
+};
+var openedMessageMenuSelector = function openedMessageMenuSelector(store) {
+  return store.MessageReducer.openedMessageMenu;
+};
+var playingAudioIdSelector = function playingAudioIdSelector(store) {
+  return store.MessageReducer.playingAudioId;
+};
+var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
+  return store.MessageReducer.selectedMessagesMap;
+};
+var attachmentUpdatedMapSelector = function attachmentUpdatedMapSelector(store) {
+  return store.MessageReducer.attachmentUpdatedMap;
+};
+var messageMarkersSelector = function messageMarkersSelector(store) {
+  return store.MessageReducer.messageMarkers;
+};
+var messagesMarkersLoadingStateSelector = function messagesMarkersLoadingStateSelector(store) {
+  return store.MessageReducer.messagesMarkersLoadingState;
+};
+var pollVotesListSelector = function pollVotesListSelector(store) {
+  return store.MessageReducer.pollVotesList;
+};
+var pollVotesHasMoreSelector = function pollVotesHasMoreSelector(store) {
+  return store.MessageReducer.pollVotesHasMore;
+};
+var pollVotesLoadingStateSelector = function pollVotesLoadingStateSelector(store) {
+  return store.MessageReducer.pollVotesLoadingState;
+};
+var pendingPollActionsSelector = function pendingPollActionsSelector(store) {
+  return store.MessageReducer.pendingPollActions;
+};
+var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
+  return store.MessageReducer.pendingMessagesMap;
+};
+var unreadScrollToSelector = function unreadScrollToSelector(store) {
+  return store.MessageReducer.unreadScrollTo;
+};
+
 var _path$u;
 function _extends$v() {
   return _extends$v = Object.assign ? Object.assign.bind() : function (n) {
@@ -30171,7 +29919,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
   var withPrefix = true;
   if (file.metadata && file.metadata.tmb) {
     if (file.metadata.tmb.length < 70) {
-      attachmentThumb = base64ToToDataURL(file.metadata.tmb);
+      attachmentThumb = base64ToDataURL(file.metadata.tmb);
       withPrefix = false;
     } else {
       attachmentThumb = file.metadata && file.metadata.tmb;
@@ -32241,8 +31989,74 @@ class WaveSurfer extends Player {
 WaveSurfer.BasePlugin = BasePlugin;
 WaveSurfer.dom = dom;
 
-var _templateObject$v, _templateObject2$r, _templateObject3$m, _templateObject4$i, _templateObject5$f, _templateObject6$d;
+var _templateObject$v, _templateObject2$r;
+var AudioVisualization = function AudioVisualization(_ref) {
+  var tmb = _ref.tmb,
+    duration = _ref.duration,
+    currentTime = _ref.currentTime,
+    waveColor = _ref.waveColor,
+    progressColor = _ref.progressColor,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 20 : _ref$height,
+    _ref$barWidth = _ref.barWidth,
+    barWidth = _ref$barWidth === void 0 ? 1 : _ref$barWidth,
+    _ref$barGap = _ref.barGap,
+    barGap = _ref$barGap === void 0 ? 2 : _ref$barGap,
+    _ref$barRadius = _ref.barRadius,
+    barRadius = _ref$barRadius === void 0 ? 1.5 : _ref$barRadius;
+  var normalizedBars = useMemo(function () {
+    if (!tmb || tmb.length === 0) return [];
+    var maxVal = Math.max.apply(Math, tmb);
+    if (maxVal === 0) return [];
+    return tmb.map(function (value) {
+      var normalized = value / maxVal * height;
+      return Math.max(2, normalized);
+    });
+  }, [tmb, height]);
+  var progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
+  var lastPlayedBarIndex = useMemo(function () {
+    if (progressPercentage === 0) return -1;
+    var barIndex = Math.floor(progressPercentage / 100 * normalizedBars.length);
+    return Math.min(barIndex, normalizedBars.length - 1);
+  }, [progressPercentage, normalizedBars.length]);
+  return /*#__PURE__*/React__default.createElement(Container$e, {
+    height: height
+  }, normalizedBars.map(function (barHeight, index) {
+    var barPosition = index / normalizedBars.length * 100;
+    var isPlayed = barPosition < progressPercentage;
+    var isLastPlayed = index === lastPlayedBarIndex;
+    var finalHeight = isLastPlayed ? Math.min(barHeight * 1.3, height) : barHeight;
+    return /*#__PURE__*/React__default.createElement(Bar, {
+      key: index,
+      height: finalHeight,
+      width: barWidth,
+      gap: barGap,
+      radius: barRadius,
+      color: isPlayed ? progressColor : waveColor,
+      isBold: isLastPlayed
+    });
+  }));
+};
+var Container$e = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  width: 100%;\n  gap: 2px;\n"])), function (props) {
+  return props.height;
+});
+var Bar = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  min-height: 2px;\n  transition:\n    background-color 0.1s ease,\n    height 0.1s ease,\n    opacity 0.1s ease;\n  opacity: ", ";\n  ", "\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.radius;
+}, function (props) {
+  return props.isBold ? 1 : 0.8;
+}, function (props) {
+  return props.isBold ? "\n    box-shadow: 0 0 4px " + props.color + ";\n    filter: brightness(1.2);\n  " : '';
+});
+
+var _templateObject$w, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$c;
 var AudioPlayer = function AudioPlayer(_ref) {
+  var _file$metadata, _file$metadata2, _file$metadata3;
   var url = _ref.url,
     file = _ref.file,
     messagePlayed = _ref.messagePlayed,
@@ -32274,9 +32088,15 @@ var AudioPlayer = function AudioPlayer(_ref) {
   var _useState4 = useState(''),
     currentTime = _useState4[0],
     setCurrentTime = _useState4[1];
-  var _useState5 = useState(1),
-    audioRate = _useState5[0],
-    setAudioRate = _useState5[1];
+  var _useState5 = useState(0),
+    currentTimeSeconds = _useState5[0],
+    setCurrentTimeSeconds = _useState5[1];
+  var _useState6 = useState(0),
+    duration = _useState6[0],
+    setDuration = _useState6[1];
+  var _useState7 = useState(1),
+    audioRate = _useState7[0],
+    setAudioRate = _useState7[1];
   var wavesurfer = useRef(null);
   var wavesurferContainer = useRef(null);
   var intervalRef = useRef(null);
@@ -32305,6 +32125,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
           var currentTime = wavesurfer.current.getCurrentTime();
           if (currentTime >= 0) {
             setCurrentTime(formatAudioVideoTime(currentTime));
+            setCurrentTimeSeconds(currentTime);
           }
         }, 10);
       } else {
@@ -32366,8 +32187,8 @@ var AudioPlayer = function AudioPlayer(_ref) {
           try {
             wavesurfer.current = WaveSurfer.create({
               container: wavesurferContainer.current,
-              waveColor: textSecondary,
-              progressColor: accentColor,
+              waveColor: 'transparent',
+              progressColor: 'transparent',
               audioRate: audioRate,
               barWidth: 1,
               barHeight: 1,
@@ -32380,6 +32201,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
             var peaks;
             if (file.metadata) {
               if (file.metadata.dur) {
+                setDuration(file.metadata.dur);
                 setCurrentTime(formatAudioVideoTime(file.metadata.dur));
               }
               if (file.metadata.tmb) {
@@ -32395,6 +32217,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
             wavesurfer.current.load(url, peaks);
             wavesurfer.current.on('ready', function () {
               var audioDuration = wavesurfer.current.getDuration();
+              setDuration(audioDuration);
               setCurrentTime(formatAudioVideoTime(audioDuration));
               wavesurfer.current.drawBuffer = function (d) {
                 log.info('filters --- ', d);
@@ -32404,7 +32227,9 @@ var AudioPlayer = function AudioPlayer(_ref) {
               setPlayAudio(false);
               wavesurfer.current.seekTo(0);
               var audioDuration = wavesurfer.current.getDuration();
-              setCurrentTime(formatAudioVideoTime(audioDuration));
+              setDuration(audioDuration);
+              setCurrentTime(formatAudioVideoTime(0));
+              setCurrentTimeSeconds(0);
               if (playingAudioId === file.id) {
                 dispatch(setPlayingAudioIdAC(null));
               }
@@ -32420,6 +32245,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
             wavesurfer.current.on('interaction', function () {
               var currentTime = wavesurfer.current.getCurrentTime();
               setCurrentTime(formatAudioVideoTime(currentTime));
+              setCurrentTimeSeconds(currentTime);
             });
             if (url !== '_') {
               setIsRendered(true);
@@ -32444,35 +32270,53 @@ var AudioPlayer = function AudioPlayer(_ref) {
       wavesurfer.current.pause();
     }
   }, [playingAudioId]);
-  return /*#__PURE__*/React__default.createElement(Container$e, null, /*#__PURE__*/React__default.createElement(PlayPause, {
+  return /*#__PURE__*/React__default.createElement(Container$f, null, /*#__PURE__*/React__default.createElement(PlayPause, {
     onClick: handlePlayPause,
     iconColor: accentColor
-  }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPause, null) : /*#__PURE__*/React__default.createElement(SvgPlay, null)), /*#__PURE__*/React__default.createElement(WaveContainer, null, /*#__PURE__*/React__default.createElement(AudioVisualization, {
-    ref: wavesurferContainer
-  }), /*#__PURE__*/React__default.createElement(AudioRate, {
+  }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPause, null) : /*#__PURE__*/React__default.createElement(SvgPlay, null)), /*#__PURE__*/React__default.createElement(WaveContainer, null, /*#__PURE__*/React__default.createElement(VisualizationWrapper, null, /*#__PURE__*/React__default.createElement(AudioVisualizationPlaceholder, {
+    ref: wavesurferContainer,
+    hidden: !!((_file$metadata = file.metadata) !== null && _file$metadata !== void 0 && _file$metadata.tmb && Array.isArray(file.metadata.tmb))
+  }), ((_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.tmb) && Array.isArray(file.metadata.tmb) && (/*#__PURE__*/React__default.createElement(AudioVisualization, {
+    tmb: file.metadata.tmb,
+    duration: duration || file.metadata.dur || 0,
+    currentTime: currentTimeSeconds,
+    waveColor: textSecondary,
+    progressColor: accentColor,
+    height: 20,
+    barWidth: 1,
+    barGap: 2,
+    barRadius: 1.5
+  }))), /*#__PURE__*/React__default.createElement(AudioRate, {
     color: textSecondary,
     onClick: handleSetAudioRate,
     backgroundColor: backgroundSections
   }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer$1, {
     color: textSecondary
-  }, currentTime));
+  }, currentTime || formatAudioVideoTime(((_file$metadata3 = file.metadata) === null || _file$metadata3 === void 0 ? void 0 : _file$metadata3.dur) || 0)));
 };
-var Container$e = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  width: 230px;\n  padding: 8px 12px;\n"])));
-var PlayPause = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n    display: flex;\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
+var Container$f = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  width: 230px;\n  padding: 8px 12px;\n"])));
+var PlayPause = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n    display: flex;\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var AudioVisualization = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var AudioRate = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  width: 30px;\n  min-width: 30px;\n  border-radius: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 14px;\n  color: ", ";\n  height: 18px;\n  box-sizing: border-box;\n  margin-left: 14px;\n  cursor: pointer;\n\n  & > span {\n    margin-top: auto;\n    line-height: 16px;\n    font-size: 9px;\n  }\n"])), function (props) {
+var VisualizationWrapper = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
+var AudioVisualizationPlaceholder = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n"])), function (props) {
+  return props.hidden ? 'absolute' : 'relative';
+}, function (props) {
+  return props.hidden ? 0 : 1;
+}, function (props) {
+  return props.hidden ? 'none' : 'auto';
+});
+var AudioRate = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  width: 30px;\n  min-width: 30px;\n  border-radius: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 14px;\n  color: ", ";\n  height: 18px;\n  box-sizing: border-box;\n  margin-left: 14px;\n  cursor: pointer;\n\n  & > span {\n    margin-top: auto;\n    line-height: 16px;\n    font-size: 9px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.color;
 });
-var WaveContainer = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  margin-left: 8px;\n"])));
-var Timer$1 = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 59px;\n  bottom: 12px;\n  display: inline-block;\n  font-weight: 400;\n  font-size: 11px;\n  line-height: 12px;\n  color: ", ";\n"])), function (props) {
+var WaveContainer = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  margin-left: 8px;\n"])));
+var Timer$1 = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 59px;\n  bottom: 12px;\n  display: inline-block;\n  font-weight: 400;\n  font-size: 11px;\n  line-height: 12px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$w, _templateObject2$s, _templateObject3$n, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$c, _templateObject8$b, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
+var _templateObject$x, _templateObject2$t, _templateObject3$n, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -32566,7 +32410,7 @@ var Attachment = function Attachment(_ref) {
   if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
     try {
       if (attachmentMetadata.tmb.length < 70) {
-        attachmentThumb = base64ToToDataURL(attachmentMetadata.tmb);
+        attachmentThumb = base64ToDataURL(attachmentMetadata.tmb);
         withPrefix = false;
       } else {
         attachmentThumb = attachmentMetadata && attachmentMetadata.tmb;
@@ -33112,8 +32956,8 @@ var Attachment = function Attachment(_ref) {
 var Attachment$1 = /*#__PURE__*/React__default.memo(Attachment, function (prevProps, nextProps) {
   return prevProps.attachment.url === nextProps.attachment.url && prevProps.handleMediaItemClick === nextProps.handleMediaItemClick && prevProps.attachment.attachmentUrl === nextProps.attachment.attachmentUrl;
 });
-var DownloadImage = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  visibility: hidden;\n  opacity: 0;\n  width: 28px;\n  height: 28px;\n  top: 12px;\n  right: 17px;\n  border-radius: 50%;\n  line-height: 35px;\n  text-align: center;\n  cursor: pointer;\n  background: #ffffff;\n  box-shadow: 0 4px 4px rgba(6, 10, 38, 0.2);\n  transition: all 0.1s;\n\n  & > svg {\n    width: 16px;\n  }\n"])));
-var AttachmentImgCont = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  max-width: 100%;\n  height: ", ";\n  max-height: 400px;\n  min-height: ", ";\n  cursor: pointer;\n\n  ", "\n\n  &:hover ", " {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  ", "\n"])), function (props) {
+var DownloadImage = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  visibility: hidden;\n  opacity: 0;\n  width: 28px;\n  height: 28px;\n  top: 12px;\n  right: 17px;\n  border-radius: 50%;\n  line-height: 35px;\n  text-align: center;\n  cursor: pointer;\n  background: #ffffff;\n  box-shadow: 0 4px 4px rgba(6, 10, 38, 0.2);\n  transition: all 0.1s;\n\n  & > svg {\n    width: 16px;\n  }\n"])));
+var AttachmentImgCont = styled.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  max-width: 100%;\n  height: ", ";\n  max-height: 400px;\n  min-height: ", ";\n  cursor: pointer;\n\n  ", "\n\n  &:hover ", " {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  ", "\n"])), function (props) {
   return props.isPreview ? '16px' : props.isRepliedMessage ? '8px' : '';
 }, function (props) {
   return !props.isRepliedMessage && !props.fitTheContainer && '165px';
@@ -33142,7 +32986,7 @@ var ProgressWrapper$1 = styled.span(_templateObject5$g || (_templateObject5$g =
 var SizeProgress = styled.span(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: -26px;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: ", ";\n  font-size: 12px;\n  border-radius: 12px;\n  padding: 3px 6px;\n  white-space: nowrap;\n"])), function (props) {
   return props.color;
 });
-var AttachmentFile$1 = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ", ";\n  //width: ", ";\n  min-width: ", ";\n  transition: all 0.1s;\n  //height: 70px;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  margin-right: ", ";\n  border-radius: ", ";\n\n  ", "\n\n  & > ", " svg {\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
+var AttachmentFile$1 = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ", ";\n  //width: ", ";\n  min-width: ", ";\n  transition: all 0.1s;\n  //height: 70px;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  margin-right: ", ";\n  border-radius: ", ";\n\n  ", "\n\n  & > ", " svg {\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
   return !props.isRepliedMessage && '8px 12px;';
 }, function (props) {
   return !props.isRepliedMessage && (props.width ? props.width + "px" : '350px');
@@ -33200,7 +33044,7 @@ var VideoCont = styled.div(_templateObject11$3 || (_templateObject11$3 = _tagged
   return props.isDetailsView && '100%';
 });
 
-var _templateObject$x, _templateObject2$t, _templateObject3$o, _templateObject4$k;
+var _templateObject$y, _templateObject2$u, _templateObject3$o, _templateObject4$k;
 var RepliedMessage = function RepliedMessage(_ref) {
   var _message$parentMessag;
   var message = _ref.message,
@@ -33307,7 +33151,7 @@ var RepliedMessage = function RepliedMessage(_ref) {
 var RepliedMessage$1 = /*#__PURE__*/React__default.memo(RepliedMessage, function (prevProps, nextProps) {
   return prevProps.theme === nextProps.theme && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.selectionIsActive === nextProps.selectionIsActive && prevProps.contactsMap === nextProps.contactsMap;
 });
-var ReplyMessageContainer = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-left: 2px solid ", ";\n  padding: 4px 6px;\n  position: relative;\n  //margin: ", ";\n  margin: ", ";\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  margin-top: ", ";\n  cursor: pointer;\n"])), function (props) {
+var ReplyMessageContainer = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-left: 2px solid ", ";\n  padding: 4px 6px;\n  position: relative;\n  //margin: ", ";\n  margin: ", ";\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  margin-top: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.leftBorderColor || '#b8b9c2';
 }, function (props) {
   return props.withAttachments ? '8px 8px' : '0 0 8px';
@@ -33318,7 +33162,7 @@ var ReplyMessageContainer = styled.div(_templateObject$x || (_templateObject$x =
 }, function (props) {
   return !props.withSenderName && props.withAttachments && '8px';
 });
-var ReplyMessageBody = styled.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  margin-bottom: auto;\n  direction: ", ";\n  max-width: ", ";\n"])), function (props) {
+var ReplyMessageBody = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  margin-bottom: auto;\n  direction: ", ";\n  max-width: ", ";\n"])), function (props) {
   return props.rtlDirection ? 'initial' : '';
 }, function (props) {
   return props.maxWidth || '100%';
@@ -33332,7 +33176,7 @@ var VoiceIconWrapper = styled(SvgVoiceIcon)(_templateObject4$k || (_templateObje
   return props.color;
 });
 
-var _templateObject$y;
+var _templateObject$z;
 var MessageHeader = function MessageHeader(_ref) {
   var message = _ref.message,
     ownMessageOnRightSide = _ref.ownMessageOnRightSide,
@@ -33369,7 +33213,7 @@ var MessageHeader = function MessageHeader(_ref) {
 var MessageHeader$1 = /*#__PURE__*/React__default.memo(MessageHeader, function (prevProps, nextProps) {
   return prevProps.message.body === nextProps.message.body && prevProps.message.attachments === nextProps.message.attachments && prevProps.contactsMap === nextProps.contactsMap && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.showMessageSenderName === nextProps.showMessageSenderName && prevProps.getFromContacts === nextProps.getFromContacts;
 });
-var MessageHeaderCont = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: ", ";\n"])), function (props) {
+var MessageHeaderCont = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: ", ";\n"])), function (props) {
   return props.withPadding && (props.isForwarded ? '8px 0 2px 12px' : !props.isReplied && !props.messageBody ? props.withMediaAttachment ? '8px 0 8px 12px' : '8px 0 0 12px' : '8px 0 0 12px');
 });
 
@@ -33812,7 +33656,7 @@ var EMOJIS = [{
   }]
 }];
 
-var _templateObject$z, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$d, _templateObject8$c;
+var _templateObject$A, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$e, _templateObject8$c;
 var EmojiIcon = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -33912,7 +33756,7 @@ function EmojisPopup(_ref2) {
       }
     }, 300);
   }, []);
-  return /*#__PURE__*/React__default.createElement(Container$f, {
+  return /*#__PURE__*/React__default.createElement(Container$g, {
     backgroundColor: backgroundSections,
     borderColor: border,
     relativePosition: relativePosition,
@@ -33987,7 +33831,7 @@ function EmojisPopup(_ref2) {
     }));
   }))));
 }
-var Container$f = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  left: ", ";\n  right: ", ";\n  direction: ", ";\n  bottom: ", ";\n  width: 306px;\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  background: ", ";\n  z-index: 35;\n  //transform: scaleY(0);\n  height: 0;\n  overflow: hidden;\n  transform-origin: ", ";\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
+var Container$g = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  left: ", ";\n  right: ", ";\n  direction: ", ";\n  bottom: ", ";\n  width: 306px;\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  background: ", ";\n  z-index: 35;\n  //transform: scaleY(0);\n  height: 0;\n  overflow: hidden;\n  transform-origin: ", ";\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
   return props.relativePosition ? 'relative' : 'absolute';
 }, function (props) {
   return props.rtlDirection ? '' : props.rightSide ? '' : '5px';
@@ -34008,7 +33852,7 @@ var Container$f = styled.div(_templateObject$z || (_templateObject$z = _taggedTe
 }, function (props) {
   return props.rendered && "\n    height: 225px;\n  ";
 });
-var EmojiHeader = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  align-items: flex-end;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 22px;\n  text-transform: uppercase;\n  color: ", ";\n  display: flex;\n  padding: ", ";\n"])), function (props) {
+var EmojiHeader = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  align-items: flex-end;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 22px;\n  text-transform: uppercase;\n  color: ", ";\n  display: flex;\n  padding: ", ";\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.padding || '6px 18px';
@@ -34019,7 +33863,7 @@ var EmojiCollection = styled.span(_templateObject4$l || (_templateObject4$l = _t
 });
 var CollectionPointer = styled.span(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose([""])));
 var AllEmojis = styled.ul(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
-var EmojiFooter = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
+var EmojiFooter = styled.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
   return props.emojisCategoryIconsPosition !== 'top' && "1px solid " + props.borderColor;
 }, function (props) {
   return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
@@ -34051,7 +33895,7 @@ function SvgPlus(props) {
   })));
 }
 
-var _templateObject$A, _templateObject2$v, _templateObject3$q;
+var _templateObject$B, _templateObject2$w, _templateObject3$q;
 function FrequentlyEmojis(_ref) {
   var handleAddEmoji = _ref.handleAddEmoji,
     handleEmojiPopupToggle = _ref.handleEmojiPopupToggle,
@@ -34152,7 +33996,7 @@ function FrequentlyEmojis(_ref) {
     }
     setRendered(true);
   }, []);
-  return /*#__PURE__*/React__default.createElement(Container$g, {
+  return /*#__PURE__*/React__default.createElement(Container$h, {
     id: 'emojisContainer',
     backgroundColor: backgroundSections,
     rendered: rendered,
@@ -34176,14 +34020,14 @@ function FrequentlyEmojis(_ref) {
     iconColor: textSecondary
   }, /*#__PURE__*/React__default.createElement(SvgPlus, null)));
 }
-var Container$g = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  transform: scale(0, 0);\n  transform-origin: ", ";\n  display: flex;\n  align-items: center;\n  padding: 6px;\n  background-color: ", ";\n  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.2);\n  border-radius: 24px;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
+var Container$h = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  transform: scale(0, 0);\n  transform-origin: ", ";\n  display: flex;\n  align-items: center;\n  padding: 6px;\n  background-color: ", ";\n  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.2);\n  border-radius: 24px;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
   return props.rightSide ? '100% 100%' : '0 100%';
 }, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.rendered && "\n    transform: scale(1, 1);\n  ";
 });
-var EmojiItem = styled.span(_templateObject2$v || (_templateObject2$v = _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  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 8px;\n  font-size: 28px;\n  line-height: 32px;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 36px;\n  height: 36px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
+var EmojiItem = styled.span(_templateObject2$w || (_templateObject2$w = _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  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 8px;\n  font-size: 28px;\n  line-height: 32px;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 36px;\n  height: 36px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.active && props.activeBackground;
 }, function (props) {
   return props.activeBackground;
@@ -34198,7 +34042,7 @@ var OpenMoreEmojis = styled.span(_templateObject3$q || (_templateObject3$q = _ta
   return props.iconHoverColor;
 });
 
-var _templateObject$B, _templateObject2$w, _templateObject3$r, _templateObject4$m;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$m;
 var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
   var message = _ref.message,
     _ref$messageStatusDis = _ref.messageStatusDisplayingType,
@@ -34260,10 +34104,10 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
 var MessageStatusAndTime$1 = /*#__PURE__*/React__default.memo(MessageStatusAndTime, function (prevProps, nextProps) {
   return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment && prevProps.withAttachment === nextProps.withAttachment;
 });
-var MessageStatus = styled.span(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
+var MessageStatus = styled.span(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
 });
-var HiddenMessageTime = styled.span(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
+var HiddenMessageTime = styled.span(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
   return props.hide && 'none';
 }, function (props) {
   return props.fontSize || '12px';
@@ -34303,7 +34147,7 @@ var MessageStatusUpdated = styled.span(_templateObject4$m || (_templateObject4$m
   return props.color;
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4;
+var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$f, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4;
 var POLL_VOTES_LIMIT = 20;
 var AllVotesPopup = function AllVotesPopup(_ref) {
   var _pollVotesHasMore$key, _poll$voteDetails, _poll$voteDetails$vot, _poll$voteDetails3;
@@ -34417,8 +34261,8 @@ var AllVotesPopup = function AllVotesPopup(_ref) {
     color: textSecondary
   }, "Loading...")))))));
 };
-var VotesList = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 500px;\n  padding: 8px 0;\n"])));
-var VoterRow = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
+var VotesList = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 500px;\n  padding: 8px 0;\n"])));
+var VoterRow = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
 var VoterInfo = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
 var VoterName = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  max-width: calc(100% - 120px);\n"])), function (p) {
   return p.color;
@@ -34429,7 +34273,7 @@ var VotedAt = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemp
 var LoadingText = styled.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px;\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
-var TitleWrapper = styled.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 54px);\n  margin: 0 auto;\n"])));
+var TitleWrapper = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 54px);\n  margin: 0 auto;\n"])));
 var BackButton = styled.button(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  padding: 9px;\n  cursor: pointer;\n  box-sizing: content-box;\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  flex-shrink: 0;\n\n  & > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])), function (p) {
   return p.color;
 });
@@ -34446,7 +34290,7 @@ var Loader = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTem
   return p.color;
 });
 
-var _templateObject$D, _templateObject2$y, _templateObject3$t, _templateObject4$o, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$5;
+var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$j, _templateObject6$h, _templateObject7$g, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$5;
 var VotesResultsPopup = function VotesResultsPopup(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$options$find;
   var onClose = _ref.onClose,
@@ -34574,8 +34418,8 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
     })) === null || _poll$options$find === void 0 ? void 0 : _poll$options$find.name) || ''
   })));
 };
-var OptionsList = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-y: auto;\n  max-height: 504px;\n  border-radius: 10px;\n"])));
-var OptionBlock = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 10px;\n  border: 1px solid ", "0F; /* subtle */\n  padding: 14px 16px 0 16px;\n"])), function (p) {
+var OptionsList = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-y: auto;\n  max-height: 504px;\n  border-radius: 10px;\n"])));
+var OptionBlock = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 10px;\n  border: 1px solid ", "0F; /* subtle */\n  padding: 14px 16px 0 16px;\n"])), function (p) {
   return p.background;
 }, function (p) {
   return p.border;
@@ -34588,7 +34432,7 @@ var OptionCount = styled.div(_templateObject5$j || (_templateObject5$j = _tagged
   return p.color;
 });
 var Voters = styled.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 5px;\n"])));
-var VoterRow$1 = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
+var VoterRow$1 = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
 var VoterInfo$1 = styled.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
 var VoterName$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  max-width: calc(100% - 120px);\n"])), function (p) {
   return p.color;
@@ -34625,7 +34469,7 @@ function SvgFilledCheckbox(props) {
   })));
 }
 
-var _templateObject$E, _templateObject2$z, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
+var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
 var PollMessage = function PollMessage(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$voteDetails5, _poll$voteDetails6, _poll$voteDetails7;
   var message = _ref.message;
@@ -34674,7 +34518,7 @@ var PollMessage = function PollMessage(_ref) {
   var handleViewResults = function handleViewResults() {
     return setShowResults(true);
   };
-  return /*#__PURE__*/React__default.createElement(Container$h, null, /*#__PURE__*/React__default.createElement(Question$1, {
+  return /*#__PURE__*/React__default.createElement(Container$i, null, /*#__PURE__*/React__default.createElement(Question$1, {
     color: textPrimary
   }, poll.name), /*#__PURE__*/React__default.createElement(SubTitle$1, {
     color: textSecondary
@@ -34726,7 +34570,7 @@ var PollMessage = function PollMessage(_ref) {
       });
     }))), /*#__PURE__*/React__default.createElement(Votes, {
       color: textPrimary
-    }, votes)), /*#__PURE__*/React__default.createElement(Bar, {
+    }, votes)), /*#__PURE__*/React__default.createElement(Bar$1, {
       track: borderSecondary,
       closed: poll.closed
     }, /*#__PURE__*/React__default.createElement(Fill, {
@@ -34755,8 +34599,8 @@ var PollMessage = function PollMessage(_ref) {
     messageId: message.id
   })));
 };
-var Container$h = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n  width: 100%;\n"])));
-var Question$1 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n  word-break: break-word;\n"])), function (p) {
+var Container$i = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n  width: 100%;\n"])));
+var Question$1 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n  word-break: break-word;\n"])), function (p) {
   return p.color;
 });
 var SubTitle$1 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin: 4px 0 6px 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.08px;\n  word-break: break-word;\n"])), function (p) {
@@ -34769,7 +34613,7 @@ var Option = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTempl
   return p.disabled ? 'not-allowed' : 'pointer';
 });
 var TopRow = styled.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 6px;\n  min-height: 22px;\n"])));
-var Indicator = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  margin-right: 8px;\n  opacity: ", ";\n  cursor: ", ";\n"])), function (p) {
+var Indicator = styled.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  margin-right: 8px;\n  opacity: ", ";\n  cursor: ", ";\n"])), function (p) {
   return p.disabled ? 0.5 : 1;
 }, function (p) {
   return p.disabled ? 'not-allowed' : 'pointer';
@@ -34786,7 +34630,7 @@ var Title$2 = styled.div(_templateObject0$c || (_templateObject0$c = _taggedTemp
 var Votes = styled.span(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  margin-left: 4px;\n"])), function (p) {
   return p.color;
 });
-var Bar = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 6px;\n  border-radius: 6px;\n  background: ", ";\n  overflow: hidden;\n  margin-left: auto;\n"])), function (p) {
+var Bar$1 = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 6px;\n  border-radius: 6px;\n  background: ", ";\n  overflow: hidden;\n  margin-left: auto;\n"])), function (p) {
   return p.closed ? '100%' : "calc(100% - 28px)";
 }, function (p) {
   return p.track;
@@ -34794,7 +34638,7 @@ var Bar = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTempla
 var Fill = styled.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  border-radius: 6px;\n  transition: width 0.3s ease-in-out;\n"])));
 var UsersContainer = styled.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding-left: 16px;\n  height: max-content;\n"])));
 
-var _templateObject$F, _templateObject2$A, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$a;
+var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$j, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$a;
 var validateUrl = function validateUrl(url) {
   try {
     var urlObj = new URL(url);
@@ -34803,8 +34647,12 @@ var validateUrl = function validateUrl(url) {
     return false;
   }
 };
+var isDescriptionOnlySymbol = function isDescriptionOnlySymbol(description) {
+  var trimmed = description === null || description === void 0 ? void 0 : description.trim();
+  return !!trimmed && !/[a-zA-Z0-9]/.test(trimmed);
+};
 var OGMetadata = function OGMetadata(_ref) {
-  var _metadata$og0, _metadata$og0$image, _metadata$og0$image$, _metadata$og10, _metadata$og10$favico, _metadata$og16, _metadata$og17, _metadata$og18;
+  var _metadata$og0, _metadata$og0$image, _metadata$og0$image$, _metadata$og10, _metadata$og10$favico, _metadata$og18, _metadata$og19, _metadata$og20;
   var attachments = _ref.attachments,
     state = _ref.state,
     incoming = _ref.incoming,
@@ -35048,7 +34896,7 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, [metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var elements = useMemo(function () {
-    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og13$title, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _metadata$og15$descri, _resolvedOrder$link;
+    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og14, _metadata$og14$title, _resolvedOrder$descri, _metadata$og15, _metadata$og16, _metadata$og17, _metadata$og17$descri, _resolvedOrder$link;
     return [showImage ? {
       key: 'image',
       order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
@@ -35067,21 +34915,21 @@ var OGMetadata = function OGMetadata(_ref) {
     } : null, {
       key: 'title',
       order: (_resolvedOrder$title = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.title) != null ? _resolvedOrder$title : 2,
-      render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && (/*#__PURE__*/React__default.createElement(Title$3, {
+      render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && !isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.description) && (/*#__PURE__*/React__default.createElement(Title$3, {
         maxWidth: maxWidth,
         shouldAnimate: shouldAnimate,
         padding: infoPadding,
         color: textPrimary
-      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$title = _metadata$og13.title) === null || _metadata$og13$title === void 0 ? void 0 : _metadata$og13$title.trim())))
+      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og14 = metadata.og) === null || _metadata$og14 === void 0 ? void 0 : (_metadata$og14$title = _metadata$og14.title) === null || _metadata$og14$title === void 0 ? void 0 : _metadata$og14$title.trim())))
     }, {
       key: 'description',
       order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
-      render: ogShowDescription && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og14 = metadata.og) === null || _metadata$og14 === void 0 ? void 0 : _metadata$og14.description) && (/*#__PURE__*/React__default.createElement(Desc, {
+      render: ogShowDescription && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description) && !isDescriptionOnlySymbol(metadata === null || metadata === void 0 ? void 0 : (_metadata$og16 = metadata.og) === null || _metadata$og16 === void 0 ? void 0 : _metadata$og16.description) && (/*#__PURE__*/React__default.createElement(Desc, {
         maxWidth: maxWidth,
         shouldAnimate: shouldAnimate,
         color: textSecondary,
         padding: infoPadding
-      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$descri = _metadata$og15.description) === null || _metadata$og15$descri === void 0 ? void 0 : _metadata$og15$descri.trim()))
+      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og17 = metadata.og) === null || _metadata$og17 === void 0 ? void 0 : (_metadata$og17$descri = _metadata$og17.description) === null || _metadata$og17$descri === void 0 ? void 0 : _metadata$og17$descri.trim()))
     }, {
       key: 'link',
       order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -35096,7 +34944,7 @@ var OGMetadata = function OGMetadata(_ref) {
       var _a$order, _b$order;
       return ((_a$order = a.order) != null ? _a$order : 0) - ((_b$order = b.order) != null ? _b$order : 0);
     });
-  }, [hasImage, resolvedOrder, showOGMetadata, maxWidth, calculatedImageHeight, maxHeight, metadata === null || metadata === void 0 ? void 0 : (_metadata$og16 = metadata.og) === null || _metadata$og16 === void 0 ? void 0 : _metadata$og16.image, shouldAnimate, ogShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og17 = metadata.og) === null || _metadata$og17 === void 0 ? void 0 : _metadata$og17.title, infoPadding, ogShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og18 = metadata.og) === null || _metadata$og18 === void 0 ? void 0 : _metadata$og18.description, textSecondary, ogShowUrl, ogUrl]);
+  }, [hasImage, resolvedOrder, showOGMetadata, maxWidth, calculatedImageHeight, maxHeight, metadata === null || metadata === void 0 ? void 0 : (_metadata$og18 = metadata.og) === null || _metadata$og18 === void 0 ? void 0 : _metadata$og18.image, shouldAnimate, ogShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og19 = metadata.og) === null || _metadata$og19 === void 0 ? void 0 : _metadata$og19.title, infoPadding, ogShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og20 = metadata.og) === null || _metadata$og20 === void 0 ? void 0 : _metadata$og20.description, textSecondary, ogShowUrl, ogUrl]);
   var textContent = useMemo(function () {
     return /*#__PURE__*/React__default.createElement(OGText, {
       shouldAnimate: shouldAnimate,
@@ -35154,7 +35002,7 @@ var OGMetadata = function OGMetadata(_ref) {
   }), content);
 };
 var sharedKeyframes = "\n  @keyframes fadeInSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes expandHeight {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: 1000px;\n      opacity: 1;\n    }\n  }\n";
-var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: ", ";\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  border-radius: 8px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  // color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
+var OGMetadataContainer = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: ", ";\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  border-radius: 8px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  // color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var maxWidth = _ref2.maxWidth;
   return maxWidth ? maxWidth + "px" : 'inherit';
 }, function (_ref3) {
@@ -35175,7 +35023,7 @@ var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _
   var padding = _ref7.padding;
   return padding != null ? padding : '0';
 });
-var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref8) {
+var ImageContainer = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref8) {
   var containerHeight = _ref8.containerHeight;
   return containerHeight ? containerHeight + "px" : '0px';
 }, function (_ref9) {
@@ -35195,7 +35043,7 @@ var OGText = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTempl
   var margin = _ref10.margin;
   return margin ? '12px' : '0';
 });
-var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  // font-family: Inter;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0px;\n  color: ", ";\n  margin: 4px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref11) {
+var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0px;\n  color: ", ";\n  margin: 4px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref11) {
   var color = _ref11.color;
   return color;
 }, function (_ref12) {
@@ -35231,7 +35079,7 @@ var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLi
   var shouldAnimate = _ref21.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n  ";
 });
-var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // object-fit: cover;\n  // object-position: center;\n  // image-rendering: auto;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref22) {
+var Img = styled.img(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // object-fit: cover;\n  // object-position: center;\n  // image-rendering: auto;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref22) {
   var shouldAnimate = _ref22.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
 });
@@ -35240,7 +35088,7 @@ var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _tagg
 var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 8px;\n  flex: 0 0 52px;\n"])));
 var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
-var _templateObject$G, _templateObject2$B, _templateObject3$w, _templateObject4$r, _templateObject5$m;
+var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m;
 var MessageBody = function MessageBody(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -35833,7 +35681,7 @@ var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prev
   var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
   return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order));
 });
-var ForwardedTitle = styled.h3(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var ForwardedTitle = styled.h3(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.withAttachments && props.withBody ? '0' : '0 0 4px';
@@ -35846,7 +35694,7 @@ var ForwardedTitle = styled.h3(_templateObject$G || (_templateObject$G = _tagged
 }, function (props) {
   return props.color;
 });
-var MessageStatusDeleted$1 = styled.span(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
+var MessageStatusDeleted$1 = styled.span(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.fontSize;
@@ -35889,7 +35737,7 @@ var FrequentlyEmojisContainer = styled.div(_templateObject5$m || (_templateObjec
   return props.rtlDirection && '0';
 });
 
-var _templateObject$H, _templateObject2$C, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$b;
+var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$b;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -36261,8 +36109,8 @@ function sortByDateDesc(a, b) {
   var bTime = bDate ? new Date(bDate).getTime() : 0;
   return bTime - aTime;
 }
-var Tabs = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  justify-content: start;\n  margin-bottom: 8px;\n"])));
-var Tab = styled.button(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 6px 11px;\n  border-radius: 16px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    opacity: 0.9;\n  }\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: 0px;\n  text-align: center;\n"])), function (p) {
+var Tabs = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  justify-content: start;\n  margin-bottom: 8px;\n"])));
+var Tab = styled.button(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 6px 11px;\n  border-radius: 16px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    opacity: 0.9;\n  }\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: 0px;\n  text-align: center;\n"])), function (p) {
   return p.active ? p.textOnPrimary : p.textSecondary;
 }, function (p) {
   return p.background;
@@ -36279,7 +36127,7 @@ var RowInfo = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemp
 var RowTitle = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 22px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) {
   return p.color;
 });
-var RowDate = styled.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
+var RowDate = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
   return p.color;
 });
 var Empty = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
@@ -36323,7 +36171,7 @@ function ConfirmEndPollPopup(_ref) {
   });
 }
 
-var _templateObject$I, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
+var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -37125,8 +36973,8 @@ var Message$1 = function Message(_ref) {
 var Message$2 = /*#__PURE__*/React__default.memo(Message$1, function (prevProps, nextProps) {
   return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.metadata === nextProps.message.metadata && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.message.pollDetails === nextProps.message.pollDetails && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.theme === nextProps.theme;
 });
-var MessageReactionKey = styled.span(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\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"])));
-var ReactionItemCount = styled.span(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var MessageReactionKey = styled.span(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\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"])));
+var ReactionItemCount = styled.span(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var MessageReaction = styled.span(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  //min-width: 23px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: ", ";\n  margin-right: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  white-space: nowrap;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (props) {
@@ -37157,7 +37005,7 @@ var FailedMessageIcon = styled.div(_templateObject5$o || (_templateObject5$o = _
   return props.rtl && '-24px';
 });
 var ErrorIconWrapper = styled(SvgErrorIcon)(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
-var SelectMessageWrapper = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px;\n  position: absolute;\n  left: 4%;\n  bottom: calc(50% - 22px);\n  cursor: ", ";\n  & > svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
+var SelectMessageWrapper = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px;\n  position: absolute;\n  left: 4%;\n  bottom: calc(50% - 22px);\n  cursor: ", ";\n  & > svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
   return !props.disabled && 'pointer';
 }, function (props) {
   return props.activeColor;
@@ -37228,7 +37076,7 @@ var MessageItem = styled.div(_templateObject12$4 || (_templateObject12$4 = _tagg
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var _templateObject$J, _templateObject2$E, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$d;
+var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$d;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -38095,7 +37943,7 @@ var MessageList = function MessageList(_ref2) {
     dateDividerBackgroundColor: dateDividerBackgroundColor || overlayBackground,
     dateDividerBorderRadius: dateDividerBorderRadius,
     topOffset: scrollRef && scrollRef.current && scrollRef.current.offsetTop
-  }, /*#__PURE__*/React__default.createElement("span", null, topDateLabel))), /*#__PURE__*/React__default.createElement(Container$i, {
+  }, /*#__PURE__*/React__default.createElement("span", null, topDateLabel))), /*#__PURE__*/React__default.createElement(Container$j, {
     id: 'scrollableDiv',
     className: isScrolling ? 'show-scrollbar' : '',
     ref: scrollRef,
@@ -38322,12 +38170,12 @@ var MessageList = function MessageList(_ref2) {
     attachmentsPreview: attachmentsPreview
   })))));
 };
-var Container$i = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n  overflow-x: hidden;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var Container$j = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n  overflow-x: hidden;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.thumbColor;
 });
-var EmptyDiv = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
+var EmptyDiv = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
 var MessagesBox = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  //height: auto;\n  display: flex;\n  //flex-direction: column-reverse;\n  flex-direction: column;\n  padding-bottom: 20px;\n  //overflow: auto;\n  //scroll-behavior: unset;\n"])));
 var MessageTopDate = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  justify-content: center;\n  width: 100%;\n  top: ", ";\n  left: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  text-align: center;\n  z-index: 10;\n  background: transparent;\n  opacity: ", ";\n  transition: all 0.2s ease-in-out;\n  width: calc(100% - 8px);\n\n  span {\n    display: inline-block;\n    max-width: 380px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    border: ", ";\n    box-sizing: border-box;\n    border-radius: ", ";\n    padding: 5px 16px;\n    box-shadow:\n      0 0 2px rgba(0, 0, 0, 0.08),\n      0 2px 24px rgba(0, 0, 0, 0.08);\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])), function (props) {
   return props.topOffset ? props.topOffset + 22 + "px" : '22px';
@@ -38360,7 +38208,7 @@ var IconWrapper$1 = styled.span(_templateObject6$m || (_templateObject6$m = _tag
 }, function (props) {
   return props.iconColor;
 });
-var DropAttachmentArea = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  border: 1px dashed ", ";\n  border-radius: 16px;\n  margin: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  transition: all 0.1s;\n\n  &.dragover {\n    background-color: ", ";\n    border: 1px dashed ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+var DropAttachmentArea = styled.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  border: 1px dashed ", ";\n  border-radius: 16px;\n  margin: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  transition: all 0.1s;\n\n  &.dragover {\n    background-color: ", ";\n    border: 1px dashed ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.margin || '12px 32px 32px';
@@ -38799,7 +38647,7 @@ function $isMentionNode(node) {
   return node instanceof MentionNode;
 }
 
-var _templateObject$K, _templateObject2$F, _templateObject3$A, _templateObject4$v, _templateObject5$q;
+var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q;
 var PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 var NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 var DocumentMentionsRegex = {
@@ -39079,8 +38927,8 @@ function MentionsPlugin(_ref3) {
     }
   });
 }
-var MentionsContainerWrapper = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  position: relative;\n  animation: fadeIn 0.2s ease-in-out;\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n"])));
-var MentionsList = styled.ul(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  width: 300px;\n  transition: all 0.2s;\n  overflow: auto;\n  max-height: 240px;\n  z-index: 200;\n  padding: 2px 0 0;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  border-radius: 6px;\n  visibility: ", ";\n"])), function (props) {
+var MentionsContainerWrapper = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  position: relative;\n  animation: fadeIn 0.2s ease-in-out;\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n"])));
+var MentionsList = styled.ul(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  width: 300px;\n  transition: all 0.2s;\n  overflow: auto;\n  max-height: 240px;\n  z-index: 200;\n  padding: 2px 0 0;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  border-radius: 6px;\n  visibility: ", ";\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.withBorder && "1px solid " + props.borderColor;
@@ -39226,7 +39074,7 @@ function SvgUnderline(props) {
   }))));
 }
 
-var _templateObject$L, _templateObject2$G;
+var _templateObject$M, _templateObject2$H;
 function mergeRegister() {
   for (var _len = arguments.length, func = new Array(_len), _key = 0; _key < _len; _key++) {
     func[_key] = arguments[_key];
@@ -39607,10 +39455,10 @@ function FloatingTextFormatToolbarPlugin(_ref3) {
     editor = _useLexicalComposerCo[0];
   return useFloatingTextFormatToolbar(editor, anchorElem);
 }
-var FloatingTextFormatPopup = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background: ", ";\n  vertical-align: middle;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 8px;\n  transition: opacity 0.5s;\n  padding: 12px;\n  will-change: transform;\n  z-index: 99;\n\n  & button.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    cursor: pointer;\n    vertical-align: middle;\n  }\n  & button.popup-item:disabled {\n    cursor: not-allowed;\n  }\n  & button.popup-item.spaced {\n    margin-right: 2px;\n  }\n  & button.popup-item i.format {\n    background-size: contain;\n    height: 18px;\n    width: 18px;\n    margin-top: 2px;\n    vertical-align: -0.25em;\n    display: flex;\n    opacity: 0.6;\n  }\n\n  & button.popup-item:disabled i.format {\n    opacity: 0.2;\n  }\n  & button.popup-item.active {\n    background-color: rgba(223, 232, 250, 0.3);\n  }\n  & button.popup-item.active i {\n    opacity: 1;\n  }\n  & .popup-item:hover:not([disabled]) {\n    background-color: #eee;\n  }\n  & select.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    vertical-align: middle;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    width: 70px;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n  }\n  & select.code-language {\n    text-transform: capitalize;\n    width: 130px;\n  }\n\n  & .popup-item .text {\n    display: flex;\n    line-height: 20px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n    width: 70px;\n    overflow: hidden;\n    height: 20px;\n    text-align: left;\n  }\n\n  & .popup-item .icon {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    user-select: none;\n    margin-right: 8px;\n    line-height: 16px;\n    background-size: contain;\n  }\n  & i.chevron-down {\n    margin-top: 3px;\n    width: 16px;\n    height: 16px;\n    display: flex;\n    user-select: none;\n  }\n  & i.chevron-down.inside {\n    width: 16px;\n    height: 16px;\n    display: flex;\n    margin-left: -25px;\n    margin-top: 11px;\n    margin-right: 10px;\n    pointer-events: none;\n  }\n  & .divider {\n    width: 1px;\n    background-color: #eee;\n    margin: 0 4px;\n  }\n  @media (max-width: 1024px) {\n    & button.insert-comment {\n      display: none;\n    }\n  }\n"])), function (props) {
+var FloatingTextFormatPopup = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background: ", ";\n  vertical-align: middle;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 8px;\n  transition: opacity 0.5s;\n  padding: 12px;\n  will-change: transform;\n  z-index: 99;\n\n  & button.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    cursor: pointer;\n    vertical-align: middle;\n  }\n  & button.popup-item:disabled {\n    cursor: not-allowed;\n  }\n  & button.popup-item.spaced {\n    margin-right: 2px;\n  }\n  & button.popup-item i.format {\n    background-size: contain;\n    height: 18px;\n    width: 18px;\n    margin-top: 2px;\n    vertical-align: -0.25em;\n    display: flex;\n    opacity: 0.6;\n  }\n\n  & button.popup-item:disabled i.format {\n    opacity: 0.2;\n  }\n  & button.popup-item.active {\n    background-color: rgba(223, 232, 250, 0.3);\n  }\n  & button.popup-item.active i {\n    opacity: 1;\n  }\n  & .popup-item:hover:not([disabled]) {\n    background-color: #eee;\n  }\n  & select.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    vertical-align: middle;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    width: 70px;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n  }\n  & select.code-language {\n    text-transform: capitalize;\n    width: 130px;\n  }\n\n  & .popup-item .text {\n    display: flex;\n    line-height: 20px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n    width: 70px;\n    overflow: hidden;\n    height: 20px;\n    text-align: left;\n  }\n\n  & .popup-item .icon {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    user-select: none;\n    margin-right: 8px;\n    line-height: 16px;\n    background-size: contain;\n  }\n  & i.chevron-down {\n    margin-top: 3px;\n    width: 16px;\n    height: 16px;\n    display: flex;\n    user-select: none;\n  }\n  & i.chevron-down.inside {\n    width: 16px;\n    height: 16px;\n    display: flex;\n    margin-left: -25px;\n    margin-top: 11px;\n    margin-right: 10px;\n    pointer-events: none;\n  }\n  & .divider {\n    width: 1px;\n    background-color: #eee;\n    margin: 0 4px;\n  }\n  @media (max-width: 1024px) {\n    & button.insert-comment {\n      display: none;\n    }\n  }\n"])), function (props) {
   return props.popupColor;
 });
-var Action$1 = styled.button(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  border: 0;\n  display: flex;\n  background-color: inherit;\n  vertical-align: middle;\n  position: relative;\n  padding: 3px;\n  margin-right: 10px;\n  //margin: 8px 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (props) {
+var Action$1 = styled.button(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  border: 0;\n  display: flex;\n  background-color: inherit;\n  vertical-align: middle;\n  position: relative;\n  padding: 3px;\n  margin-right: 10px;\n  //margin: 8px 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.isActive && "\n    color: " + props.hoverIconColor + ";\n    background-color: " + props.hoverBackgroundColor + ";\n  ";
@@ -39933,7 +39781,7 @@ function FormatMessagePlugin(_ref) {
   return null;
 }
 
-var _templateObject$M, _templateObject2$H, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$k;
+var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$m, _templateObject8$k;
 var EmojiIcon$1 = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -40052,7 +39900,7 @@ function EmojisPopup$1(_ref2) {
       }
     }, 300);
   }, []);
-  return /*#__PURE__*/React__default.createElement(Container$j, {
+  return /*#__PURE__*/React__default.createElement(Container$k, {
     backgroundColor: backgroundSections,
     borderColor: border,
     relativePosition: relativePosition,
@@ -40128,7 +39976,7 @@ function EmojisPopup$1(_ref2) {
     }));
   }))));
 }
-var Container$j = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  left: ", ";\n  right: ", ";\n  direction: ", ";\n  bottom: ", ";\n  width: 306px;\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  background: ", ";\n  z-index: 35;\n  //transform: scaleY(0);\n  height: 0;\n  overflow: hidden;\n  transform-origin: ", ";\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
+var Container$k = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  left: ", ";\n  right: ", ";\n  direction: ", ";\n  bottom: ", ";\n  width: 306px;\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  background: ", ";\n  z-index: 35;\n  //transform: scaleY(0);\n  height: 0;\n  overflow: hidden;\n  transform-origin: ", ";\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
   return props.leftPosition ? 'fixed' : props.relativePosition ? 'relative' : 'absolute';
 }, function (props) {
   return props.rightSide ? "calc(" + props.leftPosition + " - 250px)" : props.leftPosition || (props.rtlDirection ? '' : props.rightSide ? '' : '5px');
@@ -40149,7 +39997,7 @@ var Container$j = styled.div(_templateObject$M || (_templateObject$M = _taggedTe
 }, function (props) {
   return props.rendered && "\n    height: 225px;\n  ";
 });
-var EmojiHeader$1 = styled.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  align-items: flex-end;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 22px;\n  text-transform: uppercase;\n  color: ", ";\n  display: flex;\n  padding: ", ";\n"])), function (props) {
+var EmojiHeader$1 = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  align-items: flex-end;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 22px;\n  text-transform: uppercase;\n  color: ", ";\n  display: flex;\n  padding: ", ";\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.padding || '6px 18px';
@@ -40160,7 +40008,7 @@ var EmojiCollection$1 = styled.span(_templateObject4$w || (_templateObject4$w =
 });
 var CollectionPointer$1 = styled.span(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose([""])));
 var AllEmojis$1 = styled.ul(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
-var EmojiFooter$1 = styled.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
+var EmojiFooter$1 = styled.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
   return props.emojisCategoryIconsPosition !== 'top' && "1px solid " + props.borderColor;
 }, function (props) {
   return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
@@ -40366,7 +40214,7 @@ function SvgRecordButton(props) {
   })));
 }
 
-var _templateObject$N, _templateObject2$I, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m;
+var _templateObject$O, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$n;
 var shouldDraw = false;
 var DEFAULT_MAX_RECORDING_DURATION = 600;
 var AudioRecord = function AudioRecord(_ref) {
@@ -40905,7 +40753,7 @@ var AudioRecord = function AudioRecord(_ref) {
     handleStopRecording();
     setCurrentChannelId(channelId);
   }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$k, {
+  return /*#__PURE__*/React__default.createElement(Container$l, {
     recording: showRecording || currentRecordedFile
   }, (showRecording || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
     iconColor: iconPrimary,
@@ -40944,10 +40792,10 @@ var AudioRecord = function AudioRecord(_ref) {
     iconColor: accentColor
   }, showRecording || currentRecordedFile ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)));
 };
-var Container$k = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 32px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ", ";\n  transition: all 0.3s ease-in-out;\n"])), function (props) {
+var Container$l = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  width: 32px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ", ";\n  transition: all 0.3s ease-in-out;\n"])), function (props) {
   return props.recording && "width: 400px";
 });
-var AudioWrapper = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n  width: ", ";\n  overflow: hidden;\n  margin: ", ";\n  background-color: ", ";\n  padding: ", ";\n  border-radius: 20px;\n"])), function (props) {
+var AudioWrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n  width: ", ";\n  overflow: hidden;\n  margin: ", ";\n  background-color: ", ";\n  padding: ", ";\n  border-radius: 20px;\n"])), function (props) {
   return props.recording ? 'calc(100% - 84px)' : '0';
 }, function (props) {
   return props.recording ? '0 8px' : '0';
@@ -40984,14 +40832,14 @@ var Canvas = styled.canvas(_templateObject6$o || (_templateObject6$o = _taggedTe
   var hide = _ref0.hide;
   return hide && '-1';
 });
-var Timer$2 = styled.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
+var Timer$2 = styled.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$O, _templateObject2$J, _templateObject3$D;
-var wave = keyframes(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  0%, 100% {\n    transform: scaleY(0.5);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scaleY(1.2);\n    opacity: 1;\n  }\n"])));
-var Wrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
-var Bar$1 = styled.span(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 3px;\n  height: 8px;\n  border-radius: 2px;\n  background: ", ";\n  animation: ", " 1s infinite;\n  animation-delay: ", "s;\n"])), function (props) {
+var _templateObject$P, _templateObject2$K, _templateObject3$D;
+var wave = keyframes(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  0%, 100% {\n    transform: scaleY(0.5);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scaleY(1.2);\n    opacity: 1;\n  }\n"])));
+var Wrapper = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
+var Bar$2 = styled.span(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 3px;\n  height: 8px;\n  border-radius: 2px;\n  background: ", ";\n  animation: ", " 1s infinite;\n  animation-delay: ", "s;\n"])), function (props) {
   return props.borderColor;
 }, wave, function (_ref) {
   var delay = _ref.delay;
@@ -40999,19 +40847,19 @@ var Bar$1 = styled.span(_templateObject3$D || (_templateObject3$D = _taggedTempl
 });
 var RecordingAnimation = function RecordingAnimation(_ref2) {
   var borderColor = _ref2.borderColor;
-  return /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(Bar$1, {
+  return /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(Bar$2, {
     delay: 0,
     borderColor: borderColor
-  }), /*#__PURE__*/React__default.createElement(Bar$1, {
+  }), /*#__PURE__*/React__default.createElement(Bar$2, {
     delay: 0.15,
     borderColor: borderColor
-  }), /*#__PURE__*/React__default.createElement(Bar$1, {
+  }), /*#__PURE__*/React__default.createElement(Bar$2, {
     delay: 0.3,
     borderColor: borderColor
-  }), /*#__PURE__*/React__default.createElement(Bar$1, {
+  }), /*#__PURE__*/React__default.createElement(Bar$2, {
     delay: 0.45,
     borderColor: borderColor
-  }), /*#__PURE__*/React__default.createElement(Bar$1, {
+  }), /*#__PURE__*/React__default.createElement(Bar$2, {
     delay: 0.6,
     borderColor: borderColor
   }));
@@ -41039,7 +40887,7 @@ function SvgDotsVertica(props) {
   })));
 }
 
-var _templateObject$P, _templateObject2$K, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$i;
+var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$o, _templateObject8$l, _templateObject9$i;
 var CreatePollPopup = function CreatePollPopup(_ref) {
   var togglePopup = _ref.togglePopup,
     onCreate = _ref.onCreate;
@@ -41411,8 +41259,8 @@ var CreatePollPopup = function CreatePollPopup(_ref) {
     buttonText: 'Discard'
   })));
 };
-var QuestionInputWrapper = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var CustomTextArea = styled.textarea(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding: ", ";\n  font-family: Inter, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 15px;\n  line-height: 18px;\n  opacity: 1;\n  outline: none;\n  resize: none;\n  overflow: hidden;\n\n  &:focus {\n    border: 1px solid ", ";\n    outline: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    opacity: 1;\n    color: #383b51;\n  }\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), function (props) {
+var QuestionInputWrapper = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var CustomTextArea = styled.textarea(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding: ", ";\n  font-family: Inter, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 15px;\n  line-height: 18px;\n  opacity: 1;\n  outline: none;\n  resize: none;\n  overflow: hidden;\n\n  &:focus {\n    border: 1px solid ", ";\n    outline: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    opacity: 1;\n    color: #383b51;\n  }\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.error ? "1px solid " + props.errorColor : "1px solid " + props.borderColor;
@@ -41447,7 +41295,7 @@ var RemoveOptionIcon = styled(SvgClose)(_templateObject6$p || (_templateObject6$
 }, function (props) {
   return props.disabled ? 0.5 : 1;
 });
-var AddOptionButton = styled.button(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 0 0;\n  background: transparent;\n  border: none;\n  color: ", ";\n  cursor: ", ";\n  width: 100%;\n  text-align: left;\n  padding-left: 32px;\n  opacity: ", ";\n"])), function (props) {
+var AddOptionButton = styled.button(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 0 0;\n  background: transparent;\n  border: none;\n  color: ", ";\n  cursor: ", ";\n  width: 100%;\n  text-align: left;\n  padding-left: 32px;\n  opacity: ", ";\n"])), function (props) {
   return props.disabled ? props.disabledColor : props.color;
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
@@ -41459,7 +41307,7 @@ var SettingItem = styled.div(_templateObject9$i || (_templateObject9$i = _tagged
   return props.color;
 });
 
-var _templateObject$Q, _templateObject2$L, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$R, _templateObject2$M, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -41954,7 +41802,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       var updatedAttachments = attachmentsUpdate.filter(function (item) {
         return item.tid !== attachmentId;
       });
-      deleteVideoThumb(attachmentId);
       setAttachments(updatedAttachments);
       attachmentsUpdate = updatedAttachments;
     } else {
@@ -42780,7 +42627,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, [selectedMessagesMap]);
   return /*#__PURE__*/React__default.createElement(SendMessageWrapper, {
     backgroundColor: backgroundColor || background
-  }, /*#__PURE__*/React__default.createElement(Container$l, {
+  }, /*#__PURE__*/React__default.createElement(Container$m, {
     margin: margin,
     padding: padding,
     border: border,
@@ -43093,10 +42940,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     maxRecordingDuration: audioRecordingMaxDuration
   }))))))))));
 };
-var SendMessageWrapper = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 100;\n"])), function (props) {
+var SendMessageWrapper = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 100;\n"])), function (props) {
   return props.backgroundColor;
 });
-var Container$l = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 100;\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$m = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 100;\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 || '';
@@ -43135,7 +42982,7 @@ var UploadErrorMessage = styled.p(_templateObject5$u || (_templateObject5$u = _t
 var CloseEditMode = styled.span(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 22px;\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var UserName$1 = styled.span(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
+var UserName$1 = styled.span(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
 var ReplyMessageBody$1 = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 var EditReplyMessageHeader = styled.h4(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 0 0 2px;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n\n  > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.color;
@@ -43480,7 +43327,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$R, _templateObject2$M, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$n, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$S, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$q, _templateObject8$n, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
@@ -43690,7 +43537,7 @@ var Actions = function Actions(_ref) {
       setActionsHeight && setActionsHeight(containerRef.current.offsetHeight);
     }
   }, [containerRef.current, showMuteUnmuteNotifications, showStarredMessages, showPinChannel, showMarkAsReadUnread, showLeaveChannel, showBlockAndLeaveChannel, showBlockUser, showReportChannel, showDeleteChannel, showClearHistory]);
-  return /*#__PURE__*/React__default.createElement(Container$m, {
+  return /*#__PURE__*/React__default.createElement(Container$n, {
     isDirect: isDirectChannel,
     theme: theme,
     borderColor: borderColor || surface1,
@@ -43944,17 +43791,17 @@ var Actions = function Actions(_ref) {
     title: popupTitle
   })));
 };
-var Container$m = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
+var Container$n = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
   return props.borderColor;
 });
-var ActionHeader = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 25px 0 22px;\n  cursor: pointer;\n"])));
+var ActionHeader = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 25px 0 22px;\n  cursor: pointer;\n"])));
 var MenuTriggerIcon = styled.span(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
 var ActionsMenu = styled.ul(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 var DefaultMutedIcon = styled(SvgUnmuteNotifications)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose([""])));
 var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose([""])));
-var DefaultStarIcon = styled(SvgStar)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled(SvgStar)(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose([""])));
 var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled(SvgPin)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
@@ -44038,7 +43885,7 @@ function SvgMoreVert(props) {
   })));
 }
 
-var _templateObject$S, _templateObject2$N, _templateObject3$H;
+var _templateObject$T, _templateObject2$O, _templateObject3$H;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -44138,8 +43985,8 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     onClick: handleSave
   }, "Save"))));
 };
-var RolesSelect = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  margin: 20px 0 8px;\n  color: ", ";\n"])), function (_ref2) {
+var RolesSelect = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  margin: 20px 0 8px;\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return color;
 });
@@ -44180,7 +44027,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$T, _templateObject2$O, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$o, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -44664,8 +44511,8 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
-var Tabs$1 = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
+var LogoIconCont = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
+var Tabs$1 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
   return p.backgroundColor;
 }, function (p) {
   return p.borderColor;
@@ -44688,7 +44535,7 @@ var LinkField = styled.div(_templateObject6$s || (_templateObject6$s = _taggedTe
 }, function (p) {
   return p.backgroundColor;
 });
-var LinkInput = styled.input(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
+var LinkInput = styled.input(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
 var CopyButton = styled.button(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
@@ -44712,7 +44559,7 @@ var QrHint = styled.p(_templateObject13$5 || (_templateObject13$5 = _taggedTempl
   return p.color;
 });
 
-var _templateObject$U, _templateObject2$P, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$m;
+var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$p, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -44888,7 +44735,7 @@ var Members = function Members(_ref) {
   var currentUserRole = (_members$find = members.find(function (member) {
     return member.id === user.id;
   })) === null || _members$find === void 0 ? void 0 : _members$find.role;
-  return /*#__PURE__*/React__default.createElement(Container$n, {
+  return /*#__PURE__*/React__default.createElement(Container$o, {
     theme: theme
   }, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, {
     onScroll: handleMembersListScroll
@@ -45034,8 +44881,8 @@ var Members = function Members(_ref) {
     channelId: channel.id
   })));
 };
-var Container$n = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var Container$o = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
 var MemberNamePresence = styled.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
 var MemberNameWrapper = styled.div(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
 var MemberName$3 = styled.h4(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
@@ -45044,7 +44891,7 @@ var MemberName$3 = styled.h4(_templateObject5$x || (_templateObject5$x = _tagged
 var EditMemberIcon = styled.span(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var MembersList = styled.ul(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MembersList = styled.ul(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 var MemberItem$1 = styled.li(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
@@ -45062,7 +44909,40 @@ var RoleBadge = styled.span(_templateObject9$m || (_templateObject9$m = _taggedT
   return props.backgroundColor;
 });
 
-var _templateObject$V, _templateObject2$Q;
+var _templateObject$W;
+var MonthHeader = function MonthHeader(_ref) {
+  var currentCreatedAt = _ref.currentCreatedAt,
+    previousCreatedAt = _ref.previousCreatedAt,
+    isFirst = _ref.isFirst,
+    padding = _ref.padding,
+    fullWidth = _ref.fullWidth;
+  var _useColor = useColors(),
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+  var monthComponent = useMemo(function () {
+    var shouldShowHeader = isFirst || previousCreatedAt && new Date(currentCreatedAt).getMonth() !== new Date(previousCreatedAt).getMonth();
+    if (!shouldShowHeader) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(MonthHeaderContainer, {
+      color: textSecondary,
+      padding: padding,
+      fullWidth: fullWidth
+    }, new Date(currentCreatedAt).toLocaleDateString('en-US', {
+      month: 'long',
+      year: 'numeric'
+    }));
+  }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
+  return monthComponent;
+};
+var MonthHeaderContainer = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
+  return props.padding || '9px 12px';
+}, function (props) {
+  return props.fullWidth ? '100%' : 'auto';
+}, function (props) {
+  return props.color;
+});
+
+var _templateObject$X, _templateObject2$R;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
@@ -45079,10 +44959,16 @@ var Media = function Media(_ref) {
     dispatch(setAttachmentsAC([]));
     dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media));
   }, [channel.id]);
-  return /*#__PURE__*/React__default.createElement(Container$o, null, attachments.map(function (file) {
-    return /*#__PURE__*/React__default.createElement(MediaItem, {
+  return /*#__PURE__*/React__default.createElement(Container$p, null, attachments.map(function (file, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: file.id
-    }, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(Attachment$1, {
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '9px 6px',
+      fullWidth: true
+    }), /*#__PURE__*/React__default.createElement(MediaItem, null, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(Attachment$1, {
       attachment: _extends({}, file, {
         metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
       }),
@@ -45100,7 +44986,7 @@ var Media = function Media(_ref) {
       backgroundColor: background,
       borderRadius: '8px',
       isDetailsView: true
-    })));
+    }))));
   }), mediaFile && (/*#__PURE__*/React__default.createElement(SliderPopup, {
     channel: channel,
     setIsSliderOpen: setMediaFile,
@@ -45108,8 +44994,8 @@ var Media = function Media(_ref) {
     currentMediaFile: mediaFile
   })));
 };
-var Container$o = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var MediaItem = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var Container$p = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var MediaItem = styled.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
 var _rect$3, _path$1u;
 function _extends$1y() {
@@ -45121,13 +45007,12 @@ function _extends$1y() {
     return n;
   }, _extends$1y.apply(null, arguments);
 }
-function SvgFileIcon$1(props) {
+function SvgDocumentIcon(props) {
   return /*#__PURE__*/createElement$1("svg", _extends$1y({
     width: 40,
     height: 40,
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    color: "#5159f6"
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _rect$3 || (_rect$3 = /*#__PURE__*/createElement$1("rect", {
     width: 40,
     height: 40,
@@ -45137,7 +45022,7 @@ function SvgFileIcon$1(props) {
   })), _path$1u || (_path$1u = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M18.022 9.714c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.94-.687 1.864-.687 3.962v7.386c0 2.098.184 3.023.687 3.962a4.686 4.686 0 001.944 1.944c.938.502 1.864.687 3.962.687h3.957c2.098 0 3.023-.185 3.962-.687a4.686 4.686 0 001.944-1.944c.502-.939.687-1.864.687-3.962v-5.1c0-.683-.024-.99-.105-1.34a3.097 3.097 0 00-.399-.964c-.19-.305-.391-.539-.874-1.022l-4.175-4.175c-.483-.483-.717-.683-1.022-.874a3.095 3.095 0 00-.964-.399c-.293-.068-.556-.095-1.033-.103v-.002h-1.978zm0 1.715c-2.002 0-2.587.181-3.154.484a2.971 2.971 0 00-1.24 1.24c-.304.567-.485 1.153-.485 3.154v7.386c0 2.001.181 2.587.484 3.153.288.538.704.954 1.241 1.241.566.303 1.152.485 3.154.485h3.957c2.001 0 2.587-.182 3.153-.485a2.971 2.971 0 001.241-1.24c.303-.567.484-1.153.484-3.154v-5.1c0-.117 0-.219-.002-.308h-4.712A2.143 2.143 0 0120 16.144l.001-4.712-.15-.002h-1.83zm3.784.875l-.092-.091v3.93c0 .21.152.385.352.422l.077.006 3.932.002-.093-.093-4.176-4.176zm-6.092 12.839c0-.474.384-.857.858-.857H20A.857.857 0 1120 26h-3.428a.857.857 0 01-.858-.857zm.858-4.286a.857.857 0 000 1.715h6a.857.857 0 000-1.715h-6z",
+    d: "M17.593 9.5c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.939-.687 1.864-.687 3.962v7.386c0 2.098.185 3.023.687 3.962a4.685 4.685 0 001.944 1.944c.939.502 1.864.686 3.962.686h3.957c2.098 0 3.023-.184 3.962-.687a4.685 4.685 0 001.944-1.944c.502-.938.687-1.863.687-3.961v-5.1c0-.683-.024-.99-.105-1.34a3.094 3.094 0 00-.399-.964c-.19-.305-.39-.54-.874-1.022l-4.175-4.175c-.483-.483-.717-.684-1.022-.874a3.096 3.096 0 00-.963-.4c-.294-.067-.556-.095-1.034-.102V9.5h-1.978zm0 1.714c-2.002 0-2.587.182-3.154.485a2.971 2.971 0 00-1.24 1.24c-.303.567-.485 1.152-.485 3.154v7.386c0 2.001.182 2.587.485 3.153a2.97 2.97 0 001.24 1.24c.567.304 1.152.485 3.154.485h3.957c2.001 0 2.587-.181 3.153-.484a2.97 2.97 0 001.241-1.241c.303-.566.485-1.152.485-3.153v-5.1c0-.118-.001-.22-.003-.308h-4.712a2.143 2.143 0 01-2.143-2.142l.002-4.713-.15-.001h-1.83zm3.785.876l-.092-.091v3.93c0 .21.151.385.351.421l.077.007 3.932.002-.093-.094-4.175-4.175zm-6.092 12.839c0-.474.383-.858.857-.858h3.428a.857.857 0 010 1.715h-3.428a.857.857 0 01-.857-.857zm.857-4.286a.857.857 0 100 1.714h6a.857.857 0 000-1.714h-6z",
     fill: "currentColor"
   })));
 }
@@ -45165,7 +45050,7 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$q;
+var _templateObject$Y, _templateObject2$S, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -45220,20 +45105,26 @@ var Files = function Files(_ref) {
   useEffect(function () {
     dispatch(getAttachmentsAC(channelId, channelDetailsTabs.file));
   }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$p, null, attachments.map(function (file) {
+  return /*#__PURE__*/React__default.createElement(Container$q, null, attachments.map(function (file, index) {
     var metas = file.metadata && isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata;
     var withPrefix = true;
     var attachmentThumb = '';
     if (metas && metas.tmb) {
       if (metas.tmb.length < 70) {
-        attachmentThumb = base64ToToDataURL(metas.tmb);
+        attachmentThumb = base64ToDataURL(metas.tmb);
         withPrefix = false;
       } else {
         attachmentThumb = metas.tmb;
       }
     }
-    return /*#__PURE__*/React__default.createElement(FileItem, {
-      key: file.id,
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '14px 14px 0'
+    }), /*#__PURE__*/React__default.createElement(FileItem, {
       hoverBackgroundColor: filePreviewHoverBackgroundColor || backgroundHovered
     }, metas && metas.tmb ? (/*#__PURE__*/React__default.createElement(FileThumb, {
       draggable: false,
@@ -45241,10 +45132,10 @@ var Files = function Files(_ref) {
     })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont, {
       iconColor: accentColor,
       fillColor: surface1
-    }, filePreviewIcon || /*#__PURE__*/React__default.createElement(SvgFileIcon$1, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont, {
+    }, filePreviewIcon || /*#__PURE__*/React__default.createElement(SvgDocumentIcon, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont, {
       iconColor: accentColor,
       fillColor: surface1
-    }, filePreviewHoverIcon || /*#__PURE__*/React__default.createElement(SvgFileIcon$1, null)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AttachmentPreviewTitle, {
+    }, filePreviewHoverIcon || /*#__PURE__*/React__default.createElement(SvgDocumentIcon, null)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AttachmentPreviewTitle, {
       fontSize: fileNameFontSize,
       lineHeight: fileNameLineHeight,
       color: filePreviewTitleColor || textPrimary
@@ -45278,11 +45169,11 @@ var Files = function Files(_ref) {
           transformOrigin: 'center center'
         }
       }
-    }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null)));
+    }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null))));
   }));
 };
-var Container$p = styled.ul(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var DownloadWrapper = styled.a(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
+var Container$q = styled.ul(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var DownloadWrapper = styled.a(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
   return props.visible ? 'visible' : 'hidden';
 }, function (props) {
   return props.iconColor;
@@ -45290,18 +45181,18 @@ var DownloadWrapper = styled.a(_templateObject2$R || (_templateObject2$R = _tagg
   return props.iconColor;
 });
 var ProgressWrapper$2 = styled.span(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var FileIconCont = styled.span(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var FileIconCont = styled.span(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    color: ", ";\n    width: 40px;\n    height: 40px;\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont = styled.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
 var FileThumb = styled.img(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
-var FileItem = styled.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
+var FileItem = styled.div(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, DownloadWrapper, FileIconCont, FileHoverIconCont);
 var FileSizeAndDate = styled.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
@@ -45343,7 +45234,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$E, _templateObject5$z;
+var _templateObject$Z, _templateObject2$T, _templateObject3$L, _templateObject4$E, _templateObject5$z;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -45374,12 +45265,12 @@ var LinkItem = function LinkItem(_ref) {
     color: linkPreviewColor || textPrimary
   }, link))));
 };
-var LinkIconCont = styled.span(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var LinkIconCont = styled.span(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkHoverIconCont = styled.span(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var LinkHoverIconCont = styled.span(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
@@ -45392,7 +45283,7 @@ var LinkUrl = styled.span(_templateObject5$z || (_templateObject5$z = _taggedTem
   return props.color;
 });
 
-var _templateObject$Y;
+var _templateObject$_;
 var Links = function Links(_ref) {
   var channelId = _ref.channelId,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -45405,19 +45296,25 @@ var Links = function Links(_ref) {
   useEffect(function () {
     dispatch(getAttachmentsAC(channelId, channelDetailsTabs.link));
   }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$q, null, attachments.map(function (file) {
-    return /*#__PURE__*/React__default.createElement(LinkItem, {
-      key: file.id,
+  return /*#__PURE__*/React__default.createElement(Container$r, null, attachments.map(function (file, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '6px 14px 0'
+    }), /*#__PURE__*/React__default.createElement(LinkItem, {
       link: file.url,
       linkPreviewColor: linkPreviewColor,
       linkPreviewHoverBackgroundColor: linkPreviewHoverBackgroundColor,
       linkPreviewHoverIcon: linkPreviewHoverIcon,
       linkPreviewTitleColor: linkPreviewTitleColor,
       linkPreviewIcon: linkPreviewIcon
-    });
+    }));
   }));
 };
-var Container$q = styled.ul(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$r = styled.ul(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 
 var _rect$5, _path$1x;
 function _extends$1B() {
@@ -45473,7 +45370,7 @@ function SvgVoicePreviewPause(props) {
   })));
 }
 
-var _templateObject$Z, _templateObject2$T, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$v, _templateObject7$t, _templateObject8$r;
+var _templateObject$$, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$v, _templateObject7$u, _templateObject8$r;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -45598,12 +45495,12 @@ var VoiceItem = function VoiceItem(_ref) {
     type: 'audio/mpeg'
   })));
 };
-var FileIconCont$1 = styled.span(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileIconCont$1 = styled.span(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
   return props.fill || 'transparent';
 }, function (props) {
   return props.fill || 'transparent';
 });
-var FileHoverIconCont$1 = styled.span(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont$1 = styled.span(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
   return props.fill || 'transparent';
 }, function (props) {
   return props.fill || 'transparent';
@@ -45618,12 +45515,12 @@ var AudioTitle = styled.span(_templateObject5$A || (_templateObject5$A = _tagged
 var AudioDate = styled.span(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioSendTime = styled.span(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
+var AudioSendTime = styled.span(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 });
 var Audio = styled.audio(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$_;
+var _templateObject$10;
 var Voices = function Voices(_ref) {
   var channelId = _ref.channelId,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -45638,9 +45535,15 @@ var Voices = function Voices(_ref) {
   useEffect(function () {
     dispatch(getAttachmentsAC(channelId, channelDetailsTabs.voice));
   }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$r, null, attachments.map(function (file) {
-    return /*#__PURE__*/React__default.createElement(VoiceItem, {
-      key: file.id,
+  return /*#__PURE__*/React__default.createElement(Container$s, null, attachments.map(function (file, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '7px 14px 2px'
+    }), /*#__PURE__*/React__default.createElement(VoiceItem, {
       file: _extends({}, file, {
         metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
       }),
@@ -45651,12 +45554,12 @@ var Voices = function Voices(_ref) {
       voicePreviewPauseIcon: voicePreviewPauseIcon,
       voicePreviewPauseHoverIcon: voicePreviewPauseHoverIcon,
       voicePreviewTitleColor: voicePreviewTitleColor
-    });
+    }));
   }));
 };
-var Container$r = styled.ul(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$s = styled.ul(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 
-var _templateObject$$, _templateObject2$U;
+var _templateObject$11, _templateObject2$V;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -45725,7 +45628,7 @@ var DetailsTab = function DetailsTab(_ref) {
       setActiveTab(channelDetailsTabs.member);
     }
   }, [showMembers]);
-  return /*#__PURE__*/React__default.createElement(Container$s, {
+  return /*#__PURE__*/React__default.createElement(Container$t, {
     theme: theme
   }, /*#__PURE__*/React__default.createElement(DetailsTabHeader, {
     color: textSecondary,
@@ -45807,8 +45710,8 @@ var DetailsTab = function DetailsTab(_ref) {
     voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
   })));
 };
-var Container$s = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
-var DetailsTabHeader = styled.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
+var Container$t = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
+var DetailsTabHeader = styled.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.backgroundColor || 'transparent';
@@ -45826,15 +45729,15 @@ var DetailsTabHeader = styled.div(_templateObject2$U || (_templateObject2$U = _t
   return props.activeTabColor;
 });
 
-var _templateObject$10, _templateObject2$V, _templateObject3$N, _templateObject4$G;
-var Container$t = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
+var _templateObject$12, _templateObject2$W, _templateObject3$N, _templateObject4$G;
+var Container$u = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
   return props.active ? 'display: block' : 'display: none';
 }, function (props) {
   return "calc(100vh - " + (props.heightOffset ? props.heightOffset + 48 : 48) + "px)";
 }, function (props) {
   return props.backgroundColor;
 });
-var AvatarCont = styled.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin-bottom: 4px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .dropdown-body {\n    top: inherit;\n    right: inherit;\n    bottom: -90px;\n  }\n"])));
+var AvatarCont = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin-bottom: 4px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .dropdown-body {\n    top: inherit;\n    right: inherit;\n    bottom: -90px;\n  }\n"])));
 var DropDownWrapper = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
 var EditChannelFooter = styled(ButtonBlock)(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
 var EditChannel = function EditChannel(_ref) {
@@ -45988,7 +45891,7 @@ var EditChannel = function EditChannel(_ref) {
   useEffect(function () {
     setOffsetTop(editContainer && editContainer.current && editContainer.current.offsetTop);
   }, []);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Container$t, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Container$u, {
     ref: editContainer,
     heightOffset: offsetTop,
     active: isEditMode,
@@ -46091,7 +45994,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$11, _templateObject2$W, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$w, _templateObject7$u, _templateObject8$s, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
+var _templateObject$13, _templateObject2$X, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$w, _templateObject7$v, _templateObject8$s, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -46323,7 +46226,7 @@ var Details = function Details(_ref) {
       return Promise.reject(e);
     }
   };
-  return /*#__PURE__*/React__default.createElement(Container$u, {
+  return /*#__PURE__*/React__default.createElement(Container$v, {
     backgroundColor: backgroundColor,
     mounted: mounted,
     size: size,
@@ -46521,14 +46424,14 @@ var Details = function Details(_ref) {
     QRCodeIcon: QRCodeIcon
   }))));
 };
-var Container$u = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  width: 0;\n  border-left: 1px solid ", ";\n  //transition: all 0.1s;\n  ", "\n  background-color: ", ";\n}\n"])), function (props) {
+var Container$v = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  width: 0;\n  border-left: 1px solid ", ";\n  //transition: all 0.1s;\n  ", "\n  background-color: ", ";\n}\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.mounted && " width: " + (props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px') + ";";
 }, function (props) {
   return props.backgroundColor;
 });
-var ChannelDetailsHeader = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
+var ChannelDetailsHeader = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.borderColor;
 });
 var ChatDetails = styled.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
@@ -46547,7 +46450,7 @@ var AboutChannelTitle = styled.h4(_templateObject5$B || (_templateObject5$B = _t
 var AboutChannelText = styled.h3(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var ChannelInfo$4 = styled.div(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$4 = styled.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
   return (!props.direction || props.direction !== 'column') && '16px';
 }, function (props) {
   return props.direction && props.direction === 'column' && '16px';
@@ -46571,7 +46474,7 @@ var ChannelNameWrapper = styled.div(_templateObject1$h || (_templateObject1$h =
 var EditButton = styled.span(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 var PhoneNumberContainer = styled.span(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: text;\n"])));
 
-var _templateObject$12;
+var _templateObject$14;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -46802,7 +46705,7 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     QRCodeIcon: QRCodeIcon
   })));
 };
-var DetailsWrapper = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
+var DetailsWrapper = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
 
 var _path$1z;
 function _extends$1D() {
@@ -46826,7 +46729,7 @@ function SvgChevronDown(props) {
   })));
 }
 
-var _templateObject$13, _templateObject2$X;
+var _templateObject$15, _templateObject2$Y;
 var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -46909,7 +46812,7 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
     isMuted: channel.muted
   }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgChevronDown, null)));
 };
-var BottomButton = styled.div(_templateObject$13 || (_templateObject$13 = _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) {
+var BottomButton = styled.div(_templateObject$15 || (_templateObject$15 = _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.animateFrom === 'right' && "right: " + (props.rightPosition === undefined ? 16 : props.rightPosition - 100) + "px";
@@ -46920,7 +46823,7 @@ var BottomButton = styled.div(_templateObject$13 || (_templateObject$13 = _tagge
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$1 = styled.span(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\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"])), function (props) {
+var UnreadCount$1 = styled.span(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\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"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';
@@ -46963,7 +46866,7 @@ function SvgMention(props) {
   })));
 }
 
-var _templateObject$14, _templateObject2$Y;
+var _templateObject$16, _templateObject2$Z;
 var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentionsButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -47106,7 +47009,7 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     isMuted: channel.muted
   }, channel.newMentionCount ? channel.newMentionCount > 99 ? '99+' : channel.newMentionCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgMention, null)));
 };
-var BottomButton$1 = styled.div(_templateObject$14 || (_templateObject$14 = _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) {
+var BottomButton$1 = styled.div(_templateObject$16 || (_templateObject$16 = _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";
@@ -47117,7 +47020,7 @@ var BottomButton$1 = styled.div(_templateObject$14 || (_templateObject$14 = _tag
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$2 = styled.span(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\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"])), function (props) {
+var UnreadCount$2 = styled.span(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\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"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';