sceyt-chat-react-uikit 1.7.8-beta.16 → 1.7.8-beta.18

package/index.js

@@ -9028,6 +9028,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');
 };
@@ -9770,10 +9793,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',
@@ -12186,7 +12205,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;
@@ -13394,6 +13413,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() {
@@ -14121,6 +14143,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,
@@ -14316,6 +14347,173 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     return text;
   }
 };
+var isMentionNode = function isMentionNode(node) {
+  if (!node || typeof node !== 'object') return false;
+  if (node.props && node.props.className) {
+    var className = node.props.className;
+    if (typeof className === 'string' && className.includes('mention')) {
+      return true;
+    }
+    if (Array.isArray(className) && className.some(function (cls) {
+      return typeof cls === 'string' && cls.includes('mention');
+    })) {
+      return true;
+    }
+  }
+  return false;
+};
+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 (isMentionNode(part)) {
+        var nodeTextLength = _getNodeTextLength(part);
+        if (nodeTextLength <= remaining) {
+          result.push(part);
+          remaining -= nodeTextLength;
+        } else {
+          truncated = true;
+          break;
+        }
+      } else {
+        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);
@@ -19625,7 +19823,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:
@@ -19727,7 +19925,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;
@@ -19739,11 +19937,12 @@ function sendMessage(action) {
                 _context3.n = 10;
                 return effects.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) {
@@ -23646,6 +23845,24 @@ var useColors = function useColors() {
   }, [theme.colors, currentThemeMode]);
 };
 
