import { _ as __assign, a as __awaiter, b as __generator } from '../chunks/bundle-B9I7KCZ2.js';
import React__default, { useRef, useContext, useState, useEffect, useMemo } from 'react';
import { f as format } from '../chunks/bundle-Cme8jJ5D.js';
import { M as MessageStatus } from '../chunks/bundle-CQdKG76t.js';
import { M as MessageMenu } from '../chunks/bundle-1icRt_y4.js';
import { C as ContextMenu, b as MenuItems, f as MENU_ROOT_ID, e as EMOJI_MENU_ROOT_ID, g as getObservingId, h as MENU_OBSERVING_CLASS_NAME } from '../chunks/bundle-BfonFE4n.js';
import { c as classnames, d as deleteNullish, n as noop } from '../chunks/bundle-B628FXKZ.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-B1gHpFXu.js';
import { MessageEmojiMenu } from './MessageItemReactionMenu.js';
import EmojiReactions from './EmojiReactions.js';
import AdminMessage from './AdminMessage.js';
import QuoteMessage from './QuoteMessage.js';
import { k as isSendableMessage, n as getUIKitMessageTypes, K, C as isTemplateMessage, M as isOGMessage, N as isTextMessage, m as getUIKitMessageType, c as isMultipleFilesMessage, i as isVoiceMessage, p as isThumbnailMessage, e as getSenderName, W as getMessageContentMiddleClassNameByContainerType, X as isAdminMessage, w as getClassName, Y as UI_CONTAINER_TYPES } from '../chunks/bundle-BGoByD2z.js';
import { u as useLocalization, L as LocalizationContext } from '../chunks/bundle-BPLoGpIy.js';
import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
import { EmojiContainer } from '@sendbird/chat';
import { FeedbackRating, Feedback } from '@sendbird/chat/message';
import { u as useLongPress } from '../chunks/bundle-C6OwelAY.js';
import { MobileMenu } from './MobileMenu.js';
import { u as useMediaQueryContext } from '../chunks/bundle-BydEbpDQ.js';
import ThreadReplies from './ThreadReplies.js';
import { T as ThreadReplySelectType } from '../chunks/bundle-De1BnkR0.js';
import { A as Avatar } from '../chunks/bundle-D89r5O-w.js';
import UserProfile from './UserProfile.js';
import { a as UserProfileContext } from '../chunks/bundle-DUd6AS_D.js';
import OGMessageItemBody from './OGMessageItemBody.js';
import TextMessageItemBody from './TextMessageItemBody.js';
import FileMessageItemBody from './FileMessageItemBody.js';
import { u as useThreadMessageKindKeySelector, a as useFileInfoListWithUploaded, M as MultipleFilesMessageItemBody } from '../chunks/bundle-DeqlERYT.js';
import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
import UnknownMessageItemBody from './UnknownMessageItemBody.js';
import { TemplateMessageItemBody } from './TemplateMessageItemBody.js';
import Icon, { IconTypes } from './Icon.js';
import FeedbackIconButton from './FeedbackIconButton.js';
import MobileFeedbackMenu from './MobileFeedbackMenu.js';
import MessageFeedbackModal from './MessageFeedbackModal.js';
import MessageFeedbackFailedModal from './MessageFeedbackFailedModal.js';
import '../chunks/bundle-DnVyKahm.js';
import '../chunks/bundle-CMgJTzYH.js';
import './Loader.js';
import '../utils/message/getOutgoingMessageState.js';
import '../chunks/bundle-K3w8yQDQ.js';
import '../chunks/bundle-B3xAJZu1.js';
import './IconButton.js';
import 'react-dom';
import '@sendbird/chat/openChannel';
import './SortByRow.js';
import '../chunks/bundle-B97onQ-B.js';
import '../withSendbird.js';
import '../chunks/bundle-BwafidOs.js';
import './ImageRenderer.js';
import './ReactionButton.js';
import '@sendbird/chat/groupChannel';
import '../chunks/bundle-ByuZy4m8.js';
import './ReactionBadge.js';
import './BottomSheet.js';
import '../chunks/bundle-DAF0GGlr.js';
import './Button.js';
import '@sendbird/uikit-tools';
import 'css-vars-ponyfill';
import '../chunks/bundle-jVDgtxRn.js';
import '../chunks/bundle-Mfnn12A9.js';
import './UserListItem.js';
import './MutedAvatarOverlay.js';
import './Checkbox.js';
import '../chunks/bundle-DVCGbhaI.js';
import '../sendbirdSelectors.js';
import '../chunks/bundle-D6I-uHp_.js';
import './Tooltip.js';
import './TooltipWrapper.js';
import '../Message/context.js';
import '../chunks/bundle-Cpt2mEbq.js';
import '../chunks/bundle-CO34LgiE.js';
import '../chunks/bundle-C8uZHDqp.js';
import '../chunks/bundle-bbk4ulub.js';
import './MentionLabel.js';
import './LinkLabel.js';
import '../chunks/bundle-BQqQX3na.js';
import '../chunks/bundle-CpcTBaG-.js';
import './TextButton.js';
import '../chunks/bundle-DDIIh2iG.js';
import './FileViewer.js';
import '../chunks/bundle-l8sVpQGm.js';
import './ProgressBar.js';
import '../VoicePlayer/useVoicePlayer.js';
import './PlaybackTime.js';
import '../chunks/bundle-CsdXzHvl.js';
import './FallbackTemplateMessageItemBody.tsx.js';
import './LoadingTemplateMessageItemBody.tsx.js';
import './Input.js';

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, bottom = props.bottom;
    var avatarRef = useRef(null);
    var _b = useContext(UserProfileContext), disableUserProfile = _b.disableUserProfile, renderUserProfile = _b.renderUserProfile;
    if (isByMe || chainBottom || !isSendableMessage(message)) {
        return null;
    }
    return (React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) {
            var _a, _b;
            return (React__default.createElement(Avatar, { className: classnames('sendbird-message-content__left__avatar', displayThreadReplies && 'use-thread-replies'), 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", bottom: bottom, onClick: function () {
                    if (!disableUserProfile)
                        toggleDropdown();
                } }));
        }, menuItems: function (closeDropdown) { return (renderUserProfile ? (renderUserProfile({
            user: message.sender,
            close: closeDropdown,
            currentUserId: userId,
            avatarRef: avatarRef,
        })) : (React__default.createElement(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' } },
            React__default.createElement(UserProfile, { user: message.sender, onSuccess: closeDropdown })))); } }));
}

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, onTemplateMessageRenderedCallback = props.onTemplateMessageRenderedCallback, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, mouseHover = props.mouseHover, isMobile = props.isMobile, config = props.config, isReactionEnabledInChannel = props.isReactionEnabledInChannel, isByMe = props.isByMe;
    var threadMessageKindKey = useThreadMessageKindKeySelector({
        isMobile: isMobile,
    });
    var statefulFileInfoList = useFileInfoListWithUploaded(message); // For MultipleFilesMessage.
    var messageTypes = getUIKitMessageTypes();
    var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
    return K(message)
        .when(isTemplateMessage, function () { return (React__default.createElement(TemplateMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, theme: config === null || config === void 0 ? void 0 : config.theme, onTemplateMessageRenderedCallback: onTemplateMessageRenderedCallback })); })
        .when(function (message) { return isOgMessageEnabledInGroupChannel
        && isSendableMessage(message)
        && isOGMessage(message); }, function () {
        var _a;
        return (React__default.createElement(OGMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (_a = config.groupChannel.enableMention) !== null && _a !== void 0 ? _a : false, isReactionEnabled: isReactionEnabledInChannel, onMessageHeightChange: onMessageHeightChange, isMarkdownEnabled: config.groupChannel.enableMarkdownForUserMessage }));
    })
        .when(isTextMessage, function () {
        var _a;
        return (React__default.createElement(TextMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (_a = config.groupChannel.enableMention) !== null && _a !== void 0 ? _a : false, isReactionEnabled: isReactionEnabledInChannel, isMarkdownEnabled: config.groupChannel.enableMarkdownForUserMessage }));
    })
        .when(function (message) { return getUIKitMessageType(message) === messageTypes.FILE; }, function () { return (React__default.createElement(FileMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })); })
        .when(isMultipleFilesMessage, function () { return (React__default.createElement(MultipleFilesMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })); })
        .when(isVoiceMessage, function () {
        var _a;
        return (React__default.createElement(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 }));
    })
        .when(isThumbnailMessage, function () { return (React__default.createElement(ThumbnailMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, showFileViewer: showFileViewer, style: isMobile ? { width: '100%' } : {} })); })
        .otherwise(function (message) { return (React__default.createElement(UnknownMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })); });
}

