@sendbird/uikit-react 3.7.0 → 3.8.0

package/cjs/chunks/bundle-P0kNl8GH.js

@@ -0,0 +1,236 @@
+'use strict';
+
+var _tslib = require('./bundle-hK4x7nmG.js');
+var React = require('react');
+var ui_Button = require('../ui/Button.js');
+var ui_ContextMenu = require('../ui/ContextMenu.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Label = require('./bundle-6ziaqiUd.js');
+var LocalizationContext = require('./bundle-QmSa90PC.js');
+var UserProfileContext = require('./bundle-4bb_98h6.js');
+require('./bundle-YNHu-c84.js');
+var ui_Avatar = require('../ui/Avatar.js');
+require('react-dom');
+require('./bundle-Y9TkHVI5.js');
+var ui_MutedAvatarOverlay = require('../ui/MutedAvatarOverlay.js');
+var ui_UserProfile = require('../ui/UserProfile.js');
+var OpenChannelSettings_context = require('../OpenChannelSettings/context.js');
+require('../withSendbird.js');
+var ui_Modal = require('./bundle-UooP2IDU.js');
+var ui_UserListItem = require('../ui/UserListItem.js');
+var utils = require('./bundle-1yOirqug.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+
+function ParticipantsModal(_a) {
+    var _b, _c, _d;
+    var onCancel = _a.onCancel;
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _e = React.useState([]), participants = _e[0], setParticipants = _e[1];
+    var _f = React.useState(null), participantListQuery = _f[0], setParticipantListQuery = _f[1];
+    var userId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var sdk = (_d = (_c = state === null || state === void 0 ? void 0 : state.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
+    var isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
+    React.useEffect(function () {
+        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
+        setParticipantListQuery(participantListQuery);
+        participantListQuery.next().then(function (participantList) {
+            setParticipants(participantList);
+        });
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(ui_Modal.Modal, { hideFooter: true, isFullScreenOnMobile: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE },
+            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
+                    var hasNext = participantListQuery.hasNext;
+                    var target = e.target;
+                    var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+                    if (hasNext && fetchMore) {
+                        participantListQuery.next().then(function (fetchedParticipants) {
+                            setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
+                        });
+                    }
+                } }, participants.map(function (p) {
+                var _a;
+                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+                return (React.createElement(ui_UserListItem, { user: p, key: p.userId, currentUser: (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId, action: (userId !== p.userId && isOperatorView)
+                        ? function (_a) {
+                            var actionRef = _a.actionRef, parentRef = _a.parentRef;
+                            return (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleDropdown },
+                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentContainRef: parentRef, parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (isOperator) {
+                                                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (p.isMuted) {
+                                                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                                                closeDropdown();
+                                            });
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }));
+                        }
+                        : null }));
+            })))));
+}
+
+var UserListItem = function (_a) {
+    var user = _a.user, currentUser = _a.currentUser, isOperator = _a.isOperator, action = _a.action;
+    var avatarRef = React.useRef(null);
+    var actionRef = React.useRef(null);
+    var _b = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _b.disableUserProfile, renderUserProfile = _b.renderUserProfile;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-participants-accordion__member" },
+        React.createElement("div", { className: "sendbird-participants-accordion__member-avatar" },
+            React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(React.Fragment, null,
+                    React.createElement(ui_Avatar.default, { className: "sendbird-participants-accordion__member-avatar__avatar", onClick: function () {
+                            if (!disableUserProfile) {
+                                toggleDropdown();
+                            }
+                        }, ref: avatarRef, src: user.profileUrl, width: 24, height: 24 }),
+                    (user === null || user === void 0 ? void 0 : user.isMuted) ? (React.createElement(ui_MutedAvatarOverlay, null)) : '')); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { openLeft: true, parentRef: avatarRef, 
+                    // for catching location(x, y) of MenuItems
+                    parentContainRef: avatarRef, 
+                    // for toggling more options(menus & reactions)
+                    closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } }, renderUserProfile
+                    ? renderUserProfile({
+                        user: user,
+                        currentUserId: currentUser,
+                        close: closeDropdown,
+                    })
+                    : (React.createElement(ui_UserProfile, { disableMessaging: true, user: user, currentUserId: currentUser, onSuccess: closeDropdown })))); } })),
+        React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 },
+            user.nickname || stringSet.NO_NAME,
+            (currentUser === user.userId) && (stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__YOU)),
+        !user.nickname && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title user-id", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)),
+        isOperator && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title\n                ".concat((user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : '', "\n                ").concat((user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : '', "\n              "), type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR)),
+        action && (React.createElement("div", { className: "sendbird-participants-accordion__member__action", ref: actionRef }, action({ actionRef: actionRef })))));
+};
+
+function ParticipantList(_a) {
+    var _b;
+    var _c = _a.isOperatorView, isOperatorView = _c === void 0 ? false : _c;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    var currentUserId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _d = React.useState(null), participants = _d[0], setParticipants = _d[1];
+    var _e = React.useState(null), participantListQuery = _e[0], setParticipantListQuery = _e[1];
+    var _f = React.useState(false), showParticipantsModal = _f[0], setShowParticipantsModal = _f[1];
+    React.useEffect(function () {
+        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
+        setParticipantListQuery(participantListQuery);
+        participantListQuery.next().then(function (participants) {
+            setParticipants(participants);
+        });
+    }, [channel]);
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setParticipants([]);
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
+        participantListQuery.next().then(function (participants) {
+            setParticipants(participants);
+        });
+    }, [channel]);
+    return (React.createElement("div", { className: "sendbird-openchannel-settings__participant-list", onScroll: function (e) {
+            var hasNext = participantListQuery.hasNext;
+            var target = e.target;
+            var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+            if (hasNext && fetchMore) {
+                participantListQuery.next().then(function (fetchedParticipants) {
+                    setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
+                });
+            }
+        } },
+        React.createElement("div", null, participants === null || participants === void 0 ? void 0 :
+            participants.map(function (p) {
+                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+                return (React.createElement(UserListItem, { user: p, currentUser: currentUserId, key: p.userId, isOperator: isOperator, action: function (_a) {
+                        var actionRef = _a.actionRef;
+                        return ((isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId))
+                            ? (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-openchannel-participant-list__menu", width: "32px", height: "32px", onClick: toggleDropdown },
+                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (isOperator) {
+                                                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (p.isMuted) {
+                                                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                                                closeDropdown();
+                                                refreshList();
+                                            });
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }))
+                            : null);
+                    } }));
+            }),
+            (participants && participants.length === 0)
+                ? (React.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST)) : null,
+            React.createElement("div", { className: "sendbird-openchannel-participant-list__footer" }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowParticipantsModal(true); } }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE))),
+            showParticipantsModal && (React.createElement(ParticipantsModal, { onCancel: function () {
+                    setShowParticipantsModal(false);
+                    refreshList();
+                } })))));
+}
+
+exports.ParticipantList = ParticipantList;
+exports.UserListItem = UserListItem;
+//# sourceMappingURL=bundle-P0kNl8GH.js.map

