sceyt-chat-react-uikit 1.7.2-beta.8 → 1.7.2

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',
@@ -9564,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';
@@ -10336,7 +10339,9 @@ var initialState$1 = {
   playingAudioId: null,
   selectedMessagesMap: null,
   oGMetadata: {},
-  attachmentUpdatedMap: {}
+  attachmentUpdatedMap: {},
+  messageMarkers: {},
+  messagesMarkersLoadingState: null
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -10663,6 +10668,66 @@ var messageSlice = createSlice({
         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) {
+          var time = marker.createdAt;
+          try {
+            time = new Date(marker.createdAt);
+            if (isNaN(time.getTime())) {
+              time = new Date();
+            }
+          } catch (e) {
+            log.error('error in update messages markers', e);
+            time = new Date();
+          }
+          state.messageMarkers[channelId][messageId][deliveryStatus].push(_extends({}, marker, {
+            createdAt: time
+          }));
+        }
+      }
+    },
+    setMessagesMarkersLoadingState: function setMessagesMarkersLoadingState(state, action) {
+      state.messagesMarkersLoadingState = action.payload.state;
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -10714,7 +10779,10 @@ var _messageSlice$actions = messageSlice.actions,
   removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
   clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
   setOGMetadata = _messageSlice$actions.setOGMetadata,
-  updateOGMetadata = _messageSlice$actions.updateOGMetadata;
+  updateOGMetadata = _messageSlice$actions.updateOGMetadata,
+  setMessageMarkers = _messageSlice$actions.setMessageMarkers,
+  setMessagesMarkersLoadingState = _messageSlice$actions.setMessagesMarkersLoadingState,
+  updateMessagesMarkers = _messageSlice$actions.updateMessagesMarkers;
 var MessageReducer = messageSlice.reducer;
 
 var initialState$2 = {
@@ -11326,6 +11394,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,
@@ -11501,6 +11578,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';
@@ -11934,6 +12012,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';
@@ -14208,6 +14316,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:
@@ -14742,27 +14852,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) {
@@ -15660,7 +15771,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
           }]
@@ -15688,7 +15799,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) {
@@ -15710,151 +15821,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:
@@ -15865,7 +15973,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, {
@@ -15883,51 +15991,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:
@@ -15941,15 +16051,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;
@@ -15962,8 +16073,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:
@@ -15977,29 +16088,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) {
@@ -16014,7 +16124,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, {
@@ -16023,197 +16133,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);
         }
@@ -16224,7 +16371,7 @@ function updateChannel(action) {
           avatarUrl: channel.avatarUrl
         };
         if (!config.avatar) {
-          _context20.n = 3;
+          _context21.n = 3;
           break;
         }
         fileToUpload = {
@@ -16233,10 +16380,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;
@@ -16247,14 +16394,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,
@@ -16266,29 +16413,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) {
@@ -16300,180 +16447,113 @@ 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);
-      case 8:
-        return _context22.a(2);
-    }
-  }, _marked22, 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) {
-      case 0:
-        _action$payload = action.payload, state = _action$payload.state, channelId = _action$payload.channelId;
-        _context23.n = 1;
-        return call(getChannelFromMap, channelId);
-      case 1:
-        channel = _context23.v;
-        _context23.p = 2;
-        if (!channel) {
-          _context23.n = 5;
-          break;
-        }
-        if (!state) {
-          _context23.n = 4;
-          break;
-        }
-        _context23.n = 3;
-        return call(channel.startRecording);
-      case 3:
-        _context23.n = 5;
-        break;
-      case 4:
-        _context23.n = 5;
-        return call(channel.stopRecording);
-      case 5:
-        _context23.n = 7;
-        break;
-      case 6:
-        _context23.p = 6;
+        _context23.p = 7;
         _t24 = _context23.v;
-        log.error('ERROR in send recording', _t24);
-      case 7:
+        log.error('ERROR in send typing', _t24);
+      case 8:
         return _context23.a(2);
     }
