@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
525 lines (516 loc) • 36 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _tslib = require('../chunks/bundle-jAsAzWpU.js');
var React = require('react');
var index$2 = require('../chunks/bundle--ZBrECLK.js');
var ui_MessageStatus = require('../chunks/bundle-BNu-mNlA.js');
var MessageMenu = require('../chunks/bundle-FVds7Nnw.js');
var ui_ContextMenu = require('../chunks/bundle-BTzm82Jl.js');
var utils = require('../chunks/bundle-1F9guuKw.js');
var ui_Label = require('../chunks/bundle-DxZzcGya.js');
var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
var ui_EmojiReactions = require('./EmojiReactions.js');
var ui_AdminMessage = require('./AdminMessage.js');
var ui_QuoteMessage = require('./QuoteMessage.js');
var index$1 = require('../chunks/bundle-CskFALvU.js');
var LocalizationContext = require('../chunks/bundle-ClT0IexP.js');
require('@sendbird/chat/message');
var useLongPress = require('../chunks/bundle-IobNGCyV.js');
var ui_MobileMenu = require('./MobileMenu.js');
var MediaQueryContext = require('../chunks/bundle-DDUAkmTu.js');
var ui_ThreadReplies = require('./ThreadReplies.js');
var _const = require('../chunks/bundle-CeCg868O.js');
var index = require('../chunks/bundle-FGb-8cIo.js');
require('./FeedbackIconButton.js');
var ui_MobileFeedbackMenu = require('./MobileFeedbackMenu.js');
var ui_MessageFeedbackModal = require('./MessageFeedbackModal.js');
var ui_MessageFeedbackFailedModal = require('./MessageFeedbackFailedModal.js');
var useElementObserver = require('../chunks/bundle-DUmpUM6Z.js');
var consts = require('../chunks/bundle-DZN-28o5.js');
var useSendbird = require('../chunks/bundle-on0zTbLT.js');
require('../chunks/bundle-DS7dko_G.js');
require('../chunks/bundle-BXuNw6bR.js');
require('./Icon.js');
require('./Loader.js');
require('../utils/message/getOutgoingMessageState.js');
require('../chunks/bundle-AjkDYnfX.js');
require('../chunks/bundle-CBQxHnhS.js');
require('./IconButton.js');
require('@sendbird/chat');
require('react-dom');
require('@sendbird/chat/openChannel');
require('./SortByRow.js');
require('../chunks/bundle-BNgfU9I_.js');
require('../chunks/bundle-Buar9ys-.js');
require('@sendbird/chat/groupChannel');
require('../chunks/bundle-D-_6Kk3L.js');
require('./ImageRenderer.js');
require('./ReactionButton.js');
require('../chunks/bundle-BVn2UMtk.js');
require('../chunks/bundle-DvHjgbFi.js');
require('./ReactionBadge.js');
require('./BottomSheet.js');
require('../hooks/useModal.js');
require('../chunks/bundle-BFmC2V1o.js');
require('./Button.js');
require('./UserListItem.js');
require('../chunks/bundle-iF1pW7_s.js');
require('../chunks/bundle-Czc5a05Q.js');
require('../chunks/bundle-CZmT_dIf.js');
require('./MutedAvatarOverlay.js');
require('./Checkbox.js');
require('./UserProfile.js');
require('../sendbirdSelectors.js');
require('../chunks/bundle-B14gP5iL.js');
require('./Tooltip.js');
require('./TooltipWrapper.js');
require('../Message/context.js');
require('../chunks/bundle-CArwk_DH.js');
require('../chunks/bundle-BSfAJlO9.js');
require('./OGMessageItemBody.js');
require('../chunks/bundle-76A2Zzye.js');
require('../chunks/bundle-iwIElqGP.js');
require('./MentionLabel.js');
require('./LinkLabel.js');
require('../chunks/bundle-B4v0Agxd.js');
require('./TextMessageItemBody.js');
require('../chunks/bundle-Dqt-Moft.js');
require('./FileMessageItemBody.js');
require('./TextButton.js');
require('../chunks/bundle-mNJHRgJ3.js');
require('../chunks/bundle-btgMGRIX.js');
require('./FileViewer.js');
require('../chunks/bundle-DnOJJX7f.js');
require('@sendbird/uikit-tools');
require('./VoiceMessageItemBody.js');
require('./ProgressBar.js');
require('../VoicePlayer/useVoicePlayer.js');
require('../chunks/bundle-iWa9rWFV.js');
require('../VoiceRecorder/context.js');
require('./PlaybackTime.js');
require('./ThumbnailMessageItemBody.js');
require('./UnknownMessageItemBody.js');
require('./TemplateMessageItemBody.js');
require('../chunks/bundle-BKn9ow_B.js');
require('./FallbackTemplateMessageItemBody.tsx.js');
require('./LoadingTemplateMessageItemBody.tsx.js');
require('../chunks/bundle-DwLWArJq.js');
require('./Input.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
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.useSendbird().state.config;
var dateLocale = LocalizationContext.useLocalization().dateLocale;
var uiContainerTypeClassName = (_a = index$1.uiContainerType[templateType]) !== null && _a !== void 0 ? _a : '';
var senderProfile = renderSenderProfile(_tslib.__assign(_tslib.__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.default.createElement(ui_Label.Label, { className: utils.classnames('sendbird-message-content__middle__body-container__created-at', 'right', hoveredMenuClassName, uiContainerTypeClassName), type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$2.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
locale: dateLocale,
}));
var templateData = (_b = message.extendedMessagePayload) === null || _b === void 0 ? void 0 : _b[consts.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.default.createElement("div", { className: "sendbird-message-content__sendbird-ui-container-type__default__root" },
!isByMe
&& hasContainerHeader
&& !useReplying
&& (React__default.default.createElement("div", { className: "sendbird-message-content__sendbird-ui-container-type__default__header-container" },
React__default.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.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 = utils.deleteNullish(props), _t = _s.renderSenderProfile, renderSenderProfile = _t === void 0 ? function (props) { return React__default.default.createElement(index.MessageProfile, _tslib.__assign({}, props)); } : _t, _u = _s.renderMessageBody, renderMessageBody = _u === void 0 ? function (props) { return React__default.default.createElement(index.MessageBody, _tslib.__assign({}, props)); } : _u, _v = _s.renderMessageHeader, renderMessageHeader = _v === void 0 ? function (props) { return React__default.default.createElement(index.MessageHeader, _tslib.__assign({}, props)); } : _v, _w = _s.renderMessageMenu, renderMessageMenu = _w === void 0 ? function (props) { return React__default.default.createElement(MessageMenu.MessageMenu, _tslib.__assign({}, props)); } : _w, _x = _s.renderEmojiMenu, renderEmojiMenu = _x === void 0 ? function (props) { return React__default.default.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props)); } : _x, _y = _s.renderEmojiReactions, renderEmojiReactions = _y === void 0 ? function (props) { return React__default.default.createElement(ui_EmojiReactions, _tslib.__assign({}, props)); } : _y, _z = _s.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _z === void 0 ? function (props) { return React__default.default.createElement(ui_MobileMenu.MobileMenu, _tslib.__assign({}, props)); } : _z;
var _0 = LocalizationContext.useLocalization(), dateLocale = _0.dateLocale, stringSet = _0.stringSet;
var _1 = useSendbird.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 = React.useRef();
var threadRepliesRef = React.useRef();
var feedbackButtonsRef = React.useRef();
var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
var _2 = React.useState(false), showMenu = _2[0], setShowMenu = _2[1];
var _3 = React.useState(false), mouseHover = _3[0], setMouseHover = _3[1];
var isMenuMounted = useElementObserver.useElementObserver("#".concat(ui_ContextMenu.getObservingId(message.messageId), ".").concat(ui_ContextMenu.MENU_OBSERVING_CLASS_NAME), [
document.getElementById(ui_ContextMenu.MENU_ROOT_ID),
document.getElementById(ui_ContextMenu.EMOJI_MENU_ROOT_ID),
]);
// Feedback states
var _4 = React.useState(false), showFeedbackOptionsMenu = _4[0], setShowFeedbackOptionsMenu = _4[1];
var _5 = React.useState(false), showFeedbackModal = _5[0], setShowFeedbackModal = _5[1];
var _6 = React.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' : '';
React.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 = !index$1.isTemplateMessage(message) && !index$1.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.useLongPress({
onLongPress: function () {
if (showLongPressMenu) {
setShowMenu(true);
}
},
onClick: utils.noop,
}, {
delay: 300,
shouldPreventDefault: false,
});
if (index$1.isAdminMessage(message)) {
return (React__default.default.createElement(ui_AdminMessage, { message: message }));
}
if (index$1.isTemplateMessage(message)) {
var templatePayload = message.extendedMessagePayload[consts.MESSAGE_TEMPLATE_KEY];
if (index$1.isValidTemplateMessageType(templatePayload)) {
return (React__default.default.createElement(MessageContentForTemplateMessage, _tslib.__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.default.createElement("div", { className: index$1.getClassName([
className !== null && className !== void 0 ? className : '',
'sendbird-message-content',
isByMeClassName,
]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
React__default.default.createElement("div", { className: utils.classnames('sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName), "data-testid": "sendbird-message-content__left" },
renderSenderProfile(_tslib.__assign(_tslib.__assign({}, props), { className: 'sendbird-message-content__left__avatar', isByMe: isByMe, displayThreadReplies: displayThreadReplies, bottom: getTotalBottom() })),
showOutgoingMenu && (React__default.default.createElement("div", { className: utils.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 === _const.ThreadReplySelectType.THREAD) {
onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
}
else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((_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.default.createElement("div", _tslib.__assign({ className: utils.classnames('sendbird-message-content__middle'), "data-testid": "sendbird-message-content__middle" }, (isMobile ? _tslib.__assign({}, longPress) : {}), { ref: contentRef }),
(!isByMe && !chainTop && !useReplying) && renderMessageHeader(props),
(useReplying) ? (React__default.default.createElement("div", { className: utils.classnames('sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName), "data-testid": "sendbird-message-content__middle__quote-message" },
React__default.default.createElement(ui_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 === _const.ThreadReplySelectType.THREAD) {
onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({ message: message });
}
if ((replyType === 'QUOTE_REPLY' || (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT))
&& ((_a = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message === null || message === void 0 ? void 0 : message.parentMessageId)) {
scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
}
} }))) : null,
React__default.default.createElement("div", { className: utils.classnames('sendbird-message-content__middle__body-container', index$1.isThumbnailMessage(message) && 'sendbird-message-content__middle__body-container--thumbnail') },
(isByMe && !chainBottom) && (React__default.default.createElement("div", { className: utils.classnames('sendbird-message-content__middle__body-container__created-at', 'left', hoveredMenuClassName) },
React__default.default.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
React__default.default.createElement(ui_MessageStatus.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.default.createElement("div", { className: utils.classnames('sendbird-message-content-reactions', index$1.isMultipleFilesMessage(message) ? 'image-grid'
: (isByMe && !index$1.isThumbnailMessage(message) && !index$1.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.default.createElement(ui_Label.Label, { className: utils.classnames('sendbird-message-content__middle__body-container__created-at', 'right', hoveredMenuClassName), type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$2.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT, {
locale: dateLocale,
})))),
showThreadReplies && (message === null || message === void 0 ? void 0 : message.threadInfo) && (React__default.default.createElement(ui_ThreadReplies.default, { 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.default.createElement("div", { className: utils.classnames('sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName), "data-testid": "sendbird-message-content__right" },
React__default.default.createElement("div", { className: utils.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 === _const.ThreadReplySelectType.THREAD) {
onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
}
else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((_c = (_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt) !== null && _c !== void 0 ? _c : 0, message.parentMessageId);
}
},
deleteMessage: deleteMessage,
})))),
showMenu && index$1.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 === _const.ThreadReplySelectType.THREAD) {
onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
}
else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage(((_b = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
}
},
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*/];
}
_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.default.createElement(ui_MobileFeedbackMenu, { hideMenu: function () {
setShowFeedbackOptionsMenu(false);
}, onEditFeedback: function () {
setShowFeedbackOptionsMenu(false);
setShowFeedbackModal(true);
}, onRemoveFeedback: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
var error_3;
var _a, _b;
return _tslib.__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.default.createElement(ui_MessageFeedbackModal, { selectedFeedback: message.myFeedback.rating, message: message, 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) {
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 _tslib.__awaiter(_this, void 0, void 0, function () {
var error_5;
var _a, _b;
return _tslib.__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.default.createElement(ui_MessageFeedbackFailedModal, { text: feedbackFailedText, onCancel: function () {
setFeedbackFailedText('');
} }))));
}
exports.MessageBody = index.MessageBody;
exports.MessageHeader = index.MessageHeader;
exports.MessageProfile = index.MessageProfile;
exports.MessageContent = MessageContent;
exports.default = MessageContent;
//# sourceMappingURL=MessageContent.js.map