@sendbird/uikit-react 3.4.8 → 3.4.9-rc.0

package/cjs/ui/MessageContent.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-af66a654.js');
 var React = require('react');
-var index$1 = require('../index-be9c5a7d.js');
+var index$1 = require('../index-c2afb27d.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-01768a5e.js');
+var ui_MessageStatus = require('../index-4bfecbd3.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-22bdf04e.js');
+var ui_Label = require('../index-b6443976.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -18,54 +18,58 @@ 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-265937df.js');
-var UserProfileContext = require('../UserProfileContext-83eaf6e8.js');
-var LocalizationContext = require('../LocalizationContext-4fa55e6b.js');
+var index = require('../index-05291303.js');
+var UserProfileContext = require('../UserProfileContext-a026a307.js');
+var LocalizationContext = require('../LocalizationContext-a7ac3575.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-8aa00a28.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-e443379e.js');
+var useLongPress = require('../useLongPress-5df6f108.js');
+var index$2 = require('../index-564380b1.js');
+var MediaQueryContext = require('../MediaQueryContext-f0b22fae.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-17970c49.js');
+var _const = require('../const-6414a39e.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-require('../index-47e4bdbc.js');
-require('../uuid-c854e2a9.js');
+var utils = require('../utils-ddd1b029.js');
+require('../index-0dad3b72.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
 require('prop-types');
+require('../uuid-cd931d55.js');
 require('../sendbirdSelectors.js');
-require('../topics-0df2f6f9.js');
-require('../utils-a1fead2f.js');
+require('../topics-d00505e4.js');
 require('./Button.js');
-require('../stringSet-c24927d9.js');
+require('../stringSet-12caaa90.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-c8c25288.js');
-require('../index-41ce4c44.js');
+require('../index-793e52a7.js');
+require('../index-148f38a8.js');
 require('./IconButton.js');
-require('../types-df20b895.js');
+require('../types-0d699a7d.js');
+require('./ReactionButton.js');
 require('react-dom');
 require('./SortByRow.js');
+require('./ReactionBadge.js');
+require('./BottomSheet.js');
+require('../index-f70fcb3a.js');
+require('./UserListItem.js');
+require('./MutedAvatarOverlay.js');
+require('./Checkbox.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
-require('./ReactionBadge.js');
-require('../tokenize-1441f448.js');
-require('../index-61c3208b.js');
-require('../index.module-3e7701ca.js');
 require('../Message/context.js');
+require('../tokenize-6d05ba0a.js');
+require('../index-5d3946d1.js');
+require('../index.module-045566c2.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../consts-aaf1208c.js');
+require('../consts-eadce101.js');
 require('./TextButton.js');
-require('../color-83cbca20.js');
-require('../consts-5ead6f3b.js');
+require('../color-2ebe48ee.js');
+require('../consts-083ada31.js');
 require('../withSendbird.js');
-require('../index-10d8f30f.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-09f8f2a4.js');
-require('../consts-0db2bedc.js');
+require('../index-b8d7e1e9.js');
+require('../consts-78795eea.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
 
@@ -73,365 +77,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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: () => {
-      var _message$threadInfo;
-      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: () => {
-          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: () => {
-          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: () => {
-          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: () => {
-          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: () => {
-          hideMenu();
-          showRemove(true);
-        },
-        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"], {
-        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: () => {
-          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"
-      }))));
-    }
-  });
-};
-
-const EMOJI_SIZE = 38;
-const MobileBottomSheet = props => {
-  var _message$sender;
-  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.innerWidth / EMOJI_SIZE) - 1;
-  const [showEmojisOnly, setShowEmojisOnly] = React.useState(false);
-  const emojis = index.getEmojiListAll(emojiContainer);
-  // calculate max emojis that can be shown in screen
-  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", {
-    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: `
-                    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: `${EMOJI_SIZE}px`,
-      height: `${EMOJI_SIZE}px`,
-      selected: isReacted,
-      onClick: () => {
-        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: 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: () => {
-      setShowEmojisOnly(true);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-    url: '',
-    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: () => {
-      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: () => {
-      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: () => {
-      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
-                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
-                    `,
-    role: "menuitem",
-    "aria-disabled": disableReaction ? true : false,
-    onClick: () => {
-      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: () => {
-      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: () => {
-      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))))));
-};
-
-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,
-    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
-  }));
-};
-
 // should initialize in UserProfileContext.jsx
 
 function MessageContent(_ref) {
@@ -503,14 +148,10 @@ function MessageContent(_ref) {
         setShowMenu(true);
       }
     },
-    onClick: () => {
-      // @ts-ignore
-      if (isMobile && index.isThumbnailMessage(message) && index.isSentMessage(message)) {
-        showFileViewer(true);
-      }
-    }
+    onClick: utils.noop
   }, {
-    delay: 300
+    delay: 300,
+    shouldPreventDefault: false
   });
   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, {
@@ -622,6 +263,7 @@ function MessageContent(_ref) {
   ), useReplying ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
   }, /*#__PURE__*/React__default["default"].createElement(ui_QuoteMessage, {
+    className: "sendbird-message-content__middle__quote-message__quote",
     message: message,
     userId: userId,
     isByMe: isByMe,
@@ -679,7 +321,10 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabledInChannel,
-    showFileViewer: showFileViewer
+    showFileViewer: showFileViewer,
+    style: isMobile ? {
+      width: '100%'
+    } : {}
   }), index.getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default["default"].createElement(ui_UnknownMessageItemBody, {
     className: "sendbird-message-content__middle__message-item-body",
     message: message,
@@ -691,6 +336,7 @@ function MessageContent(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
     userId: userId,
     message: message,
+    channel: channel,
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
@@ -742,7 +388,7 @@ function MessageContent(_ref) {
         scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
       }
     }
-  }))), 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, {
+  }))), 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(index$2.MobileMenu, {
     parentRef: contentRef,
     channel: channel,
     hideMenu: () => {
@@ -759,7 +405,20 @@ function MessageContent(_ref) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     toggleReaction: toggleReaction,
-    showEdit: showEdit
+    showEdit: showEdit,
+    onReplyInThread: _ref4 => {
+      let {
+        message
+      } = _ref4;
+      if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+        onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+          message
+        });
+      } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+        var _message$parentMessag4;
+        scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((message === null || message === void 0 ? void 0 : (_message$parentMessag4 = message.parentMessage) === null || _message$parentMessag4 === void 0 ? void 0 : _message$parentMessag4.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
+      }
+    }
   }));
 }