@sendbird/uikit-react 3.12.1 → 3.13.0

package/ui/IconButton.js

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

package/ui/ImageRenderer.js

@@ -1,6 +1,6 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-yoFO4gJM.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-KIf79auh.js';
 import React__default, { useMemo, useState, useLayoutEffect, useRef } from 'react';
-import { n as noop } from '../chunks/bundle-TovLF3ih.js';
+import { n as noop } from '../chunks/bundle-DHw1C5gJ.js';
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;

package/ui/Input.js

@@ -1,7 +1,7 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-52hs7-M-.js';
-import '../chunks/bundle-yoFO4gJM.js';
-import '../chunks/bundle-yPhMS1LV.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-9c5vLDe9.js';
+import '../chunks/bundle-KIf79auh.js';
+import '../chunks/bundle-XDy3Cf54.js';
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/ui/Label.js

@@ -1,5 +1,5 @@
-import '../chunks/bundle-yoFO4gJM.js';
+import '../chunks/bundle-KIf79auh.js';
 import 'react';
-export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-52hs7-M-.js';
-import '../chunks/bundle-yPhMS1LV.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-9c5vLDe9.js';
+import '../chunks/bundle-XDy3Cf54.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-yoFO4gJM.js';
+import { c as __spreadArray } from '../chunks/bundle-KIf79auh.js';
 import React__default from 'react';