+function useUpdatedUser(user) {
+  var dispatch = useDispatch();
+  var usersMap = useSelector(usersMapSelector);
+  React.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 React.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,
@@ -25818,30 +26035,43 @@ var Title$1 = styled__default.h4(_templateObject4$6 || (_templateObject4$6 = _ta
 });
 
 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;
@@ -26116,11 +26346,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',
@@ -28987,23 +29216,35 @@ var Progress = styled__default.input(_templateObject0$5 || (_templateObject0$5 =
 var FullScreenWrapper = styled__default.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();
@@ -29196,9 +29437,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,
@@ -29216,6 +29459,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() {
@@ -29231,9 +29479,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,
@@ -29271,9 +29521,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,
@@ -36447,7 +36699,7 @@ var OGTextWrapper = styled__default.div(_templateObject9$e || (_templateObject9$
 var FaviconContainer = styled__default.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__default.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,
@@ -36596,7 +36848,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],
@@ -36611,6 +36864,61 @@ var MessageBody = function MessageBody(_ref) {
   var user = ChatClient.user;
   var getFromContacts = getShowOnlyContactUsers();
   var messageUserID = message.user ? message.user.id : 'deleted';
+  var _useState = React.useState(false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var textContainerRef = React.useRef(null);
+  var _useState2 = React.useState('auto'),
+    textHeight = _useState2[0],
+    setTextHeight = _useState2[1];
+  var messageText = React.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 = React.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]);
+  React.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 = React.useMemo(function () {
     return prevMessage ? prevMessage.user ? prevMessage.user.id : 'deleted' : null;
   }, [prevMessage]);
@@ -36908,22 +37216,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 !== exports.MESSAGE_TYPE.POLL && (/*#__PURE__*/React__default.createElement("span", {
+  })), message.type !== exports.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,
@@ -37041,7 +37344,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__default.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;
@@ -37098,8 +37401,14 @@ var FrequentlyEmojisContainer = styled__default.div(_templateObject5$m || (_temp
 }, function (props) {
   return props.rtlDirection && '0';
 });
+var TextContentContainer = styled__default.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__default.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')) {
@@ -37594,10 +37903,10 @@ var Row$2 = styled__default.div(_templateObject4$s || (_templateObject4$s = _tag
   return p.backgroundHover;
 });
 var RowInfo = styled__default.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__default.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__default.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__default.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__default.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__default.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) {
@@ -37643,7 +37952,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,
@@ -37801,7 +38110,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],
@@ -37945,7 +38255,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() {
@@ -38334,7 +38654,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,
@@ -38473,8 +38794,8 @@ var FailedMessageIcon = styled__default.div(_templateObject5$o || (_templateObje
 }, function (props) {
   return props.rtl && '-24px';
 });
-var ErrorIconWrapper = styled__default(SvgErrorIcon)(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
-var SelectMessageWrapper = styled__default.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__default(SvgErrorIcon)(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
+var SelectMessageWrapper = styled__default.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;
@@ -38545,7 +38866,7 @@ var MessageItem = styled__default.div(_templateObject12$4 || (_templateObject12$
   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,
@@ -38735,7 +39056,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],
@@ -39596,7 +39918,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,
@@ -39659,12 +39982,12 @@ var DragAndDropContainer = styled__default.div(_templateObject5$p || (_templateO
 }, function (props) {
   return props.backgroundColor;
 });
-var IconWrapper$1 = styled__default.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__default.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__default.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__default.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';
@@ -39857,7 +40180,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,
@@ -39991,7 +40315,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     hiddenMessagesProperties: hiddenMessagesProperties,
     shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
     showInfoMessageProps: showInfoMessageProps,
-    ogMetadataProps: ogMetadataProps
+    ogMetadataProps: ogMetadataProps,
+    collapsedCharacterLimit: collapsedCharacterLimit
   }));
 };
 
@@ -40118,7 +40443,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) {
@@ -40242,11 +40566,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 = React.useRef(null);
   var contRef = React.useRef();
   var handleKeyDown = function handleKeyDown(event) {
     var code = event.code;
@@ -40287,13 +40616,22 @@ function MentionsContainer(_ref2) {
       setMentionsIsOpen(false);
     };
   }, []);
+  var handleScroll = React.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,
@@ -40316,7 +40654,8 @@ function MentionsPlugin(_ref3) {
     getFromContacts = _ref3.getFromContacts,
     setMentionMember = _ref3.setMentionMember,
     setMentionsIsOpen = _ref3.setMentionsIsOpen,
-    members = _ref3.members;
+    members = _ref3.members,
+    channelId = _ref3.channelId;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
   var _useState2 = React.useState(null),
@@ -40329,8 +40668,8 @@ function MentionsPlugin(_ref3) {
   var options = React.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) {
@@ -40372,13 +40711,14 @@ function MentionsPlugin(_ref3) {
       var selectedIndex = _ref4.selectedIndex,
         selectOptionAndCleanUp = _ref4.selectOptionAndCleanUp,
         setHighlightedIndex = _ref4.setHighlightedIndex;
-      return anchorElementRef.current && results.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
+      return anchorElementRef.current && options.length ? /*#__PURE__*/ReactDOM.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;
     }
   });
@@ -41336,7 +41676,7 @@ function FormatMessagePlugin(_ref3) {
   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) {
@@ -41562,8 +41902,8 @@ var EmojiCollection$1 = styled__default.span(_templateObject4$w || (_templateObj
   return props.iconColor;
 });
 var CollectionPointer$1 = styled__default.span(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose([""])));
-var AllEmojis$1 = styled__default.ul(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
-var EmojiFooter$1 = styled__default.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__default.ul(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
+var EmojiFooter$1 = styled__default.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;
@@ -41769,7 +42109,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,
@@ -42411,7 +42751,7 @@ var AudioVisualization$1 = styled__default.div(_templateObject4$x || (_templateO
 var PlayPause$1 = styled__default.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__default.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__default.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) {
@@ -42421,7 +42761,7 @@ var Canvas = styled__default.canvas(_templateObject6$o || (_templateObject6$o =
   var hide = _ref0.hide;
   return hide && '-1';
 });
-var Timer$2 = styled__default.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__default.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;
 });
 
@@ -42476,7 +42816,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;
@@ -42875,7 +43215,7 @@ var OptionRow = styled__default.div(_templateObject5$t || (_templateObject5$t =
 }, function (props) {
   return props.isDragging ? 0.6 : 1;
 });
-var RemoveOptionIcon = styled__default(SvgClose)(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  opacity: ", ";\n"])), function (props) {
+var RemoveOptionIcon = styled__default(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;
@@ -42884,7 +43224,7 @@ var RemoveOptionIcon = styled__default(SvgClose)(_templateObject6$p || (_templat
 }, function (props) {
   return props.disabled ? 0.5 : 1;
 });
-var AddOptionButton = styled__default.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__default.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';
@@ -42896,7 +43236,7 @@ var SettingItem = styled__default.div(_templateObject9$i || (_templateObject9$i
   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 = LexicalComposerContext.useLexicalComposerContext(),
@@ -44014,7 +44354,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     setMentionedUsers([]);
   }, [activeChannel.id]);
   React.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) {
@@ -44502,7 +44842,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(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React__default.createElement(LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React__default.createElement("div", {
       onKeyDown: handleSendEditMessage,
@@ -44582,10 +44923,10 @@ var EditMessageText = styled__default.p(_templateObject4$z || (_templateObject4$
 var UploadErrorMessage = styled__default.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__default.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__default.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__default.span(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
+var UserName$1 = styled__default.span(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
 var ReplyMessageBody$1 = styled__default.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;
 });
@@ -45056,7 +45397,7 @@ var StyledPopupName = styled__default(PopupName)(_templateObject$S || (_template
 var StyledPopupDescription = styled__default(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__default(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'
@@ -45308,13 +45649,13 @@ var CustomSelectWrapper = styled__default.div(_templateObject4$A || (_templateOb
   return props.accentColor;
 });
 var CustomSelectTriggerStyled = styled__default(CustomSelectTrigger)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  text-transform: none;\n"])));
-var CustomDropdownOptionLi = styled__default(DropdownOptionLi)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n"])));
-var CustomDropdownOptionsUl = styled__default(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__default(DropdownOptionLi)(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n"])));
+var CustomDropdownOptionsUl = styled__default(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__default(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;
+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');
@@ -45411,7 +45752,6 @@ var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
     }
   }, [mutualChannelsHasNext, isLoading, dispatch]);
   React.useEffect(function () {
-    console.log('connectionStatus', connectionStatus, 'mutualChannels', !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length), 'user', user === null || user === void 0 ? void 0 : user.id);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED && !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length)) {
       if (user !== null && user !== void 0 && user.id) {
         dispatch(getChannelsWithUserAC(user.id));
@@ -45484,15 +45824,15 @@ var ChannelTitle$1 = styled__default.div(_templateObject4$B || (_templateObject4
 var ChannelMembers$1 = styled__default.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__default.div(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
+var LoadingText$1 = styled__default.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__default.div(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 40px 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
+var EmptyText = styled__default.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__default.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$t, _templateObject7$s, _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 _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,
@@ -46026,8 +46366,8 @@ var MenuTriggerIcon = styled__default.span(_templateObject3$J || (_templateObjec
 });
 var ActionsMenu = styled__default.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__default(SvgUnmuteNotifications)(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose([""])));
-var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose([""])));
-var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose([""])));
+var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose([""])));
 var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
@@ -46266,7 +46606,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q, _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,
@@ -46769,12 +47109,12 @@ var Description = styled__default.p(_templateObject4$D || (_templateObject4$D =
 var FieldLabel = styled__default.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__default.div(_templateObject6$u || (_templateObject6$u = _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__default.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__default.input(_templateObject7$t || (_templateObject7$t = _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__default.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__default.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"])));
@@ -46798,7 +47138,7 @@ var QrHint = styled__default.p(_templateObject13$5 || (_templateObject13$5 = _ta
   return p.color;
 });
 
-var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$u, _templateObject8$r, _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,
@@ -47117,10 +47457,10 @@ var MemberNameWrapper = styled__default.div(_templateObject4$E || (_templateObje
 var MemberName$3 = styled__default.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__default.span(_templateObject6$v || (_templateObject6$v = _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__default.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__default.ul(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MembersList = styled__default.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__default.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) {
@@ -47279,7 +47619,7 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$$, _templateObject2$V, _templateObject3$N, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$v, _templateObject8$s;
+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,
@@ -47420,8 +47760,8 @@ var FileHoverIconCont = styled__default.span(_templateObject5$A || (_templateObj
 }, function (props) {
   return props.fillColor;
 });
-var FileThumb = styled__default.img(_templateObject6$w || (_templateObject6$w = _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__default.div(_templateObject7$v || (_templateObject7$v = _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__default.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__default.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__default.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) {
@@ -47599,7 +47939,7 @@ function SvgVoicePreviewPause(props) {
   })));
 }
 
-var _templateObject$12, _templateObject2$X, _templateObject3$P, _templateObject4$H, _templateObject5$C, _templateObject6$x, _templateObject7$w, _templateObject8$t;
+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,
@@ -47741,10 +48081,10 @@ var AudioInfo = styled__default.div(_templateObject4$H || (_templateObject4$H =
 var AudioTitle = styled__default.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__default.span(_templateObject6$x || (_templateObject6$x = _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__default.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__default.span(_templateObject7$w || (_templateObject7$w = _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__default.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__default.audio(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
@@ -48223,7 +48563,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$16, _templateObject2$_, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject6$y, _templateObject7$x, _templateObject8$u, _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,
@@ -48687,10 +49027,10 @@ var AboutChannel = styled__default.div(_templateObject4$J || (_templateObject4$J
 var AboutChannelTitle = styled__default.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__default.h3(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var AboutChannelText = styled__default.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$5 = styled__default.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$5 = styled__default.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';
@@ -49339,4 +49679,5 @@ exports.createOrGetDirectChannel = createOrGetDirectChannel;
 exports.handleGetMessage = handleGetMessage;
 exports.handleSendMessage = handleSendMessage;
 exports.switchChannelActiveChannel = switchChannelActiveChannel;
+exports.trimReactMessage = trimReactMessage;
 //# sourceMappingURL=index.js.map