@sendbird/uikit-react 3.10.1 → 3.11.0

package/chunks/bundle-qGLQQXlH.js

@@ -0,0 +1,281 @@
+import { a as __spreadArray, _ as __assign } from './bundle-fgwje9pW.js';
+import React__default, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { useChannelContext } from '../Channel/context.js';
+import { r as getClassName, g as getSuggestedReplies } from './bundle-GQt7EDbt.js';
+import { b as isDisabledBecauseFrozen$1, c as isDisabledBecauseMuted$1 } from './bundle-BbdMr4SL.js';
+import { f as format } from './bundle-yE5T9BpV.js';
+import { u as useLocalization } from './bundle-hOV701rb.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT, S as SuggestedMentionListView } from './bundle-QOv6Bgtw.js';
+import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted } from './bundle-2mo18Chz.js';
+import { useDirtyGetMentions } from '../Message/hooks/useDirtyGetMentions.js';
+import DateSeparator from '../ui/DateSeparator.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-kVopRZZG.js';
+import MessageInput from '../ui/MessageInput.js';
+import { M as MessageInputKeys } from './bundle-ueo2Sf-L.js';
+import MessageContent from '../ui/MessageContent.js';
+import { F as FileViewer } from './bundle-8CxBlReU.js';
+import { R as RemoveMessageModal } from './bundle-1nyUxr-Z.js';
+
+var useDidMountEffect = function (func, deps) {
+    var _a = useState(false), didMount = _a[0], setDidmount = _a[1];
+    useEffect(function () {
+        if (didMount) {
+            func();
+        }
+        else {
+            setDidmount(true);
+        }
+    }, deps);
+};
+
+var SuggestedReplies = function (_a) {
+    var replyOptions = _a.replyOptions, onSendMessage = _a.onSendMessage;
+    var _b = useState(false), replied = _b[0], setReplied = _b[1];
+    var onClickReply = function (event, option) {
+        event.preventDefault();
+        onSendMessage({ message: option });
+        setReplied(true);
+    };
+    if (replied) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: "sendbird-suggested-replies" }, replyOptions.map(function (option, index) {
+        return (React__default.createElement("div", { className: "sendbird-suggested-replies__option", id: option, key: index + option, onClick: function (e) { return onClickReply(e, option); } }, option));
+    })));
+};
+
+// TODO: Refactor this component, is too complex now
+var MessageView = function (props) {
+    var _a, _b;
+    var 
+    // MessageProps
+    message = props.message, renderMessage = props.renderMessage, _c = props.renderMessageContent, renderMessageContent = _c === void 0 ? function (props) { return React__default.createElement(MessageContent, __assign({}, props)); } : _c, renderCustomSeparator = props.renderCustomSeparator, renderEditInput = props.renderEditInput, hasSeparator = props.hasSeparator, chainTop = props.chainTop, chainBottom = props.chainBottom, handleScroll = props.handleScroll, 
+    // MessageViewProps
+    channel = props.channel, emojiContainer = props.emojiContainer, editInputDisabled = props.editInputDisabled, shouldRenderSuggestedReplies = props.shouldRenderSuggestedReplies, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, renderUserMentionItem = props.renderUserMentionItem, scrollToMessage = props.scrollToMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onQuoteMessageClick = props.onQuoteMessageClick, onReplyInThreadClick = props.onReplyInThreadClick, sendUserMessage = props.sendUserMessage, updateUserMessage = props.updateUserMessage, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, renderFileViewer = props.renderFileViewer, renderRemoveMessageModal = props.renderRemoveMessageModal, setAnimatedMessageId = props.setAnimatedMessageId, animatedMessageId = props.animatedMessageId, onMessageAnimated = props.onMessageAnimated, highLightedMessageId = props.highLightedMessageId, setHighLightedMessageId = props.setHighLightedMessageId, onMessageHighlighted = props.onMessageHighlighted;
+    var _d = useLocalization(), dateLocale = _d.dateLocale, stringSet = _d.stringSet;
+    var globalStore = useSendbirdStateContext();
+    var _e = globalStore.config, userId = _e.userId, isOnline = _e.isOnline, isMentionEnabled = _e.isMentionEnabled, userMention = _e.userMention, logger = _e.logger;
+    var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || MAX_USER_MENTION_COUNT;
+    var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || MAX_USER_SUGGESTION_COUNT;
+    var _f = useState(false), showEdit = _f[0], setShowEdit = _f[1];
+    var _g = useState(false), showRemove = _g[0], setShowRemove = _g[1];
+    var _h = useState(false), showFileViewer = _h[0], setShowFileViewer = _h[1];
+    var _j = useState(false), isAnimated = _j[0], setIsAnimated = _j[1];
+    var _k = useState(false), isHighlighted = _k[0], setIsHighlighted = _k[1];
+    var _l = useState(''), mentionNickname = _l[0], setMentionNickname = _l[1];
+    var _m = useState([]), mentionedUsers = _m[0], setMentionedUsers = _m[1];
+    var _o = useState([]), mentionedUserIds = _o[0], setMentionedUserIds = _o[1];
+    var _p = useState(null), messageInputEvent = _p[0], setMessageInputEvent = _p[1];
+    var _q = useState(null), selectedUser = _q[0], setSelectedUser = _q[1];
+    var _r = useState([]), mentionSuggestedUsers = _r[0], setMentionSuggestedUsers = _r[1];
+    var editMessageInputRef = useRef(null);
+    var messageScrollRef = useRef(null);
+    var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(channel) && !isDisabledBecauseMuted(channel);
+    var mentionNodes = useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+    useEffect(function () {
+        setMentionedUsers(mentionedUsers.filter(function (_a) {
+            var userId = _a.userId;
+            var i = mentionedUserIds.indexOf(userId);
+            if (i < 0) {
+                return false;
+            }
+            else {
+                mentionedUserIds.splice(i, 1);
+                return true;
+            }
+        }));
+    }, [mentionedUserIds]);
+    /**
+     * Move the messsage list scroll
+     * when the message's height is changed by `showEdit` OR `message.reactions`
+     */
+    useDidMountEffect(function () {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
+    }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
+    useDidMountEffect(function () {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
+    useLayoutEffect(function () {
+        // Keep the scrollBottom value after fetching new message list
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, []);
+    useLayoutEffect(function () {
+        var timeouts = [];
+        if (highLightedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+            setIsAnimated(false);
+            timeouts.push(setTimeout(function () {
+                setIsHighlighted(true);
+            }, 500));
+            timeouts.push(setTimeout(function () {
+                setHighLightedMessageId(0);
+                onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
+            }, 1600));
+        }
+        else {
+            setIsHighlighted(false);
+        }
+        return function () {
+            timeouts.forEach(function (it) { return clearTimeout(it); });
+        };
+    }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
+    useLayoutEffect(function () {
+        var timeouts = [];
+        if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+            setIsHighlighted(false);
+            timeouts.push(setTimeout(function () {
+                setIsAnimated(true);
+            }, 500));
+            timeouts.push(setTimeout(function () {
+                setAnimatedMessageId(0);
+                onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
+            }, 1600));
+        }
+        else {
+            setIsAnimated(false);
+        }
+        return function () {
+            timeouts.forEach(function (it) { return clearTimeout(it); });
+        };
+    }, [animatedMessageId, messageScrollRef.current, message.messageId]);
+    var renderedCustomSeparator = useMemo(function () { var _a; return (_a = renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({ message: message })) !== null && _a !== void 0 ? _a : null; }, [message, renderCustomSeparator]);
+    var renderedMessage = useMemo(function () { return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage(props); }, [message, renderMessage]);
+    if (renderedMessage) {
+        return (React__default.createElement("div", { "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef, className: getClassName([
+                'sendbird-msg-hoc sendbird-msg--scroll-ref',
+                isAnimated ? 'sendbird-msg-hoc__animated' : '',
+                isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
+            ]) },
+            // TODO: Add message instance as a function parameter
+            hasSeparator
+                && (renderedCustomSeparator || (React__default.createElement(DateSeparator, null,
+                    React__default.createElement(Label, { type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 }, format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
+                        locale: dateLocale,
+                    }))))),
+            renderedMessage));
+    }
+    if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
+        return ((renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || (React__default.createElement(React__default.Fragment, null,
+            displaySuggestedMentionList && (React__default.createElement(SuggestedMentionListView, { currentChannel: channel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
+                    if (user) {
+                        setMentionedUsers(__spreadArray(__spreadArray([], mentionedUsers, true), [user], false));
+                    }
+                    setMentionNickname('');
+                    setSelectedUser(user);
+                    setMessageInputEvent(null);
+                }, onFocusItemChange: function () {
+                    setMessageInputEvent(null);
+                }, onFetchUsers: function (users) {
+                    setMentionSuggestedUsers(users);
+                }, ableAddMention: ableMention, maxMentionCount: maxUserMentionCount, maxSuggestionCount: maxUserSuggestionCount })),
+            React__default.createElement(MessageInput, { isEdit: true, channel: channel, disabled: editInputDisabled, ref: editMessageInputRef, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, message: message, onStartTyping: function () {
+                    var _a;
+                    (_a = channel === null || channel === void 0 ? void 0 : channel.startTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
+                }, onUpdateMessage: function (_a) {
+                    var _b;
+                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
+                    updateUserMessage(messageId, {
+                        message: message,
+                        mentionedUsers: mentionedUsers,
+                        mentionedMessageTemplate: mentionTemplate,
+                    });
+                    setShowEdit(false);
+                    (_b = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _b === void 0 ? void 0 : _b.call(channel);
+                }, onCancelEdit: function () {
+                    var _a;
+                    setMentionNickname('');
+                    setMentionedUsers([]);
+                    setMentionedUserIds([]);
+                    setMentionSuggestedUsers([]);
+                    setShowEdit(false);
+                    (_a = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
+                }, onUserMentioned: function (user) {
+                    if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+                        setSelectedUser(null);
+                        setMentionNickname('');
+                    }
+                }, onMentionStringChange: function (mentionText) {
+                    setMentionNickname(mentionText);
+                }, onMentionedUserIdsUpdated: function (userIds) {
+                    setMentionedUserIds(userIds);
+                }, onKeyDown: function (e) {
+                    if (displaySuggestedMentionList
+                        && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
+                        && ((e.key === MessageInputKeys.Enter && ableMention)
+                            || e.key === MessageInputKeys.ArrowUp
+                            || e.key === MessageInputKeys.ArrowDown)) {
+                        setMessageInputEvent(e);
+                        return true;
+                    }
+                    return false;
+                } }))));
+    }
+    return (React__default.createElement("div", { className: getClassName([
+            'sendbird-msg-hoc sendbird-msg--scroll-ref',
+            isAnimated ? 'sendbird-msg-hoc__animated' : '',
+            isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
+        ]), style: { marginBottom: '2px' }, "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef },
+        hasSeparator
+            && (renderedCustomSeparator || (React__default.createElement(DateSeparator, null,
+                React__default.createElement(Label, { type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 }, format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
+                    locale: dateLocale,
+                }))))),
+        renderMessageContent({
+            className: 'sendbird-message-hoc__message-content',
+            userId: userId,
+            scrollToMessage: scrollToMessage,
+            channel: channel,
+            message: message,
+            disabled: !isOnline,
+            chainTop: chainTop,
+            chainBottom: chainBottom,
+            isReactionEnabled: isReactionEnabled,
+            replyType: replyType,
+            threadReplySelectType: threadReplySelectType,
+            nicknamesMap: nicknamesMap,
+            emojiContainer: emojiContainer,
+            showEdit: setShowEdit,
+            showRemove: setShowRemove,
+            showFileViewer: setShowFileViewer,
+            resendMessage: resendMessage,
+            deleteMessage: deleteMessage,
+            toggleReaction: toggleReaction,
+            setQuoteMessage: setQuoteMessage,
+            onReplyInThread: onReplyInThreadClick,
+            onQuoteMessageClick: onQuoteMessageClick,
+            onMessageHeightChange: handleScroll,
+        }),
+        /** Suggested Replies */
+        shouldRenderSuggestedReplies && React__default.createElement(SuggestedReplies, { replyOptions: getSuggestedReplies(message), onSendMessage: sendUserMessage }),
+        showRemove && renderRemoveMessageModal({ message: message, onCancel: function () { return setShowRemove(false); } }),
+        showFileViewer && renderFileViewer({ message: message, onCancel: function () { return setShowFileViewer(false); } })));
+};
+
+var Message = function (props) {
+    var _a, _b;
+    var config = useSendbirdStateContext().config;
+    var _c = useChannelContext(), initialized = _c.initialized, currentGroupChannel = _c.currentGroupChannel, highLightedMessageId = _c.highLightedMessageId, setHighLightedMessageId = _c.setHighLightedMessageId, animatedMessageId = _c.animatedMessageId, setAnimatedMessageId = _c.setAnimatedMessageId, updateMessage = _c.updateMessage, scrollToMessage = _c.scrollToMessage, replyType = _c.replyType, threadReplySelectType = _c.threadReplySelectType, isReactionEnabled = _c.isReactionEnabled, toggleReaction = _c.toggleReaction, emojiContainer = _c.emojiContainer, nicknamesMap = _c.nicknamesMap, setQuoteMessage = _c.setQuoteMessage, resendMessage = _c.resendMessage, deleteMessage = _c.deleteMessage, renderUserMentionItem = _c.renderUserMentionItem, onReplyInThread = _c.onReplyInThread, onQuoteMessageClick = _c.onQuoteMessageClick, onMessageAnimated = _c.onMessageAnimated, onMessageHighlighted = _c.onMessageHighlighted, sendMessage = _c.sendMessage, localMessages = _c.localMessages;
+    var message = props.message;
+    return (React__default.createElement(MessageView, __assign({}, props, { channel: currentGroupChannel, emojiContainer: emojiContainer, editInputDisabled: !initialized || isDisabledBecauseFrozen$1(currentGroupChannel) || isDisabledBecauseMuted$1(currentGroupChannel) || !config.isOnline, shouldRenderSuggestedReplies: ((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies)
+            && message.messageId === ((_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.lastMessage) === null || _b === void 0 ? void 0 : _b.messageId)
+            // the options should appear only when there's no failed or pending messages
+            && (localMessages === null || localMessages === void 0 ? void 0 : localMessages.length) === 0
+            && getSuggestedReplies(message).length > 0, isReactionEnabled: isReactionEnabled, replyType: replyType, threadReplySelectType: threadReplySelectType, nicknamesMap: nicknamesMap, renderUserMentionItem: renderUserMentionItem, scrollToMessage: scrollToMessage, toggleReaction: toggleReaction, setQuoteMessage: setQuoteMessage, onQuoteMessageClick: onQuoteMessageClick, onReplyInThreadClick: onReplyInThread, sendUserMessage: function (params) {
+            sendMessage({
+                message: params.message,
+                mentionedUsers: params.mentionedUsers,
+                mentionTemplate: params.mentionedMessageTemplate,
+            });
+        }, updateUserMessage: function (messageId, params) {
+            updateMessage({
+                messageId: messageId,
+                message: params.message,
+                mentionedUsers: params.mentionedUsers,
+                mentionTemplate: params.mentionedMessageTemplate,
+            });
+        }, resendMessage: resendMessage, deleteMessage: deleteMessage, animatedMessageId: animatedMessageId, setAnimatedMessageId: setAnimatedMessageId, onMessageAnimated: onMessageAnimated, highLightedMessageId: highLightedMessageId, setHighLightedMessageId: setHighLightedMessageId, onMessageHighlighted: onMessageHighlighted, renderFileViewer: function (props) { return React__default.createElement(FileViewer, __assign({}, props)); }, renderRemoveMessageModal: function (props) { return React__default.createElement(RemoveMessageModal, __assign({}, props)); } })));
+};
+
+export { Message as M, MessageView as a };
+//# sourceMappingURL=bundle-qGLQQXlH.js.map

package/chunks/{bundle-MzSKVbUQ.js.map → bundle-qGLQQXlH.js.map}

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

package/chunks/{bundle-cHbX4Rxo.js → bundle-qLmDwx8F.js}

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
-import { p as pubSubTopics, s as shouldPubSubPublishToChannel, a as shouldPubSubPublishToThread } from './bundle-ku6CEjGk.js';
-import { s as scrollIntoLast$1 } from './bundle-xsV7pD8p.js';
-import { f as format } from './bundle-WDOQg3ty.js';
-import { getOutgoingMessageState, OutgoingMessageStates } from '../utils/message/getOutgoingMessageState.js';
+import { p as pubSubTopics, s as shouldPubSubPublishToChannel, a as shouldPubSubPublishToThread } from './bundle-pfcIdF14.js';
+import { s as scrollIntoLast$1 } from './bundle-BbdMr4SL.js';
+import '../utils/message/getOutgoingMessageState.js';
 
 var getNicknamesMapFromMembers = function (members) {
     if (members === void 0) { members = []; }
@@ -48,40 +47,6 @@ function compareIds(a, b) {
     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;
@@ -212,5 +177,5 @@ var useSendMultipleFilesMessage = function (_a, _b) {
     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-cHbX4Rxo.js.map
+export { getNicknamesMapFromMembers as a, compareIds as c, getParentMessageFrom as g, isAboutSame as i, scrollIntoLast as s, useSendMultipleFilesMessage as u };
+//# sourceMappingURL=bundle-qLmDwx8F.js.map

package/{cjs/chunks/bundle-JVe1J2FX.js.map → chunks/bundle-qLmDwx8F.js.map}

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

package/chunks/{bundle-ETZY-eQc.js → bundle-qXA8wWBC.js}

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import DOMPurify from 'dompurify';
-import { a as __spreadArray } from './bundle-GKopZh-T.js';
-import { M as MENTION_USER_LABEL_CLASSNAME } from './bundle-_-2NCsYr.js';
-import { T as TEXT_MESSAGE_BODY_CLASSNAME } from './bundle-Jp5g4YZl.js';
-import { O as OG_MESSAGE_BODY_CLASSNAME } from './bundle-KSjFhl4l.js';
+import { a as __spreadArray } from './bundle-fgwje9pW.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from './bundle-4l6RpXkL.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from './bundle-qvDlYEM_.js';
+import { O as OG_MESSAGE_BODY_CLASSNAME } from './bundle-JHAEGHwc.js';
 
 function renderToString(_a) {
     var userId = _a.userId, nickname = _a.nickname;
@@ -208,4 +208,4 @@ function usePaste(_a) {
 }
 
 export { isChannelTypeSupportsMultipleFilesMessage as i, nodeListToArray as n, renderToString as r, sanitizeString as s, usePaste as u };
-//# sourceMappingURL=bundle-ETZY-eQc.js.map
+//# sourceMappingURL=bundle-qXA8wWBC.js.map

package/chunks/bundle-qXA8wWBC.js.map

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

package/chunks/{bundle-Jp5g4YZl.js → bundle-qvDlYEM_.js}

@@ -1,4 +1,4 @@
 var TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';
 
 export { TEXT_MESSAGE_BODY_CLASSNAME as T };
-//# sourceMappingURL=bundle-Jp5g4YZl.js.map
+//# sourceMappingURL=bundle-qvDlYEM_.js.map

package/chunks/bundle-qvDlYEM_.js.map

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

package/chunks/{bundle-MzSKVbUQ.js → bundle-rCo3Zf4a.js}

@@ -1,18 +1,19 @@
-import React__default, { useState, useContext, useEffect, useCallback } from 'react';
+import React__default, { useState, useContext, useEffect, useMemo, useCallback } from 'react';
 import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
 import IconButton from '../ui/IconButton.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
 import ContextMenu, { MenuItems, MenuItem } from '../ui/ContextMenu.js';
 import UserListItem$1 from '../ChannelSettings/components/UserListItem.js';
-import { a as __spreadArray, _ as __assign } from './bundle-GKopZh-T.js';
-import { M as Modal } from './bundle-VPanFdbf.js';
+import { a as __spreadArray, _ as __assign, b as __awaiter, c as __generator, d as __rest } from './bundle-fgwje9pW.js';
+import { M as Modal } from './bundle-K0s-Ect1.js';
 import UserListItem from '../ui/UserListItem.js';
-import { n as noop } from './bundle-WpHDilD_.js';
+import { n as noop } from './bundle-tOpyp2TM.js';
 import { useChannelSettingsContext } from '../ChannelSettings/context.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { L as LocalizationContext, u as useLocalization } from './bundle-y_LgB6DS.js';
-import './bundle-dWJnfDPH.js';
-import { u as uuidv4 } from './bundle-aeQZ5WsP.js';
+import { L as LocalizationContext, u as useLocalization } from './bundle-hOV701rb.js';
+import './bundle-kVopRZZG.js';
+import { u as useOnScrollPositionChangeDetector } from './bundle-143lYf48.js';
+import { u as uuidv4 } from './bundle-4IsRvL2E.js';
 
 function MembersModal(_a) {
     var _b;
@@ -113,69 +114,105 @@ function MembersModal(_a) {
                 } })); })))));
 }
 
