@sendbird/uikit-react 3.9.0 → 3.9.1-rc-0

package/dist/cjs/chunks/bundle-EXbRHVSB.js.map

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

package/dist/cjs/chunks/bundle-Ep-tjaav.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var _tslib = require('./bundle-RmtoGD4w.js');
+var React = require('react');
+var ui_ImageRenderer = require('../ui/ImageRenderer.js');
+var uuid = require('./bundle-2B2B2GGi.js');
+var pxToNumber = require('./bundle-sQoST7ZS.js');
+var ui_Icon = require('../ui/Icon.js');
+
+var AvatarDefault = function (props) {
+    var width = props.width, height = props.height, text = props.text;
+    var iconWidth = pxToNumber.pxToNumber(width);
+    var iconHeight = pxToNumber.pxToNumber(height);
+    if (typeof iconWidth === 'number' && !Number.isNaN(iconWidth)) {
+        iconWidth *= 0.575;
+    }
+    if (typeof iconHeight === 'number' && !Number.isNaN(iconHeight)) {
+        iconHeight *= 0.575;
+    }
+    return (React.createElement("div", { className: "sendbird-avatar-img--default ".concat(text ? 'text' : ''), style: { width: width, height: height } }, text
+        ? React.createElement("div", { className: 'sendbird-avatar-text' }, text)
+        : React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.USER, fillColor: ui_Icon.IconColors.CONTENT, width: iconWidth, height: iconHeight })));
+};
+
+var imageRendererClassName = 'sendbird-avatar-img';
+var AvatarInner = function (_a) {
+    var _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.alt, alt = _c === void 0 ? '' : _c, height = _a.height, width = _a.width, customDefaultComponent = _a.customDefaultComponent;
+    var defaultComponent = function () { return customDefaultComponent
+        ? customDefaultComponent({ width: width, height: height })
+        : React.createElement(AvatarDefault, { width: width, height: height }); };
+    if (typeof src === 'string') {
+        return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src, height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
+    }
+    if (src && src.length) {
+        if (src.length === 1) {
+            return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
+        }
+        if (src.length === 2) {
+            return (React.createElement("div", { className: "sendbird-avatar--inner__two-child" },
+                React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent }),
+                React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[1], height: height, width: width, alt: alt, defaultComponent: defaultComponent })));
+        }
+        if (src.length === 3) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "sendbird-avatar--inner__three-child--upper" },
+                    React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent })),
+                React.createElement("div", { className: "sendbird-avatar--inner__three-child--lower" },
+                    React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[1], height: height, width: width, alt: alt, defaultComponent: defaultComponent }),
+                    React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[2], height: height, width: width, alt: alt, defaultComponent: defaultComponent }))));
+        }
+        return (React.createElement("div", { className: "sendbird-avatar--inner__four-child" }, src.slice(0, 4)
+            .map(function (i) { return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: i, height: height, width: width, alt: alt, key: uuid.uuidv4(), defaultComponent: defaultComponent })); })));
+    }
+    // default img
+    return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: "", height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
+};
+function Avatar(_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, _h = _a.left, left = _h === void 0 ? '' : _h, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-avatar',
+        ], false).join(' '), role: "button", ref: ref, style: {
+            height: height,
+            width: width,
+            zIndex: zIndex,
+            left: left,
+        }, onClick: onClick, onKeyDown: onClick, tabIndex: 0 },
+        React.createElement(AvatarInner, { src: src, width: width, height: height, alt: alt, customDefaultComponent: customDefaultComponent })));
+}
+var Avatar$1 = React.forwardRef(Avatar);
+
+exports.Avatar = Avatar$1;
+exports.AvatarDefault = AvatarDefault;
+exports.AvatarInner = AvatarInner;
+//# sourceMappingURL=bundle-Ep-tjaav.js.map

package/dist/cjs/chunks/bundle-Ep-tjaav.js.map

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

package/dist/cjs/chunks/bundle-GmkLfTb8.js

