@sendbird/uikit-react 3.4.6 → 3.4.7-0

package/cjs/ui/MessageContent.js

@@ -1,16 +1,15 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-c2313dcd.js');
-var tslib_es6 = require('../tslib.es6-8f4b0cfe.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-c5955c81.js');
 var React = require('react');
-var index$1 = require('../index-71173fef.js');
+var index$1 = require('../index-f65677b1.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-0dff9958.js');
+var ui_MessageStatus = require('../index-900dd19f.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-b8a20afd.js');
+var ui_Label = require('../index-73643285.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -19,54 +18,54 @@ var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../index-2ac1f908.js');
-var UserProfileContext = require('../UserProfileContext-617420c9.js');
-var LocalizationContext = require('../LocalizationContext-498cb747.js');
+var index = require('../index-f2146bae.js');
+var UserProfileContext = require('../UserProfileContext-f068b0ba.js');
+var LocalizationContext = require('../LocalizationContext-af96cf5f.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-f3ee01a0.js');
+var useLongPress = require('../useLongPress-d9deb354.js');
 var ui_Icon = require('./Icon.js');
 var ui_BottomSheet = require('./BottomSheet.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var MediaQueryContext = require('../MediaQueryContext-b9c2ec1f.js');
+var MediaQueryContext = require('../MediaQueryContext-8ec3f647.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-e22c9d25.js');
+var _const = require('../const-6691e574.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-require('../index-8b6bb1ee.js');
-require('../uuid-1ffa3b79.js');
+require('../index-83d1d15e.js');
+require('../uuid-0b4ed44c.js');
 require('prop-types');
 require('../sendbirdSelectors.js');
-require('../topics-c8adbede.js');
-require('../utils-1038446c.js');
+require('../topics-825e5d42.js');
+require('../utils-d5176360.js');
 require('./Button.js');
-require('../stringSet-061fe0c1.js');
+require('../stringSet-68748705.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-a4887600.js');
-require('../index-ac1b0ab9.js');
+require('../index-6cb4a530.js');
+require('../index-4ee95667.js');
 require('./IconButton.js');
-require('../types-beecfca4.js');
+require('../types-24accb8d.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('./ReactionBadge.js');
-require('../tokenize-7e34a56e.js');
-require('../index-ddcf90b1.js');
-require('../index.module-cf39e3b9.js');
+require('../tokenize-d86ab0c7.js');
+require('../index-0b344bd7.js');
+require('../index.module-9f5edc7b.js');
 require('../Message/context.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../consts-ad849467.js');
+require('../consts-bc27beff.js');
 require('./TextButton.js');
-require('../color-7f7508e6.js');
-require('../consts-46fa3a3a.js');
+require('../color-afeb8dc2.js');
+require('../consts-a422c2f9.js');
 require('../withSendbird.js');
-require('../index-67f813a3.js');
+require('../index-68c57136.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-cd680348.js');
-require('../consts-8605e767.js');
+require('../index-9d518988.js');
+require('../consts-a5382bc1.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
 
@@ -74,31 +73,35 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var MobileContextMenu = function (props) {
-  var _a;
-  var hideMenu = props.hideMenu,
-    channel = props.channel,
-    message = props.message,
-    replyType = props.replyType,
-    userId = props.userId,
-    resendMessage = props.resendMessage,
-    showEdit = props.showEdit,
-    showRemove = props.showRemove,
-    setQuoteMessage = props.setQuoteMessage,
-    parentRef = props.parentRef;
-  var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
-  var stringSet = LocalizationContext.useLocalization().stringSet;
-  var showMenuItemCopy = index.isUserMessage(message);
-  var showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
-  var showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
-  var showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
-  var showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message);
-  var showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast);
-  var fileMessage = message;
+const MobileContextMenu = props => {
+  var _message$sender;
+  const {
+    hideMenu,
+    channel,
+    message,
+    replyType,
+    userId,
+    resendMessage,
+    showEdit,
+    showRemove,
+    setQuoteMessage,
+    parentRef
+  } = props;
+  const isByMe = (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId;
+  const {
+    stringSet
+  } = LocalizationContext.useLocalization();
+  const showMenuItemCopy = index.isUserMessage(message);
+  const showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
+  const showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  const showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
+  const showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message);
+  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
+  const fileMessage = message;
   return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
     isOpen: true,
-    menuItems: function () {
-      var _a;
+    menuItems: () => {
+      var _message$threadInfo;
       return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
         className: "sendbird-message__mobile-context-menu",
         parentRef: parentRef,
@@ -106,7 +109,7 @@ var MobileContextMenu = function (props) {
         closeDropdown: hideMenu
       }, showMenuItemCopy && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-copy",
-        onClick: function () {
+        onClick: () => {
           hideMenu();
           index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
         }
@@ -119,7 +122,7 @@ var MobileContextMenu = function (props) {
         height: "24px"
       })), showMenuItemReply && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-reply",
-        onClick: function () {
+        onClick: () => {
           hideMenu();
           setQuoteMessage(message);
         },
@@ -133,7 +136,7 @@ var MobileContextMenu = function (props) {
         height: "24px"
       })), showMenuItemEdit && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-edit",
-        onClick: function () {
+        onClick: () => {
           hideMenu();
           showEdit(true);
         }
@@ -146,7 +149,7 @@ var MobileContextMenu = function (props) {
         height: "24px"
       })), showMenuItemResend && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-resend",
-        onClick: function () {
+        onClick: () => {
           hideMenu();
           resendMessage(message);
         }
@@ -159,11 +162,11 @@ var MobileContextMenu = function (props) {
         height: "24px"
       })), showMenuItemDelete && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-delete",
-        onClick: function () {
+        onClick: () => {
           hideMenu();
           showRemove(true);
         },
-        disable: ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0
+        disable: (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0
       }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
         type: ui_Label.LabelTypography.SUBTITLE_1
       }, stringSet.MESSAGE_MENU__DELETE), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
@@ -173,7 +176,7 @@ var MobileContextMenu = function (props) {
         height: "24px"
       })), showMenuItemDownload && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-save",