function MessageHeader(props) {
    var _a, _b;
    var channel = props.channel, message = props.message;
    return (React__default.createElement(Label, { className: "sendbird-message-content__middle__sender-name", type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 }, 
    /**
     * To use the latest member profile information, message.sender might be outdated
     */
    ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
        var _a;
        // @ts-ignore
        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 || _b === void 0 ? void 0 : _b.nickname) || getSenderName(message)
    // TODO: Divide getting profileUrl logic to utils
    ));
}

var SbFeedbackStatus;
(function (SbFeedbackStatus) {
    /** Feedback is unavailable for this message. This is the default value for base message. */
    SbFeedbackStatus["NOT_APPLICABLE"] = "NOT_APPLICABLE";
    /** Feedback can be set for this message, but nothing has been submitted yet. */
    SbFeedbackStatus["NO_FEEDBACK"] = "NO_FEEDBACK";
    /** Feedback can be set for this message, and something has been submitted. */
    SbFeedbackStatus["SUBMITTED"] = "SUBMITTED";
})(SbFeedbackStatus || (SbFeedbackStatus = {}));

/* global MutationCallback */
/* global MutationObserverInit */
// To prevent Undefined lint errors: https://github.com/standard/standard/issues/1159#issuecomment-403003627
function useElementObserver(selector, targetElement) {
    var _a = useState(false), isElementMounted = _a[0], setIsElementMounted = _a[1];
    useEffect(function () {
        var targetElements = Array.isArray(targetElement) ? targetElement : [targetElement];
        var updateElementState = function () {
            var _a;
            var elements = targetElements === null || targetElements === void 0 ? void 0 : targetElements.map(function (target) { return target === null || target === void 0 ? void 0 : target.querySelector(selector); });
            setIsElementMounted((_a = elements === null || elements === void 0 ? void 0 : elements.some(function (element) { return !!element; })) !== null && _a !== void 0 ? _a : false);
        };
        updateElementState();
        var observerCallback = function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.addedNodes.length || mutation.removedNodes.length) {
                    Array.from(mutation.addedNodes).forEach(function (node) {
                        if (node.nodeType === Node.ELEMENT_NODE && node.matches(selector)) {
                            setIsElementMounted(true);
                        }
                    });
                    Array.from(mutation.removedNodes).forEach(function (node) {
                        if (node.nodeType === Node.ELEMENT_NODE && node.matches(selector)) {
                            setIsElementMounted(false);
                        }
                    });
                }
            });
        };
        var observer = new MutationObserver(observerCallback);
        var observerOptions = {
            childList: true, // Observe addition and removal of child nodes
            subtree: true, // Observe the entire subtree
        };
        targetElements === null || targetElements === void 0 ? void 0 : targetElements.forEach(function (target) {
            if (target)
                observer.observe(target, observerOptions);
        });
        return function () {
            observer.disconnect();
        };
    }, [selector, targetElement]);
    return isElementMounted;
}