-  }, _marked23, null, [[2, 6]]);
+  }, _marked23, null, [[3, 7]]);
 }
-function clearHistory(action) {
-  var payload, channelId, channel, activeChannelId, groupName, _t25;
+function sendRecording(action) {
+  var _action$payload, state, channelId, channel, _t25;
   return _regenerator().w(function (_context24) {
     while (1) switch (_context24.p = _context24.n) {
       case 0:
-        _context24.p = 0;
-        payload = action.payload;
-        channelId = payload.channelId;
+        _action$payload = action.payload, state = _action$payload.state, channelId = _action$payload.channelId;
         _context24.n = 1;
         return call(getChannelFromMap, channelId);
       case 1:
         channel = _context24.v;
+        _context24.p = 2;
         if (!channel) {
-          channel = getChannelFromAllChannels(channelId);
+          _context24.n = 5;
+          break;
         }
-        _context24.n = 2;
-        return call(getActiveChannelId);
-      case 2:
-        activeChannelId = _context24.v;
-        if (!channel) {
-          _context24.n = 7;
+        if (!state) {
+          _context24.n = 4;
           break;
         }
         _context24.n = 3;
-        return call(channel.deleteAllMessages);
+        return call(channel.startRecording);
       case 3:
-        _context24.n = 4;
-        return put(clearMessagesAC());
+        _context24.n = 5;
+        break;
       case 4:
-        removeMessagesFromMap(channelId);
-        if (channelId === activeChannelId) {
-          removeAllMessages();
-        }
         _context24.n = 5;
-        return put(clearSelectedMessagesAC());
+        return call(channel.stopRecording);
       case 5:
-        _context24.n = 6;
-        return put(updateChannelDataAC(channel.id, {
-          lastMessage: null,
-          newMessageCount: 0,
-          newMentionCount: 0
-        }));
-      case 6:
-        updateChannelOnAllChannels(channel.id, {
-          lastMessage: null,
-          newMessageCount: 0,
-          newMentionCount: 0
-        });
-        groupName = getChannelGroupName(channel);
         _context24.n = 7;
-        return put(updateSearchedChannelDataAC(channel.id, {
-          lastMessage: null,
-          newMessageCount: 0,
-          newMentionCount: 0
-        }, groupName));
-      case 7:
-        _context24.n = 9;
         break;
-      case 8:
-        _context24.p = 8;
+      case 6:
+        _context24.p = 6;
         _t25 = _context24.v;
-        log.error('ERROR in clear history', _t25);
-      case 9:
+        log.error('ERROR in send recording', _t25);
+      case 7:
         return _context24.a(2);
     }
-  }, _marked24, null, [[0, 8]]);
+  }, _marked24, null, [[2, 6]]);
 }
