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

package/dist/chunks/bundle-CUfPglBq.js

@@ -0,0 +1,216 @@
+import { useCallback } from 'react';
+import { p as pubSubTopics, s as shouldPubSubPublishToChannel, a as shouldPubSubPublishToThread } from './bundle-rdL93Rxj.js';
+import { s as scrollIntoLast$1 } from './bundle-GWEiVUz_.js';
+import { f as format } from './bundle-6KxAQ3DO.js';
+import { getOutgoingMessageState, OutgoingMessageStates } from '../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 format(message.createdAt, 'p'); };
+var isReadMessage = function (channel, message) { return (getOutgoingMessageState(channel, message) === 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 = 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(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(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 && shouldPubSubPublishToChannel(publishingModules)) {
+                            scrollIntoLast$1(0, scrollRef);
+                        }
+                        if (shouldPubSubPublishToThread(publishingModules)) {
+                            scrollIntoLast(0);
+                        }
+                    }, 100);
+                })
+                    .onFailed(function (error, failedMessage) {
+                    logger.error('Channel: Sending MFM failed.', { error: error, failedMessage: failedMessage });
+                    pubSub.publish(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(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 && shouldPubSubPublishToChannel(publishingModules)) {
+                            scrollIntoLast$1(0, scrollRef);
+                        }
+                        if (shouldPubSubPublishToThread(publishingModules)) {
+                            scrollIntoLast(0);
+                        }
+                    }, 100);
+                    resolve(succeededMessage);
+                });
+            }
+            catch (error) {
+                logger.error('Channel: Sending MFM failed.', { error: error });
+                reject(error);
+            }
+        });
+    }, [
+        currentChannel,
+        onBeforeSendMultipleFilesMessage,
+        publishingModules,
+    ]);
+    return [sendMessage];
+};
+
+export { compareIds as a, getNicknamesMapFromMembers as b, compareMessagesForGrouping as c, getParentMessageFrom as g, isAboutSame as i, scrollIntoLast as s, useSendMultipleFilesMessage as u };
+//# sourceMappingURL=bundle-CUfPglBq.js.map

package/dist/chunks/bundle-CUfPglBq.js.map

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

package/dist/chunks/bundle-GWEiVUz_.js

