sceyt-chat-react-uikit 1.7.8-beta.9 → 1.7.8

package/index.modern.js

@@ -9027,6 +9027,29 @@ var handleVoteDetails = function handleVoteDetails(voteDetails, message) {
     voteDetails: newVoteDetails
   });
 };
+var _extractTextFromReactElement = function extractTextFromReactElement(element) {
+  if (typeof element === 'string') {
+    return element;
+  }
+  if (element === null || element === undefined) {
+    return '';
+  }
+  if (Array.isArray(element)) {
+    return element.map(_extractTextFromReactElement).join('');
+  }
+  if (typeof element === 'object' && element.props) {
+    if (typeof element.props.children === 'string') {
+      return element.props.children;
+    }
+    if (Array.isArray(element.props.children)) {
+      return element.props.children.map(_extractTextFromReactElement).join('');
+    }
+    if (element.props.children) {
+      return _extractTextFromReactElement(element.props.children);
+    }
+  }
+  return '';
+};
 var checkIsTypeKeyPressed = function checkIsTypeKeyPressed(code) {
   return !(code === 'Enter' || code === 'NumpadEnter' || code === 'Backspace' || code === 'Delete' || code === 'ArrowLeft' || code === 'ArrowRight' || code === 'ArrowUp' || code === 'ArrowDown' || code === 'PageUp' || code === 'PageDown' || code === 'Home' || code === 'End' || code === 'Insert' || code === 'Escape' || code === 'Tab' || code === 'F1' || code === 'F2' || code === 'F3' || code === 'F4' || code === 'F5' || code === 'F6' || code === 'F7' || code === 'F8' || code === 'F9' || code === 'F10' || code === 'F11' || code === 'F12' || code === 'CapsLock' || code === 'Shift' || code === 'ShiftLeft' || code === 'ShiftRight' || code === 'Control' || code === 'ControlLeft' || code === 'ControlRight' || code === 'Alt' || code === 'AltLeft' || code === 'AltRight' || code === 'MetaLeft' || code === 'MetaRight' || code === 'Space' || code === 'Enter' || code === 'NumpadEnter' || code === 'Backspace' || code === 'Delete' || code === 'ArrowLeft' || code === 'ArrowRight' || code === 'ArrowUp' || code === 'ArrowDown' || code === 'PageUp' || code === 'PageDown' || code === 'Home' || code === 'End' || code === 'Insert' || code === 'Escape' || code === 'Tab' || code === 'F1' || code === 'F2' || code === 'F3' || code === 'F4' || code === 'F5' || code === 'F6' || code === 'F7' || code === 'F8' || code === 'F9' || code === 'F10' || code === 'F11' || code === 'F12' || code === 'Shift');
 };
