@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/cjs/ui/MessageContent.js

@@ -1,15 +1,16 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-83d7e84b.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-94c18dc1.js');
+var tslib_es6 = require('../tslib.es6-2f2b0bca.js');
 var React = require('react');
-var index$2 = require('../index-c9b003b3.js');
+var index$1 = require('../index-b6d51e74.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-8ec12d1d.js');
+var ui_MessageStatus = require('../index-aeb36f01.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-18720f0d.js');
+var ui_Label = require('../index-35820a94.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -18,137 +19,147 @@ 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-fbe9cc73.js');
-var UserProfileContext = require('../UserProfileContext-fa8d0383.js');
-var LocalizationContext = require('../LocalizationContext-482c1343.js');
+var index = require('../index-b995f638.js');
+var UserProfileContext = require('../UserProfileContext-922a43ec.js');
+var LocalizationContext = require('../LocalizationContext-5009012e.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-1c0f4696.js');
-var index$3 = require('../index-81baccd0.js');
-var MediaQueryContext = require('../MediaQueryContext-73aac8cf.js');
+var useLongPress = require('../useLongPress-c1da8ba7.js');
+var index$2 = require('../index-0a25b9b2.js');
+var MediaQueryContext = require('../MediaQueryContext-d6fdbe43.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-67ff9e34.js');
+var _const = require('../const-9def5c09.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-var utils = require('../utils-c47c68b1.js');
-var index$1 = require('../index-4b5a006d.js');
-require('../index-d04f312e.js');
+var utils = require('../utils-180c6bc8.js');
+var useStatefulFileInfoList = require('../useStatefulFileInfoList-aa70b6b9.js');
+require('../index-fd8a0abb.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('prop-types');
-require('../uuid-b2806cf5.js');
+require('../uuid-c74bbbb6.js');
 require('../sendbirdSelectors.js');
-require('../topics-adde627b.js');
+require('../pubSub/topics.js');
 require('./Button.js');
-require('../stringSet-d00535a5.js');
+require('../types-66554668.js');
+require('../stringSet-98b52c49.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-11f9cc0f.js');
-require('../index-4eb7e2b5.js');
+require('../index-83d2aed9.js');
+require('../index-826b76d5.js');
 require('./IconButton.js');
-require('../types-0b5148cb.js');
+require('../types-31ed2276.js');
+require('../ChannelProvider-7fa98120.js');
+require('../utils-55fc6797.js');
+require('@sendbird/chat/message');
+require('../index-609b07a2.js');
+require('../useSendMultipleFilesMessage-87e0ffa3.js');
+require('../compareIds-de541666.js');
+require('@sendbird/chat/groupChannel');
+require('../consts-95462b21.js');
+require('../resolvedReplyType-c20ef661.js');
 require('./ReactionButton.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../index.module-a24e9cd7.js');
 require('./ReactionBadge.js');
 require('./BottomSheet.js');
-require('../index-cbcacbee.js');
+require('../index-daf80c58.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../tokenize-9296fc47.js');
-require('../index-2ab19f9b.js');
+require('../tokenize-91bdbeb0.js');
+require('../index-e81e2882.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../consts-d3b53f23.js');
+require('../consts-a3b7ae99.js');
 require('./TextButton.js');
-require('../color-d83b77ac.js');
-require('../utils-418b4438.js');
-require('../consts-bf228385.js');
+require('../color-477ddbd4.js');
+require('../utils-851724e0.js');
+require('../consts-85cd42fa.js');
 require('../withSendbird.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-1f6b30ea.js');
-require('../consts-fb07c671.js');
+require('../index-0ec5a831.js');
 require('../VoiceRecorder/context.js');
 require('./Modal.js');
 require('./PlaybackTime.js');
-require('../index-857630c5.js');
+require('../index-7b0c6630.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// should initialize in UserProfileContext.jsx
-
-function MessageContent(_ref) {
-  var _sender, _message$threadInfo, _message$isAdminMessa, _channel$members2, _channel$members2$fin, _channel$messageOffse, _message$parentMessag2, _message$parentMessag3, _channel$url, _message$reactions, _message$isUserMessag, _message$isFileMessag, _message$isMultipleFi;
-  let {
-    className,
-    userId,
-    channel,
-    message,
-    disabled = false,
-    chainTop = false,
-    chainBottom = false,
-    isReactionEnabled = false,
-    disableQuoteMessage = false,
-    replyType,
-    threadReplySelectType,
-    nicknamesMap,
-    emojiContainer,
-    scrollToMessage,
-    showEdit,
-    showRemove,
-    showFileViewer,
-    resendMessage,
-    toggleReaction,
-    setQuoteMessage,
-    onReplyInThread,
-    onQuoteMessageClick,
-    onMessageHeightChange
-  } = _ref;
-  const messageTypes = index.getUIKitMessageTypes();
-  const {
-    dateLocale
-  } = LocalizationContext.useLocalization();
-  const {
-    config
-  } = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {};
-  const {
-    disableUserProfile,
-    renderUserProfile
-  } = React.useContext(UserProfileContext.UserProfileContext);
-  const avatarRef = React.useRef(null);
-  const contentRef = React.useRef(null);
-  const {
-    isMobile
-  } = MediaQueryContext.useMediaQueryContext();
-  const [showMenu, setShowMenu] = React.useState(false);
-  const [mouseHover, setMouseHover] = React.useState(false);
-  const [supposedHover, setSupposedHover] = React.useState(false);
-  const isByMe = userId === (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
-  const isByMeClassName = isByMe ? 'outgoing' : 'incoming';
-  const chainTopClassName = chainTop ? 'chain-top' : '';
-  const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
-  const isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
-  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
-  const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
-  const useReplyingClassName = useReplying ? 'use-quote' : '';
-  const isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
-
+function MessageContent(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+  var className = _a.className,
+    userId = _a.userId,
+    channel = _a.channel,
+    message = _a.message,
+    _r = _a.disabled,
+    disabled = _r === void 0 ? false : _r,
+    _s = _a.chainTop,
+    chainTop = _s === void 0 ? false : _s,
+    _t = _a.chainBottom,
+    chainBottom = _t === void 0 ? false : _t,
+    _u = _a.isReactionEnabled,
+    isReactionEnabled = _u === void 0 ? false : _u,
+    _v = _a.disableQuoteMessage,
+    disableQuoteMessage = _v === void 0 ? false : _v,
+    replyType = _a.replyType,
+    threadReplySelectType = _a.threadReplySelectType,
+    nicknamesMap = _a.nicknamesMap,
+    emojiContainer = _a.emojiContainer,
+    scrollToMessage = _a.scrollToMessage,
+    showEdit = _a.showEdit,
+    showRemove = _a.showRemove,
+    showFileViewer = _a.showFileViewer,
+    resendMessage = _a.resendMessage,
+    deleteMessage = _a.deleteMessage,
+    toggleReaction = _a.toggleReaction,
+    setQuoteMessage = _a.setQuoteMessage,
+    onReplyInThread = _a.onReplyInThread,
+    onQuoteMessageClick = _a.onQuoteMessageClick,
+    onMessageHeightChange = _a.onMessageHeightChange;
+  var messageTypes = index.getUIKitMessageTypes();
+  var dateLocale = LocalizationContext.useLocalization().dateLocale;
+  var _w = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {},
+    config = _w.config,
+    eventHandlers = _w.eventHandlers;
+  var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
+  var _x = React.useContext(UserProfileContext.UserProfileContext),
+    disableUserProfile = _x.disableUserProfile,
+    renderUserProfile = _x.renderUserProfile;
+  var avatarRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var _y = React.useState(false),
+    showMenu = _y[0],
+    setShowMenu = _y[1];
+  var _z = React.useState(false),
+    mouseHover = _z[0],
+    setMouseHover = _z[1];
+  var _0 = React.useState(false),
+    supposedHover = _0[0],
+    setSupposedHover = _0[1];
+  var isByMe = userId === ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
+  var isByMeClassName = isByMe ? 'outgoing' : 'incoming';
+  var chainTopClassName = chainTop ? 'chain-top' : '';
+  var isReactionEnabledInChannel = isReactionEnabled && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral);
+  var isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
+  var supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
+  var useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage) && !disableQuoteMessage);
+  var useReplyingClassName = useReplying ? 'use-quote' : '';
+  var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
   // Thread replies
-  const displayThreadReplies = (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0 && replyType === 'THREAD';
-
+  var displayThreadReplies = ((_d = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) > 0 && replyType === 'THREAD';
   // onMouseDown: (e: React.MouseEvent<T>) => void;
   // onTouchStart: (e: React.TouchEvent<T>) => void;
   // onMouseUp: (e: React.MouseEvent<T>) => void;
   // onMouseLeave: (e: React.MouseEvent<T>) => void;
   // onTouchEnd: (e: React.TouchEvent<T>) => void;
-  const longPress = useLongPress.useLongPress({
-    onLongPress: () => {
+  var longPress = useLongPress.useLongPress({
+    onLongPress: function () {
       if (isMobile) {
         setShowMenu(true);
       }
@@ -158,64 +169,71 @@ function MessageContent(_ref) {
     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') {
+  var threadMessageKindKey = useStatefulFileInfoList.useThreadMessageKindKeySelector({
+    isMobile: isMobile
+  });
+  // For MultipleFilesMessage only.
+  var statefulFileInfoList = useStatefulFileInfoList.useStatefulFileInfoList(message);
+  if (((_e = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _e === void 0 ? void 0 : _e.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
     return /*#__PURE__*/React__default["default"].createElement(ui_AdminMessage, {
       message: message
     });
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-message-content', isByMeClassName]),
-    onMouseOver: () => setMouseHover(true),
-    onMouseLeave: () => setMouseHover(false)
+    onMouseOver: function () {
+      return setMouseHover(true);
+    },
+    onMouseLeave: function () {
+      return setMouseHover(false);
+    }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])
-  }, !isByMe && !chainBottom &&
+  }, !isByMe && !chainBottom && index.isSendableMessage(message) &&
   /*#__PURE__*/
   /** user profile */
   React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: toggleDropdown => {
-      var _channel$members, _channel$members$find, _message$sender2;
+    menuTrigger: function (toggleDropdown) {
+      var _a, _b;
       return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: `sendbird-message-content__left__avatar ${displayThreadReplies ? 'use-thread-replies' : ''}`
+        className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : '')
         // @ts-ignore
         ,
-        src: (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : (_channel$members$find = _channel$members.find(member => {
-          var _message$sender;
-          return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
-        })) === null || _channel$members$find === void 0 ? void 0 : _channel$members$find.profileUrl) || (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.profileUrl) || ''
+        src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
+          return (member === null || member === void 0 ? void 0 : member.userId) === message.sender.userId;
+        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || message.sender.profileUrl || ''
         // TODO: Divide getting profileUrl logic to utils
         ,
         ref: avatarRef,
         width: "28px",
         height: "28px",
-        onClick: () => {
+        onClick: function () {
           if (!disableUserProfile) toggleDropdown();
         }
       });
     },
-    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems
-    /**
-    * parentRef: For catching location(x, y) of MenuItems
-    * parentContainRef: For toggling more options(menus & reactions)
-    */, {
-      parentRef: avatarRef,
-      parentContainRef: avatarRef,
-      closeDropdown: closeDropdown,
-      style: {
-        paddingTop: '0px',
-        paddingBottom: '0px'
-      }
-    }, renderUserProfile
-    // @ts-ignore
-    ? renderUserProfile({
-      user: message === null || message === void 0 ? void 0 : message.sender,
-      close: closeDropdown
-    })
-    // @ts-ignore
-    : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-      user: message.sender,
-      onSuccess: closeDropdown
-    }))
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems
+      /**
+      * parentRef: For catching location(x, y) of MenuItems
+      * parentContainRef: For toggling more options(menus & reactions)
+      */, {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: message.sender,
+        close: closeDropdown,
+        currentUserId: userId
+      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+        user: message.sender,
+        onSuccess: closeDropdown
+      }));
+    }
   }), isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])
   }, /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