@@ -0,0 +1,224 @@
+'use strict';
+
+var React = require('react');
+var pubSub_topics = require('./bundle-NyrRrrQE.js');
+var utils = require('./bundle-4eGWgY9M.js');
+var index = require('./bundle-isd9KugI.js');
+var utils_message_getOutgoingMessageState = require('../utils/message/getOutgoingMessageState.js');
+
+var getNicknamesMapFromMembers = function (members) {
+    if (members === void 0) { members = []; }
+    var nicknamesMap = new Map();
+    for (var memberIndex = 0; memberIndex < members.length; memberIndex += 1) {
+        var _a = members[memberIndex], userId = _a.userId, nickname = _a.nickname;
+        nicknamesMap.set(userId, nickname);
+    }
+    return nicknamesMap;
+};
+var getParentMessageFrom = function (message) {
+    if (!message) {
+        return null;
+    }
+    if (isParentMessage(message)) {
+        return message;
+    }
+    if (isThreadMessage(message)) {
+        return (message === null || message === void 0 ? void 0 : message.parentMessage) || null;
+    }
+    return null;
+};
+var isParentMessage = function (message) {
+    return ((message === null || message === void 0 ? void 0 : message.parentMessage) === null
+        && typeof (message === null || message === void 0 ? void 0 : message.parentMessageId) === 'number'
+        && !(message === null || message === void 0 ? void 0 : message.parentMessageId));
+};
+var isThreadMessage = function (message) {
+    return ((message === null || message === void 0 ? void 0 : message.parentMessage) !== null
+        && typeof (message === null || message === void 0 ? void 0 : message.parentMessageId) === 'number'
+        && (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0
+        && (message === null || message === void 0 ? void 0 : message.threadInfo) === null);
+};
+var isAboutSame = function (a, b, px) { return (Math.abs(a - b) <= px); };
+var isEmpty = function (val) { return (val === null || val === undefined); };
+// Some Ids return string and number inconsistently
+// only use to comapre IDs
+function compareIds(a, b) {
+    if (isEmpty(a) || isEmpty(b)) {
+        return false;
+    }
+    var aString = a.toString();
+    var bString = b.toString();
+    return aString === bString;
+}
+var getMessageCreatedAt = function (message) { return index.format(message.createdAt, 'p'); };
+var isReadMessage = function (channel, message) { return (utils_message_getOutgoingMessageState.getOutgoingMessageState(channel, message) === utils_message_getOutgoingMessageState.OutgoingMessageStates.READ); };
+var isSameGroup = function (message, comparingMessage, currentChannel) {
+    var _a, _b, _c, _d;
+    if (!(message
+        && comparingMessage
+        && message.messageType
+        && message.messageType !== 'admin'
+        && comparingMessage.messageType
+        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType) !== 'admin'
+        && (message === null || message === void 0 ? void 0 : message.sender)
+        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender)
+        && (message === null || message === void 0 ? void 0 : message.createdAt)
+        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.createdAt)
+        && ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId)
+        && ((_b = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _b === void 0 ? void 0 : _b.userId))) {
+        return false;
+    }
+    return ((message === null || message === void 0 ? void 0 : message.sendingStatus) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sendingStatus)
+        && ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId) === ((_d = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _d === void 0 ? void 0 : _d.userId)
+        && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
+        && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage));
+};
+var compareMessagesForGrouping = function (prevMessage, currMessage, nextMessage, currentChannel, replyType) {
+    if (replyType === 'THREAD' && (currMessage === null || currMessage === void 0 ? void 0 : currMessage.threadInfo)) {
+        return [false, false];
+    }
+    var sendingStatus = (currMessage === null || currMessage === void 0 ? void 0 : currMessage.sendingStatus) || '';
+    var isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
+    return [
+        isSameGroup(prevMessage, currMessage, currentChannel) && isAcceptable,
+        isSameGroup(currMessage, nextMessage, currentChannel) && isAcceptable,
+    ];
+};
+var scrollIntoLast = function (intialTry) {
+    if (intialTry === void 0) { intialTry = 0; }
+    var MAX_TRIES = 10;
+    var currentTry = intialTry;
+    if (currentTry > MAX_TRIES) {
+        return;
+    }
+    try {
+        var scrollDOM = document.querySelector('.sendbird-thread-ui--scroll');
+        // eslint-disable-next-line no-multi-assign
+        scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    }
+    catch (error) {
+        setTimeout(function () {
+            scrollIntoLast(currentTry + 1);
+        }, 500 * currentTry);
+    }
+};
+
+/**
+ * pubSub is used instead of messagesDispatcher to avoid redundantly calling
+ * because this useSendMultipleFilesMessage is used in the Channel and Thread both
+ */
+var useSendMultipleFilesMessage = function (_a, _b) {
+    var currentChannel = _a.currentChannel, onBeforeSendMultipleFilesMessage = _a.onBeforeSendMultipleFilesMessage, publishingModules = _a.publishingModules;
+    var logger = _b.logger, pubSub = _b.pubSub, scrollRef = _b.scrollRef;
+    var sendMessage = React.useCallback(function (files, quoteMessage) {
+        return new Promise(function (resolve, reject) {
+            if (!currentChannel) {
+                logger.warning('Channel: Sending MFm failed, because currentChannel is null.', { currentChannel: currentChannel });
+                reject();
+            }
+            if (files.length <= 1) {
+                logger.warning('Channel: Sending MFM failed, because there are no multiple files.', { files: files });
+                reject();
+            }
+            var messageParams = {
+                fileInfoList: files.map(function (file) { return ({
+                    file: file,
+                    fileName: file.name,
+                    fileSize: file.size,
+                    mimeType: file.type,
+                }); }),
+            };
+            if (quoteMessage) {
+                messageParams.isReplyToChannel = true;
+                messageParams.parentMessageId = quoteMessage.messageId;
+            }
+            if (typeof onBeforeSendMultipleFilesMessage === 'function') {
+                messageParams = onBeforeSendMultipleFilesMessage(files, quoteMessage);
+            }
+            logger.info('Channel: Start sending MFM', { messageParams: messageParams });
+            try {
+                currentChannel.sendMultipleFilesMessage(messageParams)
+                    .onFileUploaded(function (requestId, index, uploadableFileInfo, error) {
+                    logger.info('Channel: onFileUploaded during sending MFM', {
+                        requestId: requestId,
+                        index: index,
+                        error: error,
+                        uploadableFileInfo: uploadableFileInfo,
+                    });
+                    pubSub.publish(pubSub_topics.pubSubTopics.ON_FILE_INFO_UPLOADED, {
+                        response: {
+                            channelUrl: currentChannel.url,
+                            requestId: requestId,
+                            index: index,
+                            uploadableFileInfo: uploadableFileInfo,
+                            error: error,
+                        },
+                        publishingModules: publishingModules,
+                    });
+                })
+                    .onPending(function (pendingMessage) {
+                    logger.info('Channel: in progress of sending MFM', { pendingMessage: pendingMessage, fileInfoList: messageParams.fileInfoList });
+                    pubSub.publish(pubSub_topics.pubSubTopics.SEND_MESSAGE_START, {
+                        message: pendingMessage,
+                        channel: currentChannel,
+                        publishingModules: publishingModules,
+                    });
+                    // We need this delay because rendering MFM takes time due to large image files.
+                    setTimeout(function () {
+                        if (scrollRef && pubSub_topics.shouldPubSubPublishToChannel(publishingModules)) {
+                            utils.scrollIntoLast(0, scrollRef);
+                        }
+                        if (pubSub_topics.shouldPubSubPublishToThread(publishingModules)) {
+                            scrollIntoLast(0);
+                        }
+                    }, 100);
+                })
+                    .onFailed(function (error, failedMessage) {
+                    logger.error('Channel: Sending MFM failed.', { error: error, failedMessage: failedMessage });
+                    pubSub.publish(pubSub_topics.pubSubTopics.SEND_MESSAGE_FAILED, {
+                        channel: currentChannel,
+                        message: failedMessage,
+                        publishingModules: publishingModules,
+                    });
+                    reject(error);
+                })
+                    .onSucceeded(function (succeededMessage) {
+                    logger.info('Channel: Sending voice message success!', { succeededMessage: succeededMessage });
+                    pubSub.publish(pubSub_topics.pubSubTopics.SEND_FILE_MESSAGE, {
+                        channel: currentChannel,
+                        message: succeededMessage,
+                        publishingModules: publishingModules,
+                    });
+                    // We need this delay because rendering MFM takes time due to large image files.
+                    setTimeout(function () {
+                        if (scrollRef && pubSub_topics.shouldPubSubPublishToChannel(publishingModules)) {
+                            utils.scrollIntoLast(0, scrollRef);
+                        }
+                        if (pubSub_topics.shouldPubSubPublishToThread(publishingModules)) {
+                            scrollIntoLast(0);
+                        }
+                    }, 100);
+                    resolve(succeededMessage);
+                });
+            }
+            catch (error) {
+                logger.error('Channel: Sending MFM failed.', { error: error });
+                reject(error);
+            }
+        });
+    }, [
+        currentChannel,
+        onBeforeSendMultipleFilesMessage,
+        publishingModules,
+    ]);
+    return [sendMessage];
+};
+
+exports.compareIds = compareIds;
+exports.compareMessagesForGrouping = compareMessagesForGrouping;
+exports.getNicknamesMapFromMembers = getNicknamesMapFromMembers;
+exports.getParentMessageFrom = getParentMessageFrom;
+exports.isAboutSame = isAboutSame;
+exports.scrollIntoLast = scrollIntoLast;
+exports.useSendMultipleFilesMessage = useSendMultipleFilesMessage;
+//# sourceMappingURL=bundle-GmkLfTb8.js.map