-function deleteAllMessages(action) {
+function clearHistory(action) {
   var payload, channelId, channel, activeChannelId, groupName, _t26;
   return _regenerator().w(function (_context25) {
     while (1) switch (_context25.p = _context25.n) {
@@ -16493,26 +16573,93 @@ function deleteAllMessages(action) {
       case 2:
         activeChannelId = _context25.v;
         if (!channel) {
-          _context25.n = 8;
+          _context25.n = 7;
           break;
         }
         _context25.n = 3;
+        return call(channel.deleteAllMessages);
+      case 3:
+        _context25.n = 4;
+        return put(clearMessagesAC());
+      case 4:
+        removeMessagesFromMap(channelId);
+        if (channelId === activeChannelId) {
+          removeAllMessages();
+        }
+        _context25.n = 5;
+        return put(clearSelectedMessagesAC());
+      case 5:
+        _context25.n = 6;
+        return put(updateChannelDataAC(channel.id, {
+          lastMessage: null,
+          newMessageCount: 0,
+          newMentionCount: 0
+        }));
+      case 6:
+        updateChannelOnAllChannels(channel.id, {
+          lastMessage: null,
+          newMessageCount: 0,
+          newMentionCount: 0
+        });
+        groupName = getChannelGroupName(channel);
+        _context25.n = 7;
+        return put(updateSearchedChannelDataAC(channel.id, {
+          lastMessage: null,
+          newMessageCount: 0,
+          newMentionCount: 0
+        }, groupName));
+      case 7:
+        _context25.n = 9;
+        break;
+      case 8:
+        _context25.p = 8;
+        _t26 = _context25.v;
+        log.error('ERROR in clear history', _t26);
+      case 9:
+        return _context25.a(2);
+    }
+  }, _marked25, null, [[0, 8]]);
+}
+function deleteAllMessages(action) {
+  var payload, channelId, channel, activeChannelId, groupName, _t27;
+  return _regenerator().w(function (_context26) {
+    while (1) switch (_context26.p = _context26.n) {
+      case 0:
+        _context26.p = 0;
+        payload = action.payload;
+        channelId = payload.channelId;
+        _context26.n = 1;
+        return call(getChannelFromMap, channelId);
+      case 1:
+        channel = _context26.v;
+        if (!channel) {
+          channel = getChannelFromAllChannels(channelId);
+        }
+        _context26.n = 2;
+        return call(getActiveChannelId);
+      case 2:
+        activeChannelId = _context26.v;
+        if (!channel) {
+          _context26.n = 8;
+          break;
+        }
+        _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,
@@ -16525,182 +16672,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) {
@@ -17123,6 +17273,12 @@ var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
 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 {
@@ -17193,7 +17349,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) {
@@ -17207,7 +17364,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;
           }
@@ -17367,7 +17524,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) {
@@ -17515,7 +17672,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) {
@@ -17723,7 +17880,7 @@ function sendTextMessage(action) {
         }) : [];
         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];
         }
@@ -17905,7 +18062,7 @@ 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];
         }
@@ -18191,7 +18348,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;
@@ -18450,7 +18607,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);
           });
@@ -19404,64 +19561,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),
@@ -26534,7 +26738,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,
@@ -26545,11 +26752,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) {
@@ -26619,7 +26822,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);
 
@@ -26884,6 +27087,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,
@@ -26895,6 +27099,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,
@@ -26902,6 +27108,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,
@@ -26922,6 +27129,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,
@@ -27050,8 +27258,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,
@@ -27063,7 +27283,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,
@@ -29325,7 +29545,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,
@@ -29391,6 +29614,9 @@ var AudioPlayer = function AudioPlayer(_ref) {
         }
       }
       wavesurfer.current.playPause();
