@sendbird/uikit-react 3.13.3 → 3.14.0-beta.2

package/cjs/ui/MessageContent.js

@@ -1,58 +1,58 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-B3Lu20wG.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var index$2 = require('../chunks/bundle-DskQULoR.js');
-var ui_MessageStatus = require('../chunks/bundle-Bpm6PJIl.js');
+var index$2 = require('../chunks/bundle-7FLBAmYO.js');
+var ui_MessageStatus = require('../chunks/bundle-Dy6Gn-sd.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
-var ui_Label = require('../chunks/bundle-B-njjZtk.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../chunks/bundle-Tx6vw4BY.js');
-var LocalizationContext = require('../chunks/bundle-DvduWWQk.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var message = require('@sendbird/chat/message');
-var useLongPress = require('../chunks/bundle-BNCNRHux.js');
-var index$3 = require('../chunks/bundle-CncTMWLv.js');
-var MediaQueryContext = require('../chunks/bundle-1FXPxsfD.js');
+var useLongPress = require('../chunks/bundle-CIswYN43.js');
+var index$3 = require('../chunks/bundle-MFvyy6ar.js');
+var MediaQueryContext = require('../chunks/bundle-CsvKRjaK.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../chunks/bundle-P5AI1HkP.js');
-var utils = require('../chunks/bundle-Bc6y_vRE.js');
+var _const = require('../chunks/bundle-DUP4cxoZ.js');
+var utils = require('../chunks/bundle-CDBTt08y.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Avatar = require('../chunks/bundle-DkGYX29W.js');
+var ui_Avatar = require('../chunks/bundle-BsGXZt6G.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-tbYf0yOX.js');
+var UserProfileContext = require('../chunks/bundle-BF04PgMH.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
 var ui_FileMessageItemBody = require('./FileMessageItemBody.js');
-var useFileInfoListWithUploaded = require('../chunks/bundle-CXaKbxhR.js');
+var useFileInfoListWithUploaded = require('../chunks/bundle-Y_FLyDnc.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
 var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
-var index$1 = require('../chunks/bundle-HOuE7syZ.js');
+var index$1 = require('../chunks/bundle-Cmmi9pdk.js');
 var ui_TemplateMessageItemBody = require('./TemplateMessageItemBody.js');
 var ui_Icon = require('./Icon.js');
 var ui_FeedbackIconButton = require('./FeedbackIconButton.js');
 var ui_MobileFeedbackMenu = require('./MobileFeedbackMenu.js');
 var Channel_components_MessageFeedbackModal = require('../Channel/components/MessageFeedbackModal.js');
-var ui_Modal = require('../chunks/bundle-BJD09510.js');
+var ui_Modal = require('../chunks/bundle-dNtU9_eg.js');
 var ui_Button = require('./Button.js');
-var useKeyDown = require('../chunks/bundle-CfRX00vQ.js');
-require('../chunks/bundle-D_qbYkHk.js');
+var useKeyDown = require('../chunks/bundle-tHnRbr7F.js');
+require('../chunks/bundle-1hCsXfVb.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-DtroGUKx.js');
-require('../chunks/bundle-CN0vR-TH.js');
+require('../chunks/bundle-BR23SbdZ.js');
+require('../chunks/bundle-BVgN7Stu.js');
 require('./IconButton.js');
-require('../chunks/bundle-QSgOdsGM.js');
+require('../chunks/bundle-INETVVGE.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-S09sS9Ub.js');
-require('../chunks/bundle-prE7SKQr.js');
+require('../chunks/bundle-DfYperTC.js');
+require('../chunks/bundle-CqF06THu.js');
 require('@sendbird/chat/groupChannel');
 require('./ImageRenderer.js');
 require('./ReactionButton.js');
@@ -62,37 +62,38 @@ require('../hooks/useModal.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
-require('../chunks/bundle-HXyGAP9T.js');
+require('../chunks/bundle--ToWZ9cj.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-DcVYwXP-.js');
+require('../chunks/bundle-BMsGwLym.js');
 require('../withSendbird.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../chunks/bundle-BSLZ5pEu.js');
-require('../chunks/bundle-2ATovRxE.js');
-require('../chunks/bundle-CQiNKK2y.js');
+require('../chunks/bundle-DcPTVUQJ.js');
+require('../chunks/bundle-FD0n8tOs.js');
+require('../chunks/bundle-tOZCSmZj.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../chunks/bundle-DIfKPcm_.js');
-require('../chunks/bundle-BO1-msX2.js');
+require('../chunks/bundle-BR1tsZpK.js');
+require('../chunks/bundle-B2cSnWcr.js');
 require('./TextButton.js');
-require('../chunks/bundle-BpwSTA3F.js');
-require('../chunks/bundle-DuHJq3hs.js');
-require('../chunks/bundle-BBS4PSSm.js');
+require('../chunks/bundle-SIHqK2VF.js');
+require('../chunks/bundle-DNP731Dg.js');
+require('../chunks/bundle-Dpu1gg5r.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../chunks/bundle-CKC-b4Bw.js');
+require('../chunks/bundle-BwO19Jro.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
-require('../chunks/bundle-CEiDcA9X.js');
+require('../chunks/bundle-CS644BJp.js');
 require('./FallbackTemplateMessageItemBody.tsx.js');
 require('./LoadingTemplateMessageItemBody.tsx.js');
+require('./Carousel.js');
 require('./Input.js');
 require('@sendbird/uikit-tools');
 
 function MessageProfile(props) {
-    var message = props.message, channel = props.channel, userId = props.userId, _a = props.chainBottom, chainBottom = _a === void 0 ? false : _a, isByMe = props.isByMe, displayThreadReplies = props.displayThreadReplies;
+    var message = props.message, channel = props.channel, userId = props.userId, _a = props.chainBottom, chainBottom = _a === void 0 ? false : _a, isByMe = props.isByMe, displayThreadReplies = props.displayThreadReplies, bottom = props.bottom;
     var avatarRef = React.useRef(null);
     var _b = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _b.disableUserProfile, renderUserProfile = _b.renderUserProfile;
     if (isByMe || chainBottom || !index.isSendableMessage(message)) {
@@ -104,7 +105,7 @@ function MessageProfile(props) {
                     || message.sender.profileUrl
                     || '', 
                 // TODO: Divide getting profileUrl logic to utils
-                ref: avatarRef, width: "28px", height: "28px", onClick: function () {
+                ref: avatarRef, width: "28px", height: "28px", bottom: bottom, onClick: function () {
                     if (!disableUserProfile)
                         toggleDropdown();
                 } }));
@@ -129,7 +130,7 @@ function MessageProfile(props) {
 
 var MESSAGE_ITEM_BODY_CLASSNAME = 'sendbird-message-content__middle__message-item-body';
 function MessageBody(props) {
-    var message = props.message, channel = props.channel, showFileViewer = props.showFileViewer, onMessageHeightChange = props.onMessageHeightChange, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, mouseHover = props.mouseHover, isMobile = props.isMobile, config = props.config, isReactionEnabledInChannel = props.isReactionEnabledInChannel, isByMe = props.isByMe;
+    var message = props.message, channel = props.channel, showFileViewer = props.showFileViewer, onMessageHeightChange = props.onMessageHeightChange, mouseHover = props.mouseHover, isMobile = props.isMobile, config = props.config, isReactionEnabledInChannel = props.isReactionEnabledInChannel, isByMe = props.isByMe;
     var threadMessageKindKey = useFileInfoListWithUploaded.useThreadMessageKindKeySelector({
         isMobile: isMobile,
     });
@@ -142,8 +143,8 @@ function MessageBody(props) {
         && index.isSendableMessage(message)
         && index.isOGMessage(message); }, function () { return (React.createElement(ui_OGMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel, onMessageHeightChange: onMessageHeightChange })); })
         .when(index.isTextMessage, function () { return (React.createElement(ui_TextMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel })); })
-        .when(function (message) { return index.getUIKitMessageType(message) === messageTypes.FILE; }, function () { return (React.createElement(ui_FileMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })); })
-        .when(index.isMultipleFilesMessage, function () { return (React.createElement(useFileInfoListWithUploaded.MultipleFilesMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })); })
+        .when(function (message) { return index.getUIKitMessageType(message) === messageTypes.FILE; }, function () { return (React.createElement(ui_FileMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })); })
+        .when(index.isMultipleFilesMessage, function () { return (React.createElement(useFileInfoListWithUploaded.MultipleFilesMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList })); })
         .when(index.isVoiceMessage, function () {
         var _a;
         return (React.createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, channelUrl: (_a = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _a !== void 0 ? _a : '', isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel }));
@@ -195,27 +196,34 @@ function MessageFeedbackFailedModal(props) {
 
 function MessageContent(props) {
     var _this = this;
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var 
     // Internal props
-    className = props.className, userId = props.userId, channel = props.channel, message$1 = props.message, _s = props.disabled, disabled = _s === void 0 ? false : _s, _t = props.chainTop, chainTop = _t === void 0 ? false : _t, _u = props.chainBottom, chainBottom = _u === void 0 ? false : _u, _v = props.isReactionEnabled, isReactionEnabled = _v === void 0 ? false : _v, _w = props.disableQuoteMessage, disableQuoteMessage = _w === void 0 ? false : _w, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, emojiContainer = props.emojiContainer, scrollToMessage = props.scrollToMessage, showEdit = props.showEdit, showRemove = props.showRemove, showFileViewer = props.showFileViewer, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onReplyInThread = props.onReplyInThread, onQuoteMessageClick = props.onQuoteMessageClick, onMessageHeightChange = props.onMessageHeightChange, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, 
+    className = props.className, userId = props.userId, channel = props.channel, message$1 = props.message, _u = props.disabled, disabled = _u === void 0 ? false : _u, _v = props.chainTop, chainTop = _v === void 0 ? false : _v, _w = props.chainBottom, chainBottom = _w === void 0 ? false : _w, _x = props.isReactionEnabled, isReactionEnabled = _x === void 0 ? false : _x, _y = props.disableQuoteMessage, disableQuoteMessage = _y === void 0 ? false : _y, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, emojiContainer = props.emojiContainer, scrollToMessage = props.scrollToMessage, showEdit = props.showEdit, showRemove = props.showRemove, showFileViewer = props.showFileViewer, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onReplyInThread = props.onReplyInThread, onQuoteMessageClick = props.onQuoteMessageClick, onMessageHeightChange = props.onMessageHeightChange, 
     // Public props for customization
-    _x = props.renderSenderProfile, 
+    _z = props.renderSenderProfile, 
     // Public props for customization
-    renderSenderProfile = _x === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _x, _y = props.renderMessageBody, renderMessageBody = _y === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _y, _z = props.renderMessageHeader, renderMessageHeader = _z === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _z, _0 = props.renderMessageMenu, renderMessageMenu = _0 === void 0 ? function (props) { return (React.createElement(ui_MessageItemMenu.MessageMenu, _tslib.__assign({}, props))); } : _0, _1 = props.renderEmojiMenu, renderEmojiMenu = _1 === void 0 ? function (props) { return (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props))); } : _1, _2 = props.renderEmojiReactions, renderEmojiReactions = _2 === void 0 ? function (props) { return (React.createElement(ui_EmojiReactions, _tslib.__assign({}, props))); } : _2, _3 = props.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _3 === void 0 ? function (props) { return (React.createElement(index$3.MobileMenu, _tslib.__assign({}, props))); } : _3;
+    renderSenderProfile = _z === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _z, _0 = props.renderMessageBody, renderMessageBody = _0 === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _0, _1 = props.renderMessageHeader, renderMessageHeader = _1 === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _1, _2 = props.renderMessageMenu, renderMessageMenu = _2 === void 0 ? function (props) { return (React.createElement(ui_MessageItemMenu.MessageMenu, _tslib.__assign({}, props))); } : _2, _3 = props.renderEmojiMenu, renderEmojiMenu = _3 === void 0 ? function (props) { return (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props))); } : _3, _4 = props.renderEmojiReactions, renderEmojiReactions = _4 === void 0 ? function (props) { return (React.createElement(ui_EmojiReactions, _tslib.__assign({}, props))); } : _4, _5 = props.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _5 === void 0 ? function (props) { return (React.createElement(index$3.MobileMenu, _tslib.__assign({}, props))); } : _5;
     var dateLocale = LocalizationContext.useLocalization().dateLocale;
-    var _4 = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _4.config, eventHandlers = _4.eventHandlers;
-    var logger = config.logger;
+    var _6 = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _6.config, eventHandlers = _6.eventHandlers;
     var onPressUserProfileHandler = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _a === void 0 ? void 0 : _a.onPressUserProfile;
     var contentRef = React.useRef(null);
+    var timestampRef = React.useRef(null);
+    var threadRepliesRef = React.useRef(null);
+    var feedbackButtonsRef = React.useRef(null);
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-    var _5 = React.useState(false), showMenu = _5[0], setShowMenu = _5[1];
-    var _6 = React.useState(false), mouseHover = _6[0], setMouseHover = _6[1];
-    var _7 = React.useState(false), supposedHover = _7[0], setSupposedHover = _7[1];
+    var _7 = React.useState(false), showMenu = _7[0], setShowMenu = _7[1];
+    var _8 = React.useState(false), mouseHover = _8[0], setMouseHover = _8[1];
+    var _9 = React.useState(false), supposedHover = _9[0], setSupposedHover = _9[1];
     // Feedback states
-    var _8 = React.useState(false), showFeedbackOptionsMenu = _8[0], setShowFeedbackOptionsMenu = _8[1];
-    var _9 = React.useState(false), showFeedbackModal = _9[0], setShowFeedbackModal = _9[1];
-    var _10 = React.useState(''), feedbackFailedText = _10[0], setFeedbackFailedText = _10[1];
+    var _10 = React.useState(false), showFeedbackOptionsMenu = _10[0], setShowFeedbackOptionsMenu = _10[1];
+    var _11 = React.useState(false), showFeedbackModal = _11[0], setShowFeedbackModal = _11[1];
+    var _12 = React.useState(''), feedbackFailedText = _12[0], setFeedbackFailedText = _12[1];
+    var _13 = React.useState(0), totalBottom = _13[0], setTotalBottom = _13[1];
+    var uiContainerType = index.getMessageContentMiddleClassNameByContainerType({
+        message: message$1,
+        isMobile: isMobile,
+    });
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     var isByMe = (userId === ((_b = message$1 === null || message$1 === void 0 ? void 0 : message$1.sender) === null || _b === void 0 ? void 0 : _b.userId))
         || ((message$1 === null || message$1 === void 0 ? void 0 : message$1.sendingStatus) === 'pending')
@@ -236,7 +244,6 @@ function MessageContent(props) {
         && (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedbackStatus)
         && message$1.myFeedbackStatus !== SbFeedbackStatus.NOT_APPLICABLE;
     var isFeedbackEnabled = ((_d = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _d === void 0 ? void 0 : _d.enableFeedback) && isFeedbackMessage;
-    var feedbackMessageClassName = isFeedbackEnabled ? 'sendbird-message-content__feedback' : '';
     /**
      * For TemplateMessage, do not display:
      *   - in web view:
@@ -251,6 +258,7 @@ function MessageContent(props) {
     var showOutgoingMenu = isNotTemplateMessage && isByMe && !isMobile;
     var showThreadReplies = isNotTemplateMessage && displayThreadReplies;
     var showRightContent = isNotTemplateMessage && !isByMe && !isMobile;
+    var isTimestampBottom = !!uiContainerType;
     var onCloseFeedbackForm = function () {
         setShowFeedbackModal(false);
     };
@@ -281,43 +289,66 @@ function MessageContent(props) {
     if (((_e = message$1 === null || message$1 === void 0 ? void 0 : message$1.isAdminMessage) === null || _e === void 0 ? void 0 : _e.call(message$1)) || (message$1 === null || message$1 === void 0 ? void 0 : message$1.messageType) === 'admin') {
         return (React.createElement(ui_AdminMessage, { message: message$1 }));
     }
-    return (React.createElement("div", { className: index.getClassName([className, 'sendbird-message-content', isByMeClassName, feedbackMessageClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
-        React.createElement("div", { className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
-            renderSenderProfile(_tslib.__assign(_tslib.__assign({}, props), { isByMe: isByMe, displayThreadReplies: displayThreadReplies })),
-            showOutgoingMenu && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
-                renderMessageMenu({
-                    channel: channel,
-                    message: message$1,
-                    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);
-                        }
-                    },
-                    deleteMessage: deleteMessage,
-                }),
-                isReactionEnabledInChannel && (renderEmojiMenu({
-                    message: message$1,
-                    userId: userId,
-                    emojiContainer: emojiContainer,
-                    toggleReaction: toggleReaction,
-                    setSupposedHover: setSupposedHover,
-                }))))),
+    React.useEffect(function () {
+        var getTotalBottom = function () {
+            var sum = 2;
+            if (timestampRef.current && isTimestampBottom) {
+                sum += 4 + timestampRef.current.clientHeight;
+            }
+            if (threadRepliesRef.current) {
+                sum += 4 + threadRepliesRef.current.clientHeight;
+            }
+            if (feedbackButtonsRef.current) {
+                sum += 4 + feedbackButtonsRef.current.clientHeight;
+            }
+            return sum;
+        };
+        setTotalBottom(getTotalBottom());
+    }, [isTimestampBottom]);
+    return (React.createElement("div", { className: index.getClassName([
+            className,
+            'sendbird-message-content',
+            isByMeClassName,
+            uiContainerType,
+        ]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
+        uiContainerType !== index.UI_CONTAINER_TYPES.FULL
+            && React.createElement("div", { className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
+                renderSenderProfile(_tslib.__assign(_tslib.__assign({}, props), { isByMe: isByMe, displayThreadReplies: displayThreadReplies, bottom: totalBottom > 0 ? totalBottom + 'px' : '' })),
+                showOutgoingMenu && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
+                    renderMessageMenu({
+                        channel: channel,
+                        message: message$1,
+                        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);
+                            }
+                        },
+                        deleteMessage: deleteMessage,
+                    }),
+                    isReactionEnabledInChannel && (renderEmojiMenu({
+                        message: message$1,
+                        userId: userId,
+                        emojiContainer: emojiContainer,
+                        toggleReaction: toggleReaction,
+                        setSupposedHover: setSupposedHover,
+                    }))))),
         React.createElement("div", _tslib.__assign({ className: index.getClassName([
                 'sendbird-message-content__middle',
                 index.isTemplateMessage(message$1) ? 'sendbird-message-content__middle__for_template_message' : '',
+                uiContainerType,
             ]) }, (isMobile ? _tslib.__assign({}, longPress) : {}), { ref: contentRef }),
             !isByMe && !chainTop && !useReplying && renderMessageHeader(props),
             (useReplying) ? (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName]) },
@@ -335,7 +366,12 @@ function MessageContent(props) {
                     'sendbird-message-content__middle__body-container',
                     index.isTemplateMessage(message$1) ? 'sendbird-message-content__middle__for_template_message' : '',
                 ]) },
-                (isByMe && !chainBottom) && (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
+                (isByMe && !chainBottom) && (React.createElement("div", { className: index.getClassName([
+                        'sendbird-message-content__middle__body-container__created-at',
+                        'left',
+                        supposedHoverClassName,
+                        uiContainerType,
+                    ]), ref: timestampRef },
                     React.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
                         React.createElement(ui_MessageStatus.MessageStatus, { message: message$1, channel: channel })))),
                 renderMessageBody({
@@ -348,7 +384,6 @@ function MessageContent(props) {
                     config: config,
                     isReactionEnabledInChannel: isReactionEnabledInChannel,
                     isByMe: isByMe,
-                    onBeforeDownloadFileMessage: onBeforeDownloadFileMessage,
                 }),
                 (isReactionEnabledInChannel && ((_j = message$1 === null || message$1 === void 0 ? void 0 : message$1.reactions) === null || _j === void 0 ? void 0 : _j.length) > 0) && (React.createElement("div", { className: index.getClassName([
                         'sendbird-message-content-reactions',
@@ -367,111 +402,117 @@ function MessageContent(props) {
                     toggleReaction: toggleReaction,
                     onPressUserProfile: onPressUserProfileHandler,
                 }))),
-                isFeedbackEnabled && React.createElement("div", { className: index.getClassName([
-                        'sendbird-message-content__middle__body-container__feedback-buttons-container',
-                        displayThreadReplies
-                            ? 'sendbird-message-content__middle__body-container__feedback-buttons-container_with-thread-replies'
-                            : '',
-                    ]) },
-                    React.createElement(ui_FeedbackIconButton, { isSelected: ((_k = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _k === void 0 ? void 0 : _k.rating) === message.FeedbackRating.GOOD, onClick: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
-                            var error_1;
-                            var _a, _b, _c;
-                            return _tslib.__generator(this, function (_d) {
-                                switch (_d.label) {
-                                    case 0:
-                                        if (!!((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _a === void 0 ? void 0 : _a.rating)) return [3 /*break*/, 5];
-                                        _d.label = 1;
-                                    case 1:
-                                        _d.trys.push([1, 3, , 4]);
-                                        return [4 /*yield*/, message$1.submitFeedback({
-                                                rating: message.FeedbackRating.GOOD,
-                                            })];
-                                    case 2:
-                                        _d.sent();
-                                        openFeedbackFormOrMenu();
-                                        return [3 /*break*/, 4];
-                                    case 3:
-                                        error_1 = _d.sent();
-                                        (_c = (_b = config === null || config === void 0 ? void 0 : config.logger) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.call(_b, 'Channel: Submit feedback failed.', error_1);
-                                        setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
-                                        return [3 /*break*/, 4];
-                                    case 4: return [3 /*break*/, 6];
-                                    case 5:
-                                        openFeedbackFormOrMenu();
-                                        _d.label = 6;
-                                    case 6: return [2 /*return*/];
-                                }
-                            });
-                        }); }, disabled: (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) && message$1.myFeedback.rating !== message.FeedbackRating.GOOD },
-                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FEEDBACK_LIKE, width: '24px', height: '24px' })),
-                    React.createElement(ui_FeedbackIconButton, { isSelected: ((_l = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _l === void 0 ? void 0 : _l.rating) === message.FeedbackRating.BAD, onClick: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
-                            var error_2;
-                            var _a, _b, _c;
-                            return _tslib.__generator(this, function (_d) {
-                                switch (_d.label) {
-                                    case 0:
-                                        if (!!((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _a === void 0 ? void 0 : _a.rating)) return [3 /*break*/, 5];
-                                        _d.label = 1;
-                                    case 1:
-                                        _d.trys.push([1, 3, , 4]);
-                                        return [4 /*yield*/, message$1.submitFeedback({
-                                                rating: message.FeedbackRating.BAD,
-                                            })];
-                                    case 2:
-                                        _d.sent();
-                                        openFeedbackFormOrMenu();
-                                        return [3 /*break*/, 4];
-                                    case 3:
-                                        error_2 = _d.sent();
-                                        (_c = (_b = config === null || config === void 0 ? void 0 : config.logger) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.call(_b, 'Channel: Submit feedback failed.', error_2);
-                                        setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
-                                        return [3 /*break*/, 4];
-                                    case 4: return [3 /*break*/, 6];
-                                    case 5:
-                                        openFeedbackFormOrMenu();
-                                        _d.label = 6;
-                                    case 6: return [2 /*return*/];
-                                }
-                            });
-                        }); }, disabled: (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) && message$1.myFeedback.rating !== message.FeedbackRating.BAD },
-                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FEEDBACK_DISLIKE, width: '24px', height: '24px' }))),
-                (!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$2.format((message$1 === null || message$1 === void 0 ? void 0 : message$1.createdAt) || 0, 'p', {
+                (!isByMe && !chainBottom) && (React.createElement(ui_Label.Label, { className: index.getClassName([
+                        'sendbird-message-content__middle__body-container__created-at',
+                        'right',
+                        supposedHoverClassName,
+                        uiContainerType,
+                    ]), type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2, ref: timestampRef }, index$2.format((message$1 === null || message$1 === void 0 ? void 0 : message$1.createdAt) || 0, 'p', {
                     locale: dateLocale,
                 })))),
-            showThreadReplies && (React.createElement(ui_ThreadReplies, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message$1 === null || message$1 === void 0 ? void 0 : message$1.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message$1 }); } }))),
-        React.createElement("div", { className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName]) }, showRightContent && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
-            isReactionEnabledInChannel && (renderEmojiMenu({
-                className: 'sendbird-message-content-menu__reaction-menu',
-                message: message$1,
-                userId: userId,
-                emojiContainer: emojiContainer,
-                toggleReaction: toggleReaction,
-                setSupposedHover: setSupposedHover,
-            })),
-            renderMessageMenu({
-                className: 'sendbird-message-content-menu__normal-menu',
-                channel: channel,
-                message: message$1,
-                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);
-                    }
-                },
-                deleteMessage: deleteMessage,
-            })))),
-        showMenu && (((_m = message$1 === null || message$1 === void 0 ? void 0 : message$1.isUserMessage) === null || _m === void 0 ? void 0 : _m.call(message$1)) || ((_o = message$1 === null || message$1 === void 0 ? void 0 : message$1.isFileMessage) === null || _o === void 0 ? void 0 : _o.call(message$1)) || ((_p = message$1 === null || message$1 === void 0 ? void 0 : message$1.isMultipleFilesMessage) === null || _p === void 0 ? void 0 : _p.call(message$1))) && renderMobileMenuOnLongPress({
+            isTimestampBottom && React.createElement("div", { style: {
+                    width: '100%',
+                    height: ((_l = (_k = timestampRef.current) === null || _k === void 0 ? void 0 : _k.clientHeight) !== null && _l !== void 0 ? _l : 0) + 'px',
+                    marginTop: '4px',
+                } }),
+            showThreadReplies && (React.createElement(ui_ThreadReplies.default, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message$1 === null || message$1 === void 0 ? void 0 : message$1.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message$1 }); }, ref: threadRepliesRef })),
+            isFeedbackEnabled && React.createElement("div", { className: "sendbird-message-content__middle__body-container__feedback-buttons-container", ref: feedbackButtonsRef },
+                React.createElement(ui_FeedbackIconButton, { isSelected: ((_m = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _m === void 0 ? void 0 : _m.rating) === message.FeedbackRating.GOOD, onClick: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var error_1;
+                        var _a, _b, _c;
+                        return _tslib.__generator(this, function (_d) {
+                            switch (_d.label) {
+                                case 0:
+                                    if (!!((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _a === void 0 ? void 0 : _a.rating)) return [3 /*break*/, 5];
+                                    _d.label = 1;
+                                case 1:
+                                    _d.trys.push([1, 3, , 4]);
+                                    return [4 /*yield*/, message$1.submitFeedback({
+                                            rating: message.FeedbackRating.GOOD,
+                                        })];
+                                case 2:
+                                    _d.sent();
+                                    openFeedbackFormOrMenu();
+                                    return [3 /*break*/, 4];
+                                case 3:
+                                    error_1 = _d.sent();
+                                    (_c = (_b = config === null || config === void 0 ? void 0 : config.logger) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.call(_b, 'Channel: Submit feedback failed.', error_1);
+                                    setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+                                    return [3 /*break*/, 4];
+                                case 4: return [3 /*break*/, 6];
+                                case 5:
+                                    openFeedbackFormOrMenu();
+                                    _d.label = 6;
+                                case 6: return [2 /*return*/];
+                            }
+                        });
+                    }); }, disabled: (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) && message$1.myFeedback.rating !== message.FeedbackRating.GOOD },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FEEDBACK_LIKE, width: '24px', height: '24px' })),
+                React.createElement(ui_FeedbackIconButton, { isSelected: ((_o = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _o === void 0 ? void 0 : _o.rating) === message.FeedbackRating.BAD, onClick: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var error_2;
+                        var _a, _b, _c;
+                        return _tslib.__generator(this, function (_d) {
+                            switch (_d.label) {
+                                case 0:
+                                    if (!!((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _a === void 0 ? void 0 : _a.rating)) return [3 /*break*/, 5];
+                                    _d.label = 1;
+                                case 1:
+                                    _d.trys.push([1, 3, , 4]);
+                                    return [4 /*yield*/, message$1.submitFeedback({
+                                            rating: message.FeedbackRating.BAD,
+                                        })];
+                                case 2:
+                                    _d.sent();
+                                    openFeedbackFormOrMenu();
+                                    return [3 /*break*/, 4];
+                                case 3:
+                                    error_2 = _d.sent();
+                                    (_c = (_b = config === null || config === void 0 ? void 0 : config.logger) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.call(_b, 'Channel: Submit feedback failed.', error_2);
+                                    setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+                                    return [3 /*break*/, 4];
+                                case 4: return [3 /*break*/, 6];
+                                case 5:
+                                    openFeedbackFormOrMenu();
+                                    _d.label = 6;
+                                case 6: return [2 /*return*/];
+                            }
+                        });
+                    }); }, disabled: (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) && message$1.myFeedback.rating !== message.FeedbackRating.BAD },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FEEDBACK_DISLIKE, width: '24px', height: '24px' })))),
+        showRightContent && (React.createElement("div", { className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName]) },
+            React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
+                isReactionEnabledInChannel && (renderEmojiMenu({
+                    className: 'sendbird-message-content-menu__reaction-menu',
+                    message: message$1,
+                    userId: userId,
+                    emojiContainer: emojiContainer,
+                    toggleReaction: toggleReaction,
+                    setSupposedHover: setSupposedHover,
+                })),
+                renderMessageMenu({
+                    className: 'sendbird-message-content-menu__normal-menu',
+                    channel: channel,
+                    message: message$1,
+                    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);
+                        }
+                    },
+                    deleteMessage: deleteMessage,
+                })))),
+        showMenu && (((_p = message$1 === null || message$1 === void 0 ? void 0 : message$1.isUserMessage) === null || _p === void 0 ? void 0 : _p.call(message$1)) || ((_q = message$1 === null || message$1 === void 0 ? void 0 : message$1.isFileMessage) === null || _q === void 0 ? void 0 : _q.call(message$1)) || ((_r = message$1 === null || message$1 === void 0 ? void 0 : message$1.isMultipleFilesMessage) === null || _r === void 0 ? void 0 : _r.call(message$1))) && renderMobileMenuOnLongPress({
             parentRef: contentRef,
             channel: channel,
             hideMenu: function () { setShowMenu(false); },
@@ -498,36 +539,8 @@ function MessageContent(props) {
                     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);
                 }
             },
