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

package/ui/MessageContent.js

@@ -1,13 +1,13 @@
-import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-eaf55eff.js';
-import React__default, { useState, useContext, useRef } from 'react';
-import { f as format } from '../index-67dd0c26.js';
+import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-8c286a7c.js';
+import React__default, { useContext, useRef, useState } from 'react';
+import { f as format } from '../index-f22b46c2.js';
 import Avatar from './Avatar.js';
 import UserProfile from './UserProfile.js';
-import { M as MessageStatus } from '../index-96f6e11b.js';
+import { M as MessageStatus } from '../index-c3176145.js';
 import MessageItemMenu from './MessageItemMenu.js';
 import MessageItemReactionMenu from './MessageItemReactionMenu.js';
-import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-a900bd78.js';
+import ContextMenu, { MenuItems } from './ContextMenu.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-c4af409f.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
@@ -16,416 +16,61 @@ import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
 import QuoteMessage from './QuoteMessage.js';
-import { r as isUserMessage, u as isSentMessage, v as isFailedMessage, w as isPendingMessage, l as isFileMessage, x as copyToClipboard, y as getEmojiListAll, z as getUIKitMessageTypes, j as getClassName, A as getSenderName, B as isTextMessage, C as isOGMessage, s as getUIKitMessageType, d as isVoiceMessage, n as isThumbnailMessage } from '../index-d8fdbe6f.js';
-import { a as UserProfileContext } from '../UserProfileContext-91e3b3f2.js';
-import { u as useLocalization } from '../LocalizationContext-ae38446a.js';
+import { s as getUIKitMessageTypes, h as getClassName, u as getSenderName, v as isTextMessage, w as isOGMessage, r as getUIKitMessageType, d as isVoiceMessage, m as isThumbnailMessage } from '../index-2d3d2283.js';
+import { a as UserProfileContext } from '../UserProfileContext-9040499b.js';
+import { u as useLocalization } from '../LocalizationContext-8b7b48ec.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import { u as useLongPress } from '../useLongPress-8d44d259.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-8d283dc2.js';
+import { u as useLongPress } from '../useLongPress-b803e920.js';
+import { M as MobileMenu } from '../index-de27e990.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-744e0eb4.js';
 import ThreadReplies from './ThreadReplies.js';
-import { T as ThreadReplySelectType } from '../const-3af04f0a.js';
+import { T as ThreadReplySelectType } from '../const-48b39769.js';
 import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
-import '../index-321e838f.js';
-import '../uuid-c94bd88b.js';
+import { n as noop } from '../utils-28a3bfad.js';
+import '../index-617179bd.js';
+import './ImageRenderer.js';
+import './Icon.js';
 import 'prop-types';
+import '../uuid-295e6b8b.js';
 import '../sendbirdSelectors.js';
-import '../topics-8f4016e9.js';
-import '../utils-c8b489c4.js';
+import '../topics-019712e5.js';
 import './Button.js';
-import '../stringSet-6d89212b.js';
+import '../stringSet-387833a3.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index-1be3f6d7.js';
-import '../index-8a4d2b6e.js';
+import '../index-c281a87e.js';
+import '../index-0872eca4.js';
 import './IconButton.js';
-import '../types-ebbbec62.js';
+import '../types-34b09dae.js';
+import './ReactionButton.js';
 import 'react-dom';
 import './SortByRow.js';
+import './ReactionBadge.js';
+import './BottomSheet.js';
+import '../index-a62f231a.js';
+import './UserListItem.js';
+import './MutedAvatarOverlay.js';
+import './Checkbox.js';
 import './Tooltip.js';
 import './TooltipWrapper.js';
-import './ReactionBadge.js';
-import '../tokenize-2e969273.js';
-import '../index-4554e20e.js';
-import '../index.module-1c75b4f5.js';
 import '../Message/context.js';
+import '../tokenize-c2f4569f.js';
+import '../index-29ec12d6.js';
+import '../index.module-3529d572.js';
 import './MentionLabel.js';
 import './LinkLabel.js';
