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

package/ui/MessageContent.js

@@ -1,12 +1,14 @@
-import React__default, { useContext, useRef, useState } from 'react';
-import { f as format } from '../index-07ae6a1b.js';
+import { a as _extends } from '../_rollupPluginBabelHelpers-42595172.js';
+import { _ as __assign } from '../tslib.es6-38d6449a.js';
+import React__default, { useState, useContext, useRef } from 'react';
+import { f as format } from '../index-39b44653.js';
 import Avatar from './Avatar.js';
 import ConnectedUserProfile from './UserProfile.js';
 import MessageStatus from './MessageStatus.js';
 import MessageItemMenu from './MessageItemMenu.js';
 import MessageItemReactionMenu from './MessageItemReactionMenu.js';
-import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-200a8796.js';
+import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-b02633bc.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
@@ -15,27 +17,28 @@ import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
 import QuoteMessage from './QuoteMessage.js';
-import { s as getUIKitMessageTypes, h as getClassName, u as getSenderName, v as isTextMessage, w as isOGMessage, x as getUIKitMessageType, n as isThumbnailMessage } from '../index-89cd6e36.js';
-import { a as UserProfileContext } from '../UserProfileContext-24bb1c79.js';
-import { u as useLocalization } from '../LocalizationContext-9976b34e.js';
+import { r as isUserMessage, s as isSentMessage, u as isFailedMessage, v as isPendingMessage, l as isFileMessage, w as copyToClipboard, x as getEmojiListAll, y as getUIKitMessageTypes, h as getClassName, z as getSenderName, A as isTextMessage, B as isOGMessage, C as getUIKitMessageType, n as isThumbnailMessage } from '../index-e1f156d0.js';
+import { a as UserProfileContext } from '../UserProfileContext-32f70da9.js';
+import { u as useLocalization } from '../LocalizationContext-4f852f2e.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../index-5e61b8f6.js';
-import '../tslib.es6-d20349ad.js';
-import './ImageRenderer.js';
-import './Icon.js';
+import { u as useLongPress } from '../useLongPress-3488ddd6.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import BottomSheet from './BottomSheet.js';
+import ImageRenderer from './ImageRenderer.js';
+import ReactionButton from './ReactionButton.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-20ff176d.js';
+import '../index-c766d64c.js';
+import '../uuid-11fdaf7d.js';
 import 'prop-types';
-import '../uuid-e5bc1634.js';
 import '../withSendbird.js';
-import '../_rollupPluginBabelHelpers-a72165e4.js';
 import '../sendbirdSelectors.js';
-import '../topics-0752cb33.js';
-import '../utils-5569d95d.js';
+import '../topics-954a5dbc.js';
+import '../utils-80e9e20d.js';
 import './Button.js';
-import '../stringSet-8662ec77.js';
+import '../stringSet-fd9dcf1e.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
 import './IconButton.js';
-import './ReactionButton.js';
 import 'react-dom';
 import './SortByRow.js';
 import './Tooltip.js';
@@ -45,23 +48,386 @@ import './Word.js';
 import './LinkLabel.js';
 import './MentionLabel.js';
 import './TextButton.js';