package/cjs/chunks/bundle-P0kNl8GH.js.map

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

package/cjs/{const-c9e7a340.js → chunks/bundle-P_B0eyVT.js}

@@ -1,14 +1,14 @@
 '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";
+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;
@@ -16,4 +16,4 @@ 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=const-c9e7a340.js.map
+//# sourceMappingURL=bundle-P_B0eyVT.js.map

package/cjs/chunks/bundle-P_B0eyVT.js.map

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

package/cjs/chunks/bundle-QfhZ2YNP.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var React = require('react');
+var ui_ContextMenu = require('../ui/ContextMenu.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-QmSa90PC.js');
+
+var OpenChannelMessageStatusTypes = {
+    NONE: 'none',
+    PENDING: 'pending',
+    FAILED: 'failed',
+    CANCELED: 'canceled',
+    SUCCEEDED: 'succeeded',
+};
+var getSenderFromMessage = function (message) {
+    // @ts-ignore
+    return message.sender || message._sender;
+};
+var checkIsSent = function (status) { return (status === OpenChannelMessageStatusTypes.SUCCEEDED); };
+var checkIsPending = function (status) { return (status === OpenChannelMessageStatusTypes.PENDING); };
+var checkIsFailed = function (status) { return (status === OpenChannelMessageStatusTypes.FAILED); };
+var checkIsByMe = function (message, userId) { return (getSenderFromMessage(message).userId === userId); };
+var isFineCopy = function (_a) {
+    var _b;
+    var message = _a.message;
+    return ((message === null || message === void 0 ? void 0 : message.messageType) === 'user' && ((_b = message === null || message === void 0 ? void 0 : message.message) === null || _b === void 0 ? void 0 : _b.length) > 0);
+};
+var isFineResend = function (_a) {
+    var message = _a.message, status = _a.status, userId = _a.userId;
+    return checkIsByMe(message, userId)
+        && checkIsFailed(status)
+        // @ts-ignore
+        && (message === null || message === void 0 ? void 0 : message.isResendable());
+};
+var isFineEdit = function (_a) {
+    var _b;
+    var message = _a.message, status = _a.status, userId = _a.userId;
+    return checkIsByMe(message, userId) && checkIsSent(status) && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message));
+};
+var isFineDelete = function (_a) {
+    var message = _a.message, userId = _a.userId;
+    return checkIsByMe(message, userId);
+};
+var isFineDownload = function (_a) {
+    var _b;
+    var message = _a.message, status = _a.status;
+    if (((_b = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _b === void 0 ? void 0 : _b.call(message)) && checkIsSent(status)) {
+        return true;
+    }
+    return false;
+};
+var showMenuTrigger = function (props) {
+    var message = props.message, status = props.status, userId = props.userId;
+    // @ts-ignore
+    if (message.messageType === 'user') {
+        return (isFineDelete({ message: message, status: status, userId: userId })
+            || isFineEdit({ message: message, status: status, userId: userId })
+            // @ts-ignore
+            || isFineCopy({ message: message, status: status, userId: userId })
+            || isFineResend({ message: message, status: status, userId: userId }));
+    }
+    else {
+        return (isFineDelete({ message: message, status: status, userId: userId })
+            || isFineResend({ message: message, status: status, userId: userId }));
+    }
+};
+
+var OpenChannelMobileMenu = function (props) {
+    var _a, _b;
+    var message = props.message, parentRef = props.parentRef, resendMessage = props.resendMessage, showEdit = props.showEdit, showRemove = props.showRemove, copyToClipboard = props.copyToClipboard, hideMenu = props.hideMenu, _c = props.isEphemeral, isEphemeral = _c === void 0 ? false : _c;
+    var userMessage = message;
+    var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var userId = (_b = (_a = useSendbirdStateContext.useSendbirdStateContext()) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var fileMessage = message;
+    return (React.createElement(ui_ContextMenu.default, { isOpen: true, menuItems: function () { return (React.createElement(ui_ContextMenu.MenuItems, { className: "sendbird-openchannel__mobile-menu", parentRef: parentRef, parentContainRef: parentRef, closeDropdown: hideMenu },
+            isFineCopy({ message: userMessage, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-og-message__top__context-menu__copy", onClick: function () {
+                    copyToClipboard();
+                }, dataSbId: "open_channel_mobile_context_menu_copy" },
+                React.createElement(React.Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__COPY))),
+            (!isEphemeral && isFineEdit({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-og-message__top__context-menu__edit", onClick: function () {
+                    showEdit();
+                }, dataSbId: "open_channel_mobile_context_menu_edit" },
+                React.createElement(React.Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__EDIT))),
+            isFineResend({ message: message, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                    resendMessage();
+                }, dataSbId: "open_channel_mobile_context_menu_resend" },
+                React.createElement(React.Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__RESEND))),
+            (!isEphemeral && isFineDelete({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                    showRemove();
+                }, dataSbId: "open_channel_mobile_context_menu_delete" },
+                React.createElement(React.Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__DELETE))),
+            isFineDownload({ message: message, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                    hideMenu();
+                }, dataSbId: "open_channel_mobile_context_menu_download_file" },
+                React.createElement("a", { className: "sendbird-openchannel__mobile-menu-hyperlink", rel: "noopener noreferrer", href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url, target: "_blank" }, stringSet.CONTEXT_MENU_DROPDOWN__SAVE))))); } }));
+};
+
+exports.OpenChannelMobileMenu = OpenChannelMobileMenu;
+exports.checkIsFailed = checkIsFailed;
+exports.checkIsPending = checkIsPending;
+exports.checkIsSent = checkIsSent;
+exports.getSenderFromMessage = getSenderFromMessage;
+exports.isFineCopy = isFineCopy;
+exports.isFineDelete = isFineDelete;
+exports.isFineEdit = isFineEdit;
+exports.isFineResend = isFineResend;
+exports.showMenuTrigger = showMenuTrigger;
+//# sourceMappingURL=bundle-QfhZ2YNP.js.map