@@ -230,30 +248,27 @@ function MessageContent(_ref) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover,
-    onReplyInThread: _ref2 => {
-      let {
-        message
-      } = _ref2;
+    onReplyInThread: function (_a) {
+      var _b;
+      var message = _a.message;
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread({
-          message
+          message: message
         });
       } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-        var _message$parentMessag;
-        scrollToMessage((_message$parentMessag = message.parentMessage) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.createdAt, message.parentMessageId);
+        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
       }
     }
   }), isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
     className: "sendbird-message-content-menu__reaction-menu",
     message: message,
     userId: userId,
-    spaceFromTrigger: {},
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
   }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: 'sendbird-message-content__middle'
-  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, longPress) : {}, {
+  }, isMobile ? tslib_es6.__assign({}, longPress) : {}, {
     ref: contentRef
   }), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-message-content__middle__sender-name",
@@ -261,10 +276,10 @@ function MessageContent(_ref) {
     color: ui_Label.LabelColors.ONBACKGROUND_2
   },
   // @ts-ignore
-  (channel === null || channel === void 0 ? void 0 : (_channel$members2 = channel.members) === null || _channel$members2 === void 0 ? void 0 : (_channel$members2$fin = _channel$members2.find(member => {
-    var _message$sender3;
-    return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.userId);
-  })) === null || _channel$members2$fin === void 0 ? void 0 : _channel$members2$fin.nickname) || index.getSenderName(message)
+  ((_g = (_f = channel === null || channel === void 0 ? void 0 : channel.members) === null || _f === void 0 ? void 0 : _f.find(function (member) {
+    var _a;
+    return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
+  })) === null || _g === void 0 ? void 0 : _g.nickname) || index.getSenderName(message)
   // TODO: Divide getting profileUrl logic to utils
   ), useReplying ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
