@sendbird/uikit-react 3.5.0-rc.0 → 3.5.0

package/cjs/Thread/components/ParentMessageInfo.js

@@ -1,161 +1,174 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-5a7eb30d.js');
+var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-c89f311a.js');
 var React = require('react');
-var index$1 = require('../../index-5ea12b7a.js');
-var SendbirdChat = require('@sendbird/chat');
-var RemoveMessageModal = require('../../RemoveMessageModal-0da4f94b.js');
+var index$1 = require('../../index-869e9a94.js');
+var RemoveMessageModal = require('../../RemoveMessageModal-5903f232.js');
 var Thread_components_ParentMessageInfoItem = require('./ParentMessageInfoItem.js');
-var index = require('../../index-b3371ef2.js');
-var LocalizationContext = require('../../LocalizationContext-8780a64e.js');
+var index = require('../../index-5231fde8.js');
+var Channel_context = require('../../ChannelProvider-0df75472.js');
+var LocalizationContext = require('../../LocalizationContext-0e429c3d.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Thread_context = require('../../ThreadProvider-51be09a5.js');
-var UserProfileContext = require('../../UserProfileContext-0808e413.js');
+var Thread_context = require('../../ThreadProvider-8ee179c2.js');
+var UserProfileContext = require('../../UserProfileContext-87580795.js');
 var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
 var ui_Avatar = require('../../ui/Avatar.js');
-var ui_Label = require('../../index-bdd889a2.js');
+var ui_Label = require('../../index-6cb0d040.js');
 var ui_FileViewer = require('../../ui/FileViewer.js');
 var ui_MessageItemMenu = require('../../ui/MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('../../ui/MessageItemReactionMenu.js');
 var ui_ContextMenu = require('../../ui/ContextMenu.js');
 var ui_UserProfile = require('../../ui/UserProfile.js');
 var ui_MessageInput = require('../../ui/MessageInput.js');
-var _const = require('../../const-8785e4ad.js');
-require('../../index-48d85d8f.js');
+var _const = require('../../const-d8cece19.js');
+var types = require('../../types-e0b77c8c.js');
+var MediaQueryContext = require('../../MediaQueryContext-33fc3b17.js');
+var useLongPress = require('../../useLongPress-8037894e.js');
+var index$2 = require('../../index-89d81dad.js');
+var useDirtyGetMentions = require('../../useDirtyGetMentions-b8ca5675.js');
+require('../../index-016f7106.js');
 require('../../ui/Modal.js');
 require('react-dom');
-require('../../index-08d232f8.js');
+require('../../index-f570d25c.js');
 require('../../ui/Button.js');
 require('prop-types');
-require('../../stringSet-60660a99.js');
+require('../../stringSet-106da549.js');
 require('../../ui/Icon.js');
 require('../../ui/IconButton.js');
-require('../../MediaQueryContext-e455934a.js');
-require('../../uuid-a9006ea2.js');
-require('../../ui/Word.js');
-require('../../ui/LinkLabel.js');
-require('../../ui/MentionLabel.js');
 require('../../ui/ImageRenderer.js');
 require('../../ui/TextButton.js');
-require('../../color-fdbe394d.js');
+require('../../color-bada0fc7.js');
 require('../../ui/EmojiReactions.js');
-require('../../ui/Tooltip.js');
-require('../../ui/TooltipWrapper.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/ReactionButton.js');
-require('../../utils/message/getOutgoingMessageState.js');
+require('../../utils-ad7b5b82.js');
+require('../../ui/BottomSheet.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../uuid-12b01f73.js');
+require('../../sendbirdSelectors.js');
+require('../../topics-b384e6b3.js');
 require('../../withSendbird.js');
-require('../../_rollupPluginBabelHelpers-bd6baf0a.js');
-require('../context/types.js');
-require('../../topics-f3f74edc.js');
+require('../../ui/SortByRow.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../Message/context.js');
+require('../../ui/VoiceMessageItemBody.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../index-648c06ed.js');
+require('../../consts-5e0f96b3.js');
+require('../../VoiceRecorder/context.js');
+require('../../ui/PlaybackTime.js');
+require('../../ui/Loader.js');
+require('../../index-2be14d85.js');
+require('../../index.module-0585715f.js');
+require('../../tokenize-2aa0f876.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
+require('../../const-a85f3364.js');
+require('../../compareIds-ccccfe86.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
-require('../../ChannelProvider-1e08a7a9.js');
-require('../../compareIds-d0c02eca.js');
-require('../../const-beb25e10.js');
-require('../../ui/SortByRow.js');
-require('../../sendbirdSelectors.js');
-require('../../utils-708aa730.js');
-require('react-dom/server');
-require('../../ui/MentionUserLabel.js');
+require('../../resolvedReplyType-67e78c63.js');
+require('../context/types.js');
+require('@sendbird/chat');
+require('dompurify');
+require('../../consts-1c3020ad.js');
+require('../../consts-1d94dc61.js');
+require('../../consts-740f60b8.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function ParentMessageInfo(_a) {
-  var _b, _c, _d, _e, _f, _g;
-
-  var className = _a.className;
-
-  var _h = useSendbirdStateContext(),
-      stores = _h.stores,
-      config = _h.config;
-
-  var isMentionEnabled = config.isMentionEnabled,
-      isReactionEnabled = config.isReactionEnabled,
-      replyType = config.replyType,
-      isOnline = config.isOnline,
-      userMention = config.userMention;
-  var userId = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.userStore) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.userId;
-  var dateLocale = (LocalizationContext.useLocalization === null || LocalizationContext.useLocalization === void 0 ? void 0 : LocalizationContext.useLocalization()).dateLocale;
-
-  var _j = Thread_context.useThreadContext(),
-      currentChannel = _j.currentChannel,
-      parentMessage = _j.parentMessage,
-      allThreadMessages = _j.allThreadMessages,
-      emojiContainer = _j.emojiContainer,
-      toggleReaction = _j.toggleReaction,
-      updateMessage = _j.updateMessage,
-      deleteMessage = _j.deleteMessage,
-      onMoveToParentMessage = _j.onMoveToParentMessage,
-      onHeaderActionClick = _j.onHeaderActionClick,
-      isMuted = _j.isMuted,
-      isChannelFrozen = _j.isChannelFrozen;
-
-  var _k = React.useState(false),
-      showRemove = _k[0],
-      setShowRemove = _k[1];
-
-  var _l = React.useState(false),
-      supposedHover = _l[0],
-      setSupposedHover = _l[1];
-
-  var _m = React.useState(false),
-      showFileViewer = _m[0],
-      setShowFileViewer = _m[1];
-
-  var usingReaction = isReactionEnabled && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper) && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast); // Edit message
-
-  var _o = React.useState(false),
-      showEditInput = _o[0],
-      setShowEditInput = _o[1];
-
-  var disabled = !isOnline || isMuted || isChannelFrozen && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === SendbirdChat.Role.OPERATOR); // Mention
-
-  var editMessageInputRef = React.useRef(null);
-
-  var _p = React.useState(''),
-      mentionNickname = _p[0],
-      setMentionNickname = _p[1];
-
-  var _q = React.useState([]),
-      mentionedUsers = _q[0],
-      setMentionedUsers = _q[1];
-
-  var _r = React.useState([]),
-      mentionedUserIds = _r[0],
-      setMentionedUserIds = _r[1];
-
-  var _s = React.useState(null),
-      messageInputEvent = _s[0],
-      setMessageInputEvent = _s[1];
-
-  var _t = React.useState(null),
-      selectedUser = _t[0],
-      setSelectedUser = _t[1];
-
-  var _u = React.useState([]),
-      mentionSuggestedUsers = _u[0],
-      setMentionSuggestedUsers = _u[1];
-
-  var _v = React.useState(true),
-      ableMention = _v[0],
-      setAbleMention = _v[1];
-
-  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === SendbirdChat.Role.OPERATOR));
-  React.useEffect(function () {
-    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount)) {
-      setAbleMention(false);
-    } else {
-      setAbleMention(true);
+function ParentMessageInfo(_ref) {
+  var _stores$userStore$use, _stores$userStore$use2, _parentMessage$isUser, _currentChannel$membe3, _currentChannel$membe4, _parentMessage$sender4;
+  let {
+    className
+  } = _ref;
+  const {
+    stores,
+    config
+  } = useSendbirdStateContext();
+  const {
+    isMentionEnabled,
+    isReactionEnabled,
+    replyType,
+    isOnline,
+    userMention,
+    logger
+  } = config;
+  const userId = (_stores$userStore$use = (_stores$userStore$use2 = stores.userStore.user) === null || _stores$userStore$use2 === void 0 ? void 0 : _stores$userStore$use2.userId) !== null && _stores$userStore$use !== void 0 ? _stores$userStore$use : '';
+  const {
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const {
+    currentChannel,
+    parentMessage,
+    allThreadMessages,
+    emojiContainer,
+    toggleReaction,
+    updateMessage,
+    deleteMessage,
+    onMoveToParentMessage,
+    onHeaderActionClick,
+    isMuted,
+    isChannelFrozen
+  } = Thread_context.useThreadContext();
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+  const [showRemove, setShowRemove] = React.useState(false);
+  const [supposedHover, setSupposedHover] = React.useState(false);
+  const [showFileViewer, setShowFileViewer] = React.useState(false);
+  const usingReaction = Channel_context.getIsReactionEnabled({
+    globalLevel: isReactionEnabled,
+    isSuper: currentChannel.isSuper,
+    isBroadcast: currentChannel.isBroadcast
+  });
+  const isByMe = userId === parentMessage.sender.userId;
+
+  // Mobile
+  const mobileMenuRef = React.useRef(null);
+  const [showMobileMenu, setShowMobileMenu] = React.useState(false);
+  const longPress = useLongPress.useLongPress({
+    onLongPress: () => {
+      if (isMobile) {
+        setShowMobileMenu(true);
+      }
     }
-  }, [mentionedUsers]);
-  React.useEffect(function () {
-    setMentionedUsers(mentionedUsers.filter(function (_a) {
-      var userId = _a.userId;
-      var i = mentionedUserIds.indexOf(userId);
-
+  }, {
+    shouldPreventDefault: false
+  });
+
+  // Edit message
+  const [showEditInput, setShowEditInput] = React.useState(false);
+  const disabled = !isOnline || isMuted || isChannelFrozen && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR);
+
+  // Mention
+  const editMessageInputRef = React.useRef(null);
+  const [mentionNickname, setMentionNickname] = React.useState('');
+  const [mentionedUsers, setMentionedUsers] = React.useState([]);
+  const [mentionedUserIds, setMentionedUserIds] = React.useState([]);
+  const [messageInputEvent, setMessageInputEvent] = React.useState(null);
+  const [selectedUser, setSelectedUser] = React.useState(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = React.useState([]);
+  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === types.Role.OPERATOR));
+  const mentionNodes = useDirtyGetMentions.useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    logger
+  });
+  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
+  React.useEffect(() => {
+    setMentionedUsers(mentionedUsers.filter(_ref2 => {
+      let {
+        userId
+      } = _ref2;
+      const i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -163,153 +176,148 @@ function ParentMessageInfo(_a) {
         return true;
       }
     }));
-  }, [mentionedUserIds]); // User Profile
-
-  var avatarRef = React.useRef(null);
-
-  var _w = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _w.disableUserProfile,
-      renderUserProfile = _w.renderUserProfile;
-
-  if (showEditInput && ((_d = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.isUserMessage) === null || _d === void 0 ? void 0 : _d.call(parentMessage))) {
+  }, [mentionedUserIds]);
+
+  // User Profile
+  const avatarRef = React.useRef(null);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  if (showEditInput && parentMessage !== null && parentMessage !== void 0 && (_parentMessage$isUser = parentMessage.isUserMessage) !== null && _parentMessage$isUser !== void 0 && _parentMessage$isUser.call(parentMessage)) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
       className: "parent-message-info--suggested-mention-list",
       targetNickname: mentionNickname,
-      inputEvent: messageInputEvent // renderUserMentionItem={renderUserMentionItem}
+      inputEvent: messageInputEvent
+      // renderUserMentionItem={renderUserMentionItem}
       ,
-      onUserItemClick: function (user) {
+      onUserItemClick: user => {
         if (user) {
-          setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
+          setMentionedUsers([...mentionedUsers, user]);
         }
-
         setMentionNickname('');
         setSelectedUser(user);
         setMessageInputEvent(null);
       },
-      onFocusItemChange: function () {
+      onFocusItemChange: () => {
         setMessageInputEvent(null);
       },
-      onFetchUsers: function (users) {
+      onFetchUsers: users => {
         setMentionSuggestedUsers(users);
       },
       ableAddMention: ableMention,
       maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
       maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
     }), /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
+      channel: currentChannel,
       isEdit: true,
       disabled: disabled,
       ref: editMessageInputRef,
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: parentMessage,
-      onStartTyping: function () {
-        var _a;
-
-        (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+      onStartTyping: () => {
+        var _currentChannel$start;
+        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$start = currentChannel.startTyping) === null || _currentChannel$start === void 0 ? void 0 : _currentChannel$start.call(currentChannel);
       },
-      onUpdateMessage: function (_a) {
-        var _b;
-
-        var messageId = _a.messageId,
-            message = _a.message,
-            mentionTemplate = _a.mentionTemplate;
+      onUpdateMessage: _ref3 => {
+        var _currentChannel$endTy;
+        let {
+          messageId,
+          message,
+          mentionTemplate
+        } = _ref3;
         updateMessage({
-          messageId: messageId,
-          message: message,
-          mentionedUsers: mentionedUsers,
-          mentionTemplate: mentionTemplate
+          messageId,
+          message,
+          mentionedUsers,
+          mentionTemplate
         });
         setShowEditInput(false);
-        (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
+        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy = currentChannel.endTyping) === null || _currentChannel$endTy === void 0 ? void 0 : _currentChannel$endTy.call(currentChannel);
       },
-      onCancelEdit: function () {
-        var _a;
-
+      onCancelEdit: () => {
+        var _currentChannel$endTy2;
         setMentionNickname('');
         setMentionedUsers([]);
         setMentionedUserIds([]);
         setMentionSuggestedUsers([]);
         setShowEditInput(false);
-        (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy2 = currentChannel.endTyping) === null || _currentChannel$endTy2 === void 0 ? void 0 : _currentChannel$endTy2.call(currentChannel);
       },
-      onUserMentioned: function (user) {
+      onUserMentioned: user => {
         if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
           setSelectedUser(null);
           setMentionNickname('');
         }
       },
-      onMentionStringChange: function (mentionText) {
+      onMentionStringChange: mentionText => {
         setMentionNickname(mentionText);
       },
-      onMentionedUserIdsUpdated: function (userIds) {
+      onMentionedUserIdsUpdated: userIds => {
         setMentionedUserIds(userIds);
       },
-      onKeyDown: function (e) {
+      onKeyDown: e => {
         if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === _const.MessageInputKeys.Enter && ableMention || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
           setMessageInputEvent(e);
           return true;
         }
-
         return false;
       }
     }));
   }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-parent-message-info ".concat(className)
-  }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      var _a, _b, _c;
-
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
+    className: `sendbird-parent-message-info ${className}`
+  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, longPress) : {}, {
+    ref: mobileMenuRef
+  }), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => {
+      var _currentChannel$membe, _currentChannel$membe2, _parentMessage$sender2;
       return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
         className: "sendbird-parent-message-info__sender",
         ref: avatarRef,
-        src: ((_b = (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _a === void 0 ? void 0 : _a.find(function (m) {
-          var _a;
-
-          return (m === null || m === void 0 ? void 0 : m.userId) === ((_a = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _a === void 0 ? void 0 : _a.userId);
-        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _c === void 0 ? void 0 : _c.profileUrl),
+        src: (currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$membe = currentChannel.members) === null || _currentChannel$membe === void 0 ? void 0 : (_currentChannel$membe2 = _currentChannel$membe.find(m => {
+          var _parentMessage$sender;
+          return (m === null || m === void 0 ? void 0 : m.userId) === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender = parentMessage.sender) === null || _parentMessage$sender === void 0 ? void 0 : _parentMessage$sender.userId);
+        })) === null || _currentChannel$membe2 === void 0 ? void 0 : _currentChannel$membe2.profileUrl) || (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender2 = parentMessage.sender) === null || _parentMessage$sender2 === void 0 ? void 0 : _parentMessage$sender2.profileUrl),
         alt: "thread message sender",
         width: "40px",
         height: "40px",
-        onClick: function () {
+        onClick: () => {
           if (!disableUserProfile) {
             toggleDropdown();
           }
         }
       });
     },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