+      if (!messagePlayed && incoming) {
+        dispatch(markVoiceMessageAsPlayedAC(channelId, [file.messageId]));
+      }
     }
   };
   useEffect(function () {
@@ -29568,7 +29794,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],
@@ -30087,7 +30316,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, {
@@ -31682,6 +31914,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,
@@ -31694,6 +31927,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,
@@ -31705,6 +31939,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,
@@ -31718,6 +31953,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,
@@ -31746,6 +31982,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,
@@ -31894,6 +32131,7 @@ var MessageBody = function MessageBody(_ref) {
     handleCopyMessage: handleCopyMessage,
     handleDeletePendingMessage: handleDeletePendingMessage,
     handleOpenForwardMessage: handleToggleForwardMessagePopup,
+    handleOpenInfoMessage: handleToggleInfoMessagePopupOpen,
     handleResendMessage: handleResendMessage,
     handleReplyMessage: _handleReplyMessage,
     handleReportMessage: handleToggleReportPopupOpen,
@@ -31945,7 +32183,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,
@@ -32065,7 +32307,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",
@@ -32145,7 +32390,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"])), 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,
@@ -32205,6 +32869,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,
@@ -32233,6 +32899,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,
@@ -32243,6 +32910,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,
@@ -32294,7 +32962,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],
@@ -32316,29 +32986,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);
@@ -32374,6 +33047,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));
@@ -32631,6 +33308,7 @@ var Message$1 = function Message(_ref) {
     emojisPopupPosition: emojisPopupPosition,
     handleSetMessageForEdit: toggleEditMode,
     handleResendMessage: handleResendMessage,
+    handleOpenInfoMessage: handleToggleInfoMessagePopupOpen,
     handleOpenDeleteMessage: handleToggleDeleteMessagePopup,
     handleOpenForwardMessage: handleToggleForwardMessagePopup,
     handleCopyMessage: handleCopyMessage,
@@ -32683,6 +33361,7 @@ var Message$1 = function Message(_ref) {
     replyMessageInThread: replyMessageInThread,
     deleteMessage: deleteMessage,
     selectMessage: selectMessage,
+    showInfoMessage: showInfoMessage,
     allowEditDeleteIncomingMessage: allowEditDeleteIncomingMessage,
     forwardMessage: forwardMessage,
     reportMessage: reportMessage,
@@ -32707,6 +33386,7 @@ var Message$1 = function Message(_ref) {
     selectIconOrder: selectIconOrder,
     starIconOrder: starIconOrder,
     reportIconOrder: reportIconOrder,
+    infoIconOrder: infoIconOrder,
     reactionIconTooltipText: reactionIconTooltipText,
     editIconTooltipText: editIconTooltipText,
     copyIconTooltipText: copyIconTooltipText,
@@ -32717,6 +33397,7 @@ var Message$1 = function Message(_ref) {
     selectIconTooltipText: selectIconTooltipText,
     starIconTooltipText: starIconTooltipText,
     reportIconTooltipText: reportIconTooltipText,
+    infoIconTooltipText: infoIconTooltipText,
     messageActionIconsColor: messageActionIconsColor,
     messageStatusSize: messageStatusSize,
     messageStatusColor: messageStatusColor,
@@ -32750,6 +33431,7 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow: setMessageActionsShow,
     closeMessageActions: closeMessageActions,
     handleToggleForwardMessagePopup: handleToggleForwardMessagePopup,
+    handleToggleInfoMessagePopupOpen: handleToggleInfoMessagePopupOpen,
     handleReplyMessage: handleReplyMessage,
     handleToggleDeleteMessagePopup: handleToggleDeleteMessagePopup,
     handleToggleReportPopupOpen: handleToggleReportPopupOpen,
@@ -32857,16 +33539,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';
@@ -32885,26 +33573,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  overflow: hidden;\n  height: ", ";\n  transition: all 0.3s;\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';
@@ -32923,10 +33611,10 @@ var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b =
 }, 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) {
@@ -32971,7 +33659,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,
@@ -33048,6 +33736,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,
@@ -33094,6 +33783,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,
@@ -33101,6 +33791,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,
@@ -33153,7 +33844,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],
@@ -33896,6 +34589,7 @@ var MessageList = function MessageList(_ref2) {
       replyMessageInThread: replyMessageInThread,
       deleteMessage: deleteMessage,
       selectMessage: selectMessage,
+      showInfoMessage: showInfoMessage,
       allowEditDeleteIncomingMessage: allowEditDeleteIncomingMessage,
       reportMessage: reportMessage,
       reactionIcon: reactionIcon,
@@ -33921,6 +34615,7 @@ var MessageList = function MessageList(_ref2) {
       replyInThreadIconOrder: replyInThreadIconOrder,
       forwardIconOrder: forwardIconOrder,
       deleteIconOrder: deleteIconOrder,
+      infoIconOrder: infoIconOrder,
       selectIconOrder: selectIconOrder,
       starIconOrder: starIconOrder,
       reportIconOrder: reportIconOrder,
@@ -33931,6 +34626,7 @@ var MessageList = function MessageList(_ref2) {
       replyInThreadIconTooltipText: replyInThreadIconTooltipText,
       forwardIconTooltipText: forwardIconTooltipText,
       deleteIconTooltipText: deleteIconTooltipText,
+      infoIconTooltipText: infoIconTooltipText,
       selectIconTooltipText: selectIconTooltipText,
       starIconTooltipText: starIconTooltipText,
       reportIconTooltipText: reportIconTooltipText,
@@ -33980,7 +34676,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,
@@ -34010,14 +34707,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;
@@ -34036,19 +34733,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';
@@ -34061,16 +34758,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;
 });
 
@@ -34110,6 +34807,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,
@@ -34156,6 +34854,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,
@@ -34166,6 +34865,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,
@@ -34216,7 +34916,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,
@@ -34247,6 +34949,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     forwardMessage: forwardMessage,
     deleteMessage: deleteMessage,
     selectMessage: selectMessage,
+    showInfoMessage: showInfoMessage,
     reportMessage: reportMessage,
     reactionIcon: reactionIcon,
     editIcon: editIcon,
@@ -34289,6 +34992,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     forwardIconOrder: forwardIconOrder,
     deleteIconOrder: deleteIconOrder,
     selectIconOrder: selectIconOrder,
+    infoIconOrder: infoIconOrder,
     starIconOrder: starIconOrder,
     reportIconOrder: reportIconOrder,
     reactionIconTooltipText: reactionIconTooltipText,
@@ -34301,6 +35005,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     selectIconTooltipText: selectIconTooltipText,
     starIconTooltipText: starIconTooltipText,
     reportIconTooltipText: reportIconTooltipText,
+    infoIconTooltipText: infoIconTooltipText,
     messageActionIconsColor: messageActionIconsColor,
     dateDividerFontSize: dateDividerFontSize,
     dateDividerTextColor: dateDividerTextColor,
@@ -34343,7 +35048,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeColor: messageTimeColor,
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
     hiddenMessagesProperties: hiddenMessagesProperties,
-    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
+    showInfoMessageProps: showInfoMessageProps
   }));
 };
 