@@ -273,15 +288,15 @@ function MessageContent(_ref) {
     message: message,
     userId: userId,
     isByMe: isByMe,
-    isUnavailable: ((_channel$messageOffse = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _channel$messageOffse !== void 0 ? _channel$messageOffse : 0) > ((_message$parentMessag2 = (_message$parentMessag3 = message.parentMessage) === null || _message$parentMessag3 === void 0 ? void 0 : _message$parentMessag3.createdAt) !== null && _message$parentMessag2 !== void 0 ? _message$parentMessag2 : 0),
-    onClick: () => {
-      var _message$parentMessag4;
+    isUnavailable: ((_h = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _h !== void 0 ? _h : 0) > ((_k = (_j = message.parentMessage) === null || _j === void 0 ? void 0 : _j.createdAt) !== null && _k !== void 0 ? _k : 0),
+    onClick: function () {
+      var _a;
       if (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({
           message: message
         });
       }
-      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT) && message !== null && message !== void 0 && (_message$parentMessag4 = message.parentMessage) !== null && _message$parentMessag4 !== void 0 && _message$parentMessag4.createdAt && message !== null && message !== void 0 && message.parentMessageId) {
+      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT) && ((_a = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message === null || message === void 0 ? void 0 : message.parentMessageId)) {
         scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
       }
     }
@@ -315,16 +330,18 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabledInChannel
-  }), index.isMultipleFilesMessage(message) && /*#__PURE__*/React__default["default"].createElement(index$1.MultipleFilesMessageItemBody, {
+  }), index.isMultipleFilesMessage(message) && /*#__PURE__*/React__default["default"].createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, {
     className: "sendbird-message-content__middle__message-item-body",
     message: message,
     isByMe: isByMe,
     mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel
+    isReactionEnabled: isReactionEnabledInChannel,
+    threadMessageKindKey: threadMessageKindKey,
+    statefulFileInfoList: statefulFileInfoList
   }), index.isVoiceMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, {
     className: "sendbird-message-content__middle__message-item-body",
     message: message,
-    channelUrl: (_channel$url = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _channel$url !== void 0 ? _channel$url : '',
+    channelUrl: (_l = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _l !== void 0 ? _l : '',
     isByMe: isByMe,
     isReactionEnabled: isReactionEnabledInChannel
   }), index.isThumbnailMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_ThumbnailMessageItemBody, {
@@ -343,7 +360,7 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabledInChannel
-  }), isReactionEnabledInChannel && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), isReactionEnabledInChannel && ((_m = message === null || message === void 0 ? void 0 : message.reactions) === null || _m === void 0 ? void 0 : _m.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-reactions', index.isMultipleFilesMessage(message) ? 'image-grid' : !isByMe || index.isThumbnailMessage(message) || index.isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
   }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
     userId: userId,