-var isAboutSame = function (a, b, px) { return (Math.abs(a - b) <= px); };
 function InviteUsers(_a) {
+    var _this = this;
     var _b, _c, _d;
     var onCancel = _a.onCancel, onSubmit = _a.onSubmit;
-    var _e = useState([]), members = _e[0], setMembers = _e[1];
-    var _f = useState({}), selectedMembers = _f[0], setSelectedMembers = _f[1];
-    var _g = useState(null), userQuery = _g[0], setUserQuery = _g[1];
+    var _e = useState([]), users = _e[0], setUsers = _e[1];
+    var _f = useState(null), userListQuery = _f[0], setUserListQuery = _f[1];
+    var _g = useState({}), selectedUsers = _g[0], setSelectedUsers = _g[1];
     var state = useSendbirdStateContext();
     var sdk = (_c = (_b = state === null || state === void 0 ? void 0 : state.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
     var globalUserListQuery = (_d = state === null || state === void 0 ? void 0 : state.config) === null || _d === void 0 ? void 0 : _d.userListQuery;
     var _h = useChannelSettingsContext(), channel = _h.channel, overrideInviteUser = _h.overrideInviteUser, queries = _h.queries;
-    var userFilledQuery = __assign({}, queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
     var stringSet = useLocalization().stringSet;
+    var onScroll = useOnScrollPositionChangeDetector({
+        onReachedBottom: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var users_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(userListQuery === null || userListQuery === void 0 ? void 0 : userListQuery.hasNext)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, userListQuery.next()];
+                        case 1:
+                            users_1 = _a.sent();
+                            setUsers(function (prev) { return __spreadArray(__spreadArray([], prev, true), users_1, true); });
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        },
+    });
+    var onInviteUsers = function () { return __awaiter(_this, void 0, void 0, function () {
+        var userIdsToInvite;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    userIdsToInvite = Object.keys(selectedUsers);
+                    if (!(typeof overrideInviteUser === 'function')) return [3 /*break*/, 1];
+                    overrideInviteUser({ users: userIdsToInvite, onClose: onCancel, channel: channel });
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, (channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(userIdsToInvite))];
+                case 2:
+                    _a.sent();
+                    onSubmit(userIdsToInvite);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onSelectUser = function (user) {
+        setSelectedUsers(function (_a) {
+            var draft = __rest(_a, []);
+            if (draft[user.userId]) {
+                delete draft[user.userId];
+            }
+            else {
+                draft[user.userId] = user;
+            }
+            return draft;
+        });
+    };
+    var membersMap = useMemo(function () {
+        var _a;
+        // UIKit policy: In a super or broadcast channel, do not check the members when inviting users.
+        if ((channel === null || channel === void 0 ? void 0 : channel.isSuper) || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast))
+            return _a = {}, _a[sdk.currentUser.userId] = sdk.currentUser, _a;
+        return channel === null || channel === void 0 ? void 0 : channel.members.reduce(function (acc, cur) {
+            acc[cur.userId] = cur;
+            return acc;
+        }, {});
+    }, [channel === null || channel === void 0 ? void 0 : channel.members.length]);
     useEffect(function () {
-        var userListQuery = globalUserListQuery
-            ? globalUserListQuery()
-            : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(userFilledQuery);
-        if (userListQuery === null || userListQuery === void 0 ? void 0 : userListQuery.next) {
-            userListQuery.next().then(function (members) {
-                setMembers(members);
+        var fetchUsersAndSetQuery = function () { return __awaiter(_this, void 0, void 0, function () {
+            var query, users_2;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        query = (_a = globalUserListQuery === null || globalUserListQuery === void 0 ? void 0 : globalUserListQuery()) !== null && _a !== void 0 ? _a : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
+                        if (!query) return [3 /*break*/, 2];
+                        return [4 /*yield*/, query.next()];
+                    case 1:
+                        users_2 = _b.sent();
+                        setUserListQuery(query);
+                        setUsers(users_2);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
             });
-            setUserQuery(userListQuery);
-        }
+        }); };
+        fetchUsersAndSetQuery();
     }, [sdk]);
     return (React__default.createElement("div", null,
-        React__default.createElement(Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedMembers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: function () {
-                var members = Object.keys(selectedMembers).filter(function (m) { return selectedMembers[m]; });
-                if (typeof overrideInviteUser === 'function') {
-                    overrideInviteUser({
-                        users: members,
-                        onClose: onCancel,
-                        channel: channel,
-                    });
-                    return;
-                }
-                channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(members).then(function () {
-                    onSubmit(members);
-                });
-            }, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
-            React__default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
-                    var hasNext = userQuery.hasNext;
-                    var target = e.target;
-                    var fetchMore = isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 20);
-                    if (hasNext && fetchMore) {
-                        userQuery.next().then(function (users) {
-                            setMembers(__spreadArray(__spreadArray([], members, true), users, true));
-                        });
-                    }
-                } },
-                React__default.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, members.map(function (member) {
-                    var _a;
-                    var isJoinedMember = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.some(function (_a) {
-                        var userId = _a.userId;
-                        return userId === (member === null || member === void 0 ? void 0 : member.userId);
-                    });
-                    return (React__default.createElement(UserListItem, { checkBox: true, checked: isJoinedMember || selectedMembers[member.userId], disabled: isJoinedMember, onChange: function (event) {
-                            var _a;
-                            var modifiedSelectedMembers = __assign(__assign({}, selectedMembers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
-                            if (!event.target.checked) {
-                                delete modifiedSelectedMembers[event.target.id];
-                            }
-                            setSelectedMembers(modifiedSelectedMembers);
-                        }, user: member, key: member.userId }));
+        React__default.createElement(Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedUsers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: onInviteUsers, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
+            React__default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: onScroll },
+                React__default.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, users.map(function (user) {
+                    var isMember = Boolean(membersMap[user.userId]);
+                    var isSelected = Boolean(selectedUsers[user.userId]);
+                    return (React__default.createElement(UserListItem, { key: user.userId, checkBox: true, checked: isMember || isSelected, disabled: isMember, user: user, onChange: function () { return onSelectUser(user); } }));
                 }))))));
 }
 
@@ -274,4 +311,4 @@ var MemberList = function () {
 };
 
 export { MemberList as M };
-//# sourceMappingURL=bundle-MzSKVbUQ.js.map
+//# sourceMappingURL=bundle-rCo3Zf4a.js.map

package/chunks/bundle-rCo3Zf4a.js.map

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

package/chunks/{bundle-MyYphU00.js → bundle-rgUMi-vG.js}

@@ -1,13 +1,13 @@
-import { a as __spreadArray } from './bundle-GKopZh-T.js';
+import { a as __spreadArray } from './bundle-fgwje9pW.js';
 import React__default from 'react';
-import { f as format } from './bundle-WDOQg3ty.js';
+import { f as format } from './bundle-yE5T9BpV.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from './bundle-dWJnfDPH.js';
+import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from './bundle-kVopRZZG.js';
 import Loader from '../ui/Loader.js';
-import { c as isImage, s as isGif, f as isVideo, A as isAudio, B as isVoiceMessageMimeType, C as isSentStatus } from './bundle-uk2Y0AQu.js';
+import { v as isImage, y as isGif, x as isVideo, A as isAudio, B as isVoiceMessageMimeType, C as isSentStatus } from './bundle-GQt7EDbt.js';
 import { getOutgoingMessageState, OutgoingMessageStates } from '../utils/message/getOutgoingMessageState.js';
-import { i as isToday, a as isYesterday, b as isThisYear } from './bundle-PZta2LmS.js';
-import { u as useLocalization } from './bundle-y_LgB6DS.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from './bundle-3cuuQsdK.js';
+import { u as useLocalization } from './bundle-hOV701rb.js';
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -127,5 +127,5 @@ function MessageStatus(_a) {
             : getLastMessageCreatedAt({ channel: channel, locale: dateLocale, stringSet: stringSet })))));
 }
 
