@sendbird/uikit-react 3.14.0-beta → 3.14.0

package/ui/OpenchannelThumbnailMessage.js

@@ -1,34 +1,34 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcfVkxG.js';
 import React__default, { useContext, useState, useRef, useMemo, useEffect } from 'react';
-import { f as format } from '../chunks/bundle-BGPVh26h.js';
-import { u as useLocalization } from '../chunks/bundle-BkNNtN1V.js';
-import { A as Avatar } from '../chunks/bundle-DyaS04Hg.js';
+import { f as format } from '../chunks/bundle-Ba74MVBa.js';
+import { u as useLocalization } from '../chunks/bundle-Bsg3ZeXI.js';
+import { A as Avatar } from '../chunks/bundle-vsdOwl6R.js';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconColors, IconTypes } from './Icon.js';
 import IconButton from './IconButton.js';
 import ImageRenderer from './ImageRenderer.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-D81rUAiK.js';
 import Loader from './Loader.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../chunks/bundle-B0A-GTy2.js';
-import { g as getSenderFromMessage, b as isFineResend, s as showMenuTrigger, c as isFineDelete, O as OpenChannelMobileMenu, f as checkIsSent, d as checkIsPending, e as checkIsFailed } from '../chunks/bundle-tL7Z4efR.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-BE9YtwxF.js';
-import { u as useLongPress } from '../chunks/bundle-D87WTORg.js';
-import '../chunks/bundle-CKqBhRZh.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CWPkjiZ7.js';
+import { a as UserProfileContext } from '../chunks/bundle-CwINP854.js';
+import { g as getSenderFromMessage, b as isFineResend, s as showMenuTrigger, c as isFineDelete, O as OpenChannelMobileMenu, f as checkIsSent, d as checkIsPending, e as checkIsFailed } from '../chunks/bundle--v2l79xO.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-CuD6w3tY.js';
+import { u as useLongPress } from '../chunks/bundle-CvZD4CjF.js';
+import '../chunks/bundle-BFdttAaW.js';
+import '../chunks/bundle-KeJ_rVJL.js';
+import '../chunks/bundle-DF_LuHdb.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-D4vlYCrG.js';
-import '../chunks/bundle-BqL00V4c.js';
+import '../chunks/bundle-CFYZBlok.js';
+import '../chunks/bundle-FVThTEKh.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
-import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-BubacXNL.js';
+import '../chunks/bundle-rA2Y0qFJ.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-C1UCPEjT.js';
+import '../chunks/bundle-CaYPuZ9G.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';

package/ui/OpenchannelUserMessage.js

@@ -1,38 +1,38 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcfVkxG.js';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
-import { f as format } from '../chunks/bundle-BGPVh26h.js';
-import { A as Avatar } from '../chunks/bundle-DyaS04Hg.js';
+import { f as format } from '../chunks/bundle-Ba74MVBa.js';
+import { A as Avatar } from '../chunks/bundle-vsdOwl6R.js';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-D81rUAiK.js';
 import Loader from './Loader.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../chunks/bundle-B0A-GTy2.js';