@@ -0,0 +1,147 @@
+import { a as __spreadArray } from './bundle-qHAQziqO.js';
+import { f as format } from './bundle-6KxAQ3DO.js';
+import { a as isReadMessage } from './bundle-gkOxTHma.js';
+import { SendingStatus } from '@sendbird/chat/message';
+
+var scrollToRenderedMessage = function (scrollRef, initialTimeStamp, setIsScrolled) {
+    var _a;
+    try {
+        var container = scrollRef.current;
+        // scroll into the message with initialTimeStamp
+        var element = (_a = container.querySelectorAll("[data-sb-created-at=\"".concat(initialTimeStamp, "\"]"))) === null || _a === void 0 ? void 0 : _a[0];
+        if (element instanceof HTMLElement) {
+            // Set the scroll position of the container to bring the element to the top
+            container.scrollTop = element.offsetTop;
+        }
+    }
+    catch (_b) {
+        // do nothing
+    }
+    finally {
+        setIsScrolled === null || setIsScrolled === void 0 ? void 0 : setIsScrolled(true);
+    }
+};
+/* eslint-disable default-param-last */
+var scrollIntoLast = function (initialTry, scrollRef, setIsScrolled) {
+    if (initialTry === void 0) { initialTry = 0; }
+    var MAX_TRIES = 10;
+    var currentTry = initialTry;
+    if (currentTry > MAX_TRIES) {
+        setIsScrolled === null || setIsScrolled === void 0 ? void 0 : setIsScrolled(true);
+        return;
+    }
+    try {
+        var scrollDOM = (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) || document.querySelector('.sendbird-conversation__messages-padding');
+        scrollDOM.scrollTop = scrollDOM.scrollHeight;
+        setIsScrolled === null || setIsScrolled === void 0 ? void 0 : setIsScrolled(true);
+    }
+    catch (error) {
+        setTimeout(function () {
+            scrollIntoLast(currentTry + 1, scrollRef, setIsScrolled);
+        }, 500 * currentTry);
+    }
+};
+var isOperator = function (groupChannel) {
+    var myRole = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myRole;
+    return myRole === 'operator';
+};
+var isDisabledBecauseFrozen = function (groupChannel) {
+    var isFrozen = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.isFrozen;
+    return isFrozen && !isOperator(groupChannel);
+};
+var isDisabledBecauseMuted = function (groupChannel) {
+    var myMutedState = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myMutedState;
+    return myMutedState === 'muted';
+};
+var getAllEmojisMapFromEmojiContainer = function (emojiContainer) {
+    var _a = emojiContainer.emojiCategories, emojiCategories = _a === void 0 ? [] : _a;
+    var allEmojisMap = new Map();
+    for (var categoryIndex = 0; categoryIndex < emojiCategories.length; categoryIndex += 1) {
+        var emojis = emojiCategories[categoryIndex].emojis;
+        for (var emojiIndex = 0; emojiIndex < emojis.length; emojiIndex += 1) {
+            var _b = emojis[emojiIndex], key = _b.key, url = _b.url;
+            allEmojisMap.set(key, url);
+        }
+    }
+    return allEmojisMap;
+};
+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 getUniqueListBy = function (arr, key) {
+    var entries = arr.map(function (item) { return [item[key], item]; });
+    return Array.from(new Map(entries).values());
+};
+var getUniqueListByMessageId = function (arr) {
+    return getUniqueListBy(arr, 'messageId');
+};
+var sortByCreatedAt = function (messages) {
+    return messages.sort(function (a, b) { return a.createdAt - b.createdAt; });
+};
+var mergeAndSortMessages = function (oldMessages, newMessages) {
+    var lastOldMessage = oldMessages[oldMessages.length - 1];
+    var firstNewMessage = newMessages[0];
+    // If the last message of oldMessages is older than the first message of newMessages,
+    // then we can safely append newMessages to oldMessages.
+    if ((lastOldMessage === null || lastOldMessage === void 0 ? void 0 : lastOldMessage.createdAt) < (firstNewMessage === null || firstNewMessage === void 0 ? void 0 : firstNewMessage.createdAt)) {
+        return __spreadArray(__spreadArray([], oldMessages, true), newMessages, true);
+    }
+    // todo: optimize this
+    // If the last message of oldMessages is newer than the first message of newMessages,
+    // then we need to merge the two arrays and sort them by createdAt.
+    var mergedMessages = __spreadArray(__spreadArray([], oldMessages, true), newMessages, true);
+    var unique = getUniqueListByMessageId(mergedMessages);
+    return sortByCreatedAt(unique);
+};
+var getMessageCreatedAt = function (message) { return format(message.createdAt, 'p'); };
+var isSameGroup = function (message, comparingMessage, currentChannel) {
+    var _a, _b;
+    if (!(message
+        && comparingMessage
+        && message.messageType
+        && message.messageType !== 'admin'
+        && comparingMessage.messageType
+        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType) !== 'admin'
+        && 'sender' in message
+        && 'sender' in comparingMessage
+        && message.createdAt
+        && comparingMessage.createdAt
+        && message.sender.userId
+        && comparingMessage.sender.userId)) {
+        return false;
+    }
+    return ((message === null || message === void 0 ? void 0 : message.sendingStatus) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sendingStatus)
+        && ((_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)
+        && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
+        && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage));
+};
+var passUnsuccessfullMessages = function (allMessages, newMessage) {
+    if ('sendingStatus' in newMessage
+        && (newMessage.sendingStatus === SendingStatus.SUCCEEDED || newMessage.sendingStatus === SendingStatus.PENDING)) {
+        var lastIndexOfSucceededMessage = allMessages
+            .map(function (message) {
+            if ('sendingStatus' in message && message.sendingStatus)
+                return message.sendingStatus;
+            return message.isAdminMessage() ? SendingStatus.SUCCEEDED : null;
+        })
+            .lastIndexOf(SendingStatus.SUCCEEDED);
+        if (lastIndexOfSucceededMessage + 1 < allMessages.length) {
+            var messages = __spreadArray([], allMessages, true);
+            messages.splice(lastIndexOfSucceededMessage + 1, 0, newMessage);
+            return messages;
+        }
+    }
+    return __spreadArray(__spreadArray([], allMessages, true), [newMessage], false);
+};
+var isAboutSame = function (a, b, px) {
+    return Math.abs(a - b) <= px;
+};
+
+export { scrollToRenderedMessage as a, isDisabledBecauseMuted as b, isOperator as c, isSameGroup as d, isAboutSame as e, getNicknamesMapFromMembers as f, getAllEmojisMapFromEmojiContainer as g, isDisabledBecauseFrozen as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
+//# sourceMappingURL=bundle-GWEiVUz_.js.map

package/dist/chunks/bundle-GWEiVUz_.js.map

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

package/dist/chunks/bundle-GxF20zCF.js

@@ -0,0 +1,29 @@
+/**
+ * Dashboard UIKitConfig's replyType is consisted of all lowercases,
+ * we need to convert it into uppercase ones(or vice versa)
+ * when we pass the value to internal components
+ *  - 'thread' <-> 'THREAD'
+ *  - 'quote_reply' <-> 'QUOTE_REPLY'
+ */
+function getCaseResolvedReplyType(replyType) {
+    return {
+        lowerCase: replyType.toLowerCase(),
+        upperCase: replyType.toUpperCase(),
+    };
+}
+/**
+ * Dashboard UIKitConfig's threadReplySelectType is consisted of all lowercase letters,
+ * we need to convert it into uppercase ones(or vice versa)
+ * when we pass the value to internal components
+ *  - 'thread' <-> 'THREAD'
+ *  - 'parent' <-> 'PARENT'
+ */
+function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
+    return {
+        lowerCase: threadReplySelectType.toLowerCase(),
+        upperCase: threadReplySelectType.toUpperCase(),
+    };
+}
+
+export { getCaseResolvedReplyType as a, getCaseResolvedThreadReplySelectType as g };
+//# sourceMappingURL=bundle-GxF20zCF.js.map

