@sendbird/uikit-react 3.9.3 → 3.10.0

package/cjs/ui/MessageContent.js

@@ -1,90 +1,96 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-5MABXNJ2.js');
+var _tslib = require('../chunks/bundle-UHsDbhGB.js');
 var React = require('react');
-var index$2 = require('../chunks/bundle-Guz_a7Pd.js');
-var ui_MessageStatus = require('../chunks/bundle-Zhc5iYOj.js');
+var index$2 = require('../chunks/bundle-LWd8plnK.js');
+var ui_MessageStatus = require('../chunks/bundle-idn81XsS.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
-var ui_Label = require('../chunks/bundle-aLBNZXTm.js');
+var ui_Label = require('../chunks/bundle-wDJ0vmp7.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../chunks/bundle-EE-R19J8.js');
-var LocalizationContext = require('../chunks/bundle-4VdNtJoS.js');
+var index = require('../chunks/bundle-bPLEZuwe.js');
+var LocalizationContext = require('../chunks/bundle-M_JdGFB9.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../chunks/bundle-ymVHfRPV.js');
-var index$3 = require('../chunks/bundle-GqhEUb4r.js');
-var MediaQueryContext = require('../chunks/bundle-cwoX1jzF.js');
+var message = require('@sendbird/chat/message');
+var useLongPress = require('../chunks/bundle-RWm1ToHA.js');
+var index$3 = require('../chunks/bundle-IVfrW5UV.js');
+var MediaQueryContext = require('../chunks/bundle-R55qwYIC.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../chunks/bundle-j9zO3Qdj.js');
-var utils = require('../chunks/bundle-t3HW5lYr.js');
+var _const = require('../chunks/bundle-waeY4XbU.js');
+var utils = require('../chunks/bundle-wTtkySLW.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Avatar = require('../chunks/bundle-yTBDgBVp.js');
+var ui_Avatar = require('../chunks/bundle-OOMB_O1L.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-KfrHCpUu.js');
+var UserProfileContext = require('../chunks/bundle-e6jRRPqy.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
 var ui_FileMessageItemBody = require('./FileMessageItemBody.js');
-var useStatefulFileInfoList = require('../chunks/bundle-AA3e_g5q.js');
+var useStatefulFileInfoList = require('../chunks/bundle-Pa-zxMUU.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
 var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
-var index$1 = require('../chunks/bundle-F4Y7xmf1.js');
-require('../chunks/bundle-L7Qg6fc_.js');
-require('./Icon.js');
+var index$1 = require('../chunks/bundle-X1vsWmGi.js');
+var ui_Icon = require('./Icon.js');
+var ui_FeedbackIconButton = require('./FeedbackIconButton.js');
+var ui_MobileFeedbackMenu = require('./MobileFeedbackMenu.js');
+var Channel_components_MessageFeedbackModal = require('../Channel/components/MessageFeedbackModal.js');
+var ui_Modal = require('../chunks/bundle-7iyslQY5.js');
+var ui_Button = require('./Button.js');
+var useKeyDown = require('../chunks/bundle-WuVcsZSE.js');
+require('../chunks/bundle-lk7syGfV.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-fYGB5Ibr.js');
-require('../chunks/bundle-f9YMFNAC.js');
+require('../chunks/bundle-dD_wqelx.js');
+require('../chunks/bundle-XwSBmqOP.js');
 require('./IconButton.js');
-require('../chunks/bundle-b7L7rtxl.js');
-require('../chunks/bundle-lDnBB9bN.js');
-require('../chunks/bundle-E0v2C4b1.js');
-require('@sendbird/chat/message');
-require('../chunks/bundle-BQTyUmzj.js');
-require('../chunks/bundle-OauzEgdX.js');
+require('../chunks/bundle-wwqhN6T8.js');
+require('../chunks/bundle-rD_EqTu8.js');
+require('../chunks/bundle-tJKWfbHM.js');
+require('../chunks/bundle-OmshX9RP.js');
+require('../chunks/bundle-fKDcA4eI.js');
 require('@sendbird/chat/groupChannel');
-require('../chunks/bundle-bXa0UWvD.js');
+require('../chunks/bundle-Ox6f1Pr4.js');
 require('../Channel/hooks/useInitialMessagesFetch.js');
-require('../chunks/bundle-BWHZlxBD.js');
-require('../chunks/bundle-Z0z4XcoC.js');
-require('../chunks/bundle-ur5aaH73.js');
-require('../chunks/bundle-p-3ceZAU.js');
+require('../chunks/bundle-Q7Qb_8Qy.js');
+require('../chunks/bundle-trkwub16.js');
+require('../chunks/bundle-F9aI-PNs.js');
+require('../chunks/bundle-YTD5gh4h.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-5tXC271i.js');
+require('../chunks/bundle-FJe6Dl-f.js');
 require('../withSendbird.js');
 require('./ImageRenderer.js');
 require('./ReactionButton.js');
 require('./ReactionBadge.js');
 require('./BottomSheet.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-8xsZqXyY.js');
-require('./Button.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
-require('../chunks/bundle-xOGNakZW.js');
+require('../chunks/bundle-EdNscsik.js');
 require('../sendbirdSelectors.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../chunks/bundle-ko9gtVkc.js');
-require('../chunks/bundle-ZodVwNmU.js');
-require('../chunks/bundle-rXVQ4vD5.js');
+require('../chunks/bundle-4F7u20x2.js');
+require('../chunks/bundle-jr9hFzH_.js');
+require('../chunks/bundle-DwxvWTiX.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../chunks/bundle--EcmFAgY.js');
-require('../chunks/bundle-xKfD9-QM.js');
+require('../chunks/bundle-jayPpL4B.js');
+require('../chunks/bundle-s5Lt0vKF.js');
 require('./TextButton.js');
-require('../chunks/bundle-R4oiSD0L.js');
-require('../chunks/bundle-pAGpMj4-.js');
+require('../chunks/bundle-gBGbUm4f.js');
+require('../chunks/bundle-sGVgQ4l8.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../chunks/bundle-_c4Xia0x.js');
+require('../chunks/bundle-1GRgJFEb.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
+require('./Input.js');
+require('@sendbird/uikit-tools');
 
 function MessageProfile(props) {
     var message = props.message, channel = props.channel, userId = props.userId, _a = props.chainBottom, chainBottom = _a === void 0 ? false : _a, isByMe = props.isByMe, displayThreadReplies = props.displayThreadReplies;
@@ -162,37 +168,79 @@ function MessageHeader(props) {
     ));
 }
 
+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 MessageFeedbackFailedModal(props) {
+    var text = props.text, onCancel = props.onCancel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var modalRef = React.useRef(null);
+    var onKeyDown = useKeyDown.useKeyDown(modalRef, {
+        Enter: function () { return onCancel === null || onCancel === void 0 ? void 0 : onCancel(); },
+        Escape: function () { return onCancel === null || onCancel === void 0 ? void 0 : onCancel(); },
+    });
+    return (React.createElement("div", { onKeyDown: onKeyDown },
+        React.createElement(ui_Modal.Modal, { contentClassName: 'sendbird-message-feedback-modal-content__mobile', type: ui_Button.ButtonTypes.PRIMARY, onSubmit: onCancel, onClose: onCancel, submitText: stringSet.BUTTON__OK, renderHeader: function () { return (React.createElement("div", { className: 'sendbird-modal__header' },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1, className: 'sendbird-message-feedback-modal-header' }, text))); }, customFooter: React.createElement("div", { className: 'sendbird-message-feedback-modal-footer__root_failed' },
+                React.createElement(ui_Button.default, { onClick: onCancel },
+                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_3, color: ui_Label.LabelColors.ONCONTENT_1 }, stringSet.BUTTON__OK))) })));
+}
+
 function MessageContent(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    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, _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, onReplyInThread = props.onReplyInThread, onQuoteMessageClick = props.onQuoteMessageClick, onMessageHeightChange = props.onMessageHeightChange, 
+    className = props.className, userId = props.userId, channel = props.channel, message$1 = 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, 
     // Public props for customization
-    _s = props.renderSenderProfile, 
+    _v = props.renderSenderProfile, 
     // Public props for customization
-    renderSenderProfile = _s === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _s, _t = props.renderMessageBody, renderMessageBody = _t === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _t, _u = props.renderMessageHeader, renderMessageHeader = _u === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _u, _v = props.renderMessageMenu, renderMessageMenu = _v === void 0 ? function (props) { return (React.createElement(ui_MessageItemMenu.MessageMenu, _tslib.__assign({}, props))); } : _v, _w = props.renderEmojiMenu, renderEmojiMenu = _w === void 0 ? function (props) { return (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props))); } : _w, _x = props.renderEmojiReactions, renderEmojiReactions = _x === void 0 ? function (props) { return (React.createElement(ui_EmojiReactions, _tslib.__assign({}, props))); } : _x;
+    renderSenderProfile = _v === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _v, _w = props.renderMessageBody, renderMessageBody = _w === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _w, _x = props.renderMessageHeader, renderMessageHeader = _x === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _x, _y = props.renderMessageMenu, renderMessageMenu = _y === void 0 ? function (props) { return (React.createElement(ui_MessageItemMenu.MessageMenu, _tslib.__assign({}, props))); } : _y, _z = props.renderEmojiMenu, renderEmojiMenu = _z === void 0 ? function (props) { return (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props))); } : _z, _0 = props.renderEmojiReactions, renderEmojiReactions = _0 === void 0 ? function (props) { return (React.createElement(ui_EmojiReactions, _tslib.__assign({}, props))); } : _0;
     var dateLocale = LocalizationContext.useLocalization().dateLocale;
