@sendbird/uikit-react 3.13.2-rc.0 → 3.14.0-beta

package/ui/OpenchannelUserMessage.js

@@ -1,38 +1,38 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-aAoUY1dC.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
-import { f as format } from '../chunks/bundle-Dj5aDnzf.js';
-import { A as Avatar } from '../chunks/bundle-CeNRu1nh.js';
+import { f as format } from '../chunks/bundle-BGPVh26h.js';
+import { A as Avatar } from '../chunks/bundle-DyaS04Hg.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-BnG5XETL.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
 import Loader from './Loader.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../chunks/bundle-C8Oe5QOQ.js';
-import { u as useLocalization } from '../chunks/bundle-97fd4oe2.js';
-import { c as copyToClipboard } from '../chunks/bundle-DRpQlFMu.js';
-import { u as uuidv4 } from '../chunks/bundle-CanFPW6u.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-DCXp9q80.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-Cs0ZtBj7.js';
-import { u as useLongPress } from '../chunks/bundle-Cg7eHJV0.js';
-import { d as isEditedMessage } from '../chunks/bundle-CCx8yXVd.js';
-import '../chunks/bundle-jYzea4Ke.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 './ImageRenderer.js';
-import '../chunks/bundle-B4CUv14M.js';
-import '../chunks/bundle-B_5nSVDN.js';
+import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-CWPkjiZ7.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-eNe8jUiS.js';
+import '../chunks/bundle-BydX5Gik.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-CkCkzFFu.js';
+import '../chunks/bundle-C1UCPEjT.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-0Xv23Jlo.js';
+import '../chunks/bundle-VAV0nvVl.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-aAoUY1dC.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
 import React__default, { useContext } from 'react';
-import { L as LocalizationContext } from '../chunks/bundle-97fd4oe2.js';
+import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BnG5XETL.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
 import Loader from './Loader.js';
-import '../chunks/bundle-eNe8jUiS.js';
-import '../chunks/bundle-jYzea4Ke.js';
-import '../chunks/bundle-B4CUv14M.js';
+import '../chunks/bundle-BydX5Gik.js';
+import '../chunks/bundle-CKqBhRZh.js';
+import '../chunks/bundle-Bm9cdQdy.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-BnG5XETL.js';
-import '../chunks/bundle-aAoUY1dC.js';
-import '../chunks/bundle-eNe8jUiS.js';
+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';
 
 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-BnG5XETL.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
 import ImageRenderer from './ImageRenderer.js';
