@sendbird/uikit-react 3.12.1 → 3.13.1

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-QauQilHV.js');
+var _tslib = require('../chunks/bundle-0_XeBL9s.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-QauQilHV.js');
+var _tslib = require('../chunks/bundle-0_XeBL9s.js');
 var React = require('react');
-var utils = require('../chunks/bundle-DGXRqeiH.js');
+var utils = require('../chunks/bundle-h5InIJAx.js');
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;

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-12iJO39c.js');
-require('../chunks/bundle-QauQilHV.js');
-require('../chunks/bundle-JfUvL0pn.js');
+var ui_Label = require('../chunks/bundle-y7M4yzjp.js');
+require('../chunks/bundle-0_XeBL9s.js');
+require('../chunks/bundle-7WTXh7Qd.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-QauQilHV.js');
+require('../chunks/bundle-0_XeBL9s.js');
 require('react');
-var ui_Label = require('../chunks/bundle-12iJO39c.js');
-require('../chunks/bundle-JfUvL0pn.js');
+var ui_Label = require('../chunks/bundle-y7M4yzjp.js');
+require('../chunks/bundle-7WTXh7Qd.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-QauQilHV.js');
+var _tslib = require('../chunks/bundle-0_XeBL9s.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-12iJO39c.js');
-require('../chunks/bundle-JfUvL0pn.js');
+var ui_Label = require('../chunks/bundle-y7M4yzjp.js');
+require('../chunks/bundle-7WTXh7Qd.js');
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {

package/cjs/ui/Loader.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-QauQilHV.js');
+var _tslib = require('../chunks/bundle-0_XeBL9s.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-require('../chunks/bundle-DGXRqeiH.js');
+require('../chunks/bundle-h5InIJAx.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-gCywzCVk.js');
+var ui_Loader = require('./Loader.js');
+var ui_Icon = require('./Icon.js');
+require('../chunks/bundle-0_XeBL9s.js');
+require('@sendbird/chat/groupChannel');
+require('../utils/message/getOutgoingMessageState.js');
+require('../chunks/bundle-0tffesFh.js');
+require('../chunks/bundle-h5InIJAx.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-12iJO39c.js');
+var ui_Label = require('../chunks/bundle-y7M4yzjp.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../chunks/bundle-QauQilHV.js');
+require('../chunks/bundle-0_XeBL9s.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-BAZMzxRI.js');
-require('../chunks/bundle-opmIFrXg.js');
+require('../chunks/bundle-1MVKpHty.js');
+require('../chunks/bundle-gCywzCVk.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-7pGAEUaG.js');
-require('../chunks/bundle-JfUvL0pn.js');
-require('../chunks/bundle-rGYP82Yc.js');
-require('../chunks/bundle-6uWmKzjA.js');
-require('../chunks/bundle-o2GWKL_d.js');
+require('../chunks/bundle-0tffesFh.js');
+require('../chunks/bundle-7WTXh7Qd.js');
+require('../chunks/bundle-2mYNn3cL.js');
+require('../chunks/bundle-bRa1uu9u.js');
+require('../chunks/bundle-46h-dSCc.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-Ktg9Of7w.js');
-require('../chunks/bundle-DGXRqeiH.js');
-require('../chunks/bundle-BujsZjS_.js');
+require('../chunks/bundle-l4hJRoVO.js');
+require('../chunks/bundle-h5InIJAx.js');
+require('../chunks/bundle-cdInBvCf.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-hR3vnZG1.js');
+require('../chunks/bundle-cA3flg73.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-mpZAARbu.js');
+var consts = require('../chunks/bundle-ZC8MXTCs.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-QauQilHV.js');
+var _tslib = require('../chunks/bundle-0_XeBL9s.js');
 var React = require('react');
-var index$2 = require('../chunks/bundle-JbsZLrne.js');
-var ui_MessageStatus = require('../chunks/bundle-uIj1z0m8.js');
+var index$2 = require('../chunks/bundle-XXLu4E3k.js');
+var ui_MessageStatus = require('../chunks/bundle-4Dfxs0kD.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
-var ui_Label = require('../chunks/bundle-12iJO39c.js');
+var ui_Label = require('../chunks/bundle-y7M4yzjp.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../chunks/bundle-opmIFrXg.js');
-var LocalizationContext = require('../chunks/bundle-rGYP82Yc.js');
+var index = require('../chunks/bundle-gCywzCVk.js');
+var LocalizationContext = require('../chunks/bundle-2mYNn3cL.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var message = require('@sendbird/chat/message');
-var useLongPress = require('../chunks/bundle-0vl1G6aF.js');
-var index$3 = require('../chunks/bundle-mMBwJT3x.js');
-var MediaQueryContext = require('../chunks/bundle-xTAz4Z91.js');
+var useLongPress = require('../chunks/bundle-lhYJWwkC.js');
+var index$3 = require('../chunks/bundle-AE4PYUbC.js');
+var MediaQueryContext = require('../chunks/bundle-NlYqioOJ.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../chunks/bundle-YZRXvkp-.js');
-var utils = require('../chunks/bundle-DGXRqeiH.js');
+var _const = require('../chunks/bundle-xSEKQWBT.js');
+var utils = require('../chunks/bundle-h5InIJAx.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Avatar = require('../chunks/bundle-BujsZjS_.js');
+var ui_Avatar = require('../chunks/bundle-cdInBvCf.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-o2GWKL_d.js');
+var UserProfileContext = require('../chunks/bundle-46h-dSCc.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
 var ui_FileMessageItemBody = require('./FileMessageItemBody.js');
-var useFileInfoListWithUploaded = require('../chunks/bundle-xHh0P-Hz.js');
+var useFileInfoListWithUploaded = require('../chunks/bundle-ZAoex1pi.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-7pGAEUaG.js');
+var index$1 = require('../chunks/bundle-0tffesFh.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-3eINsVVm.js');
+var ui_Modal = require('../chunks/bundle-21xpspuo.js');
 var ui_Button = require('./Button.js');
-var useKeyDown = require('../chunks/bundle-jh0UjnOb.js');
-require('../chunks/bundle-6uWmKzjA.js');
+var useKeyDown = require('../chunks/bundle-4TLu25Dk.js');
+require('../chunks/bundle-bRa1uu9u.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-OmPnU_OI.js');
-require('../chunks/bundle-fNnK4ZX1.js');
+require('../chunks/bundle-a2N3BU-Q.js');
+require('../chunks/bundle-boCcuPJ4.js');
 require('./IconButton.js');
-require('../chunks/bundle-XqQ_cljg.js');
+require('../chunks/bundle-_MpChSYj.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-BAZMzxRI.js');
-require('../chunks/bundle-JfUvL0pn.js');
+require('../chunks/bundle-1MVKpHty.js');
+require('../chunks/bundle-7WTXh7Qd.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-hR3vnZG1.js');
+require('../chunks/bundle-cA3flg73.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-Ktg9Of7w.js');
+require('../chunks/bundle-l4hJRoVO.js');
 require('../withSendbird.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../chunks/bundle-WjU125ds.js');
-require('../chunks/bundle-SR43QM50.js');
-require('../chunks/bundle-rm245WXS.js');
+require('../chunks/bundle-c5UvSMFX.js');
+require('../chunks/bundle-n5-vItXT.js');
+require('../chunks/bundle-rEEpe9mU.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../chunks/bundle-vtbEyMlh.js');
-require('../chunks/bundle-cIL4aJSh.js');
+require('../chunks/bundle-opuYK5G6.js');
+require('../chunks/bundle-jXFyjqn6.js');
 require('./TextButton.js');
-require('../chunks/bundle-q15q65dt.js');
-require('../chunks/bundle-yzcXd9DQ.js');
-require('../chunks/bundle-Oq2WwdJI.js');
+require('../chunks/bundle-Af1jmrRE.js');
+require('../chunks/bundle-tNBLsc90.js');
+require('../chunks/bundle-0OVYmgjV.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../chunks/bundle-sSkyvCgN.js');
+require('../chunks/bundle-7ExxSDfG.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
+require('../chunks/bundle-e2Z-oeMk.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,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('dompurify');
-var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-VySxn-bM.js');
-require('../../../chunks/bundle-sPQAW6hW.js');
-require('../../../chunks/bundle-YZRXvkp-.js');
-require('../../../chunks/bundle-QauQilHV.js');
-require('../../../chunks/bundle-mpZAARbu.js');
-require('../../../chunks/bundle-cIL4aJSh.js');
-require('../../../chunks/bundle-vtbEyMlh.js');
+var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-tzC2Xgxv.js');
+require('../../../chunks/bundle-mJdmd7Tl.js');
+require('../../../chunks/bundle-xSEKQWBT.js');
+require('../../../chunks/bundle-0_XeBL9s.js');
+require('../../../chunks/bundle-ZC8MXTCs.js');
+require('../../../chunks/bundle-jXFyjqn6.js');
+require('../../../chunks/bundle-opuYK5G6.js');
 
 
 

package/cjs/ui/MessageInput.js

@@ -1,26 +1,26 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-QauQilHV.js');
+var _tslib = require('../chunks/bundle-0_XeBL9s.js');
 var React = require('react');
-var _const$1 = require('../chunks/bundle-sPQAW6hW.js');
-var _const = require('../chunks/bundle-YZRXvkp-.js');
+var _const$1 = require('../chunks/bundle-mJdmd7Tl.js');
+var _const = require('../chunks/bundle-xSEKQWBT.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
-var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-VySxn-bM.js');
+var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-tzC2Xgxv.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-12iJO39c.js');
-var LocalizationContext = require('../chunks/bundle-rGYP82Yc.js');
+var ui_Label = require('../chunks/bundle-y7M4yzjp.js');
+var LocalizationContext = require('../chunks/bundle-2mYNn3cL.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var index$1 = require('../chunks/bundle-opmIFrXg.js');
-var tokenize = require('../chunks/bundle-rm245WXS.js');
-var index = require('../chunks/bundle-7pGAEUaG.js');
-var utils = require('../chunks/bundle-DGXRqeiH.js');
+var index$1 = require('../chunks/bundle-gCywzCVk.js');
+var tokenize = require('../chunks/bundle-rEEpe9mU.js');
+var index = require('../chunks/bundle-0tffesFh.js');
+var utils = require('../chunks/bundle-h5InIJAx.js');
 require('dompurify');
-require('../chunks/bundle-mpZAARbu.js');
-require('../chunks/bundle-cIL4aJSh.js');
-require('../chunks/bundle-vtbEyMlh.js');
-require('../chunks/bundle-JfUvL0pn.js');
-require('../chunks/bundle-6uWmKzjA.js');
+require('../chunks/bundle-ZC8MXTCs.js');
+require('../chunks/bundle-jXFyjqn6.js');
+require('../chunks/bundle-opuYK5G6.js');
+require('../chunks/bundle-7WTXh7Qd.js');
+require('../chunks/bundle-bRa1uu9u.js');
 require('../withSendbird.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
@@ -57,6 +57,7 @@ var checkIfFileUploadEnabled = function (_a) {
 
 var TEXT_FIELD_ID = 'sendbird-message-input-text-field';
 var LINE_HEIGHT = 76;
+var DEFAULT_CHAT_VIEW_HEIGHT = 600;
 var noop = function () {
     return null;
 };
@@ -99,11 +100,14 @@ var MessageInput = React.forwardRef(function (props, externalRef) {
     var _9 = React.useState(false), isInput = _9[0], setIsInput = _9[1];
     var _10 = React.useState([]), mentionedUserIds = _10[0], setMentionedUserIds = _10[1];
     var _11 = React.useState(_tslib.__assign({}, initialTargetStringInfo)), targetStringInfo = _11[0], setTargetStringInfo = _11[1];
-    var setHeight = React.useMemo(function () { return function () {
+    var setHeight = React.useCallback(function () {
+        var elem = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+        if (!elem)
+            return;
         try {
-            var elem = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-            var MAX_HEIGHT = window.document.body.offsetHeight * 0.6;
-            if (elem && elem.scrollHeight >= LINE_HEIGHT) {
+            var estimatedChatViewHeight = window.document.body.offsetHeight || DEFAULT_CHAT_VIEW_HEIGHT;
+            var MAX_HEIGHT = estimatedChatViewHeight * 0.6;
+            if (elem.scrollHeight >= LINE_HEIGHT) {
                 if (MAX_HEIGHT < elem.scrollHeight) {
                     elem.style.height = 'auto';
                     elem.style.height = "".concat(MAX_HEIGHT, "px");
@@ -120,7 +124,7 @@ var MessageInput = React.forwardRef(function (props, externalRef) {
         catch (error) {
             // error
         }
-    }; }, []);
+    }, []);
     // #Edit mode
     // for easilly initialize input value from outside, but
     // useEffect(_, [channelUrl]) erase it

package/cjs/ui/MessageInput.js.map

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

package/cjs/ui/MessageItemMenu.js

@@ -6,20 +6,20 @@ 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-opmIFrXg.js');
-var LocalizationContext = require('../chunks/bundle-rGYP82Yc.js');
-var types = require('../chunks/bundle-XqQ_cljg.js');
-require('../chunks/bundle-QauQilHV.js');
+var index = require('../chunks/bundle-gCywzCVk.js');
+var LocalizationContext = require('../chunks/bundle-2mYNn3cL.js');
+var types = require('../chunks/bundle-_MpChSYj.js');
+require('../chunks/bundle-0_XeBL9s.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-BAZMzxRI.js');
-require('../chunks/bundle-12iJO39c.js');
-require('../chunks/bundle-JfUvL0pn.js');
-require('../chunks/bundle-DGXRqeiH.js');
+require('../chunks/bundle-1MVKpHty.js');
+require('../chunks/bundle-y7M4yzjp.js');
+require('../chunks/bundle-7WTXh7Qd.js');
+require('../chunks/bundle-h5InIJAx.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-7pGAEUaG.js');
-require('../chunks/bundle-6uWmKzjA.js');
+require('../chunks/bundle-0tffesFh.js');
+require('../chunks/bundle-bRa1uu9u.js');
 
 function MessageMenu(_a) {
     var _b;

package/cjs/ui/MessageItemReactionMenu.js

@@ -8,19 +8,19 @@ var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var index = require('../chunks/bundle-opmIFrXg.js');
-require('../chunks/bundle-QauQilHV.js');
+var index = require('../chunks/bundle-gCywzCVk.js');
+require('../chunks/bundle-0_XeBL9s.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-BAZMzxRI.js');
-require('../chunks/bundle-12iJO39c.js');
-require('../chunks/bundle-JfUvL0pn.js');
-require('../chunks/bundle-DGXRqeiH.js');
-require('../chunks/bundle-0vl1G6aF.js');
-require('../chunks/bundle-xTAz4Z91.js');
+require('../chunks/bundle-1MVKpHty.js');
+require('../chunks/bundle-y7M4yzjp.js');
+require('../chunks/bundle-7WTXh7Qd.js');
+require('../chunks/bundle-h5InIJAx.js');
+require('../chunks/bundle-lhYJWwkC.js');
+require('../chunks/bundle-NlYqioOJ.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-7pGAEUaG.js');
+require('../chunks/bundle-0tffesFh.js');
 
 function MessageEmojiMenu(_a) {
     var className = _a.className, message = _a.message, userId = _a.userId, _b = _a.spaceFromTrigger, spaceFromTrigger = _b === void 0 ? { x: 0, y: 0 } : _b, emojiContainer = _a.emojiContainer, toggleReaction = _a.toggleReaction, setSupposedHover = _a.setSupposedHover;