-        onClick: function () {
+        onClick: () => {
           hideMenu();
         }
       }, /*#__PURE__*/React__default["default"].createElement("a", {
@@ -193,40 +196,42 @@ var MobileContextMenu = function (props) {
   });
 };
 
-var EMOJI_SIZE = 38;
-var MobileBottomSheet = function (props) {
-  var _a;
-  var hideMenu = props.hideMenu,
-    channel = props.channel,
-    emojiContainer = props.emojiContainer,
-    message = props.message,
-    replyType = props.replyType,
-    userId = props.userId,
-    resendMessage = props.resendMessage,
-    toggleReaction = props.toggleReaction,
-    isReactionEnabled = props.isReactionEnabled,
-    showEdit = props.showEdit,
-    showRemove = props.showRemove,
-    setQuoteMessage = props.setQuoteMessage;
-  var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
-  var stringSet = LocalizationContext.useLocalization().stringSet;
-  var showMenuItemCopy = index.isUserMessage(message);
-  var showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
-  var showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
-  var showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
-  var showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message);
-  var showReaction = !index.isFailedMessage(message) && !index.isPendingMessage(message) && isReactionEnabled;
-  var showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast);
-  var disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
-  var fileMessage = message;
-  var maxEmojisPerRow = Math.floor((window === null || window === void 0 ? void 0 : window.innerWidth) / EMOJI_SIZE) - 1;
-  var _b = React.useState(false),
-    showEmojisOnly = _b[0],
-    setShowEmojisOnly = _b[1];
-  var emojis = index.getEmojiListAll(emojiContainer);
+const EMOJI_SIZE = 38;
+const MobileBottomSheet = props => {
+  var _message$sender, _window;
+  const {
+    hideMenu,
+    channel,
+    emojiContainer,
+    message,
+    replyType,
+    userId,
+    resendMessage,
+    toggleReaction,
+    isReactionEnabled,
+    showEdit,
+    showRemove,
+    setQuoteMessage
+  } = props;
+  const isByMe = (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId;
+  const {
+    stringSet
+  } = LocalizationContext.useLocalization();
+  const showMenuItemCopy = index.isUserMessage(message);
+  const showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
+  const showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  const showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
+  const showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message);
+  const showReaction = !index.isFailedMessage(message) && !index.isPendingMessage(message) && isReactionEnabled;
+  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
+  const disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
+  const fileMessage = message;
+  const maxEmojisPerRow = Math.floor(((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) / EMOJI_SIZE) - 1;
+  const [showEmojisOnly, setShowEmojisOnly] = React.useState(false);
+  const emojis = index.getEmojiListAll(emojiContainer);
   // calculate max emojis that can be shown in screen
-  var visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
-  var canShowMoreEmojis = emojis.length > maxEmojisPerRow;
+  const visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
+  const canShowMoreEmojis = emojis.length > maxEmojisPerRow;
   return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
     onBackdropClick: hideMenu
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -236,20 +241,19 @@ var MobileBottomSheet = function (props) {
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "sendbird-message__bottomsheet-reaction-bar"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "\n                    sendbird-message__bottomsheet-reaction-bar__row\n                    ".concat(showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : '', "\n                  ")
-  }, visibleEmojis.map(function (emoji) {
-    var _a, _b, _c;
-    var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.filter(function (reaction) {
-      return reaction.key === emoji.key;
-    })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
-      return reactorId === userId;
-    });
+    className: `
+                    sendbird-message__bottomsheet-reaction-bar__row
+                    ${showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : ''}
+                  `
+  }, visibleEmojis.map(emoji => {
+    var _message$reactions, _message$reactions$fi, _message$reactions$fi2;
+    const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.filter(reaction => reaction.key === emoji.key)[0]) === null || _message$reactions$fi === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions$fi.userIds) === null || _message$reactions$fi2 === void 0 ? void 0 : _message$reactions$fi2.some(reactorId => reactorId === userId);
     return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
       key: emoji.key,
-      width: "".concat(EMOJI_SIZE, "px"),
-      height: "".concat(EMOJI_SIZE, "px"),
+      width: `${EMOJI_SIZE}px`,
+      height: `${EMOJI_SIZE}px`,
       selected: isReacted,
-      onClick: function () {
+      onClick: () => {
         hideMenu();
         toggleReaction(message, emoji.key, isReacted);
       }
@@ -257,43 +261,39 @@ var MobileBottomSheet = function (props) {
       url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
       width: "28px",
       height: "28px",
-      placeHolder: function (style) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          style: style
-        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-          type: ui_Icon.IconTypes.QUESTION,
-          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-          width: "28px",
-          height: "28px"
-        }));
-      }
+      placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.QUESTION,
+        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+        width: "28px",
+        height: "28px"
+      }))
     }));
   }), canShowMoreEmojis && !showEmojisOnly && /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
     key: "emoji_more",
     width: "38px",
     height: "38px",