-import { L as LocalizationContext } from '../chunks/bundle-97fd4oe2.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-CCx8yXVd.js';
-import { g as getMessageFirstFileUrl, a as getMessageFirstFileType, b as getMessageFirstFileName } from '../chunks/bundle-BCeNaIWw.js';
-import '../chunks/bundle-aAoUY1dC.js';
-import '../chunks/bundle-B4CUv14M.js';
-import '../chunks/bundle-eNe8jUiS.js';
-import '../chunks/bundle-jYzea4Ke.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 '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-0Xv23Jlo.js';
+import '../chunks/bundle-VAV0nvVl.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-CCx8yXVd.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-BqL00V4c.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BnG5XETL.js';
-import { L as LocalizationContext } from '../chunks/bundle-97fd4oe2.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 ImageRenderer from './ImageRenderer.js';
-import { c as getMessageFirstFileThumbnailUrl, g as getMessageFirstFileUrl, a as getMessageFirstFileType, b as getMessageFirstFileName } from '../chunks/bundle-BCeNaIWw.js';
-import '../chunks/bundle-aAoUY1dC.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 '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-0Xv23Jlo.js';
-import '../chunks/bundle-B4CUv14M.js';
-import '../chunks/bundle-eNe8jUiS.js';
-import '../chunks/bundle-jYzea4Ke.js';
+import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-BydX5Gik.js';
+import '../chunks/bundle-CKqBhRZh.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-aAoUY1dC.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BnG5XETL.js';
-import '../chunks/bundle-eNe8jUiS.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import '../chunks/bundle-BydX5Gik.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-aAoUY1dC.js';
+import { _ as __assign, c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
 import React__default from 'react';
-import { u as useLongPress } from '../chunks/bundle-Cg7eHJV0.js';
-import { n as noop } from '../chunks/bundle-B4CUv14M.js';
-import '../chunks/bundle-Cs0ZtBj7.js';
+import { u as useLongPress } from '../chunks/bundle-D87WTORg.js';
+import { n as noop } from '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-BE9YtwxF.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-aAoUY1dC.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
 import React__default from 'react';
-import { u as uuidv4 } from '../chunks/bundle-CanFPW6u.js';
+import { u as uuidv4 } from '../chunks/bundle-D4vlYCrG.js';
 
 var componentClassName = 'sendbird-sort-by-row';
 function SortByRow(_a) {

package/ui/TemplateMessageItemBody.js

@@ -1,21 +1,23 @@
-import { _ as __assign } from '../chunks/bundle-aAoUY1dC.js';
-import React__default, { useState, useEffect } from 'react';
-import { w as getClassName } from '../chunks/bundle-CCx8yXVd.js';
-import { M as MessageProvider, a as MessageTemplate } from '../chunks/bundle-LUBbQW82.js';
+import { e as __extends, _ as __assign } from '../chunks/bundle-CfcTsxlD.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 { 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-0Xv23Jlo.js';
+import '../chunks/bundle-VAV0nvVl.js';
 import '../withSendbird.js';
-import '../chunks/bundle-97fd4oe2.js';
-import '../chunks/bundle-eNe8jUiS.js';
-import '../chunks/bundle-jYzea4Ke.js';
-import '../chunks/bundle-BnG5XETL.js';
+import '../chunks/bundle-BkNNtN1V.js';
+import '../chunks/bundle-BydX5Gik.js';
+import '../chunks/bundle-CKqBhRZh.js';
+import '../chunks/bundle-33BY7XhN.js';
 import './Loader.js';
 import './Icon.js';
-import '../chunks/bundle-B4CUv14M.js';
+import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-BE9YtwxF.js';
 
 var MessageTemplateWrapper = function (_a) {
     var message = _a.message, templateItems = _a.templateItems;
@@ -78,36 +80,6 @@ function flattenObject(object) {
     return result;
 }
 
-function mapData(_a) {
-    var template = _a.template, source = _a.source;
-    if (!['object', 'string'].includes(typeof template) || !template)
-        return template;
-    var regex = /\{([^}]+)\}/g;
-    var flattenedSource = flattenObject(source);
-    function replaceVariablePlaceholder(value) {
-        return typeof value === 'string'
-            ? value.replace(regex, function (_, placeholder) {
-                var value = flattenedSource[placeholder];
-                return value || "{".concat(placeholder, "}");
-            })
-            : mapData({ template: value, source: source });
-    }
-    if (typeof template === 'string') {
-        return replaceVariablePlaceholder(template);
-    }
-    if (Array.isArray(template)) {
-        return template.map(replaceVariablePlaceholder);
-    }
-    var result = {};
-    for (var key in template) {
-        if (Object.prototype.hasOwnProperty.call(template, key)) {
-            var value = template[key];
-            result[key] = replaceVariablePlaceholder(value);
-        }
-    }
-    return result;
-}
-
 function convertArgbToRgba(string) {
     if (!string.startsWith('#')) {
         return string;
@@ -133,8 +105,8 @@ var splitColorVariables = function (colorVariables) {
             }
             else if (typeof value === 'string') {
                 var _b = value.split(','), lightColor = _b[0], darkColor = _b[1];
-                light[key] = convertArgbToRgba(lightColor);
-                dark[key] = convertArgbToRgba(darkColor || lightColor); // when dark color is not provided, use light color
+                light[key] = lightColor;
+                dark[key] = darkColor || lightColor; // when dark color is not provided, use light color
             }
             else {
                 light[key] = value;
@@ -150,6 +122,69 @@ function selectColorVariablesByTheme(_a) {
     return theme === 'light' ? light : dark;
 }
 
+var COLOR_KEYS = {
+    color: true,
+    tintColor: true,
+    backgroundColor: true,
+    borderColor: true,
+};
+function mapData(_a) {
+    var template = _a.template, source = _a.source;
+    if (!['object', 'string'].includes(typeof template) || !template)
+        return template;
+    var regex = /\{([^}]+)\}/g;
+    var flattenedSource = flattenObject(source);
+    function replaceVariablePlaceholder(value) {
+        return typeof value === 'string'
+            ? value.replace(regex, function (_, placeholder) {
+                var value = flattenedSource[placeholder];
+                return value || "{".concat(placeholder, "}");
+            })
+            : mapData({ template: value, source: source });
+    }
+    if (typeof template === 'string') {
+        return replaceVariablePlaceholder(template);
+    }
+    if (Array.isArray(template)) {
+        return template.map(replaceVariablePlaceholder);
+    }
+    var result = {};
+    for (var key in template) {
+        if (Object.prototype.hasOwnProperty.call(template, key)) {
+            var value = template[key];
+            var replacedVal = replaceVariablePlaceholder(value);
+            if (COLOR_KEYS[key] && typeof replacedVal === 'string') {
+                replacedVal = convertArgbToRgba(replacedVal);
+            }
+            result[key] = replacedVal;
+        }
+    }
+    return result;
+}
+
+var MessageTemplateErrorBoundary = /** @class */ (function (_super) {
+    __extends(MessageTemplateErrorBoundary, _super);
+    function MessageTemplateErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { hasError: false };
+        return _this;
+    }
+    MessageTemplateErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true };
+    };
+    MessageTemplateErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        var _a;
+        (_a = this.props.logger) === null || _a === void 0 ? void 0 : _a.error('Error caught by ErrorBoundary:', error, errorInfo);
+    };
+    MessageTemplateErrorBoundary.prototype.render = function () {
+        if (this.state.hasError) {
+            return this.props.fallbackMessage;
+        }
+        return this.props.children;
+    };
+    return MessageTemplateErrorBoundary;
+}(Component));
+
 var TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES = 500; // It takes about 450ms for isError update
 /**
  * Returns copied message template object filled with given template data and color variables.
@@ -178,54 +213,157 @@ function TemplateMessageItemBody(_a) {
         return React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
     }
     var _f = globalState.utils, getCachedTemplate = _f.getCachedTemplate, updateMessageTemplatesInfo = _f.updateMessageTemplatesInfo;
+    var logger = globalState.config.logger;
     var waitingTemplateKeysMap = globalState.stores.appInfoStore.waitingTemplateKeysMap;
-    var _g = useState(function () {
-        var _a;
-        var cachedTemplate = getCachedTemplate(templateData.key);
-        if (cachedTemplate) {
-            return getFilledMessageTemplateWithData(JSON.parse(cachedTemplate.uiTemplate), (_a = templateData.variables) !== null && _a !== void 0 ? _a : {}, cachedTemplate.colorVariables, theme);
-        }
-        else {
-            return [];
-        }
-    }), filledMessageTemplateItems = _g[0], setFilledMessageTemplateItems = _g[1];
-    var _h = useState(false), isErrored = _h[0], setIsErrored = _h[1];
     var waitingTemplateKeysMapString = Object.entries(waitingTemplateKeysMap)
         .map(function (_a) {
         var key = _a[0], value = _a[1];
-        return [key, value.requestedAt, value.isError].join('-');
-    }).join(',');
-    useEffect(function () {
+        return [key, value.requestedAt, value.erroredMessageIds.join(',')].join('-');
+    }).join('_');
+    var _g = useState(getFilledMessageTemplateItems()), renderData = _g[0], setRenderData = _g[1];
+    function getFilledMessageTemplateItemsForCarouselTemplate(simpleTemplateDataList) {
+        var cachedSimpleTemplates = [];
+        var simpleTemplatesVariables = [];
+        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();
+            }
+            var simpleCachedTemplate = getCachedTemplate(simpleTemplateKey);
+            cachedSimpleTemplates.push(simpleCachedTemplate);
+            simpleTemplatesVariables.push(simpleTemplateData.variables);
+        });
+        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);
+            return filledMessageTemplateItems;
+        });
+        return filledMessageTemplateItemsList;
+    }
+    function getFilledMessageTemplateItemsForSimpleTemplate(templateItems, colorVariables) {
         var _a;
-        // Do not put && !isErrored here in case where errored key is fetched in the future by future message
-        if (filledMessageTemplateItems.length === 0) {
-            var cachedTemplate = getCachedTemplate(templateKey);
-            if (cachedTemplate) {
-                var filledMessageTemplateItems_1 = getFilledMessageTemplateWithData(JSON.parse(cachedTemplate.uiTemplate), (_a = templateData.variables) !== null && _a !== void 0 ? _a : {}, cachedTemplate.colorVariables, theme);
-                setFilledMessageTemplateItems(filledMessageTemplateItems_1);
+        var filledMessageTemplateItems = getFilledMessageTemplateWithData(templateItems, (_a = templateData.variables) !== null && _a !== void 0 ? _a : {}, colorVariables, theme);
+        return [filledMessageTemplateItems];
+    }
+    function getFilledMessageTemplateItems() {
+        var result = {
+            filledMessageTemplateItemsList: [],
+            carouselItem: undefined,
+            isErrored: false,
+        };
+        var nonCachedTemplateKeys = [];
+        var cachedTemplate = getCachedTemplate(templateKey);
+        if (!cachedTemplate) {
+            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 {
+            if (nonCachedTemplateKeys.length > 0) {
+                tryFetchTemplateByKey(nonCachedTemplateKeys);
             }
-            else if (!isErrored) { // This prevents duplicate GET calls by already errored message when a new message with same key is calling GET
-                /**
-                 * Attempt GET template by key IFF one of below cases is met:
-                 * 1. This is the first GET call for the template key.
-                 * 2. Minimum buffer time has passed since the previous GET error.
-                 */
-                var waitingTemplateKeyData = waitingTemplateKeysMap[templateKey];
-                var requestedAt = Date.now();
-                if (!waitingTemplateKeyData
-                    || (requestedAt > waitingTemplateKeyData.requestedAt + TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES)) {
-                    updateMessageTemplatesInfo(templateData.key, Date.now());
+            else {
+                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();
                 }
-                else if (waitingTemplateKeyData && waitingTemplateKeyData.isError) {
-                    setIsErrored(true);
+                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();
+                    }
+                    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();
+                    }
+                    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();
+                    }
+                    result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForCarouselTemplate(simpleTemplateDataList);
+                    result.carouselItem = carouselItem;
+                }
+                else {
+                    result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForSimpleTemplate(parsedUiTemplate, cachedTemplate.colorVariables);
                 }
             }
         }