-import '../color-511dde29.js';
+import '../color-d2a15055.js';
+import '../index-14e045d4.js';
+
+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 = useLocalization().stringSet;
+  var showMenuItemCopy = isUserMessage(message);
+  var showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
+  var showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+  var showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message);
+  var showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !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.createElement(ContextMenu, {
+    isOpen: true,
+    menuItems: function () {
+      var _a;
+
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        className: "sendbird-message__mobile-context-menu",
+        parentRef: parentRef,
+        parentContainRef: parentRef,
+        closeDropdown: hideMenu
+      }, showMenuItemCopy && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-copy",
+        onClick: function () {
+          hideMenu();
+          copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+        }
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1
+      }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.COPY,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemReply && /*#__PURE__*/React__default.createElement(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.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__REPLY), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.REPLY,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemEdit && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-edit",
+        onClick: function () {
+          hideMenu();
+          showEdit(true);
+        }
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__EDIT), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.EDIT,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemResend && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-resend",
+        onClick: function () {
+          hideMenu();
+          resendMessage(message);
+        }
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__RESEND), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.REFRESH,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemDelete && /*#__PURE__*/React__default.createElement(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.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__DELETE), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.DELETE,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemDownload && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-save",
+        onClick: function () {
+          hideMenu();
+        }
+      }, /*#__PURE__*/React__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.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1
+      }, stringSet.MESSAGE_MENU__SAVE), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.DOWNLOAD,
+        fillColor: 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 = useLocalization().stringSet;
+  var showMenuItemCopy = isUserMessage(message);
+  var showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
+  var showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+  var showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message);
+  var showReaction = !isFailedMessage(message) && !isPendingMessage(message) && isReactionEnabled;
+  var showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !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 = useState(false),
+      showEmojisOnly = _b[0],
+      setShowEmojisOnly = _b[1];
+
+  var emojis = 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.createElement(BottomSheet, {
+    onBackdropClick: hideMenu
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet"
+  }, showReaction && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet-reactions"
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: "sendbird-message__bottomsheet-reaction-bar"
+  }, /*#__PURE__*/React__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.createElement(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.createElement(ImageRenderer, {
+      url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+      width: "28px",
+      height: "28px",
+      placeHolder: function (style) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          style: style
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          type: IconTypes.QUESTION,
+          fillColor: IconColors.ON_BACKGROUND_3,
+          width: "28px",
+          height: "28px"
+        }));
+      }
+    }));
+  }), canShowMoreEmojis && !showEmojisOnly && /*#__PURE__*/React__default.createElement(ReactionButton, {
+    key: "emoji_more",
+    width: "38px",
+    height: "38px",
+    onClick: function () {
+      setShowEmojisOnly(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    url: '',
+    width: "28px",
+    height: "28px",
+    placeHolder: function (style) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.EMOJI_MORE,
+        fillColor: IconColors.ON_BACKGROUND_3,
+        width: "28px",
+        height: "28px"
+      }));
+    }
+  }))))), !showEmojisOnly && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--actions"
+  }, showMenuItemCopy && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: function () {
+      hideMenu();
+      copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.COPY,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY)), showMenuItemEdit && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: function () {
+      hideMenu();
+      showEdit(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.EDIT,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__EDIT)), showMenuItemResend && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: function () {
+      hideMenu();
+      resendMessage(message);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.REFRESH,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__RESEND)), showMenuItemReply && /*#__PURE__*/React__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.createElement(Icon, {
+    type: IconTypes.REPLY,
+    fillColor: disableReaction ? IconColors.ON_BACKGROUND_3 : IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: disableReaction && LabelColors.ONBACKGROUND_4
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__REPLY)), showMenuItemDelete && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: function () {
+      hideMenu();
+      showRemove(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.DELETE,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__DELETE)), showMenuItemDownload && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: function () {
+      hideMenu();
+    }
+  }, /*#__PURE__*/React__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.createElement(Icon, {
+    type: IconTypes.DOWNLOAD,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: 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.createElement(React__default.Fragment, null, isReactionEnabled ? /*#__PURE__*/React__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.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,
@@ -76,19 +442,25 @@ function MessageContent(_a) {
   var dateLocale = useLocalization().dateLocale;
   var config = ((useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}).config;
 
-  var _l = useContext(UserProfileContext),
-      disableUserProfile = _l.disableUserProfile,
-      renderUserProfile = _l.renderUserProfile;
+  var _o = useContext(UserProfileContext),
+      disableUserProfile = _o.disableUserProfile,
+      renderUserProfile = _o.renderUserProfile;
 
   var avatarRef = useRef(null);
+  var contentRef = useRef(null);
+  var isMobile = useMediaQueryContext().isMobile;
 
-  var _m = useState(false),
-      mouseHover = _m[0],
-      setMouseHover = _m[1];
+  var _p = useState(false),
+      showMenu = _p[0],
+      setShowMenu = _p[1];
 
-  var _o = useState(false),
-      supposedHover = _o[0],
-      setSupposedHover = _o[1];
+  var _q = useState(false),
+      mouseHover = _q[0],
+      setMouseHover = _q[1];
+
+  var _r = 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';
@@ -96,7 +468,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({
+    onLongPress: function () {
+      setShowMenu(true);
+    },
+    onClick: function () {
+      // @ts-ignore
+      if (isFileMessage(message) && 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.createElement(AdminMessage, {
@@ -163,7 +553,7 @@ function MessageContent(_a) {
         onSuccess: closeDropdown
       }));
     }
-  }), isByMe && /*#__PURE__*/React__default.createElement("div", {
+  }), isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])
   }, /*#__PURE__*/React__default.createElement(MessageItemMenu, {
     className: "sendbird-message-content-menu__normal-menu",
@@ -185,9 +575,11 @@ function MessageContent(_a) {
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", _extends({
     className: "sendbird-message-content__middle"
-  }, !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
+  }, isMobile ? __assign({}, longPress) : {}, {
+    ref: contentRef
+  }), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-message-content__middle__sender-name",
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
@@ -269,7 +661,7 @@ function MessageContent(_a) {
     locale: dateLocale
   })))), /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
-  }, !isByMe && /*#__PURE__*/React__default.createElement("div", {
+  }, !isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
   }, isReactionEnabled && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
     className: "sendbird-message-content-menu__reaction-menu",
@@ -290,7 +682,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.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
+  }));
 }
 
 export { MessageContent as default };