sceyt-chat-react-uikit 1.7.2-beta.1 → 1.7.2-beta.11

package/index.modern.js

@@ -20,6 +20,7 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { createPortal } from 'react-dom';
 import { useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin, MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { $createOffsetView } from '@lexical/offset';
+import MicRecorder from 'mic-recorder-to-mp3';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 
 // src/utils/formatProdErrorMessage.ts
@@ -2593,7 +2594,8 @@ var MESSAGE_DELIVERY_STATUS = {
   PENDING: 'pending',
   SENT: 'sent',
   DELIVERED: 'received',
-  READ: 'displayed'
+  READ: 'displayed',
+  PLAYED: 'played'
 };
 var MESSAGE_STATUS = {
   UNMODIFIED: 'unmodified',
@@ -8947,6 +8949,7 @@ var UploadImageIcon;
 var showChannelDetails = false;
 var channelTypesFilter = [];
 var memberCount = 10;
+var disableFrowardMentionsCount = false;
 function setChannelInMap(channel) {
   channelsMap[channel.id] = _extends({}, channel);
 }
@@ -9043,6 +9046,12 @@ function getChannelMembersCount() {
 function setChannelMembersCount(count) {
   memberCount = count;
 }
+function setDisableFrowardMentionsCount(disable) {
+  disableFrowardMentionsCount = disable;
+}
+function getDisableFrowardMentionsCount() {
+  return disableFrowardMentionsCount;
+}
 var handleNewMessages;
 function setHandleNewMessages(callback) {
   handleNewMessages = callback;
@@ -9557,6 +9566,7 @@ var UPDATE_CHANNEL = 'UPDATE_CHANNEL';
 var REMOVE_CHANNEL_CACHES = 'REMOVE_CHANNEL_CACHES';
 var MARK_MESSAGES_AS_READ = 'MARK_MESSAGES_AS_READ';
 var MARK_MESSAGES_AS_DELIVERED = 'MARK_MESSAGES_AS_DELIVERED';
+var MARK_VOICE_MESSAGE_AS_PLAYED = 'MARK_VOICE_MESSAGE_AS_PLAYED';
 var SEND_TYPING = 'SEND_TYPING';
 var SEND_RECORDING = 'SEND_RECORDING';
 var JOIN_TO_CHANNEL = 'JOIN_TO_CHANNEL';
@@ -10327,7 +10337,11 @@ var initialState$1 = {
   openedMessageMenu: '',
   attachmentsUploadingProgress: {},
   playingAudioId: null,
-  selectedMessagesMap: null
+  selectedMessagesMap: null,
+  oGMetadata: {},
+  attachmentUpdatedMap: {},
+  messageMarkers: {},
+  messagesMarkersLoadingState: null
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -10456,39 +10470,8 @@ var messageSlice = createSlice({
     updateMessageAttachment: function updateMessageAttachment(state, action) {
       var _action$payload4 = action.payload,
         url = _action$payload4.url,
-        messageId = _action$payload4.messageId,
-        params = _action$payload4.params;
-      state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
-        if (message.id === messageId) {
-          for (var index = 0; index < message.attachments.length; index++) {
-            var attachment = message.attachments[index];
-            if (attachment.url === url) {
-              message.attachments[index] = _extends({}, attachment, params);
-            }
-          }
-        }
-        if (message.attachments.length) {
-          var detachedAttachments = message.attachments.map(function (att) {
-            var _att$user, _att$user2;
-            return _extends({}, att, {
-              user: _extends({}, att.user, {
-                metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
-                presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
-              })
-            });
-          });
-          updateMessageOnAllMessages(messageId, {
-            attachments: detachedAttachments
-          });
-          updateMessageOnMap(message.channelId, {
-            messageId: messageId,
-            params: {
-              attachments: detachedAttachments
-            }
-          });
-        }
-        return message;
-      });
+        attachmentUrl = _action$payload4.attachmentUrl;
+      state.attachmentUpdatedMap[url] = attachmentUrl;
     },
     addReactionToMessage: function addReactionToMessage(state, action) {
       var _action$payload5 = action.payload,
@@ -10670,6 +10653,69 @@ var messageSlice = createSlice({
     },
     clearSelectedMessages: function clearSelectedMessages(state) {
       state.selectedMessagesMap = null;
+    },
+    setOGMetadata: function setOGMetadata(state, action) {
+      var _action$payload10 = action.payload,
+        url = _action$payload10.url,
+        metadata = _action$payload10.metadata;
+      state.oGMetadata[url] = metadata;
+    },
+    updateOGMetadata: function updateOGMetadata(state, action) {
+      var _action$payload11 = action.payload,
+        url = _action$payload11.url,
+        metadata = _action$payload11.metadata;
+      if (metadata) {
+        var existing = state.oGMetadata[url];
+        state.oGMetadata[url] = existing ? _extends({}, existing, metadata) : metadata;
+      }
+    },
+    setMessageMarkers: function setMessageMarkers(state, action) {
+      var _action$payload12 = action.payload,
+        channelId = _action$payload12.channelId,
+        messageId = _action$payload12.messageId,
+        messageMarkers = _action$payload12.messageMarkers,
+        deliveryStatus = _action$payload12.deliveryStatus;
+      if (!state.messageMarkers[channelId]) {
+        state.messageMarkers[channelId] = {};
+      }
+      if (!state.messageMarkers[channelId][messageId]) {
+        state.messageMarkers[channelId][messageId] = {};
+      }
+      if (!state.messageMarkers[channelId][messageId][deliveryStatus]) {
+        state.messageMarkers[channelId][messageId][deliveryStatus] = [];
+      }
+      state.messageMarkers[channelId][messageId][deliveryStatus] = [].concat(messageMarkers);
+    },
+    updateMessagesMarkers: function updateMessagesMarkers(state, action) {
+      var _marker$user;
+      var _action$payload13 = action.payload,
+        channelId = _action$payload13.channelId,
+        deliveryStatus = _action$payload13.deliveryStatus,
+        marker = _action$payload13.marker;
+      var userId = (_marker$user = marker.user) === null || _marker$user === void 0 ? void 0 : _marker$user.id;
+      var messageIds = marker.messageIds;
+      for (var _iterator = _createForOfIteratorHelperLoose(messageIds), _step; !(_step = _iterator()).done;) {
+        var messageId = _step.value;
+        if (!state.messageMarkers[channelId]) {
+          state.messageMarkers[channelId] = {};
+        }
+        if (!state.messageMarkers[channelId][messageId]) {
+          state.messageMarkers[channelId][messageId] = {};
+        }
+        if (!state.messageMarkers[channelId][messageId][deliveryStatus]) {
+          state.messageMarkers[channelId][messageId][deliveryStatus] = [];
+        }
+        var isUserMarkered = state.messageMarkers[channelId][messageId][deliveryStatus].some(function (marker) {
+          var _marker$user2;
+          return ((_marker$user2 = marker.user) === null || _marker$user2 === void 0 ? void 0 : _marker$user2.id) === userId;
+        });
+        if (!isUserMarkered) {
+          state.messageMarkers[channelId][messageId][deliveryStatus].push(marker);
+        }
+      }
+    },
+    setMessagesMarkersLoadingState: function setMessagesMarkersLoadingState(state, action) {
+      state.messagesMarkersLoadingState = action.payload.state;
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -10719,7 +10765,12 @@ var _messageSlice$actions = messageSlice.actions,
   setPlayingAudioId = _messageSlice$actions.setPlayingAudioId,
   addSelectedMessage = _messageSlice$actions.addSelectedMessage,
   removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
-  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages;
+  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
+  setOGMetadata = _messageSlice$actions.setOGMetadata,
+  updateOGMetadata = _messageSlice$actions.updateOGMetadata,
+  setMessageMarkers = _messageSlice$actions.setMessageMarkers,
+  setMessagesMarkersLoadingState = _messageSlice$actions.setMessagesMarkersLoadingState,
+  updateMessagesMarkers = _messageSlice$actions.updateMessagesMarkers;
 var MessageReducer = messageSlice.reducer;
 
 var initialState$2 = {
@@ -11331,6 +11382,15 @@ var markMessagesAsDeliveredAC = function markMessagesAsDeliveredAC(channelId, me
     }
   };
 };
+var markVoiceMessageAsPlayedAC = function markVoiceMessageAsPlayedAC(channelId, messageIds) {
+  return {
+    type: MARK_VOICE_MESSAGE_AS_PLAYED,
+    payload: {
+      channelId: channelId,
+      messageIds: messageIds
+    }
+  };
+};
 var sendTypingAC = function sendTypingAC(state) {
   return {
     type: SEND_TYPING,
@@ -11506,6 +11566,7 @@ var getChannelMentionsAC = function getChannelMentionsAC(channelId) {
 
 var GET_MESSAGES = 'GET_MESSAGES';
 var GET_MESSAGE = 'GET_MESSAGE';
+var GET_MESSAGE_MARKERS = 'GET_MESSAGE_MARKERS';
 var LOAD_MORE_MESSAGES = 'LOAD_MORE_MESSAGES';
 var SEND_MESSAGE = 'SEND_MESSAGE';
 var SEND_TEXT_MESSAGE = 'SEND_TEXT_MESSAGE';
@@ -11799,11 +11860,22 @@ function setMessagesHasNextAC(hasNext) {
     hasNext: hasNext
   });
 }
-function setUpdateMessageAttachmentAC(url, messageId, params) {
+function setOGMetadataAC(url, metadata) {
+  return setOGMetadata({
+    url: url,
+    metadata: metadata
+  });
+}
+function updateOGMetadataAC(url, metadata) {
+  return updateOGMetadata({
+    url: url,
+    metadata: metadata
+  });
+}
+function setUpdateMessageAttachmentAC(url, attachmentUrl) {
   return updateMessageAttachment({
     url: url,
-    messageId: messageId,
-    params: params
+    attachmentUrl: attachmentUrl
   });
 }
 function updateMessageAC(messageId, params, addIfNotExists) {
@@ -11928,6 +12000,36 @@ function removeSelectedMessageAC(messageId) {
 function clearSelectedMessagesAC() {
   return clearSelectedMessages();
 }
+function getMessageMarkersAC(messageId, channelId, deliveryStatus) {
+  return {
+    type: GET_MESSAGE_MARKERS,
+    payload: {
+      messageId: messageId,
+      channelId: channelId,
+      deliveryStatus: deliveryStatus
+    }
+  };
+}
+function setMessageMarkersAC(channelId, messageId, messageMarkers, deliveryStatus) {
+  return setMessageMarkers({
+    channelId: channelId,
+    messageId: messageId,
+    messageMarkers: messageMarkers,
+    deliveryStatus: deliveryStatus
+  });
+}
+function updateMessagesMarkersAC(channelId, deliveryStatus, marker) {
+  return updateMessagesMarkers({
+    channelId: channelId,
+    deliveryStatus: deliveryStatus,
+    marker: marker
+  });
+}
+function setMessagesMarkersLoadingStateAC(state) {
+  return setMessagesMarkersLoadingState({
+    state: state
+  });
+}
 
 var SET_CONTACT_LOADING_STATE = 'SET_CONTACT_LOADING_STATE';
 var GET_CONTACTS = 'GET_CONTACTS';
@@ -14202,6 +14304,8 @@ function watchForEvents() {
                   name: markerList.name,
                   markersMap: markersMap
                 });
+                _context.n = 71;
+                return put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
               case 71:
                 return _context.a(3, 142);
               case 72:
@@ -14736,27 +14840,28 @@ var _marked$2 = /*#__PURE__*/_regenerator().m(createChannel),
   _marked7 = /*#__PURE__*/_regenerator().m(getChannelMentions),
   _marked8 = /*#__PURE__*/_regenerator().m(channelsForForwardLoadMore),
   _marked9 = /*#__PURE__*/_regenerator().m(markMessagesRead),
-  _marked0 = /*#__PURE__*/_regenerator().m(markMessagesDelivered),
-  _marked1 = /*#__PURE__*/_regenerator().m(switchChannel),
-  _marked10 = /*#__PURE__*/_regenerator().m(notificationsTurnOff),
-  _marked11 = /*#__PURE__*/_regenerator().m(notificationsTurnOn),
-  _marked12 = /*#__PURE__*/_regenerator().m(markChannelAsRead),
-  _marked13 = /*#__PURE__*/_regenerator().m(markChannelAsUnRead),
-  _marked14 = /*#__PURE__*/_regenerator().m(pinChannel),
-  _marked15 = /*#__PURE__*/_regenerator().m(unpinChannel),
-  _marked16 = /*#__PURE__*/_regenerator().m(removeChannelCaches),
-  _marked17 = /*#__PURE__*/_regenerator().m(leaveChannel),
-  _marked18 = /*#__PURE__*/_regenerator().m(deleteChannel),
-  _marked19 = /*#__PURE__*/_regenerator().m(blockChannel),
-  _marked20 = /*#__PURE__*/_regenerator().m(updateChannel),
-  _marked21 = /*#__PURE__*/_regenerator().m(checkUsersStatus),
-  _marked22 = /*#__PURE__*/_regenerator().m(sendTyping),
-  _marked23 = /*#__PURE__*/_regenerator().m(sendRecording),
-  _marked24 = /*#__PURE__*/_regenerator().m(clearHistory),
-  _marked25 = /*#__PURE__*/_regenerator().m(deleteAllMessages),
-  _marked26 = /*#__PURE__*/_regenerator().m(joinChannel),
-  _marked27 = /*#__PURE__*/_regenerator().m(watchForChannelEvents),
-  _marked28 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
+  _marked0 = /*#__PURE__*/_regenerator().m(markVoiceMessageAsPlayed),
+  _marked1 = /*#__PURE__*/_regenerator().m(markMessagesDelivered),
+  _marked10 = /*#__PURE__*/_regenerator().m(switchChannel),
+  _marked11 = /*#__PURE__*/_regenerator().m(notificationsTurnOff),
+  _marked12 = /*#__PURE__*/_regenerator().m(notificationsTurnOn),
+  _marked13 = /*#__PURE__*/_regenerator().m(markChannelAsRead),
+  _marked14 = /*#__PURE__*/_regenerator().m(markChannelAsUnRead),
+  _marked15 = /*#__PURE__*/_regenerator().m(pinChannel),
+  _marked16 = /*#__PURE__*/_regenerator().m(unpinChannel),
+  _marked17 = /*#__PURE__*/_regenerator().m(removeChannelCaches),
+  _marked18 = /*#__PURE__*/_regenerator().m(leaveChannel),
+  _marked19 = /*#__PURE__*/_regenerator().m(deleteChannel),
+  _marked20 = /*#__PURE__*/_regenerator().m(blockChannel),
+  _marked21 = /*#__PURE__*/_regenerator().m(updateChannel),
+  _marked22 = /*#__PURE__*/_regenerator().m(checkUsersStatus),
+  _marked23 = /*#__PURE__*/_regenerator().m(sendTyping),
+  _marked24 = /*#__PURE__*/_regenerator().m(sendRecording),
+  _marked25 = /*#__PURE__*/_regenerator().m(clearHistory),
+  _marked26 = /*#__PURE__*/_regenerator().m(deleteAllMessages),
+  _marked27 = /*#__PURE__*/_regenerator().m(joinChannel),
+  _marked28 = /*#__PURE__*/_regenerator().m(watchForChannelEvents),
+  _marked29 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
 function createChannel(action) {
   var payload, channelData, dontCreateIfNotExists, callback, SceytChatClient, createChannelData, fileToUpload, isSelfChannel, channelIsExistOnAllChannels, createdChannel, allChannels, memberId, checkChannelExist, messageToSend, _allChannels, _memberId, _t;
   return _regenerator().w(function (_context) {
@@ -14874,7 +14979,7 @@ function createChannel(action) {
         }
         messageToSend = {
           body: createdChannel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || createdChannel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'CC' : 'CG',
-          mentionedMembers: [],
+          mentionedUsers: [],
           attachments: [],
           type: 'system'
         };
@@ -15654,7 +15759,7 @@ function markMessagesRead(action) {
           deliveryStatus: MESSAGE_DELIVERY_STATUS.READ,
           userMarkers: [{
             user: messageListMarker.user,
-            createdAt: messageListMarker.createAt,
+            createdAt: messageListMarker.createdAt,
             messageId: messageId,
             name: MESSAGE_DELIVERY_STATUS.READ
           }]
@@ -15682,7 +15787,7 @@ function markMessagesRead(action) {
     }
   }, _marked9, null, [[2, 9]]);
 }
-function markMessagesDelivered(action) {
+function markVoiceMessageAsPlayed(action) {
   var payload, channelId, messageIds, channel, _t10;
   return _regenerator().w(function (_context0) {
     while (1) switch (_context0.p = _context0.n) {
@@ -15704,151 +15809,148 @@ function markMessagesDelivered(action) {
           _context0.n = 3;
           break;
         }
-        log.info('send delivered marker ', messageIds);
         _context0.n = 3;
-        return call(channel.markMessagesAsReceived, messageIds);
+        return call(channel.markVoiceMessagesAsPlayed, messageIds);
       case 3:
         _context0.n = 5;
         break;
       case 4:
         _context0.p = 4;
         _t10 = _context0.v;
-        log.error(_t10, 'Error on mark messages delivered');
+        log.error(_t10, 'Error on mark voice messages read');
       case 5:
         return _context0.a(2);
     }
   }, _marked0, null, [[1, 4]]);
 }
-function switchChannel(action) {
-  var payload, channel, updateActiveChannel, channelToSwitch, existingChannel, addChannel, _SceytChatClient5, fetchedChannel, channelFromMap, currentActiveChannel, _t11;
+function markMessagesDelivered(action) {
+  var payload, channelId, messageIds, channel, _t11;
   return _regenerator().w(function (_context1) {
     while (1) switch (_context1.p = _context1.n) {
       case 0:
-        _context1.p = 0;
+        payload = action.payload;
+        channelId = payload.channelId, messageIds = payload.messageIds;
+        _context1.p = 1;
+        _context1.n = 2;
+        return call(getChannelFromMap, channelId);
+      case 2:
+        channel = _context1.v;
+        if (!channel) {
+          channel = getChannelFromAllChannels(channelId);
+          if (channel) {
+            setChannelInMap(channel);
+          }
+        }
+        if (!channel) {
+          _context1.n = 3;
+          break;
+        }
+        log.info('send delivered marker ', messageIds);
+        _context1.n = 3;
+        return call(channel.markMessagesAsReceived, messageIds);
+      case 3:
+        _context1.n = 5;
+        break;
+      case 4:
+        _context1.p = 4;
+        _t11 = _context1.v;
+        log.error(_t11, 'Error on mark messages delivered');
+      case 5:
+        return _context1.a(2);
+    }
+  }, _marked1, null, [[1, 4]]);
+}
+function switchChannel(action) {
+  var payload, channel, updateActiveChannel, channelToSwitch, existingChannel, addChannel, _SceytChatClient5, fetchedChannel, channelFromMap, currentActiveChannel, _t12;
+  return _regenerator().w(function (_context10) {
+    while (1) switch (_context10.p = _context10.n) {
+      case 0:
+        _context10.p = 0;
         payload = action.payload;
         channel = payload.channel, updateActiveChannel = payload.updateActiveChannel;
         channelToSwitch = channel;
         if (!(!(channel !== null && channel !== void 0 && channel.id) && updateActiveChannel)) {
-          _context1.n = 3;
+          _context10.n = 3;
           break;
         }
-        _context1.n = 1;
+        _context10.n = 1;
         return call(setActiveChannelId, '');
       case 1:
-        _context1.n = 2;
+        _context10.n = 2;
         return put(setActiveChannelAC({}));
       case 2:
-        return _context1.a(2);
+        return _context10.a(2);
       case 3:
         existingChannel = checkChannelExists(channel.id);
         if (existingChannel) {
-          _context1.n = 9;
+          _context10.n = 9;
           break;
         }
         addChannel = getChannelFromAllChannels(channel.id);
         if (!addChannel) {
-          _context1.n = 5;
+          _context10.n = 5;
           break;
         }
         setChannelInMap(addChannel);
-        _context1.n = 4;
+        _context10.n = 4;
         return put(addChannelAC(JSON.parse(JSON.stringify(addChannel))));
       case 4:
         channelToSwitch = _extends({}, channelToSwitch, addChannel);
-        _context1.n = 8;
+        _context10.n = 8;
         break;
       case 5:
         _SceytChatClient5 = getClient();
-        _context1.n = 6;
+        _context10.n = 6;
         return call(_SceytChatClient5.getChannel, channel.id);
       case 6:
-        fetchedChannel = _context1.v;
+        fetchedChannel = _context10.v;
         addChannelToAllChannels(fetchedChannel);
         setChannelInMap(fetchedChannel);
-        _context1.n = 7;
+        _context10.n = 7;
         return put(addChannelAC(JSON.parse(JSON.stringify(fetchedChannel))));
       case 7:
         channelToSwitch = _extends({}, channelToSwitch, fetchedChannel);
       case 8:
-        _context1.n = 10;
+        _context10.n = 10;
         break;
       case 9:
         channelFromMap = getChannelFromMap(channel.id);
         channelToSwitch = _extends({}, channelToSwitch, channelFromMap);
       case 10:
         if (!updateActiveChannel) {
-          _context1.n = 13;
+          _context10.n = 13;
           break;
         }
         currentActiveChannel = getChannelFromMap(getActiveChannelId());
-        _context1.n = 11;
+        _context10.n = 11;
         return call(setUnreadScrollTo, true);
       case 11:
-        _context1.n = 12;
+        _context10.n = 12;
         return call(setActiveChannelId, channel && channel.id);
       case 12:
         if (channel.isLinkedChannel) {
           channelToSwitch.linkedFrom = currentActiveChannel;
         }
-        _context1.n = 13;
+        _context10.n = 13;
         return put(setActiveChannelAC(_extends({}, channelToSwitch)));
       case 13:
-        _context1.n = 15;
+        _context10.n = 15;
         break;
       case 14:
-        _context1.p = 14;
-        _t11 = _context1.v;
-        log.error('error in switch channel', _t11);
-      case 15:
-        return _context1.a(2);
-    }
-  }, _marked1, null, [[0, 14]]);
-}
-function notificationsTurnOff(action) {
-  var expireTime, activeChannelId, channel, updatedChannel, _t12;
-  return _regenerator().w(function (_context10) {
-    while (1) switch (_context10.p = _context10.n) {
-      case 0:
-        expireTime = action.payload.expireTime;
-        _context10.n = 1;
-        return call(getActiveChannelId);
-      case 1:
-        activeChannelId = _context10.v;
-        _context10.n = 2;
-        return call(getChannelFromMap, activeChannelId);
-      case 2:
-        channel = _context10.v;
-        _context10.p = 3;
-        _context10.n = 4;
-        return call(channel.mute, expireTime);
-      case 4:
-        updatedChannel = _context10.v;
-        updateChannelOnAllChannels(channel.id, {
-          muted: updatedChannel.muted,
-          mutedTill: updatedChannel.mutedTill
-        });
-        _context10.n = 5;
-        return put(updateChannelDataAC(updatedChannel.id, {
-          muted: updatedChannel.muted,
-          mutedTill: updatedChannel.mutedTill
-        }));
-      case 5:
-        _context10.n = 7;
-        break;
-      case 6:
-        _context10.p = 6;
+        _context10.p = 14;
         _t12 = _context10.v;
-        log.error('ERROR turn off notifications', _t12.message);
-      case 7:
+        log.error('error in switch channel', _t12);
+      case 15:
         return _context10.a(2);
     }
-  }, _marked10, null, [[3, 6]]);
+  }, _marked10, null, [[0, 14]]);
 }
-function notificationsTurnOn() {
-  var activeChannelId, channel, updatedChannel, _t13;
+function notificationsTurnOff(action) {
+  var expireTime, activeChannelId, channel, updatedChannel, _t13;
   return _regenerator().w(function (_context11) {
     while (1) switch (_context11.p = _context11.n) {
       case 0:
+        expireTime = action.payload.expireTime;
         _context11.n = 1;
         return call(getActiveChannelId);
       case 1:
@@ -15859,7 +15961,7 @@ function notificationsTurnOn() {
         channel = _context11.v;
         _context11.p = 3;
         _context11.n = 4;
-        return call(channel.unmute);
+        return call(channel.mute, expireTime);
       case 4:
         updatedChannel = _context11.v;
         updateChannelOnAllChannels(channel.id, {
@@ -15877,51 +15979,53 @@ function notificationsTurnOn() {
       case 6:
         _context11.p = 6;
         _t13 = _context11.v;
-        log.error('ERROR turn on notifications: ', _t13.message);
+        log.error('ERROR turn off notifications', _t13.message);
       case 7:
         return _context11.a(2);
     }
   }, _marked11, null, [[3, 6]]);
 }
-function markChannelAsRead(action) {
-  var channelId, channel, updateData, _t14;
+function notificationsTurnOn() {
+  var activeChannelId, channel, updatedChannel, _t14;
   return _regenerator().w(function (_context12) {
     while (1) switch (_context12.p = _context12.n) {
       case 0:
-        _context12.p = 0;
-        channelId = action.payload.channelId;
         _context12.n = 1;
-        return call(getChannelFromMap, channelId);
+        return call(getActiveChannelId);
       case 1:
-        channel = _context12.v;
-        if (!channel) {
-          channel = getChannelFromAllChannels(channelId);
-        }
+        activeChannelId = _context12.v;
         _context12.n = 2;
-        return call(channel.markAsRead);
+        return call(getChannelFromMap, activeChannelId);
       case 2:
-        updateData = {
-          unread: false,
-          newMessageCount: 0,
-          newMentionCount: 0
-        };
-        updateChannelOnAllChannels(channel.id, updateData);
-        _context12.n = 3;
-        return put(updateChannelDataAC(channel.id, updateData));
-      case 3:
+        channel = _context12.v;
+        _context12.p = 3;
+        _context12.n = 4;
+        return call(channel.unmute);
+      case 4:
+        updatedChannel = _context12.v;
+        updateChannelOnAllChannels(channel.id, {
+          muted: updatedChannel.muted,
+          mutedTill: updatedChannel.mutedTill
+        });
         _context12.n = 5;
+        return put(updateChannelDataAC(updatedChannel.id, {
+          muted: updatedChannel.muted,
+          mutedTill: updatedChannel.mutedTill
+        }));
+      case 5:
+        _context12.n = 7;
         break;
-      case 4:
-        _context12.p = 4;
+      case 6:
+        _context12.p = 6;
         _t14 = _context12.v;
-        log.error(_t14, 'Error in set channel unread');
-      case 5:
+        log.error('ERROR turn on notifications: ', _t14.message);
+      case 7:
         return _context12.a(2);
     }
-  }, _marked12, null, [[0, 4]]);
+  }, _marked12, null, [[3, 6]]);
 }
-function markChannelAsUnRead(action) {
-  var channelId, channel, _t15;
+function markChannelAsRead(action) {
+  var channelId, channel, updateData, _t15;
   return _regenerator().w(function (_context13) {
     while (1) switch (_context13.p = _context13.n) {
       case 0:
@@ -15935,15 +16039,16 @@ function markChannelAsUnRead(action) {
           channel = getChannelFromAllChannels(channelId);
         }
         _context13.n = 2;
-        return call(channel.markAsUnRead);
+        return call(channel.markAsRead);
       case 2:
-        updateChannelOnAllChannels(channel.id, {
-          unread: true
-        });
+        updateData = {
+          unread: false,
+          newMessageCount: 0,
+          newMentionCount: 0
+        };
+        updateChannelOnAllChannels(channel.id, updateData);
         _context13.n = 3;
-        return put(updateChannelDataAC(channel.id, {
-          unread: true
-        }));
+        return put(updateChannelDataAC(channel.id, updateData));
       case 3:
         _context13.n = 5;
         break;
@@ -15956,8 +16061,8 @@ function markChannelAsUnRead(action) {
     }
   }, _marked13, null, [[0, 4]]);
 }
-function pinChannel(action) {
-  var channelId, channel, updatedChannel, _t16;
+function markChannelAsUnRead(action) {
+  var channelId, channel, _t16;
   return _regenerator().w(function (_context14) {
     while (1) switch (_context14.p = _context14.n) {
       case 0:
@@ -15971,29 +16076,28 @@ function pinChannel(action) {
           channel = getChannelFromAllChannels(channelId);
         }
         _context14.n = 2;
-        return call(channel.pin);
+        return call(channel.markAsUnRead);
       case 2:
-        updatedChannel = _context14.v;
         updateChannelOnAllChannels(channel.id, {
-          pinnedAt: updatedChannel.pinnedAt
+          unread: true
         });
         _context14.n = 3;
-        return put(updateChannelDataAC(updatedChannel.id, {
-          pinnedAt: updatedChannel.pinnedAt
-        }, true));
+        return put(updateChannelDataAC(channel.id, {
+          unread: true
+        }));
       case 3:
         _context14.n = 5;
         break;
       case 4:
         _context14.p = 4;
         _t16 = _context14.v;
-        log.error(_t16, 'Error in pinChannel');
+        log.error(_t16, 'Error in set channel unread');
       case 5:
         return _context14.a(2);
     }
   }, _marked14, null, [[0, 4]]);
 }
-function unpinChannel(action) {
+function pinChannel(action) {
   var channelId, channel, updatedChannel, _t17;
   return _regenerator().w(function (_context15) {
     while (1) switch (_context15.p = _context15.n) {
@@ -16008,7 +16112,7 @@ function unpinChannel(action) {
           channel = getChannelFromAllChannels(channelId);
         }
         _context15.n = 2;
-        return call(channel.unpin);
+        return call(channel.pin);
       case 2:
         updatedChannel = _context15.v;
         updateChannelOnAllChannels(channel.id, {
@@ -16017,197 +16121,234 @@ function unpinChannel(action) {
         _context15.n = 3;
         return put(updateChannelDataAC(updatedChannel.id, {
           pinnedAt: updatedChannel.pinnedAt
-        }, false, true));
+        }, true));
       case 3:
         _context15.n = 5;
         break;
       case 4:
         _context15.p = 4;
         _t17 = _context15.v;
-        log.error(_t17, 'Error in unpinChannel');
+        log.error(_t17, 'Error in pinChannel');
       case 5:
         return _context15.a(2);
     }
   }, _marked15, null, [[0, 4]]);
 }
+function unpinChannel(action) {
+  var channelId, channel, updatedChannel, _t18;
+  return _regenerator().w(function (_context16) {
+    while (1) switch (_context16.p = _context16.n) {
+      case 0:
+        _context16.p = 0;
+        channelId = action.payload.channelId;
+        _context16.n = 1;
+        return call(getChannelFromMap, channelId);
+      case 1:
+        channel = _context16.v;
+        if (!channel) {
+          channel = getChannelFromAllChannels(channelId);
+        }
+        _context16.n = 2;
+        return call(channel.unpin);
+      case 2:
+        updatedChannel = _context16.v;
+        updateChannelOnAllChannels(channel.id, {
+          pinnedAt: updatedChannel.pinnedAt
+        });
+        _context16.n = 3;
+        return put(updateChannelDataAC(updatedChannel.id, {
+          pinnedAt: updatedChannel.pinnedAt
+        }, false, true));
+      case 3:
+        _context16.n = 5;
+        break;
+      case 4:
+        _context16.p = 4;
+        _t18 = _context16.v;
+        log.error(_t18, 'Error in unpinChannel');
+      case 5:
+        return _context16.a(2);
+    }
+  }, _marked16, null, [[0, 4]]);
+}
 function removeChannelCaches(action) {
   var payload, channelId, activeChannelId, activeChannel;
-  return _regenerator().w(function (_context16) {
-    while (1) switch (_context16.n) {
+  return _regenerator().w(function (_context17) {
+    while (1) switch (_context17.n) {
       case 0:
         payload = action.payload;
         channelId = payload.channelId;
-        _context16.n = 1;
+        _context17.n = 1;
         return call(getActiveChannelId);
       case 1:
-        activeChannelId = _context16.v;
+        activeChannelId = _context17.v;
         removeChannelFromMap(channelId);
         removeMessagesFromMap(channelId);
         if (!(activeChannelId === channelId)) {
-          _context16.n = 3;
+          _context17.n = 3;
           break;
         }
-        _context16.n = 2;
+        _context17.n = 2;
         return call(getLastChannelFromMap);
       case 2:
-        activeChannel = _context16.v;
+        activeChannel = _context17.v;
         if (!activeChannel) {
-          _context16.n = 3;
+          _context17.n = 3;
           break;
         }
-        _context16.n = 3;
+        _context17.n = 3;
         return put(switchChannelActionAC(JSON.parse(JSON.stringify(activeChannel))));
       case 3:
-        return _context16.a(2);
+        return _context17.a(2);
     }
-  }, _marked16);
+  }, _marked17);
 }
 function leaveChannel(action) {
-  var payload, channelId, channel, messageBuilder, messageToSend, _t18;
-  return _regenerator().w(function (_context17) {
-    while (1) switch (_context17.p = _context17.n) {
+  var payload, channelId, channel, messageBuilder, messageToSend, _t19;
+  return _regenerator().w(function (_context18) {
+    while (1) switch (_context18.p = _context18.n) {
       case 0:
-        _context17.p = 0;
+        _context18.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context17.n = 1;
+        _context18.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context17.v;
+        channel = _context18.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context17.n = 5;
+          _context18.n = 5;
           break;
         }
         if (!(channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE)) {
-          _context17.n = 2;
+          _context18.n = 2;
           break;
         }
         messageBuilder = channel.createMessageBuilder();
         messageBuilder.setBody('LG').setType('system').setDisplayCount(0).setSilent(true);
         messageToSend = messageBuilder.create();
         log.info('send message for left');
-        _context17.n = 2;
+        _context18.n = 2;
         return call(channel.sendMessage, messageToSend);
       case 2:
         log.info('leave');
-        _context17.n = 3;
+        _context18.n = 3;
         return call(channel.leave);
       case 3:
-        _context17.n = 4;
+        _context18.n = 4;
         return put(removeChannelAC(channelId));
       case 4:
         deleteChannelFromAllChannels(channelId);
-        _context17.n = 5;
+        _context18.n = 5;
         return put(removeChannelCachesAC(channelId));
       case 5:
-        _context17.n = 7;
+        _context18.n = 7;
         break;
       case 6:
-        _context17.p = 6;
-        _t18 = _context17.v;
-        log.error('ERROR in leave channel - ', _t18.message);
+        _context18.p = 6;
+        _t19 = _context18.v;
+        log.error('ERROR in leave channel - ', _t19.message);
       case 7:
-        return _context17.a(2);
+        return _context18.a(2);
     }
-  }, _marked17, null, [[0, 6]]);
+  }, _marked18, null, [[0, 6]]);
 }
 function deleteChannel(action) {
-  var payload, channelId, channel, _t19;
-  return _regenerator().w(function (_context18) {
-    while (1) switch (_context18.p = _context18.n) {
+  var payload, channelId, channel, _t20;
+  return _regenerator().w(function (_context19) {
+    while (1) switch (_context19.p = _context19.n) {
       case 0:
-        _context18.p = 0;
+        _context19.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context18.n = 1;
+        _context19.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context18.v;
+        channel = _context19.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context18.n = 5;
+          _context19.n = 5;
           break;
         }
-        _context18.n = 2;
+        _context19.n = 2;
         return call(channel["delete"]);
       case 2:
-        _context18.n = 3;
+        _context19.n = 3;
         return put(setChannelToRemoveAC(channel));
       case 3:
-        _context18.n = 4;
+        _context19.n = 4;
         return put(removeChannelAC(channelId));
       case 4:
-        _context18.n = 5;
+        _context19.n = 5;
         return put(removeChannelCachesAC(channelId));
       case 5:
-        _context18.n = 7;
+        _context19.n = 7;
         break;
       case 6:
-        _context18.p = 6;
-        _t19 = _context18.v;
-        log.error('ERROR in delete channel', _t19);
+        _context19.p = 6;
+        _t20 = _context19.v;
+        log.error('ERROR in delete channel', _t20);
       case 7:
-        return _context18.a(2);
+        return _context19.a(2);
     }
-  }, _marked18, null, [[0, 6]]);
+  }, _marked19, null, [[0, 6]]);
 }
 function blockChannel(action) {
-  var payload, channelId, channel, _t20;
-  return _regenerator().w(function (_context19) {
-    while (1) switch (_context19.p = _context19.n) {
+  var payload, channelId, channel, _t21;
+  return _regenerator().w(function (_context20) {
+    while (1) switch (_context20.p = _context20.n) {
       case 0:
-        _context19.p = 0;
+        _context20.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context19.n = 1;
+        _context20.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context19.v;
+        channel = _context20.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context19.n = 4;
+          _context20.n = 4;
           break;
         }
-        _context19.n = 2;
+        _context20.n = 2;
         return call(channel.block);
       case 2:
-        _context19.n = 3;
+        _context20.n = 3;
         return put(removeChannelAC(channelId));
       case 3:
-        _context19.n = 4;
+        _context20.n = 4;
         return put(removeChannelCachesAC(channelId));
       case 4:
-        _context19.n = 6;
+        _context20.n = 6;
         break;
       case 5:
-        _context19.p = 5;
-        _t20 = _context19.v;
-        log.error('ERROR in block channel - ', _t20.message);
+        _context20.p = 5;
+        _t21 = _context20.v;
+        log.error('ERROR in block channel - ', _t21.message);
       case 6:
-        return _context19.a(2);
+        return _context20.a(2);
     }
-  }, _marked19, null, [[0, 5]]);
+  }, _marked20, null, [[0, 5]]);
 }
 function updateChannel(action) {
-  var payload, channelId, config, _SceytChatClient6, channel, paramsToUpdate, fileToUpload, _yield$call5, subject, avatarUrl, metadata, _t21;
-  return _regenerator().w(function (_context20) {
-    while (1) switch (_context20.p = _context20.n) {
+  var payload, channelId, config, _SceytChatClient6, channel, paramsToUpdate, fileToUpload, _yield$call5, subject, avatarUrl, metadata, _t22;
+  return _regenerator().w(function (_context21) {
+    while (1) switch (_context21.p = _context21.n) {
       case 0:
-        _context20.p = 0;
+        _context21.p = 0;
         payload = action.payload;
         channelId = payload.channelId, config = payload.config;
         _SceytChatClient6 = getClient();
-        _context20.n = 1;
+        _context21.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context20.v;
+        channel = _context21.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
@@ -16218,7 +16359,7 @@ function updateChannel(action) {
           avatarUrl: channel.avatarUrl
         };
         if (!config.avatar) {
-          _context20.n = 3;
+          _context21.n = 3;
           break;
         }
         fileToUpload = {
@@ -16227,10 +16368,10 @@ function updateChannel(action) {
             log.info('upload percent - ', progressPercent);
           }
         };
-        _context20.n = 2;
+        _context21.n = 2;
         return call(_SceytChatClient6.uploadFile, fileToUpload);
       case 2:
-        paramsToUpdate.avatarUrl = _context20.v;
+        paramsToUpdate.avatarUrl = _context21.v;
       case 3:
         if (config.subject) {
           paramsToUpdate.subject = config.subject;
@@ -16241,14 +16382,14 @@ function updateChannel(action) {
         if (config.avatarUrl === '') {
           paramsToUpdate.avatarUrl = '';
         }
-        _context20.n = 4;
+        _context21.n = 4;
         return call(channel.update, paramsToUpdate);
       case 4:
-        _yield$call5 = _context20.v;
+        _yield$call5 = _context21.v;
         subject = _yield$call5.subject;
         avatarUrl = _yield$call5.avatarUrl;
         metadata = _yield$call5.metadata;
-        _context20.n = 5;
+        _context21.n = 5;
         return put(updateChannelDataAC(channelId, {
           subject: subject,
           avatarUrl: avatarUrl,
@@ -16260,29 +16401,29 @@ function updateChannel(action) {
           avatarUrl: avatarUrl,
           metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
         });
-        _context20.n = 7;
+        _context21.n = 7;
         break;
       case 6:
-        _context20.p = 6;
-        _t21 = _context20.v;
-        log.error('ERROR in update channel', _t21.message);
+        _context21.p = 6;
+        _t22 = _context21.v;
+        log.error('ERROR in update channel', _t22.message);
       case 7:
-        return _context20.a(2);
+        return _context21.a(2);
     }
-  }, _marked20, null, [[0, 6]]);
+  }, _marked21, null, [[0, 6]]);
 }
 function checkUsersStatus() {
-  var _SceytChatClient7, usersForUpdate, updatedUsers, usersToUpdateMap, update, updateData, _t22;
-  return _regenerator().w(function (_context21) {
-    while (1) switch (_context21.p = _context21.n) {
+  var _SceytChatClient7, usersForUpdate, updatedUsers, usersToUpdateMap, update, updateData, _t23;
+  return _regenerator().w(function (_context22) {
+    while (1) switch (_context22.p = _context22.n) {
       case 0:
-        _context21.p = 0;
+        _context22.p = 0;
         _SceytChatClient7 = getClient();
         usersForUpdate = Object.keys(usersMap);
-        _context21.n = 1;
+        _context22.n = 1;
         return call(_SceytChatClient7.getUsers, usersForUpdate);
       case 1:
-        updatedUsers = _context21.v;
+        updatedUsers = _context22.v;
         usersToUpdateMap = {};
         update = false;
         updatedUsers.forEach(function (updatedUser) {
@@ -16294,149 +16435,149 @@ function checkUsersStatus() {
           }
         });
         if (!update) {
-          _context21.n = 4;
+          _context22.n = 4;
           break;
         }
         updateData = JSON.parse(JSON.stringify(usersToUpdateMap));
-        _context21.n = 2;
+        _context22.n = 2;
         return put(updateMembersPresenceAC(updateData));
       case 2:
-        _context21.n = 3;
+        _context22.n = 3;
         return put(updateUserStatusOnMapAC(updateData));
       case 3:
-        _context21.n = 4;
+        _context22.n = 4;
         return put(updateUserStatusOnChannelAC(updateData));
       case 4:
-        _context21.n = 6;
+        _context22.n = 6;
         break;
       case 5:
-        _context21.p = 5;
-        _t22 = _context21.v;
-        log.error('ERROR in check user status : ', _t22.message);
+        _context22.p = 5;
+        _t23 = _context22.v;
+        log.error('ERROR in check user status : ', _t23.message);
       case 6:
-        return _context21.a(2);
+        return _context22.a(2);
     }
-  }, _marked21, null, [[0, 5]]);
+  }, _marked22, null, [[0, 5]]);
 }
 function sendTyping(action) {
-  var state, activeChannelId, channel, _t23;
-  return _regenerator().w(function (_context22) {
-    while (1) switch (_context22.p = _context22.n) {
+  var state, activeChannelId, channel, _t24;
+  return _regenerator().w(function (_context23) {
+    while (1) switch (_context23.p = _context23.n) {
       case 0:
         state = action.payload.state;
-        _context22.n = 1;
+        _context23.n = 1;
         return call(getActiveChannelId);
       case 1:
-        activeChannelId = _context22.v;
-        _context22.n = 2;
+        activeChannelId = _context23.v;
+        _context23.n = 2;
         return call(getChannelFromMap, activeChannelId);
       case 2:
-        channel = _context22.v;
-        _context22.p = 3;
+        channel = _context23.v;
+        _context23.p = 3;
         if (!channel) {
-          _context22.n = 6;
+          _context23.n = 6;
           break;
         }
         if (!state) {
-          _context22.n = 5;
+          _context23.n = 5;
           break;
         }
-        _context22.n = 4;
+        _context23.n = 4;
         return call(channel.startTyping);
       case 4:
-        _context22.n = 6;
+        _context23.n = 6;
         break;
       case 5:
-        _context22.n = 6;
+        _context23.n = 6;
         return call(channel.stopTyping);
       case 6:
-        _context22.n = 8;
+        _context23.n = 8;
         break;
       case 7:
-        _context22.p = 7;
-        _t23 = _context22.v;
-        log.error('ERROR in send typing', _t23);
+        _context23.p = 7;
+        _t24 = _context23.v;
+        log.error('ERROR in send typing', _t24);
       case 8:
-        return _context22.a(2);
+        return _context23.a(2);
     }
-  }, _marked22, null, [[3, 7]]);
+  }, _marked23, null, [[3, 7]]);
 }
 function sendRecording(action) {
-  var _action$payload, state, channelId, channel, _t24;
-  return _regenerator().w(function (_context23) {
-    while (1) switch (_context23.p = _context23.n) {
+  var _action$payload, state, channelId, channel, _t25;
+  return _regenerator().w(function (_context24) {
+    while (1) switch (_context24.p = _context24.n) {
       case 0:
         _action$payload = action.payload, state = _action$payload.state, channelId = _action$payload.channelId;
-        _context23.n = 1;
+        _context24.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context23.v;
-        _context23.p = 2;
+        channel = _context24.v;
+        _context24.p = 2;
         if (!channel) {
-          _context23.n = 5;
+          _context24.n = 5;
           break;
         }
         if (!state) {
-          _context23.n = 4;
+          _context24.n = 4;
           break;
         }
-        _context23.n = 3;
+        _context24.n = 3;
         return call(channel.startRecording);
       case 3:
-        _context23.n = 5;
+        _context24.n = 5;
         break;
       case 4:
-        _context23.n = 5;
+        _context24.n = 5;
         return call(channel.stopRecording);
       case 5:
-        _context23.n = 7;
+        _context24.n = 7;
         break;
       case 6:
-        _context23.p = 6;
-        _t24 = _context23.v;
-        log.error('ERROR in send recording', _t24);
+        _context24.p = 6;
+        _t25 = _context24.v;
+        log.error('ERROR in send recording', _t25);
       case 7:
-        return _context23.a(2);
+        return _context24.a(2);
     }
-  }, _marked23, null, [[2, 6]]);
+  }, _marked24, null, [[2, 6]]);
 }
 function clearHistory(action) {
-  var payload, channelId, channel, activeChannelId, groupName, _t25;
-  return _regenerator().w(function (_context24) {
-    while (1) switch (_context24.p = _context24.n) {
+  var payload, channelId, channel, activeChannelId, groupName, _t26;
+  return _regenerator().w(function (_context25) {
+    while (1) switch (_context25.p = _context25.n) {
       case 0:
-        _context24.p = 0;
+        _context25.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context24.n = 1;
+        _context25.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context24.v;
+        channel = _context25.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context24.n = 2;
+        _context25.n = 2;
         return call(getActiveChannelId);
       case 2:
-        activeChannelId = _context24.v;
+        activeChannelId = _context25.v;
         if (!channel) {
-          _context24.n = 7;
+          _context25.n = 7;
           break;
         }
-        _context24.n = 3;
+        _context25.n = 3;
         return call(channel.deleteAllMessages);
       case 3:
-        _context24.n = 4;
+        _context25.n = 4;
         return put(clearMessagesAC());
       case 4:
         removeMessagesFromMap(channelId);
         if (channelId === activeChannelId) {
           removeAllMessages();
         }
-        _context24.n = 5;
+        _context25.n = 5;
         return put(clearSelectedMessagesAC());
       case 5:
-        _context24.n = 6;
+        _context25.n = 6;
         return put(updateChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
@@ -16449,64 +16590,64 @@ function clearHistory(action) {
           newMentionCount: 0
         });
         groupName = getChannelGroupName(channel);
-        _context24.n = 7;
+        _context25.n = 7;
         return put(updateSearchedChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
           newMentionCount: 0
         }, groupName));
       case 7:
-        _context24.n = 9;
+        _context25.n = 9;
         break;
       case 8:
-        _context24.p = 8;
-        _t25 = _context24.v;
-        log.error('ERROR in clear history', _t25);
+        _context25.p = 8;
+        _t26 = _context25.v;
+        log.error('ERROR in clear history', _t26);
       case 9:
-        return _context24.a(2);
+        return _context25.a(2);
     }
-  }, _marked24, null, [[0, 8]]);
+  }, _marked25, null, [[0, 8]]);
 }
 function deleteAllMessages(action) {
-  var payload, channelId, channel, activeChannelId, groupName, _t26;
-  return _regenerator().w(function (_context25) {
-    while (1) switch (_context25.p = _context25.n) {
+  var payload, channelId, channel, activeChannelId, groupName, _t27;
+  return _regenerator().w(function (_context26) {
+    while (1) switch (_context26.p = _context26.n) {
       case 0:
-        _context25.p = 0;
+        _context26.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context25.n = 1;
+        _context26.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context25.v;
+        channel = _context26.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context25.n = 2;
+        _context26.n = 2;
         return call(getActiveChannelId);
       case 2:
-        activeChannelId = _context25.v;
+        activeChannelId = _context26.v;
         if (!channel) {
-          _context25.n = 8;
+          _context26.n = 8;
           break;
         }
-        _context25.n = 3;
+        _context26.n = 3;
         return call(channel.deleteAllMessages, true);
       case 3:
         removeMessagesFromMap(channelId);
         if (!(channelId === activeChannelId)) {
-          _context25.n = 5;
+          _context26.n = 5;
           break;
         }
-        _context25.n = 4;
+        _context26.n = 4;
         return put(clearMessagesAC());
       case 4:
         removeAllMessages();
       case 5:
-        _context25.n = 6;
+        _context26.n = 6;
         return put(clearSelectedMessagesAC());
       case 6:
-        _context25.n = 7;
+        _context26.n = 7;
         return put(updateChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
@@ -16519,182 +16660,185 @@ function deleteAllMessages(action) {
           newMentionCount: 0
         });
         groupName = getChannelGroupName(channel);
-        _context25.n = 8;
+        _context26.n = 8;
         return put(updateSearchedChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
           newMentionCount: 0
         }, groupName));
       case 8:
-        _context25.n = 10;
+        _context26.n = 10;
         break;
       case 9:
-        _context25.p = 9;
-        _t26 = _context25.v;
-        log.error('ERROR in clear history', _t26);
+        _context26.p = 9;
+        _t27 = _context26.v;
+        log.error('ERROR in clear history', _t27);
       case 10:
-        return _context25.a(2);
+        return _context26.a(2);
     }
-  }, _marked25, null, [[0, 9]]);
+  }, _marked26, null, [[0, 9]]);
 }
 function joinChannel(action) {
-  var payload, channelId, _SceytChatClient8, channel, joinedChannel, _t27;
-  return _regenerator().w(function (_context26) {
-    while (1) switch (_context26.p = _context26.n) {
+  var payload, channelId, _SceytChatClient8, channel, joinedChannel, _t28;
+  return _regenerator().w(function (_context27) {
+    while (1) switch (_context27.p = _context27.n) {
       case 0:
-        _context26.p = 0;
+        _context27.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
         _SceytChatClient8 = getClient();
-        _context26.n = 1;
+        _context27.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
-        channel = _context26.v;
+        channel = _context27.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (channel) {
-          _context26.n = 3;
+          _context27.n = 3;
           break;
         }
-        _context26.n = 2;
+        _context27.n = 2;
         return call(_SceytChatClient8.getChannel, channelId);
       case 2:
-        channel = _context26.v;
+        channel = _context27.v;
       case 3:
-        _context26.n = 4;
+        _context27.n = 4;
         return call(channel.join);
       case 4:
-        joinedChannel = _context26.v;
-        _context26.n = 5;
+        joinedChannel = _context27.v;
+        _context27.n = 5;
         return put(setCloseSearchChannelsAC(true));
       case 5:
-        _context26.n = 6;
+        _context27.n = 6;
         return put(setChannelToAddAC(JSON.parse(JSON.stringify(joinedChannel))));
       case 6:
-        _context26.n = 7;
+        _context27.n = 7;
         return put(switchChannelActionAC(JSON.parse(JSON.stringify(joinedChannel))));
       case 7:
         addChannelToAllChannels(joinedChannel);
-        _context26.n = 8;
+        _context27.n = 8;
         return call(setActiveChannelId, joinedChannel.id);
       case 8:
-        _context26.n = 10;
+        _context27.n = 10;
         break;
       case 9:
-        _context26.p = 9;
-        _t27 = _context26.v;
-        log.error(_t27, 'Error in join to channel');
+        _context27.p = 9;
+        _t28 = _context27.v;
+        log.error(_t28, 'Error in join to channel');
       case 10:
-        return _context26.a(2);
+        return _context27.a(2);
     }
-  }, _marked26, null, [[0, 9]]);
+  }, _marked27, null, [[0, 9]]);
 }
 function watchForChannelEvents() {
-  return _regenerator().w(function (_context27) {
-    while (1) switch (_context27.n) {
+  return _regenerator().w(function (_context28) {
+    while (1) switch (_context28.n) {
       case 0:
-        _context27.n = 1;
+        _context28.n = 1;
         return call(watchForEvents);
       case 1:
-        return _context27.a(2);
+        return _context28.a(2);
     }
-  }, _marked27);
+  }, _marked28);
 }
 function ChannelsSaga() {
-  return _regenerator().w(function (_context28) {
-    while (1) switch (_context28.n) {
+  return _regenerator().w(function (_context29) {
+    while (1) switch (_context29.n) {
       case 0:
-        _context28.n = 1;
+        _context29.n = 1;
         return takeLatest(CREATE_CHANNEL, createChannel);
       case 1:
-        _context28.n = 2;
+        _context29.n = 2;
         return takeLatest(GET_CHANNELS, getChannels);
       case 2:
-        _context28.n = 3;
+        _context29.n = 3;
         return takeLatest(SEARCH_CHANNELS, searchChannels);
       case 3:
-        _context28.n = 4;
+        _context29.n = 4;
         return takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
       case 4:
-        _context28.n = 5;
+        _context29.n = 5;
         return takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
       case 5:
-        _context28.n = 6;
+        _context29.n = 6;
         return takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
       case 6:
-        _context28.n = 7;
+        _context29.n = 7;
         return takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
       case 7:
-        _context28.n = 8;
+        _context29.n = 8;
         return takeEvery(SWITCH_CHANNEL, switchChannel);
       case 8:
-        _context28.n = 9;
+        _context29.n = 9;
         return takeLatest(LEAVE_CHANNEL, leaveChannel);
       case 9:
-        _context28.n = 10;
+        _context29.n = 10;
         return takeLatest(DELETE_CHANNEL, deleteChannel);
       case 10:
-        _context28.n = 11;
+        _context29.n = 11;
         return takeLatest(BLOCK_CHANNEL, blockChannel);
       case 11:
-        _context28.n = 12;
+        _context29.n = 12;
         return takeLatest(UPDATE_CHANNEL, updateChannel);
       case 12:
-        _context28.n = 13;
+        _context29.n = 13;
         return takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
       case 13:
-        _context28.n = 14;
+        _context29.n = 14;
         return takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
       case 14:
-        _context28.n = 15;
-        return takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
+        _context29.n = 15;
+        return takeLatest(MARK_VOICE_MESSAGE_AS_PLAYED, markVoiceMessageAsPlayed);
       case 15:
-        _context28.n = 16;
-        return takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
+        _context29.n = 16;
+        return takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
       case 16:
-        _context28.n = 17;
-        return takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
+        _context29.n = 17;
+        return takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
       case 17:
-        _context28.n = 18;
-        return takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
+        _context29.n = 18;
+        return takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
       case 18:
-        _context28.n = 19;
-        return takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
+        _context29.n = 19;
+        return takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
       case 19:
-        _context28.n = 20;
-        return takeLatest(CHECK_USER_STATUS, checkUsersStatus);
+        _context29.n = 20;
+        return takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
       case 20:
-        _context28.n = 21;
-        return takeLatest(SEND_TYPING, sendTyping);
+        _context29.n = 21;
+        return takeLatest(CHECK_USER_STATUS, checkUsersStatus);
       case 21:
-        _context28.n = 22;
-        return takeLatest(SEND_RECORDING, sendRecording);
+        _context29.n = 22;
+        return takeLatest(SEND_TYPING, sendTyping);
       case 22:
-        _context28.n = 23;
-        return takeLatest(PIN_CHANNEL, pinChannel);
+        _context29.n = 23;
+        return takeLatest(SEND_RECORDING, sendRecording);
       case 23:
-        _context28.n = 24;
-        return takeLatest(UNPIN_CHANNEL, unpinChannel);
+        _context29.n = 24;
+        return takeLatest(PIN_CHANNEL, pinChannel);
       case 24:
-        _context28.n = 25;
-        return takeLatest(CLEAR_HISTORY, clearHistory);
+        _context29.n = 25;
+        return takeLatest(UNPIN_CHANNEL, unpinChannel);
       case 25:
-        _context28.n = 26;
-        return takeLatest(JOIN_TO_CHANNEL, joinChannel);
+        _context29.n = 26;
+        return takeLatest(CLEAR_HISTORY, clearHistory);
       case 26:
-        _context28.n = 27;
-        return takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
+        _context29.n = 27;
+        return takeLatest(JOIN_TO_CHANNEL, joinChannel);
       case 27:
-        _context28.n = 28;
-        return takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
+        _context29.n = 28;
+        return takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
       case 28:
-        _context28.n = 29;
-        return takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
+        _context29.n = 29;
+        return takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
       case 29:
-        return _context28.a(2);
+        _context29.n = 30;
+        return takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
+      case 30:
+        return _context29.a(2);
     }
-  }, _marked28);
+  }, _marked29);
 }
 
 function rgbaToThumbHash(w, h, rgba) {
@@ -17114,6 +17258,15 @@ var playingAudioIdSelector = function playingAudioIdSelector(store) {
 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 getFrame = function getFrame(videoSrc, time) {
   try {
@@ -17184,7 +17337,8 @@ var _marked$3 = /*#__PURE__*/_regenerator().m(sendMessage),
   _marked13$1 = /*#__PURE__*/_regenerator().m(loadMoreMessageAttachments),
   _marked14$1 = /*#__PURE__*/_regenerator().m(pauseAttachmentUploading),
   _marked15$1 = /*#__PURE__*/_regenerator().m(resumeAttachmentUploading),
-  _marked16$1 = /*#__PURE__*/_regenerator().m(MessageSaga);
+  _marked16$1 = /*#__PURE__*/_regenerator().m(getMessageMarkers),
+  _marked17$1 = /*#__PURE__*/_regenerator().m(MessageSaga);
 var handleUploadAttachments = function handleUploadAttachments(attachments, message, channel) {
   try {
     return Promise.resolve(Promise.all(attachments.map(function (attachment) {
@@ -17198,7 +17352,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
             }, thumbnailMetas.duration ? {
               dur: thumbnailMetas.duration
             } : {})));
-            var attachmentBuilder = channel.createAttachmentBuilder(uri, attachment.type);
+            var attachmentBuilder = channel.createdAttachmentBuilder(uri, attachment.type);
             var attachmentToSend = attachmentBuilder.setName(attachment.name).setMetadata(attachmentMeta).setFileSize(fileSize || attachment.size).setUpload(false).create();
             return attachmentToSend;
           }
@@ -17270,7 +17424,7 @@ var addPendingMessage = function addPendingMessage(message, messageCopy, channel
   try {
     var messageToAdd = JSON.parse(JSON.stringify(_extends({}, messageCopy, {
       createdAt: new Date(Date.now()),
-      mentionedUsers: message.mentionedMembers,
+      mentionedUsers: message.mentionedUsers,
       parentMessage: message.parentMessage
     })));
     addMessageToMap(channel.id, messageToAdd);
@@ -17328,7 +17482,7 @@ function sendMessage(action) {
         _context3.n = 7;
         return put(addChannelAC(JSON.parse(JSON.stringify(channel))));
       case 7:
-        mentionedUserIds = message.mentionedMembers ? message.mentionedMembers.map(function (member) {
+        mentionedUserIds = message.mentionedUsers ? message.mentionedUsers.map(function (member) {
           return member.id;
         }) : [];
         customUploader = getCustomUploader();
@@ -17358,7 +17512,7 @@ function sendMessage(action) {
                 if (attachment.cachedUrl) {
                   uri = attachment.cachedUrl;
                 }
-                attachmentBuilder = channel.createAttachmentBuilder(uri || attachment.data, attachment.type);
+                attachmentBuilder = channel.createdAttachmentBuilder(uri || attachment.data, attachment.type);
                 messageAttachment = attachmentBuilder.setName(attachment.name).setMetadata(attachment.metadata).setUpload(customUploader ? false : attachment.upload).setFileSize(attachment.size).create();
                 if (!customUploader) {
                   handleUpdateUploadProgress = function handleUpdateUploadProgress(percent) {
@@ -17506,7 +17660,7 @@ function sendMessage(action) {
               case 3:
                 linkAttachmentToSend = null;
                 if (_i === 0 && linkAttachment) {
-                  linkAttachmentBuilder = channel.createAttachmentBuilder(linkAttachment.data, linkAttachment.type);
+                  linkAttachmentBuilder = channel.createdAttachmentBuilder(linkAttachment.data, linkAttachment.type);
                   linkAttachmentToSend = linkAttachmentBuilder.setName(linkAttachment.name).setUpload(linkAttachment.upload).create();
                 }
                 if (linkAttachmentToSend) {
@@ -17709,12 +17863,12 @@ function sendTextMessage(action) {
         _context4.n = 7;
         return put(addChannelAC(JSON.parse(JSON.stringify(channel))));
       case 7:
-        mentionedUserIds = message.mentionedMembers ? message.mentionedMembers.map(function (member) {
+        mentionedUserIds = message.mentionedUsers ? message.mentionedUsers.map(function (member) {
           return member.id;
         }) : [];
         attachments = message.attachments;
         if (message.attachments && message.attachments.length) {
-          attachmentBuilder = channel.createAttachmentBuilder(attachments[0].data, attachments[0].type);
+          attachmentBuilder = channel.createdAttachmentBuilder(attachments[0].data, attachments[0].type);
           att = attachmentBuilder.setName('').setUpload(attachments[0].upload).create();
           attachments = [att];
         }
@@ -17729,7 +17883,7 @@ function sendTextMessage(action) {
         messageToSend = messageBuilder.create();
         pendingMessage = JSON.parse(JSON.stringify(_extends({}, messageToSend, {
           createdAt: new Date(Date.now()),
-          mentionedUsers: message.mentionedMembers,
+          mentionedUsers: message.mentionedUsers,
           parentMessage: message.parentMessage
         })));
         sendMessageTid = messageToSend.tid;
@@ -17815,16 +17969,14 @@ function sendTextMessage(action) {
       case 16:
         throw new Error('Connection required to send message');
       case 17:
+        store.dispatch(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
         _context4.n = 18;
-        return put(scrollToNewMessageAC(true));
-      case 18:
-        _context4.n = 19;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -17834,23 +17986,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -17889,7 +18041,7 @@ function forwardMessage(action) {
         _context5.n = 6;
         return put(addChannelAC(JSON.parse(JSON.stringify(channel))));
       case 6:
-        mentionedUserIds = message.mentionedMembers ? message.mentionedMembers.map(function (member) {
+        mentionedUserIds = message.mentionedUsers ? message.mentionedUsers.map(function (member) {
           return member.id;
         }) : [];
         attachments = message.attachments;
@@ -17898,12 +18050,12 @@ function forwardMessage(action) {
           break;
         }
         if (message.attachments && message.attachments.length) {
-          attachmentBuilder = channel.createAttachmentBuilder(attachments[0].url, attachments[0].type);
+          attachmentBuilder = channel.createdAttachmentBuilder(attachments[0].url, attachments[0].type);
           att = attachmentBuilder.setName(attachments[0].name).setMetadata(attachments[0].metadata).setFileSize(attachments[0].size).setUpload(false).create();
           attachments = [att];
         }
         messageBuilder = channel.createMessageBuilder();
-        messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setMetadata(message.metadata ? JSON.stringify(message.metadata) : '').setForwardingMessageId(message.forwardingDetails ? message.forwardingDetails.messageId : message.id);
+        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);
         messageToSend = messageBuilder.create();
         pendingMessage = JSON.parse(JSON.stringify(_extends({}, messageToSend, {
           createdAt: new Date(Date.now())
@@ -18184,7 +18336,7 @@ function resendMessage(action) {
           } : {})));
         }
         log.info('attachmentMeta ... ', attachmentMeta);
-        attachmentBuilder = channel.createAttachmentBuilder(uri, messageAttachment.type);
+        attachmentBuilder = channel.createdAttachmentBuilder(uri, messageAttachment.type);
         attachmentToSend = attachmentBuilder.setName(messageAttachment.name).setMetadata(attachmentMeta).setFileSize(fileSize).setUpload(false).create();
         log.info('attachmentToSend ... ', attachmentToSend);
         attachmentToSend.tid = messageAttachment.tid;
@@ -18443,7 +18595,7 @@ function editMessage(action) {
           });
           linkAttachmentsToSend = [];
           linkAttachments.forEach(function (linkAttachment) {
-            var linkAttachmentBuilder = channel.createAttachmentBuilder(linkAttachment.data, linkAttachment.type);
+            var linkAttachmentBuilder = channel.createdAttachmentBuilder(linkAttachment.data, linkAttachment.type);
             var linkAttachmentToSend = linkAttachmentBuilder.setName(linkAttachment.name).setUpload(linkAttachment.upload).create();
             linkAttachmentsToSend.push(linkAttachmentToSend);
           });
@@ -19397,64 +19549,111 @@ function resumeAttachmentUploading(action) {
     }
   }, _marked15$1, null, [[0, 2]]);
 }
-function MessageSaga() {
+function getMessageMarkers(action) {
+  var _action$payload4, messageId, channelId, deliveryStatus, sceytChatClient, messageMarkerListQueryBuilder, messageMarkerListQuery, messageMarkers, _t18;
   return _regenerator().w(function (_context18) {
-    while (1) switch (_context18.n) {
+    while (1) switch (_context18.p = _context18.n) {
       case 0:
+        _context18.p = 0;
         _context18.n = 1;
-        return takeEvery(SEND_MESSAGE, sendMessage);
+        return put(setMessagesMarkersLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
+        _action$payload4 = action.payload, messageId = _action$payload4.messageId, channelId = _action$payload4.channelId, deliveryStatus = _action$payload4.deliveryStatus;
+        sceytChatClient = getClient();
+        if (!sceytChatClient) {
+          _context18.n = 4;
+          break;
+        }
+        messageMarkerListQueryBuilder = new sceytChatClient.MessageMarkerListQueryBuilder(channelId, String(messageId), deliveryStatus);
         _context18.n = 2;
-        return takeEvery(SEND_TEXT_MESSAGE, sendTextMessage);
+        return call(messageMarkerListQueryBuilder.build);
       case 2:
+        messageMarkerListQuery = _context18.v;
         _context18.n = 3;
-        return takeEvery(FORWARD_MESSAGE, forwardMessage);
+        return call(messageMarkerListQuery.loadNext);
       case 3:
+        messageMarkers = _context18.v;
         _context18.n = 4;
+        return put(setMessageMarkersAC(channelId, messageId, messageMarkers.markers, deliveryStatus));
+      case 4:
+        _context18.n = 6;
+        break;
+      case 5:
+        _context18.p = 5;
+        _t18 = _context18.v;
+        log.error('error in get message markers', _t18);
+      case 6:
+        _context18.p = 6;
+        _context18.n = 7;
+        return put(setMessagesMarkersLoadingStateAC(LOADING_STATE.LOADED));
+      case 7:
+        return _context18.f(6);
+      case 8:
+        return _context18.a(2);
+    }
+  }, _marked16$1, null, [[0, 5, 6, 8]]);
+}
+function MessageSaga() {
+  return _regenerator().w(function (_context19) {
+    while (1) switch (_context19.n) {
+      case 0:
+        _context19.n = 1;
+        return takeEvery(SEND_MESSAGE, sendMessage);
+      case 1:
+        _context19.n = 2;
+        return takeEvery(SEND_TEXT_MESSAGE, sendTextMessage);
+      case 2:
+        _context19.n = 3;
+        return takeEvery(FORWARD_MESSAGE, forwardMessage);
+      case 3:
+        _context19.n = 4;
         return takeEvery(RESEND_MESSAGE, resendMessage);
       case 4:
-        _context18.n = 5;
+        _context19.n = 5;
         return takeLatest(EDIT_MESSAGE, editMessage);
       case 5:
-        _context18.n = 6;
+        _context19.n = 6;
         return takeEvery(DELETE_MESSAGE, deleteMessage);
       case 6:
-        _context18.n = 7;
+        _context19.n = 7;
         return takeLatest(GET_MESSAGES, getMessagesQuery);
       case 7:
-        _context18.n = 8;
+        _context19.n = 8;
         return takeEvery(GET_MESSAGE, getMessageQuery);
       case 8:
-        _context18.n = 9;
-        return takeLatest(GET_MESSAGES_ATTACHMENTS, getMessageAttachments);
+        _context19.n = 9;
+        return takeLatest(GET_MESSAGE_MARKERS, getMessageMarkers);
       case 9:
-        _context18.n = 10;
-        return takeLatest(LOAD_MORE_MESSAGES_ATTACHMENTS, loadMoreMessageAttachments);
+        _context19.n = 10;
+        return takeLatest(GET_MESSAGES_ATTACHMENTS, getMessageAttachments);
       case 10:
-        _context18.n = 11;
-        return takeLatest(ADD_REACTION, addReaction);
+        _context19.n = 11;
+        return takeLatest(LOAD_MORE_MESSAGES_ATTACHMENTS, loadMoreMessageAttachments);
       case 11:
-        _context18.n = 12;
-        return takeLatest(DELETE_REACTION, deleteReaction);
+        _context19.n = 12;
+        return takeLatest(ADD_REACTION, addReaction);
       case 12:
-        _context18.n = 13;
-        return takeEvery(LOAD_MORE_MESSAGES, loadMoreMessages);
+        _context19.n = 13;
+        return takeLatest(DELETE_REACTION, deleteReaction);
       case 13:
-        _context18.n = 14;
-        return takeEvery(GET_REACTIONS, getReactions);
+        _context19.n = 14;
+        return takeEvery(LOAD_MORE_MESSAGES, loadMoreMessages);
       case 14:
-        _context18.n = 15;
-        return takeEvery(LOAD_MORE_REACTIONS, loadMoreReactions);
+        _context19.n = 15;
+        return takeEvery(GET_REACTIONS, getReactions);
       case 15:
-        _context18.n = 16;
-        return takeEvery(PAUSE_ATTACHMENT_UPLOADING, pauseAttachmentUploading);
+        _context19.n = 16;
+        return takeEvery(LOAD_MORE_REACTIONS, loadMoreReactions);
       case 16:
-        _context18.n = 17;
-        return takeEvery(RESUME_ATTACHMENT_UPLOADING, resumeAttachmentUploading);
+        _context19.n = 17;
+        return takeEvery(PAUSE_ATTACHMENT_UPLOADING, pauseAttachmentUploading);
       case 17:
-        return _context18.a(2);
+        _context19.n = 18;
+        return takeEvery(RESUME_ATTACHMENT_UPLOADING, resumeAttachmentUploading);
+      case 18:
+        return _context19.a(2);
     }
-  }, _marked16$1);
+  }, _marked17$1);
 }
 
 var _marked$4 = /*#__PURE__*/_regenerator().m(getMembers),
@@ -19593,7 +19792,7 @@ function addMembers(action) {
             m: membersIds
           },
           body: 'AM',
-          mentionedMembers: addedMembers,
+          mentionedUsers: addedMembers,
           attachments: [],
           type: 'system'
         };
@@ -19655,7 +19854,7 @@ function kickMemberFromChannel(action) {
             m: membersIds
           },
           body: 'RM',
-          mentionedMembers: removedMembers,
+          mentionedUsers: removedMembers,
           attachments: [],
           type: 'system'
         };
@@ -20455,7 +20654,9 @@ var SceytChat = function SceytChat(_ref) {
     openChatOnUserInteraction = _ref$openChatOnUserIn === void 0 ? true : _ref$openChatOnUserIn,
     _ref$autoSelectFirstC = _ref.autoSelectFirstChannel,
     autoSelectFirstChannel = _ref$autoSelectFirstC === void 0 ? false : _ref$autoSelectFirstC,
-    memberCount = _ref.memberCount;
+    memberCount = _ref.memberCount,
+    _ref$disableFrowardMe = _ref.disableFrowardMentionsCount,
+    disableFrowardMentionsCount = _ref$disableFrowardMe === void 0 ? false : _ref$disableFrowardMe;
   var _useColor = useColors(),
     backgroundColor = _useColor[THEME_COLORS.BACKGROUND],
     highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND];
@@ -20660,6 +20861,9 @@ var SceytChat = function SceytChat(_ref) {
   useEffect(function () {
     setChannelMembersCount(memberCount || 0);
   }, [memberCount]);
+  useEffect(function () {
+    setDisableFrowardMentionsCount(disableFrowardMentionsCount);
+  }, [disableFrowardMentionsCount]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, SceytChatClient ? (/*#__PURE__*/React__default.createElement(ChatContainer, {
     onDrop: handleDropFile,
     onDragOver: handleDragOver,
@@ -20706,7 +20910,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     autoSelectFirstChannel = _ref.autoSelectFirstChannel,
     _ref$logLevel = _ref.logLevel,
     logLevel = _ref$logLevel === void 0 ? 'silent' : _ref$logLevel,
-    memberCount = _ref.memberCount;
+    memberCount = _ref.memberCount,
+    disableFrowardMentionsCount = _ref.disableFrowardMentionsCount;
   useEffect(function () {
     log.setLevel(logLevel);
   }, []);
@@ -20731,7 +20936,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     openChatOnUserInteraction: openChatOnUserInteraction,
     autoSelectFirstChannel: autoSelectFirstChannel,
     channelTypeFilter: channelTypeFilter,
-    memberCount: memberCount
+    memberCount: memberCount,
+    disableFrowardMentionsCount: disableFrowardMentionsCount
   }));
 };
 
@@ -21353,7 +21559,7 @@ var Channel = function Channel(_ref3) {
         if (channelDraftMessage) {
           setDraftMessageText(channelDraftMessage.text);
           setDraftMessage({
-            mentionedUsers: channelDraftMessage.mentionedMembers,
+            mentionedUsers: channelDraftMessage.mentionedUsers,
             body: channelDraftMessage.text,
             bodyAttributes: channelDraftMessage.bodyAttributes
           });
@@ -26380,21 +26586,15 @@ function ReactionsPopup(_ref) {
   var _useState = useState('all'),
     activeTabKey = _useState[0],
     setActiveTabKey = _useState[1];
-  var _useState2 = useState(''),
-    popupVerticalPosition = _useState2[0],
-    setPopupVerticalPosition = _useState2[1];
-  var _useState3 = useState(0),
-    popupHeight = _useState3[0],
-    setPopupHeight = _useState3[1];
-  var _useState4 = useState(0),
-    scoresHeight = _useState4[0],
-    setScoresHeight = _useState4[1];
-  var _useState5 = useState(false),
-    calculateSizes = _useState5[0],
-    setCalculateSizes = _useState5[1];
-  var _useState6 = useState(false),
-    closeIsApproved = _useState6[0],
-    setCloseIsApproved = _useState6[1];
+  var _useState2 = useState(0),
+    popupHeight = _useState2[0],
+    setPopupHeight = _useState2[1];
+  var _useState3 = useState(false),
+    calculateSizes = _useState3[0],
+    setCalculateSizes = _useState3[1];
+  var _useState4 = useState(false),
+    closeIsApproved = _useState4[0],
+    setCloseIsApproved = _useState4[1];
   var totalReactions = 0;
   if (reactionTotals) {
     reactionTotals.forEach(function (summery) {
@@ -26403,9 +26603,9 @@ function ReactionsPopup(_ref) {
   }
   var user = getClient().user;
   var dispatch = useDispatch();
-  var _useState7 = useState(false),
-    isScrolling = _useState7[0],
-    setIsScrolling = _useState7[1];
+  var _useState5 = useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
@@ -26434,20 +26634,23 @@ function ReactionsPopup(_ref) {
       dispatch(setReactionsListAC([], true));
     };
   }, [messageId]);
-  useEffect(function () {
+  var scoresHeight = useMemo(function () {
     var scoresElem = scoresRef.current;
     if (scoresElem) {
-      setScoresHeight(scoresElem.offsetHeight);
+      return scoresElem.offsetHeight;
     }
-  });
+    return 0;
+  }, [scoresRef]);
   useEffect(function () {
     if (!reactionTotals || !reactionTotals.length) {
       handleReactionsPopupClose();
     }
   }, [reactionTotals]);
+  var reactionsHeight = useMemo(function () {
+    return reactions.length * 50 + 45;
+  }, [reactions]);
   useEffect(function () {
     if (reactions && reactionsPrevLength < reactions.length) {
-      var reactionsHeight = reactions.length * 44 + 45;
       if (reactionsHeight > popupHeight) {
         setPopupHeight(reactionsHeight);
       }
@@ -26457,14 +26660,15 @@ function ReactionsPopup(_ref) {
     }
     if (reactions && reactions.length) {
       if (calculateSizes) {
-        var botPost = bottomPosition - messageInputHeight - 40;
-        var _reactionsHeight = reactions.length * 50 + 45;
-        setPopupHeight(_reactionsHeight);
-        setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
+        setPopupHeight(reactionsHeight);
         setCalculateSizes(false);
       }
     }
-  }, [reactions]);
+  }, [reactions, reactionsHeight]);
+  var popupVerticalPosition = useMemo(function () {
+    var botPost = bottomPosition - messageInputHeight - 40;
+    return botPost >= (reactionsHeight > 320 ? 320 : reactionsHeight) ? 'bottom' : 'top';
+  }, [bottomPosition, messageInputHeight, reactionsHeight]);
   return /*#__PURE__*/React__default.createElement(Container$d, {
     ref: popupRef,
     popupVerticalPosition: popupVerticalPosition,
@@ -26522,7 +26726,10 @@ function ReactionsPopup(_ref) {
   }, reactions.map(function (reaction) {
     return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
       key: reaction.id,
-      hoverBackgroundColor: backgroundHovered
+      hoverBackgroundColor: backgroundHovered,
+      onClick: function onClick() {
+        return handleAddDeleteEmoji(reaction.key);
+      }
     }, /*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
       name: reaction.user.firstName || reaction.user.id,
       image: reaction.user.avatarUrl,
@@ -26533,11 +26740,7 @@ function ReactionsPopup(_ref) {
       color: textPrimary
     }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
       color: textSecondary
-    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, {
-      onClick: function onClick() {
-        return handleAddDeleteEmoji(reaction.key);
-      }
-    }, reaction.key));
+    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, null, reaction.key));
   })));
 }
 var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  /*right: ", ";*/\n  right: ", ";\n  /*left: ", ";*/\n  left: ", ";\n  top: ", ";\n  bottom: ", ";\n  width: 340px;\n  height: ", "px;\n  //overflow: ", ";\n  overflow: hidden;\n  max-height: 320px;\n  background: ", ";\n  //border: 1px solid #dfe0eb;\n  box-shadow:\n    0 6px 24px -6px rgba(15, 34, 67, 0.12),\n    0px 1px 3px rgba(24, 23, 37, 0.14);\n  box-sizing: border-box;\n  //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  visibility: ", ";\n  transition: all 0.2s;\n\n  direction: initial;\n  z-index: 12;\n  &::after {\n    content: '';\n    position: absolute;\n    width: 12px;\n    height: 12px;\n\n    right: ", ";\n    left: ", ";\n    top: ", ";\n    bottom: ", ";\n    transform: rotate(45deg);\n    box-shadow: ", ";\n    border-radius: 2px;\n    visibility: ", ";\n    transition-delay: 150ms;\n    transition-property: visibility;\n\n    background: ", ";\n  }\n"])), function (props) {
@@ -26607,7 +26810,7 @@ var ReactionScoreItem = styled.div(_templateObject8$9 || (_templateObject8$9 = _
   return props.active && !props.bubbleStyle && "\n    &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: -13px;\n    width: 100%;\n    height: 2px;\n    background-color: " + props.activeColor + ";\n    border-radius: 2px;\n    }\n  ";
 }, TabKey);
 var ReactionKey = styled.span(_templateObject9$9 || (_templateObject9$9 = _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  font-size: 20px;\n  cursor: pointer;\n"])));
-var ReactionItem$1 = styled.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
+var ReactionItem$1 = styled.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, UserStatus);
 
@@ -26872,6 +27075,7 @@ function MessageActions(_ref) {
     messageStatus = _ref.messageStatus,
     handleSelectMessage = _ref.handleSelectMessage,
     handleReplyMessage = _ref.handleReplyMessage,
+    handleOpenInfoMessage = _ref.handleOpenInfoMessage,
     isThreadMessage = _ref.isThreadMessage,
     rtlDirection = _ref.rtlDirection,
     showMessageReaction = _ref.showMessageReaction,
@@ -26883,6 +27087,8 @@ function MessageActions(_ref) {
     showDeleteMessage = _ref.showDeleteMessage,
     showSelectMessage = _ref.showSelectMessage,
     showReportMessage = _ref.showReportMessage,
+    showInfoMessage = _ref.showInfoMessage,
+    infoIconOrder = _ref.infoIconOrder,
     reactionIcon = _ref.reactionIcon,
     editIcon = _ref.editIcon,
     copyIcon = _ref.copyIcon,
@@ -26890,6 +27096,7 @@ function MessageActions(_ref) {
     replyInThreadIcon = _ref.replyInThreadIcon,
     deleteIcon = _ref.deleteIcon,
     selectIcon = _ref.selectIcon,
+    infoIcon = _ref.infoIcon,
     allowEditDeleteIncomingMessage = _ref.allowEditDeleteIncomingMessage,
     reportIcon = _ref.reportIcon,
     reactionIconOrder = _ref.reactionIconOrder,
@@ -26910,6 +27117,7 @@ function MessageActions(_ref) {
     forwardIconTooltipText = _ref.forwardIconTooltipText,
     deleteIconTooltipText = _ref.deleteIconTooltipText,
     selectIconTooltipText = _ref.selectIconTooltipText,
+    infoIconTooltipText = _ref.infoIconTooltipText,
     reportIconTooltipText = _ref.reportIconTooltipText,
     myRole = _ref.myRole,
     isIncoming = _ref.isIncoming,
@@ -27038,8 +27246,20 @@ function MessageActions(_ref) {
     disabledColor: textSecondary,
     bgColor: tooltipBackground,
     direction: 'top'
-  }, selectIconTooltipText || 'Select', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), selectIcon || /*#__PURE__*/React__default.createElement(SvgCheckCircle, null))), showDeleteMessage && (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? myRole === 'owner' || myRole === 'admin' : true) && (/*#__PURE__*/React__default.createElement(Action, {
-    order: deleteIconOrder || 7,
+  }, selectIconTooltipText || 'Select', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), selectIcon || /*#__PURE__*/React__default.createElement(SvgCheckCircle, null))), showInfoMessage && !isIncoming && (/*#__PURE__*/React__default.createElement(Action, {
+    order: infoIconOrder || 7,
+    iconColor: messageActionIconsColor || iconInactive,
+    hoverBackgroundColor: backgroundHovered,
+    hoverIconColor: accentColor,
+    onClick: function onClick() {
+      return handleOpenInfoMessage();
+    }
+  }, /*#__PURE__*/React__default.createElement(ItemNote, {
+    disabledColor: textSecondary,
+    bgColor: tooltipBackground,
+    direction: 'top'
+  }, infoIconTooltipText || 'Info', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), infoIcon || /*#__PURE__*/React__default.createElement(SvgInfo, null))), showDeleteMessage && (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? myRole === 'owner' || myRole === 'admin' : true) && (/*#__PURE__*/React__default.createElement(Action, {
+    order: deleteIconOrder || 8,
     iconColor: messageActionIconsColor || warningColor,
     hoverBackgroundColor: backgroundHovered,
     hoverIconColor: accentColor,
@@ -27051,7 +27271,7 @@ function MessageActions(_ref) {
     bgColor: tooltipBackground,
     direction: 'top'
   }, deleteIconTooltipText || 'Delete Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), deleteIcon || /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null))), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
-    order: reportIconOrder || 8,
+    order: reportIconOrder || 9,
     iconColor: messageActionIconsColor || iconInactive,
     hoverBackgroundColor: backgroundHovered,
     hoverIconColor: accentColor,
@@ -29313,7 +29533,10 @@ WaveSurfer.dom = dom;
 var _templateObject$t, _templateObject2$p, _templateObject3$j, _templateObject4$g, _templateObject5$e, _templateObject6$c;
 var AudioPlayer = function AudioPlayer(_ref) {
   var url = _ref.url,
-    file = _ref.file;
+    file = _ref.file,
+    messagePlayed = _ref.messagePlayed,
+    channelId = _ref.channelId,
+    incoming = _ref.incoming;
   var recordingInitialState = {
     recordingSeconds: 0,
     recordingMilliseconds: 0,
@@ -29379,6 +29602,9 @@ var AudioPlayer = function AudioPlayer(_ref) {
         }
       }
       wavesurfer.current.playPause();
+      if (!messagePlayed && incoming) {
+        dispatch(markVoiceMessageAsPlayedAC(channelId, [file.messageId]));
+      }
     }
   };
   useEffect(function () {
@@ -29556,7 +29782,10 @@ var Attachment = function Attachment(_ref) {
     imageAttachmentMaxHeight = _ref.imageAttachmentMaxHeight,
     videoAttachmentMaxWidth = _ref.videoAttachmentMaxWidth,
     videoAttachmentMaxHeight = _ref.videoAttachmentMaxHeight,
-    messageType = _ref.messageType;
+    messageType = _ref.messageType,
+    messagePlayed = _ref.messagePlayed,
+    channelId = _ref.channelId,
+    incoming = _ref.incoming;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -29574,13 +29803,17 @@ var Attachment = function Attachment(_ref) {
   var connectionStatus = useSelector(connectionStatusSelector);
   var theme = useSelector(themeSelector);
   var imageContRef = useRef(null);
-  var _useState = useState(!attachment.attachmentUrl),
+  var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
+  var attachmentUrlFromMap = useMemo(function () {
+    return attachmentUpdatedMap[attachment.url];
+  }, [attachmentUpdatedMap, attachment.url]);
+  var _useState = useState(!attachmentUrlFromMap),
     imageLoading = _useState[0],
     setImageLoading = _useState[1];
   var _useState2 = useState(false),
     downloadingFile = _useState2[0],
     setDownloadingFile = _useState2[1];
-  var _useState3 = useState(''),
+  var _useState3 = useState(attachmentUrlFromMap),
     attachmentUrl = _useState3[0],
     setAttachmentUrl = _useState3[1];
   var _useState4 = useState(),
@@ -29604,27 +29837,26 @@ var Attachment = function Attachment(_ref) {
   var fileNameRef = useRef(null);
   var customDownloader = getCustomDownloader();
   var previewFileType = isPreview && attachment.data.type.split('/')[0];
+  var attachmentMetadata = useMemo(function () {
+    return isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
+  }, [attachment.metadata]);
   var _useMemo = useMemo(function () {
       var attachmentData = null;
-      if (attachment.metadata && typeof attachment.metadata === 'string') {
-        attachmentData = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
-      } else if (attachment.metadata && attachment.metadata.szw && attachment.metadata.szh) {
-        attachmentData = attachment.metadata;
-      }
+      attachmentData = attachmentMetadata;
       return attachmentData && attachmentData.szw && attachmentData.szh ? calculateRenderedImageWidth(attachmentData.szw, attachmentData.szh, attachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, attachment.type === attachmentTypes.image ? imageAttachmentMaxHeight || 400 : videoAttachmentMaxHeight) : [];
-    }, []),
+    }, [attachmentMetadata]),
     renderWidth = _useMemo[0],
     renderHeight = _useMemo[1];
   var isInUploadingState = attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED);
   var attachmentThumb;
   var withPrefix = true;
-  if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachment.metadata && attachment.metadata.tmb) {
+  if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
     try {
-      if (attachment.metadata.tmb.length < 70) {
-        attachmentThumb = base64ToToDataURL(attachment.metadata.tmb);
+      if (attachmentMetadata.tmb.length < 70) {
+        attachmentThumb = base64ToToDataURL(attachmentMetadata.tmb);
         withPrefix = false;
       } else {
-        attachmentThumb = attachment.metadata && attachment.metadata.tmb;
+        attachmentThumb = attachmentMetadata && attachmentMetadata.tmb;
       }
     } catch (e) {
       log.error('error on get attachmentThumb', e);
@@ -29788,9 +30020,7 @@ var Attachment = function Attachment(_ref) {
           if (attachment.type === attachmentTypes.image && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
-              dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
-                attachmentUrl: cachedUrl
-              }));
+              dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
               setIsCached(true);
             } else {
               setIsCached(false);
@@ -30074,7 +30304,10 @@ var Attachment = function Attachment(_ref) {
     }
   }))))) : attachment.type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(AudioPlayer, {
     url: attachment.attachmentUrl || attachmentUrl,
-    file: attachment
+    file: attachment,
+    messagePlayed: messagePlayed,
+    channelId: channelId,
+    incoming: incoming
   })) : attachment.type === attachmentTypes.link ? null : (
   /*#__PURE__*/
   React__default.createElement(AttachmentFile$1, {
@@ -31363,54 +31596,99 @@ var validateUrl = function validateUrl(url) {
   }
 };
 var OGMetadata = function OGMetadata(_ref) {
-  var _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og8, _metadata$og8$image, _metadata$og8$image$, _metadata$og9, _metadata$og0, _metadata$og0$favicon, _metadata$og1, _metadata$og1$favicon, _metadata$og10, _metadata$og11, _metadata$og12;
+  var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
   var attachments = _ref.attachments,
-    state = _ref.state;
-  var _useState = useState(null),
-    metadata = _useState[0],
-    setMetadata = _useState[1];
-  var _useState2 = useState(true),
-    imageLoadError = _useState2[0],
-    setImageLoadError = _useState2[1];
-  var _useState3 = useState(true),
-    faviconLoadError = _useState3[0],
-    setFaviconLoadError = _useState3[1];
-  var _useState4 = useState(false),
-    imageLoaded = _useState4[0],
-    setImageLoaded = _useState4[1];
-  var _useState5 = useState(0),
-    imageWidth = _useState5[0],
-    setImageWidth = _useState5[1];
-  var _useState6 = useState(0),
-    imageHeight = _useState6[0],
-    setImageHeight = _useState6[1];
+    state = _ref.state,
+    incoming = _ref.incoming;
+  var dispatch = useDispatch();
+  var oGMetadata = useSelector(function (state) {
+    return state.MessageReducer.oGMetadata;
+  });
+  var _useColor = useColors(),
+    incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
+    outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
     });
   }, [attachments]);
+  var metadata = useMemo(function () {
+    return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
+  }, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  var _useState = useState(false),
+    imageLoadError = _useState[0],
+    setImageLoadError = _useState[1];
+  var _useState2 = useState(false),
+    faviconLoadError = _useState2[0],
+    setFaviconLoadError = _useState2[1];
+  var _useState3 = useState(false),
+    shouldAnimate = _useState3[0],
+    setShouldAnimate = _useState3[1];
+  var handleMetadata = useCallback(function (metadata) {
+    if (metadata) {
+      dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
+    } else {
+      dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
+    }
+  }, []);
   var ogMetadataQueryBuilder = useCallback(function (url) {
     try {
       var client = getClient();
-      var _temp2 = function () {
+      var _temp3 = function () {
         if (client) {
-          var _temp = _catch(function () {
+          var _temp2 = _catch(function () {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url, metadata)).then(function () {
-                  setMetadata(metadata);
-                });
+                var _metadata$og, _metadata$og$image, _metadata$og$image$;
+                var image = new Image();
+                image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : (_metadata$og$image = _metadata$og.image) === null || _metadata$og$image === void 0 ? void 0 : (_metadata$og$image$ = _metadata$og$image[0]) === null || _metadata$og$image$ === void 0 ? void 0 : _metadata$og$image$.url;
+                var _temp = function () {
+                  if (image.src) {
+                    image.onload = function () {
+                      try {
+                        var imageWidth = image.width;
+                        var imageHeight = image.height;
+                        return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
+                          imageWidth: imageWidth,
+                          imageHeight: imageHeight
+                        }))).then(function () {
+                          handleMetadata(_extends({}, metadata, {
+                            imageWidth: imageWidth,
+                            imageHeight: imageHeight
+                          }));
+                        });
+                      } catch (e) {
+                        return Promise.reject(e);
+                      }
+                    };
+                    image.onerror = function () {
+                      try {
+                        setImageLoadError(true);
+                        return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
+                          handleMetadata(_extends({}, metadata));
+                        });
+                      } catch (e) {
+                        return Promise.reject(e);
+                      }
+                    };
+                  } else {
+                    return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
+                      handleMetadata(_extends({}, metadata));
+                    });
+                  }
+                }();
+                if (_temp && _temp.then) return _temp.then(function () {});
               });
             });
           }, function () {
             console.log('Failed to fetch OG metadata');
-            setMetadata(null);
+            handleMetadata(null);
           });
-          if (_temp && _temp.then) return _temp.then(function () {});
+          if (_temp2 && _temp2.then) return _temp2.then(function () {});
         }
       }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {
         return null;
       }) : null);
     } catch (e) {
@@ -31418,16 +31696,16 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
+      setShouldAnimate(true);
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
         getMetadata(url).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
-              setMetadata(cachedMetadata);
-            } else {
-              ogMetadataQueryBuilder(url);
+              handleMetadata(cachedMetadata);
             }
+            ogMetadataQueryBuilder(url);
             return Promise.resolve();
           } catch (e) {
             return Promise.reject(e);
@@ -31437,7 +31715,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var ogUrl = useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -31447,102 +31725,130 @@ var OGMetadata = function OGMetadata(_ref) {
     return url;
   }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
   var showOGMetadata = useMemo(function () {
-    var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
-    return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
+    var _metadata$og2, _metadata$og3;
+    return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
   }, [state, metadata]);
-  useEffect(function () {
-    var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
-    if (metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url) {
-      var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
-      var image = new Image();
-      image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url;
-      image.onload = function () {
-        var imageWidth = image.width;
-        var imageHeight = image.height;
-        setImageWidth(imageWidth);
-        setImageHeight(imageHeight);
-        setImageLoadError(false);
-        setImageLoaded(true);
-      };
-      image.onerror = function () {
-        setImageLoadError(true);
-        setImageLoaded(true);
-      };
-    }
-  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
   var calculatedImageHeight = useMemo(function () {
-    return imageHeight / (imageWidth / 400);
-  }, [imageWidth, imageHeight]);
+    if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
+      return 0;
+    }
+    return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
+  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
-    showOGMetadata: !!showOGMetadata
+    showOGMetadata: !!showOGMetadata,
+    bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
   }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
+    },
+    style: {
+      width: showOGMetadata ? '100%' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
-    width: 400,
-    height: calculatedImageHeight
-  }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
+    showOGMetadata: !!showOGMetadata && !imageLoadError,
+    containerWidth: 400,
+    containerHeight: calculatedImageHeight,
+    shouldAnimate: shouldAnimate
+  }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
+    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
     alt: 'OG metadata image',
-    width: 400,
-    height: calculatedImageHeight
-  })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
-    maxWidth: 400
-  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
-    maxWidth: 400
-  }, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
+    imageWidth: 400,
+    imageHeight: calculatedImageHeight,
+    shouldAnimate: shouldAnimate
+  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
+    shouldAnimate: shouldAnimate
+  }, /*#__PURE__*/React__default.createElement(Url, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
+    shouldAnimate: shouldAnimate,
+    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
     onLoad: function onLoad() {
       return setFaviconLoadError(false);
     },
     onError: function onError() {
-      return setFaviconLoadError(true);
+      dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
+        og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
+          favicon: {
+            url: ''
+          }
+        })
+      })));
+      setFaviconLoadError(true);
     }
-  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? /*#__PURE__*/React__default.createElement(Desc, {
-    maxWidth: 400
-  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description) : null)) : null));
+  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? (/*#__PURE__*/React__default.createElement(Desc, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
 };
-var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])), function (_ref2) {
-  var showOGMetadata = _ref2.showOGMetadata;
+var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
+  var bgColor = _ref2.bgColor;
+  return bgColor;
+}, function (_ref3) {
+  var showOGMetadata = _ref3.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref3) {
-  var width = _ref3.width;
-  return width ? "\n    max-width: " + (width + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
-}, function (_ref4) {
-  var height = _ref4.height,
-    showOGMetadata = _ref4.showOGMetadata;
-  return height ? "\n    max-height: " + (height + "px") + ";\n    height: " + (showOGMetadata ? height + "px" : '0') + ";\n  " : "\n    max-height: 200px;\n    height: " + (showOGMetadata ? '200px' : '0') + ";\n  ";
+var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  ", "\n"])), function (_ref4) {
+  var containerWidth = _ref4.containerWidth;
+  return containerWidth ? "\n    max-width: " + (containerWidth + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata;
-  return showOGMetadata ? 1 : 0;
+  var containerHeight = _ref5.containerHeight,
+    showOGMetadata = _ref5.showOGMetadata;
+  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref6) {
-  var showOGMetadata = _ref6.showOGMetadata;
-  return showOGMetadata ? '0.3rem' : '0';
-});
-var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  transition: all 0.2s ease;\n"])));
-var Url = styled.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref7) {
-  var maxWidth = _ref7.maxWidth;
+  var showOGMetadata = _ref6.showOGMetadata,
+    containerHeight = _ref6.containerHeight;
+  return showOGMetadata && containerHeight ? 1 : 0;
+}, function (_ref7) {
+  var showOGMetadata = _ref7.showOGMetadata,
+    containerHeight = _ref7.containerHeight;
+  return showOGMetadata && containerHeight ? '4px' : '0';
+}, function (_ref8) {
+  var shouldAnimate = _ref8.shouldAnimate;
+  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
+});
+var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref9) {
+  var shouldAnimate = _ref9.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
+});
+var Url = styled.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n  ", "\n  ", "\n"])), function (_ref0) {
+  var maxWidth = _ref0.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref1) {
+  var shouldAnimate = _ref1.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Title = styled.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  font-size: 13px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref8) {
-  var maxWidth = _ref8.maxWidth;
+var Title = styled.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  font-size: 13px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"])), function (_ref10) {
+  var maxWidth = _ref10.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref11) {
+  var shouldAnimate = _ref11.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref9) {
-  var maxWidth = _ref9.maxWidth;
+var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  ", "\n  ", "\n"])), function (_ref12) {
+  var maxWidth = _ref12.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref13) {
+  var shouldAnimate = _ref13.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
-  var width = _ref0.width;
-  return width && "\n    max-width: " + (width + "px") + ";\n    min-width: " + (width + "px") + ";\n    width: " + (width + "px") + ";\n  ";
-}, function (_ref1) {
-  var height = _ref1.height;
-  return height && "\n    max-height: " + (height + "px") + ";\n    min-height: " + (height + "px") + ";\n    height: " + (height + "px") + ";\n  ";
+var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref14) {
+  var imageWidth = _ref14.imageWidth;
+  return imageWidth && "\n    max-width: 100%;\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
+}, function (_ref15) {
+  var imageHeight = _ref15.imageHeight;
+  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+}, function (_ref16) {
+  var shouldAnimate = _ref16.shouldAnimate;
+  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
+});
+var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])), function (_ref17) {
+  var shouldAnimate = _ref17.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s ease;\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])));
 
 var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
 var MessageBody = function MessageBody(_ref) {
@@ -31596,6 +31902,7 @@ var MessageBody = function MessageBody(_ref) {
     deleteMessage = _ref$deleteMessage === void 0 ? true : _ref$deleteMessage,
     _ref$selectMessage = _ref.selectMessage,
     selectMessage = _ref$selectMessage === void 0 ? true : _ref$selectMessage,
+    showInfoMessage = _ref.showInfoMessage,
     allowEditDeleteIncomingMessage = _ref.allowEditDeleteIncomingMessage,
     _ref$forwardMessage = _ref.forwardMessage,
     forwardMessage = _ref$forwardMessage === void 0 ? true : _ref$forwardMessage,
@@ -31608,6 +31915,7 @@ var MessageBody = function MessageBody(_ref) {
     replyInThreadIcon = _ref.replyInThreadIcon,
     forwardIcon = _ref.forwardIcon,
     deleteIcon = _ref.deleteIcon,
+    infoIcon = _ref.infoIcon,
     selectIcon = _ref.selectIcon,
     starIcon = _ref.starIcon,
     staredIcon = _ref.staredIcon,
@@ -31619,6 +31927,7 @@ var MessageBody = function MessageBody(_ref) {
     replyInThreadIconOrder = _ref.replyInThreadIconOrder,
     forwardIconOrder = _ref.forwardIconOrder,
     deleteIconOrder = _ref.deleteIconOrder,
+    infoIconOrder = _ref.infoIconOrder,
     selectIconOrder = _ref.selectIconOrder,
     starIconOrder = _ref.starIconOrder,
     reportIconOrder = _ref.reportIconOrder,
@@ -31632,6 +31941,7 @@ var MessageBody = function MessageBody(_ref) {
     selectIconTooltipText = _ref.selectIconTooltipText,
     starIconTooltipText = _ref.starIconTooltipText,
     reportIconTooltipText = _ref.reportIconTooltipText,
+    infoIconTooltipText = _ref.infoIconTooltipText,
     messageActionIconsColor = _ref.messageActionIconsColor,
     messageStatusSize = _ref.messageStatusSize,
     messageStatusColor = _ref.messageStatusColor,
@@ -31660,6 +31970,7 @@ var MessageBody = function MessageBody(_ref) {
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
     handleToggleForwardMessagePopup = _ref.handleToggleForwardMessagePopup,
+    handleToggleInfoMessagePopupOpen = _ref.handleToggleInfoMessagePopupOpen,
     messageActionsShow = _ref.messageActionsShow,
     closeMessageActions = _ref.closeMessageActions,
     handleDeletePendingMessage = _ref.handleDeletePendingMessage,
@@ -31808,6 +32119,7 @@ var MessageBody = function MessageBody(_ref) {
     handleCopyMessage: handleCopyMessage,
     handleDeletePendingMessage: handleDeletePendingMessage,
     handleOpenForwardMessage: handleToggleForwardMessagePopup,
+    handleOpenInfoMessage: handleToggleInfoMessagePopupOpen,
     handleResendMessage: handleResendMessage,
     handleReplyMessage: _handleReplyMessage,
     handleReportMessage: handleToggleReportPopupOpen,
@@ -31859,7 +32171,11 @@ var MessageBody = function MessageBody(_ref) {
     reportIconTooltipText: reportIconTooltipText,
     messageActionIconsColor: messageActionIconsColor,
     myRole: channel.userRole,
-    isIncoming: message.incoming
+    isIncoming: message.incoming,
+    infoIconTooltipText: infoIconTooltipText,
+    infoIcon: infoIcon,
+    showInfoMessage: showInfoMessage,
+    infoIconOrder: infoIconOrder
   }))), message.parentMessage && message.parentMessage.id && !isThreadMessage && (/*#__PURE__*/React__default.createElement(RepliedMessage$1, {
     message: message,
     theme: theme,
@@ -31907,10 +32223,11 @@ var MessageBody = function MessageBody(_ref) {
     incomingMessageStyles: incomingMessageStyles,
     incoming: message.incoming,
     linkColor: linkColor
-  }, linkAttachment && /*#__PURE__*/React__default.createElement(OGMetadata, {
+  }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
     attachments: [linkAttachment],
-    state: message.state
-  }), /*#__PURE__*/React__default.createElement("span", {
+    state: message.state,
+    incoming: message.incoming
+  })), /*#__PURE__*/React__default.createElement("span", {
     ref: messageTextRef
   }, MessageTextFormat({
     text: message.body,
@@ -31978,7 +32295,10 @@ var MessageBody = function MessageBody(_ref) {
       imageAttachmentMaxHeight: imageAttachmentMaxHeight,
       videoAttachmentMaxWidth: videoAttachmentMaxWidth,
       videoAttachmentMaxHeight: videoAttachmentMaxHeight,
-      messageType: message.type
+      messageType: message.type,
+      messagePlayed: message.deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED,
+      channelId: message.channelId,
+      incoming: message.incoming
     });
   }), emojisPopupOpen && emojisPopupPosition && (/*#__PURE__*/React__default.createElement(EmojiContainer, {
     id: message.id + "_emoji_popup_container",
@@ -32058,7 +32378,426 @@ var FrequentlyEmojisContainer = styled.div(_templateObject5$i || (_templateObjec
   return props.rtlDirection && '0';
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4, _templateObject11$4, _templateObject12$3;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7;
+var defaultFormatDate = function defaultFormatDate(date) {
+  var m = moment(date);
+  if (m.isSame(moment(), 'day')) {
+    return "Today, " + m.format('HH:mm');
+  }
+  if (m.isSame(moment().subtract(1, 'day'), 'day')) {
+    return "Yesterday, " + m.format('HH:mm');
+  }
+  return m.format('DD.MM.YYYY');
+};
+var MessageInfo = function MessageInfo(_ref) {
+  var _tabsOrder$;
+  var message = _ref.message,
+    togglePopup = _ref.togglePopup,
+    labels = _ref.labels,
+    _ref$tabsOrder = _ref.tabsOrder,
+    tabsOrder = _ref$tabsOrder === void 0 ? [].concat(message.attachments && message.attachments.length > 0 && message.attachments[0].type === 'voice' ? [{
+      key: 'played',
+      label: 'Played by',
+      data: []
+    }] : [], [{
+      key: 'received',
+      label: 'Delivered to',
+      data: []
+    }, {
+      key: 'displayed',
+      label: 'Seen by',
+      data: []
+    }]) : _ref$tabsOrder,
+    _ref$showCounts = _ref.showCounts,
+    showCounts = _ref$showCounts === void 0 ? false : _ref$showCounts,
+    _ref$avatarSize = _ref.avatarSize,
+    avatarSize = _ref$avatarSize === void 0 ? 32 : _ref$avatarSize,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? '340px' : _ref$maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? '340px' : _ref$minWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '300px' : _ref$height,
+    renderItem = _ref.renderItem,
+    _ref$formatDate = _ref.formatDate,
+    formatDate = _ref$formatDate === void 0 ? defaultFormatDate : _ref$formatDate,
+    _ref$tabsStyles = _ref.tabsStyles,
+    tabsStyles = _ref$tabsStyles === void 0 ? {} : _ref$tabsStyles,
+    _ref$listItemStyles = _ref.listItemStyles,
+    listItemStyles = _ref$listItemStyles === void 0 ? {} : _ref$listItemStyles,
+    handleOpenUserProfile = _ref.handleOpenUserProfile,
+    contacts = _ref.contacts;
+  var _useColor = useColors(),
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
+    backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    border = _useColor[THEME_COLORS.BORDER];
+  var dispatch = useDispatch();
+  var messageMarkers = useSelector(messageMarkersSelector);
+  var messagesMarkersLoadingState = useSelector(messagesMarkersLoadingStateSelector);
+  var markers = useMemo(function () {
+    return messageMarkers[message.channelId] && messageMarkers[message.channelId][message.id];
+  }, [messageMarkers, message.channelId, message.id]);
+  var _useState = useState(((_tabsOrder$ = tabsOrder[0]) === null || _tabsOrder$ === void 0 ? void 0 : _tabsOrder$.key) || 'played'),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var _useState2 = useState(false),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var rootRef = useRef(null);
+  var _useState3 = useState(false),
+    flipAbove = _useState3[0],
+    setFlipAbove = _useState3[1];
+  var panelRef = useRef(null);
+  var contentRef = useRef(null);
+  var tabsRef = useRef(null);
+  var listRef = useRef(null);
+  var _useState4 = useState(0),
+    panelHeightPx = _useState4[0],
+    setPanelHeightPx = _useState4[1];
+  var _useState5 = useState(false),
+    isTransitioning = _useState5[0],
+    setIsTransitioning = _useState5[1];
+  var _useState6 = useState(false),
+    ready = _useState6[0],
+    setReady = _useState6[1];
+  var _useState7 = useState(false),
+    flipLocked = _useState7[0],
+    setFlipLocked = _useState7[1];
+  var getFromContacts = useMemo(function () {
+    return getShowOnlyContactUsers();
+  }, []);
+  var activeMarkers = useMemo(function () {
+    var list = markers && markers[activeTab] || [];
+    return Array.isArray(list) ? [].concat(list).sort(sortByDateDesc) : [];
+  }, [markers, activeTab]);
+  var rowHeightPx = useMemo(function () {
+    return (avatarSize || 32) + 24;
+  }, [avatarSize]);
+  var listMaxHeightPx = useMemo(function () {
+    return rowHeightPx * 5 - 16;
+  }, [rowHeightPx]);
+  var tabItems = tabsOrder.map(function (tab) {
+    switch (tab.key) {
+      case 'played':
+        return {
+          key: tab.key,
+          label: (labels === null || labels === void 0 ? void 0 : labels.playedBy) || 'Played by',
+          data: activeMarkers
+        };
+      case 'received':
+        return {
+          key: tab.key,
+          label: (labels === null || labels === void 0 ? void 0 : labels.receivedBy) || 'Delivered to',
+          data: activeMarkers
+        };
+      case 'displayed':
+      default:
+        return {
+          key: 'displayed',
+          label: (labels === null || labels === void 0 ? void 0 : labels.displayedBy) || 'Seen by',
+          data: activeMarkers
+        };
+    }
+  });
+  var renderRow = function renderRow(marker) {
+    var _marker$user;
+    var contact = contacts[((_marker$user = marker.user) === null || _marker$user === void 0 ? void 0 : _marker$user.id) || ''];
+    var displayName = makeUsername(contact, marker.user, getFromContacts);
+    var avatarUrl = marker.user ? marker.user.avatarUrl : '';
+    var dateVal = marker.createdAt || marker.createdAt;
+    var dateFormat = dateVal ? formatDate(new Date(dateVal)) : '';
+    var node = /*#__PURE__*/React__default.createElement(Row$1, {
+      backgroundHover: listItemStyles.hoverBackground || backgroundHovered,
+      onClick: function onClick() {
+        return handleOpenUserProfile === null || handleOpenUserProfile === void 0 ? void 0 : handleOpenUserProfile(marker.user);
+      }
+    }, /*#__PURE__*/React__default.createElement(Avatar, {
+      name: displayName,
+      image: avatarUrl,
+      size: avatarSize,
+      textSize: 12,
+      setDefaultAvatar: true
+    }), /*#__PURE__*/React__default.createElement(RowInfo, null, /*#__PURE__*/React__default.createElement(RowTitle, {
+      color: listItemStyles.nameColor || textPrimary
+    }, displayName), /*#__PURE__*/React__default.createElement(RowDate, {
+      color: listItemStyles.dateColor || textSecondary
+    }, dateFormat)));
+    return renderItem ? renderItem(marker, node) : node;
+  };
+  useLayoutEffect(function () {
+    var _rootRef$current;
+    var container = document.getElementById('scrollableDiv');
+    var anchorEl = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.parentElement;
+    if (container && anchorEl) {
+      var containerRect = container.getBoundingClientRect();
+      var anchorRect = anchorEl.getBoundingClientRect();
+      var contentEl = contentRef.current;
+      var tabsEl = tabsRef.current;
+      var listEl = listRef.current;
+      var cs = contentEl ? getComputedStyle(contentEl) : {};
+      var padTop = parseFloat((cs === null || cs === void 0 ? void 0 : cs.paddingTop) || '0') || 0;
+      var padBottom = parseFloat((cs === null || cs === void 0 ? void 0 : cs.paddingBottom) || '0') || 0;
+      var contentPaddingY = padTop + padBottom;
+      var tabsHeight = tabsEl ? tabsEl.getBoundingClientRect().height : 0;
+      var tabsMarginBottom = 8;
+      var listMarginTop = 8;
+      var desiredListHeight = Math.min(listEl ? listEl.scrollHeight : 0, listMaxHeightPx);
+      var desiredHeight = contentPaddingY + tabsHeight + tabsMarginBottom + listMarginTop + desiredListHeight;
+      var maxPx = parseInt(String(height || '300'), 10) || 300;
+      var measuredTarget = Math.min(desiredHeight || 0, maxPx);
+      var flipTarget = messagesMarkersLoadingState === LOADING_STATE.LOADING ? maxPx : measuredTarget;
+      setPanelHeightPx(measuredTarget);
+      var availableBelow = containerRect.bottom - anchorRect.bottom - 8;
+      var availableAbove = anchorRect.top - containerRect.top - 8;
+      var nextFlip = Boolean(flipTarget > availableBelow && flipTarget <= availableAbove);
+      setFlipAbove(nextFlip);
+    }
+    setIsTransitioning(true);
+    setOpen(true);
+    setReady(true);
+    setFlipLocked(true);
+  }, []);
+  useEffect(function () {
+    var onDown = function onDown(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        togglePopup();
+      }
+    };
+    document.addEventListener('mousedown', onDown);
+    return function () {
+      document.removeEventListener('mousedown', onDown);
+    };
+  }, []);
+  useEffect(function () {
+    var container = document.getElementById('scrollableDiv');
+    if (!container) return;
+    var recalc = function recalc() {
+      if (!rootRef.current || !ready) return;
+      if (messagesMarkersLoadingState === LOADING_STATE.LOADING) return;
+      var containerRect = container.getBoundingClientRect();
+      var anchorEl = rootRef.current.parentElement;
+      if (!anchorEl) return;
+      var anchorRect = anchorEl.getBoundingClientRect();
+      var dropdownHeight = panelHeightPx || 0;
+      if (!dropdownHeight || dropdownHeight < 8) {
+        var parsed = parseInt(String(height || '300'), 10);
+        dropdownHeight = isNaN(parsed) ? 300 : parsed;
+      }
+      var availableBelow = containerRect.bottom - anchorRect.bottom - 8;
+      var availableAbove = anchorRect.top - containerRect.top - 8;
+      var overflowBelow = dropdownHeight > availableBelow;
+      var overflowAbove = dropdownHeight > availableAbove;
+      if (!isTransitioning && !flipLocked) {
+        setFlipAbove(function (prev) {
+          if (prev) {
+            if (overflowAbove && !overflowBelow) return false;
+            return true;
+          }
+          if (overflowBelow && !overflowAbove) return true;
+          return false;
+        });
+      }
+    };
+    if (open) {
+      recalc();
+      var raf1 = requestAnimationFrame(recalc);
+      var raf2 = requestAnimationFrame(function () {
+        return requestAnimationFrame(recalc);
+      });
+      var t1 = setTimeout(recalc, 50);
+      var t2 = setTimeout(recalc, 200);
+      panelRef.current && panelRef.current.addEventListener('transitionend', recalc);
+      container.addEventListener('scroll', recalc);
+      window.addEventListener('resize', recalc);
+      return function () {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+        clearTimeout(t1);
+        clearTimeout(t2);
+        panelRef.current && panelRef.current.removeEventListener('transitionend', recalc);
+        container.removeEventListener('scroll', recalc);
+        window.removeEventListener('resize', recalc);
+      };
+    } else {
+      container.addEventListener('scroll', recalc);
+      window.addEventListener('resize', recalc);
+      return function () {
+        container.removeEventListener('scroll', recalc);
+        window.removeEventListener('resize', recalc);
+      };
+    }
+  }, [open, ready, message.id, panelHeightPx, isTransitioning, flipLocked, height]);
+  useLayoutEffect(function () {
+    var _rootRef$current2;
+    var container = document.getElementById('scrollableDiv');
+    var anchorEl = (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.parentElement;
+    if (!container || !anchorEl || !ready) return;
+    var containerRect = container.getBoundingClientRect();
+    var anchorRect = anchorEl.getBoundingClientRect();
+    var contentEl = contentRef.current;
+    var tabsEl = tabsRef.current;
+    var listEl = listRef.current;
+    var cs = contentEl ? getComputedStyle(contentEl) : {};
+    var padTop = parseFloat((cs === null || cs === void 0 ? void 0 : cs.paddingTop) || '0') || 0;
+    var padBottom = parseFloat((cs === null || cs === void 0 ? void 0 : cs.paddingBottom) || '0') || 0;
+    var contentPaddingY = padTop + padBottom;
+    var tabsHeight = tabsEl ? tabsEl.getBoundingClientRect().height : 0;
+    var tabsMarginBottom = 8;
+    var listMarginTop = 8;
+    var desiredListHeight = Math.min(listEl ? listEl.scrollHeight : 0, listMaxHeightPx);
+    var desiredHeight = contentPaddingY + tabsHeight + tabsMarginBottom + listMarginTop + desiredListHeight;
+    var maxPx = parseInt(String(height || '300'), 10);
+    var measuredTarget = Math.min(desiredHeight || 0, isNaN(maxPx) ? 300 : Math.min(maxPx, desiredHeight));
+    var nextHeight = Math.max(panelHeightPx || 0, measuredTarget);
+    var availableBelow = containerRect.bottom - anchorRect.bottom - 8;
+    var availableAbove = anchorRect.top - containerRect.top - 8;
+    setFlipLocked(true);
+    if (messagesMarkersLoadingState !== LOADING_STATE.LOADING) {
+      var overflowBelow = nextHeight > availableBelow;
+      var overflowAbove = nextHeight > availableAbove;
+      setFlipAbove(function (prev) {
+        if (prev) {
+          if (overflowAbove && !overflowBelow) return false;
+          return true;
+        }
+        if (overflowBelow && !overflowAbove) return true;
+        return false;
+      });
+    }
+    if (panelHeightPx !== nextHeight) {
+      setIsTransitioning(true);
+      setPanelHeightPx(nextHeight);
+    }
+  }, [ready, panelHeightPx, activeMarkers.length, messagesMarkersLoadingState, height]);
+  useEffect(function () {
+    if (messagesMarkersLoadingState === LOADING_STATE.LOADING) {
+      setFlipLocked(true);
+    }
+  }, [messagesMarkersLoadingState]);
+  useEffect(function () {
+    var el = panelRef.current;
+    if (!el) return;
+    var onEnd = function onEnd(e) {
+      if (e.propertyName === 'height') {
+        setIsTransitioning(false);
+        setTimeout(function () {
+          setFlipLocked(false);
+        }, 50);
+      }
+    };
+    el.addEventListener('transitionend', onEnd);
+    return function () {
+      el.removeEventListener('transitionend', onEnd);
+    };
+  }, []);
+  useEffect(function () {
+    if (activeTab && message.id && message.channelId) {
+      dispatch(getMessageMarkersAC(message.id, message.channelId, activeTab));
+    }
+  }, [activeTab, message.id, message.channelId]);
+  return /*#__PURE__*/React__default.createElement(DropdownRoot, {
+    ref: rootRef,
+    rtl: message.incoming,
+    backgroundColor: backgroundSections,
+    flip: flipAbove,
+    ready: ready
+  }, /*#__PURE__*/React__default.createElement(Panel, {
+    ref: panelRef,
+    bg: backgroundSections,
+    open: open,
+    heightPx: panelHeightPx,
+    maxHeight: height,
+    maxWidth: maxWidth,
+    minWidth: minWidth
+  }, /*#__PURE__*/React__default.createElement(Content, {
+    ref: contentRef
+  }, /*#__PURE__*/React__default.createElement(Tabs, {
+    ref: tabsRef
+  }, tabItems.map(function (tab) {
+    return /*#__PURE__*/React__default.createElement(Tab, {
+      key: tab.key,
+      active: activeTab === tab.key,
+      activeColor: tabsStyles.activeColor || textOnPrimary,
+      inactiveColor: tabsStyles.inactiveColor || textSecondary,
+      onClick: function onClick() {
+        return setActiveTab(tab.key);
+      },
+      textOnPrimary: textOnPrimary,
+      textSecondary: textSecondary,
+      background: activeTab === tab.key ? accentColor : 'transparent',
+      borderColor: border
+    }, tab.label, showCounts ? " (" + tab.data.length + ")" : '');
+  })), /*#__PURE__*/React__default.createElement(List$1, {
+    ref: listRef,
+    maxHeight: listMaxHeightPx
+  }, activeMarkers.map(function (marker) {
+    var _marker$user2;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: (((_marker$user2 = marker.user) === null || _marker$user2 === void 0 ? void 0 : _marker$user2.id) || 'deleted') + "-" + (marker.createdAt || '')
+    }, renderRow(marker));
+  }), !activeMarkers.length && messagesMarkersLoadingState !== LOADING_STATE.LOADING && (/*#__PURE__*/React__default.createElement(Empty, {
+    color: textSecondary
+  }, "No results"))))));
+};
+function sortByDateDesc(a, b) {
+  var aDate = a.createdAt || a.createdAt;
+  var bDate = b.createdAt || b.createdAt;
+  var aTime = aDate ? new Date(aDate).getTime() : 0;
+  var bTime = bDate ? new Date(bDate).getTime() : 0;
+  return bTime - aTime;
+}
+var Tabs = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  justify-content: start;\n  margin-bottom: 8px;\n"])));
+var Tab = styled.button(_templateObject2$x || (_templateObject2$x = _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;
+}, function (p) {
+  return p.active ? p.background : p.borderColor;
+});
+var List$1 = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  max-height: ", ";\n  min-height: 120px;\n"])), function (p) {
+  return p.maxHeight ? p.maxHeight + "px" : 'unset';
+});
+var Row$1 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px;\n  border-radius: 10px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (p) {
+  return p.backgroundHover;
+});
+var RowInfo = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-right: auto;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var RowTitle = styled.div(_templateObject6$g || (_templateObject6$g = _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$e || (_templateObject7$e = _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$d || (_templateObject8$d = _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) {
+  return p.color;
+});
+var DropdownRoot = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
+  return p.flip ? 'auto' : 'calc(100% + 8px)';
+}, function (p) {
+  return p.flip ? 'calc(100% + 8px)' : 'auto';
+}, function (p) {
+  return p.rtl ? 'left: 4%;' : 'right: 4%;';
+}, function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (p) {
+  return p.ready ? 'visible' : 'hidden';
+});
+var Panel = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 16px;\n  overflow: hidden;\n  transition: height 0.25s ease;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (p) {
+  return p.bg;
+}, function (p) {
+  return p.open ? Math.min(p.heightPx || 0, parseInt(String(p.maxHeight || '300'), 10) || 300) + "px" : '0';
+}, function (p) {
+  return p.maxWidth || '340px';
+}, function (p) {
+  return p.minWidth || '340px';
+});
+var Content = styled.div(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  padding: 16px 12px;\n  height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n"])));
+
+var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$4, _templateObject11$4, _templateObject12$3;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -32118,6 +32857,8 @@ var Message$1 = function Message(_ref) {
     deleteMessage = _ref$deleteMessage === void 0 ? true : _ref$deleteMessage,
     _ref$selectMessage = _ref.selectMessage,
     selectMessage = _ref$selectMessage === void 0 ? true : _ref$selectMessage,
+    _ref$showInfoMessage = _ref.showInfoMessage,
+    showInfoMessage = _ref$showInfoMessage === void 0 ? true : _ref$showInfoMessage,
     allowEditDeleteIncomingMessage = _ref.allowEditDeleteIncomingMessage,
     _ref$forwardMessage = _ref.forwardMessage,
     forwardMessage = _ref$forwardMessage === void 0 ? true : _ref$forwardMessage,
@@ -32146,6 +32887,7 @@ var Message$1 = function Message(_ref) {
     selectIconOrder = _ref.selectIconOrder,
     starIconOrder = _ref.starIconOrder,
     reportIconOrder = _ref.reportIconOrder,
+    infoIconOrder = _ref.infoIconOrder,
     reactionIconTooltipText = _ref.reactionIconTooltipText,
     editIconTooltipText = _ref.editIconTooltipText,
     copyIconTooltipText = _ref.copyIconTooltipText,
@@ -32156,6 +32898,7 @@ var Message$1 = function Message(_ref) {
     selectIconTooltipText = _ref.selectIconTooltipText,
     starIconTooltipText = _ref.starIconTooltipText,
     reportIconTooltipText = _ref.reportIconTooltipText,
+    infoIconTooltipText = _ref.infoIconTooltipText,
     messageActionIconsColor = _ref.messageActionIconsColor,
     messageStatusSize = _ref.messageStatusSize,
     messageStatusColor = _ref.messageStatusColor,
@@ -32207,7 +32950,9 @@ var Message$1 = function Message(_ref) {
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
     messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
-    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
+    _ref$showInfoMessageP = _ref.showInfoMessageProps,
+    showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -32229,29 +32974,32 @@ var Message$1 = function Message(_ref) {
     reportPopupOpen = _useState3[0],
     setReportPopupOpen = _useState3[1];
   var _useState4 = useState(false),
-    messageActionsShow = _useState4[0],
-    setMessageActionsShow = _useState4[1];
+    infoPopupOpen = _useState4[0],
+    setInfoPopupOpen = _useState4[1];
   var _useState5 = useState(false),
-    emojisPopupOpen = _useState5[0],
-    setEmojisPopupOpen = _useState5[1];
+    messageActionsShow = _useState5[0],
+    setMessageActionsShow = _useState5[1];
   var _useState6 = useState(false),
-    frequentlyEmojisOpen = _useState6[0],
-    setFrequentlyEmojisOpen = _useState6[1];
+    emojisPopupOpen = _useState6[0],
+    setEmojisPopupOpen = _useState6[1];
   var _useState7 = useState(false),
-    reactionsPopupOpen = _useState7[0],
-    setReactionsPopupOpen = _useState7[1];
-  var _useState8 = useState(0),
-    reactionsPopupPosition = _useState8[0],
-    setReactionsPopupPosition = _useState8[1];
-  var _useState9 = useState(''),
-    emojisPopupPosition = _useState9[0],
-    setEmojisPopupPosition = _useState9[1];
-  var _useState0 = useState({
+    frequentlyEmojisOpen = _useState7[0],
+    setFrequentlyEmojisOpen = _useState7[1];
+  var _useState8 = useState(false),
+    reactionsPopupOpen = _useState8[0],
+    setReactionsPopupOpen = _useState8[1];
+  var _useState9 = useState(0),
+    reactionsPopupPosition = _useState9[0],
+    setReactionsPopupPosition = _useState9[1];
+  var _useState0 = useState(''),
+    emojisPopupPosition = _useState0[0],
+    setEmojisPopupPosition = _useState0[1];
+  var _useState1 = useState({
       left: 0,
       right: 0
     }),
-    reactionsPopupHorizontalPosition = _useState0[0],
-    setReactionsPopupHorizontalPosition = _useState0[1];
+    reactionsPopupHorizontalPosition = _useState1[0],
+    setReactionsPopupHorizontalPosition = _useState1[1];
   var scrollToNewMessage = useSelector(scrollToNewMessageSelector, shallowEqual);
   var messageItemRef = useRef();
   var isVisible = useOnScreen(messageItemRef);
@@ -32287,6 +33035,10 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
     stopScrolling(!forwardPopupOpen);
   };
+  var handleToggleInfoMessagePopupOpen = function handleToggleInfoMessagePopupOpen() {
+    setInfoPopupOpen(!infoPopupOpen);
+    setMessageActionsShow(false);
+  };
   var handleReplyMessage = function handleReplyMessage(threadReply) {
     if (threadReply) ; else {
       dispatch(setMessageForReplyAC(message));
@@ -32544,6 +33296,7 @@ var Message$1 = function Message(_ref) {
     emojisPopupPosition: emojisPopupPosition,
     handleSetMessageForEdit: toggleEditMode,
     handleResendMessage: handleResendMessage,
+    handleOpenInfoMessage: handleToggleInfoMessagePopupOpen,
     handleOpenDeleteMessage: handleToggleDeleteMessagePopup,
     handleOpenForwardMessage: handleToggleForwardMessagePopup,
     handleCopyMessage: handleCopyMessage,
@@ -32596,6 +33349,7 @@ var Message$1 = function Message(_ref) {
     replyMessageInThread: replyMessageInThread,
     deleteMessage: deleteMessage,
     selectMessage: selectMessage,
+    showInfoMessage: showInfoMessage,
     allowEditDeleteIncomingMessage: allowEditDeleteIncomingMessage,
     forwardMessage: forwardMessage,
     reportMessage: reportMessage,
@@ -32620,6 +33374,7 @@ var Message$1 = function Message(_ref) {
     selectIconOrder: selectIconOrder,
     starIconOrder: starIconOrder,
     reportIconOrder: reportIconOrder,
+    infoIconOrder: infoIconOrder,
     reactionIconTooltipText: reactionIconTooltipText,
     editIconTooltipText: editIconTooltipText,
     copyIconTooltipText: copyIconTooltipText,
@@ -32630,6 +33385,7 @@ var Message$1 = function Message(_ref) {
     selectIconTooltipText: selectIconTooltipText,
     starIconTooltipText: starIconTooltipText,
     reportIconTooltipText: reportIconTooltipText,
+    infoIconTooltipText: infoIconTooltipText,
     messageActionIconsColor: messageActionIconsColor,
     messageStatusSize: messageStatusSize,
     messageStatusColor: messageStatusColor,
@@ -32663,6 +33419,7 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow: setMessageActionsShow,
     closeMessageActions: closeMessageActions,
     handleToggleForwardMessagePopup: handleToggleForwardMessagePopup,
+    handleToggleInfoMessagePopupOpen: handleToggleInfoMessagePopupOpen,
     handleReplyMessage: handleReplyMessage,
     handleToggleDeleteMessagePopup: handleToggleDeleteMessagePopup,
     handleToggleReportPopupOpen: handleToggleReportPopupOpen,
@@ -32716,7 +33473,7 @@ var Message$1 = function Message(_ref) {
     handleAddDeleteEmoji: handleReactionAddDelete,
     reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
     reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle
-  })), message.reactionTotals && message.reactionTotals.length && (/*#__PURE__*/React__default.createElement(ReactionsContainer, {
+  })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
     id: message.id + "_reactions_container",
     border: reactionsContainerBorder,
     boxShadow: reactionsContainerBoxShadow,
@@ -32724,8 +33481,9 @@ var Message$1 = function Message(_ref) {
     topPosition: reactionsContainerTopPosition,
     padding: reactionsContainerPadding,
     backgroundColor: reactionsContainerBackground || backgroundSections,
-    rtlDirection: ownMessageOnRightSide && !message.incoming
-  }, /*#__PURE__*/React__default.createElement(MessageReactionsCont, {
+    rtlDirection: ownMessageOnRightSide && !message.incoming,
+    isReacted: message.reactionTotals && message.reactionTotals.length > 0
+  }, message.reactionTotals && message.reactionTotals.length && (/*#__PURE__*/React__default.createElement(MessageReactionsCont, {
     rtlDirection: ownMessageOnRightSide && !message.incoming,
     onClick: handleToggleReactionsPopup
   }, message.reactionTotals.slice(0, reactionsDisplayCount || 5).map(function (summery) {
@@ -32769,16 +33527,22 @@ var Message$1 = function Message(_ref) {
     togglePopup: handleToggleForwardMessagePopup,
     buttonText: 'Forward',
     title: 'Forward message'
-  })));
+  })), infoPopupOpen && (/*#__PURE__*/React__default.createElement(MessageInfo, Object.assign({
+    message: message,
+    togglePopup: handleToggleInfoMessagePopupOpen
+  }, showInfoMessageProps, {
+    contacts: contactsMap,
+    handleOpenUserProfile: handleOpenUserProfile
+  }))));
 };
 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.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$C || (_templateObject$C = _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$x || (_templateObject2$x = _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$D || (_templateObject$D = _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$y || (_templateObject2$y = _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$r || (_templateObject3$r = _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) {
+var MessageReaction = styled.span(_templateObject3$s || (_templateObject3$s = _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) {
   return props.margin || '0 8px 0 0';
 }, function (props) {
   return props.isLastReaction && '0';
@@ -32797,26 +33561,26 @@ var MessageReaction = styled.span(_templateObject3$r || (_templateObject3$r = _t
 }, function (props) {
   return props.backgroundColor;
 });
-var ThreadMessageCountContainer = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 15px;\n  margin: 12px;\n  cursor: pointer;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -25px;\n    top: -21px;\n    width: 16px;\n    height: 26px;\n    border-left: 2px solid #cdcdcf;\n    border-bottom: 2px solid #cdcdcf;\n    border-radius: 0 0 0 14px;\n  }\n"])), function (props) {
+var ThreadMessageCountContainer = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 15px;\n  margin: 12px;\n  cursor: pointer;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -25px;\n    top: -21px;\n    width: 16px;\n    height: 26px;\n    border-left: 2px solid #cdcdcf;\n    border-bottom: 2px solid #cdcdcf;\n    border-radius: 0 0 0 14px;\n  }\n"])), function (props) {
   return props.color;
 });
-var FailedMessageIcon = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -6px;\n  left: ", ";\n  right: ", ";\n  width: 20px;\n  height: 20px;\n"])), function (props) {
+var FailedMessageIcon = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -6px;\n  left: ", ";\n  right: ", ";\n  width: 20px;\n  height: 20px;\n"])), function (props) {
   return !props.rtl && '-24px';
 }, function (props) {
   return props.rtl && '-24px';
 });
-var ErrorIconWrapper = styled(SvgErrorIcon)(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
-var SelectMessageWrapper = styled.div(_templateObject7$e || (_templateObject7$e = _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 ErrorIconWrapper = styled(SvgErrorIcon)(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
+var SelectMessageWrapper = styled.div(_templateObject7$f || (_templateObject7$f = _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;
 });
-var EmptySelection = styled.span(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 1.5px solid ", ";\n  box-sizing: border-box;\n  border-radius: 50%;\n  transform: scale(0.92);\n  opacity: ", ";\n"])), function (props) {
+var EmptySelection = styled.span(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 1.5px solid ", ";\n  box-sizing: border-box;\n  border-radius: 50%;\n  transform: scale(0.92);\n  opacity: ", ";\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.disabled && '0.5';
 });
-var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  margin-top: 4px;\n  justify-content: flex-end;\n  border: ", ";\n  box-shadow: ", ";\n  filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n  border-radius: ", ";\n  background-color: ", ";\n  padding: ", ";\n  z-index: 9;\n  ", ";\n"])), function (props) {
+var ReactionsContainer = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  margin-top: 4px;\n  justify-content: flex-end;\n  border: ", ";\n  box-shadow: ", ";\n  filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n  border-radius: ", ";\n  background-color: ", ";\n  padding: ", ";\n  z-index: 9;\n  ", ";\n  overflow: hidden;\n  height: ", ";\n  transition: all 0.3s;\n"])), function (props) {
   return props.rtlDirection && 'auto';
 }, function (props) {
   return !props.rtlDirection && 'auto';
@@ -32829,14 +33593,16 @@ var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b =
 }, function (props) {
   return props.backgroundColor;
 }, function (props) {
-  return props.padding || '4px 8px';
+  return !props.isReacted ? '0' : props.padding || '4px 8px';
 }, function (props) {
   return props.topPosition && "\n      position: relative;\n      top: " + props.topPosition + ";\n  ";
+}, function (props) {
+  return props.isReacted ? '16px' : '0';
 });
-var MessageReactionsCont = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
+var MessageReactionsCont = styled.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.rtlDirection && 'ltr';
 });
-var MessageStatus$1 = styled.span(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
+var MessageStatus$1 = styled.span(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
 });
 var HiddenMessageTime$1 = styled.span(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
@@ -32881,7 +33647,7 @@ var HiddenMessageProperty;
   HiddenMessageProperty["hideAfterSendMessage"] = "hideAfterSendMessage";
 })(HiddenMessageProperty || (HiddenMessageProperty = {}));
 
-var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8;
+var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$l, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -32958,6 +33724,7 @@ var MessageList = function MessageList(_ref2) {
     forwardMessage = _ref2.forwardMessage,
     deleteMessage = _ref2.deleteMessage,
     selectMessage = _ref2.selectMessage,
+    showInfoMessage = _ref2.showInfoMessage,
     reportMessage = _ref2.reportMessage,
     reactionIcon = _ref2.reactionIcon,
     editIcon = _ref2.editIcon,
@@ -33004,6 +33771,7 @@ var MessageList = function MessageList(_ref2) {
     selectIconOrder = _ref2.selectIconOrder,
     starIconOrder = _ref2.starIconOrder,
     reportIconOrder = _ref2.reportIconOrder,
+    infoIconOrder = _ref2.infoIconOrder,
     reactionIconTooltipText = _ref2.reactionIconTooltipText,
     editIconTooltipText = _ref2.editIconTooltipText,
     copyIconTooltipText = _ref2.copyIconTooltipText,
@@ -33011,6 +33779,7 @@ var MessageList = function MessageList(_ref2) {
     replyInThreadIconTooltipText = _ref2.replyInThreadIconTooltipText,
     forwardIconTooltipText = _ref2.forwardIconTooltipText,
     deleteIconTooltipText = _ref2.deleteIconTooltipText,
+    infoIconTooltipText = _ref2.infoIconTooltipText,
     selectIconTooltipText = _ref2.selectIconTooltipText,
     starIconTooltipText = _ref2.starIconTooltipText,
     reportIconTooltipText = _ref2.reportIconTooltipText,
@@ -33063,7 +33832,9 @@ var MessageList = function MessageList(_ref2) {
     messageTimeColor = _ref2.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref2.messageStatusAndTimeLineHeight,
     hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
-    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
+    _ref2$showInfoMessage = _ref2.showInfoMessageProps,
+    showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -33153,7 +33924,14 @@ var MessageList = function MessageList(_ref2) {
     var text = '';
     for (var i = dateLabels.length - 1; i >= 0; i--) {
       var dateLabel = dateLabels[i];
-      if (!text && container.scrollTop > dateLabel.offsetTop - 28) {
+      var aroundThreshold = 40;
+      var labelTop = dateLabel.offsetTop - 28;
+      var labelBottom = labelTop + (dateLabel.offsetHeight || 0) - 28;
+      if (container.scrollTop >= labelTop - aroundThreshold && container.scrollTop <= labelBottom + aroundThreshold) {
+        setShowTopDate(false);
+        break;
+      }
+      if (!text && container.scrollTop > labelTop - 28) {
         var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
         text = span ? span.innerText || '' : '';
         setTopDateLabel(text);
@@ -33175,9 +33953,6 @@ var MessageList = function MessageList(_ref2) {
       }
       setShowTopDate(true);
       clearTimeout(hideTopDateTimeout.current);
-      hideTopDateTimeout.current = setTimeout(function () {
-        setShowTopDate(false);
-      }, 1000);
       renderTopDate();
       var forceLoadPrevMessages = false;
       if (-target.scrollTop + target.offsetHeight + 30 > target.scrollHeight) {
@@ -33802,6 +34577,7 @@ var MessageList = function MessageList(_ref2) {
       replyMessageInThread: replyMessageInThread,
       deleteMessage: deleteMessage,
       selectMessage: selectMessage,
+      showInfoMessage: showInfoMessage,
       allowEditDeleteIncomingMessage: allowEditDeleteIncomingMessage,
       reportMessage: reportMessage,
       reactionIcon: reactionIcon,
@@ -33827,6 +34603,7 @@ var MessageList = function MessageList(_ref2) {
       replyInThreadIconOrder: replyInThreadIconOrder,
       forwardIconOrder: forwardIconOrder,
       deleteIconOrder: deleteIconOrder,
+      infoIconOrder: infoIconOrder,
       selectIconOrder: selectIconOrder,
       starIconOrder: starIconOrder,
       reportIconOrder: reportIconOrder,
@@ -33837,6 +34614,7 @@ var MessageList = function MessageList(_ref2) {
       replyInThreadIconTooltipText: replyInThreadIconTooltipText,
       forwardIconTooltipText: forwardIconTooltipText,
       deleteIconTooltipText: deleteIconTooltipText,
+      infoIconTooltipText: infoIconTooltipText,
       selectIconTooltipText: selectIconTooltipText,
       starIconTooltipText: starIconTooltipText,
       reportIconTooltipText: reportIconTooltipText,
@@ -33886,7 +34664,8 @@ var MessageList = function MessageList(_ref2) {
       messageTimeFontSize: messageTimeFontSize,
       messageTimeColor: messageTimeColor,
       messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-      shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
+      shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
+      showInfoMessageProps: showInfoMessageProps
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -33916,14 +34695,14 @@ var MessageList = function MessageList(_ref2) {
     attachmentsPreview: attachmentsPreview
   })))));
 };
-var Container$h = styled.div(_templateObject$D || (_templateObject$D = _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$h = styled.div(_templateObject$E || (_templateObject$E = _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$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
-var MessagesBox = styled.div(_templateObject3$s || (_templateObject3$s = _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$o || (_templateObject4$o = _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) {
+var EmptyDiv = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
+var MessagesBox = styled.div(_templateObject3$t || (_templateObject3$t = _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$p || (_templateObject4$p = _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';
 }, function (props) {
   return props.marginTop;
@@ -33942,19 +34721,19 @@ var MessageTopDate = styled.div(_templateObject4$o || (_templateObject4$o = _tag
 }, function (props) {
   return props.dateDividerBorderRadius || '14px';
 });
-var DragAndDropContainer = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: -31px;\n  margin-top: -2px;\n\n  position: absolute;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  z-index: 999;\n"])), function (props) {
+var DragAndDropContainer = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: -31px;\n  margin-top: -2px;\n\n  position: absolute;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  z-index: 999;\n"])), function (props) {
   return props.topOffset ? props.topOffset + 2 + "px" : 0;
 }, function (props) {
   return props.height ? props.height + 30 + "px" : '100%';
 }, function (props) {
   return props.backgroundColor;
 });
-var IconWrapper$1 = styled.span(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 64px;\n  width: 64px;\n  background-color: ", ";\n  border-radius: 50%;\n  text-align: center;\n  margin-bottom: 16px;\n  transition: all 0.3s;\n  pointer-events: none;\n\n  & > svg {\n    color: ", ";\n    width: 32px;\n    height: 32px;\n  }\n"])), function (props) {
+var IconWrapper$1 = styled.span(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 64px;\n  width: 64px;\n  background-color: ", ";\n  border-radius: 50%;\n  text-align: center;\n  margin-bottom: 16px;\n  transition: all 0.3s;\n  pointer-events: none;\n\n  & > svg {\n    color: ", ";\n    width: 32px;\n    height: 32px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.iconColor;
 });
-var DropAttachmentArea = styled.div(_templateObject7$f || (_templateObject7$f = _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$g || (_templateObject7$g = _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';
@@ -33967,16 +34746,16 @@ var DropAttachmentArea = styled.div(_templateObject7$f || (_templateObject7$f =
 }, IconWrapper$1, function (props) {
   return props.iconBackgroundColor;
 });
-var MessageWrapper = styled.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      transition: all 0.2s ease-in-out;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n\n  & .message_item {\n    transition: all 0.2s ease-in-out;\n  }\n"])), function (props) {
+var MessageWrapper = styled.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      transition: all 0.2s ease-in-out;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n\n  & .message_item {\n    transition: all 0.2s ease-in-out;\n  }\n"])), function (props) {
   return props.highlightBg || '#d5d5d5';
 });
-var NoMessagesContainer = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesContainer = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesTitle = styled.h4(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesTitle = styled.h4(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesText = styled.p(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesText = styled.p(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -34016,6 +34795,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     forwardMessage = _ref.forwardMessage,
     deleteMessage = _ref.deleteMessage,
     selectMessage = _ref.selectMessage,
+    showInfoMessage = _ref.showInfoMessage,
     reportMessage = _ref.reportMessage,
     reactionIcon = _ref.reactionIcon,
     editIcon = _ref.editIcon,
@@ -34062,6 +34842,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     selectIconOrder = _ref.selectIconOrder,
     starIconOrder = _ref.starIconOrder,
     reportIconOrder = _ref.reportIconOrder,
+    infoIconOrder = _ref.infoIconOrder,
     reactionIconTooltipText = _ref.reactionIconTooltipText,
     editIconTooltipText = _ref.editIconTooltipText,
     copyIconTooltipText = _ref.copyIconTooltipText,
@@ -34072,6 +34853,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     selectIconTooltipText = _ref.selectIconTooltipText,
     starIconTooltipText = _ref.starIconTooltipText,
     reportIconTooltipText = _ref.reportIconTooltipText,
+    infoIconTooltipText = _ref.infoIconTooltipText,
     messageActionIconsColor = _ref.messageActionIconsColor,
     dateDividerFontSize = _ref.dateDividerFontSize,
     dateDividerTextColor = _ref.dateDividerTextColor,
@@ -34122,7 +34904,9 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageStatusAndTimeLineHeight = _ref.messageStatusAndTimeLineHeight,
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
     hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
-    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
+    _ref$showInfoMessageP = _ref.showInfoMessageProps,
+    showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -34153,6 +34937,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     forwardMessage: forwardMessage,
     deleteMessage: deleteMessage,
     selectMessage: selectMessage,
+    showInfoMessage: showInfoMessage,
     reportMessage: reportMessage,
     reactionIcon: reactionIcon,
     editIcon: editIcon,
@@ -34195,6 +34980,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     forwardIconOrder: forwardIconOrder,
     deleteIconOrder: deleteIconOrder,
     selectIconOrder: selectIconOrder,
+    infoIconOrder: infoIconOrder,
     starIconOrder: starIconOrder,
     reportIconOrder: reportIconOrder,
     reactionIconTooltipText: reactionIconTooltipText,
@@ -34207,6 +34993,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     selectIconTooltipText: selectIconTooltipText,
     starIconTooltipText: starIconTooltipText,
     reportIconTooltipText: reportIconTooltipText,
+    infoIconTooltipText: infoIconTooltipText,
     messageActionIconsColor: messageActionIconsColor,
     dateDividerFontSize: dateDividerFontSize,
     dateDividerTextColor: dateDividerTextColor,
@@ -34249,7 +35036,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeColor: messageTimeColor,
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
     hiddenMessagesProperties: hiddenMessagesProperties,
-    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
+    showInfoMessageProps: showInfoMessageProps
   }));
 };
 
@@ -34361,7 +35149,7 @@ function $isMentionNode(node) {
   return node instanceof MentionNode;
 }
 
-var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$l;
+var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$m;
 var PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 var NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 var DocumentMentionsRegex = {
@@ -34641,8 +35429,8 @@ function MentionsPlugin(_ref3) {
     }
   });
 }
-var MentionsContainerWrapper = styled.div(_templateObject$E || (_templateObject$E = _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$z || (_templateObject2$z = _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$F || (_templateObject$F = _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$A || (_templateObject2$A = _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;
@@ -34651,11 +35439,11 @@ var MentionsList = styled.ul(_templateObject2$z || (_templateObject2$z = _tagged
 }, function (props) {
   return props.hidden ? 'hidden' : 'visible';
 });
-var MemberItem = styled.li(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n  background-color: ", ";\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
+var MemberItem = styled.li(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n  background-color: ", ";\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
   return props.isActiveItem && props.activeBackgroundColor;
 }, UserStatus);
-var UserNamePresence$2 = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 44px);\n  margin-left: 12px;\n"])));
-var MemberName$2 = styled.h3(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  max-width: calc(100% - 1px);\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
+var UserNamePresence$2 = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 44px);\n  margin-left: 12px;\n"])));
+var MemberName$2 = styled.h3(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  max-width: calc(100% - 1px);\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -34788,7 +35576,7 @@ function SvgUnderline(props) {
   }))));
 }
 
-var _templateObject$F, _templateObject2$A;
+var _templateObject$G, _templateObject2$B;
 function mergeRegister() {
   for (var _len = arguments.length, func = new Array(_len), _key = 0; _key < _len; _key++) {
     func[_key] = arguments[_key];
@@ -35169,10 +35957,10 @@ function FloatingTextFormatToolbarPlugin(_ref3) {
     editor = _useLexicalComposerCo[0];
   return useFloatingTextFormatToolbar(editor, anchorElem);
 }
-var FloatingTextFormatPopup = styled.div(_templateObject$F || (_templateObject$F = _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$G || (_templateObject$G = _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$A || (_templateObject2$A = _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$B || (_templateObject2$B = _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  ";
@@ -35495,7 +36283,7 @@ function FormatMessagePlugin(_ref) {
   return null;
 }
 
-var _templateObject$G, _templateObject2$B, _templateObject3$u, _templateObject4$q, _templateObject5$m, _templateObject6$i, _templateObject7$g, _templateObject8$f;
+var _templateObject$H, _templateObject2$C, _templateObject3$v, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$g;
 var EmojiIcon$1 = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -35690,7 +36478,7 @@ function EmojisPopup$1(_ref2) {
     }));
   }))));
 }
-var Container$i = styled.div(_templateObject$G || (_templateObject$G = _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$i = styled.div(_templateObject$H || (_templateObject$H = _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');
@@ -35711,23 +36499,23 @@ var Container$i = styled.div(_templateObject$G || (_templateObject$G = _taggedTe
 }, function (props) {
   return props.rendered && "\n    height: 225px;\n  ";
 });
-var EmojiHeader$1 = styled.div(_templateObject2$B || (_templateObject2$B = _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$C || (_templateObject2$C = _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';
 });
-var EmojiSection$1 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
-var EmojiCollection$1 = styled.span(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & > * {\n    color: ", ";\n  }\n"])), function (props) {
+var EmojiSection$1 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
+var EmojiCollection$1 = styled.span(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & > * {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var CollectionPointer$1 = styled.span(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose([""])));
-var AllEmojis$1 = styled.ul(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
-var EmojiFooter$1 = styled.div(_templateObject7$g || (_templateObject7$g = _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 CollectionPointer$1 = styled.span(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose([""])));
+var AllEmojis$1 = styled.ul(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
+var EmojiFooter$1 = styled.div(_templateObject7$h || (_templateObject7$h = _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;
 });
-var Emoji$1 = styled.li(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\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  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var Emoji$1 = styled.li(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\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  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 });
 
@@ -35928,7 +36716,7 @@ function SvgRecordButton(props) {
   })));
 }
 
-var _templateObject$H, _templateObject2$C, _templateObject3$v, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h;
+var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i;
 var shouldDraw = false;
 var AudioRecord = function AudioRecord(_ref) {
   var sendRecordedFile = _ref.sendRecordedFile,
@@ -36124,7 +36912,6 @@ var AudioRecord = function AudioRecord(_ref) {
     handleStopRecording();
     if (currentRecordedFile) {
       var _wavesurfer$current2;
-      removeAudioRecordingFromMap(currentChannelId);
       dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
       setRecordedFile(null);
       setPlayAudio(false);
@@ -36133,8 +36920,9 @@ var AudioRecord = function AudioRecord(_ref) {
       }
     } else {
       shouldDraw = false;
-      recorder.stop();
+      recorder === null || recorder === void 0 ? void 0 : recorder.stop();
     }
+    removeAudioRecordingFromMap(currentChannelId);
     setRecordingIsReadyToPlay(false);
     setStartRecording(false);
     setCurrentTime(0);
@@ -36391,29 +37179,20 @@ var AudioRecord = function AudioRecord(_ref) {
   }, [currentRecordedFile, currentChannelId]);
   useEffect(function () {
     if (!currentRecordedFile) {
-      (function () {
-        try {
-          var _temp5 = function () {
-            if (!recorder) {
-              var _temp4 = _catch(function () {
-                return Promise.resolve(import('mic-recorder-to-mp3')).then(function (MicRecorderModule) {
-                  var MicRecorder = MicRecorderModule["default"];
-                  var recorder = new MicRecorder({
-                    bitRate: 128
-                  });
-                  setRecorder(recorder);
-                });
-              }, function (e) {
-                log.error('Failed to init mic-recorder-to-mp3', e);
-              });
-              if (_temp4 && _temp4.then) return _temp4.then(function () {});
-            }
-          }();
-          return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
-        } catch (e) {
-          Promise.reject(e);
+      try {
+        if (!recorder) {
+          try {
+            var newRecorder = new MicRecorder({
+              bitRate: 128
+            });
+            setRecorder(newRecorder);
+          } catch (e) {
+            log.error('Failed to init mic-recorder-to-mp3', e);
+          }
         }
-      })();
+      } catch (e) {
+        Promise.reject(e);
+      }
     }
   }, [currentRecordedFile]);
   useEffect(function () {
@@ -36492,10 +37271,10 @@ var AudioRecord = function AudioRecord(_ref) {
     iconColor: accentColor
   }, showRecording || currentRecordedFile ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)));
 };
-var Container$j = styled.div(_templateObject$H || (_templateObject$H = _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$j = styled.div(_templateObject$I || (_templateObject$I = _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$C || (_templateObject2$C = _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$D || (_templateObject2$D = _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';
@@ -36504,10 +37283,10 @@ var AudioWrapper = styled.div(_templateObject2$C || (_templateObject2$C = _tagge
 }, function (props) {
   return props.recording ? '0 12px 0 0' : '0';
 });
-var RecordIconWrapper = styled.span(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var RecordIconWrapper = styled.span(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var AudioVisualization$1 = styled.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
+var AudioVisualization$1 = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
   var show = _ref5.show;
   return show ? '1' : '0';
 }, function (_ref6) {
@@ -36519,10 +37298,10 @@ var AudioVisualization$1 = styled.div(_templateObject4$r || (_templateObject4$r
 }, function (props) {
   return props.color;
 });
-var PlayPause$1 = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 10px;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var PlayPause$1 = styled.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 10px;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var Canvas = styled.canvas(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref8) {
+var Canvas = styled.canvas(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref8) {
   var recording = _ref8.recording;
   return recording ? '300px' : '0';
 }, function (_ref9) {
@@ -36532,14 +37311,14 @@ var Canvas = styled.canvas(_templateObject6$j || (_templateObject6$j = _taggedTe
   var hide = _ref0.hide;
   return hide && '-1';
 });
-var Timer$2 = styled.div(_templateObject7$h || (_templateObject7$h = _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$i || (_templateObject7$i = _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$I, _templateObject2$D, _templateObject3$w;
-var wave = keyframes(_templateObject$I || (_templateObject$I = _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$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
-var Bar = styled.span(_templateObject3$w || (_templateObject3$w = _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$J, _templateObject2$E, _templateObject3$x;
+var wave = keyframes(_templateObject$J || (_templateObject$J = _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$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
+var Bar = styled.span(_templateObject3$x || (_templateObject3$x = _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;
@@ -36565,7 +37344,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$a, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -36774,8 +37553,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     messageBodyAttributes = _useState11[0],
     setMessageBodyAttributes = _useState11[1];
   var _useState12 = useState([]),
-    mentionedMembers = _useState12[0],
-    setMentionedMembers = _useState12[1];
+    mentionedUsers = _useState12[0],
+    setMentionedUsers = _useState12[1];
   var _useState13 = useState(''),
     browser = _useState13[0],
     setBrowser = _useState13[1];
@@ -36901,21 +37680,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         var messageToSend = {
           body: messageTexToSend,
           bodyAttributes: messageBodyAttributes,
-          mentionedMembers: [],
+          mentionedUsers: [],
           attachments: [],
           type: 'text'
         };
-        var mentionMembersToSend = [];
+        var mentionUsersToSend = [];
         if (messageBodyAttributes && messageBodyAttributes.length) {
           messageBodyAttributes.forEach(function (att) {
             if (att.type === 'mention') {
-              mentionMembersToSend.push({
+              mentionUsersToSend.push({
                 id: att.metadata
               });
             }
           });
         }
-        messageToSend.mentionedMembers = mentionMembersToSend;
+        messageToSend.mentionedUsers = mentionUsersToSend;
         log.info('message to send ..........................................', JSON.stringify(messageToSend));
         if (messageForReply) {
           messageToSend.parentMessage = messageForReply;
@@ -36975,7 +37754,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setShouldClearEditor({
         clear: true
       });
-      setMentionedMembers([]);
+      setMentionedUsers([]);
       setMessageBodyAttributes([]);
       dispatch(setCloseSearchChannelsAC(true));
     } else {
@@ -37007,21 +37786,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           };
         }
       }
-      var mentionedMembersPositions = [];
-      var mentionMembersToSend = [];
-      if (mentionedMembers && mentionedMembers.length) {
+      var mentionedUsersPositions = [];
+      var mentionUsersToSend = [];
+      if (mentionedUsers && mentionedUsers.length) {
         if (messageBodyAttributes && messageBodyAttributes.length) {
           messageBodyAttributes.forEach(function (att) {
             if (att.type === 'mention') {
-              var mentionsToFind = [].concat(mentionedMembers);
+              var mentionsToFind = [].concat(mentionedUsers);
               var draftMessage = getDraftMessageFromMap(activeChannel.id);
               if (draftMessage) {
-                mentionsToFind = [].concat(draftMessage.mentionedMembers, mentionedMembers);
+                mentionsToFind = [].concat(draftMessage.mentionedUsers, mentionedUsers);
               }
               var mentionToAdd = mentionsToFind.find(function (mention) {
                 return mention.id === att.metadata;
               });
-              mentionMembersToSend.push(mentionToAdd);
+              mentionUsersToSend.push(mentionToAdd);
             }
           });
         }
@@ -37029,9 +37808,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       var messageToSend = _extends({}, messageToEdit, linkAttachment ? {
         attachments: [linkAttachment]
       } : {}, {
-        metadata: mentionedMembersPositions,
+        metadata: mentionedUsersPositions,
         bodyAttributes: messageBodyAttributes,
-        mentionedUsers: mentionMembersToSend,
+        mentionedUsers: mentionUsersToSend,
         body: messageTexToSend
       });
       messageToSend.type = /(https?:\/\/[^\s]+)/.test(messageToSend.body) ? 'link' : messageToSend.type;
@@ -37041,7 +37820,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   };
   var handleCloseEditMode = function handleCloseEditMode() {
     setEditMessageText('');
-    setMentionedMembers([]);
+    setMentionedUsers([]);
     dispatch(setMessageToEditAC(null));
   };
   var removeUpload = function removeUpload(attachmentId) {
@@ -37140,7 +37919,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   };
   var handleCut = function handleCut() {
     setMessageText('');
-    setMentionedMembers([]);
+    setMentionedUsers([]);
   };
   var handleEmojiPopupToggle = function handleEmojiPopupToggle(bool) {
     setIsEmojisOpened(bool);
@@ -37208,7 +37987,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     dispatch(clearSelectedMessagesAC());
   };
   var handleSetMentionMember = function handleSetMentionMember(mentionMember) {
-    setMentionedMembers(function (prevState) {
+    setMentionedUsers(function (prevState) {
       return [].concat(prevState, [mentionMember]);
     });
   };
@@ -37589,7 +38368,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             var messageToSend = {
               metadata: '',
               body: '',
-              mentionedMembers: [],
+              mentionedUsers: [],
               attachments: [{
                 name: v4() + ".mp3",
                 data: recordedFile.file,
@@ -37644,7 +38423,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           dispatch(setMessageForReplyAC(draftMessage.messageForReply));
         }
         setMessageText(draftMessage.text);
-        setMentionedMembers(draftMessage.mentionedMembers);
+        setMentionedUsers(draftMessage.mentionedUsers);
       }
       setShouldClearEditor({
         clear: true,
@@ -37655,7 +38434,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       prevActiveChannelId = activeChannel.id;
     }
     dispatch(getMembersAC(activeChannel.id));
-    setMentionedMembers([]);
+    setMentionedUsers([]);
   }, [activeChannel.id]);
   useEffect(function () {
     if (messageText.trim() || editMessageText.trim() && editMessageText && editMessageText.trim() !== messageToEdit.body || attachments.length) {
@@ -37690,10 +38469,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     }
     if (messageText.trim()) {
       var draftMessage = getDraftMessageFromMap(activeChannel.id);
-      if (draftMessage && draftMessage.mentionedMembers && draftMessage.mentionedMembers.length) {
+      if (draftMessage && draftMessage.mentionedUsers && draftMessage.mentionedUsers.length) {
         setDraftMessageToMap(activeChannel.id, {
           text: messageText,
-          mentionedMembers: draftMessage.mentionedMembers,
+          mentionedUsers: draftMessage.mentionedUsers,
           messageForReply: messageForReply,
           editorState: realEditorState,
           bodyAttributes: messageBodyAttributes
@@ -37701,7 +38480,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       } else {
         setDraftMessageToMap(activeChannel.id, {
           text: messageText,
-          mentionedMembers: mentionedMembers,
+          mentionedUsers: mentionedUsers,
           messageForReply: messageForReply,
           editorState: realEditorState,
           bodyAttributes: messageBodyAttributes
@@ -37721,15 +38500,15 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     }
   }, [messageText, attachments, editMessageText, readyVideoAttachments, messageBodyAttributes]);
   useDidUpdate(function () {
-    if (mentionedMembers && mentionedMembers.length) {
+    if (mentionedUsers && mentionedUsers.length) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
-        mentionedMembers: mentionedMembers,
+        mentionedUsers: mentionedUsers,
         messageForReply: messageForReply,
         bodyAttributes: messageBodyAttributes
       });
     }
-  }, [mentionedMembers]);
+  }, [mentionedUsers]);
   useEffect(function () {
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
       var pendingMessagesMap = getPendingMessagesMap();
@@ -37780,7 +38559,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (draftMessagesMap[activeChannel.id]) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
-        mentionedMembers: mentionedMembers,
+        mentionedUsers: mentionedUsers,
         messageForReply: messageForReply,
         bodyAttributes: messageBodyAttributes
       });
@@ -38095,7 +38874,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     editMessage: messageToEdit,
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
-    setMentionedMember: setMentionedMembers
+    setMentionedMember: setMentionedUsers
   }), /*#__PURE__*/React__default.createElement(FormatMessagePlugin, {
     editorState: realEditorState,
     setMessageBodyAttributes: setMessageBodyAttributes,
@@ -38152,10 +38931,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     channelId: activeChannel.id
   }))))))))));
 };
-var SendMessageWrapper = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 15;\n"])), function (props) {
+var SendMessageWrapper = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 15;\n"])), function (props) {
   return props.backgroundColor;
 });
-var Container$k = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 15;\n\n  & span.rdw-suggestion-dropdown {\n    position: absolute;\n    bottom: 100%;\n    height: 160px;\n    min-width: 150px;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    padding: 6px 12px;\n    border: 1px solid #ccc;\n    background: #fff;\n    z-index: 99;\n  }\n\n  & .text_formatting_toolbar {\n    display: ", ";\n    position: fixed;\n    top: ", ";\n    left: ", ";\n  }\n\n  & .rdw-suggestion-option-active {\n    background-color: rgb(243, 245, 248);\n  }\n\n  & .custom_editor {\n    cursor: text;\n\n    & .rdw-mention-link {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var Container$k = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 15;\n\n  & span.rdw-suggestion-dropdown {\n    position: absolute;\n    bottom: 100%;\n    height: 160px;\n    min-width: 150px;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    padding: 6px 12px;\n    border: 1px solid #ccc;\n    background: #fff;\n    z-index: 99;\n  }\n\n  & .text_formatting_toolbar {\n    display: ", ";\n    position: fixed;\n    top: ", ";\n    left: ", ";\n  }\n\n  & .rdw-suggestion-option-active {\n    background-color: rgb(243, 245, 248);\n  }\n\n  & .custom_editor {\n    cursor: text;\n\n    & .rdw-mention-link {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin || '30px 0 16px';
 }, function (props) {
   return props.border || '';
@@ -38172,7 +38951,7 @@ var Container$k = styled.div(_templateObject2$E || (_templateObject2$E = _tagged
 }, function (props) {
   return props.mentionColor;
 });
-var EditReplyMessageCont = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n  left: ", ";\n  bottom: ", ";\n  width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  z-index: 19;\n  box-sizing: content-box;\n"])), function (props) {
+var EditReplyMessageCont = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  position: relative;\n  left: ", ";\n  bottom: ", ";\n  width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  z-index: 19;\n  box-sizing: content-box;\n"])), function (props) {
   return props.left || '0';
 }, function (props) {
   return props.bottom || '0';
@@ -38187,19 +38966,19 @@ var EditReplyMessageCont = styled.div(_templateObject3$x || (_templateObject3$x
 }, function (props) {
   return props.backgroundColor;
 });
-var EditMessageText = styled.p(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n"])));
-var UploadErrorMessage = styled.p(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  position: absolute;\n  top: -30px;\n  color: ", ";\n"])), function (props) {
+var EditMessageText = styled.p(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n"])));
+var UploadErrorMessage = styled.p(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  position: absolute;\n  top: -30px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var CloseEditMode = styled.span(_templateObject6$k || (_templateObject6$k = _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) {
+var CloseEditMode = styled.span(_templateObject6$l || (_templateObject6$l = _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$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
-var ReplyMessageBody$1 = styled.div(_templateObject8$g || (_templateObject8$g = _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$d || (_templateObject9$d = _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) {
+var UserName$1 = styled.span(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
+var ReplyMessageBody$1 = styled.div(_templateObject8$h || (_templateObject8$h = _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$e || (_templateObject9$e = _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;
 });
-var AddAttachmentIcon = styled.span(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var AddAttachmentIcon = styled.span(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.height ? props.height + "px" : '36px';
 }, function (props) {
   return props.order === 0 || props.order ? props.order : 1;
@@ -38208,7 +38987,7 @@ var AddAttachmentIcon = styled.span(_templateObject0$c || (_templateObject0$c =
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageInputContainer = styled.div(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
+var SendMessageInputContainer = styled.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
   return props.minHeight || '36px';
 }, function (props) {
   return props.messageForReply ? '0 0 4px 4px' : '4px';
@@ -38504,7 +39283,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$a, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$L, _templateObject2$G, _templateObject3$z, _templateObject4$u, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$f, _templateObject0$e, _templateObject1$b, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
@@ -38968,21 +39747,21 @@ var Actions = function Actions(_ref) {
     title: popupTitle
   })));
 };
-var Container$l = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
+var Container$l = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
   return props.borderColor;
 });
-var ActionHeader = styled.div(_templateObject2$F || (_templateObject2$F = _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$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
+var ActionHeader = styled.div(_templateObject2$G || (_templateObject2$G = _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$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
-var ActionsMenu = styled.ul(_templateObject4$t || (_templateObject4$t = _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$p || (_templateObject5$p = _taggedTemplateLiteralLoose([""])));
-var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose([""])));
-var DefaultStarIcon = styled(SvgStar)(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose([""])));
-var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose([""])));
-var DefaultPinIcon = styled(SvgPin)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu = styled.ul(_templateObject4$u || (_templateObject4$u = _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$q || (_templateObject5$q = _taggedTemplateLiteralLoose([""])));
+var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled(SvgStar)(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose([""])));
+var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose([""])));
+var DefaultPinIcon = styled(SvgPin)(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose([""])));
 var DefaultBlockIcon = styled(SvgBlockChannel)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultReportIcon = styled(SvgReport)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultClearIcon = styled(SvgClear)(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose([""])));
@@ -39062,7 +39841,7 @@ function SvgMoreVert(props) {
   })));
 }
 
-var _templateObject$L, _templateObject2$G, _templateObject3$z;
+var _templateObject$M, _templateObject2$H, _templateObject3$A;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -39162,14 +39941,14 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     onClick: handleSave
   }, "Save"))));
 };
-var RolesSelect = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled.div(_templateObject2$G || (_templateObject2$G = _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$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled.div(_templateObject2$H || (_templateObject2$H = _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;
 });
-var RoleSpan = styled.span(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled.span(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
-var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$u, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$f;
+var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$v, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j, _templateObject9$g;
 var Members = function Members(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -39472,18 +40251,18 @@ var Members = function Members(_ref) {
     toggleCreatePopup: handleAddMemberPopup
   })));
 };
-var Container$m = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
-var MemberNameWrapper = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var MemberName$3 = styled.h4(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
+var Container$m = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var MemberNamePresence = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNameWrapper = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled.h4(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var EditMemberIcon = styled.span(_templateObject6$m || (_templateObject6$m = _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) {
+var EditMemberIcon = styled.span(_templateObject6$n || (_templateObject6$n = _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$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var MemberItem$1 = styled.li(_templateObject8$i || (_templateObject8$i = _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) {
+var MembersList = styled.ul(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MemberItem$1 = styled.li(_templateObject8$j || (_templateObject8$j = _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) {
   return props.color;
@@ -39494,13 +40273,13 @@ var MemberItem$1 = styled.li(_templateObject8$i || (_templateObject8$i = _tagged
 }, function (props) {
   return props.hoverBackground;
 }, EditMemberIcon, UserStatus);
-var RoleBadge = styled.span(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
+var RoleBadge = styled.span(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.backgroundColor;
 });
 
-var _templateObject$N, _templateObject2$I;
+var _templateObject$O, _templateObject2$J;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
@@ -39546,8 +40325,8 @@ var Media = function Media(_ref) {
     currentMediaFile: mediaFile
   })));
 };
-var Container$n = styled.div(_templateObject$N || (_templateObject$N = _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$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\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$n = styled.div(_templateObject$O || (_templateObject$O = _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$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\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$1n;
 function _extends$1r() {
@@ -39603,7 +40382,7 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$O, _templateObject2$J, _templateObject3$B, _templateObject4$v, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j;
+var _templateObject$P, _templateObject2$K, _templateObject3$C, _templateObject4$w, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -39720,30 +40499,30 @@ var Files = function Files(_ref) {
     }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null)));
   }));
 };
-var Container$o = styled.ul(_templateObject$O || (_templateObject$O = _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$J || (_templateObject2$J = _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$o = styled.ul(_templateObject$P || (_templateObject$P = _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$K || (_templateObject2$K = _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;
 }, function (props) {
   return props.iconColor;
 });
-var ProgressWrapper$2 = styled.span(_templateObject3$B || (_templateObject3$B = _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$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var ProgressWrapper$2 = styled.span(_templateObject3$C || (_templateObject3$C = _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$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled.span(_templateObject5$r || (_templateObject5$r = _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$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    color: ", ";\n    width: 40px;\n    height: 40px;\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileThumb = styled.img(_templateObject6$n || (_templateObject6$n = _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$l || (_templateObject7$l = _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 FileThumb = styled.img(_templateObject6$o || (_templateObject6$o = _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$m || (_templateObject7$m = _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$j || (_templateObject8$j = _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) {
+var FileSizeAndDate = styled.span(_templateObject8$k || (_templateObject8$k = _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) {
   return props.fontSize || '13px';
 }, function (props) {
   return props.lineHeight || '16px';
@@ -39782,7 +40561,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$P, _templateObject2$K, _templateObject3$C, _templateObject4$w, _templateObject5$s;
+var _templateObject$Q, _templateObject2$L, _templateObject3$D, _templateObject4$x, _templateObject5$t;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -39813,25 +40592,25 @@ var LinkItem = function LinkItem(_ref) {
     color: linkPreviewColor || textPrimary
   }, link))));
 };
-var LinkIconCont = styled.span(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var LinkIconCont = styled.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkHoverIconCont = styled.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var LinkHoverIconCont = styled.span(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
-var FileItem$1 = styled.li(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+var LinkInfoCont = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled.li(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, LinkIconCont, LinkHoverIconCont);
-var LinkUrl = styled.span(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
+var LinkUrl = styled.span(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$Q;
+var _templateObject$R;
 var Links = function Links(_ref) {
   var channelId = _ref.channelId,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -39856,7 +40635,7 @@ var Links = function Links(_ref) {
     });
   }));
 };
-var Container$p = styled.ul(_templateObject$Q || (_templateObject$Q = _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$p = styled.ul(_templateObject$R || (_templateObject$R = _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$1q;
 function _extends$1u() {
@@ -39912,7 +40691,7 @@ function SvgVoicePreviewPause(props) {
   })));
 }
 
-var _templateObject$R, _templateObject2$L, _templateObject3$D, _templateObject4$x, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k;
+var _templateObject$S, _templateObject2$M, _templateObject3$E, _templateObject4$y, _templateObject5$u, _templateObject6$p, _templateObject7$n, _templateObject8$l;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -40037,32 +40816,32 @@ var VoiceItem = function VoiceItem(_ref) {
     type: 'audio/mpeg'
   })));
 };
-var FileIconCont$1 = styled.span(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileIconCont$1 = styled.span(_templateObject$S || (_templateObject$S = _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$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont$1 = styled.span(_templateObject2$M || (_templateObject2$M = _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';
 });
-var FileItem$2 = styled.li(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+var FileItem$2 = styled.li(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, FileIconCont$1, FileHoverIconCont$1);
-var AudioInfo = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var AudioTitle = styled.span(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
+var AudioInfo = styled.div(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled.span(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioDate = styled.span(_templateObject6$o || (_templateObject6$o = _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: 12px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled.span(_templateObject6$p || (_templateObject6$p = _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: 12px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioSendTime = styled.span(_templateObject7$m || (_templateObject7$m = _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$n || (_templateObject7$n = _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$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var Audio = styled.audio(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$S;
+var _templateObject$T;
 var Voices = function Voices(_ref) {
   var channelId = _ref.channelId,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -40093,9 +40872,9 @@ var Voices = function Voices(_ref) {
     });
   }));
 };
-var Container$q = styled.ul(_templateObject$S || (_templateObject$S = _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$q = styled.ul(_templateObject$T || (_templateObject$T = _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$T, _templateObject2$M;
+var _templateObject$U, _templateObject2$N;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -40244,8 +41023,8 @@ var DetailsTab = function DetailsTab(_ref) {
     voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
   })));
 };
-var Container$r = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
-var DetailsTabHeader = styled.div(_templateObject2$M || (_templateObject2$M = _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$r = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
+var DetailsTabHeader = styled.div(_templateObject2$N || (_templateObject2$N = _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';
@@ -40263,17 +41042,17 @@ var DetailsTabHeader = styled.div(_templateObject2$M || (_templateObject2$M = _t
   return props.activeTabColor;
 });
 
-var _templateObject$U, _templateObject2$N, _templateObject3$E, _templateObject4$y;
-var Container$s = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
+var _templateObject$V, _templateObject2$O, _templateObject3$F, _templateObject4$z;
+var Container$s = styled.div(_templateObject$V || (_templateObject$V = _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$N || (_templateObject2$N = _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$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
-var EditChannelFooter = styled(ButtonBlock)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
+var AvatarCont = styled.div(_templateObject2$O || (_templateObject2$O = _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$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var EditChannelFooter = styled(ButtonBlock)(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
 var EditChannel = function EditChannel(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -40528,7 +41307,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$V, _templateObject2$O, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$g, _templateObject0$e, _templateObject1$b, _templateObject10$7;
+var _templateObject$W, _templateObject2$P, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$q, _templateObject7$o, _templateObject8$m, _templateObject9$h, _templateObject0$f, _templateObject1$c, _templateObject10$7;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -40915,17 +41694,17 @@ var Details = function Details(_ref) {
     onTabChange: handleTabChange
   }))));
 };
-var Container$t = styled.div(_templateObject$V || (_templateObject$V = _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$t = styled.div(_templateObject$W || (_templateObject$W = _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$O || (_templateObject2$O = _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$P || (_templateObject2$P = _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$F || (_templateObject3$F = _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) {
+var ChatDetails = styled.div(_templateObject3$G || (_templateObject3$G = _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) {
   return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
 }, function (props) {
   return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
@@ -40934,37 +41713,37 @@ var ChatDetails = styled.div(_templateObject3$F || (_templateObject3$F = _tagged
 }, function (props) {
   return props.thumbColor;
 });
-var AboutChannel = styled.div(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var AboutChannelTitle = styled.h4(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AboutChannel = styled.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var AboutChannelTitle = styled.h4(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AboutChannelText = styled.h3(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var AboutChannelText = styled.h3(_templateObject6$q || (_templateObject6$q = _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$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$4 = styled.div(_templateObject7$o || (_templateObject7$o = _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';
 }, function (props) {
   return props.direction && props.direction === 'column' && 'center';
 });
-var DetailsHeader = styled.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
+var DetailsHeader = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
   return props.borderColor;
 });
-var ChannelAvatarAndName = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
+var ChannelAvatarAndName = styled.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
   return props.direction;
 });
-var ChannelName$1 = styled(SectionHeader)(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
+var ChannelName$1 = styled(SectionHeader)(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
   return props.isDirect ? '200px' : '168px';
 }, function (props) {
   return props.color;
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ChannelNameWrapper = styled.div(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var ChannelNameWrapper = styled.div(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var EditButton = styled.span(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 
-var _templateObject$W;
+var _templateObject$X;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -41193,7 +41972,7 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     showPhoneNumber: showPhoneNumber
   })));
 };
-var DetailsWrapper = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose([""])));
+var DetailsWrapper = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose([""])));
 
 var _path$1s;
 function _extends$1w() {
@@ -41217,7 +41996,7 @@ function SvgChevronDown(props) {
   })));
 }
 
-var _templateObject$X, _templateObject2$P;
+var _templateObject$Y, _templateObject2$Q;
 var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -41300,7 +42079,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$X || (_templateObject$X = _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$Y || (_templateObject$Y = _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";
@@ -41311,7 +42090,7 @@ var BottomButton = styled.div(_templateObject$X || (_templateObject$X = _taggedT
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$1 = styled.span(_templateObject2$P || (_templateObject2$P = _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$Q || (_templateObject2$Q = _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';
@@ -41354,7 +42133,7 @@ function SvgMention(props) {
   })));
 }
 
-var _templateObject$Y, _templateObject2$Q;
+var _templateObject$Z, _templateObject2$R;
 var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentionsButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -41497,7 +42276,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$Y || (_templateObject$Y = _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$Z || (_templateObject$Z = _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";
@@ -41508,7 +42287,7 @@ var BottomButton$1 = styled.div(_templateObject$Y || (_templateObject$Y = _tagge
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$2 = styled.span(_templateObject2$Q || (_templateObject2$Q = _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$R || (_templateObject2$R = _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';