-import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-52hs7-M-.js';
-import '../chunks/bundle-yPhMS1LV.js';
+import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-9c5vLDe9.js';
+import '../chunks/bundle-XDy3Cf54.js';
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {

package/ui/Loader.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-yoFO4gJM.js';
+import { c as __spreadArray } from '../chunks/bundle-KIf79auh.js';
 import React__default from 'react';
 import Icon, { IconTypes } from './Icon.js';
-import '../chunks/bundle-TovLF3ih.js';
+import '../chunks/bundle-DHw1C5gJ.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/LoadingTemplateMessageItemBody.tsx.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { w as getClassName } from '../chunks/bundle-LTiCF37t.js';
+import Loader from './Loader.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import '../chunks/bundle-KIf79auh.js';
+import '@sendbird/chat/groupChannel';
+import '../utils/message/getOutgoingMessageState.js';
+import '../chunks/bundle-0QDb7-Y_.js';
+import '../chunks/bundle-DHw1C5gJ.js';
+
+var TEMPLATE_LOADING_SPINNER_SIZE = '40px';
+function LoadingTemplateMessageItemBody(_a) {
+    var className = _a.className, isByMe = _a.isByMe;
+    return (React__default.createElement("div", { className: getClassName([
+            className,
+            isByMe ? 'outgoing' : 'incoming',
+            'sendbird-template-loading-message-item-body',
+        ]) },
+        React__default.createElement(Loader, { className: "sendbird-message-status__icon", width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE },
+            React__default.createElement(Icon, { type: IconTypes.SPINNER, fillColor: IconColors.CONTENT_INVERSE_5, width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE }))));
+}
+
+export { LoadingTemplateMessageItemBody, LoadingTemplateMessageItemBody as default };
+//# sourceMappingURL=LoadingTemplateMessageItemBody.tsx.js.map

package/ui/LoadingTemplateMessageItemBody.tsx.js.map

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

package/ui/MentionLabel.js

@@ -1,26 +1,26 @@
 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-52hs7-M-.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-9c5vLDe9.js';
 import UserProfile from './UserProfile.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import '../chunks/bundle-yoFO4gJM.js';
+import '../chunks/bundle-KIf79auh.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-wdUAfmoS.js';
-import '../chunks/bundle-TYsOyvS5.js';
+import '../chunks/bundle-hjFxrcMW.js';
+import '../chunks/bundle-LTiCF37t.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-5fPKUbCn.js';
-import '../chunks/bundle-yPhMS1LV.js';
-import '../chunks/bundle-_xgfKjN0.js';
-import '../chunks/bundle-wO0wz3br.js';
-import '../chunks/bundle-bazn-ENb.js';
+import '../chunks/bundle-0QDb7-Y_.js';
+import '../chunks/bundle-XDy3Cf54.js';
+import '../chunks/bundle-wpc1Fted.js';
+import '../chunks/bundle-wWnN6K3w.js';
+import '../chunks/bundle-_hGurAcC.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle--q7ObKwF.js';
-import '../chunks/bundle-TovLF3ih.js';
-import '../chunks/bundle-f1tjVRSh.js';
+import '../chunks/bundle-3E-IANjq.js';
+import '../chunks/bundle-DHw1C5gJ.js';
+import '../chunks/bundle-b2jLXyrm.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-Jun66RyD.js';
+import '../chunks/bundle-Sl-oiala.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-9JkrMUIl.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../chunks/bundle-9C7b_-hs.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,53 +1,54 @@
-import { _ as __assign, a as __awaiter, b as __generator } from '../chunks/bundle-yoFO4gJM.js';
+import { _ as __assign, a as __awaiter, b as __generator } from '../chunks/bundle-KIf79auh.js';
 import React__default, { useRef, useContext, useState } from 'react';
-import { f as format } from '../chunks/bundle-is3QkoNv.js';
-import { M as MessageStatus } from '../chunks/bundle-1pgLpH_4.js';
+import { f as format } from '../chunks/bundle-eC1SRuX3.js';
+import { M as MessageStatus } from '../chunks/bundle-qouYngqR.js';
 import { MessageMenu } from './MessageItemMenu.js';
 import { MessageEmojiMenu } from './MessageItemReactionMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-52hs7-M-.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-9c5vLDe9.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import QuoteMessage from './QuoteMessage.js';
-import { e as isSendableMessage, n as getUIKitMessageTypes, K as isOGMessage, L as isTextMessage, m as getUIKitMessageType, c as isMultipleFilesMessage, i as isVoiceMessage, p as isThumbnailMessage, f as getSenderName, w as getClassName } from '../chunks/bundle-TYsOyvS5.js';
-import { L as LocalizationContext, u as useLocalization } from '../chunks/bundle-_xgfKjN0.js';
+import { e as isSendableMessage, n as getUIKitMessageTypes, C as isTemplateMessage, L as isOGMessage, M as isTextMessage, m as getUIKitMessageType, c as isMultipleFilesMessage, i as isVoiceMessage, p as isThumbnailMessage, f as getSenderName, w as getClassName } from '../chunks/bundle-LTiCF37t.js';
+import { L as LocalizationContext, u as useLocalization } from '../chunks/bundle-wpc1Fted.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { FeedbackRating, Feedback } from '@sendbird/chat/message';
-import { u as useLongPress } from '../chunks/bundle-rW70z6Ho.js';
-import { M as MobileMenu } from '../chunks/bundle-ykuyabqF.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-fMkcL8C8.js';
+import { u as useLongPress } from '../chunks/bundle-lZq_XDzb.js';
+import { M as MobileMenu } from '../chunks/bundle-bgVMRm8v.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-Y3ZVN9yF.js';
 import ThreadReplies from './ThreadReplies.js';
-import { T as ThreadReplySelectType } from '../chunks/bundle-WImaBVSO.js';
-import { n as noop } from '../chunks/bundle-TovLF3ih.js';
+import { T as ThreadReplySelectType } from '../chunks/bundle-yIputEl7.js';
+import { n as noop } from '../chunks/bundle-DHw1C5gJ.js';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { A as Avatar } from '../chunks/bundle-f1tjVRSh.js';
+import { A as Avatar } from '../chunks/bundle-b2jLXyrm.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../chunks/bundle-bazn-ENb.js';
+import { a as UserProfileContext } from '../chunks/bundle-_hGurAcC.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
 import FileMessageItemBody from './FileMessageItemBody.js';
-import { u as useThreadMessageKindKeySelector, a as useFileInfoListWithUploaded, M as MultipleFilesMessageItemBody } from '../chunks/bundle-xLjEyoT0.js';
+import { u as useThreadMessageKindKeySelector, a as useFileInfoListWithUploaded, M as MultipleFilesMessageItemBody } from '../chunks/bundle-y9VJsc3H.js';
 import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
 import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
-import { K } from '../chunks/bundle-5fPKUbCn.js';
+import { K } from '../chunks/bundle-0QDb7-Y_.js';
+import { TemplateMessageItemBody } from './TemplateMessageItemBody.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-6hgn3L9Y.js';
+import { M as Modal } from '../chunks/bundle-22Jw6ztq.js';
 import Button, { ButtonTypes } from './Button.js';
-import { u as useKeyDown } from '../chunks/bundle-SXGL8fBv.js';
-import '../chunks/bundle-wO0wz3br.js';
+import { u as useKeyDown } from '../chunks/bundle-jqQY8n8G.js';
+import '../chunks/bundle-wWnN6K3w.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-6ivjnK_C.js';
-import '../chunks/bundle-U7_j21Ss.js';
+import '../chunks/bundle-ubVU4exZ.js';
+import '../chunks/bundle-PYv4lPO3.js';
 import './IconButton.js';
-import '../chunks/bundle-TzTFcIfJ.js';
+import '../chunks/bundle-0DTNrbOf.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-wdUAfmoS.js';
-import '../chunks/bundle-yPhMS1LV.js';
+import '../chunks/bundle-hjFxrcMW.js';
+import '../chunks/bundle-XDy3Cf54.js';
 import '@sendbird/chat/groupChannel';
 import './ImageRenderer.js';
 import './ReactionButton.js';
@@ -57,29 +58,32 @@ import '../hooks/useModal.js';
 import './UserListItem.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
-import '../chunks/bundle-Jun66RyD.js';
+import '../chunks/bundle-Sl-oiala.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle--q7ObKwF.js';
+import '../chunks/bundle-3E-IANjq.js';
 import '../withSendbird.js';
 import './Tooltip.js';
 import './TooltipWrapper.js';
 import '../Message/context.js';
-import '../chunks/bundle-A8dpIXKJ.js';
-import '../chunks/bundle-LG3hn4TL.js';
-import '../chunks/bundle-W_nWubt-.js';
+import '../chunks/bundle-2AR3a1T9.js';
+import '../chunks/bundle-BiPw1Sub.js';
+import '../chunks/bundle-Sm0-7tTm.js';
 import './MentionLabel.js';
 import './LinkLabel.js';
-import '../chunks/bundle-tPOBtJjA.js';
-import '../chunks/bundle-014pCrux.js';
+import '../chunks/bundle-4gcxTdvH.js';
+import '../chunks/bundle-0Vur_TKy.js';
 import './TextButton.js';
-import '../chunks/bundle-2BKREX4m.js';
-import '../chunks/bundle-cJYfaBvk.js';
-import '../chunks/bundle-S-mn30SU.js';
+import '../chunks/bundle-n2BmCgGV.js';
+import '../chunks/bundle-6_zAh1Y3.js';
+import '../chunks/bundle-xC7o7NLR.js';
 import './ProgressBar.js';
 import '../VoicePlayer/useVoicePlayer.js';
-import '../chunks/bundle-wKSIzWUl.js';
+import '../chunks/bundle-bg3dRlK7.js';
 import '../VoiceRecorder/context.js';
 import './PlaybackTime.js';
+import '../chunks/bundle-6KFri-1A.js';
+import './FallbackTemplateMessageItemBody.tsx.js';
+import './LoadingTemplateMessageItemBody.tsx.js';
 import './Input.js';
 import '@sendbird/uikit-tools';
 
@@ -129,6 +133,7 @@ function MessageBody(props) {
     var messageTypes = getUIKitMessageTypes();
     var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
     return K(message)
+        .when(isTemplateMessage, function () { return (React__default.createElement(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
         && isSendableMessage(message)
         && isOGMessage(message); }, function () { return (React__default.createElement(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 })); })
@@ -193,19 +198,19 @@ function MessageContent(props) {
     // Public props for customization
     _x = props.renderSenderProfile, 
     // Public props for customization
-    renderSenderProfile = _x === void 0 ? function (props) { return (React__default.createElement(MessageProfile, __assign({}, props))); } : _x, _y = props.renderMessageBody, renderMessageBody = _y === void 0 ? function (props) { return (React__default.createElement(MessageBody, __assign({}, props))); } : _y, _z = props.renderMessageHeader, renderMessageHeader = _z === void 0 ? function (props) { return (React__default.createElement(MessageHeader, __assign({}, props))); } : _z, _0 = props.renderMessageMenu, renderMessageMenu = _0 === void 0 ? function (props) { return (React__default.createElement(MessageMenu, __assign({}, props))); } : _0, _1 = props.renderEmojiMenu, renderEmojiMenu = _1 === void 0 ? function (props) { return (React__default.createElement(MessageEmojiMenu, __assign({}, props))); } : _1, _2 = props.renderEmojiReactions, renderEmojiReactions = _2 === void 0 ? function (props) { return (React__default.createElement(EmojiReactions, __assign({}, props))); } : _2;
+    renderSenderProfile = _x === void 0 ? function (props) { return (React__default.createElement(MessageProfile, __assign({}, props))); } : _x, _y = props.renderMessageBody, renderMessageBody = _y === void 0 ? function (props) { return (React__default.createElement(MessageBody, __assign({}, props))); } : _y, _z = props.renderMessageHeader, renderMessageHeader = _z === void 0 ? function (props) { return (React__default.createElement(MessageHeader, __assign({}, props))); } : _z, _0 = props.renderMessageMenu, renderMessageMenu = _0 === void 0 ? function (props) { return (React__default.createElement(MessageMenu, __assign({}, props))); } : _0, _1 = props.renderEmojiMenu, renderEmojiMenu = _1 === void 0 ? function (props) { return (React__default.createElement(MessageEmojiMenu, __assign({}, props))); } : _1, _2 = props.renderEmojiReactions, renderEmojiReactions = _2 === void 0 ? function (props) { return (React__default.createElement(EmojiReactions, __assign({}, props))); } : _2, _3 = props.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _3 === void 0 ? function (props) { return (React__default.createElement(MobileMenu, __assign({}, props))); } : _3;
     var dateLocale = useLocalization().dateLocale;
-    var _3 = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}, config = _3.config, eventHandlers = _3.eventHandlers;
+    var _4 = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : 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 = useRef(null);
     var isMobile = useMediaQueryContext().isMobile;
-    var _4 = useState(false), showMenu = _4[0], setShowMenu = _4[1];
-    var _5 = useState(false), mouseHover = _5[0], setMouseHover = _5[1];
-    var _6 = useState(false), supposedHover = _6[0], setSupposedHover = _6[1];
+    var _5 = useState(false), showMenu = _5[0], setShowMenu = _5[1];
+    var _6 = useState(false), mouseHover = _6[0], setMouseHover = _6[1];
+    var _7 = useState(false), supposedHover = _7[0], setSupposedHover = _7[1];
     // Feedback states
-    var _7 = useState(false), showFeedbackOptionsMenu = _7[0], setShowFeedbackOptionsMenu = _7[1];
-    var _8 = useState(false), showFeedbackModal = _8[0], setShowFeedbackModal = _8[1];
-    var _9 = useState(''), feedbackFailedText = _9[0], setFeedbackFailedText = _9[1];
+    var _8 = useState(false), showFeedbackOptionsMenu = _8[0], setShowFeedbackOptionsMenu = _8[1];
+    var _9 = useState(false), showFeedbackModal = _9[0], setShowFeedbackModal = _9[1];
+    var _10 = useState(''), feedbackFailedText = _10[0], setFeedbackFailedText = _10[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')
@@ -227,6 +232,20 @@ function MessageContent(props) {
         && 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' : '';
+    /**
+     * 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 = !isTemplateMessage(message);
+    var showLongPressMenu = isNotTemplateMessage && isMobile;
+    var showOutgoingMenu = isNotTemplateMessage && isByMe && !isMobile;
+    var showThreadReplies = isNotTemplateMessage && displayThreadReplies;
+    var showRightContent = isNotTemplateMessage && !isByMe && !isMobile;
     var onCloseFeedbackForm = function () {
         setShowFeedbackModal(false);
     };
@@ -245,7 +264,7 @@ function MessageContent(props) {
     // onTouchEnd: (e: React.TouchEvent<T>) => void;
     var longPress = useLongPress({
         onLongPress: function () {
-            if (isMobile) {
+            if (showLongPressMenu) {
                 setShowMenu(true);
             }
         },
@@ -260,7 +279,7 @@ function MessageContent(props) {
     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]) },
+            showOutgoingMenu && (React__default.createElement("div", { className: getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
                 renderMessageMenu({
                     channel: channel,
                     message: message,
@@ -291,7 +310,10 @@ function MessageContent(props) {
                     toggleReaction: toggleReaction,
                     setSupposedHover: setSupposedHover,
                 }))))),
-        React__default.createElement("div", __assign({ className: 'sendbird-message-content__middle' }, (isMobile ? __assign({}, longPress) : {}), { ref: contentRef }),
+        React__default.createElement("div", __assign({ className: getClassName([
+                'sendbird-message-content__middle',
+                isTemplateMessage(message) ? 'sendbird-message-content__middle__for_template_message' : '',
+            ]) }, (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: ((_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 () {
@@ -304,7 +326,10 @@ function MessageContent(props) {
                             scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
                         }
                     } }))) : null,
-            React__default.createElement("div", { className: getClassName(['sendbird-message-content__middle__body-container']) },
+            React__default.createElement("div", { className: getClassName([
+                    'sendbird-message-content__middle__body-container',
+                    isTemplateMessage(message) ? 'sendbird-message-content__middle__for_template_message' : '',
+                ]) },
                 (isByMe && !chainBottom) && (React__default.createElement("div", { className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
                     React__default.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
                         React__default.createElement(MessageStatus, { message: message, channel: channel })))),
@@ -407,8 +432,8 @@ function MessageContent(props) {
                 (!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,
                 })))),
-            displayThreadReplies && (React__default.createElement(ThreadReplies, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message }); } }))),
-        React__default.createElement("div", { className: getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName]) }, !isByMe && !isMobile && (React__default.createElement("div", { className: getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
+            showThreadReplies && (React__default.createElement(ThreadReplies, { className: "sendbird-message-content__middle__thread-replies", threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo, onClick: function () { return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message }); } }))),
+        React__default.createElement("div", { className: getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName]) }, showRightContent && (React__default.createElement("div", { className: getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName]) },
             isReactionEnabledInChannel && (renderEmojiMenu({
                 className: 'sendbird-message-content-menu__reaction-menu',
                 message: message,
@@ -440,7 +465,24 @@ function MessageContent(props) {
                 },
                 deleteMessage: deleteMessage,
             })))),
-        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) {
+        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))) && renderMobileMenuOnLongPress({
+            parentRef: contentRef,
+            channel: channel,
+            hideMenu: function () { setShowMenu(false); },
+            message: message,
+            isReactionEnabled: isReactionEnabledInChannel,
+            isByMe: isByMe,
+            userId: userId,
+            replyType: replyType,
+            disabled: disabled,
+            showRemove: showRemove,
+            emojiContainer: emojiContainer,
+            resendMessage: resendMessage,
+            deleteMessage: deleteMessage,
+            setQuoteMessage: setQuoteMessage,
+            toggleReaction: toggleReaction,
+            showEdit: showEdit,
+            onReplyInThread: function (_a) {
                 var _b;
                 var message = _a.message;
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
@@ -449,7 +491,8 @@ 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);
                 }
-            } })),
+            },
+        }),
         ((_q = message === null || message === void 0 ? void 0 : message.myFeedback) === null || _q === void 0 ? void 0 : _q.rating) && showFeedbackOptionsMenu && (React__default.createElement(MobileFeedbackMenu, { hideMenu: function () {
                 setShowFeedbackOptionsMenu(false);
             }, onEditFeedback: function () {

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,10 +1,10 @@
 import 'react';
 import 'dompurify';
-export { u as default, u as usePaste } from '../../../chunks/bundle-B_WSWypW.js';
-import '../../../chunks/bundle-YpfSm9dM.js';
-import '../../../chunks/bundle-WImaBVSO.js';
-import '../../../chunks/bundle-yoFO4gJM.js';
-import '../../../chunks/bundle-9JkrMUIl.js';
-import '../../../chunks/bundle-014pCrux.js';
-import '../../../chunks/bundle-tPOBtJjA.js';
+export { u as default, u as usePaste } from '../../../chunks/bundle-zy69cX9t.js';
+import '../../../chunks/bundle-AaDwp4eU.js';
+import '../../../chunks/bundle-yIputEl7.js';
+import '../../../chunks/bundle-KIf79auh.js';
+import '../../../chunks/bundle-9C7b_-hs.js';
+import '../../../chunks/bundle-0Vur_TKy.js';
+import '../../../chunks/bundle-4gcxTdvH.js';
 //# sourceMappingURL=usePaste.js.map

package/ui/MessageInput.js

@@ -1,24 +1,24 @@
-import { _ as __assign, c as __spreadArray } from '../chunks/bundle-yoFO4gJM.js';
+import { _ as __assign, c as __spreadArray } from '../chunks/bundle-KIf79auh.js';
 import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { N as NodeTypes, M as MessageInputKeys } from '../chunks/bundle-YpfSm9dM.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-WImaBVSO.js';
+import { N as NodeTypes, M as MessageInputKeys } from '../chunks/bundle-AaDwp4eU.js';
+import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-yIputEl7.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, e as extractTextAndMentions } from '../chunks/bundle-B_WSWypW.js';
+import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage, e as extractTextAndMentions } from '../chunks/bundle-zy69cX9t.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-52hs7-M-.js';
-import { u as useLocalization } from '../chunks/bundle-_xgfKjN0.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-9c5vLDe9.js';
+import { u as useLocalization } from '../chunks/bundle-wpc1Fted.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { F as arrayEqual, w as getClassName, G as getMimeTypesUIKitAccepts } from '../chunks/bundle-TYsOyvS5.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-W_nWubt-.js';
-import { K } from '../chunks/bundle-5fPKUbCn.js';
-import { i as isMobileIOS } from '../chunks/bundle-TovLF3ih.js';
+import { G as arrayEqual, w as getClassName, H as getMimeTypesUIKitAccepts } from '../chunks/bundle-LTiCF37t.js';
+import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-Sm0-7tTm.js';
+import { K } from '../chunks/bundle-0QDb7-Y_.js';
+import { i as isMobileIOS } from '../chunks/bundle-DHw1C5gJ.js';
 import 'dompurify';
-import '../chunks/bundle-9JkrMUIl.js';
-import '../chunks/bundle-014pCrux.js';
-import '../chunks/bundle-tPOBtJjA.js';
-import '../chunks/bundle-yPhMS1LV.js';
-import '../chunks/bundle-wO0wz3br.js';
+import '../chunks/bundle-9C7b_-hs.js';
+import '../chunks/bundle-0Vur_TKy.js';
+import '../chunks/bundle-4gcxTdvH.js';
+import '../chunks/bundle-XDy3Cf54.js';
+import '../chunks/bundle-wWnN6K3w.js';
 import '../withSendbird.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';

package/ui/MessageItemMenu.js

@@ -2,20 +2,20 @@ import React__default, { useContext, useRef } from 'react';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
-import { l as isUserMessage, q as isSentMessage, u as isFailedMessage, v as isPendingMessage, w as getClassName, x as copyToClipboard } from '../chunks/bundle-TYsOyvS5.js';
-import { L as LocalizationContext } from '../chunks/bundle-_xgfKjN0.js';
-import { R as Role } from '../chunks/bundle-TzTFcIfJ.js';
-import '../chunks/bundle-yoFO4gJM.js';
+import { l as isUserMessage, q as isSentMessage, u as isFailedMessage, v as isPendingMessage, w as getClassName, x as copyToClipboard } from '../chunks/bundle-LTiCF37t.js';
+import { L as LocalizationContext } from '../chunks/bundle-wpc1Fted.js';
+import { R as Role } from '../chunks/bundle-0DTNrbOf.js';
+import '../chunks/bundle-KIf79auh.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-wdUAfmoS.js';
-import '../chunks/bundle-52hs7-M-.js';
-import '../chunks/bundle-yPhMS1LV.js';
-import '../chunks/bundle-TovLF3ih.js';
+import '../chunks/bundle-hjFxrcMW.js';
+import '../chunks/bundle-9c5vLDe9.js';
+import '../chunks/bundle-XDy3Cf54.js';
+import '../chunks/bundle-DHw1C5gJ.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-5fPKUbCn.js';
-import '../chunks/bundle-wO0wz3br.js';
+import '../chunks/bundle-0QDb7-Y_.js';
+import '../chunks/bundle-wWnN6K3w.js';
 
 function MessageMenu(_a) {
     var _b;

package/ui/MessageItemReactionMenu.js

@@ -4,19 +4,19 @@ import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import ReactionButton from './ReactionButton.js';
-import { v as isPendingMessage, u as isFailedMessage, w as getClassName, y as getEmojiListAll } from '../chunks/bundle-TYsOyvS5.js';
-import '../chunks/bundle-yoFO4gJM.js';
+import { v as isPendingMessage, u as isFailedMessage, w as getClassName, y as getEmojiListAll } from '../chunks/bundle-LTiCF37t.js';
+import '../chunks/bundle-KIf79auh.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-wdUAfmoS.js';
-import '../chunks/bundle-52hs7-M-.js';
-import '../chunks/bundle-yPhMS1LV.js';
-import '../chunks/bundle-TovLF3ih.js';
-import '../chunks/bundle-rW70z6Ho.js';
-import '../chunks/bundle-fMkcL8C8.js';
+import '../chunks/bundle-hjFxrcMW.js';
+import '../chunks/bundle-9c5vLDe9.js';
+import '../chunks/bundle-XDy3Cf54.js';
+import '../chunks/bundle-DHw1C5gJ.js';
+import '../chunks/bundle-lZq_XDzb.js';
+import '../chunks/bundle-Y3ZVN9yF.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-5fPKUbCn.js';
+import '../chunks/bundle-0QDb7-Y_.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;

package/ui/MessageSearchFileItem.js

@@ -1,22 +1,22 @@
-import { c as __spreadArray } from '../chunks/bundle-yoFO4gJM.js';
+import { c as __spreadArray } from '../chunks/bundle-KIf79auh.js';
 import React__default from 'react';
-import { A as Avatar } from '../chunks/bundle-f1tjVRSh.js';
+import { A as Avatar } from '../chunks/bundle-b2jLXyrm.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-52hs7-M-.js';
-import { u as useLocalization } from '../chunks/bundle-_xgfKjN0.js';
-import { f as format } from '../chunks/bundle-is3QkoNv.js';
-import { i as isToday, a as isYesterday, b as isThisYear } from '../chunks/bundle-6ivjnK_C.js';
-import { i as isVoiceMessage } from '../chunks/bundle-TYsOyvS5.js';
-import { g as getMessageFirstFileUrl, b as getMessageFirstFileName } from '../chunks/bundle-A8dpIXKJ.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-9c5vLDe9.js';
+import { u as useLocalization } from '../chunks/bundle-wpc1Fted.js';
+import { f as format } from '../chunks/bundle-eC1SRuX3.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from '../chunks/bundle-ubVU4exZ.js';
+import { i as isVoiceMessage } from '../chunks/bundle-LTiCF37t.js';
+import { g as getMessageFirstFileUrl, b as getMessageFirstFileName } from '../chunks/bundle-2AR3a1T9.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-TovLF3ih.js';
-import '../chunks/bundle-Jun66RyD.js';
-import '../chunks/bundle-yPhMS1LV.js';
-import '../chunks/bundle-wO0wz3br.js';
-import '../chunks/bundle-U7_j21Ss.js';
+import '../chunks/bundle-DHw1C5gJ.js';
+import '../chunks/bundle-Sl-oiala.js';
+import '../chunks/bundle-XDy3Cf54.js';
+import '../chunks/bundle-wWnN6K3w.js';
+import '../chunks/bundle-PYv4lPO3.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-5fPKUbCn.js';
+import '../chunks/bundle-0QDb7-Y_.js';
 
 function getCreatedAt(_a) {
     var createdAt = _a.createdAt, locale = _a.locale, stringSet = _a.stringSet;