@sendbird/uikit-react 3.4.8 → 3.4.9

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-6bb0305c.js';
+import React__default, { useContext, useRef, useState } from 'react';
+import { f as format } from '../index-7cdd58b8.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-5c1b672d.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-63949de5.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-7eb65acf.js';
+import { a as UserProfileContext } from '../UserProfileContext-9cfbab4d.js';
+import { u as useLocalization } from '../LocalizationContext-076d6d2e.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-1303953d.js';
+import { M as MobileMenu } from '../index-aca30408.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-11f0e43f.js';
 import ThreadReplies from './ThreadReplies.js';
-import { T as ThreadReplySelectType } from '../const-3af04f0a.js';
+import { T as ThreadReplySelectType } from '../const-b3f02313.js';
 import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
-import '../index-321e838f.js';
-import '../uuid-c94bd88b.js';
+import { n as noop } from '../utils-4bbbca2c.js';
+import '../index-99aabd9e.js';
+import './ImageRenderer.js';
+import './Icon.js';
 import 'prop-types';
+import '../uuid-1adedf62.js';
 import '../sendbirdSelectors.js';
-import '../topics-8f4016e9.js';
-import '../utils-c8b489c4.js';
+import '../topics-b2b77fb9.js';
 import './Button.js';
-import '../stringSet-6d89212b.js';
+import '../stringSet-13bbd4a2.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index-1be3f6d7.js';
-import '../index-8a4d2b6e.js';
+import '../index-306bc4ab.js';
+import '../index-fe932783.js';
 import './IconButton.js';
-import '../types-ebbbec62.js';
+import '../types-4ff4177c.js';
+import './ReactionButton.js';
 import 'react-dom';
 import './SortByRow.js';
+import './ReactionBadge.js';
+import './BottomSheet.js';
+import '../index-38e61c64.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-c40f2b57.js';
+import '../index-2c3e11ea.js';
+import '../index.module-54d57ec3.js';
 import './MentionLabel.js';
 import './LinkLabel.js';
-import '../consts-bb6cbaee.js';
+import '../consts-c41580ae.js';
 import './TextButton.js';
-import '../color-c1b95a91.js';
-import '../consts-354db0d9.js';
+import '../color-879cc347.js';
+import '../consts-81544e52.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-5c985608.js';
+import '../consts-95d8566e.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);
+      }
+    }
   }));
 }