@@ -34455,7 +35161,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 = {
@@ -34735,8 +35441,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;
@@ -34745,11 +35451,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;
 });
 
@@ -34882,7 +35588,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];
@@ -35263,10 +35969,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  ";
@@ -35589,7 +36295,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) {
@@ -35784,7 +36490,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');
@@ -35805,23 +36511,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;
 });
 
@@ -36022,7 +36728,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,
@@ -36485,29 +37191,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 () {
@@ -36586,10 +37283,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';
@@ -36598,10 +37295,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) {
@@ -36613,10 +37310,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) {
@@ -36626,14 +37323,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;
@@ -36659,7 +37356,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(),
@@ -38246,10 +38943,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 || '';
@@ -38266,7 +38963,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';
@@ -38281,19 +38978,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;
@@ -38302,7 +38999,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';
@@ -38598,7 +39295,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,
@@ -39062,21 +39759,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([""])));
@@ -39156,7 +39853,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,
@@ -39256,14 +39953,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,
@@ -39566,18 +40263,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;
@@ -39588,13 +40285,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(),
@@ -39640,8 +40337,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() {
@@ -39697,7 +40394,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,
@@ -39814,30 +40511,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';
@@ -39876,7 +40573,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,
@@ -39907,25 +40604,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,
@@ -39950,7 +40647,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() {
@@ -40006,7 +40703,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,
@@ -40131,32 +40828,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,
@@ -40187,9 +40884,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,
@@ -40338,8 +41035,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';
@@ -40357,17 +41054,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,
@@ -40622,7 +41319,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,
@@ -41009,17 +41706,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';
@@ -41028,37 +41725,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,
@@ -41287,7 +41984,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() {
@@ -41311,7 +42008,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,
@@ -41394,7 +42091,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";
@@ -41405,7 +42102,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';
@@ -41448,7 +42145,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,
@@ -41591,7 +42288,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";
@@ -41602,7 +42299,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';