package/dist/cjs/chunks/bundle-GmkLfTb8.js.map

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

package/dist/cjs/chunks/bundle-H-T9QzU6.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var PREV_RESULT_SIZE = 30;
+var NEXT_RESULT_SIZE = 15;
+var MAX_USER_MENTION_COUNT = 10;
+var MAX_USER_SUGGESTION_COUNT = 15;
+var USER_MENTION_TEMP_CHAR = '@';
+exports.ThreadReplySelectType = void 0;
+(function (ThreadReplySelectType) {
+    ThreadReplySelectType["PARENT"] = "PARENT";
+    ThreadReplySelectType["THREAD"] = "THREAD";
+})(exports.ThreadReplySelectType || (exports.ThreadReplySelectType = {}));
+
+exports.MAX_USER_MENTION_COUNT = MAX_USER_MENTION_COUNT;
+exports.MAX_USER_SUGGESTION_COUNT = MAX_USER_SUGGESTION_COUNT;
+exports.NEXT_RESULT_SIZE = NEXT_RESULT_SIZE;
+exports.PREV_RESULT_SIZE = PREV_RESULT_SIZE;
+exports.USER_MENTION_TEMP_CHAR = USER_MENTION_TEMP_CHAR;
+//# sourceMappingURL=bundle-H-T9QzU6.js.map