+        catch (e) {
+            result.isErrored = true;
+        }
+        return result;
+    }
+    useEffect(function () {
+        if (!renderData.isErrored && renderData.filledMessageTemplateItemsList.length === 0) {
+            var newRenderData = getFilledMessageTemplateItems();
+            setRenderData(newRenderData);
+        }
     }, [templateData.key, waitingTemplateKeysMapString]);
-    if (filledMessageTemplateItems.length === 0) {
-        if (isErrored) {
-            return React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+    /**
+     * Attempt GET template by key IFF one of below cases is met:
+     * 1. This is the first GET call for the template key.
+     * 2. Minimum buffer time has passed since the previous GET error.
+     */
+    function tryFetchTemplateByKey(templateKeys) {
+        if (templateKeys.length > 0) {
+            var waitingTemplateKeyDataList_1 = [];
+            templateKeys.forEach(function (templateKey) {
+                var waitingTemplateKeyData = waitingTemplateKeysMap[templateKey];
+                waitingTemplateKeyDataList_1.push([templateKey, waitingTemplateKeyData]);
+            });
+            var requestedAt_1 = Date.now();
+            var keysToUpdate_1 = [];
+            waitingTemplateKeyDataList_1.forEach(function (_a) {
+                var templateKey = _a[0], waitingTemplateKeyData = _a[1];
+                if (!waitingTemplateKeyData
+                    || (waitingTemplateKeyData.erroredMessageIds.indexOf(message.messageId) === -1
+                        && requestedAt_1 > waitingTemplateKeyData.requestedAt + TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES)) {
+                    keysToUpdate_1.push(templateKey);
+                }
+                else if (waitingTemplateKeyData.erroredMessageIds.indexOf(message.messageId) > -1) {
+                    throw new Error();
+                }
+            });
+            if (keysToUpdate_1.length > 0) {
+                updateMessageTemplatesInfo(keysToUpdate_1, message.messageId, requestedAt_1);
+            }
         }
+    }
+    if (renderData.isErrored) {
+        return React__default.createElement(FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+    }
+    if (renderData.filledMessageTemplateItemsList.length === 0) {
         return React__default.createElement(LoadingTemplateMessageItemBody, { className: className, isByMe: isByMe });
     }
     return (React__default.createElement("div", { className: getClassName([
@@ -233,7 +371,9 @@ function TemplateMessageItemBody(_a) {
             isByMe ? 'outgoing' : 'incoming',
             'sendbird-template-message-item-body',
         ]) },
-        React__default.createElement(MessageTemplateWrapper, { message: message, templateItems: filledMessageTemplateItems })));
+        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 }))));
 }
 
 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-aAoUY1dC.js';