-    onClick: function () {
+    onClick: () => {
       setShowEmojisOnly(true);
     }
   }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
     url: '',
     width: "28px",
     height: "28px",
-    placeHolder: function (style) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        style: style
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: ui_Icon.IconTypes.EMOJI_MORE,
-        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-        width: "28px",
-        height: "28px"
-      }));
-    }
+    placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      type: ui_Icon.IconTypes.EMOJI_MORE,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+      width: "28px",
+      height: "28px"
+    }))
   }))))), !showEmojisOnly && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--actions"
   }, showMenuItemCopy && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: function () {
+    onClick: () => {
       hideMenu();
       index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
     }
@@ -306,7 +306,7 @@ var MobileBottomSheet = function (props) {
     type: ui_Label.LabelTypography.SUBTITLE_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY)), showMenuItemEdit && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: function () {
+    onClick: () => {
       hideMenu();
       showEdit(true);
     }
@@ -319,7 +319,7 @@ var MobileBottomSheet = function (props) {
     type: ui_Label.LabelTypography.SUBTITLE_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__EDIT)), showMenuItemResend && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: function () {
+    onClick: () => {
       hideMenu();
       resendMessage(message);
     }
@@ -331,10 +331,12 @@ var MobileBottomSheet = function (props) {
   }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: ui_Label.LabelTypography.SUBTITLE_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__RESEND)), showMenuItemReply && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-message__bottomsheet--action\n                      ".concat(disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : '', "\n                    "),