-import { u as useLocalization } from '../chunks/bundle-BkNNtN1V.js';
-import { c as copyToClipboard } from '../chunks/bundle-7DqcfMUP.js';
-import { u as uuidv4 } from '../chunks/bundle-D4vlYCrG.js';
-import { g as getSenderFromMessage, s as showMenuTrigger, i as isFineCopy, a as isFineEdit, b as isFineResend, c as isFineDelete, O as OpenChannelMobileMenu, d as checkIsPending, e as checkIsFailed } from '../chunks/bundle-tL7Z4efR.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-BE9YtwxF.js';
-import { u as useLongPress } from '../chunks/bundle-D87WTORg.js';
-import { d as isEditedMessage } from '../chunks/bundle-BqL00V4c.js';
-import '../chunks/bundle-CKqBhRZh.js';
+import { a as UserProfileContext } from '../chunks/bundle-CwINP854.js';
+import { u as useLocalization } from '../chunks/bundle-Bsg3ZeXI.js';
+import { c as copyToClipboard } from '../chunks/bundle-YaC569om.js';
+import { u as uuidv4 } from '../chunks/bundle-CFYZBlok.js';
+import { g as getSenderFromMessage, s as showMenuTrigger, i as isFineCopy, a as isFineEdit, b as isFineResend, c as isFineDelete, O as OpenChannelMobileMenu, d as checkIsPending, e as checkIsFailed } from '../chunks/bundle--v2l79xO.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-CuD6w3tY.js';
+import { u as useLongPress } from '../chunks/bundle-CvZD4CjF.js';
+import { d as isEditedMessage } from '../chunks/bundle-FVThTEKh.js';
+import '../chunks/bundle-BFdttAaW.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-CWPkjiZ7.js';
+import '../chunks/bundle-rA2Y0qFJ.js';
+import '../chunks/bundle-DF_LuHdb.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-BydX5Gik.js';
+import '../chunks/bundle-KeJ_rVJL.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-C1UCPEjT.js';
+import '../chunks/bundle-CaYPuZ9G.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-BubacXNL.js';
 
 function OpenchannelUserMessage(_a) {
     var className = _a.className, message = _a.message, isOperator = _a.isOperator, _b = _a.isEphemeral, isEphemeral = _b === void 0 ? false : _b, userId = _a.userId, resendMessage = _a.resendMessage, disabled = _a.disabled, showEdit = _a.showEdit, showRemove = _a.showRemove, chainTop = _a.chainTop;

package/ui/PlaceHolder.js

@@ -1,12 +1,12 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcfVkxG.js';
 import React__default, { useContext } from 'react';
-import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
+import { L as LocalizationContext } from '../chunks/bundle-Bsg3ZeXI.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-D81rUAiK.js';
 import Loader from './Loader.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
-import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-KeJ_rVJL.js';
+import '../chunks/bundle-BFdttAaW.js';
+import '../chunks/bundle-rA2Y0qFJ.js';
 
 var PlaceHolderTypes = {
     LOADING: 'LOADING',

package/ui/PlaybackTime.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { a as LabelTypography, b as LabelColors, L as Label } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-CfcTsxlD.js';
-import '../chunks/bundle-BydX5Gik.js';
+import { a as LabelTypography, b as LabelColors, L as Label } from '../chunks/bundle-D81rUAiK.js';
+import '../chunks/bundle-CfcfVkxG.js';
+import '../chunks/bundle-KeJ_rVJL.js';
 
 var PlaybackTime = function (_a) {
     var className = _a.className, _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.labelType, labelType = _c === void 0 ? LabelTypography.CAPTION_2 : _c, _d = _a.labelColor, labelColor = _d === void 0 ? LabelColors.ONCONTENT_1 : _d;

package/ui/QuoteMessage.js

@@ -1,17 +1,17 @@
 import React__default, { useContext, useState } from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-D81rUAiK.js';
 import ImageRenderer from './ImageRenderer.js';
-import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
-import { z as getUIKitFileTypes, w as getClassName, l as isUserMessage, i as isVoiceMessage, p as isThumbnailMessage, c as isMultipleFilesMessage, j as isVideo, A as isGif, m as getUIKitMessageType, U as UIKitMessageTypes, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-BqL00V4c.js';
-import { g as getMessageFirstFileUrl, a as getMessageFirstFileType, b as getMessageFirstFileName } from '../chunks/bundle-Cbag41eX.js';
-import '../chunks/bundle-CfcTsxlD.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
+import { L as LocalizationContext } from '../chunks/bundle-Bsg3ZeXI.js';
+import { z as getUIKitFileTypes, w as getClassName, l as isUserMessage, i as isVoiceMessage, p as isThumbnailMessage, c as isMultipleFilesMessage, j as isVideo, A as isGif, m as getUIKitMessageType, U as UIKitMessageTypes, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-FVThTEKh.js';
+import { g as getMessageFirstFileUrl, a as getMessageFirstFileType, b as getMessageFirstFileName } from '../chunks/bundle-BjWhPiF7.js';
+import '../chunks/bundle-CfcfVkxG.js';
+import '../chunks/bundle-rA2Y0qFJ.js';
+import '../chunks/bundle-KeJ_rVJL.js';
+import '../chunks/bundle-BFdttAaW.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-BubacXNL.js';
 
 function QuoteMessage(_a) {
     var _b;

package/ui/QuoteMessageInput.js

@@ -1,17 +1,17 @@
 import React__default, { useContext } from 'react';
-import { b as isFileMessage, c as isMultipleFilesMessage, i as isVoiceMessage, I as isImageMessage, r as isVideoMessage, J as isImageFileInfo, p as isThumbnailMessage, K as isAudioMessage, w as getClassName, s as isGifMessage, l as isUserMessage, m as getUIKitMessageType, U as UIKitMessageTypes } from '../chunks/bundle-BqL00V4c.js';
+import { b as isFileMessage, c as isMultipleFilesMessage, i as isVoiceMessage, I as isImageMessage, r as isVideoMessage, J as isImageFileInfo, p as isThumbnailMessage, K as isAudioMessage, w as getClassName, s as isGifMessage, l as isUserMessage, m as getUIKitMessageType, U as UIKitMessageTypes } from '../chunks/bundle-FVThTEKh.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-D81rUAiK.js';
+import { L as LocalizationContext } from '../chunks/bundle-Bsg3ZeXI.js';
 import ImageRenderer from './ImageRenderer.js';
-import { c as getMessageFirstFileThumbnailUrl, g as getMessageFirstFileUrl, a as getMessageFirstFileType, b as getMessageFirstFileName } from '../chunks/bundle-Cbag41eX.js';
-import '../chunks/bundle-CfcTsxlD.js';
+import { c as getMessageFirstFileThumbnailUrl, g as getMessageFirstFileUrl, a as getMessageFirstFileType, b as getMessageFirstFileName } from '../chunks/bundle-BjWhPiF7.js';
+import '../chunks/bundle-CfcfVkxG.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
+import '../chunks/bundle-BubacXNL.js';
+import '../chunks/bundle-rA2Y0qFJ.js';
+import '../chunks/bundle-KeJ_rVJL.js';
+import '../chunks/bundle-BFdttAaW.js';
 
 var componentClassname = 'sendbird-quote_message_input__avatar';
 function QuoteMessageThumbnail(_a) {

package/ui/ReactionBadge.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcfVkxG.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-BydX5Gik.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-D81rUAiK.js';
+import '../chunks/bundle-KeJ_rVJL.js';
 
 var ReactionBadge = React__default.forwardRef(function (props, ref) {
     var _a = props.className, className = _a === void 0 ? '' : _a, children = props.children, _b = props.count, count = _b === void 0 ? '' : _b, _c = props.isAdd, isAdd = _c === void 0 ? false : _c, _d = props.selected, selected = _d === void 0 ? false : _d, _e = props.onClick, onClick = _e === void 0 ? function () { } : _e;

package/ui/ReactionButton.js

@@ -1,8 +1,8 @@
-import { _ as __assign, c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { _ as __assign, c as __spreadArray } from '../chunks/bundle-CfcfVkxG.js';
 import React__default from 'react';
-import { u as useLongPress } from '../chunks/bundle-D87WTORg.js';
-import { n as noop } from '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-BE9YtwxF.js';
+import { u as useLongPress } from '../chunks/bundle-CvZD4CjF.js';
+import { n as noop } from '../chunks/bundle-rA2Y0qFJ.js';
+import '../chunks/bundle-CuD6w3tY.js';
 
 var ReactionButton = React__default.forwardRef(function (props, ref) {
     var className = props.className, width = props.width, height = props.height, selected = props.selected, _a = props.dataSbId, dataSbId = _a === void 0 ? '' : _a, onClick = props.onClick, children = props.children;

package/ui/SortByRow.js

@@ -1,6 +1,6 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcfVkxG.js';
 import React__default from 'react';
-import { u as uuidv4 } from '../chunks/bundle-D4vlYCrG.js';
+import { u as uuidv4 } from '../chunks/bundle-CFYZBlok.js';
 
 var componentClassName = 'sendbird-sort-by-row';
 function SortByRow(_a) {

package/ui/TemplateMessageItemBody.js

@@ -1,28 +1,26 @@
-import { e as __extends, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { e as __extends, _ as __assign } from '../chunks/bundle-CfcfVkxG.js';
 import React__default, { Component, useState, useEffect } from 'react';
-import { X as startsWithAtAndEndsWithBraces, Y as removeAtAndBraces, w as getClassName } from '../chunks/bundle-BqL00V4c.js';
-import { M as MessageProvider, a as MessageTemplate } from '../chunks/bundle-Byxn68mh.js';
+import { X as startsWithAtAndEndsWithBraces, Y as removeAtAndBraces, w as getClassName } from '../chunks/bundle-FVThTEKh.js';
+import { M as MessageProvider, a as MessageTemplate, C as CompositeComponentType } from '../chunks/bundle-DoqoSCJx.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { FallbackTemplateMessageItemBody } from './FallbackTemplateMessageItemBody.tsx.js';
 import { LoadingTemplateMessageItemBody } from './LoadingTemplateMessageItemBody.tsx.js';
-import { Carousel } from './Carousel.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-BubacXNL.js';
 import '../withSendbird.js';
-import '../chunks/bundle-BkNNtN1V.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
-import '../chunks/bundle-33BY7XhN.js';
+import '../chunks/bundle-Bsg3ZeXI.js';
+import '../chunks/bundle-KeJ_rVJL.js';
+import '../chunks/bundle-BFdttAaW.js';
+import '../chunks/bundle-D81rUAiK.js';
 import './Loader.js';
 import './Icon.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-BE9YtwxF.js';
+import '../chunks/bundle-rA2Y0qFJ.js';
 
 var MessageTemplateWrapper = function (_a) {
-    var message = _a.message, templateItems = _a.templateItems;
+    var message = _a.message, templateVersion = _a.templateVersion, templateItems = _a.templateItems;
     return React__default.createElement(MessageProvider, { message: message },
-        React__default.createElement(MessageTemplate, { templateItems: templateItems }));
+        React__default.createElement(MessageTemplate, { templateVersion: templateVersion, templateItems: templateItems }));
 };
 
 var NumberValueKeys = [
@@ -178,8 +176,10 @@ var MessageTemplateErrorBoundary = /** @class */ (function (_super) {
     };
     MessageTemplateErrorBoundary.prototype.render = function () {
         if (this.state.hasError) {
+            this.props.onTemplateMessageRenderedCallback('failed');
             return this.props.fallbackMessage;
         }
+        this.props.onTemplateMessageRenderedCallback(this.props.isComposite ? 'composite' : 'simple');
         return this.props.children;
     };
     return MessageTemplateErrorBoundary;
@@ -189,30 +189,39 @@ var TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES = 500; // It takes about 450ms f
 /**
  * Returns copied message template object filled with given template data and color variables.
  */
-var getFilledMessageTemplateWithData = function (template, templateData, colorVariables, theme) {
-    var selectedThemeColorVariables = selectColorVariablesByTheme({
-        colorVariables: colorVariables,
-        theme: theme,
-    });
+var getFilledMessageTemplateWithData = function (_a) {
+    var template = _a.template, _b = _a.templateData, templateData = _b === void 0 ? {} : _b, colorVariables = _a.colorVariables, theme = _a.theme;
+    var selectedThemeColorVariables = {};
+    if (colorVariables && theme) {
+        selectedThemeColorVariables = selectColorVariablesByTheme({
+            colorVariables: colorVariables,
+            theme: theme,
+        });
+    }
+    var source = __assign(__assign({}, templateData), selectedThemeColorVariables);
     var parsedTemplate = mapData({
         template: restoreNumbersFromMessageTemplateObject(template),
-        source: __assign(__assign({}, templateData), selectedThemeColorVariables),
+        source: source,
     });
     return parsedTemplate;
 };
 function TemplateMessageItemBody(_a) {
     var _b;
-    var _c = _a.className, className = _c === void 0 ? '' : _c, message = _a.message, _d = _a.isByMe, isByMe = _d === void 0 ? false : _d, _e = _a.theme, theme = _e === void 0 ? 'light' : _e;
+    var _c = _a.className, className = _c === void 0 ? '' : _c, message = _a.message, _d = _a.isByMe, isByMe = _d === void 0 ? false : _d, _e = _a.theme, theme = _e === void 0 ? 'light' : _e, _f = _a.onTemplateMessageRenderedCallback, onTemplateMessageRenderedCallback = _f === void 0 ? function () { } : _f;
     var templateData = (_b = message.extendedMessagePayload) === null || _b === void 0 ? void 0 : _b['template'];
-    if (!(templateData === null || templateData === void 0 ? void 0 : templateData.key)) {
+    var getFailedBody = function () {
+        onTemplateMessageRenderedCallback('failed');
         return React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+    };
+    if (!(templateData === null || templateData === void 0 ? void 0 : templateData.key)) {
+        return getFailedBody();
     }
     var templateKey = templateData.key;
     var globalState = useSendbirdStateContext();
     if (!globalState) {
-        return React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+        return getFailedBody();
     }
-    var _f = globalState.utils, getCachedTemplate = _f.getCachedTemplate, updateMessageTemplatesInfo = _f.updateMessageTemplatesInfo;
+    var _g = globalState.utils, getCachedTemplate = _g.getCachedTemplate, updateMessageTemplatesInfo = _g.updateMessageTemplatesInfo;
     var logger = globalState.config.logger;
     var waitingTemplateKeysMap = globalState.stores.appInfoStore.waitingTemplateKeysMap;
     var waitingTemplateKeysMapString = Object.entries(waitingTemplateKeysMap)
@@ -220,38 +229,66 @@ function TemplateMessageItemBody(_a) {
         var key = _a[0], value = _a[1];
         return [key, value.requestedAt, value.erroredMessageIds.join(',')].join('-');
     }).join('_');
-    var _g = useState(getFilledMessageTemplateItems()), renderData = _g[0], setRenderData = _g[1];
-    function getFilledMessageTemplateItemsForCarouselTemplate(simpleTemplateDataList) {
+    var _h = useState(getFilledMessageTemplateItems()), renderData = _h[0], setRenderData = _h[1];
+    function getFilledMessageTemplateItemsForCarouselTemplateByMessagePayload(simpleTemplateDataList) {
         var cachedSimpleTemplates = [];
         var simpleTemplatesVariables = [];
+        var maxVersion = 0;
         simpleTemplateDataList.forEach(function (simpleTemplateData) {
             var simpleTemplateKey = simpleTemplateData.key;
             if (!simpleTemplateKey) {
                 logger.error('TemplateMessageItemBody | simple template keys are not found in view_variables: ', simpleTemplateDataList);
-                throw new Error();
+                throw new Error('TemplateMessageItemBody | simple template keys are not found in view_variables.');
             }
             var simpleCachedTemplate = getCachedTemplate(simpleTemplateKey);
             cachedSimpleTemplates.push(simpleCachedTemplate);
             simpleTemplatesVariables.push(simpleTemplateData.variables);
+            maxVersion = Math.max(maxVersion, simpleCachedTemplate.version);
         });
         var filledMessageTemplateItemsList = cachedSimpleTemplates
             .map(function (cachedSimpleTemplate, index) {
-            var _a;
             var templateItems = JSON.parse(cachedSimpleTemplate.uiTemplate);
-            var filledMessageTemplateItems = getFilledMessageTemplateWithData(templateItems, (_a = simpleTemplatesVariables[index]) !== null && _a !== void 0 ? _a : {}, cachedSimpleTemplate.colorVariables, theme);
+            var filledMessageTemplateItems = getFilledMessageTemplateWithData({
+                template: templateItems,
+                templateData: simpleTemplatesVariables[index],
+                colorVariables: cachedSimpleTemplate.colorVariables,
+                theme: theme,
+            });
             return filledMessageTemplateItems;
         });
-        return filledMessageTemplateItemsList;
+        return {
+            maxVersion: maxVersion,
+            filledTemplates: filledMessageTemplateItemsList,
+        };
+    }
+    function getFilledMessageTemplateItemsForCarouselTemplate(uiTemplates) {
+        var maxVersion = 0;
+        var filledTemplates = [];
+        uiTemplates.forEach(function (uiTemplate) {
+            maxVersion = Math.max(maxVersion, uiTemplate.version);
+            var filledMessageTemplateItems = getFilledMessageTemplateWithData({
+                template: uiTemplate.body.items,
+            });
+            filledTemplates.push(filledMessageTemplateItems);
+        });
+        return {
+            maxVersion: maxVersion,
+            filledTemplates: filledTemplates,
+        };
     }
     function getFilledMessageTemplateItemsForSimpleTemplate(templateItems, colorVariables) {
         var _a;
-        var filledMessageTemplateItems = getFilledMessageTemplateWithData(templateItems, (_a = templateData.variables) !== null && _a !== void 0 ? _a : {}, colorVariables, theme);
-        return [filledMessageTemplateItems];
+        var filledMessageTemplateItems = getFilledMessageTemplateWithData({
+            template: templateItems,
+            templateData: (_a = templateData === null || templateData === void 0 ? void 0 : templateData.variables) !== null && _a !== void 0 ? _a : {},
+            colorVariables: colorVariables,
+            theme: theme,
+        });
+        return filledMessageTemplateItems;
     }
     function getFilledMessageTemplateItems() {
         var result = {
             filledMessageTemplateItemsList: [],
-            carouselItem: undefined,
             isErrored: false,
         };
         var nonCachedTemplateKeys = [];
@@ -260,20 +297,25 @@ function TemplateMessageItemBody(_a) {
             nonCachedTemplateKeys.push(templateKey);
         }
         if (templateData.view_variables) {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            Object.entries(templateData.view_variables).forEach(function (_a) {
-                _a[0]; var simpleTemplateDataList = _a[1];
-                simpleTemplateDataList.forEach(function (simpleTemplateData) {
-                    var simpleTemplateKey = simpleTemplateData === null || simpleTemplateData === void 0 ? void 0 : simpleTemplateData.key;
-                    if (simpleTemplateKey) {
-                        if (!getCachedTemplate(simpleTemplateKey)) {
-                            if (simpleTemplateKey && nonCachedTemplateKeys.indexOf(simpleTemplateKey) === -1) {
-                                nonCachedTemplateKeys.push(simpleTemplateKey);
-                            }
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                Object.entries(templateData.view_variables).forEach(function (_a) {
+                    var _ = _a[0], simpleTemplateDataList = _a[1];
+                    simpleTemplateDataList.forEach(function (simpleTemplateData) {
+                        var simpleTemplateKey = simpleTemplateData === null || simpleTemplateData === void 0 ? void 0 : simpleTemplateData.key;
+                        if (simpleTemplateKey
+                            && !getCachedTemplate(simpleTemplateKey)
+                            && !nonCachedTemplateKeys.includes(simpleTemplateKey)) {
+                            nonCachedTemplateKeys.push(simpleTemplateKey);
                         }
-                    }
+                    });
                 });
-            });
+            }
+            catch (e) {
+                logger.error('TemplateMessageItemBody | received view_variables is malformed: ', templateData);
+                result.isErrored = true;
+                return result;
+            }
         }
         try {
             if (nonCachedTemplateKeys.length > 0) {
@@ -283,38 +325,67 @@ function TemplateMessageItemBody(_a) {
                 var parsedUiTemplate = JSON.parse(cachedTemplate.uiTemplate);
                 if (!Array.isArray(parsedUiTemplate) || parsedUiTemplate.length === 0) {
                     logger.error('TemplateMessageItemBody | parsed template is missing ui_template: ', parsedUiTemplate);
-                    throw new Error();
+                    throw new Error('TemplateMessageItemBody | parsed template is missing ui_template. See error log in console for details');
                 }
-                if (templateData.view_variables
-                    || parsedUiTemplate[0].type === 'carouselView'
-                    || typeof parsedUiTemplate[0]['items'] === 'string'
-                    || parsedUiTemplate[0]['spacing']) {
-                    if (!templateData.view_variables) {
-                        logger.error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables: ', templateKey, templateData);
-                        throw new Error();
-                    }
+                /**
+                 * Composite template validation
+                 */
+                if (parsedUiTemplate[0].type === CompositeComponentType.Carousel) {
                     var carouselItem = parsedUiTemplate[0];
-                    if (carouselItem.type !== 'carouselView'
-                        || typeof carouselItem.items !== 'string'
-                        || !startsWithAtAndEndsWithBraces(carouselItem.items)
-                        || !carouselItem.spacing) {
-                        logger.error('TemplateMessageItemBody | composite template is malformed: ', templateKey, carouselItem);
-                        throw new Error();
-                    }
                     if (parsedUiTemplate.length > 1) { // TODO: in future, support multiple templates
                         logger.error('TemplateMessageItemBody | composite template currently does not support multiple items: ', parsedUiTemplate);
-                        throw new Error();
+                        throw new Error('TemplateMessageItemBody | composite template currently does not support multiple items. See error log in console for details');
                     }
-                    var reservationKey = removeAtAndBraces(carouselItem.items);
-                    var simpleTemplateDataList = templateData.view_variables[reservationKey];
-                    if (!simpleTemplateDataList) {
-                        logger.error('TemplateMessageItemBody | no reservation key found in view_variables: ', reservationKey, templateData.view_variables);
-                        throw new Error();
+                    if (typeof carouselItem.items === 'string') {
+                        if (!startsWithAtAndEndsWithBraces(carouselItem.items)) {
+                            logger.error('TemplateMessageItemBody | composite template with reservation key must follow the following string format "{@your-reservation-key}": ', templateKey, carouselItem);
+                            throw new Error('TemplateMessageItemBody | composite template with reservation key must follow the following string format "{@your-reservation-key}". See error log in console for details');
+                        }
+                        if (!templateData.view_variables) {
+                            logger.error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables: ', templateKey, templateData);
+                            throw new Error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables. See error log in console for details');
+                        }
+                        var reservationKey = removeAtAndBraces(carouselItem.items);
+                        var simpleTemplateDataList = templateData.view_variables[reservationKey];
+                        if (!simpleTemplateDataList) {
+                            logger.error('TemplateMessageItemBody | no reservation key found in view_variables: ', reservationKey, templateData.view_variables);
+                            throw new Error('TemplateMessageItemBody | no reservation key found in view_variables. See error log in console for details');
+                        }
+                        if (simpleTemplateDataList.length > 10) {
+                            logger.warning('TemplateMessageItemBody | composite template with more than 10 simple templates will only render the first 10 items: ', reservationKey, templateData.view_variables);
+                            simpleTemplateDataList = simpleTemplateDataList.slice(0, 10);
+                        }
+                        var _a = getFilledMessageTemplateItemsForCarouselTemplateByMessagePayload(simpleTemplateDataList), maxVersion = _a.maxVersion, filledTemplates = _a.filledTemplates;
+                        result.isComposite = true;
+                        result.templateVersion = Math.max(cachedTemplate.version, maxVersion);
+                        result.filledMessageTemplateItemsList = [{
+                                type: carouselItem.type,
+                                spacing: carouselItem.spacing,
+                                items: filledTemplates,
+                            }];
+                    }
+                    else if (Array.isArray(carouselItem.items)) {
+                        var simpleTemplates = carouselItem.items;
+                        if (carouselItem.items.length > 10) {
+                            logger.warning('TemplateMessageItemBody | composite template with more than 10 simple templates will only render the first 10 items: ', carouselItem);
+                            simpleTemplates = carouselItem.items.slice(0, 10);
+                        }
+                        var _b = getFilledMessageTemplateItemsForCarouselTemplate(simpleTemplates), maxVersion = _b.maxVersion, filledTemplates = _b.filledTemplates;
+                        result.isComposite = true;
+                        result.templateVersion = Math.max(cachedTemplate.version, maxVersion);
+                        result.filledMessageTemplateItemsList = [{
+                                type: carouselItem.type,
+                                spacing: carouselItem.spacing,
+                                items: filledTemplates,
+                            }];
+                    }
+                    else {
+                        logger.error('TemplateMessageItemBody | composite template is malformed: ', templateKey, carouselItem);
+                        throw new Error('TemplateMessageItemBody | composite template is malformed. See error log in console for details');
                     }
-                    result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForCarouselTemplate(simpleTemplateDataList);
-                    result.carouselItem = carouselItem;
                 }
                 else {
+                    result.templateVersion = cachedTemplate.version;
                     result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForSimpleTemplate(parsedUiTemplate, cachedTemplate.colorVariables);
                 }
             }
@@ -352,7 +423,7 @@ function TemplateMessageItemBody(_a) {
                     keysToUpdate_1.push(templateKey);
                 }
                 else if (waitingTemplateKeyData.erroredMessageIds.indexOf(message.messageId) > -1) {
-                    throw new Error();
+                    throw new Error("TemplateMessageItemBody | fetching template key ".concat(templateKey, " for messageId: ").concat(message.messageId, " has failed."));
                 }
             });
             if (keysToUpdate_1.length > 0) {
@@ -361,7 +432,7 @@ function TemplateMessageItemBody(_a) {
         }
     }
     if (renderData.isErrored) {
-        return React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+        return getFailedBody();
     }
     if (renderData.filledMessageTemplateItemsList.length === 0) {
         return React__default.createElement(LoadingTemplateMessageItemBody, { className: className, isByMe: isByMe });
@@ -371,9 +442,8 @@ function TemplateMessageItemBody(_a) {
             isByMe ? 'outgoing' : 'incoming',
             'sendbird-template-message-item-body',
         ]) },
-        React__default.createElement(MessageTemplateErrorBoundary, { fallbackMessage: React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe }), logger: logger }, !renderData.carouselItem
-            ? React__default.createElement(MessageTemplateWrapper, { message: message, templateItems: renderData.filledMessageTemplateItemsList[0] })
-            : React__default.createElement(Carousel, { id: message.messageId + '', items: renderData.filledMessageTemplateItemsList.map(function (filledMessageTemplateItems, i) { return (React__default.createElement(MessageTemplateWrapper, { key: "".concat(message.messageId, "-").concat(i), message: message, templateItems: filledMessageTemplateItems })); }), gap: renderData.carouselItem.spacing }))));
+        React__default.createElement(MessageTemplateErrorBoundary, { fallbackMessage: React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe }), onTemplateMessageRenderedCallback: onTemplateMessageRenderedCallback, isComposite: renderData.isComposite, logger: logger },
+            React__default.createElement(MessageTemplateWrapper, { message: message, templateVersion: renderData.templateVersion, templateItems: renderData.filledMessageTemplateItemsList }))));
 }
 
 export { TemplateMessageItemBody, TemplateMessageItemBody as default };

package/ui/TemplateMessageItemBody.js.map

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

package/ui/TextButton.js

@@ -1,6 +1,6 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcfVkxG.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-DaAps-h8.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-BUC4DRq0.js';
 
 var TextButton = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? Colors.ONBACKGROUND_1 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableUnderline, disableUnderline = _e === void 0 ? false : _e, _f = _a.onClick, onClick = _f === void 0 ? function () { } : _f, children = _a.children;