+import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-C5ygMhyk.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-DaAps-h8.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;

package/ui/TextMessageItemBody.js

@@ -1,16 +1,16 @@
 import React__default, { useContext, useMemo } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BnG5XETL.js';
-import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-CCx8yXVd.js';
-import { L as LocalizationContext } from '../chunks/bundle-97fd4oe2.js';
-import { t as tokenizeMessage } from '../chunks/bundle-Bjr0f1Zp.js';
-import { T as TextFragment } from '../chunks/bundle-CQhhBQgY.js';
-import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-B4EY2YKu.js';
-import '../chunks/bundle-aAoUY1dC.js';
-import '../chunks/bundle-eNe8jUiS.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-BqL00V4c.js';
+import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
+import { t as tokenizeMessage } from '../chunks/bundle-CquJpe2n.js';
+import { T as TextFragment } from '../chunks/bundle-DzD5ZPeu.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-DfhDmd9y.js';
+import '../chunks/bundle-CfcTsxlD.js';
+import '../chunks/bundle-BydX5Gik.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-0Xv23Jlo.js';
-import '../chunks/bundle-jYzea4Ke.js';
+import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-CKqBhRZh.js';
 import '../Message/context.js';
 import './MentionLabel.js';
 import './ContextMenu.js';
@@ -18,15 +18,15 @@ import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-CanFPW6u.js';
+import '../chunks/bundle-D4vlYCrG.js';
 import './UserProfile.js';
-import '../chunks/bundle-C8Oe5QOQ.js';
+import '../chunks/bundle-B0A-GTy2.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-CkCkzFFu.js';
-import '../chunks/bundle-B4CUv14M.js';
-import '../chunks/bundle-CeNRu1nh.js';
+import '../chunks/bundle-C1UCPEjT.js';
+import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-DyaS04Hg.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-B_5nSVDN.js';
+import '../chunks/bundle-CWPkjiZ7.js';
 import './Icon.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';