@sendbird/uikit-react 3.10.0 → 3.10.2-alpha.0

package/cjs/chunks/bundle-Eqd9bAds.js

@@ -0,0 +1,292 @@
+'use strict';
+
+var _tslib = require('./bundle-DhtZdKsr.js');
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var Channel_context = require('../Channel/context.js');
+var index = require('./bundle-nox41MG6.js');
+var utils$1 = require('./bundle-CrbMqpah.js');
+var index$1 = require('./bundle-tntEm-Mv.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var SuggestedMentionListView = require('./bundle--QPuGnli.js');
+var utils = require('./bundle-jcgWT1ad.js');
+var Message_hooks_useDirtyGetMentions = require('../Message/hooks/useDirtyGetMentions.js');
+var ui_DateSeparator = require('../ui/DateSeparator.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var ui_MessageInput = require('../ui/MessageInput.js');
+var _const = require('./bundle--tki3Ejh.js');
+var ui_MessageContent = require('../ui/MessageContent.js');
+var Channel_components_FileViewer = require('./bundle-LsJ9u7uN.js');
+var Channel_components_RemoveMessageModal = require('./bundle--t85OO-4.js');
+
+var useDidMountEffect = function (func, deps) {
+    var _a = React.useState(false), didMount = _a[0], setDidmount = _a[1];
+    React.useEffect(function () {
+        if (didMount) {
+            func();
+        }
+        else {
+            setDidmount(true);
+        }
+    }, deps);
+};
+
+function omitObjectProperties(obj, properties) {
+    var newObj = _tslib.__assign({}, obj);
+    properties.forEach(function (propertyName) {
+        if (Object.hasOwn(newObj, propertyName))
+            delete newObj[propertyName];
+    });
+    return newObj;
+}
+
+var SuggestedReplies = function (_a) {
+    var replyOptions = _a.replyOptions, onSendMessage = _a.onSendMessage;
+    var _b = React.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.createElement("div", { className: "sendbird-suggested-replies" }, replyOptions.map(function (option, index) {
+        return (React.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.createElement(ui_MessageContent, _tslib.__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 = LocalizationContext.useLocalization(), dateLocale = _d.dateLocale, stringSet = _d.stringSet;
+    var globalStore = useSendbirdStateContext.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) || SuggestedMentionListView.MAX_USER_MENTION_COUNT;
+    var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || SuggestedMentionListView.MAX_USER_SUGGESTION_COUNT;
+    var _f = React.useState(false), showEdit = _f[0], setShowEdit = _f[1];
+    var _g = React.useState(false), showRemove = _g[0], setShowRemove = _g[1];
+    var _h = React.useState(false), showFileViewer = _h[0], setShowFileViewer = _h[1];
+    var _j = React.useState(false), isAnimated = _j[0], setIsAnimated = _j[1];
+    var _k = React.useState(false), isHighlighted = _k[0], setIsHighlighted = _k[1];
+    var _l = React.useState(''), mentionNickname = _l[0], setMentionNickname = _l[1];
+    var _m = React.useState([]), mentionedUsers = _m[0], setMentionedUsers = _m[1];
+    var _o = React.useState([]), mentionedUserIds = _o[0], setMentionedUserIds = _o[1];
+    var _p = React.useState(null), messageInputEvent = _p[0], setMessageInputEvent = _p[1];
+    var _q = React.useState(null), selectedUser = _q[0], setSelectedUser = _q[1];
+    var _r = React.useState([]), mentionSuggestedUsers = _r[0], setMentionSuggestedUsers = _r[1];
+    var editMessageInputRef = React.useRef(null);
+    var messageScrollRef = React.useRef(null);
+    var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !utils.isDisabledBecauseFrozen(channel) && !utils.isDisabledBecauseMuted(channel);
+    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+    React.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]);
+    React.useLayoutEffect(function () {
+        // Keep the scrollBottom value after fetching new message list
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, []);
+    React.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]);
+    React.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 = React.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 = React.useMemo(function () { return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage(omitObjectProperties(props, ['renderMessage'])); }, [message, renderMessage]);
+    if (renderedMessage) {
+        return (React.createElement("div", { "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef, className: index.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.createElement(ui_DateSeparator, null,
+                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.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.createElement(React.Fragment, null,
+            displaySuggestedMentionList && (React.createElement(SuggestedMentionListView.SuggestedMentionListView, { currentChannel: channel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
+                    if (user) {
+                        setMentionedUsers(_tslib.__spreadArray(_tslib.__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.createElement(ui_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 === _const.MessageInputKeys.Enter && ableMention)
+                            || e.key === _const.MessageInputKeys.ArrowUp
+                            || e.key === _const.MessageInputKeys.ArrowDown)) {
+                        setMessageInputEvent(e);
+                        return true;
+                    }
+                    return false;
+                } }))));
+    }
+    return (React.createElement("div", { className: index.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.createElement(ui_DateSeparator, null,
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.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.createElement(SuggestedReplies, { replyOptions: index.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;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var _b = Channel_context.useChannelContext(), initialized = _b.initialized, currentGroupChannel = _b.currentGroupChannel, highLightedMessageId = _b.highLightedMessageId, setHighLightedMessageId = _b.setHighLightedMessageId, animatedMessageId = _b.animatedMessageId, setAnimatedMessageId = _b.setAnimatedMessageId, updateMessage = _b.updateMessage, scrollToMessage = _b.scrollToMessage, replyType = _b.replyType, threadReplySelectType = _b.threadReplySelectType, isReactionEnabled = _b.isReactionEnabled, toggleReaction = _b.toggleReaction, emojiContainer = _b.emojiContainer, nicknamesMap = _b.nicknamesMap, setQuoteMessage = _b.setQuoteMessage, resendMessage = _b.resendMessage, deleteMessage = _b.deleteMessage, renderUserMentionItem = _b.renderUserMentionItem, onReplyInThread = _b.onReplyInThread, onQuoteMessageClick = _b.onQuoteMessageClick, onMessageAnimated = _b.onMessageAnimated, onMessageHighlighted = _b.onMessageHighlighted, sendMessage = _b.sendMessage, localMessages = _b.localMessages;
+    var message = props.message;
+    return (React.createElement(MessageView, _tslib.__assign({}, props, { channel: currentGroupChannel, emojiContainer: emojiContainer, editInputDisabled: !initialized || utils$1.isDisabledBecauseFrozen(currentGroupChannel) || utils$1.isDisabledBecauseMuted(currentGroupChannel) || !config.isOnline, shouldRenderSuggestedReplies: message.messageId === ((_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.lastMessage) === null || _a === void 0 ? void 0 : _a.messageId)
+            // the options should appear only when there's no failed or pending messages
+            && localMessages.every(function (message) { return message.sendingStatus === 'succeeded'; })
+            && index.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.createElement(Channel_components_FileViewer.FileViewer, _tslib.__assign({}, props)); }, renderRemoveMessageModal: function (props) { return React.createElement(Channel_components_RemoveMessageModal.RemoveMessageModal, _tslib.__assign({}, props)); } })));
+};
+
+exports.Message = Message;
+exports.MessageView = MessageView;
+//# sourceMappingURL=bundle-Eqd9bAds.js.map

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

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

package/cjs/chunks/{bundle-FJe6Dl-f.js → bundle-H9rcn1PJ.js}

@@ -232,4 +232,4 @@ var getStringSet = function (lang) {
 };
 
 exports.getStringSet = getStringSet;
-//# sourceMappingURL=bundle-FJe6Dl-f.js.map
+//# sourceMappingURL=bundle-H9rcn1PJ.js.map

package/{chunks/bundle-iifpyLxR.js.map → cjs/chunks/bundle-H9rcn1PJ.js.map}

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

package/cjs/chunks/{bundle-EdNscsik.js → bundle-HQAiUNev.js}

@@ -14,4 +14,4 @@ var pxToNumber = function (px) {
 };
 
 exports.pxToNumber = pxToNumber;
-//# sourceMappingURL=bundle-EdNscsik.js.map
+//# sourceMappingURL=bundle-HQAiUNev.js.map

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

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

package/cjs/chunks/bundle-JBbKwE7L.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+
+function useReconnectOnIdle(isOnline, currentGroupChannel, reconnectOnIdle) {
+    if (reconnectOnIdle === void 0) { reconnectOnIdle = true; }
+    var _a = React.useState(false), isTabHidden = _a[0], setIsTabHidden = _a[1];
+    var wasOffline = !isOnline;
+    React.useEffect(function () {
+        var handleVisibilityChange = function () {
+            if (reconnectOnIdle) {
+                setIsTabHidden(document.hidden);
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return function () {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [reconnectOnIdle, document.hidden]);
+    var shouldReconnect = wasOffline && (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) != null && !isTabHidden;
+    return { shouldReconnect: shouldReconnect };
+}
+
+exports.useReconnectOnIdle = useReconnectOnIdle;
+//# sourceMappingURL=bundle-JBbKwE7L.js.map

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

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

package/cjs/chunks/{bundle-IVfrW5UV.js → bundle-KBZdi1sN.js}

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
-var index = require('./bundle-bPLEZuwe.js');
-var LocalizationContext = require('./bundle-M_JdGFB9.js');
+var index = require('./bundle-nox41MG6.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-wDJ0vmp7.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
 var ui_BottomSheet = require('../ui/BottomSheet.js');
 var ui_ImageRenderer = require('../ui/ImageRenderer.js');
 var ui_ReactionButton = require('../ui/ReactionButton.js');
@@ -147,14 +147,20 @@ var MobileBottomSheet = function (props) {
                                     hideMenu();
                                     toggleReaction(message, emoji.key, isReacted);
                                 }, dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
-                                React.createElement(ui_ImageRenderer.default, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React.createElement("div", { style: style },
-                                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                                React.createElement(ui_ImageRenderer.default, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (_a) {
+                                        var style = _a.style;
+                                        return (React.createElement("div", { style: style },
+                                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                                    } })));
                         }),
                         canShowMoreEmojis && !showEmojisOnly && (React.createElement(ui_ReactionButton, { key: "emoji_more", width: "38px", height: "38px", onClick: function () {
                                 setShowEmojisOnly(true);
                             }, dataSbId: "ui_mobile_emoji_reactions_menu_emojiadd" },
-                            React.createElement(ui_ImageRenderer.default, { url: '', width: "28px", height: "28px", placeHolder: function (style) { return (React.createElement("div", { style: style },
-                                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.EMOJI_MORE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }))))))),
+                            React.createElement(ui_ImageRenderer.default, { url: '', width: "28px", height: "28px", placeHolder: function (_a) {
+                                    var style = _a.style;
+                                    return (React.createElement("div", { style: style },
+                                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.EMOJI_MORE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                                } }))))))),
             !showEmojisOnly && (React.createElement("div", { className: 'sendbird-message__bottomsheet--actions' },
                 showMenuItemCopy && (React.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
                         hideMenu();
@@ -221,4 +227,4 @@ var MobileMenu = function (props) {
 };
 
 exports.MobileMenu = MobileMenu;
-//# sourceMappingURL=bundle-IVfrW5UV.js.map
+//# sourceMappingURL=bundle-KBZdi1sN.js.map

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

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

package/cjs/chunks/{bundle-4F7u20x2.js → bundle-KWR-0b7P.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index$1 = require('./bundle-bPLEZuwe.js');
-var index = require('./bundle-X1vsWmGi.js');
+var index$1 = require('./bundle-nox41MG6.js');
+var index = require('./bundle-xM2DAzE6.js');
 
 function getMessageFirstFileType(message) {
     return index.K(message)
@@ -71,4 +71,4 @@ exports.getMessageFirstFileName = getMessageFirstFileName;
 exports.getMessageFirstFileThumbnailUrl = getMessageFirstFileThumbnailUrl;
 exports.getMessageFirstFileType = getMessageFirstFileType;
 exports.getMessageFirstFileUrl = getMessageFirstFileUrl;
-//# sourceMappingURL=bundle-4F7u20x2.js.map
+//# sourceMappingURL=bundle-KWR-0b7P.js.map

package/cjs/chunks/bundle-KWR-0b7P.js.map

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

package/cjs/chunks/bundle-LsJ9u7uN.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var _tslib = require('./bundle-DhtZdKsr.js');
+var React = require('react');
+var reactDom = require('react-dom');
+var ui_Avatar = require('./bundle-w0ATt2gt.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var index = require('./bundle-nox41MG6.js');
+require('../hooks/useModal.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
+var Channel_context = require('../Channel/context.js');
+
+var FileViewerView = function (_a) {
+    var message = _a.message, onCancel = _a.onCancel, deleteMessage = _a.deleteMessage;
+    var sender = message.sender, type = message.type, url = message.url, _b = message.name, name = _b === void 0 ? '' : _b, threadInfo = message.threadInfo;
+    var profileUrl = sender.profileUrl, nickname = sender.nickname, userId = sender.userId;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    return reactDom.createPortal(React.createElement(FileViewerComponent, { profileUrl: profileUrl, nickname: nickname, type: type, url: url, name: name, onCancel: onCancel, onDelete: function () { return deleteMessage(message).then(function () { return onCancel(); }); }, isByMe: config.userId === userId, disableDelete: (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0 }), document.getElementById(ui_Modal.MODAL_ROOT));
+};
+var FileViewerComponent = function (_a) {
+    var 
+    // sender
+    profileUrl = _a.profileUrl, nickname = _a.nickname, 
+    // file
+    name = _a.name, type = _a.type, url = _a.url, 
+    // others
+    isByMe = _a.isByMe, onCancel = _a.onCancel, onDelete = _a.onDelete, disableDelete = _a.disableDelete;
+    return (React.createElement("div", { className: "sendbird-fileviewer" },
+        React.createElement("div", { className: "sendbird-fileviewer__header" },
+            React.createElement("div", { className: "sendbird-fileviewer__header__left" },
+                React.createElement("div", { className: "sendbird-fileviewer__header__left__avatar" },
+                    React.createElement(ui_Avatar.Avatar, { height: "32px", width: "32px", src: profileUrl })),
+                React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__filename", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, name),
+                React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__sender-name", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, nickname)),
+            React.createElement("div", { className: "sendbird-fileviewer__header__right" },
+                index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions" },
+                    React.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank" },
+                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DOWNLOAD, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px" })),
+                    onDelete && isByMe && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete" },
+                        React.createElement(ui_Icon.default, { className: disableDelete ? 'disabled' : '', type: ui_Icon.IconTypes.DELETE, fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function () {
+                                if (!disableDelete) {
+                                    onDelete();
+                                }
+                            } }))))),
+                React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__close" },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: onCancel })))),
+        React.createElement("div", { className: "sendbird-fileviewer__content" },
+            index.isVideo(type) && (React.createElement("video", { controls: true, className: "sendbird-fileviewer__content__video" },
+                React.createElement("source", { src: url, type: type }))),
+            index.isImage(type) && React.createElement("img", { src: url, alt: name, className: "sendbird-fileviewer__content__img" }),
+            !index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__content__unsupported" },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, "Unsupoprted message"))))));
+};
+
+var FileViewer = function (props) {
+    var deleteMessage = Channel_context.useChannelContext().deleteMessage;
+    return React.createElement(FileViewerView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+exports.FileViewer = FileViewer;
+exports.FileViewerView = FileViewerView;
+//# sourceMappingURL=bundle-LsJ9u7uN.js.map

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

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

package/cjs/chunks/{bundle-waeY4XbU.js → bundle-MNUU2JEo.js}

@@ -2,8 +2,6 @@
 
 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) {
@@ -11,9 +9,7 @@ exports.ThreadReplySelectType = void 0;
     ThreadReplySelectType["THREAD"] = "THREAD";
 })(exports.ThreadReplySelectType || (exports.ThreadReplySelectType = {}));
 
-exports.MAX_USER_MENTION_COUNT = MAX_USER_MENTION_COUNT;
-exports.MAX_USER_SUGGESTION_COUNT = MAX_USER_SUGGESTION_COUNT;
 exports.NEXT_RESULT_SIZE = NEXT_RESULT_SIZE;
 exports.PREV_RESULT_SIZE = PREV_RESULT_SIZE;
 exports.USER_MENTION_TEMP_CHAR = USER_MENTION_TEMP_CHAR;
-//# sourceMappingURL=bundle-waeY4XbU.js.map
+//# sourceMappingURL=bundle-MNUU2JEo.js.map

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

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

package/cjs/chunks/bundle-Msh8rb3L.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * This function helps consider the every condition
+ * related to enabling emoji reaction feature.
+ */
+function getIsReactionEnabled(_a) {
+    var _b = _a.isBroadcast, isBroadcast = _b === void 0 ? false : _b, _c = _a.isSuper, isSuper = _c === void 0 ? false : _c, _d = _a.globalLevel, globalLevel = _d === void 0 ? true : _d, moduleLevel = _a.moduleLevel;
+    return !(isBroadcast || isSuper) && (moduleLevel !== null && moduleLevel !== void 0 ? moduleLevel : globalLevel);
+}
+
+exports.getIsReactionEnabled = getIsReactionEnabled;
+//# sourceMappingURL=bundle-Msh8rb3L.js.map

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

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

package/cjs/chunks/{bundle-TGcw51ZD.js → bundle-NALzAgLv.js}

@@ -1,25 +1,25 @@
 'use strict';
 
-var _tslib = require('./bundle-UHsDbhGB.js');
+var _tslib = require('./bundle-DhtZdKsr.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-wDJ0vmp7.js');
-var LocalizationContext = require('./bundle-M_JdGFB9.js');
-var UserProfileContext = require('./bundle-e6jRRPqy.js');
-require('./bundle-XqtnTNnc.js');
-var ui_Avatar = require('./bundle-OOMB_O1L.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var UserProfileContext = require('./bundle-TPy0gj60.js');
+require('./bundle-v5-SR4v4.js');
+var ui_Avatar = require('./bundle-w0ATt2gt.js');
 require('react-dom');
-require('./bundle-R55qwYIC.js');
+require('./bundle-6zBNmPOP.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-7iyslQY5.js');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-wTtkySLW.js');
+var utils = require('./bundle-Y-_KhZFq.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
 function ParticipantsModal(_a) {
@@ -235,4 +235,4 @@ function ParticipantList(_a) {
 
 exports.ParticipantList = ParticipantList;
 exports.UserListItem = UserListItem;
-//# sourceMappingURL=bundle-TGcw51ZD.js.map
+//# sourceMappingURL=bundle-NALzAgLv.js.map

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

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

package/cjs/chunks/{bundle-sGVgQ4l8.js → bundle-NPzNlnHJ.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var _tslib = require('./bundle-UHsDbhGB.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('./bundle-M_JdGFB9.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
 require('../hooks/useModal.js');
-var index = require('./bundle-bPLEZuwe.js');
-var utils = require('./bundle-wTtkySLW.js');
-var ui_Avatar = require('./bundle-OOMB_O1L.js');
-var ui_Label = require('./bundle-wDJ0vmp7.js');
+var index = require('./bundle-nox41MG6.js');
+var utils = require('./bundle-Y-_KhZFq.js');
+var ui_Avatar = require('./bundle-w0ATt2gt.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
 var ui_Icon = require('../ui/Icon.js');
-var consts = require('./bundle-trkwub16.js');
-var useKeyDown = require('./bundle-WuVcsZSE.js');
-var ui_Modal = require('./bundle-7iyslQY5.js');
+var consts = require('./bundle-UAspU0bH.js');
+var useKeyDown = require('./bundle-zDh-X-Q4.js');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 var SUPPORTED_MIMES = {
@@ -149,4 +149,4 @@ exports.FileViewer = FileViewer;
 exports.FileViewerComponent = FileViewerComponent;
 exports.isImage = isImage;
 exports.isVideo = isVideo;
-//# sourceMappingURL=bundle-sGVgQ4l8.js.map
+//# sourceMappingURL=bundle-NPzNlnHJ.js.map

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

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

package/cjs/chunks/{bundle-fKDcA4eI.js → bundle-NZvAE9FS.js}

@@ -13,4 +13,4 @@ function compareIds(a, b) {
 }
 
 exports.compareIds = compareIds;
-//# sourceMappingURL=bundle-fKDcA4eI.js.map
+//# sourceMappingURL=bundle-NZvAE9FS.js.map

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

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