+    className: `sendbird-message__bottomsheet--action
+                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
+                    `,
     role: "menuitem",
     "aria-disabled": disableReaction ? true : false,
-    onClick: function () {
+    onClick: () => {
       if (!disableReaction) {
         hideMenu();
         setQuoteMessage(message);
@@ -350,7 +352,7 @@ var MobileBottomSheet = function (props) {
     color: disableReaction && ui_Label.LabelColors.ONBACKGROUND_4
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__REPLY)), showMenuItemDelete && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: function () {
+    onClick: () => {
       hideMenu();
       showRemove(true);
     }
@@ -363,7 +365,7 @@ var MobileBottomSheet = function (props) {
     type: ui_Label.LabelTypography.SUBTITLE_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__DELETE)), showMenuItemDownload && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: function () {
+    onClick: () => {
       hideMenu();
     }
   }, /*#__PURE__*/React__default["default"].createElement("a", {
@@ -381,23 +383,24 @@ var MobileBottomSheet = function (props) {
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__SAVE))))));
 };
 
-var MobileMenu = function (props) {
-  var message = props.message,
-    hideMenu = props.hideMenu,
-    userId = props.userId,
-    channel = props.channel,
-    _a = props.isReactionEnabled,
-    isReactionEnabled = _a === void 0 ? false : _a,
-    isByMe = props.isByMe,
-    replyType = props.replyType,
-    disabled = props.disabled,
-    showRemove = props.showRemove,
-    showEdit = props.showEdit,
-    resendMessage = props.resendMessage,
-    setQuoteMessage = props.setQuoteMessage,
-    emojiContainer = props.emojiContainer,
-    toggleReaction = props.toggleReaction,
-    parentRef = props.parentRef;
+const MobileMenu = props => {
+  const {
+    message,
+    hideMenu,
+    userId,
+    channel,
+    isReactionEnabled = false,
+    isByMe,
+    replyType,
+    disabled,
+    showRemove,
+    showEdit,
+    resendMessage,
+    setQuoteMessage,
+    emojiContainer,
+    toggleReaction,
+    parentRef
+  } = props;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isReactionEnabled ? /*#__PURE__*/React__default["default"].createElement(MobileBottomSheet, {
     channel: channel,
     message: message,
@@ -429,75 +432,78 @@ var MobileMenu = function (props) {
   }));
 };
 
-function MessageContent(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  var className = _a.className,
-    userId = _a.userId,
-    channel = _a.channel,
-    message = _a.message,
-    _l = _a.disabled,
-    disabled = _l === void 0 ? false : _l,
-    _m = _a.chainTop,
-    chainTop = _m === void 0 ? false : _m,
-    _o = _a.chainBottom,
-    chainBottom = _o === void 0 ? false : _o,
-    _p = _a.isReactionEnabled,
-    isReactionEnabled = _p === void 0 ? false : _p,
-    _q = _a.disableQuoteMessage,
-    disableQuoteMessage = _q === void 0 ? false : _q,
-    replyType = _a.replyType,
-    threadReplySelectType = _a.threadReplySelectType,
-    nicknamesMap = _a.nicknamesMap,
-    emojiContainer = _a.emojiContainer,
-    scrollToMessage = _a.scrollToMessage,
-    showEdit = _a.showEdit,
-    showRemove = _a.showRemove,
-    showFileViewer = _a.showFileViewer,
-    resendMessage = _a.resendMessage,
-    toggleReaction = _a.toggleReaction,
-    setQuoteMessage = _a.setQuoteMessage,
-    onReplyInThread = _a.onReplyInThread,
-    onQuoteMessageClick = _a.onQuoteMessageClick;
-  var messageTypes = index.getUIKitMessageTypes();
-  var dateLocale = LocalizationContext.useLocalization().dateLocale;
-  var config = ((useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}).config;
-  var _r = React.useContext(UserProfileContext.UserProfileContext),
-    disableUserProfile = _r.disableUserProfile,
-    renderUserProfile = _r.renderUserProfile;
-  var avatarRef = React.useRef(null);
-  var contentRef = React.useRef(null);
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-  var _s = React.useState(false),
-    showMenu = _s[0],
-    setShowMenu = _s[1];
-  var _t = React.useState(false),
-    mouseHover = _t[0],
-    setMouseHover = _t[1];
-  var _u = React.useState(false),
-    supposedHover = _u[0],
-    setSupposedHover = _u[1];
-  var isByMe = userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
-  var isByMeClassName = isByMe ? 'outgoing' : 'incoming';
-  var chainTopClassName = chainTop ? 'chain-top' : '';
-  var isReactionEnabledInChannel = isReactionEnabled && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral);
-  var isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
-  var supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
-  var useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage) && !disableQuoteMessage);
-  var useReplyingClassName = useReplying ? 'use-quote' : '';
+// should initialize in UserProfileContext.jsx
+
+function MessageContent(_ref) {
+  var _sender, _message$threadInfo, _message$isAdminMessa, _channel$members2, _channel$members2$fin, _message$parentMessag, _message$reactions, _message$isUserMessag, _message$isFileMessag;
+  let {
+    className,
+    userId,
+    channel,
+    message,
+    disabled = false,
+    chainTop = false,
+    chainBottom = false,
+    isReactionEnabled = false,
+    disableQuoteMessage = false,
+    replyType,
+    threadReplySelectType,
+    nicknamesMap,
+    emojiContainer,
+    scrollToMessage,
+    showEdit,
+    showRemove,
+    showFileViewer,
+    resendMessage,
+    toggleReaction,
+    setQuoteMessage,
+    onReplyInThread,
+    onQuoteMessageClick,
+    onMessageHeightChange
+  } = _ref;
+  const messageTypes = index.getUIKitMessageTypes();
+  const {
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const {
+    config
+  } = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {};
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  const avatarRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+  const [showMenu, setShowMenu] = React.useState(false);
+  const [mouseHover, setMouseHover] = React.useState(false);
+  const [supposedHover, setSupposedHover] = React.useState(false);
+  const isByMe = userId === (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
+  const isByMeClassName = isByMe ? 'outgoing' : 'incoming';
+  const chainTopClassName = chainTop ? 'chain-top' : '';
+  const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
+  const isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
+  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
+  const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
+  const useReplyingClassName = useReplying ? 'use-quote' : '';
+
   // Thread replies
-  var displayThreadReplies = ((_c = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _c === void 0 ? void 0 : _c.replyCount) > 0 && replyType === 'THREAD';
+  const displayThreadReplies = (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0 && replyType === 'THREAD';
+
   // onMouseDown: (e: React.MouseEvent<T>) => void;
   // onTouchStart: (e: React.TouchEvent<T>) => void;
   // onMouseUp: (e: React.MouseEvent<T>) => void;
   // onMouseLeave: (e: React.MouseEvent<T>) => void;
   // onTouchEnd: (e: React.TouchEvent<T>) => void;
-  var longPress = useLongPress.useLongPress({
-    onLongPress: function () {
+  const longPress = useLongPress.useLongPress({
+    onLongPress: () => {
       if (isMobile) {
         setShowMenu(true);
       }
     },
-    onClick: function () {
+    onClick: () => {
       // @ts-ignore
       if (isMobile && index.isThumbnailMessage(message) && index.isSentMessage(message)) {
         showFileViewer(true);
@@ -506,70 +512,64 @@ function MessageContent(_a) {
   }, {
     delay: 300
   });
-  if (((_d = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _d === void 0 ? void 0 : _d.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+  if (message !== null && message !== void 0 && (_message$isAdminMessa = message.isAdminMessage) !== null && _message$isAdminMessa !== void 0 && _message$isAdminMessa.call(message) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
     return /*#__PURE__*/React__default["default"].createElement(ui_AdminMessage, {
       message: message
     });
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-message-content', isByMeClassName]),
-    onMouseOver: function () {
-      return setMouseHover(true);
-    },
-    onMouseLeave: function () {
-      return setMouseHover(false);
-    }
+    onMouseOver: () => setMouseHover(true),
+    onMouseLeave: () => setMouseHover(false)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])
   }, !isByMe && !chainBottom &&
   /*#__PURE__*/
   /** user profile */
   React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      var _a, _b, _c;
+    menuTrigger: toggleDropdown => {
+      var _channel$members, _channel$members$find, _message$sender2;
       return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : '')
+        className: `sendbird-message-content__left__avatar ${displayThreadReplies ? 'use-thread-replies' : ''}`
         // @ts-ignore
         ,
-        src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
-          var _a;
-          return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
-        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.profileUrl) || ''
+        src: (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : (_channel$members$find = _channel$members.find(member => {
+          var _message$sender;
+          return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
+        })) === null || _channel$members$find === void 0 ? void 0 : _channel$members$find.profileUrl) || (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.profileUrl) || ''
         // TODO: Divide getting profileUrl logic to utils
         ,
         ref: avatarRef,
         width: "28px",
         height: "28px",
-        onClick: function () {
+        onClick: () => {
           if (!disableUserProfile) toggleDropdown();
         }
       });
     },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems
-      /**
-      * parentRef: For catching location(x, y) of MenuItems
-      * parentContainRef: For toggling more options(menus & reactions)
-      */, {
-        parentRef: avatarRef,
-        parentContainRef: avatarRef,
-        closeDropdown: closeDropdown,
-        style: {
-          paddingTop: '0px',
-          paddingBottom: '0px'
-        }
-      }, renderUserProfile
-      // @ts-ignore
-      ? renderUserProfile({
-        user: message === null || message === void 0 ? void 0 : message.sender,
-        close: closeDropdown
-      })
-      // @ts-ignore
-      : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-        user: message.sender,
-        onSuccess: closeDropdown
-      }));
-    }
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems
+    /**
+    * parentRef: For catching location(x, y) of MenuItems
+    * parentContainRef: For toggling more options(menus & reactions)
+    */, {
+      parentRef: avatarRef,
+      parentContainRef: avatarRef,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile
+    // @ts-ignore
+    ? renderUserProfile({
+      user: message === null || message === void 0 ? void 0 : message.sender,
+      close: closeDropdown
+    })
+    // @ts-ignore
+    : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+      user: message.sender,
+      onSuccess: closeDropdown
+    }))
   }), isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])
   }, /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