@@ -352,19 +369,22 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
-    toggleReaction: toggleReaction
+    toggleReaction: toggleReaction,
+    onPressUserProfile: onPressUserProfileHandler
   })), !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, index$2.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+  }, index$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
     locale: dateLocale
   }))), displayThreadReplies && /*#__PURE__*/React__default["default"].createElement(ui_ThreadReplies, {
     className: "sendbird-message-content__middle__thread-replies",
     threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo,
-    onClick: () => onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-      message: message
-    })
+    onClick: function () {
+      return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+        message: message
+      });
+    }
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
   }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -373,7 +393,6 @@ function MessageContent(_ref) {
     className: "sendbird-message-content-menu__reaction-menu",
     message: message,
     userId: userId,
-    spaceFromTrigger: {},
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
@@ -388,23 +407,21 @@ function MessageContent(_ref) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover,
-    onReplyInThread: _ref3 => {
-      let {
-        message
-      } = _ref3;
+    onReplyInThread: function (_a) {
+      var _b;
+      var message = _a.message;
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread({
-          message
+          message: message
         });
       } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-        var _message$parentMessag5;
-        scrollToMessage((_message$parentMessag5 = message.parentMessage) === null || _message$parentMessag5 === void 0 ? void 0 : _message$parentMessag5.createdAt, message.parentMessageId);
+        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.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)) || (message === null || message === void 0 ? void 0 : (_message$isMultipleFi = message.isMultipleFilesMessage) === null || _message$isMultipleFi === void 0 ? void 0 : _message$isMultipleFi.call(message))) && /*#__PURE__*/React__default["default"].createElement(index$3.MobileMenu, {
+  }))), showMenu && (((_o = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _o === void 0 ? void 0 : _o.call(message)) || ((_p = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _p === void 0 ? void 0 : _p.call(message)) || ((_q = message === null || message === void 0 ? void 0 : message.isMultipleFilesMessage) === null || _q === void 0 ? void 0 : _q.call(message))) && /*#__PURE__*/React__default["default"].createElement(index$2.MobileMenu, {
     parentRef: contentRef,
     channel: channel,
-    hideMenu: () => {
+    hideMenu: function () {
       setShowMenu(false);
     },
     message: message,
@@ -416,20 +433,19 @@ function MessageContent(_ref) {
     showRemove: showRemove,
     emojiContainer: emojiContainer,
     resendMessage: resendMessage,
+    deleteMessage: deleteMessage,
     setQuoteMessage: setQuoteMessage,
     toggleReaction: toggleReaction,
     showEdit: showEdit,
-    onReplyInThread: _ref4 => {
-      let {
-        message
-      } = _ref4;
+    onReplyInThread: function (_a) {
+      var _b;
+      var message = _a.message;
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-          message
+          message: message
         });
       } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-        var _message$parentMessag6;
-        scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((message === null || message === void 0 ? void 0 : (_message$parentMessag6 = message.parentMessage) === null || _message$parentMessag6 === void 0 ? void 0 : _message$parentMessag6.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
+        scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage(((_b = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
       }
     }
   }));