@sendbird/uikit-react 3.12.0 → 3.13.0

package/cjs/ui/OpenchannelOGMessage.js

@@ -1,38 +1,38 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-POnqXMLV.js');
-var ui_Avatar = require('../chunks/bundle-lZm_4ToV.js');
+var index$1 = require('../chunks/bundle-DsdDiOQc.js');
+var ui_Avatar = require('../chunks/bundle-Sxjv83JD.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_LinkLabel = require('./LinkLabel.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-bSoYSPA5.js');
-var uuid = require('../chunks/bundle-fWvwYg6I.js');
-var utils = require('../chunks/bundle-GYpm7RtY.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
-var index = require('../chunks/bundle-CQGJhJYV.js');
-var MediaQueryContext = require('../chunks/bundle-eg639gtv.js');
-var useLongPress = require('../chunks/bundle-ivu3uDBu.js');
-var index$2 = require('../chunks/bundle-yyOx7Krk.js');
-var tokenize = require('../chunks/bundle-Ulv5XabQ.js');
-require('../chunks/bundle-HQUEIVST.js');
-require('../chunks/bundle-jI4fSOuZ.js');
+var UserProfileContext = require('../chunks/bundle-bOij3dXU.js');
+var uuid = require('../chunks/bundle-5zZ25-q8.js');
+var utils = require('../chunks/bundle-tMR11mG8.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
+var index = require('../chunks/bundle-WALfBkn-.js');
+var MediaQueryContext = require('../chunks/bundle-UOOPIGjG.js');
+var useLongPress = require('../chunks/bundle-eVmdXbX4.js');
+var index$2 = require('../chunks/bundle-_1OqWxYy.js');
+var tokenize = require('../chunks/bundle-QvRptclZ.js');
+require('../chunks/bundle-qYN98FNj.js');
+require('../chunks/bundle-xbuS1NJI.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-JutD2hKN.js');
+require('../chunks/bundle-Gw-7KmmG.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
-require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-do_4Y2S_.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-xtUT3duD.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-2QTmv8Qr.js');
+require('../chunks/bundle-1BET8ZYY.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');

package/cjs/ui/OpenchannelThumbnailMessage.js

@@ -1,34 +1,34 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-POnqXMLV.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
-var ui_Avatar = require('../chunks/bundle-lZm_4ToV.js');
+var index$1 = require('../chunks/bundle-DsdDiOQc.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
+var ui_Avatar = require('../chunks/bundle-Sxjv83JD.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-bSoYSPA5.js');
-var index = require('../chunks/bundle-CQGJhJYV.js');
-var MediaQueryContext = require('../chunks/bundle-eg639gtv.js');
-var useLongPress = require('../chunks/bundle-ivu3uDBu.js');
-require('../chunks/bundle-HQUEIVST.js');
-require('../chunks/bundle-do_4Y2S_.js');
-require('../chunks/bundle-jI4fSOuZ.js');
+var UserProfileContext = require('../chunks/bundle-bOij3dXU.js');
+var index = require('../chunks/bundle-WALfBkn-.js');
+var MediaQueryContext = require('../chunks/bundle-UOOPIGjG.js');
+var useLongPress = require('../chunks/bundle-eVmdXbX4.js');
+require('../chunks/bundle-qYN98FNj.js');
+require('../chunks/bundle-xtUT3duD.js');
+require('../chunks/bundle-xbuS1NJI.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-fWvwYg6I.js');
-require('../chunks/bundle-JutD2hKN.js');
+require('../chunks/bundle-5zZ25-q8.js');
+require('../chunks/bundle-Gw-7KmmG.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
-require('../chunks/bundle-XpwayjqP.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../chunks/bundle-BdWL3kB4.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-2QTmv8Qr.js');
+require('../chunks/bundle-1BET8ZYY.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');

package/cjs/ui/OpenchannelUserMessage.js

@@ -1,38 +1,38 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-POnqXMLV.js');
-var ui_Avatar = require('../chunks/bundle-lZm_4ToV.js');
+var index$1 = require('../chunks/bundle-DsdDiOQc.js');
+var ui_Avatar = require('../chunks/bundle-Sxjv83JD.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-bSoYSPA5.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
-var utils = require('../chunks/bundle-GYpm7RtY.js');
-var uuid = require('../chunks/bundle-fWvwYg6I.js');
-var index = require('../chunks/bundle-CQGJhJYV.js');
-var MediaQueryContext = require('../chunks/bundle-eg639gtv.js');
-var useLongPress = require('../chunks/bundle-ivu3uDBu.js');
-var index$2 = require('../chunks/bundle-JutD2hKN.js');
-require('../chunks/bundle-HQUEIVST.js');
+var UserProfileContext = require('../chunks/bundle-bOij3dXU.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
+var utils = require('../chunks/bundle-tMR11mG8.js');
+var uuid = require('../chunks/bundle-5zZ25-q8.js');
+var index = require('../chunks/bundle-WALfBkn-.js');
+var MediaQueryContext = require('../chunks/bundle-UOOPIGjG.js');
+var useLongPress = require('../chunks/bundle-eVmdXbX4.js');
+var index$2 = require('../chunks/bundle-Gw-7KmmG.js');
+require('../chunks/bundle-qYN98FNj.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-jI4fSOuZ.js');
+require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-xbuS1NJI.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-do_4Y2S_.js');
+require('../chunks/bundle-xtUT3duD.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-2QTmv8Qr.js');
+require('../chunks/bundle-1BET8ZYY.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
+require('../chunks/bundle-SWOq3kxG.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/cjs/ui/PlaceHolder.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_Loader = require('./Loader.js');
-require('../chunks/bundle-do_4Y2S_.js');
-require('../chunks/bundle-HQUEIVST.js');
-require('../chunks/bundle-XpwayjqP.js');
+require('../chunks/bundle-xtUT3duD.js');
+require('../chunks/bundle-qYN98FNj.js');
+require('../chunks/bundle-BdWL3kB4.js');
 
 var PlaceHolderTypes = {
     LOADING: 'LOADING',

package/cjs/ui/PlaybackTime.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-require('../chunks/bundle-l9rAnwws.js');
-require('../chunks/bundle-do_4Y2S_.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+require('../chunks/bundle-9l41IWgC.js');
+require('../chunks/bundle-xtUT3duD.js');
 
 var PlaybackTime = function (_a) {
     var className = _a.className, _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.labelType, labelType = _c === void 0 ? ui_Label.LabelTypography.CAPTION_2 : _c, _d = _a.labelColor, labelColor = _d === void 0 ? ui_Label.LabelColors.ONCONTENT_1 : _d;

package/cjs/ui/QuoteMessage.js

@@ -2,18 +2,18 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
-var index = require('../chunks/bundle-JutD2hKN.js');
-var utils = require('../chunks/bundle-v-P7N839.js');
-require('../chunks/bundle-l9rAnwws.js');
-require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-do_4Y2S_.js');
-require('../chunks/bundle-HQUEIVST.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
+var index = require('../chunks/bundle-Gw-7KmmG.js');
+var utils = require('../chunks/bundle-EIBGC5ds.js');
+require('../chunks/bundle-9l41IWgC.js');
+require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-xtUT3duD.js');
+require('../chunks/bundle-qYN98FNj.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
+require('../chunks/bundle-SWOq3kxG.js');
 
 function QuoteMessage(_a) {
     var _b;

package/cjs/ui/QuoteMessageInput.js

@@ -1,19 +1,19 @@
 'use strict';
 
 var React = require('react');
-var index = require('../chunks/bundle-JutD2hKN.js');
+var index = require('../chunks/bundle-Gw-7KmmG.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var utils = require('../chunks/bundle-v-P7N839.js');
-require('../chunks/bundle-l9rAnwws.js');
+var utils = require('../chunks/bundle-EIBGC5ds.js');
+require('../chunks/bundle-9l41IWgC.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
-require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-do_4Y2S_.js');
-require('../chunks/bundle-HQUEIVST.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-xtUT3duD.js');
+require('../chunks/bundle-qYN98FNj.js');
 
 var componentClassname = 'sendbird-quote_message_input__avatar';
 function QuoteMessageThumbnail(_a) {

package/cjs/ui/ReactionBadge.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-require('../chunks/bundle-do_4Y2S_.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+require('../chunks/bundle-xtUT3duD.js');
 
 var ReactionBadge = React.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/cjs/ui/ReactionButton.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var useLongPress = require('../chunks/bundle-ivu3uDBu.js');
-var utils = require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-eg639gtv.js');
+var useLongPress = require('../chunks/bundle-eVmdXbX4.js');
+var utils = require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-UOOPIGjG.js');
 
 var ReactionButton = React.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/cjs/ui/SortByRow.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var uuid = require('../chunks/bundle-fWvwYg6I.js');
+var uuid = require('../chunks/bundle-5zZ25-q8.js');
 
 var componentClassName = 'sendbird-sort-by-row';
 function SortByRow(_a) {

package/cjs/ui/TemplateMessageItemBody.js

@@ -0,0 +1,245 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
+var React = require('react');
+var index = require('../chunks/bundle-Gw-7KmmG.js');
+var ui_MessageTemplate = require('../chunks/bundle-csbD2FCX.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var ui_FallbackTemplateMessageItemBody_tsx = require('./FallbackTemplateMessageItemBody.tsx.js');
+var ui_LoadingTemplateMessageItemBody_tsx = require('./LoadingTemplateMessageItemBody.tsx.js');
+require('@sendbird/chat/groupChannel');
+require('../utils/message/getOutgoingMessageState.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../withSendbird.js');
+require('../chunks/bundle-2dTv415Y.js');
+require('../chunks/bundle-xtUT3duD.js');
+require('../chunks/bundle-qYN98FNj.js');
+require('../chunks/bundle-5i9-ntZ5.js');
+require('./Loader.js');
+require('./Icon.js');
+require('../chunks/bundle-BdWL3kB4.js');
+
+var MessageTemplateWrapper = function (_a) {
+    var message = _a.message, templateItems = _a.templateItems;
+    return React.createElement(ui_MessageTemplate.MessageProvider, { message: message },
+        React.createElement(ui_MessageTemplate.MessageTemplate, { templateItems: templateItems }));
+};
+
+var NumberValueKeys = [
+    'version',
+    'size',
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'maxTextLines',
+    'value',
+    'pixelWidth',
+    'pixelHeight',
+    'radius',
+];
+function restoreNumbersFromMessageTemplateObject(value, key) {
+    if (Array.isArray(value)) {
+        return value.map(function (item) { return restoreNumbersFromMessageTemplateObject(item); });
+    }
+    if (typeof value === 'object') {
+        return Object.keys(value).reduce(function (acc, key) {
+            acc[key] = restoreNumbersFromMessageTemplateObject(value[key], key);
+            return acc;
+        }, {});
+    }
+    if (key != null && NumberValueKeys.includes(key)) {
+        var numberValue = Number(value);
+        return Number.isNaN(numberValue) ? value : numberValue;
+    }
+    return value;
+}
+
+var flattenObjectHelper = function (currentObject, flattenObject, parentKeyPath) {
+    if (parentKeyPath === void 0) { parentKeyPath = ''; }
+    for (var _i = 0, _a = Object.entries(currentObject); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        var currentKeyPath = parentKeyPath ? "".concat(parentKeyPath, ".").concat(key) : key;
+        if (value && typeof value === 'object') {
+            flattenObjectHelper(value, flattenObject, currentKeyPath);
+        }
+        else {
+            flattenObject[currentKeyPath] = value;
+        }
+    }
+};
+/**
+ * Returns flattened object.
+ * ex.
+ * given { key-1: { key-1.1: 'value-1.1' }, key-2: 'value-2' }
+ * returns { key-1.key-1.1: 'value-1.1', key-2: 'value-2' }
+ */
+function flattenObject(object) {
+    var result = {};
+    flattenObjectHelper(object, result);
+    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;
+    }
+    if (string.length === 9) {
+        return "#".concat(string.slice(3)).concat(string[1]).concat(string[2]);
+    }
+    if (string.length === 5) {
+        return "#".concat(string.slice(2)).concat(string[1]);
+    }
+    return string;
+}
+var splitColorVariables = function (colorVariables) {
+    var light = {};
+    var dark = {};
+    for (var key in colorVariables) {
+        if (Object.prototype.hasOwnProperty.call(colorVariables, key)) {
+            var value = colorVariables[key];
+            if (typeof value === 'object' && value !== null) {
+                var _a = splitColorVariables(value), nestedLight = _a[0], nestedDark = _a[1];
+                light[key] = nestedLight;
+                dark[key] = nestedDark;
+            }
+            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
+            }
+            else {
+                light[key] = value;
+                dark[key] = value;
+            }
+        }
+    }
+    return [light, dark];
+};
+function selectColorVariablesByTheme(_a) {
+    var colorVariables = _a.colorVariables, theme = _a.theme;
+    var _b = splitColorVariables(colorVariables), light = _b[0], dark = _b[1];
+    return theme === 'light' ? light : dark;
+}
+
+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.
+ */
+var getFilledMessageTemplateWithData = function (template, templateData, colorVariables, theme) {
+    var selectedThemeColorVariables = selectColorVariablesByTheme({
+        colorVariables: colorVariables,
+        theme: theme,
+    });
+    var parsedTemplate = mapData({
+        template: restoreNumbersFromMessageTemplateObject(template),
+        source: _tslib.__assign(_tslib.__assign({}, templateData), selectedThemeColorVariables),
+    });
+    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 templateData = (_b = message.extendedMessagePayload) === null || _b === void 0 ? void 0 : _b['template'];
+    if (!(templateData === null || templateData === void 0 ? void 0 : templateData.key)) {
+        return React.createElement(ui_FallbackTemplateMessageItemBody_tsx.FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+    }
+    var templateKey = templateData.key;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    if (!globalState) {
+        return React.createElement(ui_FallbackTemplateMessageItemBody_tsx.FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+    }
+    var _f = globalState.utils, getCachedTemplate = _f.getCachedTemplate, updateMessageTemplatesInfo = _f.updateMessageTemplatesInfo;
+    var waitingTemplateKeysMap = globalState.stores.appInfoStore.waitingTemplateKeysMap;
+    var _g = React.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 = React.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(',');
+    React.useEffect(function () {
+        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);
+            }
+            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 if (waitingTemplateKeyData && waitingTemplateKeyData.isError) {
+                    setIsErrored(true);
+                }
+            }
+        }
+    }, [templateData.key, waitingTemplateKeysMapString]);
+    if (filledMessageTemplateItems.length === 0) {
+        if (isErrored) {
+            return React.createElement(ui_FallbackTemplateMessageItemBody_tsx.FallbackTemplateMessageItemBody, { className: className, message: message, isByMe: isByMe });
+        }
+        return React.createElement(ui_LoadingTemplateMessageItemBody_tsx.LoadingTemplateMessageItemBody, { className: className, isByMe: isByMe });
+    }
+    return (React.createElement("div", { className: index.getClassName([
+            className,
+            isByMe ? 'outgoing' : 'incoming',
+            'sendbird-template-message-item-body',
+        ]) },
+        React.createElement(MessageTemplateWrapper, { message: message, templateItems: filledMessageTemplateItems })));
+}
+
+exports.TemplateMessageItemBody = TemplateMessageItemBody;
+exports.default = TemplateMessageItemBody;
+//# sourceMappingURL=TemplateMessageItemBody.js.map

package/cjs/ui/TemplateMessageItemBody.js.map

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

package/cjs/ui/TextButton.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-l9rAnwws.js');
+var _tslib = require('../chunks/bundle-9l41IWgC.js');
 var React = require('react');
-var color = require('../chunks/bundle-XSrDHwxE.js');
+var color = require('../chunks/bundle-yQR_oAnV.js');
 
 var TextButton = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.color, color$1 = _c === void 0 ? color.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/cjs/ui/TextMessageItemBody.js

@@ -1,32 +1,32 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Y6oHbdhN.js');
-var index = require('../chunks/bundle-JutD2hKN.js');
-var LocalizationContext = require('../chunks/bundle-oK2GZVsW.js');
-var tokenize = require('../chunks/bundle-Ulv5XabQ.js');
-var index$1 = require('../chunks/bundle-yyOx7Krk.js');
-var consts = require('../chunks/bundle-8gAAE7I3.js');
-require('../chunks/bundle-l9rAnwws.js');
-require('../chunks/bundle-do_4Y2S_.js');
+var ui_Label = require('../chunks/bundle-5i9-ntZ5.js');
+var index = require('../chunks/bundle-Gw-7KmmG.js');
+var LocalizationContext = require('../chunks/bundle-2dTv415Y.js');
+var tokenize = require('../chunks/bundle-QvRptclZ.js');
+var index$1 = require('../chunks/bundle-_1OqWxYy.js');
+var consts = require('../chunks/bundle-nNgkSlET.js');
+require('../chunks/bundle-9l41IWgC.js');
+require('../chunks/bundle-xtUT3duD.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-LZMOuc2b.js');
-require('../chunks/bundle-HQUEIVST.js');
+require('../chunks/bundle-SWOq3kxG.js');
+require('../chunks/bundle-qYN98FNj.js');
 require('../Message/context.js');
 require('./MentionLabel.js');
 require('./ContextMenu.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-fWvwYg6I.js');
+require('../chunks/bundle-5zZ25-q8.js');
 require('./UserProfile.js');
-require('../chunks/bundle-bSoYSPA5.js');
+require('../chunks/bundle-bOij3dXU.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-2QTmv8Qr.js');
-require('../chunks/bundle-XpwayjqP.js');
-require('../chunks/bundle-lZm_4ToV.js');
+require('../chunks/bundle-1BET8ZYY.js');
+require('../chunks/bundle-BdWL3kB4.js');
+require('../chunks/bundle-Sxjv83JD.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-jI4fSOuZ.js');
+require('../chunks/bundle-xbuS1NJI.js');
 require('./Icon.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');