@@ -584,11 +584,13 @@ function MessageContent(_a) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover,
-    onReplyInThread: function (_a) {
-      var message = _a.message;
+    onReplyInThread: _ref2 => {
+      let {
+        message
+      } = _ref2;
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread({
-          message: message
+          message
         });
       } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
         scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
@@ -604,7 +606,7 @@ function MessageContent(_a) {
     setSupposedHover: setSupposedHover
   }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: "sendbird-message-content__middle"
-  }, isMobile ? tslib_es6.__assign({}, longPress) : {}, {
+  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, longPress) : {}, {
     ref: contentRef
   }), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-message-content__middle__sender-name",
@@ -612,10 +614,10 @@ function MessageContent(_a) {
     color: ui_Label.LabelColors.ONBACKGROUND_2
   },
   // @ts-ignore
-  ((_f = (_e = channel === null || channel === void 0 ? void 0 : channel.members) === null || _e === void 0 ? void 0 : _e.find(function (member) {
-    var _a;
-    return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
-  })) === null || _f === void 0 ? void 0 : _f.nickname) || index.getSenderName(message)
+  (channel === null || channel === void 0 ? void 0 : (_channel$members2 = channel.members) === null || _channel$members2 === void 0 ? void 0 : (_channel$members2$fin = _channel$members2.find(member => {
+    var _message$sender3;
+    return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.userId);
+  })) === null || _channel$members2$fin === void 0 ? void 0 : _channel$members2$fin.nickname) || index.getSenderName(message)
   // TODO: Divide getting profileUrl logic to utils
   ), useReplying ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