-    var _y = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _y.config, eventHandlers = _y.eventHandlers;
+    var _1 = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _1.config, eventHandlers = _1.eventHandlers;
     var onPressUserProfileHandler = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _a === void 0 ? void 0 : _a.onPressUserProfile;
     var contentRef = React.useRef(null);
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-    var _z = React.useState(false), showMenu = _z[0], setShowMenu = _z[1];
-    var _0 = React.useState(false), mouseHover = _0[0], setMouseHover = _0[1];
-    var _1 = React.useState(false), supposedHover = _1[0], setSupposedHover = _1[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 _2 = React.useState(false), showMenu = _2[0], setShowMenu = _2[1];
+    var _3 = React.useState(false), mouseHover = _3[0], setMouseHover = _3[1];
+    var _4 = React.useState(false), supposedHover = _4[0], setSupposedHover = _4[1];
+    // Feedback states
+    var _5 = React.useState(null), selectedFeedback = _5[0], setSelectedFeedback = _5[1];
+    var _6 = React.useState(false), showFeedbackOptionsMenu = _6[0], setShowFeedbackOptionsMenu = _6[1];
+    var _7 = React.useState(false), showFeedbackModal = _7[0], setShowFeedbackModal = _7[1];
+    var _8 = React.useState(''), feedbackFailedText = _8[0], setFeedbackFailedText = _8[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var isByMe = (userId === ((_b = message$1 === null || message$1 === void 0 ? void 0 : message$1.sender) === null || _b === void 0 ? void 0 : _b.userId))
+        || ((message$1 === null || message$1 === void 0 ? void 0 : message$1.sendingStatus) === 'pending')
+        || ((message$1 === null || message$1 === void 0 ? void 0 : message$1.sendingStatus) === 'failed');
     var isByMeClassName = isByMe ? 'outgoing' : 'incoming';
     var chainTopClassName = chainTop ? 'chain-top' : '';
     var isReactionEnabledInChannel = isReactionEnabled && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral);
     var isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
     var supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
     var useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD')
-        && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage)
+        && (message$1 === null || message$1 === void 0 ? void 0 : message$1.parentMessageId) && (message$1 === null || message$1 === void 0 ? void 0 : message$1.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) > 0 && replyType === 'THREAD';
+    var displayThreadReplies = ((_c = message$1 === null || message$1 === void 0 ? void 0 : message$1.threadInfo) === null || _c === void 0 ? void 0 : _c.replyCount) > 0 && replyType === 'THREAD';
+    // Feedback buttons
+    var isFeedbackMessage = !isByMe
+        && (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedbackStatus)
+        && message$1.myFeedbackStatus !== SbFeedbackStatus.NOT_APPLICABLE;
+    var isFeedbackEnabled = ((_d = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _d === void 0 ? void 0 : _d.enableFeedback) && isFeedbackMessage;
+    var feedbackMessageClassName = isFeedbackEnabled ? 'sendbird-message-content__feedback' : '';
+    var onCloseFeedbackForm = function () {
+        setSelectedFeedback(null);
+        setShowFeedbackModal(false);
+    };
     // onMouseDown: (e: React.MouseEvent<T>) => void;
     // onTouchStart: (e: React.TouchEvent<T>) => void;
     // onMouseUp: (e: React.MouseEvent<T>) => void;
@@ -209,16 +257,16 @@ function MessageContent(props) {
         delay: 300,
         shouldPreventDefault: false,
     });
