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

package/chunks/bundle-beMggMMW.js

@@ -0,0 +1,289 @@
+import { _ as __assign, a as __spreadArray } from './bundle-BA7tv0JB.js';
+import React__default, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { useChannelContext } from '../Channel/context.js';
+import { q as getClassName, L as getSuggestedReplies } from './bundle-N9hMnIRl.js';
+import { b as isDisabledBecauseFrozen$1, c as isDisabledBecauseMuted$1 } from './bundle-d5KevIXI.js';
+import { f as format } from './bundle-hDx2-CRe.js';
+import { u as useLocalization } from './bundle-BBjosDA0.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT, S as SuggestedMentionListView } from './bundle-Xytq6xaz.js';
+import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted } from './bundle-tPCzzoc1.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-I8JFwttJ.js';
+import MessageInput from '../ui/MessageInput.js';
+import { M as MessageInputKeys } from './bundle-GGE6HRof.js';
+import MessageContent from '../ui/MessageContent.js';
+import { F as FileViewer } from './bundle-khgxDrnA.js';
+import { R as RemoveMessageModal } from './bundle-bAY1j7eP.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);
+};
+
+function omitObjectProperties(obj, properties) {
+    var newObj = __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 = 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(omitObjectProperties(props, ['renderMessage'])); }, [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;
+    var config = useSendbirdStateContext().config;
+    var _b = 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__default.createElement(MessageView, __assign({}, props, { channel: currentGroupChannel, emojiContainer: emojiContainer, editInputDisabled: !initialized || isDisabledBecauseFrozen$1(currentGroupChannel) || isDisabledBecauseMuted$1(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'; })
+            && 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-beMggMMW.js.map

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

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

package/chunks/bundle-bjEEGmYA.js

@@ -0,0 +1,197 @@
+import { ConnectionHandler } from '@sendbird/chat';
+import { useState, useEffect, useLayoutEffect, useMemo } from 'react';
+import { u as uuidv4 } from './bundle-YoWLsJ0C.js';
+import { b as __awaiter, c as __generator } from './bundle-BA7tv0JB.js';
+
+function useOnlineStatus(sdk, logger) {
+    var _a, _b;
+    var _c = useState(
+    // window is undefined in SSR env
+    typeof window !== 'undefined'
+        ? ((_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.onLine) !== null && _b !== void 0 ? _b : true)
+        : true), isOnline = _c[0], setIsOnline = _c[1];
+    useEffect(function () {
+        var uniqueHandlerId = uuidv4();
+        try {
+            logger.warning('sdk changed', uniqueHandlerId);
+            var handler = new ConnectionHandler({
+                onDisconnected: function () {
+                    setIsOnline(false);
+                    logger.warning('onDisconnected', { isOnline: isOnline });
+                },
+                onReconnectStarted: function () {
+                    setIsOnline(false);
+                    logger.warning('onReconnectStarted', { isOnline: isOnline });
+                },
+                onReconnectSucceeded: function () {
+                    setIsOnline(true);
+                    logger.warning('onReconnectSucceeded', { isOnline: isOnline });
+                },
+                onReconnectFailed: function () {
+                    sdk.reconnect();
+                    logger.warning('onReconnectFailed');
+                },
+            });
+            if (sdk === null || sdk === void 0 ? void 0 : sdk.addConnectionHandler) {
+                // workaround -> addConnectionHandler invalidates session handler
+                // provided through configureSession
+                sdk.addConnectionHandler(uniqueHandlerId, handler);
+                logger.info('Added ConnectionHandler', uniqueHandlerId);
+            }
+        }
+        catch (_a) {
+            //
+        }
+        return function () {
+            try {
+                sdk.removeConnectionHandler(uniqueHandlerId);
+                logger.info('Removed ConnectionHandler', uniqueHandlerId);
+            }
+            catch (_a) {
+                //
+            }
+        };
+    }, [sdk]);
+    useEffect(function () {
+        var tryReconnect = function () {
+            try {
+                logger.warning('Try reconnecting SDK');
+                if (sdk.connectionState !== 'OPEN') { // connection is not broken yet
+                    sdk.reconnect();
+                }
+            }
+            catch (_a) {
+                //
+            }
+        };
+        // addEventListener version
+        window.addEventListener('online', tryReconnect);
+        return function () {
+            window.removeEventListener('online', tryReconnect);
+        };
+    }, [sdk]);
+    // add offline-class to body
+    useEffect(function () {
+        var body = document.querySelector('body');
+        if (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
+            try {
+                body.classList.add('sendbird__offline');
+                logger.info('Added class sendbird__offline to body');
+            }
+            catch (e) {
+                //
+            }
+        }
+        else {
+            try {
+                body.classList.remove('sendbird__offline');
+                logger.info('Removed class sendbird__offline from body');
+            }
+            catch (e) {
+                //
+            }
+        }
+    }, [isOnline, sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled]);
+    return isOnline;
+}
+
+var TIMEOUT = 2000;
+/*
+  * This is a factory function that returns a scheduler.
+  * The scheduler is a queue that calls the callback function on intervals.
+  * If interval is empty, the callback function is called immediately.
+  * If interval is not empty, the callback function is called after the interval.
+*/
+function schedulerFactory(_a) {
+    var logger = _a.logger, timeout = _a.timeout, cb = _a.cb;
+    var queue = [];
+    var interval = null;
+    var push = function (channel) {
+        var channelPresent = queue.find(function (c) { return c.url === channel.url; });
+        if (!channelPresent) {
+            queue.push(channel);
+        }
+        else {
+            logger.info('Channel: Mark as read already in queue', { channel: channel });
+        }
+        // start the interval if it's not already running
+        if (interval) {
+            return;
+        }
+        var item = queue.shift();
+        if (item) {
+            cb(item);
+        }
+        interval = setInterval(function () {
+            if (queue.length === 0 && interval) {
+                clearInterval(interval);
+                interval = null;
+                return;
+            }
+            var item = queue.shift();
+            if (item) {
+                cb(item);
+            }
+        }, (timeout || TIMEOUT));
+    };
+    var clear = function () {
+        queue = [];
+        if (interval) {
+            clearInterval(interval);
+            interval = null;
+        }
+    };
+    return {
+        push: push,
+        clear: clear,
+        getQueue: function () { return queue; },
+    };
+}
+
+// this hook accepts a callback to run component is unmounted
+function useUnmount(callback, deps) {
+    if (deps === void 0) { deps = []; }
+    useLayoutEffect(function () {
+        return function () {
+            callback();
+        };
+    }, deps);
+}
+
+function useMarkAsDeliveredScheduler(_a, _b) {
+    var _this = this;
+    var isConnected = _a.isConnected;
+    var logger = _b.logger;
+    var markAsDeliveredScheduler = useMemo(function () { return schedulerFactory({
+        logger: logger,
+        cb: function (channel) { return __awaiter(_this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, channel.markAsDelivered()];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        logger.warning('Channel: Mark as delivered failed', { channel: channel, error: error_1 });
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); },
+    }); }, []);
+    useEffect(function () {
+        // for simplicity, we clear the queue when the connection is lost
+        if (!isConnected) {
+            markAsDeliveredScheduler.clear();
+        }
+    }, [isConnected]);
+    useUnmount(function () { markAsDeliveredScheduler.clear(); });
+    return markAsDeliveredScheduler;
+}
+
+export { useMarkAsDeliveredScheduler as a, useUnmount as b, schedulerFactory as s, useOnlineStatus as u };
+//# sourceMappingURL=bundle-bjEEGmYA.js.map

package/chunks/bundle-bjEEGmYA.js.map

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

package/chunks/{bundle-iWI3kIle.js → bundle-c1LUbaVa.js}

@@ -1,22 +1,20 @@
 import React__default, { useEffect, useCallback, useState, useReducer, useRef, useMemo } from 'react';
-import { f as format } from './bundle-WDOQg3ty.js';
-import { U as UserProfileProvider } from './bundle-cXqs96Pt.js';
-import { _ as __assign, a as __spreadArray, b as __awaiter, c as __generator } from './bundle-GKopZh-T.js';
-import { c as compareIds } from './bundle-yur9nm4N.js';
-import { p as pubSubTopics } from './bundle-ku6CEjGk.js';
+import { U as UserProfileProvider } from './bundle-vOT5acXc.js';
+import { _ as __assign, a as __spreadArray, b as __awaiter, c as __generator } from './bundle-BA7tv0JB.js';
+import { c as compareIds } from './bundle-NwZvowyL.js';
+import { p as pubSubTopics } from './bundle-nlOgiAcu.js';
 import { ChannelType } from '@sendbird/chat';
 import { OpenChannelHandler } from '@sendbird/chat/openChannel';
-import { u as uuidv4 } from './bundle-aeQZ5WsP.js';
-import { c as compressImages } from './bundle-LEanaSuB.js';
+import { u as uuidv4 } from './bundle-YoWLsJ0C.js';
+import { c as compressImages } from './bundle-8JX3bIpj.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useGlobalModalContext } from '../hooks/useModal.js';
-import { u as useLocalization } from './bundle-y_LgB6DS.js';
-import { O as ONE_MiB } from './bundle-ZKM9Qk_j.js';
-import { c as ModalFooter } from './bundle-VPanFdbf.js';
-import './bundle-dWJnfDPH.js';
+import { u as useLocalization } from './bundle-BBjosDA0.js';
+import { O as ONE_MiB } from './bundle-MBrlu_LK.js';
+import { c as ModalFooter } from './bundle-cvTUkQV_.js';
+import './bundle-I8JFwttJ.js';
 import { ButtonTypes } from '../ui/Button.js';
 
-var getMessageCreatedAt = function (message) { return format(message.createdAt, 'p'); };
 var shouldFetchMore = function (messageLength, maxMessages) {
     if (typeof maxMessages !== 'number') {
         return true;
@@ -46,33 +44,6 @@ var scrollIntoLast = function (initialTry, scrollRef) {
         }, 500 * currentTry);
     }
 };
-var isSameGroup = function (message, comparingMessage) {
-    var _a, _b, _c, _d;
-    if (!(message
-        && comparingMessage
-        && (message === null || message === void 0 ? void 0 : message.messageType)
-        && message.messageType !== 'admin'
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType)
-        && 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;
-    }
-    // to fix typecasting
-    var message_ = message;
-    var comparingMessage_ = comparingMessage;
-    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)));
-};
-var compareMessagesForGrouping = function (prevMessage, currMessage, nextMessage) { return ([
-    isSameGroup(prevMessage, currMessage),
-    isSameGroup(currMessage, nextMessage),
-]); };
 var kFormatter = function (num) {
     if (Math.abs(num) > 999999) {
         return "".concat((Math.abs(num) / 1000000).toFixed(1), "M");
@@ -1390,5 +1361,5 @@ var OpenChannelProvider = function (props) {
 };
 var useOpenChannelContext = function () { return React__default.useContext(OpenChannelContext); };
 
-export { OpenChannelProvider as O, compareMessagesForGrouping as c, kFormatter as k, useOpenChannelContext as u };
-//# sourceMappingURL=bundle-iWI3kIle.js.map
+export { OpenChannelProvider as O, kFormatter as k, useOpenChannelContext as u };
+//# sourceMappingURL=bundle-c1LUbaVa.js.map

package/chunks/{bundle-iWI3kIle.js.map → bundle-c1LUbaVa.js.map}

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

package/chunks/{bundle-WpHDilD_.js → bundle-cA_r9HRx.js}

@@ -1,5 +1,4 @@
 var noop = function () { };
-var isAboutSame = function (a, b, px) { return Math.abs(a - b) <= px; };
 var isMobileIOS = function (userAgent) {
     var isIOS = /iPhone|iPad|iPod/i.test(userAgent);
     var isWebkit = /WebKit/i.test(userAgent);
@@ -7,5 +6,5 @@ var isMobileIOS = function (userAgent) {
     return isIOS && (isWebkit || isSafari);
 };
 
-export { isMobileIOS as a, isAboutSame as i, noop as n };
-//# sourceMappingURL=bundle-WpHDilD_.js.map
+export { isMobileIOS as i, noop as n };
+//# sourceMappingURL=bundle-cA_r9HRx.js.map

package/chunks/bundle-cA_r9HRx.js.map

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