@@ -623,15 +625,15 @@ function MessageContent(_a) {
     message: message,
     userId: userId,
     isByMe: isByMe,
-    isUnavailable: replyType === 'THREAD' && (channel === null || channel === void 0 ? void 0 : channel.joinedAt) * 1000 > ((_g = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _g === void 0 ? void 0 : _g.createdAt),
-    onClick: function () {
-      var _a;
+    isUnavailable: replyType === 'THREAD' && (channel === null || channel === void 0 ? void 0 : channel.joinedAt) * 1000 > (message === null || message === void 0 ? void 0 : (_message$parentMessag = message.parentMessage) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.createdAt),
+    onClick: () => {
+      var _message$parentMessag2;
       if (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({
           message: message
         });
       }
-      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT) && ((_a = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message === null || message === void 0 ? void 0 : message.parentMessageId)) {
+      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT) && message !== null && message !== void 0 && (_message$parentMessag2 = message.parentMessage) !== null && _message$parentMessag2 !== void 0 && _message$parentMessag2.createdAt && message !== null && message !== void 0 && message.parentMessageId) {
         scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
       }
     }
@@ -657,7 +659,8 @@ function MessageContent(_a) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false,
-    isReactionEnabled: isReactionEnabledInChannel
+    isReactionEnabled: isReactionEnabledInChannel,
+    onMessageHeightChange: onMessageHeightChange
   }), index.getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default["default"].createElement(ui_FileMessageItemBody, {
     className: "sendbird-message-content__middle__message-item-body",
     message: message,
@@ -683,7 +686,7 @@ function MessageContent(_a) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabledInChannel
-  }), isReactionEnabledInChannel && ((_h = message === null || message === void 0 ? void 0 : message.reactions) === null || _h === void 0 ? void 0 : _h.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), isReactionEnabledInChannel && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-reactions', !isByMe || index.isThumbnailMessage(message) || index.isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
   }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
     userId: userId,