-    if (((_d = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _d === void 0 ? void 0 : _d.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
-        return (React.createElement(ui_AdminMessage, { message: message }));
+    if (((_e = message$1 === null || message$1 === void 0 ? void 0 : message$1.isAdminMessage) === null || _e === void 0 ? void 0 : _e.call(message$1)) || (message$1 === null || message$1 === void 0 ? void 0 : message$1.messageType) === 'admin') {
+        return (React.createElement(ui_AdminMessage, { message: message$1 }));
     }
-    return (React.createElement("div", { className: index.getClassName([className, 'sendbird-message-content', isByMeClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
+    return (React.createElement("div", { className: index.getClassName([className, 'sendbird-message-content', isByMeClassName, feedbackMessageClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
         React.createElement("div", { className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
             renderSenderProfile(_tslib.__assign(_tslib.__assign({}, props), { isByMe: isByMe, displayThreadReplies: displayThreadReplies })),
             isByMe && !isMobile && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
                 renderMessageMenu({
                     channel: channel,
-                    message: message,
+                    message: message$1,
                     isByMe: isByMe,
                     replyType: replyType,
                     disabled: disabled,
@@ -239,7 +287,7 @@ function MessageContent(props) {
                     },
                 }),
                 isReactionEnabledInChannel && (renderEmojiMenu({
-                    message: message,
+                    message: message$1,
                     userId: userId,
                     emojiContainer: emojiContainer,
                     toggleReaction: toggleReaction,
@@ -248,22 +296,22 @@ function MessageContent(props) {
         React.createElement("div", _tslib.__assign({ className: 'sendbird-message-content__middle' }, (isMobile ? _tslib.__assign({}, longPress) : {}), { ref: contentRef }),
             !isByMe && !chainTop && !useReplying && renderMessageHeader(props),
             (useReplying) ? (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName]) },
-                React.createElement(ui_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 () {
+                React.createElement(ui_QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message$1, userId: userId, isByMe: isByMe, isUnavailable: ((_f = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _f !== void 0 ? _f : 0) > ((_h = (_g = message$1.parentMessage) === null || _g === void 0 ? void 0 : _g.createdAt) !== null && _h !== void 0 ? _h : 0), onClick: function () {
                         var _a;
                         if (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
-                            onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({ message: message });
+                            onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({ message: message$1 });
                         }
                         if ((replyType === 'QUOTE_REPLY' || (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT))
-                            && ((_a = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message === null || message === void 0 ? void 0 : message.parentMessageId)) {
-                            scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+                            && ((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message$1 === null || message$1 === void 0 ? void 0 : message$1.parentMessageId)) {
+                            scrollToMessage(message$1.parentMessage.createdAt, message$1.parentMessageId);
                         }
                     } }))) : null,
             React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container']) },
                 (isByMe && !chainBottom) && (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
                     React.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
-                        React.createElement(ui_MessageStatus.MessageStatus, { message: message, channel: channel })))),
+                        React.createElement(ui_MessageStatus.MessageStatus, { message: message$1, channel: channel })))),
                 renderMessageBody({
-                    message: message,
+                    message: message$1,
                     channel: channel,
                     showFileViewer: showFileViewer,
                     onMessageHeightChange: onMessageHeightChange,
@@ -273,16 +321,16 @@ function MessageContent(props) {
                     isReactionEnabledInChannel: isReactionEnabledInChannel,
                     isByMe: isByMe,
                 }),
-                (isReactionEnabledInChannel && ((_h = message === null || message === void 0 ? void 0 : message.reactions) === null || _h === void 0 ? void 0 : _h.length) > 0) && (React.createElement("div", { className: index.getClassName([
+                (isReactionEnabledInChannel && ((_j = message$1 === null || message$1 === void 0 ? void 0 : message$1.reactions) === null || _j === void 0 ? void 0 : _j.length) > 0) && (React.createElement("div", { className: index.getClassName([
                         'sendbird-message-content-reactions',
-                        index.isMultipleFilesMessage(message)
+                        index.isMultipleFilesMessage(message$1)
                             ? 'image-grid'
-                            : (!isByMe || index.isThumbnailMessage(message) || index.isOGMessage(message))
+                            : (!isByMe || index.isThumbnailMessage(message$1) || index.isOGMessage(message$1))
                                 ? '' : 'primary',
                         mouseHover ? 'mouse-hover' : '',
                     ]) }, renderEmojiReactions({
                     userId: userId,
-                    message: message,
+                    message: message$1,
                     channel: channel,
                     isByMe: isByMe,
                     emojiContainer: emojiContainer,
@@ -290,14 +338,42 @@ function MessageContent(props) {
                     toggleReaction: toggleReaction,
                     onPressUserProfile: onPressUserProfileHandler,
                 }))),
-                (!isByMe && !chainBottom) && (React.createElement(ui_Label.Label, { className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]), type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$2.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+                isFeedbackEnabled && React.createElement("div", { className: index.getClassName([
+                        'sendbird-message-content__middle__body-container__feedback-buttons-container',
+                        displayThreadReplies
+                            ? 'sendbird-message-content__middle__body-container__feedback-buttons-container_with-thread-replies'
+                            : '',
+                    ]) },
+                    React.createElement(ui_FeedbackIconButton, { isSelected: ((_k = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _k === void 0 ? void 0 : _k.rating) === message.FeedbackRating.GOOD, onClick: function () {
+                            var _a;
+                            setSelectedFeedback(message.FeedbackRating.GOOD);
+                            if (isMobile && ((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _a === void 0 ? void 0 : _a.rating) === message.FeedbackRating.GOOD) {
+                                setShowFeedbackOptionsMenu(true);
+                            }
+                            else {
+                                setShowFeedbackModal(true);
+                            }
+                        }, disabled: (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) && message$1.myFeedback.rating !== message.FeedbackRating.GOOD },
+                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FEEDBACK_LIKE, width: '24px', height: '24px' })),
+                    React.createElement(ui_FeedbackIconButton, { isSelected: ((_l = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _l === void 0 ? void 0 : _l.rating) === message.FeedbackRating.BAD, onClick: function () {
+                            var _a;
+                            setSelectedFeedback(message.FeedbackRating.BAD);
+                            if (isMobile && ((_a = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _a === void 0 ? void 0 : _a.rating) === message.FeedbackRating.BAD) {
+                                setShowFeedbackOptionsMenu(true);
+                            }
+                            else {
+                                setShowFeedbackModal(true);
+                            }
+                        }, disabled: (message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) && message$1.myFeedback.rating !== message.FeedbackRating.BAD },
+                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FEEDBACK_DISLIKE, width: '24px', height: '24px' }))),
+                (!isByMe && !chainBottom) && (React.createElement(ui_Label.Label, { className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]), type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$2.format((message$1 === null || message$1 === void 0 ? void 0 : message$1.createdAt) || 0, 'p', {
                     locale: dateLocale,
                 })))),
-            displayThreadReplies && (React.createElement(ui_ThreadReplies, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message }); } }))),
+            displayThreadReplies && (React.createElement(ui_ThreadReplies, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message$1 === null || message$1 === void 0 ? void 0 : message$1.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message$1 }); } }))),
         React.createElement("div", { className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName]) }, !isByMe && !isMobile && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
             isReactionEnabledInChannel && (renderEmojiMenu({
                 className: 'sendbird-message-content-menu__reaction-menu',
-                message: message,
+                message: message$1,
                 userId: userId,
                 emojiContainer: emojiContainer,
                 toggleReaction: toggleReaction,
@@ -306,7 +382,7 @@ function MessageContent(props) {
             renderMessageMenu({
                 className: 'sendbird-message-content-menu__normal-menu',
                 channel: channel,
-                message: message,
+                message: message$1,
                 isByMe: isByMe,
                 replyType: replyType,
                 disabled: disabled,
@@ -325,7 +401,7 @@ function MessageContent(props) {
                     }
                 },
             })))),
-        showMenu && (((_j = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _j === void 0 ? void 0 : _j.call(message)) || ((_k = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _k === void 0 ? void 0 : _k.call(message)) || ((_l = message === null || message === void 0 ? void 0 : message.isMultipleFilesMessage) === null || _l === void 0 ? void 0 : _l.call(message))) && (React.createElement(index$3.MobileMenu, { parentRef: contentRef, channel: channel, hideMenu: function () { setShowMenu(false); }, message: message, isReactionEnabled: isReactionEnabledInChannel, isByMe: isByMe, userId: userId, replyType: replyType, disabled: disabled, showRemove: showRemove, emojiContainer: emojiContainer, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, toggleReaction: toggleReaction, showEdit: showEdit, onReplyInThread: function (_a) {
+        showMenu && (((_m = message$1 === null || message$1 === void 0 ? void 0 : message$1.isUserMessage) === null || _m === void 0 ? void 0 : _m.call(message$1)) || ((_o = message$1 === null || message$1 === void 0 ? void 0 : message$1.isFileMessage) === null || _o === void 0 ? void 0 : _o.call(message$1)) || ((_p = message$1 === null || message$1 === void 0 ? void 0 : message$1.isMultipleFilesMessage) === null || _p === void 0 ? void 0 : _p.call(message$1))) && (React.createElement(index$3.MobileMenu, { parentRef: contentRef, channel: channel, hideMenu: function () { setShowMenu(false); }, message: message$1, isReactionEnabled: isReactionEnabledInChannel, isByMe: isByMe, userId: userId, replyType: replyType, disabled: disabled, showRemove: showRemove, emojiContainer: emojiContainer, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, toggleReaction: toggleReaction, showEdit: showEdit, onReplyInThread: function (_a) {
                 var _b;
                 var message = _a.message;
                 if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
@@ -334,6 +410,100 @@ function MessageContent(props) {
                 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);
                 }
+            } })),
+        showFeedbackOptionsMenu && (React.createElement(ui_MobileFeedbackMenu, { hideMenu: function () {
+                setShowFeedbackOptionsMenu(false);
+            }, onEditFeedback: function () {
+                setShowFeedbackOptionsMenu(false);
+                setShowFeedbackModal(true);
+            }, onRemoveFeedback: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                return _tslib.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, message$1.deleteFeedback(message$1.myFeedback.id)];
+                        case 1:
+                            _a.sent();
+                            setSelectedFeedback(null);
+                            setShowFeedbackOptionsMenu(false);
+                            return [2 /*return*/];
+                    }
+                });
+            }); } })),
+        showFeedbackModal && (React.createElement(Channel_components_MessageFeedbackModal, { selectedFeedback: selectedFeedback, message: message$1, onSubmit: function (comment) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                var error_1;
+                var _a, _b;
+                return _tslib.__generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _c.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, message$1.submitFeedback({
+                                    rating: selectedFeedback,
+                                    comment: comment,
+                                })];
+                        case 1:
+                            _c.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_1 = _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: Submit feedback failed.', error_1);
+                            setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+                            return [3 /*break*/, 3];
+                        case 3:
+                            onCloseFeedbackForm();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, onUpdate: function (comment) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                var newFeedback, error_2;
+                var _a, _b;
+                return _tslib.__generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            newFeedback = new message.Feedback({
+                                id: message$1.myFeedback.id,
+                                rating: selectedFeedback,
+                                comment: comment,
+                            });
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, message$1.updateFeedback(newFeedback)];
+                        case 2:
+                            _c.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_2 = _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_2);
+                            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_3;
+                var _a, _b;
+                return _tslib.__generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _c.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, message$1.deleteFeedback(message$1.myFeedback.id)];
+                        case 1:
+                            _c.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            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*/, 3];
+                        case 3:
+                            onCloseFeedbackForm();
+                            return [2 /*return*/];
+                    }
+                });
+            }); } })),
+        feedbackFailedText && (React.createElement(MessageFeedbackFailedModal, { text: feedbackFailedText, onCancel: function () {
+                setFeedbackFailedText('');
             } }))));
 }
 

