@sendbird/uikit-react 3.7.0-rc.1 → 3.8.0

package/cjs/ui/MessageContent.js

@@ -1,16 +1,15 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-b21be8d6.js');
-var tslib_es6 = require('../tslib.es6-b66710d0.js');
+var _tslib = require('../chunks/bundle-hK4x7nmG.js');
 var React = require('react');
-var index$1 = require('../index-ab04f4c1.js');
+var index$1 = require('../chunks/bundle-28p7K0N-.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-c0e391a9.js');
+var ui_MessageStatus = require('../chunks/bundle-11ybpGNN.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-6f4ca5cf.js');
+var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -19,436 +18,226 @@ 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-23d284a0.js');
-var UserProfileContext = require('../UserProfileContext-712f02b1.js');
-var LocalizationContext = require('../LocalizationContext-e12e7229.js');
+var index = require('../chunks/bundle-FHx0K-3z.js');
+var UserProfileContext = require('../chunks/bundle-4bb_98h6.js');
+var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-d5d1f4da.js');
-var index$2 = require('../index-b1e163b7.js');
-var MediaQueryContext = require('../MediaQueryContext-77316b55.js');
+var useLongPress = require('../chunks/bundle-tywVawyg.js');
+var index$2 = require('../chunks/bundle-41ZfOrRZ.js');
+var MediaQueryContext = require('../chunks/bundle-Y9TkHVI5.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-ea1110b8.js');
+var _const = require('../chunks/bundle-P_B0eyVT.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-var utils = require('../utils-de8b30fe.js');
-var useStatefulFileInfoList = require('../useStatefulFileInfoList-aa28d0cd.js');
-require('../index-94db47de.js');
+var utils = require('../chunks/bundle-1yOirqug.js');
+var useStatefulFileInfoList = require('../chunks/bundle-RlFjml8m.js');
+require('../chunks/bundle-n1yh-qDb.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('prop-types');
-require('../uuid-121cea7a.js');
+require('../chunks/bundle-gMxOq93o.js');
 require('../sendbirdSelectors.js');
 require('../pubSub/topics.js');
 require('./Button.js');
-require('../types-949e3eb4.js');
-require('../stringSet-f086c338.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-e61f36ff.js');
-require('../index-2a618f4d.js');
+require('../chunks/bundle-CUP2x37z.js');
+require('../chunks/bundle-4rFcKXQa.js');
 require('./IconButton.js');
-require('../types-6edcfd89.js');
-require('../ChannelProvider-95309057.js');
-require('../utils-ef688ff7.js');
+require('../chunks/bundle-lii4Ueh3.js');
+require('../chunks/bundle-4DATo50q.js');
+require('../chunks/bundle-4q81wd8X.js');
 require('@sendbird/chat/message');
-require('../index-d0d79864.js');
-require('../useSendMultipleFilesMessage-a050e482.js');
-require('../compareIds-6d33d98c.js');
+require('../chunks/bundle-I_9_5a8a.js');
+require('../chunks/bundle-c6O8NjZI.js');
+require('../chunks/bundle-tmB_l3Q9.js');
 require('@sendbird/chat/groupChannel');
-require('../consts-838d8c0a.js');
-require('../resolvedReplyType-e4155c81.js');
+require('../Channel/hooks/useInitialMessagesFetch.js');
+require('../chunks/bundle-6o4fw0w0.js');
+require('../chunks/bundle-L9ushBZQ.js');
+require('../chunks/bundle-g_OXBrgT.js');
 require('./ReactionButton.js');
 require('react-dom');
 require('./SortByRow.js');
+require('../chunks/bundle-z-Bvsn0B.js');
 require('./ReactionBadge.js');
 require('./BottomSheet.js');
-require('../index-6fdf155b.js');
+require('../hooks/useModal.js');
+require('../chunks/bundle-UooP2IDU.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../tokenize-db0fb550.js');
-require('../index-dfe39552.js');
+require('../chunks/bundle-FLCJVplO.js');
+require('../chunks/bundle-iwsbhMUN.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../consts-2425b1dc.js');
+require('../chunks/bundle-g0lpRY8_.js');
 require('./TextButton.js');
-require('../color-45578eb6.js');
-require('../utils-20fdce6e.js');
-require('../consts-39b0df2d.js');
+require('../chunks/bundle-B2MaAm21.js');
+require('../chunks/bundle-p1cCW0sH.js');
+require('../chunks/bundle-RaQV-Bpr.js');
 require('../withSendbird.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-1c49b970.js');
+require('../chunks/bundle-BJe68nS0.js');
 require('../VoiceRecorder/context.js');
-require('./Modal.js');
 require('./PlaybackTime.js');
-require('../index-6b215583.js');
+require('../chunks/bundle-JggdKsJa.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-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
-  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;
-  var longPress = useLongPress.useLongPress({
-    onLongPress: function () {
-      if (isMobile) {
-        setShowMenu(true);
-      }
-    },
-    onClick: utils.noop
-  }, {
-    delay: 300,
-    shouldPreventDefault: false
-  });
-  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: 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 && index.isSendableMessage(message) &&
-  /*#__PURE__*/
-  /** user profile */
-  React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      var _a, _b;
-      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : '')
-        // @ts-ignore
-        ,
-        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: function () {
-          if (!disableUserProfile) toggleDropdown();
-        }
-      });
-    },
-    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, {
-    className: "sendbird-message-content-menu__normal-menu",
-    channel: channel,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showEdit: showEdit,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: function (_a) {
-      var _b;
-      var message = _a.message;
-      if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
-        onReplyInThread({
-          message: message
-        });
-      } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-        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,
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
-    className: 'sendbird-message-content__middle'
-  }, 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",
-    type: ui_Label.LabelTypography.CAPTION_2,
-    color: ui_Label.LabelColors.ONBACKGROUND_2
-  },
-  // @ts-ignore
-  ((_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])
-  }, /*#__PURE__*/React__default["default"].createElement(ui_QuoteMessage, {
-    className: "sendbird-message-content__middle__quote-message__quote",
-    message: message,
-    userId: userId,
-    isByMe: isByMe,
-    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) && ((_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);
-      }
-    }
-  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName(['sendbird-message-content__middle__body-container'])
-  }, isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-message-content__middle__body-container__created-at__component-container"
-  }, /*#__PURE__*/React__default["default"].createElement(ui_MessageStatus.MessageStatus, {
-    message: message,
-    channel: channel
-  }))), isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? /*#__PURE__*/React__default["default"].createElement(ui_OGMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false,
-    isReactionEnabled: isReactionEnabledInChannel,
-    onMessageHeightChange: onMessageHeightChange
-  }) : index.isTextMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_TextMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), index.getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default["default"].createElement(ui_FileMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), 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,
-    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: (_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, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel,
-    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,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), 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,
-    message: message,
-    channel: channel,
-    isByMe: isByMe,
-    emojiContainer: emojiContainer,
-    memberNicknamesMap: nicknamesMap,
-    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$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: 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", {
-    className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
-  }, isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
-    className: "sendbird-message-content-menu__reaction-menu",
-    message: message,
-    userId: userId,
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }), /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
-    className: "sendbird-message-content-menu__normal-menu",
-    channel: channel,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: function (_a) {
-      var _b;
-      var message = _a.message;
-      if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
-        onReplyInThread({
-          message: message
-        });
-      } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
-      }
-    }
-  }))), 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: function () {
-      setShowMenu(false);
-    },
-    message: message,
-    isReactionEnabled: isReactionEnabledInChannel,
-    isByMe: isByMe,
-    userId: userId,
-    replyType: replyType,
-    disabled: disabled,
-    showRemove: showRemove,
-    emojiContainer: emojiContainer,
-    resendMessage: resendMessage,
-    deleteMessage: deleteMessage,
-    setQuoteMessage: setQuoteMessage,
-    toggleReaction: toggleReaction,
-    showEdit: showEdit,
-    onReplyInThread: function (_a) {
-      var _b;
-      var message = _a.message;
-      if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
-        onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-          message: message
-        });
-      } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-        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);
-      }
-    }
-  }));
+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
+    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;
+    var longPress = useLongPress.useLongPress({
+        onLongPress: function () {
+            if (isMobile) {
+                setShowMenu(true);
+            }
+        },
+        onClick: utils.noop,
+    }, {
+        delay: 300,
+        shouldPreventDefault: false,
+    });
+    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 (React.createElement(ui_AdminMessage, { message: message }));
+    }
+    return (React.createElement("div", { className: index.getClassName([className, 'sendbird-message-content', isByMeClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
+        React.createElement("div", { className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
+            (!isByMe && !chainBottom && index.isSendableMessage(message)) && (
+            /** user profile */
+            React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) {
+                    var _a, _b;
+                    return (React.createElement(ui_Avatar.default, { className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : ''), 
+                        // @ts-ignore
+                        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: function () { if (!disableUserProfile)
+                            toggleDropdown(); } }));
+                }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems
+                /**
+                * parentRef: For catching location(x, y) of MenuItems
+                * parentContainRef: For toggling more options(menus & reactions)
+                */
+                , { 
+                    /**
+                    * 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 })
+                    : (React.createElement(ui_UserProfile, { user: message.sender, onSuccess: closeDropdown })))); } })),
+            isByMe && !isMobile && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
+                React.createElement(ui_MessageItemMenu, { className: "sendbird-message-content-menu__normal-menu", channel: channel, message: message, isByMe: isByMe, replyType: replyType, disabled: disabled, showEdit: showEdit, showRemove: showRemove, resendMessage: resendMessage, setQuoteMessage: setQuoteMessage, setSupposedHover: setSupposedHover, onReplyInThread: function (_a) {
+                        var _b;
+                        var message = _a.message;
+                        if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+                            onReplyInThread({ message: message });
+                        }
+                        else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+                            scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
+                        }
+                    } }),
+                isReactionEnabledInChannel && (React.createElement(ui_MessageItemReactionMenu, { className: "sendbird-message-content-menu__reaction-menu", message: message, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover }))))),
+        React.createElement("div", _tslib.__assign({ className: 'sendbird-message-content__middle' }, (isMobile ? _tslib.__assign({}, longPress) : {}), { ref: contentRef }),
+            (!isByMe && !chainTop && !useReplying) && (React.createElement(ui_Label.Label, { className: "sendbird-message-content__middle__sender-name", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, 
+            // @ts-ignore
+            ((_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) ? (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName]) },
+                React.createElement(ui_QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message, userId: userId, isByMe: isByMe, 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))
+                            && ((_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);
+                        }
+                    } }))) : null,
+            React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container']) },
+                (isByMe && !chainBottom) && (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
+                    React.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
+                        React.createElement(ui_MessageStatus.MessageStatus, { message: message, channel: channel })))),
+                isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? (React.createElement(ui_OGMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel, onMessageHeightChange: onMessageHeightChange })) : index.isTextMessage(message) && (React.createElement(ui_TextMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel })),
+                (index.getUIKitMessageType(message) === messageTypes.FILE) && (React.createElement(ui_FileMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })),
+                index.isMultipleFilesMessage(message) && (React.createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList })),
+                index.isVoiceMessage(message) && (React.createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, channelUrl: (_l = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _l !== void 0 ? _l : '', isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel })),
+                (index.isThumbnailMessage(message)) && (React.createElement(ui_ThumbnailMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, showFileViewer: showFileViewer, style: isMobile ? { width: '100%' } : {} })),
+                (index.getUIKitMessageType(message) === messageTypes.UNKNOWN) && (React.createElement(ui_UnknownMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })),
+                (isReactionEnabledInChannel && ((_m = message === null || message === void 0 ? void 0 : message.reactions) === null || _m === void 0 ? void 0 : _m.length) > 0) && (React.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' : '',
+                    ]) },
+                    React.createElement(ui_EmojiReactions, { userId: userId, message: message, channel: channel, isByMe: isByMe, emojiContainer: emojiContainer, memberNicknamesMap: nicknamesMap, toggleReaction: toggleReaction, onPressUserProfile: onPressUserProfileHandler }))),
+                (!isByMe && !chainBottom) && (React.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$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+                    locale: dateLocale,
+                })))),
+            displayThreadReplies && (React.createElement(ui_ThreadReplies, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message }); } }))),
+        React.createElement("div", { className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName]) }, !isByMe && !isMobile && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
+            isReactionEnabledInChannel && (React.createElement(ui_MessageItemReactionMenu, { className: "sendbird-message-content-menu__reaction-menu", message: message, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover })),
+            React.createElement(ui_MessageItemMenu, { className: "sendbird-message-content-menu__normal-menu", channel: channel, message: message, isByMe: isByMe, replyType: replyType, disabled: disabled, showRemove: showRemove, resendMessage: resendMessage, setQuoteMessage: setQuoteMessage, setSupposedHover: setSupposedHover, onReplyInThread: function (_a) {
+                    var _b;
+                    var message = _a.message;
+                    if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+                        onReplyInThread({ message: message });
+                    }
+                    else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+                        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
+                    }
+                } })))),
+        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))) && (React.createElement(index$2.MobileMenu, { parentRef: contentRef, channel: channel, hideMenu: function () { setShowMenu(false); }, message: message, isReactionEnabled: isReactionEnabledInChannel, isByMe: isByMe, userId: userId, replyType: replyType, disabled: disabled, showRemove: showRemove, emojiContainer: emojiContainer, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, toggleReaction: toggleReaction, showEdit: showEdit, onReplyInThread: function (_a) {
+                var _b;
+                var message = _a.message;
+                if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+                    onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
+                }
+                else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+                    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);
+                }
+            } }))));
 }
 
 module.exports = MessageContent;