@@ -701,11 +704,9 @@ function MessageContent(_a) {
   }))), displayThreadReplies && /*#__PURE__*/React__default["default"].createElement(ui_ThreadReplies, {
     className: "sendbird-message-content__middle__thread-replies",
     threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo,
-    onClick: function () {
-      return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-        message: message
-      });
-    }
+    onClick: () => onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+      message: message
+    })
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
   }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -729,20 +730,22 @@ function MessageContent(_a) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover,
-    onReplyInThread: function (_a) {
-      var message = _a.message;
+    onReplyInThread: _ref3 => {
+      let {
+        message
+      } = _ref3;
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread({
-          message: message
+          message
         });
       } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
         scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
       }
     }
-  }))), showMenu && (((_j = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _j === void 0 ? void 0 : _j.call(message)) || ((_k = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _k === void 0 ? void 0 : _k.call(message))) && /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
+  }))), showMenu && ((message === null || message === void 0 ? void 0 : (_message$isUserMessag = message.isUserMessage) === null || _message$isUserMessag === void 0 ? void 0 : _message$isUserMessag.call(message)) || (message === null || message === void 0 ? void 0 : (_message$isFileMessag = message.isFileMessage) === null || _message$isFileMessag === void 0 ? void 0 : _message$isFileMessag.call(message))) && /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
     parentRef: contentRef,
     channel: channel,
-    hideMenu: function () {
+    hideMenu: () => {
       setShowMenu(false);
     },
     message: message,