package/dist/chunks/bundle-GxF20zCF.js.map

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

package/dist/chunks/bundle-Hs9aaQff.js

@@ -0,0 +1,222 @@
+import React__default, { useState } from 'react';
+import ContextMenu, { MenuItems, MenuItem } from '../ui/ContextMenu.js';
+import { j as isUserMessage, k as isSentMessage, l as isFailedMessage, m as isPendingMessage, d as isFileMessage, i as isVoiceMessage, M as isThreadMessage, o as copyToClipboard, p as getEmojiListAll } from './bundle-gkOxTHma.js';
+import { u as useLocalization } from './bundle--Ejuxki1.js';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-a2JLFpDM.js';
+import BottomSheet from '../ui/BottomSheet.js';
+import ImageRenderer from '../ui/ImageRenderer.js';
+import ReactionButton from '../ui/ReactionButton.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+
+var MobileContextMenu = function (props) {
+    var _a, _b, _c;
+    var hideMenu = props.hideMenu, channel = props.channel, message = props.message, replyType = props.replyType, userId = props.userId, resendMessage = props.resendMessage, showEdit = props.showEdit, showRemove = props.showRemove, deleteMenuState = props.deleteMenuState, deleteMessage = props.deleteMessage, setQuoteMessage = props.setQuoteMessage, parentRef = props.parentRef, onReplyInThread = props.onReplyInThread, _d = props.isOpenedFromThread, isOpenedFromThread = _d === void 0 ? false : _d;
+    var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+    var stringSet = useLocalization().stringSet;
+    var showMenuItemCopy = isUserMessage(message);
+    var showMenuItemEdit = (isUserMessage(message) && isSentMessage(message) && isByMe);
+    var showMenuItemResend = (isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe);
+    var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+    var showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
+    var showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
+    var disableDelete = ((deleteMenuState !== undefined && deleteMenuState === 'DISABLE')
+        || ((_c = (_b = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _b === void 0 ? void 0 : _b.replyCount) !== null && _c !== void 0 ? _c : 0) > 0);
+    var showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message)
+        && !(isVoiceMessage(message) && ((channel === null || channel === void 0 ? void 0 : channel.isSuper) || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast)));
+    var showMenuItemReply = (replyType === 'QUOTE_REPLY')
+        && !isFailedMessage(message)
+        && !isPendingMessage(message)
+        && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+    var showMenuItemThread = (replyType === 'THREAD') && !isOpenedFromThread
+        && !isFailedMessage(message)
+        && !isPendingMessage(message)
+        && !isThreadMessage(message)
+        && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+    var fileMessage = message;
+    return (React__default.createElement(ContextMenu, { isOpen: true, menuItems: function () {
+            var _a, _b, _c;
+            return (React__default.createElement(MenuItems, { className: "sendbird-message__mobile-context-menu", parentRef: parentRef, parentContainRef: parentRef, closeDropdown: hideMenu },
+                showMenuItemCopy && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-copy", onClick: function () {
+                        hideMenu();
+                        copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+                    }, dataSbId: "ui_mobile_message_item_menu_copy" },
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY),
+                    React__default.createElement(Icon, { type: IconTypes.COPY, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))),
+                showMenuItemReply && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-reply", onClick: function () {
+                        hideMenu();
+                        setQuoteMessage(message);
+                    }, disable: ((_a = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _a !== void 0 ? _a : 0) > 0, dataSbId: "ui_mobile_message_item_menu_reply" },
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: ((_b = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _b !== void 0 ? _b : 0) > 0
+                            ? LabelColors.ONBACKGROUND_4
+                            : LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__REPLY),
+                    React__default.createElement(Icon, { type: IconTypes.REPLY, fillColor: ((_c = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _c !== void 0 ? _c : 0) > 0
+                            ? IconColors.ON_BACKGROUND_4
+                            : IconColors.PRIMARY, width: "24px", height: "24px" }))),
+                showMenuItemThread && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-reply", onClick: function () {
+                        hideMenu();
+                        onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
+                    }, dataSbId: "ui_mobile_message_item_menu_thread" },
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__THREAD),
+                    React__default.createElement(Icon, { type: IconTypes.THREAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))),
+                showMenuItemEdit && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-edit", onClick: function () {
+                        hideMenu();
+                        showEdit(true);
+                    }, dataSbId: "ui_mobile_message_item_menu_edit" },
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__EDIT),
+                    React__default.createElement(Icon, { type: IconTypes.EDIT, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))),
+                showMenuItemResend && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-resend", onClick: function () {
+                        hideMenu();
+                        resendMessage(message);
+                    }, dataSbId: "ui_mobile_message_item_menu_resend" },
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__RESEND),
+                    React__default.createElement(Icon, { type: IconTypes.REFRESH, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))),
+                showMenuItemDeleteFinal && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-delete", onClick: function () {
+                        if (isFailedMessage(message)) {
+                            hideMenu();
+                            deleteMessage === null || deleteMessage === void 0 ? void 0 : deleteMessage(message);
+                        }
+                        else if (!disableDelete) {
+                            hideMenu();
+                            showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
+                        }
+                    }, disable: disableDelete, dataSbId: "ui_mobile_message_item_menu_delete" },
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: disableDelete
+                            ? LabelColors.ONBACKGROUND_4
+                            : LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__DELETE),
+                    React__default.createElement(Icon, { type: IconTypes.DELETE, fillColor: disableDelete
+                            ? IconColors.ON_BACKGROUND_4
+                            : IconColors.PRIMARY, width: "24px", height: "24px" }))),
+                showMenuItemDownload && (React__default.createElement(MenuItem, { className: "sendbird-message__mobile-context-menu-item menu-item-save", onClick: function () {
+                        hideMenu();
+                    }, dataSbId: "ui_mobile_message_item_menu_download_file" },
+                    React__default.createElement("a", { className: "sendbird-message__contextmenu--hyperlink", rel: "noopener noreferrer", href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url, target: "_blank" },
+                        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__SAVE),
+                        React__default.createElement(Icon, { type: IconTypes.DOWNLOAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))))));
+        } }));
+};
+
+var EMOJI_SIZE = 38;
+var MobileBottomSheet = function (props) {
+    var _a, _b, _c;
+    var hideMenu = props.hideMenu, channel = props.channel, emojiContainer = props.emojiContainer, message = props.message, replyType = props.replyType, userId = props.userId, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, toggleReaction = props.toggleReaction, isReactionEnabled = props.isReactionEnabled, showEdit = props.showEdit, showRemove = props.showRemove, deleteMenuState = props.deleteMenuState, setQuoteMessage = props.setQuoteMessage, onReplyInThread = props.onReplyInThread, _d = props.isOpenedFromThread, isOpenedFromThread = _d === void 0 ? false : _d;
+    var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+    var stringSet = useLocalization().stringSet;
+    var globalStore = useSendbirdStateContext();
+    var isOnline = globalStore.config.isOnline;
+    var showMenuItemCopy = isUserMessage(message);
+    var showMenuItemEdit = (isUserMessage(message) && isSentMessage(message) && isByMe);
+    var showMenuItemResend = (isOnline && isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe);
+    var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+    var showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
+    var showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
+    var disableDelete = ((deleteMenuState !== undefined && deleteMenuState === 'DISABLE')
+        || ((_c = (_b = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _b === void 0 ? void 0 : _b.replyCount) !== null && _c !== void 0 ? _c : 0) > 0);
+    var showMenuItemDownload = isSentMessage(message) && isFileMessage(message) && !isVoiceMessage(message);
+    var showReaction = !isFailedMessage(message) && !isPendingMessage(message) && isReactionEnabled;
+    var showMenuItemReply = (replyType === 'QUOTE_REPLY')
+        && !isFailedMessage(message)
+        && !isPendingMessage(message)
+        && ((channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast));
+    var showMenuItemThread = (replyType === 'THREAD') && !isOpenedFromThread
+        && !isFailedMessage(message)
+        && !isPendingMessage(message)
+        && !isThreadMessage(message)
+        && ((channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast));
+    var disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
+    var fileMessage = message;
+    var maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
+    var _e = useState(false), showEmojisOnly = _e[0], setShowEmojisOnly = _e[1];
+    var emojis = getEmojiListAll(emojiContainer);
+    // calculate max emojis that can be shown in screen
+    var visibleEmojis = showEmojisOnly
+        ? emojis
+        : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
+    var canShowMoreEmojis = emojis.length > maxEmojisPerRow;
+    return (React__default.createElement(BottomSheet, { onBackdropClick: hideMenu },
+        React__default.createElement("div", { className: 'sendbird-message__bottomsheet' },
+            showReaction && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet-reactions' },
+                React__default.createElement("ul", { className: "sendbird-message__bottomsheet-reaction-bar" },
+                    React__default.createElement("div", { className: "\n                    sendbird-message__bottomsheet-reaction-bar__row\n                    ".concat(showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : '', "\n                  ") },
+                        visibleEmojis.map(function (emoji) {
+                            var _a, _b, _c;
+                            var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.filter(function (reaction) { return reaction.key === emoji.key; })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; });
+                            return (React__default.createElement(ReactionButton, { key: emoji.key, width: "".concat(EMOJI_SIZE, "px"), height: "".concat(EMOJI_SIZE, "px"), selected: isReacted, onClick: function () {
+                                    hideMenu();
+                                    toggleReaction(message, emoji.key, isReacted);
+                                }, dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
+                                React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                                        React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                        }),
+                        canShowMoreEmojis && !showEmojisOnly && (React__default.createElement(ReactionButton, { key: "emoji_more", width: "38px", height: "38px", onClick: function () {
+                                setShowEmojisOnly(true);
+                            }, dataSbId: "ui_mobile_emoji_reactions_menu_emojiadd" },
+                            React__default.createElement(ImageRenderer, { url: '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                                    React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }))))))),
+            !showEmojisOnly && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--actions' },
+                showMenuItemCopy && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
+                        hideMenu();
+                        copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+                    } },
+                    React__default.createElement(Icon, { type: IconTypes.COPY, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY))),
+                showMenuItemEdit && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
+                        hideMenu();
+                        showEdit(true);
+                    } },
+                    React__default.createElement(Icon, { type: IconTypes.EDIT, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__EDIT))),
+                showMenuItemResend && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
+                        hideMenu();
+                        resendMessage(message);
+                    } },
+                    React__default.createElement(Icon, { type: IconTypes.REFRESH, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__RESEND))),
+                showMenuItemReply && (React__default.createElement("div", { className: "sendbird-message__bottomsheet--action\n                      ".concat(disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : '', "\n                    "), role: "menuitem", "aria-disabled": disableReaction ? true : false, onClick: function () {
+                        if (!disableReaction) {
+                            hideMenu();
+                            setQuoteMessage(message);
+                        }
+                    } },
+                    React__default.createElement(Icon, { type: IconTypes.REPLY, fillColor: disableReaction
+                            ? IconColors.ON_BACKGROUND_3
+                            : IconColors.PRIMARY, width: "24px", height: "24px" }),
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: disableReaction ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__REPLY))),
+                showMenuItemThread && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
+                        hideMenu();
+                        onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
+                    } },
+                    React__default.createElement(Icon, { type: IconTypes.THREAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__THREAD))),
+                showMenuItemDeleteFinal && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
+                        if (isFailedMessage(message)) {
+                            hideMenu();
+                            deleteMessage === null || deleteMessage === void 0 ? void 0 : deleteMessage(message);
+                        }
+                        else if (!disableDelete) {
+                            hideMenu();
+                            showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
+                        }
+                    } },
+                    React__default.createElement(Icon, { type: IconTypes.DELETE, fillColor: disableDelete
+                            ? IconColors.ON_BACKGROUND_4
+                            : IconColors.PRIMARY, width: "24px", height: "24px" }),
+                    React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: disableDelete
+                            ? LabelColors.ONBACKGROUND_4
+                            : LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__DELETE))),
+                showMenuItemDownload && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
+                        hideMenu();
+                    } },
+                    React__default.createElement("a", { className: "sendbird-message__bottomsheet--hyperlink", rel: "noopener noreferrer", href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url, target: "_blank" },
+                        React__default.createElement(Icon, { type: IconTypes.DOWNLOAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+                        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__SAVE)))))))));
+};
+
+var MobileMenu = function (props) {
+    var message = props.message, hideMenu = props.hideMenu, userId = props.userId, channel = props.channel, _a = props.isReactionEnabled, isReactionEnabled = _a === void 0 ? false : _a, isByMe = props.isByMe, replyType = props.replyType, disabled = props.disabled, deleteMenuState = props.deleteMenuState, showRemove = props.showRemove, showEdit = props.showEdit, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, setQuoteMessage = props.setQuoteMessage, emojiContainer = props.emojiContainer, toggleReaction = props.toggleReaction, parentRef = props.parentRef, onReplyInThread = props.onReplyInThread, isOpenedFromThread = props.isOpenedFromThread;
+    return (React__default.createElement(React__default.Fragment, null, isReactionEnabled
+        ? (React__default.createElement(MobileBottomSheet, { channel: channel, message: message, hideMenu: hideMenu, isByMe: isByMe, userId: userId, replyType: replyType, disabled: disabled, showRemove: showRemove, showEdit: showEdit, deleteMenuState: deleteMenuState, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, emojiContainer: emojiContainer, toggleReaction: toggleReaction, isReactionEnabled: isReactionEnabled, onReplyInThread: onReplyInThread, isOpenedFromThread: isOpenedFromThread })) : (React__default.createElement(MobileContextMenu, { channel: channel, userId: userId, message: message, hideMenu: hideMenu, isByMe: isByMe, showEdit: showEdit, replyType: replyType, disabled: disabled, deleteMenuState: deleteMenuState, showRemove: showRemove, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, parentRef: parentRef, onReplyInThread: onReplyInThread, isOpenedFromThread: isOpenedFromThread }))));
+};
+
+export { MobileMenu as M };
+//# sourceMappingURL=bundle-Hs9aaQff.js.map

package/dist/chunks/bundle-Hs9aaQff.js.map

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