package/dist/cjs/chunks/bundle-H-T9QzU6.js.map

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

package/dist/cjs/chunks/bundle-LFMgWHoT.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var ui_Label = require('./bundle-41kBJWv1.js');
+
+var getChannelTitle = function (channel, currentUserId, stringSet) {
+    var _a;
+    var LABEL_STRING_SET = stringSet || ui_Label.LabelStringSet;
+    if (!(channel === null || channel === void 0 ? void 0 : channel.name) && !(channel === null || channel === void 0 ? void 0 : channel.members)) {
+        return LABEL_STRING_SET.NO_TITLE;
+    }
+    if ((channel === null || channel === void 0 ? void 0 : channel.name) && channel.name !== 'Group Channel') {
+        return channel.name;
+    }
+    if (((_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+        return LABEL_STRING_SET.NO_MEMBERS;
+    }
+    return channel === null || channel === void 0 ? void 0 : channel.members.filter(function (_a) {
+        var userId = _a.userId;
+        return userId !== currentUserId;
+    }).map(function (_a) {
+        var nickname = _a.nickname;
+        return (nickname || LABEL_STRING_SET.NO_NAME);
+    }).join(', ');
+};
+
+exports.getChannelTitle = getChannelTitle;
+//# sourceMappingURL=bundle-LFMgWHoT.js.map

package/dist/cjs/chunks/bundle-LFMgWHoT.js.map

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

package/dist/cjs/chunks/bundle-MP2S1vK8.js

@@ -0,0 +1,179 @@
+'use strict';
+
+var React = require('react');
+var ui_Icon = require('../ui/Icon.js');
+var message = require('@sendbird/chat/message');
+var ui_ImageRenderer = require('../ui/ImageRenderer.js');
+var index = require('./bundle-CDhpLgdo.js');
+var ui_FileViewer = require('./bundle-fXAUBZTE.js');
+var index_module = require('./bundle--sK1aluY.js');
+
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React.createElement("div", { className: index.getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
+}
+
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
+var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
+
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var className = _a.className, message$1 = _a.message, _b = _a.isReactionEnabled, isReactionEnabled = _b === void 0 ? false : _b, threadMessageKindKey = _a.threadMessageKindKey, _c = _a.statefulFileInfoList, statefulFileInfoList = _c === void 0 ? [] : _c;
+    var _d = React.useState(-1), currentFileViewerIndex = _d[0], setCurrentFileViewerIndex = _d[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0
+            ? statefulFileInfoList.length - 1
+            : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1
+            ? 0
+            : currentFileViewerIndex + 1);
+    }
+    return threadMessageKindKey && (React.createElement(React.Fragment, null,
+        currentFileViewerIndex > -1 && (React.createElement(ui_FileViewer.FileViewer, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose })),
+        React.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
+            var _a, _b, _c;
+            var isGifValue = index.isGif(fileInfo.mimeType);
+            return React.createElement("div", { className: 'sendbird-multiple-files-image-renderer-wrapper', onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED
+                    ? function () { return setCurrentFileViewerIndex(index$1); }
+                    : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
+                React.createElement(ui_ImageRenderer.default, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (style_) { return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style_ }, isGifValue
+                        ? React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))
+                        : React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); }, defaultComponent: React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" }, React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })) }));
+        }))));
+}
+
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = React.useMemo(function () {
+        return index_module.K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
+}
+
+function createStatefulFileInfoList(message$1, oldStatefulFileInfoList) {
+    var _a;
+    if (!message$1)
+        return null;
+    // Handle sent messages.
+    if (message$1.sendingStatus === message.SendingStatus.SUCCEEDED) {
+        return message$1.fileInfoList.map(function (fileInfo) {
+            return {
+                fileName: fileInfo.fileName,
+                fileSize: fileInfo.fileSize,
+                mimeType: fileInfo.mimeType,
+                thumbnails: fileInfo.thumbnails,
+                url: fileInfo.url,
+                isUploaded: true,
+            };
+        });
+    }
+    // Handle unsent message.
+    if (!Array.isArray((_a = message$1.messageParams) === null || _a === void 0 ? void 0 : _a.fileInfoList))
+        return null;
+    return message$1.messageParams.fileInfoList
+        .map(function (fileInfo, index) {
+        var _a, _b, _c;
+        return ({
+            fileName: fileInfo.fileName,
+            fileSize: fileInfo.fileSize,
+            mimeType: fileInfo.mimeType,
+            /**
+             * Note here, we prioritize using fileUrl (implying uploaded state) over file.
+             * This is necessary because cache loaded pending/failed mfms is mixed with
+             * files (not yet uploaded ones) and fileUrls (uploaded).
+             *
+             * Notice that if file is used in the old state, it will not be replace with the new fileUrl
+             * because doing so will rerender the ImageRenderer component which makes rendering process awkward and slow.
+             * */
+            url: (_c = (_b = (_a = oldStatefulFileInfoList[index]) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : fileInfo.fileUrl) !== null && _c !== void 0 ? _c : (fileInfo.file instanceof Blob
+                ? URL.createObjectURL(fileInfo.file)
+                : undefined),
+            /**
+             * Side note: It was a bad design to not include this property by SDK.
+             * Because if original object has fileUrl set and no file, then uploaded result remains
+             * the same so customer cannot know whether it has been uploaded or not.
+             */
+            isUploaded: !fileInfo.file && typeof fileInfo.fileUrl === 'string' && fileInfo.fileUrl.length > 0,
+        });
+    });
+}
+
+var useStatefulFileInfoList = function (message) {
+    var _a, _b, _c;
+    var _d = React.useState([]), statefulFileInfoList = _d[0], setStatefulFileInfoList = _d[1];
+    React.useEffect(function () {
+        if (index.isMultipleFilesMessage(message)) {
+            var newStatefulFileInfoList = createStatefulFileInfoList(message, statefulFileInfoList);
+            setStatefulFileInfoList(newStatefulFileInfoList);
+        }
+    }, [
+        // Sent message dependency.
+        (_a = message.fileInfoList) === null || _a === void 0 ? void 0 : _a.length,
+        // Unsent message dependency.
+        /**
+         * Side note: It was a bad design to not include 'isUploaded' property by SDK.
+         * Because if original object has fileUrl set and no file, then uploaded result remains
+         * the same so customer cannot know whether it has been uploaded or not.
+         */
+        (_c = (_b = message.messageParams) === null || _b === void 0 ? void 0 : _b.fileInfoList) === null || _c === void 0 ? void 0 : _c.map(function (fileInfo) { return fileInfo.fileUrl; }).join(','),
+    ]);
+    return statefulFileInfoList;
+};
+
+exports.MultipleFilesMessageItemBody = MultipleFilesMessageItemBody;
+exports.ThreadMessageKind = ThreadMessageKind;
+exports.useStatefulFileInfoList = useStatefulFileInfoList;
+exports.useThreadMessageKindKeySelector = useThreadMessageKindKeySelector;
+//# sourceMappingURL=bundle-MP2S1vK8.js.map

package/dist/cjs/chunks/bundle-MP2S1vK8.js.map

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

package/dist/cjs/chunks/bundle-Mswmp_1O.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var isEmpty = function (val) { return (val === null || val === undefined); };
+// Some Ids return string and number inconsistently
+// only use to compare IDs
+function compareIds(a, b) {
+    if (isEmpty(a) || isEmpty(b)) {
+        return false;
+    }
+    var aString = a.toString();
+    var bString = b.toString();
+    return aString === bString;
+}
+
+exports.compareIds = compareIds;
+//# sourceMappingURL=bundle-Mswmp_1O.js.map

package/dist/cjs/chunks/bundle-Mswmp_1O.js.map

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