package/cjs/chunks/bundle-QfhZ2YNP.js.map

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

package/cjs/chunks/bundle-QmSa90PC.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var stringSet = require('./bundle-z-Bvsn0B.js');
+var index = require('./bundle-n1yh-qDb.js');
+
+var LocalizationContext = React.createContext({
+    stringSet: stringSet.getStringSet('en'),
+    dateLocale: index.defaultLocale,
+});
+var LocalizationProvider = function (props) {
+    var children = props.children;
+    return (React.createElement(LocalizationContext.Provider, { value: props }, children));
+};
+var useLocalization = function () { return React.useContext(LocalizationContext); };
+
+exports.LocalizationContext = LocalizationContext;
+exports.LocalizationProvider = LocalizationProvider;
+exports.useLocalization = useLocalization;
+//# sourceMappingURL=bundle-QmSa90PC.js.map

package/cjs/chunks/bundle-QmSa90PC.js.map

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

package/cjs/{consts-b711321c.js → chunks/bundle-RaQV-Bpr.js}

@@ -3,4 +3,4 @@
 var OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';
 
 exports.OG_MESSAGE_BODY_CLASSNAME = OG_MESSAGE_BODY_CLASSNAME;
-//# sourceMappingURL=consts-b711321c.js.map
+//# sourceMappingURL=bundle-RaQV-Bpr.js.map

package/cjs/chunks/bundle-RaQV-Bpr.js.map

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

package/cjs/chunks/bundle-RlFjml8m.js

@@ -0,0 +1,178 @@
+'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-FHx0K-3z.js');
+var ui_FileViewer = require('./bundle-JggdKsJa.js');
+var index_module = require('./bundle-I_9_5a8a.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 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: 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-RlFjml8m.js.map

package/cjs/chunks/bundle-RlFjml8m.js.map

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