-        parentRef: avatarRef,
-        parentContainRef: avatarRef,
-        closeDropdown: closeDropdown,
-        style: {
-          paddingTop: '0px',
-          paddingBottom: '0px'
-        }
-      }, renderUserProfile ? renderUserProfile({
-        user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
-        close: closeDropdown
-      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-        user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
-        currentUserId: userId,
-        onSuccess: closeDropdown
-      }));
-    }
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+      parentRef: avatarRef,
+      parentContainRef: avatarRef,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile ? renderUserProfile({
+      user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+      user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
+      currentUserId: userId,
+      onSuccess: closeDropdown
+    }))
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-parent-message-info__content"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-parent-message-info__content__info"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    className: "sendbird-parent-message-info__content__info__sender-name".concat(usingReaction ? '--use-reaction' : ''),
+    className: `sendbird-parent-message-info__content__info__sender-name${usingReaction ? '--use-reaction' : ''}`,
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, ((_f = (_e = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _e === void 0 ? void 0 : _e.find(function (member) {
-    var _a;
-
-    return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _a === void 0 ? void 0 : _a.userId);
-  })) === null || _f === void 0 ? void 0 : _f.nickname) || (index.getSenderName === null || index.getSenderName === void 0 ? void 0 : index.getSenderName(parentMessage))), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, (currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$membe3 = currentChannel.members) === null || _currentChannel$membe3 === void 0 ? void 0 : (_currentChannel$membe4 = _currentChannel$membe3.find(member => {
+    var _parentMessage$sender3;
+    return (member === null || member === void 0 ? void 0 : member.userId) === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender3 = parentMessage.sender) === null || _parentMessage$sender3 === void 0 ? void 0 : _parentMessage$sender3.userId);
+  })) === null || _currentChannel$membe4 === void 0 ? void 0 : _currentChannel$membe4.nickname) || (index.getSenderName === null || index.getSenderName === void 0 ? void 0 : index.getSenderName(parentMessage))), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-parent-message-info__content__info__sent-at",
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_2
@@ -318,47 +326,60 @@ function ParentMessageInfo(_a) {
   }))), /*#__PURE__*/React__default["default"].createElement(Thread_components_ParentMessageInfoItem, {
     message: parentMessage,
     showFileViewer: setShowFileViewer
-  })), /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
-    className: "sendbird-parent-message-info__context-menu ".concat(usingReaction ? 'use-reaction' : '', " ").concat(supposedHover ? 'sendbird-mouse-hover' : ''),
+  })), !isMobile && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
+    className: `sendbird-parent-message-info__context-menu ${usingReaction ? 'use-reaction' : ''} ${supposedHover ? 'sendbird-mouse-hover' : ''}`,
     channel: currentChannel,
     message: parentMessage,
