@sendbird/uikit-react 3.12.0 → 3.13.0

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
 
 var IconButton = React.forwardRef(function (props, ref) {

package/cjs/ui/ImageRenderer.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var utils = require('../chunks/bundle-XpwayjqP.js');
+var utils = require('../chunks/bundle-BdWL3kB4.js');
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;
@@ -105,18 +105,13 @@ var ImageRenderer = function (_a) {
         return defaultComponent;
     };
     var renderImage = function () {
-        return (React.createElement("div", { className: "sendbird-image-renderer__image", style: {
-                width: '100%',
-                minWidth: dynamicMinWidth,
-                maxWidth: fixedSize ? dynamicMinWidth : '400px',
-                height: dynamicMinHeight,
-                position: 'absolute',
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'center',
-                backgroundSize: 'cover',
-                backgroundImage: "url(".concat(internalUrl, ")"),
-                borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),
-            } }));
+        var backgroundStyle = internalUrl ? {
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            backgroundImage: "url(".concat(internalUrl, ")"),
+        } : {};
+        return (React.createElement("div", { className: "sendbird-image-renderer__image", style: _tslib.__assign({ width: '100%', minWidth: dynamicMinWidth, maxWidth: fixedSize ? dynamicMinWidth : '400px', height: dynamicMinHeight, position: 'absolute', borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) }, backgroundStyle) }));
     };
     return (dynamicMinWidth
         && dynamicMinHeight && (React.createElement("div", { ref: ref, className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), ['sendbird-image-renderer'], false).join(' '), style: {
@@ -128,7 +123,7 @@ var ImageRenderer = function (_a) {
         placeholderVisible && renderPlaceholder(),
         defaultComponentVisible ? renderDefault() : renderImage(),
         shadeOnHover && (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__image-cover", style: _tslib.__assign({ borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) }, (isUploaded ? {} : { display: 'inline-flex' })) })),
-        React.createElement(HiddenImageLoader, { src: internalUrl, alt: alt, onLoadStart: function () {
+        internalUrl && React.createElement(HiddenImageLoader, { src: internalUrl, alt: alt, onLoadStart: function () {
                 setPlaceholderVisible(true);
                 setDefaultComponentVisible(false);
             }, onLoad: function () {

package/cjs/ui/ImageRenderer.js.map

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

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-require('../chunks/bundle-l9rAnwws.js');
-require('../chunks/bundle-do_4Y2S_.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+require('../chunks/bundle-9l41IWgC.js');
+require('../chunks/bundle-xtUT3duD.js');
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/cjs/ui/Label.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-l9rAnwws.js');
+require('../chunks/bundle-9l41IWgC.js');
 require('react');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-require('../chunks/bundle-do_4Y2S_.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+require('../chunks/bundle-xtUT3duD.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-require('../chunks/bundle-do_4Y2S_.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+require('../chunks/bundle-xtUT3duD.js');
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {

package/cjs/ui/Loader.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-require('../chunks/bundle-XpwayjqP.js');
+require('../chunks/bundle-BdWL3kB4.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/cjs/ui/LoadingTemplateMessageItemBody.tsx.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../chunks/bundle-Gw-7KmmG.js');
+var ui_Loader = require('./Loader.js');
+var ui_Icon = require('./Icon.js');
+require('../chunks/bundle-9l41IWgC.js');
+require('@sendbird/chat/groupChannel');
+require('../utils/message/getOutgoingMessageState.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../chunks/bundle-BdWL3kB4.js');
+
+var TEMPLATE_LOADING_SPINNER_SIZE = '40px';
+function LoadingTemplateMessageItemBody(_a) {
+    var className = _a.className, isByMe = _a.isByMe;
+    return (React.createElement("div", { className: index.getClassName([
+            className,
+            isByMe ? 'outgoing' : 'incoming',
+            'sendbird-template-loading-message-item-body',
+        ]) },
+        React.createElement(ui_Loader, { className: "sendbird-message-status__icon", width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.CONTENT_INVERSE_5, width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE }))));
+}
+
+exports.LoadingTemplateMessageItemBody = LoadingTemplateMessageItemBody;
+exports.default = LoadingTemplateMessageItemBody;
+//# sourceMappingURL=LoadingTemplateMessageItemBody.tsx.js.map

package/cjs/ui/LoadingTemplateMessageItemBody.tsx.js.map

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

package/cjs/ui/MentionLabel.js

@@ -2,27 +2,27 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../chunks/bundle-l9rAnwws.js');
+require('../chunks/bundle-9l41IWgC.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-fWvwYg6I.js');
-require('../chunks/bundle-JutD2hKN.js');
+require('../chunks/bundle-5zZ25-q8.js');
+require('../chunks/bundle-Gw-7KmmG.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
-require('../chunks/bundle-do_4Y2S_.js');
-require('../chunks/bundle-oK2GZVsW.js');
-require('../chunks/bundle-HQUEIVST.js');
-require('../chunks/bundle-bSoYSPA5.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../chunks/bundle-xtUT3duD.js');
+require('../chunks/bundle-2dTv415Y.js');
+require('../chunks/bundle-qYN98FNj.js');
+require('../chunks/bundle-bOij3dXU.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-2QTmv8Qr.js');
-require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-lZm_4ToV.js');
+require('../chunks/bundle-1BET8ZYY.js');
+require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-Sxjv83JD.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-jI4fSOuZ.js');
+require('../chunks/bundle-xbuS1NJI.js');
 require('./Icon.js');
 require('./Button.js');
 require('../withSendbird.js');

package/cjs/ui/MentionUserLabel.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var consts = require('../chunks/bundle-WQOvDsOP.js');
+var consts = require('../chunks/bundle-ctM9C4Ol.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/cjs/ui/MessageContent.js

@@ -1,55 +1,56 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var index$2 = require('../chunks/bundle-POnqXMLV.js');
-var ui_MessageStatus = require('../chunks/bundle-UAlBT2_3.js');
+var index$2 = require('../chunks/bundle-DsdDiOQc.js');
+var ui_MessageStatus = require('../chunks/bundle-2-AYfw-C.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../chunks/bundle-JutD2hKN.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
+var index = require('../chunks/bundle-Gw-7KmmG.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var message = require('@sendbird/chat/message');
-var useLongPress = require('../chunks/bundle-ivu3uDBu.js');
-var index$3 = require('../chunks/bundle-jjYDBqPB.js');
-var MediaQueryContext = require('../chunks/bundle-eg639gtv.js');
+var useLongPress = require('../chunks/bundle-eVmdXbX4.js');
+var index$3 = require('../chunks/bundle-RceCnDam.js');
+var MediaQueryContext = require('../chunks/bundle-UOOPIGjG.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../chunks/bundle-THKiylQP.js');
-var utils = require('../chunks/bundle-XpwayjqP.js');
+var _const = require('../chunks/bundle-wbFvXCMi.js');
+var utils = require('../chunks/bundle-BdWL3kB4.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Avatar = require('../chunks/bundle-lZm_4ToV.js');
+var ui_Avatar = require('../chunks/bundle-Sxjv83JD.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-bSoYSPA5.js');
+var UserProfileContext = require('../chunks/bundle-bOij3dXU.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
 var ui_FileMessageItemBody = require('./FileMessageItemBody.js');
-var useFileInfoListWithUploaded = require('../chunks/bundle-dibCo5Mv.js');
+var useFileInfoListWithUploaded = require('../chunks/bundle-xNnngzve.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-LZMOuc2b.js');
+var index$1 = require('../chunks/bundle-SWOq3kxG.js');
+var ui_TemplateMessageItemBody = require('./TemplateMessageItemBody.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-lqO2HtRG.js');
+var ui_Modal = require('../chunks/bundle-Myh0hGtf.js');
 var ui_Button = require('./Button.js');
-var useKeyDown = require('../chunks/bundle-O3DZBV2p.js');
-require('../chunks/bundle-HQUEIVST.js');
+var useKeyDown = require('../chunks/bundle-nvUhM4Jt.js');
+require('../chunks/bundle-qYN98FNj.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-hdKCnGri.js');
-require('../chunks/bundle-65WXfVqV.js');
+require('../chunks/bundle-pc4CZYj5.js');
+require('../chunks/bundle-VBjH2Gyx.js');
 require('./IconButton.js');
-require('../chunks/bundle-w1sEa7O0.js');
+require('../chunks/bundle-W4lK9aC2.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-fWvwYg6I.js');
-require('../chunks/bundle-do_4Y2S_.js');
+require('../chunks/bundle-5zZ25-q8.js');
+require('../chunks/bundle-xtUT3duD.js');
 require('@sendbird/chat/groupChannel');
 require('./ImageRenderer.js');
 require('./ReactionButton.js');
@@ -59,29 +60,32 @@ require('../hooks/useModal.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
-require('../chunks/bundle-jI4fSOuZ.js');
+require('../chunks/bundle-xbuS1NJI.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-2QTmv8Qr.js');
+require('../chunks/bundle-1BET8ZYY.js');
 require('../withSendbird.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../chunks/bundle-v-P7N839.js');
-require('../chunks/bundle-yyOx7Krk.js');
-require('../chunks/bundle-Ulv5XabQ.js');
+require('../chunks/bundle-EIBGC5ds.js');
+require('../chunks/bundle-_1OqWxYy.js');
+require('../chunks/bundle-QvRptclZ.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../chunks/bundle-rGIlrKQw.js');
-require('../chunks/bundle-8gAAE7I3.js');
+require('../chunks/bundle-RK7_ZCh1.js');
+require('../chunks/bundle-nNgkSlET.js');
 require('./TextButton.js');
-require('../chunks/bundle-XSrDHwxE.js');
-require('../chunks/bundle-JllM1Vt3.js');
-require('../chunks/bundle-_N5y1qEg.js');
+require('../chunks/bundle-yQR_oAnV.js');
+require('../chunks/bundle-M7S2ba5_.js');
+require('../chunks/bundle-qD5w2tyR.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../chunks/bundle-apUHizVu.js');
+require('../chunks/bundle-xe1wuNko.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
+require('../chunks/bundle-csbD2FCX.js');
+require('./FallbackTemplateMessageItemBody.tsx.js');
+require('./LoadingTemplateMessageItemBody.tsx.js');
 require('./Input.js');
 require('@sendbird/uikit-tools');
 
@@ -131,6 +135,7 @@ function MessageBody(props) {
     var messageTypes = index.getUIKitMessageTypes();
     var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
     return index$1.K(message)
+        .when(index.isTemplateMessage, function () { return (React.createElement(ui_TemplateMessageItemBody.TemplateMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, theme: config === null || config === void 0 ? void 0 : config.theme })); })
         .when(function (message) { return isOgMessageEnabledInGroupChannel
         && index.isSendableMessage(message)
         && index.isOGMessage(message); }, function () { return (React.createElement(ui_OGMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel, onMessageHeightChange: onMessageHeightChange })); })
@@ -195,19 +200,19 @@ function MessageContent(props) {
     // Public props for customization
     _x = props.renderSenderProfile, 
     // Public props for customization
-    renderSenderProfile = _x === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _x, _y = props.renderMessageBody, renderMessageBody = _y === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _y, _z = props.renderMessageHeader, renderMessageHeader = _z === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _z, _0 = props.renderMessageMenu, renderMessageMenu = _0 === void 0 ? function (props) { return (React.createElement(ui_MessageItemMenu.MessageMenu, _tslib.__assign({}, props))); } : _0, _1 = props.renderEmojiMenu, renderEmojiMenu = _1 === void 0 ? function (props) { return (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props))); } : _1, _2 = props.renderEmojiReactions, renderEmojiReactions = _2 === void 0 ? function (props) { return (React.createElement(ui_EmojiReactions, _tslib.__assign({}, props))); } : _2;
+    renderSenderProfile = _x === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _x, _y = props.renderMessageBody, renderMessageBody = _y === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _y, _z = props.renderMessageHeader, renderMessageHeader = _z === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _z, _0 = props.renderMessageMenu, renderMessageMenu = _0 === void 0 ? function (props) { return (React.createElement(ui_MessageItemMenu.MessageMenu, _tslib.__assign({}, props))); } : _0, _1 = props.renderEmojiMenu, renderEmojiMenu = _1 === void 0 ? function (props) { return (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props))); } : _1, _2 = props.renderEmojiReactions, renderEmojiReactions = _2 === void 0 ? function (props) { return (React.createElement(ui_EmojiReactions, _tslib.__assign({}, props))); } : _2, _3 = props.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _3 === void 0 ? function (props) { return (React.createElement(index$3.MobileMenu, _tslib.__assign({}, props))); } : _3;
     var dateLocale = LocalizationContext.useLocalization().dateLocale;
-    var _3 = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _3.config, eventHandlers = _3.eventHandlers;
+    var _4 = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _4.config, eventHandlers = _4.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 _4 = React.useState(false), showMenu = _4[0], setShowMenu = _4[1];
-    var _5 = React.useState(false), mouseHover = _5[0], setMouseHover = _5[1];
-    var _6 = React.useState(false), supposedHover = _6[0], setSupposedHover = _6[1];
+    var _5 = React.useState(false), showMenu = _5[0], setShowMenu = _5[1];
+    var _6 = React.useState(false), mouseHover = _6[0], setMouseHover = _6[1];
+    var _7 = React.useState(false), supposedHover = _7[0], setSupposedHover = _7[1];
     // Feedback states
-    var _7 = React.useState(false), showFeedbackOptionsMenu = _7[0], setShowFeedbackOptionsMenu = _7[1];
-    var _8 = React.useState(false), showFeedbackModal = _8[0], setShowFeedbackModal = _8[1];
-    var _9 = React.useState(''), feedbackFailedText = _9[0], setFeedbackFailedText = _9[1];
+    var _8 = React.useState(false), showFeedbackOptionsMenu = _8[0], setShowFeedbackOptionsMenu = _8[1];
+    var _9 = React.useState(false), showFeedbackModal = _9[0], setShowFeedbackModal = _9[1];
+    var _10 = React.useState(''), feedbackFailedText = _10[0], setFeedbackFailedText = _10[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')
@@ -229,6 +234,20 @@ function MessageContent(props) {
         && 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' : '';
+    /**
+     * For TemplateMessage, do not display:
+     *   - in web view:
+     *     - message menu
+     *     - reaction menu
+     *     - reply in thread
+     *   - in mobile view:
+     *     - bottom sheet on long click
+     */
+    var isNotTemplateMessage = !index.isTemplateMessage(message$1);
+    var showLongPressMenu = isNotTemplateMessage && isMobile;
+    var showOutgoingMenu = isNotTemplateMessage && isByMe && !isMobile;
+    var showThreadReplies = isNotTemplateMessage && displayThreadReplies;
+    var showRightContent = isNotTemplateMessage && !isByMe && !isMobile;
     var onCloseFeedbackForm = function () {
         setShowFeedbackModal(false);
     };
@@ -247,7 +266,7 @@ function MessageContent(props) {
     // onTouchEnd: (e: React.TouchEvent<T>) => void;
     var longPress = useLongPress.useLongPress({
         onLongPress: function () {
-            if (isMobile) {
+            if (showLongPressMenu) {
                 setShowMenu(true);
             }
         },
@@ -262,7 +281,7 @@ function MessageContent(props) {
     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]) },
+            showOutgoingMenu && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
                 renderMessageMenu({
                     channel: channel,
                     message: message$1,
@@ -293,7 +312,10 @@ function MessageContent(props) {
                     toggleReaction: toggleReaction,
                     setSupposedHover: setSupposedHover,
                 }))))),
-        React.createElement("div", _tslib.__assign({ className: 'sendbird-message-content__middle' }, (isMobile ? _tslib.__assign({}, longPress) : {}), { ref: contentRef }),
+        React.createElement("div", _tslib.__assign({ className: index.getClassName([
+                'sendbird-message-content__middle',
+                index.isTemplateMessage(message$1) ? 'sendbird-message-content__middle__for_template_message' : '',
+            ]) }, (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$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 () {
@@ -306,7 +328,10 @@ function MessageContent(props) {
                             scrollToMessage(message$1.parentMessage.createdAt, message$1.parentMessageId);
                         }
                     } }))) : null,
-            React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container']) },
+            React.createElement("div", { className: index.getClassName([
+                    'sendbird-message-content__middle__body-container',
+                    index.isTemplateMessage(message$1) ? 'sendbird-message-content__middle__for_template_message' : '',
+                ]) },
                 (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$1, channel: channel })))),
@@ -409,8 +434,8 @@ function MessageContent(props) {
                 (!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$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]) },
+            showThreadReplies && (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]) }, showRightContent && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
             isReactionEnabledInChannel && (renderEmojiMenu({
                 className: 'sendbird-message-content-menu__reaction-menu',
                 message: message$1,
@@ -442,7 +467,24 @@ function MessageContent(props) {
                 },
                 deleteMessage: deleteMessage,
             })))),
-        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) {
+        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))) && renderMobileMenuOnLongPress({
+            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) {
@@ -451,7 +493,8 @@ 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);
                 }
-            } })),
+            },
+        }),
         ((_q = message$1 === null || message$1 === void 0 ? void 0 : message$1.myFeedback) === null || _q === void 0 ? void 0 : _q.rating) && showFeedbackOptionsMenu && (React.createElement(ui_MobileFeedbackMenu, { hideMenu: function () {
                 setShowFeedbackOptionsMenu(false);
             }, onEditFeedback: function () {

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,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('dompurify');
-var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-qlTSWGy9.js');
-require('../../../chunks/bundle-l9rAnwws.js');
-require('../../../chunks/bundle-WQOvDsOP.js');
-require('../../../chunks/bundle-8gAAE7I3.js');
-require('../../../chunks/bundle-rGIlrKQw.js');
+var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-rdAhtJum.js');
+require('../../../chunks/bundle-A45IMFSi.js');
+require('../../../chunks/bundle-wbFvXCMi.js');
+require('../../../chunks/bundle-9l41IWgC.js');
+require('../../../chunks/bundle-ctM9C4Ol.js');
+require('../../../chunks/bundle-nNgkSlET.js');
+require('../../../chunks/bundle-RK7_ZCh1.js');
 
 
 

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

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