function MessageContent(props) {
    var _this = this;
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
    var 
    // Internal props
    className = props.className, userId = props.userId, channel = props.channel, message = props.message, _q = props.disabled, disabled = _q === void 0 ? false : _q, _r = props.chainTop, chainTop = _r === void 0 ? false : _r, _s = props.chainBottom, chainBottom = _s === void 0 ? false : _s, _t = props.isReactionEnabled, isReactionEnabled = _t === void 0 ? false : _t, _u = props.disableQuoteMessage, disableQuoteMessage = _u === void 0 ? false : _u, 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;
    // Public props for customization
    var _v = deleteNullish(props), _w = _v.renderSenderProfile, renderSenderProfile = _w === void 0 ? function (props) { return React__default.createElement(MessageProfile, __assign({}, props)); } : _w, _x = _v.renderMessageBody, renderMessageBody = _x === void 0 ? function (props) { return React__default.createElement(MessageBody, __assign({}, props)); } : _x, _y = _v.renderMessageHeader, renderMessageHeader = _y === void 0 ? function (props) { return React__default.createElement(MessageHeader, __assign({}, props)); } : _y, _z = _v.renderMessageMenu, renderMessageMenu = _z === void 0 ? function (props) { return React__default.createElement(MessageMenu, __assign({}, props)); } : _z, _0 = _v.renderEmojiMenu, renderEmojiMenu = _0 === void 0 ? function (props) { return React__default.createElement(MessageEmojiMenu, __assign({}, props)); } : _0, _1 = _v.renderEmojiReactions, renderEmojiReactions = _1 === void 0 ? function (props) { return React__default.createElement(EmojiReactions, __assign({}, props)); } : _1, _2 = _v.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _2 === void 0 ? function (props) { return React__default.createElement(MobileMenu, __assign({}, props)); } : _2;
    var dateLocale = useLocalization().dateLocale;
    var _3 = useSendbirdStateContext(), config = _3.config, eventHandlers = _3.eventHandlers;
    var logger = config.logger;
    var onPressUserProfileHandler = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _a === void 0 ? void 0 : _a.onPressUserProfile;
    var contentRef = useRef();
    var timestampRef = useRef();
    var threadRepliesRef = useRef();
    var feedbackButtonsRef = useRef();
    var isMobile = useMediaQueryContext().isMobile;
    var _4 = useState(false), showMenu = _4[0], setShowMenu = _4[1];
    var _5 = useState(false), mouseHover = _5[0], setMouseHover = _5[1];
    var isMenuMounted = useElementObserver("#".concat(getObservingId(message.messageId), ".").concat(MENU_OBSERVING_CLASS_NAME), [
        document.getElementById(MENU_ROOT_ID),
        document.getElementById(EMOJI_MENU_ROOT_ID),
    ]);
    // Feedback states
    var _6 = useState(false), showFeedbackOptionsMenu = _6[0], setShowFeedbackOptionsMenu = _6[1];
    var _7 = useState(false), showFeedbackModal = _7[0], setShowFeedbackModal = _7[1];
    var _8 = useState(''), feedbackFailedText = _8[0], setFeedbackFailedText = _8[1];
    var _9 = useState(getMessageContentMiddleClassNameByContainerType({
        message: message,
        isMobile: isMobile,
    })), uiContainerType = _9[0], setUiContainerType = _9[1];
    var onTemplateMessageRenderedCallback = function (renderedTemplateType) {
        if (renderedTemplateType === 'failed') {
            setUiContainerType(UI_CONTAINER_TYPES.DEFAULT);
        }
        else if (renderedTemplateType === 'composite') {
            /**
             * Composite templates must have default carousel view irregardless of given containerType.
             */
            setUiContainerType(UI_CONTAINER_TYPES.DEFAULT_CAROUSEL);
        }
    };
    var stringSet = useContext(LocalizationContext).stringSet;
    var isByMe = (userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.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 hoveredMenuClassName = isMenuMounted ? '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' : '';
    // Thread replies
    var displayThreadReplies = ((_c = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _c === void 0 ? void 0 : _c.replyCount)
        && message.threadInfo.replyCount > 0
        && replyType === 'THREAD';
    // Feedback buttons
    var isFeedbackMessage = !isByMe
        && !!(message === null || message === void 0 ? void 0 : message.myFeedbackStatus)
        && message.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;
    /**
     * For TemplateMessage, do not display:
     *   - in web view:
     *     - message menu
     *     - reaction menu
     *     - reply in thread
     *   - in mobile view:
     *     - bottom sheet on long click
     */
    var isNotTemplateMessage = !isTemplateMessage(message);
    var showLongPressMenu = isNotTemplateMessage && isMobile;
    var showOutgoingMenu = isNotTemplateMessage && isByMe && !isMobile;
    var showThreadReplies = isNotTemplateMessage && displayThreadReplies;
    var showRightContent = isNotTemplateMessage && !isByMe && !isMobile;
    var isTimestampBottom = !!uiContainerType;
    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;
    };
    var totalBottom = useMemo(function () { return getTotalBottom(); }, [isTimestampBottom]);
    var onCloseFeedbackForm = function () {
        setShowFeedbackModal(false);
    };
    var openFeedbackFormOrMenu = function () {
        if (isMobile) {
            setShowFeedbackOptionsMenu(true);
        }
        else {
            setShowFeedbackModal(true);
        }
    };
    // 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({
        onLongPress: function () {
            if (showLongPressMenu) {
                setShowMenu(true);
            }
        },
        onClick: noop,
    }, {
        delay: 300,
        shouldPreventDefault: false,
    });
    if (isAdminMessage(message)) {
        return (React__default.createElement(AdminMessage, { message: message }));
    }
    return (React__default.createElement("div", { className: getClassName([
            className !== null && className !== void 0 ? className : '',
            'sendbird-message-content',
            isByMeClassName,
            uiContainerType,
        ]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
        React__default.createElement("div", { className: classnames('sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName), "data-testid": "sendbird-message-content__left" },
            renderSenderProfile(__assign(__assign({}, props), { isByMe: isByMe, displayThreadReplies: displayThreadReplies, bottom: totalBottom > 0 ? totalBottom + 'px' : '' })),
            showOutgoingMenu && (React__default.createElement("div", { className: classnames('sendbird-message-content-menu', isReactionEnabledClassName, hoveredMenuClassName, isByMeClassName) },
                renderMessageMenu({
                    channel: channel,
                    message: message,
                    isByMe: isByMe,
                    replyType: replyType,
                    showEdit: showEdit,
                    showRemove: showRemove,
                    resendMessage: resendMessage,
                    setQuoteMessage: setQuoteMessage,
                    onReplyInThread: function (_a) {
                        var _b, _c;
                        var message = _a.message;
                        if (threadReplySelectType === ThreadReplySelectType.THREAD) {
                            onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
                        }
                        else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
                            scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((_c = (_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt) !== null && _c !== void 0 ? _c : 0, message.parentMessageId);
                        }
                    },
                    deleteMessage: deleteMessage,
                }),
                isReactionEnabledInChannel && (renderEmojiMenu({
                    message: message,
                    userId: userId,
                    emojiContainer: emojiContainer,
                    toggleReaction: toggleReaction,
                }))))),
        React__default.createElement("div", __assign({ className: classnames('sendbird-message-content__middle', isTemplateMessage(message) && 'sendbird-message-content__middle__for_template_message', uiContainerType), "data-testid": "sendbird-message-content__middle" }, (isMobile ? __assign({}, longPress) : {}), { ref: contentRef }),
            !isByMe && !chainTop && !useReplying && renderMessageHeader(props),
            (useReplying) ? (React__default.createElement("div", { className: classnames('sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName), "data-testid": "sendbird-message-content__middle__quote-message" },
                React__default.createElement(QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message, userId: userId, isByMe: isByMe, isUnavailable: ((_e = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _e !== void 0 ? _e : 0) > ((_g = (_f = message.parentMessage) === null || _f === void 0 ? void 0 : _f.createdAt) !== null && _g !== void 0 ? _g : 0), onClick: function () {
                        var _a;
                        if (replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.THREAD) {
                            onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({ message: message });
                        }
                        if ((replyType === 'QUOTE_REPLY' || (replyType === 'THREAD' && threadReplySelectType === 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 === null || scrollToMessage === void 0 ? void 0 : scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
                        }
                    } }))) : null,
            React__default.createElement("div", { className: classnames('sendbird-message-content__middle__body-container', isTemplateMessage(message) && 'sendbird-message-content__middle__for_template_message') },
                (isByMe && !chainBottom) && (React__default.createElement("div", { className: classnames('sendbird-message-content__middle__body-container__created-at', 'left', hoveredMenuClassName, uiContainerType), ref: timestampRef },
                    React__default.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
                        React__default.createElement(MessageStatus, { message: message, channel: channel })))),
                renderMessageBody({
                    message: message,
                    channel: channel,
                    showFileViewer: showFileViewer,
                    onMessageHeightChange: onMessageHeightChange,
                    mouseHover: mouseHover,
                    isMobile: isMobile,
                    config: config,
                    isReactionEnabledInChannel: isReactionEnabledInChannel,
                    isByMe: isByMe,
                    onTemplateMessageRenderedCallback: onTemplateMessageRenderedCallback,
                    onBeforeDownloadFileMessage: onBeforeDownloadFileMessage,
                }),
                (isReactionEnabledInChannel && ((_h = message === null || message === void 0 ? void 0 : message.reactions) === null || _h === void 0 ? void 0 : _h.length) > 0) && (React__default.createElement("div", { className: classnames('sendbird-message-content-reactions', isMultipleFilesMessage(message) ? 'image-grid'
                        : (isByMe && !isThumbnailMessage(message) && !isOGMessage(message)) && 'primary', mouseHover && 'mouse-hover') }, renderEmojiReactions({
                    userId: userId,
                    message: message,
                    channel: channel,
                    isByMe: isByMe,
                    // @ts-ignore
                    emojiContainer: emojiContainer !== null && emojiContainer !== void 0 ? emojiContainer : new EmojiContainer({}),
                    memberNicknamesMap: nicknamesMap !== null && nicknamesMap !== void 0 ? nicknamesMap : new Map(),
                    toggleReaction: toggleReaction,
                    onPressUserProfile: onPressUserProfileHandler,
                }))),
                (!isByMe && !chainBottom) && (React__default.createElement(Label, { className: classnames('sendbird-message-content__middle__body-container__created-at', 'right', hoveredMenuClassName, uiContainerType), type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_2, ref: timestampRef }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
                    locale: dateLocale,
                })))),
            isTimestampBottom && React__default.createElement("div", { style: {
                    width: '100%',
                    height: ((_k = (_j = timestampRef.current) === null || _j === void 0 ? void 0 : _j.clientHeight) !== null && _k !== void 0 ? _k : 0) + 'px',
                    marginTop: '4px',
                } }),
            showThreadReplies && (message === null || message === void 0 ? void 0 : message.threadInfo) && (React__default.createElement(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 }); }, ref: threadRepliesRef })),
            isFeedbackEnabled && React__default.createElement("div", { className: "sendbird-message-content__middle__body-container__feedback-buttons-container", ref: feedbackButtonsRef },
                React__default.createElement(FeedbackIconButton, { isSelected: ((_l = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _l === void 0 ? void 0 : _l.rating) === FeedbackRating.GOOD, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                        var error_1;
                        var _a, _b, _c;
                        return __generator(this, function (_d) {
                            switch (_d.label) {
                                case 0:
                                    if (!!((_a = message === null || message === void 0 ? void 0 : message.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.submitFeedback({
                                            rating: 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 === null || message === void 0 ? void 0 : message.myFeedback) && message.myFeedback.rating !== FeedbackRating.GOOD },
                    React__default.createElement(Icon, { type: IconTypes.FEEDBACK_LIKE, width: '24px', height: '24px' })),
                React__default.createElement(FeedbackIconButton, { isSelected: ((_m = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _m === void 0 ? void 0 : _m.rating) === FeedbackRating.BAD, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                        var error_2;
                        var _a, _b, _c;
                        return __generator(this, function (_d) {
                            switch (_d.label) {
                                case 0:
                                    if (!!((_a = message === null || message === void 0 ? void 0 : message.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.submitFeedback({
                                            rating: 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 === null || message === void 0 ? void 0 : message.myFeedback) && message.myFeedback.rating !== FeedbackRating.BAD },
                    React__default.createElement(Icon, { type: IconTypes.FEEDBACK_DISLIKE, width: '24px', height: '24px' })))),
        showRightContent && (React__default.createElement("div", { className: classnames('sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName), "data-testid": "sendbird-message-content__right" },
            React__default.createElement("div", { className: classnames('sendbird-message-content-menu', chainTopClassName, hoveredMenuClassName, isByMeClassName) },
                isReactionEnabledInChannel && (renderEmojiMenu({
                    className: 'sendbird-message-content-menu__reaction-menu',
                    message: message,
                    userId: userId,
                    emojiContainer: emojiContainer,
                    toggleReaction: toggleReaction,
                })),
                renderMessageMenu({
                    className: 'sendbird-message-content-menu__normal-menu',
                    channel: channel,
                    message: message,
                    isByMe: isByMe,
                    replyType: replyType,
                    showRemove: showRemove,
                    resendMessage: resendMessage,
                    setQuoteMessage: setQuoteMessage,
                    onReplyInThread: function (_a) {
                        var _b, _c;
                        var message = _a.message;
                        if (threadReplySelectType === ThreadReplySelectType.THREAD) {
                            onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
                        }
                        else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
                            scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((_c = (_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt) !== null && _c !== void 0 ? _c : 0, message.parentMessageId);
                        }
                    },
                    deleteMessage: deleteMessage,
                })))),
        showMenu && isSendableMessage(message) && channel && renderMobileMenuOnLongPress({
            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 === ThreadReplySelectType.THREAD) {
                    onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
                }
                else if (threadReplySelectType === 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);
                }
            },
            onDownloadClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
                var allowDownload, err_1;
                var _a, _b;
                return __generator(this, function (_c) {
                    switch (_c.label) {
                        case 0:
                            if (!onBeforeDownloadFileMessage) {
                                return [2 /*return*/];
                            }
                            _c.label = 1;
                        case 1:
                            _c.trys.push([1, 3, , 4]);
                            return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message })];
                        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*/];
                    }
                });
            }); },
        }),
        ((_o = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _o === void 0 ? void 0 : _o.rating) && showFeedbackOptionsMenu && (React__default.createElement(MobileFeedbackMenu, { hideMenu: function () {
                setShowFeedbackOptionsMenu(false);
            }, onEditFeedback: function () {
                setShowFeedbackOptionsMenu(false);
                setShowFeedbackModal(true);
            }, onRemoveFeedback: function () { return __awaiter(_this, void 0, void 0, function () {
                var error_3;
                var _a, _b;
                return __generator(this, function (_c) {
                    switch (_c.label) {
                        case 0:
                            _c.trys.push([0, 3, , 4]);
                            if (!(message.myFeedback !== null)) return [3 /*break*/, 2];
                            return [4 /*yield*/, message.deleteFeedback(message.myFeedback.id)];
                        case 1:
                            _c.sent();
                            _c.label = 2;
                        case 2: return [3 /*break*/, 4];
                        case 3:
                            error_3 = _c.sent();
                            (_b = (_a = config === null || config === void 0 ? void 0 : config.logger) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, 'Channel: Delete feedback failed.', error_3);
                            setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
                            return [3 /*break*/, 4];
                        case 4:
                            setShowFeedbackOptionsMenu(false);
                            return [2 /*return*/];
                    }
                });
            }); } })),
        ((_p = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _p === void 0 ? void 0 : _p.rating) && showFeedbackModal && (React__default.createElement(MessageFeedbackModal, { selectedFeedback: message.myFeedback.rating, message: message, onUpdate: function (selectedFeedback, comment) { return __awaiter(_this, void 0, void 0, function () {
                var newFeedback, error_4;
                var _a, _b;
                return __generator(this, function (_c) {
                    switch (_c.label) {
                        case 0:
                            if (!(message.myFeedback !== null)) return [3 /*break*/, 4];
                            newFeedback = new Feedback({
                                id: message.myFeedback.id,
                                rating: selectedFeedback,
                                comment: comment,
                            });
                            _c.label = 1;
                        case 1:
                            _c.trys.push([1, 3, , 4]);
                            return [4 /*yield*/, message.updateFeedback(newFeedback)];
                        case 2:
                            _c.sent();
                            return [3 /*break*/, 4];
                        case 3:
                            error_4 = _c.sent();
                            (_b = (_a = config === null || config === void 0 ? void 0 : config.logger) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, 'Channel: Update feedback failed.', error_4);
                            setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SAVE);
                            return [3 /*break*/, 4];
                        case 4:
                            onCloseFeedbackForm();
                            return [2 /*return*/];
                    }
                });
            }); }, onClose: onCloseFeedbackForm, onRemove: function () { return __awaiter(_this, void 0, void 0, function () {
                var error_5;
                var _a, _b;
                return __generator(this, function (_c) {
                    switch (_c.label) {
                        case 0:
                            _c.trys.push([0, 3, , 4]);
                            if (!(message.myFeedback !== null)) return [3 /*break*/, 2];
                            return [4 /*yield*/, message.deleteFeedback(message.myFeedback.id)];
                        case 1:
                            _c.sent();
                            _c.label = 2;
                        case 2: return [3 /*break*/, 4];
                        case 3:
                            error_5 = _c.sent();
                            (_b = (_a = config === null || config === void 0 ? void 0 : config.logger) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, 'Channel: Delete feedback failed.', error_5);
                            setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
                            return [3 /*break*/, 4];
                        case 4:
                            onCloseFeedbackForm();
                            return [2 /*return*/];
                    }
                });
            }); } })),
        feedbackFailedText && (React__default.createElement(MessageFeedbackFailedModal, { text: feedbackFailedText, onCancel: function () {
                setFeedbackFailedText('');
            } }))));
}

export { MessageContent as default };
//# sourceMappingURL=MessageContent.js.map