-    isByMe: userId === ((_g = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _g === void 0 ? void 0 : _g.userId),
+    isByMe: userId === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender4 = parentMessage.sender) === null || _parentMessage$sender4 === void 0 ? void 0 : _parentMessage$sender4.userId),
     disableDeleteMessage: allThreadMessages.length > 0,
     replyType: replyType,
     showEdit: setShowEditInput,
     showRemove: setShowRemove,
     setSupposedHover: setSupposedHover,
-    onMoveToParentMessage: function () {
+    onMoveToParentMessage: () => {
       onMoveToParentMessage({
         message: parentMessage,
         channel: currentChannel
       });
     }
-  }), usingReaction && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
-    className: "sendbird-parent-message-info__reaction-menu ".concat(supposedHover ? 'sendbird-mouse-hover' : ''),
+  }), usingReaction && !isMobile && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
+    className: `sendbird-parent-message-info__reaction-menu ${supposedHover ? 'sendbird-mouse-hover' : ''}`,
     message: parentMessage,
     userId: userId,
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
   }), showRemove && /*#__PURE__*/React__default["default"].createElement(RemoveMessageModal.RemoveMessage, {
-    onCancel: function () {
-      return setShowRemove(false);
-    },
-    onSubmit: function () {
+    onCancel: () => setShowRemove(false),
+    onSubmit: () => {
       onHeaderActionClick === null || onHeaderActionClick === void 0 ? void 0 : onHeaderActionClick();
     },
     message: parentMessage
   }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(ui_FileViewer["default"], {
     message: parentMessage,
-    onClose: function () {
-      return setShowFileViewer(false);
-    },
-    onDelete: function () {
-      deleteMessage(parentMessage).then(function () {
+    onClose: () => setShowFileViewer(false),
+    onDelete: () => {
+      deleteMessage(parentMessage).then(() => {
         setShowFileViewer(false);
       });
     }
+  }), showMobileMenu && /*#__PURE__*/React__default["default"].createElement(index$2.MobileMenu, {
+    parentRef: mobileMenuRef,
+    channel: currentChannel,
+    message: parentMessage,
+    userId: userId,
+    replyType: replyType,
+    hideMenu: () => {
+      setShowMobileMenu(false);
+    },
+    deleteMenuState: (allThreadMessages === null || allThreadMessages === void 0 ? void 0 : allThreadMessages.length) === 0 ? 'ACTIVE' : 'HIDE',
+    isReactionEnabled: usingReaction,
+    isByMe: isByMe,
+    emojiContainer: emojiContainer,
+    showEdit: setShowEditInput,
+    showRemove: setShowRemove,
+    toggleReaction: toggleReaction,
+    isOpenedFromThread: true
   }));
 }