@@ -9333,7 +9356,11 @@ var initialState = {
   draggedAttachments: [],
   draftIsRemoved: '',
   channelInviteKeys: {},
-  joinableChannel: null
+  joinableChannel: null,
+  channelInviteKeyAvailable: true,
+  mutualChannels: [],
+  mutualChannelsHasNext: false,
+  mutualChannelsLoadingState: null
 };
 var channelSlice = createSlice({
   name: 'channels',
@@ -9639,6 +9666,22 @@ var channelSlice = createSlice({
     },
     setJoinableChannel: function setJoinableChannel(state, action) {
       state.joinableChannel = action.payload.channel;
+    },
+    setChannelInviteKeyAvailable: function setChannelInviteKeyAvailable(state, action) {
+      state.channelInviteKeyAvailable = action.payload.available;
+    },
+    setMutualChannels: function setMutualChannels(state, action) {
+      if (action.payload.channels.length === 0 && state.mutualChannels.length > 0) {
+        state.mutualChannels = [];
+      } else {
+        state.mutualChannels = [].concat(state.mutualChannels, action.payload.channels);
+      }
+    },
+    setMutualChannelsHasNext: function setMutualChannelsHasNext(state, action) {
+      state.mutualChannelsHasNext = action.payload.hasNext;
+    },
+    setMutualChannelsLoadingState: function setMutualChannelsLoadingState(state, action) {
+      state.mutualChannelsLoadingState = action.payload.state;
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -9683,7 +9726,11 @@ var _channelSlice$actions = channelSlice.actions,
   setHideChannelList = _channelSlice$actions.setHideChannelList,
   setDraftIsRemoved = _channelSlice$actions.setDraftIsRemoved,
   setChannelInviteKeys = _channelSlice$actions.setChannelInviteKeys,
-  setJoinableChannel = _channelSlice$actions.setJoinableChannel;
+  setJoinableChannel = _channelSlice$actions.setJoinableChannel,
+  setChannelInviteKeyAvailable = _channelSlice$actions.setChannelInviteKeyAvailable,
+  setMutualChannels = _channelSlice$actions.setMutualChannels,
+  setMutualChannelsHasNext = _channelSlice$actions.setMutualChannelsHasNext,
+  setMutualChannelsLoadingState = _channelSlice$actions.setMutualChannelsLoadingState;
 var ChannelReducer = channelSlice.reducer;
 
 var CREATE_CHANNEL = 'CREATE_CHANNEL';
@@ -9723,6 +9770,8 @@ var DESTROY_SESSION = 'DESTROY_SESSION';
 var GET_CHANNEL_BY_INVITE_KEY = 'GET_CHANNEL_BY_INVITE_KEY';
 var JOIN_TO_CHANNEL_WITH_INVITE_KEY = 'JOIN_TO_CHANNEL_WITH_INVITE_KEY';
 var SET_MESSAGE_RETENTION_PERIOD = 'SET_MESSAGE_RETENTION_PERIOD';
+var GET_CHANNELS_WITH_USER = 'GET_CHANNELS_WITH_USER';
+var LOAD_MORE_MUTUAL_CHANNELS = 'LOAD_MORE_MUTUAL_CHANNELS';
 var CHANNEL_EVENT_TYPES = {
   POLL_ADDED: 'POLL_ADDED',
   POLL_DELETED: 'POLL_DELETED',
@@ -9743,10 +9792,6 @@ var CHANNEL_EVENT_TYPES = {
   REACTION_ADDED: 'REACTION_ADDED',
   REACTION_DELETED: 'REACTION_DELETED',
   EDIT_MESSAGE: 'EDIT_MESSAGE',
-  START_TYPING: 'START_TYPING',
-  STOP_TYPING: 'STOP_TYPING',
-  START_RECORDING: 'START_RECORDING',
-  STOP_RECORDING: 'STOP_RECORDING',
   MESSAGE_MARKERS_RECEIVED: 'MESSAGE_MARKERS_RECEIVED',
   UNREAD_MESSAGES_INFO: 'UNREAD_MESSAGES_INFO',
   HIDE: 'HIDE',
@@ -11976,7 +12021,13 @@ var initialState$2 = {
   activeChannelMembers: [],
   roles: [],
   getRolesFail: undefined,
-  rolesMap: {}
+  rolesMap: {},
+  restricted: {
+    isRestricted: false,
+    fromChannel: false,
+    members: []
+  },
+  openInviteModal: false
 };
 var memberSlice = createSlice({
   name: 'members',
@@ -12059,6 +12110,18 @@ var memberSlice = createSlice({
     },
     setMembersHasNext: function setMembersHasNext(state, action) {
       state.membersHasNext = action.payload.hasNext;
+    },
+    setActionIsRestricted: function setActionIsRestricted(state, action) {
+      var _action$payload2 = action.payload,
+        isRestricted = _action$payload2.isRestricted,
+        fromChannel = _action$payload2.fromChannel,
+        members = _action$payload2.members;
+      state.restricted.isRestricted = isRestricted;
+      state.restricted.fromChannel = fromChannel;
+      state.restricted.members = members;
+    },
+    setOpenInviteModal: function setOpenInviteModal(state, action) {
+      state.openInviteModal = action.payload.open;
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -12076,7 +12139,9 @@ var _memberSlice$actions = memberSlice.actions,
   setMembersLoadingState = _memberSlice$actions.setMembersLoadingState,
   getRolesSuccess = _memberSlice$actions.getRolesSuccess,
   getRolesFail = _memberSlice$actions.getRolesFail,
-  setMembersHasNext = _memberSlice$actions.setMembersHasNext;
+  setMembersHasNext = _memberSlice$actions.setMembersHasNext,
+  setActionIsRestricted = _memberSlice$actions.setActionIsRestricted,
+  setOpenInviteModal = _memberSlice$actions.setOpenInviteModal;
 var MembersReducer = memberSlice.reducer;
 
 var SET_CONTACT_LOADING_STATE = 'SET_CONTACT_LOADING_STATE';
@@ -12139,7 +12204,7 @@ var userSlice = createSlice({
       state.usersLoadingState = action.payload.state;
     },
     updateUserMap: function updateUserMap(state, action) {
-      state.updatedUserMap = action.payload.usersMap;
+      state.updatedUserMap = _extends({}, state.updatedUserMap, action.payload.usersMap);
     },
     setContacts: function setContacts(state, action) {
       var contacts = action.payload.contacts;
@@ -12569,6 +12634,11 @@ var switchChannelActionAC = function switchChannelActionAC(channel, updateActive
     }
   };
 };
+var setChannelInviteKeyAvailableAC = function setChannelInviteKeyAvailableAC(available) {
+  return setChannelInviteKeyAvailable({
+    available: available
+  });
+};
 var updateChannelAC = function updateChannelAC(channelId, config) {
   return {
     type: UPDATE_CHANNEL,
@@ -12868,6 +12938,37 @@ var setMessageRetentionPeriodAC = function setMessageRetentionPeriodAC(channelId
     }
   };
 };
+var getChannelsWithUserAC = function getChannelsWithUserAC(userId) {
+  return {
+    type: GET_CHANNELS_WITH_USER,
+    payload: {
+      userId: userId
+    }
+  };
+};
+var setMutualChannelsAC = function setMutualChannelsAC(channels) {
+  return setMutualChannels({
+    channels: channels
+  });
+};
+var setMutualChannelsHasNextAC = function setMutualChannelsHasNextAC(hasNext) {
+  return setMutualChannelsHasNext({
+    hasNext: hasNext
+  });
+};
+var setMutualChannelsLoadingStateAC = function setMutualChannelsLoadingStateAC(state) {
+  return setMutualChannelsLoadingState({
+    state: state
+  });
+};
+var loadMoreMutualChannelsAC = function loadMoreMutualChannelsAC(limit) {
+  return {
+    type: LOAD_MORE_MUTUAL_CHANNELS,
+    payload: {
+      limit: limit
+    }
+  };
+};
 
 var getUsersAC = function getUsersAC(params) {
   return {
@@ -13277,6 +13378,18 @@ var setMembersHasNextAC = function setMembersHasNextAC(hasNext) {
     hasNext: hasNext
   });
 };
+var setActionIsRestrictedAC = function setActionIsRestrictedAC(isRestricted, fromChannel, members) {
+  return setActionIsRestricted({
+    isRestricted: isRestricted,
+    fromChannel: fromChannel,
+    members: members || []
+  });
+};
+var setOpenInviteModalAC = function setOpenInviteModalAC(open) {
+  return setOpenInviteModal({
+    open: open
+  });
+};
 
 var connectionStatusSelector = function connectionStatusSelector(store) {
   return store.UserReducer.connectionStatus;
@@ -13299,6 +13412,9 @@ var usersLoadingStateSelector = function usersLoadingStateSelector(store) {
 var browserTabIsActiveSelector = function browserTabIsActiveSelector(store) {
   return store.UserReducer.browserTabIsActive;
 };
+var usersMapSelector = function usersMapSelector(store) {
+  return store.UserReducer.updatedUserMap;
+};
 
 var _path;
 function _extends$1() {
@@ -14026,6 +14142,15 @@ var MessageStatusIcon = function MessageStatusIcon(_ref) {
     size = _ref.size,
     accentColor = _ref.accentColor;
   switch (messageStatus) {
+    case MESSAGE_DELIVERY_STATUS.PLAYED:
+      return messageStatusDisplayingType === 'ticks' ? (/*#__PURE__*/React__default.createElement(ReadIconWrapper, {
+        width: size,
+        height: size,
+        color: readIconColor || accentColor
+      })) : (/*#__PURE__*/React__default.createElement(StatusText, {
+        fontSize: size,
+        color: color
+      }, "\u2022 Seen"));
     case MESSAGE_DELIVERY_STATUS.READ:
       return messageStatusDisplayingType === 'ticks' ? (/*#__PURE__*/React__default.createElement(ReadIconWrapper, {
         width: size,
@@ -14221,6 +14346,147 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     return text;
   }
 };
+var _getNodeTextLength = function getNodeTextLength(node) {
+  if (!node) return 0;
+  if (typeof node === 'string') return node.length;
+  if (typeof node === 'number') return String(node).length;
+  if (Array.isArray(node)) {
+    return node.reduce(function (sum, child) {
+      return sum + _getNodeTextLength(child);
+    }, 0);
+  }
+  if (node.props && node.props.children) {
+    return _getNodeTextLength(node.props.children);
+  }
+  return 0;
+};
+var _truncateNodeText3 = function truncateNodeText(node, maxLength) {
+  if (!node) return {
+    node: node,
+    usedLength: 0
+  };
+  if (typeof node === 'string') {
+    if (node.length > maxLength) {
+      return {
+        node: node.slice(0, maxLength),
+        usedLength: maxLength
+      };
+    }
+    return {
+      node: node,
+      usedLength: node.length
+    };
+  }
+  if (typeof node === 'number') {
+    var str = String(node);
+    if (str.length > maxLength) {
+      return {
+        node: str.slice(0, maxLength),
+        usedLength: maxLength
+      };
+    }
+    return {
+      node: node,
+      usedLength: str.length
+    };
+  }
+  if (Array.isArray(node)) {
+    var result = [];
+    var remaining = maxLength;
+    for (var _iterator = _createForOfIteratorHelperLoose(node), _step; !(_step = _iterator()).done;) {
+      var child = _step.value;
+      if (remaining <= 0) break;
+      var _truncateNodeText = _truncateNodeText3(child, remaining),
+        truncatedChild = _truncateNodeText.node,
+        usedLength = _truncateNodeText.usedLength;
+      result.push(truncatedChild);
+      remaining -= usedLength;
+    }
+    return {
+      node: result,
+      usedLength: maxLength - remaining
+    };
+  }
+  if (node.props && node.props.children !== undefined) {
+    var _truncateNodeText2 = _truncateNodeText3(node.props.children, maxLength),
+      truncatedChildren = _truncateNodeText2.node,
+      _usedLength = _truncateNodeText2.usedLength;
+    return {
+      node: _extends({}, node, {
+        props: _extends({}, node.props, {
+          children: truncatedChildren
+        })
+      }),
+      usedLength: _usedLength
+    };
+  }
+  return {
+    node: node,
+    usedLength: 0
+  };
+};
+var trimReactMessage = function trimReactMessage(parts, limit) {
+  if (typeof limit !== 'number' || limit < 0) {
+    return {
+      result: parts,
+      truncated: false
+    };
+  }
+  if (typeof parts === 'string') {
+    if (parts.length > limit) {
+      return {
+        result: parts.slice(0, limit) + '...',
+        truncated: true
+      };
+    }
+    return {
+      result: parts,
+      truncated: false
+    };
+  }
+  var remaining = limit;
+  var truncated = false;
+  var result = [];
+  for (var _iterator2 = _createForOfIteratorHelperLoose(parts), _step2; !(_step2 = _iterator2()).done;) {
+    var part = _step2.value;
+    if (typeof part === 'string') {
+      if (remaining <= 0) {
+        truncated = true;
+        break;
+      }
+      if (part.length > remaining) {
+        result.push(part.slice(0, remaining));
+        remaining = 0;
+        truncated = true;
+        break;
+      } else {
+        result.push(part);
+        remaining -= part.length;
+      }
+    } else if (part && typeof part === 'object') {
+      if (remaining <= 0) {
+        truncated = true;
+        break;
+      }
+      var nodeTextLength = _getNodeTextLength(part);
+      if (nodeTextLength > remaining) {
+        var _truncateNodeText4 = _truncateNodeText3(part, remaining),
+          truncatedNode = _truncateNodeText4.node;
+        result.push(truncatedNode);
+        remaining = 0;
+        truncated = true;
+        break;
+      } else {
+        result.push(part);
+        remaining -= nodeTextLength;
+      }
+    }
+  }
+  return {
+    result: result,
+    truncated: truncated
+  };
+};
 
 var _marked = /*#__PURE__*/_regenerator().m(updateActiveChannelMembersAdd),
   _marked2 = /*#__PURE__*/_regenerator().m(updateActiveChannelMembersRemove);
@@ -15446,7 +15712,7 @@ function watchForEvents() {
                 }
                 return _context.a(3, 183);
               case 99:
-                console.log('CHANNEL_EVENT_TYPES.POLL_ADDED ... ');
+                log.info('CHANNEL_EVENT_TYPES.POLL_ADDED ... ');
                 _channel10 = args.channel, pollDetails = args.pollDetails, _messageId = args.messageId;
                 pollDetailsData = pollDetails;
                 _context.n = 100;
@@ -15531,7 +15797,7 @@ function watchForEvents() {
               case 108:
                 return _context.a(3, 183);
               case 109:
-                console.log('CHANNEL_EVENT_TYPES.POLL_DELETED ... ');
+                log.info('CHANNEL_EVENT_TYPES.POLL_DELETED ... ');
                 _channel11 = args.channel, _pollDetails = args.pollDetails, _messageId2 = args.messageId;
                 _pollDetailsData = _pollDetails;
                 _context.n = 110;
@@ -15591,7 +15857,7 @@ function watchForEvents() {
               case 116:
                 return _context.a(3, 183);
               case 117:
-                console.log('CHANNEL_EVENT_TYPES.POLL_RETRACTED ... ');
+                log.info('CHANNEL_EVENT_TYPES.POLL_RETRACTED ... ');
                 _channel12 = args.channel, _pollDetails2 = args.pollDetails, _messageId3 = args.messageId;
                 _context.n = 118;
                 return call(getActiveChannelId);
@@ -15650,7 +15916,7 @@ function watchForEvents() {
               case 124:
                 return _context.a(3, 183);
               case 125:
-                console.log('CHANNEL_EVENT_TYPES.POLL_CLOSED ... ');
+                log.info('CHANNEL_EVENT_TYPES.POLL_CLOSED ... ');
                 _channel13 = args.channel, _messageId4 = args.messageId;
                 _context.n = 126;
                 return call(getActiveChannelId);
@@ -16073,7 +16339,9 @@ var _marked$2 = /*#__PURE__*/_regenerator().m(createChannel),
   _marked33 = /*#__PURE__*/_regenerator().m(getChannelByInviteKey),
   _marked34 = /*#__PURE__*/_regenerator().m(joinChannelWithInviteKey),
   _marked35 = /*#__PURE__*/_regenerator().m(setMessageRetentionPeriod),
-  _marked36 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
+  _marked36 = /*#__PURE__*/_regenerator().m(getChannelsWithUser),
+  _marked37 = /*#__PURE__*/_regenerator().m(loadMoreMutualChannels),
+  _marked38 = /*#__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) {
@@ -16249,13 +16517,20 @@ function createChannel(action) {
         _context.n = 16;
         return call(setActiveChannelId, createdChannel.id);
       case 16:
-        _context.n = 18;
+        _context.n = 19;
         break;
       case 17:
         _context.p = 17;
         _t = _context.v;
-        log.error(_t, 'Error on create channel');
+        if (!(_t.code === 1041)) {
+          _context.n = 18;
+          break;
+        }
+        _context.n = 18;
+        return put(setActionIsRestrictedAC(true, false, null));
       case 18:
+        log.error(_t, 'Error on create channel');
+      case 19:
         return _context.a(2);
     }
   }, _marked$2, null, [[0, 17]]);
@@ -18304,13 +18579,20 @@ function getChannelByInviteKey(action) {
       case 4:
         window.history.pushState({}, '', window.location.pathname);
       case 5:
-        _context33.n = 7;
+        _context33.n = 8;
         break;
       case 6:
         _context33.p = 6;
         _t33 = _context33.v;
-        log.error('ERROR in get channel by invite key', _t33);
+        if (!(_t33.code === 1109)) {
+          _context33.n = 7;
+          break;
+        }
+        _context33.n = 7;
+        return put(setChannelInviteKeyAvailableAC(false));
       case 7:
+        log.error('ERROR in get channel by invite key', _t33);
+      case 8:
         return _context33.a(2);
     }
   }, _marked33, null, [[0, 6]]);
@@ -18412,124 +18694,250 @@ function setMessageRetentionPeriod(action) {
     }
   }, _marked35, null, [[0, 5]]);
 }
-function ChannelsSaga() {
+function getChannelsWithUser(action) {
+  var payload, userId, _SceytChatClient10, channelsQueryBuilder, channelsQuery, channelsData, channels, _t36;
   return _regenerator().w(function (_context36) {
-    while (1) switch (_context36.n) {
+    while (1) switch (_context36.p = _context36.n) {
       case 0:
         _context36.n = 1;
-        return takeLatest(CREATE_CHANNEL, createChannel);
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
         _context36.n = 2;
-        return takeLatest(GET_CHANNELS, getChannels);
+        return put(setMutualChannelsAC([]));
       case 2:
+        _context36.p = 2;
+        payload = action.payload;
+        userId = payload.userId;
+        _SceytChatClient10 = getClient();
+        channelsQueryBuilder = new _SceytChatClient10.ChannelListQueryBuilder();
+        channelsQueryBuilder.memberCount(0);
+        channelsQueryBuilder.setMutualWithUserId(userId);
+        channelsQueryBuilder.limit(15);
         _context36.n = 3;
-        return takeLatest(SEARCH_CHANNELS, searchChannels);
+        return call(channelsQueryBuilder.build);
       case 3:
+        channelsQuery = _context36.v;
+        query.mutualChannelsQuery = channelsQuery;
         _context36.n = 4;
-        return takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
+        return call(channelsQuery.loadNextPage);
       case 4:
+        channelsData = _context36.v;
+        channels = channelsData.channels;
+        if (!channelsData.hasNext) {
+          _context36.n = 6;
+          break;
+        }
         _context36.n = 5;
-        return takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
+        return put(setMutualChannelsHasNextAC(true));
       case 5:
-        _context36.n = 6;
-        return takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
+        _context36.n = 7;
+        break;
       case 6:
         _context36.n = 7;
-        return takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
+        return put(setMutualChannelsHasNextAC(false));
       case 7:
         _context36.n = 8;
-        return takeEvery(SWITCH_CHANNEL, switchChannel);
+        return put(setMutualChannelsAC(channels));
       case 8:
-        _context36.n = 9;
-        return takeLatest(LEAVE_CHANNEL, leaveChannel);
-      case 9:
         _context36.n = 10;
-        return takeLatest(DELETE_CHANNEL, deleteChannel);
+        break;
+      case 9:
+        _context36.p = 9;
+        _t36 = _context36.v;
+        log.error('ERROR in get groups in common', _t36);
       case 10:
+        _context36.p = 10;
         _context36.n = 11;
-        return takeLatest(BLOCK_CHANNEL, blockChannel);
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADED));
       case 11:
-        _context36.n = 12;
-        return takeLatest(UPDATE_CHANNEL, updateChannel);
+        return _context36.f(10);
       case 12:
-        _context36.n = 13;
-        return takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
+        return _context36.a(2);
+    }
+  }, _marked36, null, [[2, 9, 10, 12]]);
+}
+function loadMoreMutualChannels(action) {
+  var payload, limit, mutualChannelsQuery, channelsData, _t37;
+  return _regenerator().w(function (_context37) {
+    while (1) switch (_context37.p = _context37.n) {
+      case 0:
+        _context37.n = 1;
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADING));
+      case 1:
+        _context37.p = 1;
+        payload = action.payload;
+        limit = payload.limit;
+        mutualChannelsQuery = query.mutualChannelsQuery;
+        if (mutualChannelsQuery) {
+          _context37.n = 2;
+          break;
+        }
+        return _context37.a(2);
+      case 2:
+        if (limit) {
+          mutualChannelsQuery.limit = limit;
+        }
+        _context37.n = 3;
+        return call(mutualChannelsQuery.loadNextPage);
+      case 3:
+        channelsData = _context37.v;
+        if (!channelsData.hasNext) {
+          _context37.n = 5;
+          break;
+        }
+        _context37.n = 4;
+        return put(setMutualChannelsHasNextAC(true));
+      case 4:
+        _context37.n = 6;
+        break;
+      case 5:
+        _context37.n = 6;
+        return put(setMutualChannelsHasNextAC(false));
+      case 6:
+        _context37.n = 7;
+        return put(setMutualChannelsAC(channelsData.channels));
+      case 7:
+        _context37.n = 9;
+        break;
+      case 8:
+        _context37.p = 8;
+        _t37 = _context37.v;
+        log.error('ERROR in load more mutual channels', _t37);
+      case 9:
+        _context37.p = 9;
+        _context37.n = 10;
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADED));
+      case 10:
+        return _context37.f(9);
+      case 11:
+        return _context37.a(2);
+    }
+  }, _marked37, null, [[1, 8, 9, 11]]);
+}
+function ChannelsSaga() {
+  return _regenerator().w(function (_context38) {
+    while (1) switch (_context38.n) {
+      case 0:
+        _context38.n = 1;
+        return takeLatest(CREATE_CHANNEL, createChannel);
+      case 1:
+        _context38.n = 2;
+        return takeLatest(GET_CHANNELS, getChannels);
+      case 2:
+        _context38.n = 3;
+        return takeLatest(SEARCH_CHANNELS, searchChannels);
+      case 3:
+        _context38.n = 4;
+        return takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
+      case 4:
+        _context38.n = 5;
+        return takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
+      case 5:
+        _context38.n = 6;
+        return takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
+      case 6:
+        _context38.n = 7;
+        return takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
+      case 7:
+        _context38.n = 8;
+        return takeLatest(GET_CHANNELS_WITH_USER, getChannelsWithUser);
+      case 8:
+        _context38.n = 9;
+        return takeLatest(LOAD_MORE_MUTUAL_CHANNELS, loadMoreMutualChannels);
+      case 9:
+        _context38.n = 10;
+        return takeEvery(SWITCH_CHANNEL, switchChannel);
+      case 10:
+        _context38.n = 11;
+        return takeLatest(LEAVE_CHANNEL, leaveChannel);
+      case 11:
+        _context38.n = 12;
+        return takeLatest(DELETE_CHANNEL, deleteChannel);
+      case 12:
+        _context38.n = 13;
+        return takeLatest(BLOCK_CHANNEL, blockChannel);
       case 13:
-        _context36.n = 14;
-        return takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
+        _context38.n = 14;
+        return takeLatest(UPDATE_CHANNEL, updateChannel);
       case 14:
-        _context36.n = 15;
-        return takeLatest(MARK_VOICE_MESSAGE_AS_PLAYED, markVoiceMessageAsPlayed);
+        _context38.n = 15;
+        return takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
       case 15:
-        _context36.n = 16;
-        return takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
+        _context38.n = 16;
+        return takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
       case 16:
-        _context36.n = 17;
-        return takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
+        _context38.n = 17;
+        return takeLatest(MARK_VOICE_MESSAGE_AS_PLAYED, markVoiceMessageAsPlayed);
       case 17:
-        _context36.n = 18;
-        return takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
+        _context38.n = 18;
+        return takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
       case 18:
-        _context36.n = 19;
-        return takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
+        _context38.n = 19;
+        return takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
       case 19:
-        _context36.n = 20;
-        return takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
+        _context38.n = 20;
+        return takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
       case 20:
-        _context36.n = 21;
-        return takeLatest(CHECK_USER_STATUS, checkUsersStatus);
+        _context38.n = 21;
+        return takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
       case 21:
-        _context36.n = 22;
-        return takeLatest(SEND_TYPING, sendTyping);
+        _context38.n = 22;
+        return takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
       case 22:
-        _context36.n = 23;
-        return takeLatest(SEND_RECORDING, sendRecording);
+        _context38.n = 23;
+        return takeLatest(CHECK_USER_STATUS, checkUsersStatus);
       case 23:
-        _context36.n = 24;
-        return takeLatest(PIN_CHANNEL, pinChannel);
+        _context38.n = 24;
+        return takeLatest(SEND_TYPING, sendTyping);
       case 24:
-        _context36.n = 25;
-        return takeLatest(UNPIN_CHANNEL, unpinChannel);
+        _context38.n = 25;
+        return takeLatest(SEND_RECORDING, sendRecording);
       case 25:
-        _context36.n = 26;
-        return takeLatest(CLEAR_HISTORY, clearHistory);
+        _context38.n = 26;
+        return takeLatest(PIN_CHANNEL, pinChannel);
       case 26:
-        _context36.n = 27;
-        return takeLatest(JOIN_TO_CHANNEL, joinChannel);
+        _context38.n = 27;
+        return takeLatest(UNPIN_CHANNEL, unpinChannel);
       case 27:
-        _context36.n = 28;
-        return takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
+        _context38.n = 28;
+        return takeLatest(CLEAR_HISTORY, clearHistory);
       case 28:
-        _context36.n = 29;
-        return takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
+        _context38.n = 29;
+        return takeLatest(JOIN_TO_CHANNEL, joinChannel);
       case 29:
-        _context36.n = 30;
-        return takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
+        _context38.n = 30;
+        return takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
       case 30:
-        _context36.n = 31;
-        return takeLatest(CREATE_CHANNEL_INVITE_KEY, createChannelInviteKey);
+        _context38.n = 31;
+        return takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
       case 31:
-        _context36.n = 32;
-        return takeLatest(UPDATE_CHANNEL_INVITE_KEY, updateChannelInviteKey);
+        _context38.n = 32;
+        return takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
       case 32:
-        _context36.n = 33;
-        return takeLatest(REGENERATE_CHANNEL_INVITE_KEY, regenerateChannelInviteKey);
+        _context38.n = 33;
+        return takeLatest(CREATE_CHANNEL_INVITE_KEY, createChannelInviteKey);
       case 33:
-        _context36.n = 34;
-        return takeLatest(GET_CHANNEL_INVITE_KEYS, getChannelInviteKeys);
+        _context38.n = 34;
+        return takeLatest(UPDATE_CHANNEL_INVITE_KEY, updateChannelInviteKey);
       case 34:
-        _context36.n = 35;
-        return takeLatest(GET_CHANNEL_BY_INVITE_KEY, getChannelByInviteKey);
+        _context38.n = 35;
+        return takeLatest(REGENERATE_CHANNEL_INVITE_KEY, regenerateChannelInviteKey);
       case 35:
-        _context36.n = 36;
-        return takeLatest(JOIN_TO_CHANNEL_WITH_INVITE_KEY, joinChannelWithInviteKey);
+        _context38.n = 36;
+        return takeLatest(GET_CHANNEL_INVITE_KEYS, getChannelInviteKeys);
       case 36:
-        _context36.n = 37;
-        return takeLatest(SET_MESSAGE_RETENTION_PERIOD, setMessageRetentionPeriod);
+        _context38.n = 37;
+        return takeLatest(GET_CHANNEL_BY_INVITE_KEY, getChannelByInviteKey);
       case 37:
-        return _context36.a(2);
+        _context38.n = 38;
+        return takeLatest(JOIN_TO_CHANNEL_WITH_INVITE_KEY, joinChannelWithInviteKey);
+      case 38:
+        _context38.n = 39;
+        return takeLatest(SET_MESSAGE_RETENTION_PERIOD, setMessageRetentionPeriod);
+      case 39:
+        return _context38.a(2);
     }
-  }, _marked36);
+  }, _marked38);
 }
 
 function rgbaToThumbHash(w, h, rgba) {
@@ -19388,7 +19796,7 @@ function sendMessage(action) {
         messagesToSend.push(messageToSend);
       case 12:
         _loop2 = /*#__PURE__*/_regenerator().m(function _callee3() {
-          var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, stringifiedMessageUpdateData, activeChannelId, channelUpdateParam, isErrorResendable, _t;
+          var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, stringifiedMessageUpdateData, activeChannelId, messageToUpdate, channelUpdateParam, isErrorResendable, _t;
           return _regenerator().w(function (_context3) {
             while (1) switch (_context3.p = _context3.n) {
               case 0:
@@ -19490,7 +19898,7 @@ function sendMessage(action) {
                   createdAt: messageResponse.createdAt,
                   channelId: channel.id
                 };
-                stringifiedMessageUpdateData = JSON.parse(JSON.stringify(messageUpdateData));
+                stringifiedMessageUpdateData = JSON.parse(JSON.stringify(messageResponse));
                 activeChannelId = getActiveChannelId();
                 if (!(activeChannelId === channel.id)) {
                   _context3.n = 9;
@@ -19502,11 +19910,12 @@ function sendMessage(action) {
                 _context3.n = 10;
                 return put(removePendingMessageAC(channel.id, messageToSend.tid));
               case 10:
-                addMessageToMap(channel.id, stringifiedMessageUpdateData);
                 updateMessageOnAllMessages(messageToSend.tid, messageUpdateData);
-                updateChannelLastMessageOnAllChannels(channel.id, stringifiedMessageUpdateData);
+                messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
+                addMessageToMap(channel.id, messageToUpdate);
+                updateChannelLastMessageOnAllChannels(channel.id, messageToUpdate);
                 channelUpdateParam = {
-                  lastMessage: stringifiedMessageUpdateData,
+                  lastMessage: messageToUpdate,
                   lastReactedMessage: null
                 };
                 if (!channel.unread) {
@@ -22500,7 +22909,7 @@ function loadMoreMembers(action) {
   }, _marked2$3, null, [[0, 7, 8, 10]]);
 }
 function addMembers(action) {
-  var payload, members, channelId, channel, membersToAdd, addedMembers, membersIds, messageToSend, updateChannelData, _t3;
+  var payload, members, channelId, channel, membersToAdd, addedMembers, membersIds, messageToSend, updateChannelData, _action$payload, _t3;
   return _regenerator().w(function (_context3) {
     while (1) switch (_context3.p = _context3.n) {
       case 0:
@@ -22558,13 +22967,20 @@ function addMembers(action) {
           memberCount: channel.memberCount + addedMembers.length
         }, updateChannelData)));
       case 6:
-        _context3.n = 8;
+        _context3.n = 9;
         break;
       case 7:
         _context3.p = 7;
         _t3 = _context3.v;
-        log.error('error on add members... ', _t3);
+        if (!(_t3.code === 1041)) {
+          _context3.n = 8;
+          break;
+        }
+        _context3.n = 8;
+        return put(setActionIsRestrictedAC(true, true, (action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.members) || []));
       case 8:
+        log.error('error on add members... ', _t3);
+      case 9:
         return _context3.a(2);
     }
   }, _marked3$2, null, [[0, 7]]);
@@ -22722,11 +23138,11 @@ function reportMember(action) {
   }, _marked7$2, null, [[1, 3]]);
 }
 function getRoles(action) {
-  var _action$payload, timeout, attempts, SceytChatClient, roles, _t8;
+  var _action$payload2, timeout, attempts, SceytChatClient, roles, _t8;
   return _regenerator().w(function (_context8) {
     while (1) switch (_context8.p = _context8.n) {
       case 0:
-        _action$payload = action.payload, timeout = _action$payload.timeout, attempts = _action$payload.attempts;
+        _action$payload2 = action.payload, timeout = _action$payload2.timeout, attempts = _action$payload2.attempts;
         _context8.p = 1;
         SceytChatClient = getClient();
         if (!(store.getState().UserReducer.connectionStatus !== CONNECTION_STATUS.CONNECTED)) {
@@ -23267,6 +23683,18 @@ var channelInviteKeysSelector = function channelInviteKeysSelector(store) {
 var joinableChannelSelector = function joinableChannelSelector(store) {
   return store.ChannelReducer.joinableChannel;
 };
+var channelInviteKeyAvailableSelector = function channelInviteKeyAvailableSelector(store) {
+  return store.ChannelReducer.channelInviteKeyAvailable;
+};
+var mutualChannelsSelector = function mutualChannelsSelector(store) {
+  return store.ChannelReducer.mutualChannels;
+};
+var mutualChannelsHasNextSelector = function mutualChannelsHasNextSelector(store) {
+  return store.ChannelReducer.mutualChannelsHasNext;
+};
+var mutualChannelsLoadingStateSelector = function mutualChannelsLoadingStateSelector(store) {
+  return store.ChannelReducer.mutualChannelsLoadingState;
+};
 
 var activeChannelMembersSelector = function activeChannelMembersSelector(store) {
   return store.MembersReducer.activeChannelMembers;
@@ -23286,6 +23714,12 @@ var membersLoadingStateSelector = function membersLoadingStateSelector(store) {
 var membersHasNextSelector = function membersHasNextSelector(store) {
   return store.MembersReducer.membersHasNext;
 };
+var restrictedSelector = function restrictedSelector(store) {
+  return store.MembersReducer.restricted;
+};
+var openInviteModalSelector = function openInviteModalSelector(store) {
+  return store.MembersReducer.openInviteModal;
+};
 
 var useDidUpdate = function useDidUpdate(callback, deps) {
   var hasMount = useRef(false);
@@ -23384,6 +23818,24 @@ var useColors = function useColors() {
   }, [theme.colors, currentThemeMode]);
 };
 
+function useUpdatedUser(user) {
+  var dispatch = useDispatch();
+  var usersMap = useSelector(usersMapSelector);
+  useEffect(function () {
+    if (user !== null && user !== void 0 && user.id && !usersMap[user.id]) {
+      var _updateUserStatusOnMa;
+      setUserToMap(user);
+      dispatch(updateUserStatusOnMapAC((_updateUserStatusOnMa = {}, _updateUserStatusOnMa[user.id] = user, _updateUserStatusOnMa)));
+    }
+  }, [user === null || user === void 0 ? void 0 : user.id]);
+  return useMemo(function () {
+    if (!(user !== null && user !== void 0 && user.id)) {
+      return user;
+    }
+    return usersMap[user.id] || user;
+  }, [user, usersMap]);
+}
+
 function setThemeAC(theme) {
   return {
     type: SET_THEME,
@@ -23838,6 +24290,98 @@ var MembersText = styled.div(_templateObject7$1 || (_templateObject7$1 = _tagged
 });
 var Center = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 24px;\n"])));
 
+var ActionRestrictedPopup = function ActionRestrictedPopup(_ref) {
+  var fromChannel = _ref.fromChannel;
+  var dispatch = useDispatch();
+  var _useColor = useColors(),
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    linkColor = _useColor[THEME_COLORS.LINK_COLOR];
+  var handleClose = function handleClose() {
+    dispatch(setActionIsRestrictedAC(false, false, null));
+  };
+  var handleInvite = function handleInvite() {
+    dispatch(setOpenInviteModalAC(true));
+    handleClose();
+  };
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: background,
+    maxWidth: '520px',
+    minWidth: '520px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: handleClose
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px'
+  }, fromChannel ? 'Privacy note' : "Can't create group"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: linkColor
+  }, fromChannel ? 'Couldn’t add the user. Please invite them directly instead.' : 'Not everyone can be added to this group.')), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, fromChannel && (/*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    color: textPrimary,
+    backgroundColor: 'transparent',
+    onClick: handleClose
+  }, "Cancel")), /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: fromChannel ? handleInvite : handleClose
+  }, fromChannel ? 'Invite' : 'Cancel'))));
+};
+
+var UnavailableInviteKeyPopup = function UnavailableInviteKeyPopup() {
+  var dispatch = useDispatch();
+  var _useColor = useColors(),
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    linkColor = _useColor[THEME_COLORS.LINK_COLOR];
+  var handleClose = function handleClose() {
+    dispatch(setChannelInviteKeyAvailableAC(true));
+  };
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: background,
+    maxWidth: '520px',
+    minWidth: '520px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: handleClose
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px'
+  }, "Failed to join"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: linkColor
+  }, "You can't join the group or community as the invite link was reset.")), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: handleClose
+  }, "Close"))));
+};
+
 var _templateObject$5, _templateObject2$4, _templateObject3$4;
 var SceytChat = function SceytChat(_ref) {
   var client = _ref.client,
@@ -23881,6 +24425,8 @@ var SceytChat = function SceytChat(_ref) {
     SceytChatClient = _useState[0],
     setSceytChatClient = _useState[1];
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
+  var restricted = useSelector(restrictedSelector, shallowEqual);
+  var channelInviteKeyAvailable = useSelector(channelInviteKeyAvailableSelector, shallowEqual);
   var _useState2 = useState(true),
     tabIsActive = _useState2[0],
     setTabIsActive = _useState2[1];
@@ -24125,7 +24671,9 @@ var SceytChat = function SceytChat(_ref) {
     highlightedBackground: highlightedBackground,
     id: 'sceyt_chat_container',
     chatMinWidth: chatMinWidth
-  }, children, embeddedJoinGroupPopup && joinPopup && /*#__PURE__*/React__default.createElement(EmbeddedPopupWrapper, null, joinPopup))) : '', !embeddedJoinGroupPopup && joinPopup);
+  }, children, embeddedJoinGroupPopup && joinPopup && /*#__PURE__*/React__default.createElement(EmbeddedPopupWrapper, null, joinPopup), (restricted === null || restricted === void 0 ? void 0 : restricted.isRestricted) && /*#__PURE__*/React__default.createElement(ActionRestrictedPopup, {
+    fromChannel: restricted === null || restricted === void 0 ? void 0 : restricted.fromChannel
+  }), !channelInviteKeyAvailable && /*#__PURE__*/React__default.createElement(UnavailableInviteKeyPopup, null))) : '', !embeddedJoinGroupPopup && joinPopup);
 };
 var Container$2 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100vh;\n"])));
 var ChatContainer = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  max-height: 100vh;\n  min-width: ", ";\n  background-color: ", ";\n  position: relative;\n\n  /* Global highlighted background styles */\n  ::selection {\n    background-color: ", ";\n  }\n\n  ::-moz-selection {\n    background-color: ", ";\n  }\n\n  /* For text selection highlighting */\n  *::selection {\n    background-color: ", ";\n  }\n\n  *::-moz-selection {\n    background-color: ", ";\n  }\n"])), function (props) {
@@ -25460,30 +26008,43 @@ var Title$1 = styled.h4(_templateObject4$6 || (_templateObject4$6 = _taggedTempl
 });
 
 var _templateObject$b, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$2;
-var UsersPopup = function UsersPopup(_ref) {
-  var channel = _ref.channel,
-    toggleCreatePopup = _ref.toggleCreatePopup,
-    actionType = _ref.actionType,
-    getSelectedUsers = _ref.getSelectedUsers,
-    memberIds = _ref.memberIds,
-    creatChannelSelectedMembers = _ref.creatChannelSelectedMembers,
-    popupHeight = _ref.popupHeight,
-    selectIsRequired = _ref.selectIsRequired,
-    popupWidth = _ref.popupWidth,
-    handleOpenInviteModal = _ref.handleOpenInviteModal;
+var UserItem = function UserItem(_ref) {
+  var user = _ref.user,
+    memberDisplayName = _ref.memberDisplayName;
   var _useColor = useColors(),
-    accentColor = _useColor[THEME_COLORS.ACCENT],
-    surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    background = _useColor[THEME_COLORS.BACKGROUND],
-    border = _useColor[THEME_COLORS.BORDER],
-    textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
-    surface2 = _useColor[THEME_COLORS.SURFACE_2];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+  var userUpdated = useUpdatedUser(user);
+  return /*#__PURE__*/React__default.createElement(UserNamePresence, null, /*#__PURE__*/React__default.createElement(MemberName, {
+    color: textPrimary
+  }, memberDisplayName), /*#__PURE__*/React__default.createElement(SubTitle, {
+    color: textSecondary
+  }, userUpdated.presence && userUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : userUpdated.presence && userUpdated.presence.lastActiveAt && userLastActiveDateFormat(userUpdated.presence.lastActiveAt)));
+};
+var UsersPopup = function UsersPopup(_ref2) {
+  var channel = _ref2.channel,
+    toggleCreatePopup = _ref2.toggleCreatePopup,
+    actionType = _ref2.actionType,
+    getSelectedUsers = _ref2.getSelectedUsers,
+    memberIds = _ref2.memberIds,
+    creatChannelSelectedMembers = _ref2.creatChannelSelectedMembers,
+    popupHeight = _ref2.popupHeight,
+    selectIsRequired = _ref2.selectIsRequired,
+    popupWidth = _ref2.popupWidth,
+    handleOpenInviteModal = _ref2.handleOpenInviteModal;
+  var _useColor2 = useColors(),
+    accentColor = _useColor2[THEME_COLORS.ACCENT],
+    surface1Background = _useColor2[THEME_COLORS.SURFACE_1],
+    textPrimary = _useColor2[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor2[THEME_COLORS.TEXT_SECONDARY],
+    iconInactive = _useColor2[THEME_COLORS.ICON_INACTIVE],
+    backgroundHovered = _useColor2[THEME_COLORS.BACKGROUND_HOVERED],
+    background = _useColor2[THEME_COLORS.BACKGROUND],
+    border = _useColor2[THEME_COLORS.BORDER],
+    textFootnote = _useColor2[THEME_COLORS.TEXT_FOOTNOTE],
+    surface1 = _useColor2[THEME_COLORS.SURFACE_1],
+    textOnPrimary = _useColor2[THEME_COLORS.TEXT_ON_PRIMARY],
+    surface2 = _useColor2[THEME_COLORS.SURFACE_2];
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var selfUser = ChatClient.user;
@@ -25758,11 +26319,10 @@ var UsersPopup = function UsersPopup(_ref) {
       size: 40,
       textSize: 16,
       setDefaultAvatar: true
-    }), /*#__PURE__*/React__default.createElement(UserNamePresence, null, /*#__PURE__*/React__default.createElement(MemberName, {
-      color: textPrimary
-    }, memberDisplayName), /*#__PURE__*/React__default.createElement(SubTitle, {
-      color: textSecondary
-    }, user.presence && user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : user.presence && user.presence.lastActiveAt && userLastActiveDateFormat(user.presence.lastActiveAt))), actionType !== 'createChat' && (/*#__PURE__*/React__default.createElement(CustomCheckbox, {
+    }), /*#__PURE__*/React__default.createElement(UserItem, {
+      user: user,
+      memberDisplayName: memberDisplayName
+    }), actionType !== 'createChat' && (/*#__PURE__*/React__default.createElement(CustomCheckbox, {
       index: user.id,
       state: isSelected,
       backgroundColor: 'transparent',
@@ -28629,23 +29189,35 @@ var Progress = styled.input(_templateObject0$5 || (_templateObject0$5 = _taggedT
 var FullScreenWrapper = styled.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-left: 16px;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    margin-left: 12px;\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 480px) {\n    margin-left: auto;\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
 
 var _templateObject$n, _templateObject2$k, _templateObject3$h, _templateObject4$e, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject0$6, _templateObject1$4;
-function ForwardMessagePopup(_ref) {
-  var title = _ref.title,
-    buttonText = _ref.buttonText,
-    togglePopup = _ref.togglePopup,
-    handleForward = _ref.handleForward,
-    loading = _ref.loading;
+var ChannelMembersItem = function ChannelMembersItem(_ref) {
+  var channel = _ref.channel,
+    directChannelUser = _ref.directChannelUser,
+    isDirectChannel = _ref.isDirectChannel;
   var _useColor = useColors(),
-    accentColor = _useColor[THEME_COLORS.ACCENT],
-    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    background = _useColor[THEME_COLORS.BACKGROUND],
-    iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
-    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    surface2 = _useColor[THEME_COLORS.SURFACE_2];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+  var updatedUser = useUpdatedUser(directChannelUser);
+  var directChannelUserUpdated = isDirectChannel ? updatedUser : directChannelUser;
+  return /*#__PURE__*/React__default.createElement(ChannelMembers, {
+    color: textSecondary
+  }, isDirectChannel && directChannelUserUpdated ? (hideUserPresence && hideUserPresence(directChannelUserUpdated) ? '' : directChannelUserUpdated.presence && directChannelUserUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUserUpdated && directChannelUserUpdated.presence && directChannelUserUpdated.presence.lastActiveAt && userLastActiveDateFormat(directChannelUserUpdated.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'members' : 'member') + " ");
+};
+function ForwardMessagePopup(_ref2) {
+  var title = _ref2.title,
+    buttonText = _ref2.buttonText,
+    togglePopup = _ref2.togglePopup,
+    handleForward = _ref2.handleForward,
+    loading = _ref2.loading;
+  var _useColor2 = useColors(),
+    accentColor = _useColor2[THEME_COLORS.ACCENT],
+    textPrimary = _useColor2[THEME_COLORS.TEXT_PRIMARY],
+    surface1 = _useColor2[THEME_COLORS.SURFACE_1],
+    textSecondary = _useColor2[THEME_COLORS.TEXT_SECONDARY],
+    background = _useColor2[THEME_COLORS.BACKGROUND],
+    iconInactive = _useColor2[THEME_COLORS.ICON_INACTIVE],
+    textOnPrimary = _useColor2[THEME_COLORS.TEXT_ON_PRIMARY],
+    iconPrimary = _useColor2[THEME_COLORS.ICON_PRIMARY],
+    backgroundHovered = _useColor2[THEME_COLORS.BACKGROUND_HOVERED],
+    surface2 = _useColor2[THEME_COLORS.SURFACE_2];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = useDispatch();
@@ -28838,9 +29410,11 @@ function ForwardMessagePopup(_ref) {
       setDefaultAvatar: isDirectChannel
     }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
       color: textPrimary
-    }, isDirectChannel ? isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : 'Deleted User' : channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembers, {
-      color: textSecondary
-    }, isDirectChannel && directChannelUser ? (hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUser && directChannelUser.presence && directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.memberCount) > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
+    }, isDirectChannel ? isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : 'Deleted User' : channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
+      channel: channel,
+      directChannelUser: directChannelUser,
+      isDirectChannel: isDirectChannel
+    })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
       borderColor: iconInactive,
       index: channel.id,
       disabled: selectedChannels.length >= 5 && !isSelected,
@@ -28858,6 +29432,11 @@ function ForwardMessagePopup(_ref) {
     var isSelected = selectedChannels.findIndex(function (chan) {
       return chan.id === channel.id;
     }) >= 0;
+    var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
+    var isSelfChannel = isDirectChannel && channel.memberCount === 1 && channel.members.length > 0 && channel.members[0].id === user.id;
+    var directChannelUser = isDirectChannel && isSelfChannel ? user : channel.members.find(function (member) {
+      return member.id !== user.id;
+    });
     return /*#__PURE__*/React__default.createElement(ChannelItem, {
       key: channel.id,
       onClick: function onClick() {
@@ -28873,9 +29452,11 @@ function ForwardMessagePopup(_ref) {
       setDefaultAvatar: false
     }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
       color: textPrimary
-    }, channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembers, {
-      color: textSecondary
-    }, channel.memberCount + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? channel.memberCount > 1 ? 'subscribers' : 'subscriber' : channel.memberCount > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
+    }, channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
+      channel: channel,
+      directChannelUser: directChannelUser,
+      isDirectChannel: isDirectChannel
+    })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
       borderColor: iconInactive,
       index: channel.id,
       disabled: selectedChannels.length >= 5 && !isSelected,
@@ -28913,9 +29494,11 @@ function ForwardMessagePopup(_ref) {
       setDefaultAvatar: isDirectChannel
     }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
       color: textPrimary
-    }, channel.subject || (isDirectChannel && isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembers, {
-      color: textSecondary
-    }, isDirectChannel && directChannelUser ? (hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUser && directChannelUser.presence && directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt) : channel.memberCount + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? channel.memberCount > 1 ? 'subscribers' : 'subscriber' : channel.memberCount > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
+    }, channel.subject || (isDirectChannel && isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
+      channel: channel,
+      directChannelUser: directChannelUser,
+      isDirectChannel: isDirectChannel
+    })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
       borderColor: iconInactive,
       index: channel.id,
       disabled: selectedChannels.length >= 5 && !isSelected,
@@ -29703,7 +30286,7 @@ var IconWrapper = styled.span(_templateObject10$2 || (_templateObject10$2 = _tag
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem = styled.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  opacity: ", ";\n\n  img,\n  video {\n    //max-width: calc(100vw - 300px);\n    min-width: 280px;\n    max-width: 100%;\n    max-height: calc(100vh - 200px);\n    height: 100%;\n    @media (max-width: 480px) {\n      min-width: inherit;\n    }\n  }\n\n  img {\n    min-width: inherit;\n  }\n"])), function (props) {
+var CarouselItem = styled.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  opacity: ", ";\n\n  img,\n  video {\n    min-width: 280px;\n    max-width: 100%;\n    max-height: calc(100vh - 200px);\n    height: 100%;\n    width: 100%;\n    @media (max-width: 480px) {\n      min-width: inherit;\n    }\n  }\n\n  img {\n    min-width: inherit;\n  }\n"])), function (props) {
   return props.visibleSlide ? 1 : 0;
 });
 var UploadCont$1 = styled.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  //position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  min-height: 100px;\n  min-width: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
@@ -36089,7 +36672,7 @@ var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _tagg
 var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 8px;\n  flex: 0 0 52px;\n"])));
 var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
-var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m;
+var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$k, _templateObject7$j;
 var MessageBody = function MessageBody(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -36238,7 +36821,8 @@ var MessageBody = function MessageBody(_ref) {
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
     ogMetadataProps = _ref.ogMetadataProps,
     unsupportedMessage = _ref.unsupportedMessage,
-    onInviteLinkClick = _ref.onInviteLinkClick;
+    onInviteLinkClick = _ref.onInviteLinkClick,
+    collapsedCharacterLimit = _ref.collapsedCharacterLimit;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -36253,6 +36837,61 @@ var MessageBody = function MessageBody(_ref) {
   var user = ChatClient.user;
   var getFromContacts = getShowOnlyContactUsers();
   var messageUserID = message.user ? message.user.id : 'deleted';
+  var _useState = useState(false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var textContainerRef = useRef(null);
+  var _useState2 = useState('auto'),
+    textHeight = _useState2[0],
+    setTextHeight = _useState2[1];
+  var messageText = useMemo(function () {
+    return MessageTextFormat({
+      text: message.body,
+      message: message,
+      contactsMap: contactsMap,
+      getFromContacts: getFromContacts,
+      accentColor: accentColor,
+      textSecondary: textSecondary,
+      onMentionNameClick: handleOpenUserProfile,
+      shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention,
+      unsupportedMessage: unsupportedMessage,
+      target: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target,
+      isInviteLink: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink) || false,
+      onInviteLinkClick: onInviteLinkClick
+    });
+  }, [message, contactsMap, getFromContacts, accentColor, textSecondary, shouldOpenUserProfileForMention, unsupportedMessage, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink, onInviteLinkClick]);
+  var messageTextTrimmed = useMemo(function () {
+    if (!message.body) return {
+      result: messageText,
+      truncated: false
+    };
+    if (isExpanded) return {
+      result: messageText,
+      truncated: false
+    };
+    return trimReactMessage(messageText, collapsedCharacterLimit);
+  }, [message.body, messageText, isExpanded, collapsedCharacterLimit]);
+  useEffect(function () {
+    if (textContainerRef.current && typeof collapsedCharacterLimit === 'number' && collapsedCharacterLimit >= 0) {
+      if (messageTextTrimmed.truncated && !isExpanded) {
+        requestAnimationFrame(function () {
+          if (textContainerRef.current) {
+            var height = textContainerRef.current.scrollHeight;
+            setTextHeight(height);
+          }
+        });
+      } else if (isExpanded) {
+        requestAnimationFrame(function () {
+          if (textContainerRef.current) {
+            var fullHeight = textContainerRef.current.scrollHeight;
+            setTextHeight(fullHeight);
+          }
+        });
+      } else if (!messageTextTrimmed.truncated && textHeight !== 'auto') {
+        setTextHeight('auto');
+      }
+    }
+  }, [isExpanded, messageTextTrimmed.truncated, textHeight, collapsedCharacterLimit]);
   var prevMessageUserID = useMemo(function () {
     return prevMessage ? prevMessage.user ? prevMessage.user.id : 'deleted' : null;
   }, [prevMessage]);
@@ -36550,22 +37189,17 @@ var MessageBody = function MessageBody(_ref) {
     ogContainerShowBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerShowBackground,
     ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
     infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding
-  })), message.type !== MESSAGE_TYPE.POLL && (/*#__PURE__*/React__default.createElement("span", {
+  })), message.type !== MESSAGE_TYPE.POLL && (/*#__PURE__*/React__default.createElement(TextContentContainer, {
+    ref: textContainerRef,
+    textHeight: textHeight
+  }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageTextRef
-  }, MessageTextFormat({
-    text: message.body,
-    message: message,
-    contactsMap: contactsMap,
-    getFromContacts: getFromContacts,
-    accentColor: accentColor,
-    textSecondary: textSecondary,
-    onMentionNameClick: handleOpenUserProfile,
-    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention,
-    unsupportedMessage: unsupportedMessage,
-    target: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target,
-    isInviteLink: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink) || false,
-    onInviteLinkClick: onInviteLinkClick
-  }))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
+  }, messageTextTrimmed === null || messageTextTrimmed === void 0 ? void 0 : messageTextTrimmed.result, messageTextTrimmed !== null && messageTextTrimmed !== void 0 && messageTextTrimmed.truncated && !isExpanded ? '...' : ''), messageTextTrimmed.truncated && !isExpanded && (/*#__PURE__*/React__default.createElement(ReadMoreLink, {
+    onClick: function onClick() {
+      return setIsExpanded(true);
+    },
+    accentColor: accentColor
+  }, "Read more")))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
     maxWidth: ogMetadataContainerWidth,
@@ -36683,7 +37317,7 @@ var MessageBody = function MessageBody(_ref) {
 };
 var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prevProps, nextProps) {
   var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
-  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order));
+  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order) && prevProps.collapsedCharacterLimit === nextProps.collapsedCharacterLimit);
 });
 var ForwardedTitle = styled.h3(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
@@ -36740,8 +37374,14 @@ var FrequentlyEmojisContainer = styled.div(_templateObject5$m || (_templateObjec
 }, function (props) {
   return props.rtlDirection && '0';
 });
+var TextContentContainer = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  height: ", ";\n  transition: height 0.3s ease-out;\n"])), function (props) {
+  return props.textHeight !== 'auto' ? props.textHeight + "px" : 'auto';
+});
+var ReadMoreLink = styled.span(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  display: block;\n  color: ", ";\n  cursor: pointer;\n  font-weight: 500;\n  margin-top: 8px;\n  font-style: Medium;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n  user-select: none;\n  transition: opacity 0.2s ease;\n"])), function (props) {
+  return props.accentColor;
+});
 
-var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$b;
+var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$b;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -37236,10 +37876,10 @@ var Row$2 = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTempla
   return p.backgroundHover;
 });
 var RowInfo = styled.div(_templateObject5$n || (_templateObject5$n = _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$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 22px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) {
+var RowTitle = styled.div(_templateObject6$l || (_templateObject6$l = _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$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
+var RowDate = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
   return p.color;
 });
 var Empty = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
@@ -37285,7 +37925,7 @@ function ConfirmEndPollPopup(_ref) {
   });
 }
 
-var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
+var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -37443,7 +38083,8 @@ var Message$1 = function Message(_ref) {
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
     ogMetadataProps = _ref.ogMetadataProps,
     _ref$showInfoMessageP = _ref.showInfoMessageProps,
-    showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
+    showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP,
+    collapsedCharacterLimit = _ref.collapsedCharacterLimit;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -37587,7 +38228,17 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
   };
   var handleCopyMessage = function handleCopyMessage() {
-    navigator.clipboard.writeText(messageTextRef.current.innerText);
+    var getFromContacts = getShowOnlyContactUsers();
+    var textToCopyHTML = MessageTextFormat({
+      text: message.body,
+      message: message,
+      contactsMap: contactsMap,
+      getFromContacts: getFromContacts,
+      accentColor: '',
+      textSecondary: ''
+    });
+    var textToCopy = typeof textToCopyHTML === 'string' ? textToCopyHTML : _extractTextFromReactElement(textToCopyHTML);
+    navigator.clipboard.writeText(textToCopy);
     setMessageActionsShow(false);
   };
   var handleToggleReactionsPopup = function handleToggleReactionsPopup() {
@@ -37976,7 +38627,8 @@ var Message$1 = function Message(_ref) {
     handleOpenUserProfile: handleOpenUserProfile,
     shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
     ogMetadataProps: ogMetadataProps,
-    unsupportedMessage: unsupportedMessage
+    unsupportedMessage: unsupportedMessage,
+    collapsedCharacterLimit: collapsedCharacterLimit
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -38115,8 +38767,8 @@ var FailedMessageIcon = styled.div(_templateObject5$o || (_templateObject5$o = _
 }, function (props) {
   return props.rtl && '-24px';
 });
-var ErrorIconWrapper = styled(SvgErrorIcon)(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
-var SelectMessageWrapper = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px;\n  position: absolute;\n  left: 4%;\n  bottom: calc(50% - 22px);\n  cursor: ", ";\n  & > svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
+var ErrorIconWrapper = styled(SvgErrorIcon)(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
+var SelectMessageWrapper = styled.div(_templateObject7$l || (_templateObject7$l = _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;
@@ -38187,7 +38839,7 @@ var MessageItem = styled.div(_templateObject12$4 || (_templateObject12$4 = _tagg
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$d;
+var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$n, _templateObject7$m, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$d;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -38377,7 +39029,8 @@ var MessageList = function MessageList(_ref2) {
     shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
     _ref2$showInfoMessage = _ref2.showInfoMessageProps,
     showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage,
-    ogMetadataProps = _ref2.ogMetadataProps;
+    ogMetadataProps = _ref2.ogMetadataProps,
+    collapsedCharacterLimit = _ref2.collapsedCharacterLimit;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -39238,7 +39891,8 @@ var MessageList = function MessageList(_ref2) {
       messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
       shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
       showInfoMessageProps: showInfoMessageProps,
-      ogMetadataProps: ogMetadataProps
+      ogMetadataProps: ogMetadataProps,
+      collapsedCharacterLimit: collapsedCharacterLimit
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -39301,12 +39955,12 @@ var DragAndDropContainer = styled.div(_templateObject5$p || (_templateObject5$p
 }, function (props) {
   return props.backgroundColor;
 });
-var IconWrapper$1 = styled.span(_templateObject6$m || (_templateObject6$m = _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$n || (_templateObject6$n = _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$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  border: 1px dashed ", ";\n  border-radius: 16px;\n  margin: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  transition: all 0.1s;\n\n  &.dragover {\n    background-color: ", ";\n    border: 1px dashed ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+var DropAttachmentArea = styled.div(_templateObject7$m || (_templateObject7$m = _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';
@@ -39499,7 +40153,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
       },
       infoPadding: '0 8px',
       isInviteLink: false
-    } : _ref$ogMetadataProps;
+    } : _ref$ogMetadataProps,
+    collapsedCharacterLimit = _ref.collapsedCharacterLimit;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -39633,7 +40288,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     hiddenMessagesProperties: hiddenMessagesProperties,
     shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
     showInfoMessageProps: showInfoMessageProps,
-    ogMetadataProps: ogMetadataProps
+    ogMetadataProps: ogMetadataProps,
+    collapsedCharacterLimit: collapsedCharacterLimit
   }));
 };
 
@@ -39760,7 +40416,6 @@ var LENGTH_LIMIT = 75;
 var AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$');
 var ALIAS_LENGTH_LIMIT = 50;
 var AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$');
-var SUGGESTION_LIST_LENGTH_LIMIT = 50;
 var mentionsCache = new Map();
 var membersMap = {};
 function useMentionLookupService(mentionString, contactsMap, userId, members, getFromContacts) {
@@ -39884,11 +40539,16 @@ function MentionsContainer(_ref2) {
     selectedIndex = _ref2.selectedIndex,
     selectOptionAndCleanUp = _ref2.selectOptionAndCleanUp,
     setHighlightedIndex = _ref2.setHighlightedIndex,
-    setMentionsIsOpen = _ref2.setMentionsIsOpen;
+    setMentionsIsOpen = _ref2.setMentionsIsOpen,
+    channelId = _ref2.channelId;
   var theme = useSelector(themeSelector);
   var _useColor2 = useColors(),
     borderColor = _useColor2[THEME_COLORS.BORDER],
     background = _useColor2[THEME_COLORS.BACKGROUND];
+  var dispatch = useDispatch();
+  var membersHasNext = useSelector(membersHasNextSelector);
+  var membersLoadingState = useSelector(membersLoadingStateSelector);
+  var mentionsListRef = useRef(null);
   var contRef = useRef();
   var handleKeyDown = function handleKeyDown(event) {
     var code = event.code;
@@ -39929,13 +40589,22 @@ function MentionsContainer(_ref2) {
       setMentionsIsOpen(false);
     };
   }, []);
+  var handleScroll = useCallback(function (e) {
+    var target = e.currentTarget;
+    var isScrolledToBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;
+    if (isScrolledToBottom && membersHasNext && membersLoadingState !== LOADING_STATE.LOADING && channelId) {
+      dispatch(loadMoreMembersAC(15, channelId));
+    }
+  }, [membersHasNext, membersLoadingState, channelId, dispatch]);
   return /*#__PURE__*/React__default.createElement(MentionsContainerWrapper, {
     className: 'typeahead-popover mentions-menu',
     ref: contRef
   }, /*#__PURE__*/React__default.createElement(MentionsList, {
+    ref: mentionsListRef,
     borderColor: borderColor,
     backgroundColor: background,
-    theme: theme
+    theme: theme,
+    onScroll: handleScroll
   }, options.map(function (option, i) {
     return /*#__PURE__*/React__default.createElement(MentionsTypeaheadMenuItem, {
       index: i,
@@ -39958,7 +40627,8 @@ function MentionsPlugin(_ref3) {
     getFromContacts = _ref3.getFromContacts,
     setMentionMember = _ref3.setMentionMember,
     setMentionsIsOpen = _ref3.setMentionsIsOpen,
-    members = _ref3.members;
+    members = _ref3.members,
+    channelId = _ref3.channelId;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
   var _useState2 = useState(null),
@@ -39971,8 +40641,8 @@ function MentionsPlugin(_ref3) {
   var options = useMemo(function () {
     return results.map(function (result) {
       return new MentionTypeaheadOption(result.name, result.id, result.presence, result.avatar);
-    }).slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
-  }, [results]);
+    });
+  }, [results === null || results === void 0 ? void 0 : results.length]);
   var handleOnOpen = function handleOnOpen() {
     var menuElement = document.getElementById('typeahead-menu');
     if (menuElement) {
@@ -40014,13 +40684,14 @@ function MentionsPlugin(_ref3) {
       var selectedIndex = _ref4.selectedIndex,
         selectOptionAndCleanUp = _ref4.selectOptionAndCleanUp,
         setHighlightedIndex = _ref4.setHighlightedIndex;
-      return anchorElementRef.current && results.length ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
+      return anchorElementRef.current && options.length ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
         queryString: queryString,
         options: options,
         setMentionsIsOpen: setMentionsIsOpen,
         selectOptionAndCleanUp: selectOptionAndCleanUp,
         selectedIndex: selectedIndex,
-        setHighlightedIndex: setHighlightedIndex
+        setHighlightedIndex: setHighlightedIndex,
+        channelId: channelId
       }), anchorElementRef.current) : null;
     }
   });
@@ -40735,26 +41406,121 @@ function EditMessagePlugin(_ref) {
   return null;
 }
 
-function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, messageToEdit) {
-  function $insertDataTransferForPlainText(dataTransfer, selection) {
-    var text = dataTransfer.getData('text/plain') || dataTransfer.getData('text/uri-list');
-    if (text != null) {
-      selection.insertRawText(text);
+function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts) {
+  if (activeChannelMembers === void 0) {
+    activeChannelMembers = [];
+  }
+  if (contactsMap === void 0) {
+    contactsMap = {};
+  }
+  if (getFromContacts === void 0) {
+    getFromContacts = false;
+  }
+  function processMentionsInPastedText(pastedText, activeChannelMembers, contactsMap, getFromContacts, setMentionedMember, selection) {
+    if (!pastedText) return;
+    var contacts = getFromContacts ? [].concat(Object.values(contactsMap), activeChannelMembers) : activeChannelMembers;
+    var mentionPatterns = [];
+    contacts.forEach(function (contactOrMember) {
+      var contactFromMap = contactsMap[contactOrMember.id];
+      var contact = getFromContacts && contactFromMap ? contactFromMap : undefined;
+      var member = contact ? undefined : contactOrMember;
+      var fullDisplayName = makeUsername(contact, member, getFromContacts, false);
+      if (fullDisplayName && fullDisplayName !== 'Deleted user') {
+        mentionPatterns.push({
+          pattern: "@" + fullDisplayName,
+          contact: contactOrMember
+        });
+      }
+    });
+    mentionPatterns.sort(function (a, b) {
+      return b.pattern.length - a.pattern.length;
+    });
+    var matches = [];
+    var usedRanges = [];
+    mentionPatterns.forEach(function (_ref) {
+      var pattern = _ref.pattern,
+        contact = _ref.contact;
+      var searchIndex = 0;
+      var _loop = function _loop() {
+        var index = pastedText.indexOf(pattern, searchIndex);
+        if (index === -1) return 1;
+        var isOverlapping = usedRanges.some(function (range) {
+          return index < range.end && index + pattern.length > range.start;
+        });
+        if (!isOverlapping) {
+          var charBefore = index > 0 ? pastedText[index - 1] : undefined;
+          var isValidStart = charBefore === undefined || charBefore === ' ' || charBefore === '\n' || charBefore === '\r';
+          var charAfter = pastedText[index + pattern.length];
+          var isValidEnd = charAfter === undefined || charAfter === ' ' || charAfter === '\n' || charAfter === '\r';
+          if (isValidStart && isValidEnd) {
+            matches.push({
+              start: index,
+              end: index + pattern.length,
+              contact: contact,
+              pattern: pattern
+            });
+            usedRanges.push({
+              start: index,
+              end: index + pattern.length
+            });
+          }
+        }
+        searchIndex = index + 1;
+      };
+      while (true) {
+        if (_loop()) break;
+      }
+    });
+    matches.sort(function (a, b) {
+      return a.start - b.start;
+    });
+    var nodes = [];
+    var currentIndex = 0;
+    matches.forEach(function (_ref2) {
+      var start = _ref2.start,
+        end = _ref2.end,
+        contact = _ref2.contact,
+        pattern = _ref2.pattern;
+      if (start > currentIndex) {
+        var textBefore = pastedText.substring(currentIndex, start);
+        if (textBefore) {
+          nodes.push($createTextNode(textBefore));
+        }
+      }
+      setMentionedMember(contact);
+      var mentionNode = $createMentionNode(_extends({}, contact, {
+        name: pattern
+      }));
+      nodes.push(mentionNode);
+      currentIndex = end;
+    });
+    if (currentIndex < pastedText.length) {
+      var remainingText = pastedText.substring(currentIndex);
+      if (remainingText) {
+        nodes.push($createTextNode(remainingText));
+      }
+    }
+    if (matches.length === 0) {
+      selection.insertText(pastedText);
+    } else if (nodes.length > 0) {
+      selection.insertNodes(nodes);
     }
   }
   var handlePast = useCallback(function (e) {
-    var pastedTex = e.clipboardData.getData('text/plain');
-    if (pastedTex) {
+    if (!('clipboardData' in e) || !e.clipboardData) {
+      return false;
+    }
+    var pastedText = e.clipboardData.getData('text/plain');
+    if (pastedText) {
       editor.update(function () {
         var selection = $getSelection();
-        var _event = event,
-          clipboardData = _event.clipboardData;
-        if (clipboardData != null && $isRangeSelection(selection)) {
-          $insertDataTransferForPlainText(clipboardData, selection);
+        if ($isRangeSelection(selection)) {
+          processMentionsInPastedText(pastedText, activeChannelMembers, contactsMap, getFromContacts, setMentionedMember, selection);
         }
       });
     }
-  }, [editor]);
+    return true;
+  }, [editor, contactsMap, setMentionedMember, getFromContacts, activeChannelMembers]);
   var onDelete = useCallback(function (event) {
     event.preventDefault();
     editor.update(function () {
@@ -40868,18 +41634,22 @@ function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMess
     }
   }, [editor, editorState]);
 }
-function FormatMessagePlugin(_ref) {
-  var editorState = _ref.editorState,
-    setMessageBodyAttributes = _ref.setMessageBodyAttributes,
-    setMessageText = _ref.setMessageText,
-    messageToEdit = _ref.messageToEdit;
+function FormatMessagePlugin(_ref3) {
+  var editorState = _ref3.editorState,
+    setMessageBodyAttributes = _ref3.setMessageBodyAttributes,
+    setMessageText = _ref3.setMessageText,
+    setMentionedMember = _ref3.setMentionedMember,
+    messageToEdit = _ref3.messageToEdit,
+    activeChannelMembers = _ref3.activeChannelMembers,
+    contactsMap = _ref3.contactsMap,
+    getFromContacts = _ref3.getFromContacts;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
-  useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, messageToEdit);
+  useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts);
   return null;
 }
 
-var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$m, _templateObject8$k;
+var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$k;
 var EmojiIcon$1 = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -41105,8 +41875,8 @@ var EmojiCollection$1 = styled.span(_templateObject4$w || (_templateObject4$w =
   return props.iconColor;
 });
 var CollectionPointer$1 = styled.span(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose([""])));
-var AllEmojis$1 = styled.ul(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
-var EmojiFooter$1 = styled.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
+var AllEmojis$1 = styled.ul(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
+var EmojiFooter$1 = styled.div(_templateObject7$n || (_templateObject7$n = _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;
@@ -41312,7 +42082,7 @@ function SvgRecordButton(props) {
   })));
 }
 
-var _templateObject$O, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$n;
+var _templateObject$O, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$p, _templateObject7$o;
 var fieldsObject = {
   channelId: '',
   currentRecordedFile: null,
@@ -41954,7 +42724,7 @@ var AudioVisualization$1 = styled.div(_templateObject4$x || (_templateObject4$x
 var PlayPause$1 = styled.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 10px;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var Canvas = styled.canvas(_templateObject6$o || (_templateObject6$o = _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$p || (_templateObject6$p = _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) {
@@ -41964,7 +42734,7 @@ var Canvas = styled.canvas(_templateObject6$o || (_templateObject6$o = _taggedTe
   var hide = _ref0.hide;
   return hide && '-1';
 });
-var Timer$2 = styled.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
+var Timer$2 = styled.div(_templateObject7$o || (_templateObject7$o = _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;
 });
 
@@ -42019,7 +42789,7 @@ function SvgDotsVertica(props) {
   })));
 }
 
-var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$o, _templateObject8$l, _templateObject9$i;
+var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$i;
 var CreatePollPopup = function CreatePollPopup(_ref) {
   var togglePopup = _ref.togglePopup,
     onCreate = _ref.onCreate;
@@ -42418,7 +43188,7 @@ var OptionRow = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTe
 }, function (props) {
   return props.isDragging ? 0.6 : 1;
 });
-var RemoveOptionIcon = styled(SvgClose)(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  opacity: ", ";\n"])), function (props) {
+var RemoveOptionIcon = styled(SvgClose)(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  opacity: ", ";\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.width;
@@ -42427,7 +43197,7 @@ var RemoveOptionIcon = styled(SvgClose)(_templateObject6$p || (_templateObject6$
 }, function (props) {
   return props.disabled ? 0.5 : 1;
 });
-var AddOptionButton = styled.button(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 0 0;\n  background: transparent;\n  border: none;\n  color: ", ";\n  cursor: ", ";\n  width: 100%;\n  text-align: left;\n  padding-left: 32px;\n  opacity: ", ";\n"])), function (props) {
+var AddOptionButton = styled.button(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 0 0;\n  background: transparent;\n  border: none;\n  color: ", ";\n  cursor: ", ";\n  width: 100%;\n  text-align: left;\n  padding-left: 32px;\n  opacity: ", ";\n"])), function (props) {
   return props.disabled ? props.disabledColor : props.color;
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
@@ -42439,7 +43209,7 @@ var SettingItem = styled.div(_templateObject9$i || (_templateObject9$i = _tagged
   return props.color;
 });
 
-var _templateObject$R, _templateObject2$M, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$R, _templateObject2$M, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$r, _templateObject7$q, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _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(),
@@ -43557,7 +44327,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     setMentionedUsers([]);
   }, [activeChannel.id]);
   useEffect(function () {
-    if (messageText.trim() || editMessageText.trim() && editMessageText && editMessageText.trim() !== messageToEdit.body || attachments.length) {
+    if (messageText.trim() || editMessageText !== null && editMessageText !== void 0 && editMessageText.trim() && editMessageText && (editMessageText === null || editMessageText === void 0 ? void 0 : editMessageText.trim()) !== (messageToEdit === null || messageToEdit === void 0 ? void 0 : messageToEdit.body) || attachments.length) {
       if (attachments.length) {
         var videoAttachment = false;
         attachments.forEach(function (att) {
@@ -43879,7 +44649,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   })) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
     backgroundColor: accentColor,
     iconColor: textOnPrimary
-  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, null, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
+  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, {
+    linkColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
   }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.body && messageForReply.bodyAttributes && messageForReply.bodyAttributes.length > 0 ? MessageTextFormat({
     text: messageForReply.body,
@@ -44027,7 +44799,11 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     editorState: realEditorState,
     setMessageBodyAttributes: setMessageBodyAttributes,
     setMessageText: messageToEdit ? setEditMessageText : setMessageText,
-    messageToEdit: messageToEdit
+    messageToEdit: messageToEdit,
+    activeChannelMembers: activeChannelMembers,
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    setMentionedMember: handleSetMentionMember
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isEmojisOpened && (/*#__PURE__*/React__default.createElement(EmojisPopup$1, {
     handleEmojiPopupToggle: handleEmojiPopupToggle,
     rightSide: emojisInRightSide,
@@ -44039,7 +44815,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     userId: user.id,
     getFromContacts: getFromContacts,
     members: activeChannelMembers,
-    setMentionsIsOpen: setMentionsIsOpen
+    setMentionsIsOpen: setMentionsIsOpen,
+    channelId: activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id
   })), /*#__PURE__*/React__default.createElement(HistoryPlugin, null), /*#__PURE__*/React__default.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React__default.createElement("div", {
       onKeyDown: handleSendEditMessage,
@@ -44119,11 +44896,13 @@ var EditMessageText = styled.p(_templateObject4$z || (_templateObject4$z = _tagg
 var UploadErrorMessage = styled.p(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  position: absolute;\n  top: -30px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var CloseEditMode = styled.span(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 22px;\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var CloseEditMode = styled.span(_templateObject6$r || (_templateObject6$r = _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$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
-var ReplyMessageBody$1 = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var UserName$1 = styled.span(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
+var ReplyMessageBody$1 = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  a {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.linkColor;
+});
 var EditReplyMessageHeader = styled.h4(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 0 0 2px;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n\n  > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.color;
 });
@@ -44521,6 +45300,29 @@ function SvgChevronBottom(props) {
   })));
 }
 
+var _path$1v;
+function _extends$1z() {
+  return _extends$1z = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1z.apply(null, arguments);
+}
+function SvgUsers(props) {
+  return /*#__PURE__*/createElement$1("svg", _extends$1z({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1v || (_path$1v = /*#__PURE__*/createElement$1("path", {
+    d: "M13.75 10.625c1.911 0 5.416.714 5.416 3.571 0 1.25-.318 1.429-.956 1.429h-5.075c.132-.407.198-.885.198-1.429 0-1.436-.526-2.556-1.393-3.385a9.226 9.226 0 011.81-.186zm-7.5 0c1.911 0 5.416.714 5.416 3.571 0 1.25-.318 1.429-.956 1.429H1.79c-.637 0-.956-.179-.956-1.429 0-2.857 3.505-3.571 5.417-3.571zm0-6.25a2.5 2.5 0 11.001 4.998 2.5 2.5 0 01-.001-4.998zm7.5 0a2.5 2.5 0 11.001 4.998 2.5 2.5 0 01-.001-4.998z",
+    fill: "#818C99"
+  })));
+}
+
 var _templateObject$S, _templateObject2$N, _templateObject3$G;
 function NetworkErrorPopup(_ref) {
   var theme = _ref.theme,
@@ -44568,7 +45370,7 @@ var StyledPopupName = styled(PopupName)(_templateObject$S || (_templateObject$S
 var StyledPopupDescription = styled(PopupDescription)(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-style: normal;\n  font-size: 15px;\n  line-height: 150%;\n  letter-spacing: 0%;\n  margin-top: 0;\n  margin-bottom: 0;\n  width: 437px;\n  height: 68px;\n  opacity: 1;\n  display: block;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n"])));
 var CloseButton = styled(Button)(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  width: 73px;\n  height: 36px;\n  min-width: 73px;\n  max-width: 73px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 
-var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$q, _templateObject8$n;
+var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$A, _templateObject5$v, _templateObject6$s, _templateObject7$r, _templateObject8$n;
 var TIMER_OPTIONS = [{
   key: 'off',
   label: 'Off'
@@ -44820,13 +45622,190 @@ var CustomSelectWrapper = styled.div(_templateObject4$A || (_templateObject4$A =
   return props.accentColor;
 });
 var CustomSelectTriggerStyled = styled(CustomSelectTrigger)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  text-transform: none;\n"])));
-var CustomDropdownOptionLi = styled(DropdownOptionLi)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n"])));
-var CustomDropdownOptionsUl = styled(DropdownOptionsUl)(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  border-color: ", ";\n  height: 268px;\n  max-height: 268px;\n  border-radius: 0;\n\n  ", " {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n"])), function (props) {
+var CustomDropdownOptionLi = styled(DropdownOptionLi)(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n"])));
+var CustomDropdownOptionsUl = styled(DropdownOptionsUl)(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  border-color: ", ";\n  height: 268px;\n  max-height: 268px;\n  border-radius: 0;\n\n  ", " {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n"])), function (props) {
   return props.accentColor;
 }, CustomDropdownOptionLi);
 var SetButton = styled(Button)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  width: 57px;\n  height: 36px;\n  min-width: 57px;\n  max-width: 57px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 
-var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$o, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
+var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$t, _templateObject7$s, _templateObject8$o;
+var formatMemberCount = function formatMemberCount(count, channelType) {
+  if (channelType === DEFAULT_CHANNEL_TYPE.BROADCAST || channelType === DEFAULT_CHANNEL_TYPE.PUBLIC) {
+    return count + " " + (count > 1 ? 'subscribers' : 'subscriber');
+  }
+  return count + " " + (count > 1 ? 'members' : 'member');
+};
+var MutualChannelItem = function MutualChannelItem(_ref) {
+  var channel = _ref.channel,
+    backgroundHovered = _ref.backgroundHovered,
+    textPrimary = _ref.textPrimary,
+    textSecondary = _ref.textSecondary,
+    currentUser = _ref.currentUser,
+    contactsMap = _ref.contactsMap,
+    getFromContacts = _ref.getFromContacts,
+    iconPrimary = _ref.iconPrimary,
+    activeChannel = _ref.activeChannel,
+    togglePopup = _ref.togglePopup;
+  var dispatch = useDispatch();
+  var setSelectedChannel = function setSelectedChannel(channel) {
+    if (activeChannel.id !== channel.id) {
+      dispatch(clearMessagesAC());
+      dispatch(switchChannelActionAC(channel));
+      togglePopup();
+    }
+  };
+  var isDirectChannel = useMemo(function () {
+    return channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
+  }, [channel.type]);
+  var directChannelUser = useMemo(function () {
+    return isDirectChannel && channel.members.find(function (member) {
+      return member.id !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) || '';
+    });
+  }, [isDirectChannel, channel.members, currentUser === null || currentUser === void 0 ? void 0 : currentUser.id]);
+  var avatarName = useMemo(function () {
+    return channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : '');
+  }, [channel.subject, isDirectChannel, directChannelUser]);
+  return /*#__PURE__*/React__default.createElement(ChannelItem$1, {
+    key: "mutual-channel-" + channel.id,
+    backgroundHover: backgroundHovered,
+    onClick: function onClick() {
+      return setSelectedChannel(channel);
+    }
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    name: avatarName,
+    image: channel.avatarUrl || (isDirectChannel && directChannelUser ? directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.avatarUrl : ''),
+    size: 40,
+    textSize: 12,
+    setDefaultAvatar: isDirectChannel
+  }), /*#__PURE__*/React__default.createElement(ChannelInfo$4, null, /*#__PURE__*/React__default.createElement(ChannelTitle$1, {
+    color: textPrimary
+  }, channel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembers$1, {
+    color: textSecondary
+  }, formatMemberCount(channel.memberCount, channel.type))), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+    color: iconPrimary
+  })));
+};
+var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
+  var theme = _ref2.theme,
+    togglePopup = _ref2.togglePopup,
+    user = _ref2.user;
+  var ChatClient = getClient();
+  var currentUser = ChatClient.user;
+  var _useColor = useColors(),
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
+  var contactsMap = useSelector(contactsMapSelector);
+  var getFromContacts = getShowOnlyContactUsers();
+  var dispatch = useDispatch();
+  var mutualChannels = useSelector(mutualChannelsSelector) || [];
+  var mutualChannelsHasNext = useSelector(mutualChannelsHasNextSelector);
+  var mutualChannelsLoadingState = useSelector(mutualChannelsLoadingStateSelector);
+  var connectionStatus = useSelector(connectionStatusSelector);
+  var activeChannel = useSelector(activeChannelSelector);
+  var _useState = useState(false),
+    isScrolling = _useState[0],
+    setIsScrolling = _useState[1];
+  var loadingRef = useRef(false);
+  var isLoading = mutualChannelsLoadingState === LOADING_STATE.LOADING;
+  var isLoadingInitial = mutualChannels.length === 0 && isLoading;
+  useEffect(function () {
+    if (mutualChannelsLoadingState === LOADING_STATE.LOADED) {
+      loadingRef.current = false;
+    }
+  }, [mutualChannelsLoadingState]);
+  var handleScroll = useCallback(function (event) {
+    var target = event.currentTarget;
+    var isNearBottom = target.scrollTop >= target.scrollHeight - target.offsetHeight - 100;
+    if (isNearBottom && mutualChannelsHasNext && !isLoading && !loadingRef.current) {
+      loadingRef.current = true;
+      dispatch(loadMoreMutualChannelsAC(15));
+    }
+  }, [mutualChannelsHasNext, isLoading, dispatch]);
+  useEffect(function () {
+    if (connectionStatus === CONNECTION_STATUS.CONNECTED && !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length)) {
+      if (user !== null && user !== void 0 && user.id) {
+        dispatch(getChannelsWithUserAC(user.id));
+      }
+    }
+  }, [connectionStatus, dispatch, user === null || user === void 0 ? void 0 : user.id, mutualChannels === null || mutualChannels === void 0 ? void 0 : mutualChannels.length]);
+  useEffect(function () {
+    return function () {
+      dispatch(setMutualChannelsAC([]));
+    };
+  }, [dispatch]);
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    theme: theme,
+    backgroundColor: background,
+    maxWidth: '520px',
+    minWidth: '520px',
+    isLoading: isLoadingInitial,
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: togglePopup
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px'
+  }, "Groups in common"), /*#__PURE__*/React__default.createElement(ChannelsList$1, {
+    onScroll: handleScroll,
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
+    thumbColor: background
+  }, isLoadingInitial ? (/*#__PURE__*/React__default.createElement(LoadingText$1, {
+    color: textSecondary
+  }, "Loading...")) : mutualChannels.length > 0 ? mutualChannels.map(function (channel) {
+    return /*#__PURE__*/React__default.createElement(MutualChannelItem, {
+      key: "mutual-channel-" + channel.id,
+      channel: channel,
+      backgroundHovered: backgroundHovered,
+      textPrimary: textPrimary,
+      textSecondary: textSecondary,
+      currentUser: currentUser,
+      contactsMap: contactsMap,
+      getFromContacts: getFromContacts,
+      iconPrimary: iconPrimary,
+      activeChannel: activeChannel,
+      togglePopup: togglePopup
+    });
+  }) : (/*#__PURE__*/React__default.createElement(EmptyText, {
+    color: textSecondary
+  }, "No groups in common")), isLoading && mutualChannels.length > 0 && /*#__PURE__*/React__default.createElement(LoadingText$1, {
+    color: textSecondary
+  }, "Loading more...")))));
+};
+var ChannelsList$1 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  max-height: 400px;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 3px;\n    opacity: 0.3;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    opacity: 0.6;\n  }\n"])), function (props) {
+  return props.thumbColor;
+});
+var ChannelItem$1 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 6px 2px 6px 6px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.backgroundHover;
+});
+var ChannelInfo$4 = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 12px;\n  min-width: 0;\n"])));
+var ChannelTitle$1 = styled.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 20px;\n  font-family: Inter;\n  letter-spacing: -0.2px;\n  color: ", ";\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), function (props) {
+  return props.color;
+});
+var ChannelMembers$1 = styled.div(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var LoadingText$1 = styled.div(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var EmptyText = styled.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 40px 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var ChevronRightIconWrapper = styled.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
+
+var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$u, _templateObject7$t, _templateObject8$p, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
 var Actions = function Actions(_ref) {
   var _getDisappearingSetti;
   var setActionsHeight = _ref.setActionsHeight,
@@ -44901,7 +45880,12 @@ var Actions = function Actions(_ref) {
     deleteAllMessagesIcon = _ref.deleteAllMessagesIcon,
     deleteAllMessagesTextColor = _ref.deleteAllMessagesTextColor,
     actionItemsFontSize = _ref.actionItemsFontSize,
-    borderColor = _ref.borderColor;
+    borderColor = _ref.borderColor,
+    commonGroupsOrder = _ref.commonGroupsOrder,
+    commonGroupsIcon = _ref.commonGroupsIcon,
+    commonGroupsIconColor = _ref.commonGroupsIconColor,
+    commonGroupsTextColor = _ref.commonGroupsTextColor,
+    showGroupsInCommon = _ref.showGroupsInCommon;
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -44938,14 +45922,17 @@ var Actions = function Actions(_ref) {
   var _useState9 = useState(false),
     disappearingMessagesPopupOpen = _useState9[0],
     setDisappearingMessagesPopupOpen = _useState9[1];
+  var _useState0 = useState(false),
+    groupsInCommonPopupOpen = _useState0[0],
+    setGroupsInCommonPopupOpen = _useState0[1];
   var _usePermissions = usePermissions(channel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState0 = useState(''),
-    popupButtonText = _useState0[0],
-    setPopupButtonText = _useState0[1];
   var _useState1 = useState(''),
-    popupTitle = _useState1[0],
-    setPopupTitle = _useState1[1];
+    popupButtonText = _useState1[0],
+    setPopupButtonText = _useState1[1];
+  var _useState10 = useState(''),
+    popupTitle = _useState10[0],
+    setPopupTitle = _useState10[1];
   var dispatch = useDispatch();
   var oneHour = 60 * 60 * 1000;
   var twoHours = oneHour * 2;
@@ -45038,6 +46025,9 @@ var Actions = function Actions(_ref) {
       dispatch(pinChannelAC(channel.id));
     }
   };
+  var handleToggleGroupsInCommonPopup = function handleToggleGroupsInCommonPopup() {
+    setGroupsInCommonPopupOpen(!groupsInCommonPopupOpen);
+  };
   var handleToggleDisappearingMessagesPopup = function handleToggleDisappearingMessagesPopup() {
     setDisappearingMessagesPopupOpen(!disappearingMessagesPopupOpen);
   };
@@ -45149,7 +46139,7 @@ var Actions = function Actions(_ref) {
     "$isLightMode": backgroundColor === '#FFFFFF'
   }), "Disappearing messages", /*#__PURE__*/React__default.createElement(DisappearingMessagesStatusWrapper, null, /*#__PURE__*/React__default.createElement(DisappearingMessagesStatus, {
     color: textSecondary
-  }, formatDisappearingMessageTime(channel.messageRetentionPeriod)), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+  }, formatDisappearingMessageTime(channel.messageRetentionPeriod)), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper$1, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
     color: iconPrimary
   })))))), showPinChannel && !channel.isMockChannel && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(ActionItem, {
     key: 2,
@@ -45175,7 +46165,17 @@ var Actions = function Actions(_ref) {
     color: markAsReadUnreadTextColor || textPrimary,
     hoverColor: markAsReadUnreadTextColor || textPrimary,
     fontSize: actionItemsFontSize
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markAsUnreadIcon || /*#__PURE__*/React__default.createElement(DefaultMarkAsUnRead, null), " Mark as unread")))), !isDirectChannel && showLeaveChannel && (/*#__PURE__*/React__default.createElement(ActionItem, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markAsUnreadIcon || /*#__PURE__*/React__default.createElement(DefaultMarkAsUnRead, null), " Mark as unread")))), !isSelfChannel && isDirectChannel && !channel.isMockChannel && showGroupsInCommon && (/*#__PURE__*/React__default.createElement(ActionItem, {
+    key: 4,
+    order: commonGroupsOrder,
+    iconColor: commonGroupsTextColor || iconPrimary,
+    color: commonGroupsIconColor || textPrimary,
+    hoverColor: commonGroupsTextColor || textPrimary,
+    fontSize: actionItemsFontSize,
+    onClick: handleToggleGroupsInCommonPopup
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, commonGroupsIcon || /*#__PURE__*/React__default.createElement(SvgUsers, null), "Groups in common", /*#__PURE__*/React__default.createElement(DisappearingMessagesStatusWrapper, null, /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper$1, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+    color: iconPrimary
+  })))))), !isDirectChannel && showLeaveChannel && (/*#__PURE__*/React__default.createElement(ActionItem, {
     key: 4,
     order: leaveChannelOrder,
     color: leaveChannelTextColor || warningColor,
@@ -45322,20 +46322,26 @@ var Actions = function Actions(_ref) {
     togglePopup: handleToggleDisappearingMessagesPopup,
     handleSetTimer: handleSetDisappearingMessagesTimer,
     currentTimer: channel.messageRetentionPeriod
+  })), groupsInCommonPopupOpen && (/*#__PURE__*/React__default.createElement(GroupsInCommonPopup, {
+    theme: theme,
+    togglePopup: handleToggleGroupsInCommonPopup,
+    user: channel.members.find(function (member) {
+      return member.id !== user.id;
+    })
   })));
 };
-var Container$n = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
+var Container$n = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
   return props.borderColor;
 });
-var ActionHeader = styled.div(_templateObject2$P || (_templateObject2$P = _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$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
+var ActionHeader = styled.div(_templateObject2$Q || (_templateObject2$Q = _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$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
-var ActionsMenu = styled.ul(_templateObject4$B || (_templateObject4$B = _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$w || (_templateObject5$w = _taggedTemplateLiteralLoose([""])));
-var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose([""])));
-var DefaultStarIcon = styled(SvgStar)(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose([""])));
-var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu = styled.ul(_templateObject4$C || (_templateObject4$C = _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$x || (_templateObject5$x = _taggedTemplateLiteralLoose([""])));
+var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled(SvgStar)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose([""])));
+var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled(SvgPin)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$f || (_templateObject1$f = _taggedTemplateLiteralLoose([""])));
@@ -45367,20 +46373,20 @@ var DisappearingMessagesStatusWrapper = styled.div(_templateObject18$3 || (_temp
 var DisappearingMessagesStatus = styled.span(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-style: normal;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (props) {
   return props.color;
 });
-var ChevronRightIconWrapper = styled.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
+var ChevronRightIconWrapper$1 = styled.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _rect$2, _rect2, _path$1v;
-function _extends$1z() {
-  return _extends$1z = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$2, _rect2, _path$1w;
+function _extends$1A() {
+  return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1z.apply(null, arguments);
+  }, _extends$1A.apply(null, arguments);
 }
 function SvgAddMember(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1z({
+  return /*#__PURE__*/createElement$1("svg", _extends$1A({
     width: 40,
     height: 40,
     viewBox: "0 0 40.01 40.01",
@@ -45400,35 +46406,35 @@ function SvgAddMember(props) {
     stroke: "#000",
     strokeOpacity: 0.08,
     strokeWidth: 0.5
-  })), _path$1v || (_path$1v = /*#__PURE__*/createElement$1("path", {
+  })), _path$1w || (_path$1w = /*#__PURE__*/createElement$1("path", {
     d: "M20 12a1 1 0 011 1v6h6a1 1 0 110 2h-6v6a1 1 0 11-2 0l-.001-6H13a1 1 0 110-2h5.999L19 13a1 1 0 011-1z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$1w;
-function _extends$1A() {
-  return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1x;
+function _extends$1B() {
+  return _extends$1B = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1A.apply(null, arguments);
+  }, _extends$1B.apply(null, arguments);
 }
 function SvgMoreVert(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1A({
+  return /*#__PURE__*/createElement$1("svg", _extends$1B({
     width: 4,
     height: 14,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1w || (_path$1w = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1x || (_path$1x = /*#__PURE__*/createElement$1("path", {
     d: "M.532 11.012c.355-.355.764-.533 1.228-.533.464 0 .874.178 1.228.533.355.354.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 13.113 0 12.704 0 12.24c0-.464.177-.873.532-1.228zm0-5.24c.355-.355.764-.532 1.228-.532.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 7.873 0 7.464 0 7c0-.464.177-.873.532-1.228zm2.456-2.784c-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 2.634 0 2.224 0 1.76 0 1.296.177.887.532.532.887.177 1.296 0 1.76 0c.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.874-.532 1.228z",
     fill: "#9B9DA8"
   })));
 }
 
-var _templateObject$V, _templateObject2$Q, _templateObject3$J;
+var _templateObject$W, _templateObject2$R, _templateObject3$K;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -45531,12 +46537,12 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     onClick: handleSave
   }, "Save"))));
 };
-var RolesSelect = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled.div(_templateObject2$Q || (_templateObject2$Q = _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$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled.div(_templateObject2$R || (_templateObject2$R = _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$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled.span(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
 function ResetLinkConfirmModal(_ref) {
   var _getInviteLinkOptions;
@@ -45573,7 +46579,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$p, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$D, _templateObject5$y, _templateObject6$v, _templateObject7$u, _templateObject8$q, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -46057,34 +47063,34 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
-var Tabs$1 = styled.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
+var LogoIconCont = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
+var Tabs$1 = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
   return p.backgroundColor;
 }, function (p) {
   return p.borderColor;
 });
-var TabButton = styled.button(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
+var TabButton = styled.button(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
   return p.active ? p.activeBackgroundColor : p.backgroundColor;
 }, function (p) {
   return p.active && "\n    box-shadow: 0px 3px 6px -4px #0000001F;\n  ";
 }, function (p) {
   return p.active ? p.activeColor : p.inactiveColor;
 });
-var Description = styled.p(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var Description = styled.p(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var FieldLabel = styled.span(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var FieldLabel = styled.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var LinkField = styled.div(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
+var LinkField = styled.div(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
   return p.borderColor;
 }, function (p) {
   return p.backgroundColor;
 });
-var LinkInput = styled.input(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
+var LinkInput = styled.input(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
-var CopyButton = styled.button(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
+var CopyButton = styled.button(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
 var CopyButtonWrapper = styled.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var SectionTitle = styled.h4(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
@@ -46105,7 +47111,7 @@ var QrHint = styled.p(_templateObject13$5 || (_templateObject13$5 = _taggedTempl
   return p.color;
 });
 
-var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q, _templateObject9$m;
+var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$E, _templateObject5$z, _templateObject6$w, _templateObject7$v, _templateObject8$r, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -46158,14 +47164,12 @@ var Members = function Members(_ref) {
   var _useState7 = useState(false),
     addMemberPopupOpen = _useState7[0],
     setAddMemberPopupOpen = _useState7[1];
-  var _useState8 = useState(false),
-    openInviteModal = _useState8[0],
-    setOpenInviteModal = _useState8[1];
-  var _useState9 = useState(),
-    closeMenu = _useState9[0],
-    setCloseMenu = _useState9[1];
+  var _useState8 = useState(),
+    closeMenu = _useState8[0],
+    setCloseMenu = _useState8[1];
   var members = useSelector(activeChannelMembersSelector) || [];
   var contactsMap = useSelector(contactsMapSelector) || {};
+  var openInviteModal = useSelector(openInviteModalSelector);
   var user = getClient().user;
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
   var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
@@ -46261,7 +47265,7 @@ var Members = function Members(_ref) {
     }
   };
   var handleOpenInviteModal = function handleOpenInviteModal() {
-    setOpenInviteModal(true);
+    dispatch(setOpenInviteModalAC(true));
     setAddMemberPopupOpen(false);
   };
   useEffect(function () {
@@ -46413,24 +47417,24 @@ var Members = function Members(_ref) {
     handleOpenInviteModal: handleOpenInviteModal
   })), openInviteModal && (/*#__PURE__*/React__default.createElement(InviteLinkModal, {
     onClose: function onClose() {
-      return setOpenInviteModal(false);
+      return dispatch(setOpenInviteModalAC(false));
     },
     SVGOrPNGLogoIcon: QRCodeIcon,
     channelId: channel.id
   })));
 };
-var Container$o = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
-var MemberNameWrapper = styled.div(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var MemberName$3 = styled.h4(_templateObject5$y || (_templateObject5$y = _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$o = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var MemberNamePresence = styled.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNameWrapper = styled.div(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled.h4(_templateObject5$z || (_templateObject5$z = _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$u || (_templateObject6$u = _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$w || (_templateObject6$w = _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$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var MemberItem$1 = styled.li(_templateObject8$q || (_templateObject8$q = _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$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MemberItem$1 = styled.li(_templateObject8$r || (_templateObject8$r = _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;
@@ -46447,7 +47451,7 @@ var RoleBadge = styled.span(_templateObject9$m || (_templateObject9$m = _taggedT
   return props.backgroundColor;
 });
 
-var _templateObject$Y;
+var _templateObject$Z;
 var MonthHeader = function MonthHeader(_ref) {
   var currentCreatedAt = _ref.currentCreatedAt,
     previousCreatedAt = _ref.previousCreatedAt,
@@ -46472,7 +47476,7 @@ var MonthHeader = function MonthHeader(_ref) {
   }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
   return monthComponent;
 };
-var MonthHeaderContainer = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
+var MonthHeaderContainer = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
   return props.padding || '9px 12px';
 }, function (props) {
   return props.fullWidth ? '100%' : 'auto';
@@ -46480,7 +47484,7 @@ var MonthHeaderContainer = styled.div(_templateObject$Y || (_templateObject$Y =
   return props.color;
 });
 
-var _templateObject$Z, _templateObject2$T;
+var _templateObject$_, _templateObject2$U;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
@@ -46532,21 +47536,21 @@ var Media = function Media(_ref) {
     currentMediaFile: mediaFile
   })));
 };
-var Container$p = styled.div(_templateObject$Z || (_templateObject$Z = _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$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var Container$p = styled.div(_templateObject$_ || (_templateObject$_ = _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$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
-var _rect$3, _path$1x;
-function _extends$1B() {
-  return _extends$1B = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$3, _path$1y;
+function _extends$1C() {
+  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1B.apply(null, arguments);
+  }, _extends$1C.apply(null, arguments);
 }
 function SvgDocumentIcon(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1B({
+  return /*#__PURE__*/createElement$1("svg", _extends$1C({
     width: 40,
     height: 40,
     fill: "none",
@@ -46557,7 +47561,7 @@ function SvgDocumentIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1x || (_path$1x = /*#__PURE__*/createElement$1("path", {
+  })), _path$1y || (_path$1y = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17.593 9.5c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.939-.687 1.864-.687 3.962v7.386c0 2.098.185 3.023.687 3.962a4.685 4.685 0 001.944 1.944c.939.502 1.864.686 3.962.686h3.957c2.098 0 3.023-.184 3.962-.687a4.685 4.685 0 001.944-1.944c.502-.938.687-1.863.687-3.961v-5.1c0-.683-.024-.99-.105-1.34a3.094 3.094 0 00-.399-.964c-.19-.305-.39-.54-.874-1.022l-4.175-4.175c-.483-.483-.717-.684-1.022-.874a3.096 3.096 0 00-.963-.4c-.294-.067-.556-.095-1.034-.102V9.5h-1.978zm0 1.714c-2.002 0-2.587.182-3.154.485a2.971 2.971 0 00-1.24 1.24c-.303.567-.485 1.152-.485 3.154v7.386c0 2.001.182 2.587.485 3.153a2.97 2.97 0 001.24 1.24c.567.304 1.152.485 3.154.485h3.957c2.001 0 2.587-.181 3.153-.484a2.97 2.97 0 001.241-1.241c.303-.566.485-1.152.485-3.153v-5.1c0-.118-.001-.22-.003-.308h-4.712a2.143 2.143 0 01-2.143-2.142l.002-4.713-.15-.001h-1.83zm3.785.876l-.092-.091v3.93c0 .21.151.385.351.421l.077.007 3.932.002-.093-.094-4.175-4.175zm-6.092 12.839c0-.474.383-.858.857-.858h3.428a.857.857 0 010 1.715h-3.428a.857.857 0 01-.857-.857zm.857-4.286a.857.857 0 100 1.714h6a.857.857 0 000-1.714h-6z",
@@ -46565,30 +47569,30 @@ function SvgDocumentIcon(props) {
   })));
 }
 
-var _path$1y;
-function _extends$1C() {
-  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1z;
+function _extends$1D() {
+  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1C.apply(null, arguments);
+  }, _extends$1D.apply(null, arguments);
 }
 function SvgDownloadFile(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1C({
+  return /*#__PURE__*/createElement$1("svg", _extends$1D({
     width: 24,
     height: 24,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor"
-  }, props), _path$1y || (_path$1y = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1z || (_path$1z = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12 2a.91.91 0 01.91.91v11.44l2.993-2.993a.91.91 0 011.285 1.286l-4.545 4.545a.91.91 0 01-1.286 0l-4.545-4.545a.909.909 0 111.285-1.286l2.994 2.994V2.909A.91.91 0 0112 2zM2.91 15.636a.91.91 0 01.908.91v1.136a2.5 2.5 0 002.5 2.5h11.364a2.5 2.5 0 002.5-2.5v-1.136a.91.91 0 111.818 0v1.136A4.318 4.318 0 0117.682 22H6.318A4.318 4.318 0 012 17.682v-1.136a.91.91 0 01.91-.91z"
   })));
 }
 
-var _templateObject$_, _templateObject2$U, _templateObject3$M, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$u, _templateObject8$r;
+var _templateObject$$, _templateObject2$V, _templateObject3$N, _templateObject4$F, _templateObject5$A, _templateObject6$x, _templateObject7$w, _templateObject8$s;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -46710,30 +47714,30 @@ var Files = function Files(_ref) {
     }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null))));
   }));
 };
-var Container$q = styled.ul(_templateObject$_ || (_templateObject$_ = _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$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
+var Container$q = styled.ul(_templateObject$$ || (_templateObject$$ = _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$V || (_templateObject2$V = _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$M || (_templateObject3$M = _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$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var ProgressWrapper$2 = styled.span(_templateObject3$N || (_templateObject3$N = _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$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled.span(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var FileHoverIconCont = styled.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileThumb = styled.img(_templateObject6$v || (_templateObject6$v = _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$u || (_templateObject7$u = _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$x || (_templateObject6$x = _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$w || (_templateObject7$w = _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$r || (_templateObject8$r = _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$s || (_templateObject8$s = _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';
@@ -46741,18 +47745,18 @@ var FileSizeAndDate = styled.span(_templateObject8$r || (_templateObject8$r = _t
   return props.color;
 });
 
-var _rect$4, _path$1z;
-function _extends$1D() {
-  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$4, _path$1A;
+function _extends$1E() {
+  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1D.apply(null, arguments);
+  }, _extends$1E.apply(null, arguments);
 }
 function SvgLinkIcon(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1D({
+  return /*#__PURE__*/createElement$1("svg", _extends$1E({
     width: 40,
     height: 40,
     fill: "none",
@@ -46764,7 +47768,7 @@ function SvgLinkIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1z || (_path$1z = /*#__PURE__*/createElement$1("path", {
+  })), _path$1A || (_path$1A = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M21.547 11.524a4.9 4.9 0 016.928 6.929l-.01.011-4 4a4.9 4.9 0 01-6.93 0 .9.9 0 011.273-1.273 3.1 3.1 0 004.384 0l3.994-3.994a3.1 3.1 0 00-4.384-4.383l-1.094 1.094a.9.9 0 01-1.272-1.273l1.1-1.1.01-.01zm-6.011 6.011a4.9 4.9 0 016.928 0 .9.9 0 11-1.272 1.273 3.1 3.1 0 00-4.384 0l-4 4-.01.011a3.1 3.1 0 104.383 4.384l.01-.012 1.103-1.1a.9.9 0 111.272 1.272l-1.097 1.096a4.9 4.9 0 11-6.928-6.929l3.995-3.995z",
@@ -46772,7 +47776,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$$, _templateObject2$V, _templateObject3$N, _templateObject4$F, _templateObject5$A;
+var _templateObject$10, _templateObject2$W, _templateObject3$O, _templateObject4$G, _templateObject5$B;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -46803,25 +47807,25 @@ var LinkItem = function LinkItem(_ref) {
     color: linkPreviewColor || textPrimary
   }, link))));
 };
-var LinkIconCont = styled.span(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var LinkIconCont = styled.span(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkHoverIconCont = styled.span(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var LinkHoverIconCont = styled.span(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
-var FileItem$1 = styled.li(_templateObject4$F || (_templateObject4$F = _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$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled.li(_templateObject4$G || (_templateObject4$G = _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$A || (_templateObject5$A = _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$B || (_templateObject5$B = _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$10;
+var _templateObject$11;
 var Links = function Links(_ref) {
   var channelId = _ref.channelId,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -46852,20 +47856,20 @@ var Links = function Links(_ref) {
     }));
   }));
 };
-var Container$r = styled.ul(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$r = styled.ul(_templateObject$11 || (_templateObject$11 = _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$1A;
-function _extends$1E() {
-  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$5, _path$1B;
+function _extends$1F() {
+  return _extends$1F = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1E.apply(null, arguments);
+  }, _extends$1F.apply(null, arguments);
 }
 function SvgVoicePreview(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1E({
+  return /*#__PURE__*/createElement$1("svg", _extends$1F({
     width: 40,
     height: 40,
     fill: "none",
@@ -46875,24 +47879,24 @@ function SvgVoicePreview(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1A || (_path$1A = /*#__PURE__*/createElement$1("path", {
+  })), _path$1B || (_path$1B = /*#__PURE__*/createElement$1("path", {
     d: "M27.536 18.696c.952.576.952 2.03 0 2.605l-9.918 5.997c-.944.57-2.118-.151-2.118-1.303V14.002c0-1.151 1.174-1.873 2.118-1.303l9.918 5.997z",
     fill: "#fff"
   })));
 }
 
-var _rect$6, _path$1B;
-function _extends$1F() {
-  return _extends$1F = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$6, _path$1C;
+function _extends$1G() {
+  return _extends$1G = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1F.apply(null, arguments);
+  }, _extends$1G.apply(null, arguments);
 }
 function SvgVoicePreviewPause(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1F({
+  return /*#__PURE__*/createElement$1("svg", _extends$1G({
     width: 40,
     height: 40,
     fill: "none",
@@ -46902,13 +47906,13 @@ function SvgVoicePreviewPause(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1B || (_path$1B = /*#__PURE__*/createElement$1("path", {
+  })), _path$1C || (_path$1C = /*#__PURE__*/createElement$1("path", {
     d: "M16.962 12.5c.535 0 .729.056.924.16.196.105.35.258.454.454.104.195.16.39.16.924v11.924c0 .535-.056.729-.16.924a1.09 1.09 0 01-.454.454c-.195.104-.39.16-.924.16h-1.424c-.535 0-.729-.056-.924-.16a1.09 1.09 0 01-.454-.454c-.104-.195-.16-.39-.16-.924V14.038c0-.535.056-.729.16-.924a1.09 1.09 0 01.454-.454c.195-.104.39-.16.924-.16h1.424zm7.5 0c.535 0 .729.056.924.16.196.105.35.258.454.454.104.195.16.39.16.924v11.924c0 .535-.056.729-.16.924a1.09 1.09 0 01-.454.454c-.195.104-.39.16-.924.16h-1.424c-.535 0-.729-.056-.924-.16a1.09 1.09 0 01-.454-.454c-.104-.195-.16-.39-.16-.924V14.038c0-.535.056-.729.16-.924a1.09 1.09 0 01.454-.454c.195-.104.39-.16.924-.16h1.424z",
     fill: "#fff"
   })));
 }
 
-var _templateObject$11, _templateObject2$W, _templateObject3$O, _templateObject4$G, _templateObject5$B, _templateObject6$w, _templateObject7$v, _templateObject8$s;
+var _templateObject$12, _templateObject2$X, _templateObject3$P, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$x, _templateObject8$t;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -47033,32 +48037,32 @@ var VoiceItem = function VoiceItem(_ref) {
     type: 'audio/mpeg'
   })));
 };
-var FileIconCont$1 = styled.span(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileIconCont$1 = styled.span(_templateObject$12 || (_templateObject$12 = _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$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont$1 = styled.span(_templateObject2$X || (_templateObject2$X = _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$O || (_templateObject3$O = _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$P || (_templateObject3$P = _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$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var AudioTitle = styled.span(_templateObject5$B || (_templateObject5$B = _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$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled.span(_templateObject5$C || (_templateObject5$C = _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$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled.span(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioSendTime = styled.span(_templateObject7$v || (_templateObject7$v = _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$x || (_templateObject7$x = _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$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var Audio = styled.audio(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$12;
+var _templateObject$13;
 var Voices = function Voices(_ref) {
   var channelId = _ref.channelId,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -47095,9 +48099,9 @@ var Voices = function Voices(_ref) {
     }));
   }));
 };
-var Container$s = styled.ul(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$s = styled.ul(_templateObject$13 || (_templateObject$13 = _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$13, _templateObject2$X;
+var _templateObject$14, _templateObject2$Y;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -47248,8 +48252,8 @@ var DetailsTab = function DetailsTab(_ref) {
     voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
   })));
 };
-var Container$t = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
-var DetailsTabHeader = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
+var Container$t = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
+var DetailsTabHeader = styled.div(_templateObject2$Y || (_templateObject2$Y = _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';
@@ -47267,17 +48271,17 @@ var DetailsTabHeader = styled.div(_templateObject2$X || (_templateObject2$X = _t
   return props.activeTabColor;
 });
 
-var _templateObject$14, _templateObject2$Y, _templateObject3$P, _templateObject4$H;
-var Container$u = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
+var _templateObject$15, _templateObject2$Z, _templateObject3$Q, _templateObject4$I;
+var Container$u = styled.div(_templateObject$15 || (_templateObject$15 = _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$Y || (_templateObject2$Y = _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$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
-var EditChannelFooter = styled(ButtonBlock)(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
+var AvatarCont = styled.div(_templateObject2$Z || (_templateObject2$Z = _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$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var EditChannelFooter = styled(ButtonBlock)(_templateObject4$I || (_templateObject4$I = _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,
@@ -47532,7 +48536,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$15, _templateObject2$Z, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$x, _templateObject7$w, _templateObject8$t, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
+var _templateObject$16, _templateObject2$_, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject6$z, _templateObject7$y, _templateObject8$u, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -47650,7 +48654,12 @@ var Details = function Details(_ref) {
     backgroundColor = _ref.backgroundColor,
     bordersColor = _ref.bordersColor,
     showPhoneNumber = _ref.showPhoneNumber,
-    QRCodeIcon = _ref.QRCodeIcon;
+    QRCodeIcon = _ref.QRCodeIcon,
+    commonGroupsOrder = _ref.commonGroupsOrder,
+    commonGroupsIcon = _ref.commonGroupsIcon,
+    commonGroupsIconColor = _ref.commonGroupsIconColor,
+    commonGroupsTextColor = _ref.commonGroupsTextColor,
+    showGroupsInCommon = _ref.showGroupsInCommon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -47821,7 +48830,7 @@ var Details = function Details(_ref) {
     size: channelAvatarSize || 72,
     textSize: channelAvatarTextSize || 26,
     setDefaultAvatar: isDirectChannel
-  }), /*#__PURE__*/React__default.createElement(ChannelInfo$4, {
+  }), /*#__PURE__*/React__default.createElement(ChannelInfo$5, {
     direction: avatarAndNameDirection
   }, /*#__PURE__*/React__default.createElement(ChannelNameWrapper, null, /*#__PURE__*/React__default.createElement(ChannelName$1, {
     isDirect: isDirectChannel,
@@ -47916,7 +48925,12 @@ var Details = function Details(_ref) {
     toggleable: false,
     timeOptionsToMuteNotifications: timeOptionsToMuteNotifications,
     actionItemsFontSize: actionItemsFontSize,
-    borderColor: bordersColor
+    borderColor: bordersColor,
+    commonGroupsOrder: commonGroupsOrder,
+    commonGroupsIcon: commonGroupsIcon,
+    commonGroupsIconColor: commonGroupsIconColor,
+    commonGroupsTextColor: commonGroupsTextColor,
+    showGroupsInCommon: showGroupsInCommon
   })), !(activeChannel && activeChannel.isMockChannel) && (/*#__PURE__*/React__default.createElement(DetailsTab, {
     theme: theme,
     channel: activeChannel,
@@ -47963,17 +48977,17 @@ var Details = function Details(_ref) {
     QRCodeIcon: QRCodeIcon
   }))));
 };
-var Container$v = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  width: 0;\n  border-left: 1px solid ", ";\n  //transition: all 0.1s;\n  ", "\n  background-color: ", ";\n}\n"])), function (props) {
+var Container$v = styled.div(_templateObject$16 || (_templateObject$16 = _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$Z || (_templateObject2$Z = _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$_ || (_templateObject2$_ = _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$Q || (_templateObject3$Q = _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$R || (_templateObject3$R = _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';
@@ -47982,21 +48996,21 @@ var ChatDetails = styled.div(_templateObject3$Q || (_templateObject3$Q = _tagged
 }, function (props) {
   return props.thumbColor;
 });
-var AboutChannel = styled.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var AboutChannelTitle = styled.h4(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AboutChannel = styled.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var AboutChannelTitle = styled.h4(_templateObject5$D || (_templateObject5$D = _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$x || (_templateObject6$x = _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$z || (_templateObject6$z = _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$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$5 = styled.div(_templateObject7$y || (_templateObject7$y = _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$t || (_templateObject8$t = _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$u || (_templateObject8$u = _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$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
@@ -48013,7 +49027,7 @@ var ChannelNameWrapper = styled.div(_templateObject1$h || (_templateObject1$h =
 var EditButton = styled.span(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 var PhoneNumberContainer = styled.span(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: text;\n"])));
 
-var _templateObject$16;
+var _templateObject$17;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -48126,7 +49140,12 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     tabItemsMinWidth = _ref.tabItemsMinWidth,
     bordersColor = _ref.bordersColor,
     showPhoneNumber = _ref.showPhoneNumber,
-    QRCodeIcon = _ref.QRCodeIcon;
+    QRCodeIcon = _ref.QRCodeIcon,
+    commonGroupsOrder = _ref.commonGroupsOrder,
+    commonGroupsIcon = _ref.commonGroupsIcon,
+    commonGroupsIconColor = _ref.commonGroupsIconColor,
+    commonGroupsTextColor = _ref.commonGroupsTextColor,
+    showGroupsInCommon = _ref.showGroupsInCommon;
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
   useEffect(function () {
     setShowChannelDetails(true);
@@ -48241,34 +49260,39 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     tabItemsLineHeight: tabItemsLineHeight,
     tabItemsMinWidth: tabItemsMinWidth,
     showPhoneNumber: showPhoneNumber,
-    QRCodeIcon: QRCodeIcon
+    QRCodeIcon: QRCodeIcon,
+    commonGroupsOrder: commonGroupsOrder,
+    commonGroupsIcon: commonGroupsIcon,
+    commonGroupsIconColor: commonGroupsIconColor,
+    commonGroupsTextColor: commonGroupsTextColor,
+    showGroupsInCommon: showGroupsInCommon
   })));
 };
-var DetailsWrapper = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
+var DetailsWrapper = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
 
-var _path$1C;
-function _extends$1G() {
-  return _extends$1G = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1D;
+function _extends$1H() {
+  return _extends$1H = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1G.apply(null, arguments);
+  }, _extends$1H.apply(null, arguments);
 }
 function SvgChevronDown(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1G({
+  return /*#__PURE__*/createElement$1("svg", _extends$1H({
     width: 32,
     height: 32,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1C || (_path$1C = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1D || (_path$1D = /*#__PURE__*/createElement$1("path", {
     d: "M9.298 12.937a1.056 1.056 0 10-1.374 1.603l7.39 6.333c.395.339.978.339 1.373 0l7.389-6.333a1.056 1.056 0 10-1.374-1.603L16 18.68l-6.702-5.744z",
     fill: "CurrentColor"
   })));
 }
 
-var _templateObject$17, _templateObject2$_;
+var _templateObject$18, _templateObject2$$;
 var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -48351,7 +49375,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$17 || (_templateObject$17 = _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$18 || (_templateObject$18 = _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";
@@ -48362,7 +49386,7 @@ var BottomButton = styled.div(_templateObject$17 || (_templateObject$17 = _tagge
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$1 = styled.span(_templateObject2$_ || (_templateObject2$_ = _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$$ || (_templateObject2$$ = _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';
@@ -48374,23 +49398,23 @@ var UnreadCount$1 = styled.span(_templateObject2$_ || (_templateObject2$_ = _tag
   return props.textColor || '#fff';
 });
 
-var _path$1D, _path2$d;
-function _extends$1H() {
-  return _extends$1H = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1E, _path2$d;
+function _extends$1I() {
+  return _extends$1I = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1H.apply(null, arguments);
+  }, _extends$1I.apply(null, arguments);
 }
 function SvgMention(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1H({
+  return /*#__PURE__*/createElement$1("svg", _extends$1I({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1D || (_path$1D = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1E || (_path$1E = /*#__PURE__*/createElement$1("path", {
     d: "M12 15.6a3.6 3.6 0 100-7.2 3.6 3.6 0 000 7.2z",
     stroke: "currentColor",
     strokeWidth: 1.8,
@@ -48405,7 +49429,7 @@ function SvgMention(props) {
   })));
 }
 
-var _templateObject$18, _templateObject2$$;
+var _templateObject$19, _templateObject2$10;
 var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentionsButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -48548,7 +49572,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$18 || (_templateObject$18 = _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$19 || (_templateObject$19 = _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";
@@ -48559,7 +49583,7 @@ var BottomButton$1 = styled.div(_templateObject$18 || (_templateObject$18 = _tag
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$2 = styled.span(_templateObject2$$ || (_templateObject2$$ = _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$10 || (_templateObject2$10 = _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';
@@ -48602,5 +49626,5 @@ var handleGetMessage = function handleGetMessage(channelId, messageId) {
   return store.dispatch(getMessageAC(channelId, messageId));
 };
 
-export { Attachment$1 as Attachment, Avatar, Channel, ChannelDetailsContainer as ChannelDetails, ChannelList, ChannelSearch, Chat, ChatHeader, CreateChannel, DropDown, EmojisPopup, FrequentlyEmojis, MESSAGE_TYPE, MessagesContainer as MessageList, MessageStatusIcon, MessageTextFormat, MessagesScrollToBottomButton, MessagesScrollToUnreadMentionsButton, OGMetadata, PollMessage, SceytChatContainer as SceytChat, SendMessageInput as SendMessage, THEME_COLORS, createOrGetDirectChannel, handleGetMessage, handleSendMessage, switchChannelActiveChannel };
+export { Attachment$1 as Attachment, Avatar, Channel, ChannelDetailsContainer as ChannelDetails, ChannelList, ChannelSearch, Chat, ChatHeader, CreateChannel, DropDown, EmojisPopup, FrequentlyEmojis, MESSAGE_TYPE, MessagesContainer as MessageList, MessageStatusIcon, MessageTextFormat, MessagesScrollToBottomButton, MessagesScrollToUnreadMentionsButton, OGMetadata, PollMessage, SceytChatContainer as SceytChat, SendMessageInput as SendMessage, THEME_COLORS, createOrGetDirectChannel, handleGetMessage, handleSendMessage, switchChannelActiveChannel, trimReactMessage };
 //# sourceMappingURL=index.modern.js.map