package/cjs/ui/MessageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageContent.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageContent.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/ui/MessageInput/hooks/usePaste.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('dompurify');
-var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-XyN4tk9V.js');
-require('../../../chunks/bundle-5MABXNJ2.js');
-require('../../../chunks/bundle-wKifHXnJ.js');
-require('../../../chunks/bundle-xKfD9-QM.js');
-require('../../../chunks/bundle--EcmFAgY.js');
+var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-XIMyjFuW.js');
+require('../../../chunks/bundle-UHsDbhGB.js');
+require('../../../chunks/bundle-85IKKe_e.js');
+require('../../../chunks/bundle-s5Lt0vKF.js');
+require('../../../chunks/bundle-jayPpL4B.js');
 
 
 

package/cjs/ui/MessageInput.js

@@ -1,26 +1,26 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-5MABXNJ2.js');
+var _tslib = require('../chunks/bundle-UHsDbhGB.js');
 var React = require('react');
-var _const$1 = require('../chunks/bundle-yDmAxC7s.js');
-var _const = require('../chunks/bundle-j9zO3Qdj.js');
+var _const$1 = require('../chunks/bundle-EKK1TWOg.js');
+var _const = require('../chunks/bundle-waeY4XbU.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
-var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-XyN4tk9V.js');
+var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-XIMyjFuW.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-aLBNZXTm.js');
-var LocalizationContext = require('../chunks/bundle-4VdNtJoS.js');
+var ui_Label = require('../chunks/bundle-wDJ0vmp7.js');
+var LocalizationContext = require('../chunks/bundle-M_JdGFB9.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var index$1 = require('../chunks/bundle-EE-R19J8.js');
-var tokenize = require('../chunks/bundle-rXVQ4vD5.js');
-var index = require('../chunks/bundle-F4Y7xmf1.js');
-var utils = require('../chunks/bundle-t3HW5lYr.js');
+var index$1 = require('../chunks/bundle-bPLEZuwe.js');
+var tokenize = require('../chunks/bundle-DwxvWTiX.js');
+var index = require('../chunks/bundle-X1vsWmGi.js');
+var utils = require('../chunks/bundle-wTtkySLW.js');
 require('dompurify');
-require('../chunks/bundle-wKifHXnJ.js');
-require('../chunks/bundle-xKfD9-QM.js');
-require('../chunks/bundle--EcmFAgY.js');
-require('../chunks/bundle-5tXC271i.js');
-require('../chunks/bundle-L7Qg6fc_.js');
+require('../chunks/bundle-85IKKe_e.js');
+require('../chunks/bundle-s5Lt0vKF.js');
+require('../chunks/bundle-jayPpL4B.js');
+require('../chunks/bundle-FJe6Dl-f.js');
+require('../chunks/bundle-lk7syGfV.js');
 require('../withSendbird.js');
 require('../utils/message/getOutgoingMessageState.js');
 

package/cjs/ui/MessageItemMenu.js

@@ -6,35 +6,35 @@ var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var index = require('../chunks/bundle-EE-R19J8.js');
-var LocalizationContext = require('../chunks/bundle-4VdNtJoS.js');
-var types = require('../chunks/bundle-b7L7rtxl.js');
-var Channel_context = require('../chunks/bundle-lDnBB9bN.js');
-require('../chunks/bundle-5MABXNJ2.js');
+var index = require('../chunks/bundle-bPLEZuwe.js');
+var LocalizationContext = require('../chunks/bundle-M_JdGFB9.js');
+var types = require('../chunks/bundle-wwqhN6T8.js');
+var Channel_context = require('../chunks/bundle-rD_EqTu8.js');
+require('../chunks/bundle-UHsDbhGB.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-bXa0UWvD.js');
-require('../chunks/bundle-aLBNZXTm.js');
-require('../chunks/bundle-5tXC271i.js');
-require('../chunks/bundle-t3HW5lYr.js');
+require('../chunks/bundle-Ox6f1Pr4.js');
+require('../chunks/bundle-wDJ0vmp7.js');
+require('../chunks/bundle-FJe6Dl-f.js');
+require('../chunks/bundle-wTtkySLW.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-F4Y7xmf1.js');
-require('../chunks/bundle-L7Qg6fc_.js');
-require('../chunks/bundle-KfrHCpUu.js');
+require('../chunks/bundle-X1vsWmGi.js');
+require('../chunks/bundle-lk7syGfV.js');
+require('../chunks/bundle-e6jRRPqy.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-require('../chunks/bundle-j9zO3Qdj.js');
-require('../chunks/bundle-E0v2C4b1.js');
-require('../chunks/bundle-Guz_a7Pd.js');
+require('../chunks/bundle-waeY4XbU.js');
+require('../chunks/bundle-tJKWfbHM.js');
+require('../chunks/bundle-LWd8plnK.js');
 require('@sendbird/chat/message');
-require('../chunks/bundle-BQTyUmzj.js');
-require('../chunks/bundle-OauzEgdX.js');
+require('../chunks/bundle-OmshX9RP.js');
+require('../chunks/bundle-fKDcA4eI.js');
 require('@sendbird/chat/groupChannel');
 require('../Channel/hooks/useInitialMessagesFetch.js');
-require('../chunks/bundle-BWHZlxBD.js');
-require('../chunks/bundle-Z0z4XcoC.js');
-require('../chunks/bundle-ur5aaH73.js');
-require('../chunks/bundle-p-3ceZAU.js');
+require('../chunks/bundle-Q7Qb_8Qy.js');
+require('../chunks/bundle-trkwub16.js');
+require('../chunks/bundle-F9aI-PNs.js');
+require('../chunks/bundle-YTD5gh4h.js');
 
 function MessageMenu(_a) {
     var _b;