UNPKG

@sendbird/uikit-react

Version:

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

513 lines (508 loc) 34.9 kB
import { _ as __assign, a as __awaiter, c as __generator } from '../chunks/bundle-Bpofr334.js'; import React__default, { useRef, useState, useEffect } from 'react'; import { f as format } from '../chunks/bundle-DyosazG-.js'; import { M as MessageStatus } from '../chunks/bundle-Bs8Cwq5j.js'; import { M as MessageMenu } from '../chunks/bundle-HZPwhqsr.js'; import { c as MENU_ROOT_ID, E as EMOJI_MENU_ROOT_ID, j as getObservingId, M as MENU_OBSERVING_CLASS_NAME } from '../chunks/bundle-zNUBt0Cg.js'; import { c as classnames, d as deleteNullish, n as noop } from '../chunks/bundle-DX6fRIJl.js'; import { L as Label, a as LabelColors, c as LabelTypography } from '../chunks/bundle-Cdplrrlw.js'; import { MessageEmojiMenu } from './MessageItemReactionMenu.js'; import EmojiReactions from './EmojiReactions.js'; import AdminMessage from './AdminMessage.js'; import QuoteMessage from './QuoteMessage.js'; import { a3 as uiContainerType, T as isTemplateMessage, D as isFormMessage, u as isAdminMessage, Z as isValidTemplateMessageType, e as getClassName, X as isThumbnailMessage, O as isSendableMessage, J as isMultipleFilesMessage, K as isOGMessage } from '../chunks/bundle-BZSLsKkw.js'; import { u as useLocalization } from '../chunks/bundle-Cdqsdoa8.js'; import '@sendbird/chat/message'; import { u as useLongPress } from '../chunks/bundle-WvDa8Nzx.js'; import { MobileMenu } from './MobileMenu.js'; import { u as useMediaQueryContext } from '../chunks/bundle-C2ARCMSL.js'; import ThreadReplies from './ThreadReplies.js'; import { T as ThreadReplySelectType } from '../chunks/bundle-CFc2hy8g.js'; import { M as MessageBody, a as MessageHeader, b as MessageProfile } from '../chunks/bundle-BrCEaRXK.js'; import './FeedbackIconButton.js'; import MobileFeedbackMenu from './MobileFeedbackMenu.js'; import MessageFeedbackModal from './MessageFeedbackModal.js'; import MessageFeedbackFailedModal from './MessageFeedbackFailedModal.js'; import { u as useElementObserver } from '../chunks/bundle-9ghXmCwH.js'; import { M as MESSAGE_TEMPLATE_KEY } from '../chunks/bundle-JhKiWlXT.js'; import { u as useSendbird } from '../chunks/bundle-4clodtJA.js'; import '../chunks/bundle-BqKoZDqX.js'; import '../chunks/bundle-DmnXeBdU.js'; import './Icon.js'; import './Loader.js'; import '../utils/message/getOutgoingMessageState.js'; import '../chunks/bundle-BrqWLoDb.js'; import '../chunks/bundle-DyguzebC.js'; import './IconButton.js'; import '@sendbird/chat'; import 'react-dom'; import '@sendbird/chat/openChannel'; import './SortByRow.js'; import '../chunks/bundle-LLA95Pqf.js'; import '../chunks/bundle-B56O1y8C.js'; import '@sendbird/chat/groupChannel'; import '../chunks/bundle-oM0Fxt9G.js'; import './ImageRenderer.js'; import './ReactionButton.js'; import '../chunks/bundle-CglqREVl.js'; import '../chunks/bundle-lqEjT2ED.js'; import './ReactionBadge.js'; import './BottomSheet.js'; import '../hooks/useModal.js'; import '../chunks/bundle-C4anRHWY.js'; import './Button.js'; import './UserListItem.js'; import '../chunks/bundle-B5LKcMN_.js'; import '../chunks/bundle-BJShQs4P.js'; import '../chunks/bundle-F_R9C4cW.js'; import './MutedAvatarOverlay.js'; import './Checkbox.js'; import './UserProfile.js'; import '../sendbirdSelectors.js'; import '../chunks/bundle-YDriVB8K.js'; import './Tooltip.js'; import './TooltipWrapper.js'; import '../Message/context.js'; import '../chunks/bundle-BRJdb8OX.js'; import '../chunks/bundle-CD4RzjMA.js'; import './OGMessageItemBody.js'; import '../chunks/bundle-CPOgmEXq.js'; import '../chunks/bundle-EKFQIahk.js'; import './MentionLabel.js'; import './LinkLabel.js'; import '../chunks/bundle-iPLJ9a5J.js'; import './TextMessageItemBody.js'; import '../chunks/bundle-B40pTdZv.js'; import './FileMessageItemBody.js'; import './TextButton.js'; import '../chunks/bundle-C1npFBfj.js'; import '../chunks/bundle-DXC9ZAL8.js'; import './FileViewer.js'; import '../chunks/bundle-BKXsd3zk.js'; import '@sendbird/uikit-tools'; import './VoiceMessageItemBody.js'; import './ProgressBar.js'; import '../VoicePlayer/useVoicePlayer.js'; import '../chunks/bundle-DWURNKdQ.js'; import '../VoiceRecorder/context.js'; import './PlaybackTime.js'; import './ThumbnailMessageItemBody.js'; import './UnknownMessageItemBody.js'; import './TemplateMessageItemBody.js'; import '../chunks/bundle-Dw9WYTqh.js'; import './FallbackTemplateMessageItemBody.tsx.js'; import './LoadingTemplateMessageItemBody.tsx.js'; import '../chunks/bundle-DiO7lolz.js'; import './Input.js'; 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 = {})); function MessageContentForTemplateMessage(props) { var _a, _b, _c; var channel = props.channel, message = props.message, showFileViewer = props.showFileViewer, onMessageHeightChange = props.onMessageHeightChange, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, renderSenderProfile = props.renderSenderProfile, renderMessageHeader = props.renderMessageHeader, renderMessageBody = props.renderMessageBody, isByMe = props.isByMe, displayThreadReplies = props.displayThreadReplies, mouseHover = props.mouseHover, isMobile = props.isMobile, isReactionEnabledInChannel = props.isReactionEnabledInChannel, hoveredMenuClassName = props.hoveredMenuClassName, templateType = props.templateType, useReplying = props.useReplying; var config = useSendbird().state.config; var dateLocale = useLocalization().dateLocale; var uiContainerTypeClassName = (_a = uiContainerType[templateType]) !== null && _a !== void 0 ? _a : ''; var senderProfile = renderSenderProfile(__assign(__assign({}, props), { chainBottom: false, className: '', isByMe: isByMe, displayThreadReplies: displayThreadReplies })); var messageHeader = renderMessageHeader(props); var messageBody = renderMessageBody({ message: message, channel: channel, showFileViewer: showFileViewer, onMessageHeightChange: onMessageHeightChange, mouseHover: mouseHover, isMobile: isMobile, config: config, isReactionEnabledInChannel: isReactionEnabledInChannel, isByMe: isByMe, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage, }); var timeStamp = React__default.createElement(Label, { className: classnames('sendbird-message-content__middle__body-container__created-at', 'right', hoveredMenuClassName, uiContainerTypeClassName), type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_2 }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', { locale: dateLocale, })); var templateData = (_b = message.extendedMessagePayload) === null || _b === void 0 ? void 0 : _b[MESSAGE_TEMPLATE_KEY]; var _d = (_c = templateData === null || templateData === void 0 ? void 0 : templateData.container_options) !== null && _c !== void 0 ? _c : {}, _e = _d.profile, profile = _e === void 0 ? true : _e, _f = _d.time, time = _f === void 0 ? true : _f, _g = _d.nickname, nickname = _g === void 0 ? true : _g; var hasContainerHeader = profile || nickname; return (React__default.createElement("div", { className: "sendbird-message-content__sendbird-ui-container-type__default__root" }, !isByMe && hasContainerHeader && !useReplying && (React__default.createElement("div", { className: "sendbird-message-content__sendbird-ui-container-type__default__header-container" }, React__default.createElement("div", { className: "sendbird-message-content__sendbird-ui-container-type__default__header-container__left__profile" }, profile && senderProfile), nickname && messageHeader)), messageBody, (!isByMe && time) && React__default.createElement("div", { className: "sendbird-message-content__sendbird-ui-container-type__default__bottom" }, timeStamp))); } function MessageContent(props) { var _this = this; var _a, _b, _c, _d, _e, _f, _g, _k, _l; var // Internal props className = props.className, userId = props.userId, channel = props.channel, message = props.message, _m = props.disabled, disabled = _m === void 0 ? false : _m, _o = props.chainTop, chainTop = _o === void 0 ? false : _o, _p = props.chainBottom, chainBottom = _p === void 0 ? false : _p, _q = props.isReactionEnabled, isReactionEnabled = _q === void 0 ? false : _q, _r = props.disableQuoteMessage, disableQuoteMessage = _r === void 0 ? false : _r, 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, markAsUnread = props.markAsUnread, onReplyInThread = props.onReplyInThread, onQuoteMessageClick = props.onQuoteMessageClick, onMessageHeightChange = props.onMessageHeightChange, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, filterEmojiCategoryIds = props.filterEmojiCategoryIds; // Public props for customization var _s = deleteNullish(props), _t = _s.renderSenderProfile, renderSenderProfile = _t === void 0 ? function (props) { return React__default.createElement(MessageProfile, __assign({}, props)); } : _t, _u = _s.renderMessageBody, renderMessageBody = _u === void 0 ? function (props) { return React__default.createElement(MessageBody, __assign({}, props)); } : _u, _v = _s.renderMessageHeader, renderMessageHeader = _v === void 0 ? function (props) { return React__default.createElement(MessageHeader, __assign({}, props)); } : _v, _w = _s.renderMessageMenu, renderMessageMenu = _w === void 0 ? function (props) { return React__default.createElement(MessageMenu, __assign({}, props)); } : _w, _x = _s.renderEmojiMenu, renderEmojiMenu = _x === void 0 ? function (props) { return React__default.createElement(MessageEmojiMenu, __assign({}, props)); } : _x, _y = _s.renderEmojiReactions, renderEmojiReactions = _y === void 0 ? function (props) { return React__default.createElement(EmojiReactions, __assign({}, props)); } : _y, _z = _s.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _z === void 0 ? function (props) { return React__default.createElement(MobileMenu, __assign({}, props)); } : _z; var _0 = useLocalization(), dateLocale = _0.dateLocale, stringSet = _0.stringSet; var _1 = useSendbird().state, config = _1.config, eventHandlers = _1.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 threadRepliesRef = useRef(); var feedbackButtonsRef = useRef(); var isMobile = useMediaQueryContext().isMobile; var _2 = useState(false), showMenu = _2[0], setShowMenu = _2[1]; var _3 = useState(false), mouseHover = _3[0], setMouseHover = _3[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 _4 = useState(false), showFeedbackOptionsMenu = _4[0], setShowFeedbackOptionsMenu = _4[1]; var _5 = useState(false), showFeedbackModal = _5[0], setShowFeedbackModal = _5[1]; var _6 = useState(''), feedbackFailedText = _6[0], setFeedbackFailedText = _6[1]; 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' : ''; useEffect(function () { if (useReplying) { onMessageHeightChange === null || onMessageHeightChange === void 0 ? void 0 : onMessageHeightChange(); } }, [useReplying]); // Thread replies var displayThreadReplies = (message === null || message === void 0 ? void 0 : message.threadInfo) && message.threadInfo.replyCount > 0 && replyType === 'THREAD'; // Feedback buttons !isByMe && !!(message === null || message === void 0 ? void 0 : message.myFeedbackStatus) && message.myFeedbackStatus !== SbFeedbackStatus.NOT_APPLICABLE; // Force-disable feedback regardless of config/message state. var isFeedbackEnabled = false; (_c = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _c === void 0 ? void 0 : _c.rating; /** * For TemplateMessage or FormMessage, do not display: * - in web view: * - message menu * - reaction menu * - reply in thread * - in mobile view: * - bottom sheet on long click */ var isNotSpecialMessage = !isTemplateMessage(message) && !isFormMessage(message); var showLongPressMenu = isNotSpecialMessage && isMobile; var showOutgoingMenu = isNotSpecialMessage && isByMe && !isMobile; var showThreadReplies = isNotSpecialMessage && displayThreadReplies; var showRightContent = isNotSpecialMessage && !isByMe && !isMobile; var getTotalBottom = function () { var sum = 2; if (threadRepliesRef.current) { sum += 4 + threadRepliesRef.current.clientHeight; } if (feedbackButtonsRef.current) { sum += 4 + feedbackButtonsRef.current.clientHeight; } return sum > 0 ? sum + 'px' : ''; }; var onCloseFeedbackForm = function () { setShowFeedbackModal(false); }; // 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 })); } if (isTemplateMessage(message)) { var templatePayload = message.extendedMessagePayload[MESSAGE_TEMPLATE_KEY]; if (isValidTemplateMessageType(templatePayload)) { return (React__default.createElement(MessageContentForTemplateMessage, __assign({}, props, { renderSenderProfile: renderSenderProfile, renderMessageHeader: renderMessageHeader, renderMessageBody: renderMessageBody, isByMe: isByMe, displayThreadReplies: displayThreadReplies, mouseHover: mouseHover, isMobile: isMobile, isReactionEnabledInChannel: isReactionEnabledInChannel, hoveredMenuClassName: hoveredMenuClassName, templateType: templatePayload['type'], useReplying: useReplying }))); } } return (React__default.createElement("div", { className: getClassName([ className !== null && className !== void 0 ? className : '', 'sendbird-message-content', isByMeClassName, ]), 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), { className: 'sendbird-message-content__left__avatar', isByMe: isByMe, displayThreadReplies: displayThreadReplies, bottom: getTotalBottom() })), 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, markAsUnread: markAsUnread, 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, filterEmojiCategoryIds: filterEmojiCategoryIds, }))))), React__default.createElement("div", __assign({ className: classnames('sendbird-message-content__middle'), "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: ((_d = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _d !== void 0 ? _d : 0) > ((_f = (_e = message.parentMessage) === null || _e === void 0 ? void 0 : _e.createdAt) !== null && _f !== void 0 ? _f : 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', isThumbnailMessage(message) && 'sendbird-message-content__middle__body-container--thumbnail') }, (isByMe && !chainBottom) && (React__default.createElement("div", { className: classnames('sendbird-message-content__middle__body-container__created-at', 'left', hoveredMenuClassName) }, 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, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage, }), (isReactionEnabledInChannel && ((_g = message === null || message === void 0 ? void 0 : message.reactions) === null || _g === void 0 ? void 0 : _g.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, emojiContainer: emojiContainer, memberNicknamesMap: nicknamesMap !== null && nicknamesMap !== void 0 ? nicknamesMap : new Map(), toggleReaction: toggleReaction, onPressUserProfile: onPressUserProfileHandler, filterEmojiCategoryIds: filterEmojiCategoryIds, }))), (!isByMe && !chainBottom) && (React__default.createElement(Label, { className: classnames('sendbird-message-content__middle__body-container__created-at', 'right', hoveredMenuClassName), type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_2 }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT, { locale: dateLocale, })))), 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), 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, filterEmojiCategoryIds: filterEmojiCategoryIds, })), renderMessageMenu({ className: 'sendbird-message-content-menu__normal-menu', channel: channel, message: message, isByMe: isByMe, replyType: replyType, showRemove: showRemove, resendMessage: resendMessage, setQuoteMessage: setQuoteMessage, markAsUnread: markAsUnread, 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, markAsUnread: markAsUnread, 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*/]; } }); }); }, }), ((_k = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _k === void 0 ? void 0 : _k.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*/]; } }); }); } })), ((_l = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _l === void 0 ? void 0 : _l.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 = { 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 { MessageBody, MessageContent, MessageHeader, MessageProfile, MessageContent as default }; //# sourceMappingURL=MessageContent.js.map