@sendbird/uikit-react 3.2.5 → 3.2.6-rc.1

package/cjs/ui/MessageContent.js

@@ -1,14 +1,16 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-bd20f22f.js');
+var tslib_es6 = require('../tslib.es6-54dccd69.js');
 var React = require('react');
-var index$1 = require('../index-09d50472.js');
+var index$1 = require('../index-c97a25fe.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
 var ui_MessageStatus = require('./MessageStatus.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-e59510d3.js');
+var ui_Label = require('../index-e739b357.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -17,27 +19,28 @@ 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-558d367a.js');
-var UserProfileContext = require('../UserProfileContext-d1596965.js');
-var LocalizationContext = require('../LocalizationContext-0349dfbd.js');
+var index = require('../index-0f54b27e.js');
+var UserProfileContext = require('../UserProfileContext-12e3deb1.js');
+var LocalizationContext = require('../LocalizationContext-b8b9eb7b.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../index-491f2403.js');
-require('../tslib.es6-712ab026.js');
-require('./ImageRenderer.js');
-require('./Icon.js');
+var useLongPress = require('../useLongPress-447fc2b4.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-f8dbf0b3.js');
+require('../index-62071d1a.js');
+require('../uuid-65030b4c.js');
 require('prop-types');
-require('../uuid-4fb21145.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-93d42928.js');
 require('../sendbirdSelectors.js');
-require('../topics-c4ffdf98.js');
-require('../utils-03670a4b.js');
+require('../topics-774fce2f.js');
+require('../utils-b42b5273.js');
 require('./Button.js');
-require('../stringSet-9eadd9a2.js');
+require('../stringSet-b90c8eb9.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./IconButton.js');
-require('./ReactionButton.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./Tooltip.js');
@@ -47,27 +50,390 @@ require('./Word.js');
 require('./LinkLabel.js');
 require('./MentionLabel.js');
 require('./TextButton.js');
-require('../color-8da1967d.js');
+require('../color-30d0a088.js');
+require('../index-be16bf7f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 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;
+  return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    isOpen: true,
+    menuItems: function () {
+      var _a;
+
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        className: "sendbird-message__mobile-context-menu",
+        parentRef: parentRef,
+        parentContainRef: parentRef,
+        closeDropdown: hideMenu
+      }, showMenuItemCopy && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-copy",
+        onClick: function () {
+          hideMenu();
+          index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        type: ui_Label.LabelTypography.SUBTITLE_1
+      }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.COPY,
+        fillColor: ui_Icon.IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemReply && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-reply",
+        onClick: function () {
+          hideMenu();
+          setQuoteMessage(message);
+        },
+        disable: (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        type: ui_Label.LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__REPLY), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.REPLY,
+        fillColor: ui_Icon.IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemEdit && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-edit",
+        onClick: function () {
+          hideMenu();
+          showEdit(true);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        type: ui_Label.LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__EDIT), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.EDIT,
+        fillColor: ui_Icon.IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemResend && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-resend",
+        onClick: function () {
+          hideMenu();
+          resendMessage(message);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        type: ui_Label.LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__RESEND), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.REFRESH,
+        fillColor: ui_Icon.IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemDelete && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-delete",
+        onClick: function () {
+          hideMenu();
+          showRemove(true);
+        },
+        disable: ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.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"], {
+        type: ui_Icon.IconTypes.DELETE,
+        fillColor: ui_Icon.IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemDownload && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-save",
+        onClick: function () {
+          hideMenu();
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "sendbird-message__contextmenu--hyperlink",
+        rel: "noopener noreferrer",
+        href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
+        target: "_blank"
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        type: ui_Label.LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__SAVE), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.DOWNLOAD,
+        fillColor: ui_Icon.IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      }))));
+    }
+  });
+};
+
+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); // 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;
+  return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
+    onBackdropClick: hideMenu
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message__bottomsheet"
+  }, showReaction && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-message__bottomsheet-reactions"
+  }, /*#__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;
+    });
+    return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+      key: emoji.key,
+      width: "".concat(EMOJI_SIZE, "px"),
+      height: "".concat(EMOJI_SIZE, "px"),
+      selected: isReacted,
+      onClick: function () {
+        hideMenu();
+        toggleReaction(message, emoji.key, isReacted);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+      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"
+        }));
+      }
+    }));
+  }), canShowMoreEmojis && !showEmojisOnly && /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+    key: "emoji_more",
+    width: "38px",
+    height: "38px",
+    onClick: function () {
+      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"
+      }));
+    }
+  }))))), !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 () {
+      hideMenu();
+      index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.COPY,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    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 () {
+      hideMenu();
+      showEdit(true);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.EDIT,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    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 () {
+      hideMenu();
+      resendMessage(message);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.REFRESH,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__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                    "),
+    role: "menuitem",
+    "aria-disabled": disableReaction ? true : false,
+    onClick: function () {
+      if (!disableReaction) {
+        hideMenu();
+        setQuoteMessage(message);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.REPLY,
+    fillColor: disableReaction ? ui_Icon.IconColors.ON_BACKGROUND_3 : ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.SUBTITLE_1,
+    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 () {
+      hideMenu();
+      showRemove(true);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.DELETE,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    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 () {
+      hideMenu();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("a", {
+    className: "sendbird-message__bottomsheet--hyperlink",
+    rel: "noopener noreferrer",
+    href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
+    target: "_blank"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.DOWNLOAD,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.SUBTITLE_1
+  }, 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;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isReactionEnabled ? /*#__PURE__*/React__default["default"].createElement(MobileBottomSheet, {
+    channel: channel,
+    message: message,
+    hideMenu: hideMenu,
+    isByMe: isByMe,
+    userId: userId,
+    replyType: replyType,
+    disabled: disabled,
+    showRemove: showRemove,
+    showEdit: showEdit,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    emojiContainer: emojiContainer,
+    toggleReaction: toggleReaction,
+    isReactionEnabled: isReactionEnabled
+  }) : /*#__PURE__*/React__default["default"].createElement(MobileContextMenu, {
+    channel: channel,
+    userId: userId,
+    message: message,
+    hideMenu: hideMenu,
+    isByMe: isByMe,
+    showEdit: showEdit,
+    replyType: replyType,
+    disabled: disabled,
+    showRemove: showRemove,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    parentRef: parentRef
+  }));
+};
+
 function MessageContent(_a) {
-  var _b, _c, _d, _e, _f;
+  var _b, _c, _d, _e, _f, _g, _h;
 
   var className = _a.className,
       userId = _a.userId,
       channel = _a.channel,
       message = _a.message,
-      _g = _a.disabled,
-      disabled = _g === void 0 ? false : _g,
-      _h = _a.chainTop,
-      chainTop = _h === void 0 ? false : _h,
-      _j = _a.chainBottom,
-      chainBottom = _j === void 0 ? false : _j,
-      _k = _a.isReactionEnabled,
-      isReactionEnabled = _k === void 0 ? false : _k,
+      _j = _a.disabled,
+      disabled = _j === void 0 ? false : _j,
+      _k = _a.chainTop,
+      chainTop = _k === void 0 ? false : _k,
+      _l = _a.chainBottom,
+      chainBottom = _l === void 0 ? false : _l,
+      _m = _a.isReactionEnabled,
+      isReactionEnabled = _m === void 0 ? false : _m,
       replyType = _a.replyType,
       nicknamesMap = _a.nicknamesMap,
       emojiContainer = _a.emojiContainer,
@@ -82,19 +448,25 @@ function MessageContent(_a) {
   var dateLocale = LocalizationContext.useLocalization().dateLocale;
   var config = ((useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}).config;
 
-  var _l = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _l.disableUserProfile,
-      renderUserProfile = _l.renderUserProfile;
+  var _o = React.useContext(UserProfileContext.UserProfileContext),
+      disableUserProfile = _o.disableUserProfile,
+      renderUserProfile = _o.renderUserProfile;
 
   var avatarRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
 
-  var _m = React.useState(false),
-      mouseHover = _m[0],
-      setMouseHover = _m[1];
+  var _p = React.useState(false),
+      showMenu = _p[0],
+      setShowMenu = _p[1];
 
-  var _o = React.useState(false),
-      supposedHover = _o[0],
-      setSupposedHover = _o[1];
+  var _q = React.useState(false),
+      mouseHover = _q[0],
+      setMouseHover = _q[1];
+
+  var _r = React.useState(false),
+      supposedHover = _r[0],
+      setSupposedHover = _r[1];
 
   var isByMe = userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.userId) || message.sendingStatus === 'pending' || message.sendingStatus === 'failed';
   var isByMeClassName = isByMe ? 'outgoing' : 'incoming';
@@ -102,7 +474,25 @@ function MessageContent(_a) {
   var isReactionEnabledClassName = isReactionEnabled ? 'use-reactions' : '';
   var supposedHoverClassName = supposedHover ? 'supposed-hover' : '';
   var useReplying = !!(replyType === 'QUOTE_REPLY' && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage));
-  var useReplyingClassName = useReplying ? 'use-quote' : '';
+  var useReplyingClassName = useReplying ? 'use-quote' : ''; // 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 () {
+      setShowMenu(true);
+    },
+    onClick: function () {
+      // @ts-ignore
+      if (index.isFileMessage(message) && index.isSentMessage(message)) {
+        showFileViewer(true);
+      }
+    }
+  }, {
+    delay: 300
+  });
 
   if (((_c = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _c === void 0 ? void 0 : _c.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
     return /*#__PURE__*/React__default["default"].createElement(ui_AdminMessage, {
@@ -169,7 +559,7 @@ function MessageContent(_a) {
         onSuccess: closeDropdown
       }));
     }
-  }), isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), 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, {
     className: "sendbird-message-content-menu__normal-menu",
@@ -191,9 +581,11 @@ function MessageContent(_a) {
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: "sendbird-message-content__middle"
-  }, !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, isMobile ? tslib_es6.__assign({}, longPress) : {}, {
+    ref: contentRef
+  }), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-message-content__middle__sender-name",
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
@@ -275,7 +667,7 @@ function MessageContent(_a) {
     locale: dateLocale
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
-  }, !isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
   }, isReactionEnabled && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
     className: "sendbird-message-content-menu__reaction-menu",
@@ -296,7 +688,25 @@ function MessageContent(_a) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover
-  }))));
+  }))), showMenu && (((_g = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _g === void 0 ? void 0 : _g.call(message)) || ((_h = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _h === void 0 ? void 0 : _h.call(message))) && /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
+    parentRef: contentRef,
+    channel: channel,
+    hideMenu: function () {
+      setShowMenu(false);
+    },
+    message: message,
+    isReactionEnabled: isReactionEnabled,
+    isByMe: isByMe,
+    userId: userId,
+    replyType: replyType,
+    disabled: disabled,
+    showRemove: showRemove,
+    emojiContainer: emojiContainer,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    toggleReaction: toggleReaction,
+    showEdit: showEdit
+  }));
 }
 
 module.exports = MessageContent;