-import '../consts-bb6cbaee.js';
+import '../consts-c4702413.js';
 import './TextButton.js';
-import '../color-c1b95a91.js';
-import '../consts-354db0d9.js';
+import '../color-be032457.js';
+import '../consts-967162b2.js';
 import '../withSendbird.js';
-import '../index-14bb6832.js';
 import './ProgressBar.js';
 import '../VoicePlayer/useVoicePlayer.js';
-import '../index-ae8e6fc3.js';
-import '../consts-9ece4263.js';
+import '../index-8d2735b6.js';
+import '../consts-63e52cd8.js';
 import '../VoiceRecorder/context.js';
 import './PlaybackTime.js';
 
-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
-  } = useLocalization();
-  const showMenuItemCopy = isUserMessage(message);
-  const showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
-  const showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
-  const showMenuItemDelete = !isPendingMessage(message) && isByMe;
-  const showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message);
-  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !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.createElement(ContextMenu, {
-    isOpen: true,
-    menuItems: () => {
-      var _message$threadInfo;
-      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: () => {
-          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: () => {
-          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: () => {
-          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: () => {
-          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: () => {
-          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.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: () => {
-          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"
-      }))));
-    }
-  });
-};
-
-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
-  } = useLocalization();
-  const showMenuItemCopy = isUserMessage(message);
-  const showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
-  const showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
-  const showMenuItemDelete = !isPendingMessage(message) && isByMe;
-  const showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message);
-  const showReaction = !isFailedMessage(message) && !isPendingMessage(message) && isReactionEnabled;
-  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !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] = useState(false);
-  const emojis = 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.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: `
-                    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.createElement(ReactionButton, {
-      key: emoji.key,
-      width: `${EMOJI_SIZE}px`,
-      height: `${EMOJI_SIZE}px`,
-      selected: isReacted,
-      onClick: () => {
-        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: style => /*#__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: () => {
-      setShowEmojisOnly(true);
-    }
-  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
-    url: '',
-    width: "28px",
-    height: "28px",
-    placeHolder: style => /*#__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: () => {
-      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: () => {
-      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: () => {
-      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
-                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
-                    `,
-    role: "menuitem",
-    "aria-disabled": disableReaction ? true : false,
-    onClick: () => {
-      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: () => {
-      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: () => {
-      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))))));
-};
-
-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.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
-  }));
-};
-
 // should initialize in UserProfileContext.jsx
 
 function MessageContent(_ref) {
@@ -497,14 +142,10 @@ function MessageContent(_ref) {
         setShowMenu(true);
       }
     },
-    onClick: () => {
-      // @ts-ignore
-      if (isMobile && isThumbnailMessage(message) && isSentMessage(message)) {
-        showFileViewer(true);
-      }
-    }
+    onClick: 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.createElement(AdminMessage, {
@@ -616,6 +257,7 @@ function MessageContent(_ref) {
   ), useReplying ? /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
   }, /*#__PURE__*/React__default.createElement(QuoteMessage, {
+    className: "sendbird-message-content__middle__quote-message__quote",
     message: message,
     userId: userId,
     isByMe: isByMe,
@@ -673,7 +315,10 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabledInChannel,
-    showFileViewer: showFileViewer
+    showFileViewer: showFileViewer,
+    style: isMobile ? {
+      width: '100%'
+    } : {}
   }), getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default.createElement(UnknownMessageItemBody, {
     className: "sendbird-message-content__middle__message-item-body",
     message: message,
@@ -685,6 +330,7 @@ function MessageContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
     userId: userId,
     message: message,
+    channel: channel,
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
@@ -753,7 +399,20 @@ function MessageContent(_ref) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     toggleReaction: toggleReaction,
-    showEdit: showEdit
+    showEdit: showEdit,
+    onReplyInThread: _ref4 => {
+      let {
+        message
+      } = _ref4;
+      if (threadReplySelectType === ThreadReplySelectType.THREAD) {
+        onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+          message
+        });
+      } else if (threadReplySelectType === 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);
+      }
+    }
   }));
 }