-export { MessageStatus as M, getTotalMembers as a, getLastMessageCreatedAt as b, getLastMessage as c, getChannelUnreadMessageCount as d, MessageStatusTypes as e, getChannelTitle as g };
-//# sourceMappingURL=bundle-MyYphU00.js.map
+export { MessageStatus as M, getLastMessageCreatedAt as a, getLastMessage as b, getChannelUnreadMessageCount as c, getChannelTitle as d, MessageStatusTypes as e, getTotalMembers as g };
+//# sourceMappingURL=bundle-rgUMi-vG.js.map

package/chunks/bundle-rgUMi-vG.js.map

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

package/chunks/{bundle-niN5G0Bo.js → bundle-s-yWiXW2.js}

@@ -1,4 +1,4 @@
-import { d as VOICE_RECORDER_AUDIO_SAMPLE_RATE } from './bundle-ZKM9Qk_j.js';
+import { c as VOICE_RECORDER_AUDIO_SAMPLE_RATE } from './bundle-zpdae5WH.js';
 import { WavHeader as ut, Mp3Encoder as ht } from '../lame.all.js';
 
 // Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
@@ -122,4 +122,4 @@ function bufferToWav(abuffer, len) {
 }
 
 export { downsampleToWav, encodeMp3 };
-//# sourceMappingURL=bundle-niN5G0Bo.js.map
+//# sourceMappingURL=bundle-s-yWiXW2.js.map

package/chunks/bundle-s-yWiXW2.js.map

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