@sendbird/uikit-react 3.9.3-rc.0 → 3.10.0

package/ui/IconButton.js

@@ -1,4 +1,4 @@
-import { a as __spreadArray, _ as __assign } from '../chunks/bundle-vwWaTJzg.js';
+import { a as __spreadArray, _ as __assign } from '../chunks/bundle-Dv_OpODB.js';
 import React__default, { useState } from 'react';
 
 var IconButton = React__default.forwardRef(function (props, ref) {

package/ui/ImageRenderer.js

@@ -1,4 +1,4 @@
-import { a as __spreadArray, _ as __assign } from '../chunks/bundle-vwWaTJzg.js';
+import { a as __spreadArray, _ as __assign } from '../chunks/bundle-Dv_OpODB.js';
 import React__default, { useMemo, useState, useEffect, useRef } from 'react';
 
 var numberToPx = (function (value) {

package/ui/Input.js

@@ -1,19 +1,19 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-udE7DsNo.js';
-import '../chunks/bundle-vwWaTJzg.js';
-import '../chunks/bundle-yeq5dlz7.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-cYhstyoi.js';
+import '../chunks/bundle-Dv_OpODB.js';
+import '../chunks/bundle-P_LfQm7L.js';
 
 var InputLabel = function (_a) {
     var children = _a.children;
     return (React__default.createElement(Label, { className: "sendbird-input-label", type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_1 }, children));
 };
 var Input = React__default.forwardRef(function (props, ref) {
-    var name = props.name, required = props.required, disabled = props.disabled, value = props.value, placeHolder = props.placeHolder;
-    var _a = useState(value), inputValue = _a[0], setInputValue = _a[1];
+    var name = props.name, required = props.required, disabled = props.disabled, value = props.value, placeHolder = props.placeHolder, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a;
+    var _b = useState(value), inputValue = _b[0], setInputValue = _b[1];
     return (React__default.createElement("div", { className: "sendbird-input" },
         React__default.createElement("input", { className: "sendbird-input__input", ref: ref, name: name, required: required, disabled: disabled, value: inputValue, onChange: function (e) {
                 setInputValue(e.target.value);
-            } }),
+            }, autoFocus: autoFocus }),
         (placeHolder && !inputValue) && (React__default.createElement(Label, { className: "sendbird-input__placeholder", type: LabelTypography.BODY_1, color: LabelColors.ONBACKGROUND_3 }, placeHolder))));
 });
 

package/ui/Label.js

@@ -1,5 +1,5 @@
-import '../chunks/bundle-vwWaTJzg.js';
+import '../chunks/bundle-Dv_OpODB.js';
 import 'react';
-export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-udE7DsNo.js';
-import '../chunks/bundle-yeq5dlz7.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-cYhstyoi.js';
+import '../chunks/bundle-P_LfQm7L.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,7 +1,7 @@
-import { a as __spreadArray } from '../chunks/bundle-vwWaTJzg.js';
+import { a as __spreadArray } from '../chunks/bundle-Dv_OpODB.js';
 import React__default from 'react';
-import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-udE7DsNo.js';
-import '../chunks/bundle-yeq5dlz7.js';
+import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-cYhstyoi.js';
+import '../chunks/bundle-P_LfQm7L.js';
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {

package/ui/Loader.js

@@ -1,7 +1,7 @@
-import { a as __spreadArray } from '../chunks/bundle-vwWaTJzg.js';
+import { a as __spreadArray } from '../chunks/bundle-Dv_OpODB.js';
 import React__default from 'react';
 import Icon, { IconTypes } from './Icon.js';
-import '../chunks/bundle-wwLAI-Tt.js';
+import '../chunks/bundle-kHH52OEM.js';
 
 function Loader(_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.width, width = _c === void 0 ? '26px' : _c, _d = _a.height, height = _d === void 0 ? '26px' : _d, children = _a.children;

package/ui/MentionLabel.js

@@ -1,25 +1,25 @@
 import React__default, { useRef, useState, useCallback } from 'react';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-udE7DsNo.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-cYhstyoi.js';
 import UserProfile from './UserProfile.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import '../chunks/bundle-vwWaTJzg.js';
+import '../chunks/bundle-Dv_OpODB.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-P1wmnvy9.js';
-import '../chunks/bundle--yRzbc9U.js';
+import '../chunks/bundle-mccz6DbW.js';
+import '../chunks/bundle-aD4V4aI8.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-bDWAVmob.js';
-import '../chunks/bundle-yeq5dlz7.js';
-import '../chunks/bundle-gKkAyMAQ.js';
-import '../chunks/bundle-1DDGx2zI.js';
-import '../chunks/bundle-uHZAUI7c.js';
+import '../chunks/bundle-rQ1k1Cpu.js';
+import '../chunks/bundle-P_LfQm7L.js';
+import '../chunks/bundle-AilPIINY.js';
+import '../chunks/bundle-26VX7FQg.js';
+import '../chunks/bundle-8XAFqDsw.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-gpPQ_Did.js';
-import '../chunks/bundle-wwLAI-Tt.js';
-import '../chunks/bundle-4IJH7QEY.js';
+import '../chunks/bundle-tD8xAWw2.js';
+import '../chunks/bundle-kHH52OEM.js';
+import '../chunks/bundle-HVtbYmj3.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-TsienPu3.js';
+import '../chunks/bundle-s5uFV3hh.js';
 import './Icon.js';
 import './Button.js';
 import '../withSendbird.js';

package/ui/MentionUserLabel.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { M as MENTION_USER_LABEL_CLASSNAME } from '../chunks/bundle-mcex4MSM.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../chunks/bundle-imm3o8vY.js';
 
 function MentionUserLabel(_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.isReverse, isReverse = _c === void 0 ? false : _c, color = _a.color, userId = _a.userId;

package/ui/MessageContent.js

@@ -1,88 +1,94 @@
-import { _ as __assign } from '../chunks/bundle-vwWaTJzg.js';
+import { _ as __assign, b as __awaiter, c as __generator } from '../chunks/bundle-Dv_OpODB.js';
 import React__default, { useRef, useContext, useState } from 'react';
-import { f as format } from '../chunks/bundle-brC7Asxc.js';
-import { M as MessageStatus } from '../chunks/bundle-qVHH4JST.js';
+import { f as format } from '../chunks/bundle-gzQGUVJt.js';
+import { M as MessageStatus } from '../chunks/bundle-fDGhJhA3.js';
 import { MessageMenu } from './MessageItemMenu.js';
 import { MessageEmojiMenu } from './MessageItemReactionMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-udE7DsNo.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-cYhstyoi.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import QuoteMessage from './QuoteMessage.js';
-import { N as isSendableMessage, w as getUIKitMessageTypes, I as isOGMessage, J as isTextMessage, t as getUIKitMessageType, b as isMultipleFilesMessage, i as isVoiceMessage, r as isThumbnailMessage, h as getSenderName, n as getClassName } from '../chunks/bundle--yRzbc9U.js';
-import { u as useLocalization } from '../chunks/bundle-gKkAyMAQ.js';
+import { R as isSendableMessage, w as getUIKitMessageTypes, I as isOGMessage, J as isTextMessage, t as getUIKitMessageType, b as isMultipleFilesMessage, i as isVoiceMessage, r as isThumbnailMessage, h as getSenderName, n as getClassName } from '../chunks/bundle-aD4V4aI8.js';
+import { L as LocalizationContext, u as useLocalization } from '../chunks/bundle-AilPIINY.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { u as useLongPress } from '../chunks/bundle-0fMsVhUd.js';
-import { M as MobileMenu } from '../chunks/bundle-Lh-vR1CZ.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-lsEXnFwe.js';
+import { FeedbackRating, Feedback } from '@sendbird/chat/message';
+import { u as useLongPress } from '../chunks/bundle-tLQ87Jwz.js';
+import { M as MobileMenu } from '../chunks/bundle-wNtXTu0c.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-Uw736N77.js';
 import ThreadReplies from './ThreadReplies.js';
-import { T as ThreadReplySelectType } from '../chunks/bundle-ui21vRGg.js';
-import { n as noop } from '../chunks/bundle-wwLAI-Tt.js';
+import { T as ThreadReplySelectType } from '../chunks/bundle-zx8iuoIh.js';
+import { n as noop } from '../chunks/bundle-kHH52OEM.js';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { A as Avatar } from '../chunks/bundle-4IJH7QEY.js';
+import { A as Avatar } from '../chunks/bundle-HVtbYmj3.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../chunks/bundle-uHZAUI7c.js';
+import { a as UserProfileContext } from '../chunks/bundle-8XAFqDsw.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
 import FileMessageItemBody from './FileMessageItemBody.js';
-import { u as useThreadMessageKindKeySelector, a as useStatefulFileInfoList, M as MultipleFilesMessageItemBody } from '../chunks/bundle-l4t9ThVv.js';
+import { u as useThreadMessageKindKeySelector, a as useStatefulFileInfoList, M as MultipleFilesMessageItemBody } from '../chunks/bundle-4uNbb5ZI.js';
 import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
 import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
-import { K } from '../chunks/bundle-bDWAVmob.js';
-import '../chunks/bundle-1DDGx2zI.js';
-import './Icon.js';
+import { K } from '../chunks/bundle-rQ1k1Cpu.js';
+import Icon, { IconTypes } from './Icon.js';
+import FeedbackIconButton from './FeedbackIconButton.js';
+import MobileFeedbackMenu from './MobileFeedbackMenu.js';
+import MessageFeedbackModal from '../Channel/components/MessageFeedbackModal.js';
+import { M as Modal } from '../chunks/bundle-4vHal8Yn.js';
+import Button, { ButtonTypes } from './Button.js';
+import { u as useKeyDown } from '../chunks/bundle-YWlIaifS.js';
+import '../chunks/bundle-26VX7FQg.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-H-0BE_Ym.js';
-import '../chunks/bundle-fnSnz19k.js';
+import '../chunks/bundle-cN2gAFB_.js';
+import '../chunks/bundle-6LRbbWyh.js';
 import './IconButton.js';
-import '../chunks/bundle-OrHk5n_A.js';
-import '../chunks/bundle-nrm7--0q.js';
-import '../chunks/bundle-T-S631y-.js';
-import '@sendbird/chat/message';
-import '../chunks/bundle-st6t2DcW.js';
-import '../chunks/bundle-KMF_Auff.js';
+import '../chunks/bundle-M-Qfv2tU.js';
+import '../chunks/bundle-QSb_mwts.js';
+import '../chunks/bundle-KpJtSqe-.js';
+import '../chunks/bundle-ej1sc1yZ.js';
+import '../chunks/bundle-1pnUZsGs.js';
 import '@sendbird/chat/groupChannel';
-import '../chunks/bundle-P1wmnvy9.js';
+import '../chunks/bundle-mccz6DbW.js';
 import '../Channel/hooks/useInitialMessagesFetch.js';
-import '../chunks/bundle-gpPQ_Did.js';
-import '../chunks/bundle-78pBi79a.js';
-import '../chunks/bundle-JhkOoTkQ.js';
-import '../chunks/bundle-u3j2nR-h.js';
+import '../chunks/bundle-tD8xAWw2.js';
+import '../chunks/bundle-QjcHKpDK.js';
+import '../chunks/bundle-QGpFq71p.js';
+import '../chunks/bundle-Abz9zH51.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-yeq5dlz7.js';
+import '../chunks/bundle-P_LfQm7L.js';
 import '../withSendbird.js';
 import './ImageRenderer.js';
 import './ReactionButton.js';
 import './ReactionBadge.js';
 import './BottomSheet.js';
 import '../hooks/useModal.js';
-import '../chunks/bundle-dNxyH8Er.js';
-import './Button.js';
 import './UserListItem.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
-import '../chunks/bundle-TsienPu3.js';
+import '../chunks/bundle-s5uFV3hh.js';
 import '../sendbirdSelectors.js';
 import './Tooltip.js';
 import './TooltipWrapper.js';
 import '../Message/context.js';
-import '../chunks/bundle-0ALwnHNc.js';
-import '../chunks/bundle-czxH9r2i.js';
-import '../chunks/bundle-zqu04qTx.js';
+import '../chunks/bundle-5iL1VCKs.js';
+import '../chunks/bundle-YD2b0cnK.js';
+import '../chunks/bundle-ZExhHi47.js';
 import './MentionLabel.js';
 import './LinkLabel.js';
-import '../chunks/bundle-zNT2XhnG.js';
-import '../chunks/bundle-uI7_T-M6.js';
+import '../chunks/bundle-hpM7HwDV.js';
+import '../chunks/bundle-X2Sm7pn5.js';
 import './TextButton.js';
-import '../chunks/bundle-58DQiUD5.js';
-import '../chunks/bundle-7pl3B4SW.js';
+import '../chunks/bundle-y_DSrC-A.js';
+import '../chunks/bundle-hNJ4PtSG.js';
 import './ProgressBar.js';
 import '../VoicePlayer/useVoicePlayer.js';
-import '../chunks/bundle-IKv9Z9_Y.js';
+import '../chunks/bundle-8XsN_e3a.js';
 import '../VoiceRecorder/context.js';
 import './PlaybackTime.js';
+import './Input.js';
+import '@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;
@@ -160,23 +166,55 @@ 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 = useContext(LocalizationContext).stringSet;
+    var modalRef = useRef(null);
+    var onKeyDown = 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__default.createElement("div", { onKeyDown: onKeyDown },
+        React__default.createElement(Modal, { contentClassName: 'sendbird-message-feedback-modal-content__mobile', type: ButtonTypes.PRIMARY, onSubmit: onCancel, onClose: onCancel, submitText: stringSet.BUTTON__OK, renderHeader: function () { return (React__default.createElement("div", { className: 'sendbird-modal__header' },
+                React__default.createElement(Label, { type: LabelTypography.H_1, color: LabelColors.ONBACKGROUND_1, className: 'sendbird-message-feedback-modal-header' }, text))); }, customFooter: React__default.createElement("div", { className: 'sendbird-message-feedback-modal-footer__root_failed' },
+                React__default.createElement(Button, { onClick: onCancel },
+                    React__default.createElement(Label, { type: LabelTypography.BUTTON_3, color: 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 = 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__default.createElement(MessageProfile, __assign({}, props))); } : _s, _t = props.renderMessageBody, renderMessageBody = _t === void 0 ? function (props) { return (React__default.createElement(MessageBody, __assign({}, props))); } : _t, _u = props.renderMessageHeader, renderMessageHeader = _u === void 0 ? function (props) { return (React__default.createElement(MessageHeader, __assign({}, props))); } : _u, _v = props.renderMessageMenu, renderMessageMenu = _v === void 0 ? function (props) { return (React__default.createElement(MessageMenu, __assign({}, props))); } : _v, _w = props.renderEmojiMenu, renderEmojiMenu = _w === void 0 ? function (props) { return (React__default.createElement(MessageEmojiMenu, __assign({}, props))); } : _w, _x = props.renderEmojiReactions, renderEmojiReactions = _x === void 0 ? function (props) { return (React__default.createElement(EmojiReactions, __assign({}, props))); } : _x;
+    renderSenderProfile = _v === void 0 ? function (props) { return (React__default.createElement(MessageProfile, __assign({}, props))); } : _v, _w = props.renderMessageBody, renderMessageBody = _w === void 0 ? function (props) { return (React__default.createElement(MessageBody, __assign({}, props))); } : _w, _x = props.renderMessageHeader, renderMessageHeader = _x === void 0 ? function (props) { return (React__default.createElement(MessageHeader, __assign({}, props))); } : _x, _y = props.renderMessageMenu, renderMessageMenu = _y === void 0 ? function (props) { return (React__default.createElement(MessageMenu, __assign({}, props))); } : _y, _z = props.renderEmojiMenu, renderEmojiMenu = _z === void 0 ? function (props) { return (React__default.createElement(MessageEmojiMenu, __assign({}, props))); } : _z, _0 = props.renderEmojiReactions, renderEmojiReactions = _0 === void 0 ? function (props) { return (React__default.createElement(EmojiReactions, __assign({}, props))); } : _0;
     var dateLocale = useLocalization().dateLocale;
-    var _y = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}, config = _y.config, eventHandlers = _y.eventHandlers;
+    var _1 = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : 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 = useRef(null);
     var isMobile = useMediaQueryContext().isMobile;
-    var _z = useState(false), showMenu = _z[0], setShowMenu = _z[1];
-    var _0 = useState(false), mouseHover = _0[0], setMouseHover = _0[1];
-    var _1 = useState(false), supposedHover = _1[0], setSupposedHover = _1[1];
+    var _2 = useState(false), showMenu = _2[0], setShowMenu = _2[1];
+    var _3 = useState(false), mouseHover = _3[0], setMouseHover = _3[1];
+    var _4 = useState(false), supposedHover = _4[0], setSupposedHover = _4[1];
+    // Feedback states
+    var _5 = useState(null), selectedFeedback = _5[0], setSelectedFeedback = _5[1];
+    var _6 = useState(false), showFeedbackOptionsMenu = _6[0], setShowFeedbackOptionsMenu = _6[1];
+    var _7 = useState(false), showFeedbackModal = _7[0], setShowFeedbackModal = _7[1];
+    var _8 = useState(''), feedbackFailedText = _8[0], setFeedbackFailedText = _8[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
     var isByMe = (userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.userId))
         || ((message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending')
         || ((message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed');
@@ -191,6 +229,16 @@ function MessageContent(props) {
     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';
+    // Feedback buttons
+    var isFeedbackMessage = !isByMe
+        && (message === null || message === void 0 ? void 0 : message.myFeedbackStatus)
+        && message.myFeedbackStatus !== SbFeedbackStatus.NOT_APPLICABLE;
+    var isFeedbackEnabled = ((_d = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _d === void 0 ? void 0 : _d.enableFeedback) && isFeedbackMessage;
+    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;
@@ -207,10 +255,10 @@ 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') {
+    if (((_e = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _e === void 0 ? void 0 : _e.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
         return (React__default.createElement(AdminMessage, { message: message }));
     }
-    return (React__default.createElement("div", { className: getClassName([className, 'sendbird-message-content', isByMeClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
+    return (React__default.createElement("div", { className: getClassName([className, 'sendbird-message-content', isByMeClassName, feedbackMessageClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
         React__default.createElement("div", { className: getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
             renderSenderProfile(__assign(__assign({}, props), { isByMe: isByMe, displayThreadReplies: displayThreadReplies })),
             isByMe && !isMobile && (React__default.createElement("div", { className: getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
@@ -246,7 +294,7 @@ function MessageContent(props) {
         React__default.createElement("div", __assign({ className: 'sendbird-message-content__middle' }, (isMobile ? __assign({}, longPress) : {}), { ref: contentRef }),
             !isByMe && !chainTop && !useReplying && renderMessageHeader(props),
             (useReplying) ? (React__default.createElement("div", { className: getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName]) },
-                React__default.createElement(QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message, userId: userId, isByMe: isByMe, isUnavailable: ((_e = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _e !== void 0 ? _e : 0) > ((_g = (_f = message.parentMessage) === null || _f === void 0 ? void 0 : _f.createdAt) !== null && _g !== void 0 ? _g : 0), onClick: function () {
+                React__default.createElement(QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message, userId: userId, isByMe: isByMe, isUnavailable: ((_f = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _f !== void 0 ? _f : 0) > ((_h = (_g = message.parentMessage) === null || _g === void 0 ? void 0 : _g.createdAt) !== null && _h !== void 0 ? _h : 0), onClick: function () {
                         var _a;
                         if (replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.THREAD) {
                             onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({ message: message });
@@ -271,7 +319,7 @@ 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__default.createElement("div", { className: getClassName([
+                (isReactionEnabledInChannel && ((_j = message === null || message === void 0 ? void 0 : message.reactions) === null || _j === void 0 ? void 0 : _j.length) > 0) && (React__default.createElement("div", { className: getClassName([
                         'sendbird-message-content-reactions',
                         isMultipleFilesMessage(message)
                             ? 'image-grid'
@@ -288,6 +336,34 @@ function MessageContent(props) {
                     toggleReaction: toggleReaction,
                     onPressUserProfile: onPressUserProfileHandler,
                 }))),
+                isFeedbackEnabled && React__default.createElement("div", { className: getClassName([
+                        'sendbird-message-content__middle__body-container__feedback-buttons-container',
+                        displayThreadReplies
+                            ? 'sendbird-message-content__middle__body-container__feedback-buttons-container_with-thread-replies'
+                            : '',
+                    ]) },
+                    React__default.createElement(FeedbackIconButton, { isSelected: ((_k = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _k === void 0 ? void 0 : _k.rating) === FeedbackRating.GOOD, onClick: function () {
+                            var _a;
+                            setSelectedFeedback(FeedbackRating.GOOD);
+                            if (isMobile && ((_a = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _a === void 0 ? void 0 : _a.rating) === FeedbackRating.GOOD) {
+                                setShowFeedbackOptionsMenu(true);
+                            }
+                            else {
+                                setShowFeedbackModal(true);
+                            }
+                        }, disabled: (message === null || message === void 0 ? void 0 : message.myFeedback) && message.myFeedback.rating !== FeedbackRating.GOOD },
+                        React__default.createElement(Icon, { type: IconTypes.FEEDBACK_LIKE, width: '24px', height: '24px' })),
+                    React__default.createElement(FeedbackIconButton, { isSelected: ((_l = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _l === void 0 ? void 0 : _l.rating) === FeedbackRating.BAD, onClick: function () {
+                            var _a;
+                            setSelectedFeedback(FeedbackRating.BAD);
+                            if (isMobile && ((_a = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _a === void 0 ? void 0 : _a.rating) === FeedbackRating.BAD) {
+                                setShowFeedbackOptionsMenu(true);
+                            }
+                            else {
+                                setShowFeedbackModal(true);
+                            }
+                        }, disabled: (message === null || message === void 0 ? void 0 : message.myFeedback) && message.myFeedback.rating !== FeedbackRating.BAD },
+                        React__default.createElement(Icon, { type: IconTypes.FEEDBACK_DISLIKE, width: '24px', height: '24px' }))),
                 (!isByMe && !chainBottom) && (React__default.createElement(Label, { className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]), type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_2 }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
                     locale: dateLocale,
                 })))),
@@ -323,7 +399,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__default.createElement(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 === null || message === void 0 ? void 0 : message.isUserMessage) === null || _m === void 0 ? void 0 : _m.call(message)) || ((_o = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _o === void 0 ? void 0 : _o.call(message)) || ((_p = message === null || message === void 0 ? void 0 : message.isMultipleFilesMessage) === null || _p === void 0 ? void 0 : _p.call(message))) && (React__default.createElement(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) {
                 var _b;
                 var message = _a.message;
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
@@ -332,6 +408,100 @@ function MessageContent(props) {
                 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);
                 }
+            } })),
+        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 () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, message.deleteFeedback(message.myFeedback.id)];
+                        case 1:
+                            _a.sent();
+                            setSelectedFeedback(null);
+                            setShowFeedbackOptionsMenu(false);
+                            return [2 /*return*/];
+                    }
+                });
+            }); } })),
+        showFeedbackModal && (React__default.createElement(MessageFeedbackModal, { selectedFeedback: selectedFeedback, message: message, onSubmit: function (comment) { return __awaiter(_this, void 0, void 0, function () {
+                var error_1;
+                var _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _c.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, message.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 __awaiter(_this, void 0, void 0, function () {
+                var newFeedback, error_2;
+                var _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            newFeedback = new Feedback({
+                                id: message.myFeedback.id,
+                                rating: selectedFeedback,
+                                comment: comment,
+                            });
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, message.updateFeedback(newFeedback)];
+                        case 2:
+                            _c.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_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 __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, 2, , 3]);
+                            return [4 /*yield*/, message.deleteFeedback(message.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__default.createElement(MessageFeedbackFailedModal, { text: feedbackFailedText, onCancel: function () {
+                setFeedbackFailedText('');
             } }))));
 }
 

package/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/ui/MessageInput/hooks/usePaste.js

@@ -1,8 +1,8 @@
 import 'react';
 import 'dompurify';
-export { u as default, u as usePaste } from '../../../chunks/bundle-DRnzKt-b.js';
-import '../../../chunks/bundle-vwWaTJzg.js';
-import '../../../chunks/bundle-mcex4MSM.js';
-import '../../../chunks/bundle-uI7_T-M6.js';
-import '../../../chunks/bundle-zNT2XhnG.js';
+export { u as default, u as usePaste } from '../../../chunks/bundle-tZrqMc_G.js';
+import '../../../chunks/bundle-Dv_OpODB.js';
+import '../../../chunks/bundle-imm3o8vY.js';
+import '../../../chunks/bundle-X2Sm7pn5.js';
+import '../../../chunks/bundle-hpM7HwDV.js';
 //# sourceMappingURL=usePaste.js.map

package/ui/MessageInput.js

@@ -1,24 +1,24 @@
-import { _ as __assign, a as __spreadArray } from '../chunks/bundle-vwWaTJzg.js';
+import { _ as __assign, a as __spreadArray } from '../chunks/bundle-Dv_OpODB.js';
 import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../chunks/bundle-yDQ7CB8I.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-ui21vRGg.js';
+import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../chunks/bundle-84jQZIDS.js';
+import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-zx8iuoIh.js';
 import IconButton from './IconButton.js';
 import Button, { ButtonTypes, ButtonSizes } from './Button.js';
-import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage } from '../chunks/bundle-DRnzKt-b.js';
+import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage } from '../chunks/bundle-tZrqMc_G.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-udE7DsNo.js';
-import { u as useLocalization } from '../chunks/bundle-gKkAyMAQ.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-cYhstyoi.js';
+import { u as useLocalization } from '../chunks/bundle-AilPIINY.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { D as arrayEqual, n as getClassName, E as getMimeTypesUIKitAccepts } from '../chunks/bundle--yRzbc9U.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-zqu04qTx.js';
-import { K } from '../chunks/bundle-bDWAVmob.js';
-import { a as isMobileIOS } from '../chunks/bundle-wwLAI-Tt.js';
+import { D as arrayEqual, n as getClassName, E as getMimeTypesUIKitAccepts } from '../chunks/bundle-aD4V4aI8.js';
+import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-ZExhHi47.js';
+import { K } from '../chunks/bundle-rQ1k1Cpu.js';
+import { a as isMobileIOS } from '../chunks/bundle-kHH52OEM.js';
 import 'dompurify';
-import '../chunks/bundle-mcex4MSM.js';
-import '../chunks/bundle-uI7_T-M6.js';
-import '../chunks/bundle-zNT2XhnG.js';
-import '../chunks/bundle-yeq5dlz7.js';
-import '../chunks/bundle-1DDGx2zI.js';
+import '../chunks/bundle-imm3o8vY.js';
+import '../chunks/bundle-X2Sm7pn5.js';
+import '../chunks/bundle-hpM7HwDV.js';
+import '../chunks/bundle-P_LfQm7L.js';
+import '../chunks/bundle-26VX7FQg.js';
 import '../withSendbird.js';
 import '../utils/message/getOutgoingMessageState.js';