-            onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
-                var allowDownload, err_1;
-                var _a, _b;
-                return _tslib.__generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            if (!onBeforeDownloadFileMessage) {
-                                return [2 /*return*/, null];
-                            }
-                            _c.label = 1;
-                        case 1:
-                            _c.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message$1 })];
-                        case 2:
-                            allowDownload = _c.sent();
-                            if (!allowDownload) {
-                                e.preventDefault();
-                                (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MessageContent: Not allowed to download.');
-                            }
-                            return [3 /*break*/, 4];
-                        case 3:
-                            err_1 = _c.sent();
-                            (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'MessageContent: Error occurred while determining download continuation:', err_1);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); },
         }),
-        ((_q = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _q === void 0 ? void 0 : _q.rating) && showFeedbackOptionsMenu && (React.createElement(ui_MobileFeedbackMenu, { hideMenu: function () {
+        ((_s = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _s === void 0 ? void 0 : _s.rating) && showFeedbackOptionsMenu && (React.createElement(ui_MobileFeedbackMenu, { hideMenu: function () {
                 setShowFeedbackOptionsMenu(false);
             }, onEditFeedback: function () {
                 setShowFeedbackOptionsMenu(false);
@@ -554,7 +567,7 @@ function MessageContent(props) {
                     }
                 });
             }); } })),
-        ((_r = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _r === void 0 ? void 0 : _r.rating) && showFeedbackModal && (React.createElement(Channel_components_MessageFeedbackModal, { selectedFeedback: message$1.myFeedback.rating, message: message$1, onUpdate: function (selectedFeedback, comment) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+        ((_t = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _t === void 0 ? void 0 : _t.rating) && showFeedbackModal && (React.createElement(Channel_components_MessageFeedbackModal, { selectedFeedback: message$1.myFeedback.rating, message: message$1, onUpdate: function (selectedFeedback, comment) { return _tslib.__awaiter(_this, void 0, void 0, function () {
                 var newFeedback, error_4;
                 var _a, _b;
                 return _tslib.__generator(this, function (_c) {