@sendbird/uikit-react 3.16.12 → 3.17.1

package/GroupChannel/components/MessageList.js

@@ -1,109 +1,109 @@
-import { b as __awaiter, c as __generator, _ as __assign } from '../../chunks/bundle-Cc3I5CYX.js';
-import React__default, { forwardRef, useRef, useLayoutEffect, useCallback, useState, useEffect } from 'react';
+import { a as __awaiter, b as __generator, _ as __assign } from '../../chunks/bundle-vQs-w4TJ.js';
+import React__default, { useContext, useMemo, forwardRef, useRef, useLayoutEffect, useCallback, useState, useEffect } from 'react';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
-import { M as getHTMLTextDirection, l as isSendableMessage } from '../../chunks/bundle-DPyYquOn.js';
-import { T as TypingIndicatorType } from '../../chunks/bundle-BjLWi0FR.js';
+import { b as isAdminMessage, O as getHTMLTextDirection, m as isSendableMessage } from '../../chunks/bundle-C_fUxdCB.js';
+import { T as TypingIndicatorType } from '../../chunks/bundle-Dcr0zhiH.js';
 import PlaceHolder, { PlaceHolderTypes } from '../../ui/PlaceHolder.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import { Message } from './Message.js';
-import { UnreadCount } from './UnreadCount.js';
+import { UnreadCount as UnreadCount$1 } from './UnreadCount.js';
+import { L as LocalizationContext, u as useLocalization } from '../../chunks/bundle-DNFxWldO.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from '../../chunks/bundle-Ck1F12Yd.js';
+import { c as classnames, n as noop, d as deleteNullish } from '../../chunks/bundle-CUxfmOhh.js';
+import { u as useMediaQueryContext } from '../../chunks/bundle-Bk_SPoMw.js';
 import { FrozenNotification } from './FrozenNotification.js';
-import { S as SCROLL_BUFFER } from '../../chunks/bundle-ClaUOmc5.js';
+import { S as SCROLL_BUFFER } from '../../chunks/bundle-BbORJ4UM.js';
 import TypingIndicatorBubble from '../../ui/TypingIndicatorBubble.js';
-import { n as noop, d as deleteNullish } from '../../chunks/bundle-P5nwZD8V.js';
 import { getMessagePartsInfo } from '../../Channel/utils/getMessagePartsInfo.js';
 import { MessageProvider } from '../../Message/context.js';
-import { g as getComponentKeyFromMessage, b as isContextMenuClosed } from '../../chunks/bundle-D2vnvNzv.js';
-import { a as isAboutSame } from '../../chunks/bundle-tjQ6eCtV.js';
-import { u as useGroupChannel } from '../../chunks/bundle-IZT8GYVx.js';
-import { u as useSendbird } from '../../chunks/bundle-q9ddBKNI.js';
-import { u as useLocalization } from '../../chunks/bundle-DoS7oWHM.js';
+import { e as getComponentKeyFromMessage, d as isContextMenuClosed } from '../../chunks/bundle-D2stWbEd.js';
+import { a as isAboutSame } from '../../chunks/bundle-BB1fsSWl.js';
+import { u as useGroupChannel } from '../../chunks/bundle-Bw9-kM0p.js';
+import { u as useSendbird } from '../../chunks/bundle-DJbjYe-m.js';
 import '@sendbird/chat/groupChannel';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-BI4FzGRR.js';
-import '../../chunks/bundle-RuHd2ZCg.js';
-import '../../chunks/bundle-B4vASmiS.js';
-import '../../chunks/bundle-C1GT9VW0.js';
-import '../../chunks/bundle-B9WM87iE.js';
+import '../../chunks/bundle-mv8ID75t.js';
+import '../../chunks/bundle-CgfPuvrT.js';
+import '../../chunks/bundle-DZoIAKuh.js';
 import '../../ui/Loader.js';
-import '../../chunks/bundle-QoZ0XMP0.js';
-import '../../chunks/bundle-CxlbHSYb.js';
-import '../../chunks/bundle-d5LRZz0u.js';
-import '../../chunks/bundle-B2lzJfYh.js';
+import '../../chunks/bundle-D30uCNpI.js';
+import '../../chunks/bundle-EukGVDa2.js';
+import '../../chunks/bundle-C-JJ1V9E.js';
+import '../../chunks/bundle-D0r0ZDJu.js';
+import '../../chunks/bundle-CrjcKLbB.js';
 import '../../Message/hooks/useDirtyGetMentions.js';
 import '../../ui/DateSeparator.js';
-import '../../chunks/bundle-CdYBkjsA.js';
+import '../../chunks/bundle-81k6nCAY.js';
 import '../../ui/MessageInput.js';
-import '../../chunks/bundle-7upDXZ2x.js';
+import '../../chunks/bundle-BVnY-VzH.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
-import '../../chunks/bundle-DkwziETx.js';
+import '../../chunks/bundle-yCFo1UH9.js';
 import 'dompurify';
-import '../../chunks/bundle-BJP26iyF.js';
-import '../../chunks/bundle-BIa01cUT.js';
-import '../../chunks/bundle-BaDSfPc2.js';
-import '../../chunks/bundle-BtNwQ8Bf.js';
-import '../../chunks/bundle-BHVmxzEQ.js';
+import '../../chunks/bundle-BST66vhg.js';
+import '../../chunks/bundle-brbisaAM.js';
+import '../../chunks/bundle-BrzrUUTr.js';
+import '../../chunks/bundle-WDspxX04.js';
+import '../../chunks/bundle-o0clu6Og.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import '../../ui/MessageContent.js';
-import '../../chunks/bundle-BU0BvnMh.js';
-import '../../chunks/bundle-BBIiHpWB.js';
-import '../../chunks/bundle-DL6YPZS8.js';
-import '../../chunks/bundle-yh_rhV-v.js';
-import '../../chunks/bundle-DaQgvfV3.js';
+import '../../chunks/bundle-Bux9ukQX.js';
+import '../../chunks/bundle-b13Wg98Q.js';
+import '../../chunks/bundle-Drutexf2.js';
+import '../../chunks/bundle-C-z1yB0B.js';
+import '../../chunks/bundle-Lrin-QFd.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../chunks/bundle-FheET-Q4.js';
+import '../../chunks/bundle-6CbOefr3.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/ReactionButton.js';
-import '../../chunks/bundle-B5NfIzw6.js';
-import '../../chunks/bundle-DPQUP26z.js';
+import '../../chunks/bundle-DJLzKbE2.js';
 import '../../ui/EmojiReactions.js';
 import '../../ui/ReactionBadge.js';
 import '../../ui/BottomSheet.js';
 import '../../hooks/useModal.js';
-import '../../chunks/bundle-CO-raWw1.js';
+import '../../chunks/bundle-Cp4bgSfe.js';
 import '../../ui/UserListItem.js';
-import '../../chunks/bundle-gsWT87_Q.js';
-import '../../chunks/bundle-BhVTrhDH.js';
-import '../../chunks/bundle-Bza4PDR2.js';
+import '../../chunks/bundle-DkwXJBHp.js';
+import '../../chunks/bundle-rILapw_J.js';
+import '../../chunks/bundle-BpN5DBcv.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../chunks/bundle-BEsTeVKi.js';
+import '../../chunks/bundle-CTIZ7Ykh.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
-import '../../chunks/bundle-BLz9BjN4.js';
+import '../../chunks/bundle-z5Nelqj0.js';
 import '../../ui/AdminMessage.js';
 import '../../ui/QuoteMessage.js';
-import '../../chunks/bundle-BIwdGWMT.js';
+import '../../chunks/bundle-DJQ6leiJ.js';
 import '@sendbird/chat/message';
 import '../../ui/MobileMenu.js';
 import '../../ui/ThreadReplies.js';
-import '../../chunks/bundle-B7tGV76S.js';
+import '../../chunks/bundle-yQ_w2v22.js';
 import '../../ui/OGMessageItemBody.js';
-import '../../chunks/bundle-DRWMVBdn.js';
+import '../../chunks/bundle-CbeZA5fG.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/TextMessageItemBody.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
-import '../../chunks/bundle-DGhqcmbm.js';
+import '../../chunks/bundle-CLQX7SEP.js';
 import '../../ui/FileViewer.js';
-import '../../chunks/bundle-Iw_NfQB-.js';
+import '../../chunks/bundle-DCQgSBcI.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../chunks/bundle-Bodsrtgn.js';
+import '../../chunks/bundle-B5Ep1QUA.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/TemplateMessageItemBody.js';
-import '../../chunks/bundle-CDrUVtmn.js';
+import '../../chunks/bundle-Ca-zYjr7.js';
 import '../../ui/FallbackTemplateMessageItemBody.tsx.js';
 import '../../ui/LoadingTemplateMessageItemBody.tsx.js';
 import '../../ui/MessageFeedbackFailedModal.js';
@@ -111,19 +111,54 @@ import '../../ui/FeedbackIconButton.js';
 import '../../ui/MobileFeedbackMenu.js';
 import '../../ui/MessageFeedbackModal.js';
 import '../../ui/Input.js';
-import '../../chunks/bundle-BCcSesWX.js';
+import '../../chunks/bundle-CoR272uX.js';
 import './SuggestedReplies.js';
-import '../../chunks/bundle-BkQVRdgx.js';
+import '../../chunks/bundle-C2fpBb4K.js';
 import './FileViewer.js';
-import '../../chunks/bundle-CmwzHSrB.js';
-import '../../chunks/bundle-CzRkg0IM.js';
-import '../../chunks/bundle-DI0o43ul.js';
-import '../../chunks/bundle-DE6FtXLw.js';
+import '../../chunks/bundle-D5-vitmp.js';
+import '../../chunks/bundle-DjbhNbPH.js';
+import '../../chunks/bundle-mPTSPNOr.js';
+import '../../chunks/bundle-BKEuuTFL.js';
 import './RemoveMessageModal.js';
-import '../../chunks/bundle-BdByFEV1.js';
-import '../../chunks/bundle-ExMX5-sC.js';
+import '../../chunks/bundle-DA7UUCQx.js';
+import '../../chunks/bundle-CuPdliCx.js';
 import '../../Channel/utils/compareMessagesForGrouping.js';
 
+var UnreadCount = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.count, count = _c === void 0 ? 0 : _c, onClick = _a.onClick, _d = _a.isFrozenChannel, isFrozenChannel = _d === void 0 ? false : _d;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var unreadMessageCountText = useMemo(function () {
+        if (count === 1) {
+            return stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__UNREAD_MESSAGE;
+        }
+        else if (count > 1) {
+            return stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__UNREAD_MESSAGE_S;
+        }
+    }, [count]);
+    return (React__default.createElement("div", { className: classnames(count < 1 ? 'sendbird-unread-floating-button--hide' : 'sendbird-unread-floating-button', isFrozenChannel && 'sendbird-unread-floating-button--below-frozen', className), "data-testid": "sendbird-notification" },
+        React__default.createElement(Label, { className: "sendbird-unread-floating-button__text", testID: "sendbird-notification__text", color: LabelColors.ONCONTENT_1, type: LabelTypography.CAPTION_2 }, "".concat(count > 99 ? '99+' : count, " "),
+            unreadMessageCountText),
+        React__default.createElement(Icon, { width: "24px", height: "24px", type: IconTypes.FLOATING_BUTTON_CLOSE, fillColor: IconColors.CONTENT, onClick: onClick })));
+};
+
+var NewMessageCount = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.count, count = _c === void 0 ? 0 : _c, onClick = _a.onClick;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var isMobile = useMediaQueryContext().isMobile;
+    var newMessageCountText = useMemo(function () {
+        if (count === 1) {
+            return stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE;
+        }
+        else if (count > 1) {
+            return stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE_S;
+        }
+    }, [count]);
+    return (React__default.createElement("div", { className: classnames(count < 1 ? 'sendbird-new-message-floating-button--hide' : 'sendbird-new-message-floating-button', className), "data-testid": "sendbird-new-message-notification", onClick: onClick },
+        React__default.createElement(Label, { className: "sendbird-new-message-floating-button__text", testID: "sendbird-new-message-notification__text", color: LabelColors.ONCONTENT_1, type: LabelTypography.CAPTION_2 }, "".concat(count > 99 ? '99+' : count, " "),
+            newMessageCountText),
+        !isMobile && (React__default.createElement(Icon, { width: "24px", height: "24px", type: IconTypes.CHEVRON_DOWN, fillColor: IconColors.PRIMARY }))));
+};
+
 var InfiniteList = forwardRef(function (props, listRef) {
     var messages = props.messages, renderMessage = props.renderMessage, scrollPositionRef = props.scrollPositionRef, scrollDistanceFromBottomRef = props.scrollDistanceFromBottomRef, onLoadPrevious = props.onLoadPrevious, onLoadNext = props.onLoadNext, _a = props.loadThreshold, loadThreshold = _a === void 0 ? 0.05 : _a, typingIndicator = props.typingIndicator, _b = props.onScrollPosition, onScrollPosition = _b === void 0 ? noop : _b, initDeps = props.initDeps;
     var isFetching = React__default.useRef(false);
@@ -206,18 +241,87 @@ var MessageList = function (props) {
     var _a, _b, _c, _d, _e;
     var _f = props.className, className = _f === void 0 ? '' : _f;
     var _g = deleteNullish(props), _h = _g.renderMessage, renderMessage = _h === void 0 ? function (props) { return React__default.createElement(Message, __assign({}, props)); } : _h, renderMessageContent = _g.renderMessageContent, renderSuggestedReplies = _g.renderSuggestedReplies, renderCustomSeparator = _g.renderCustomSeparator, _j = _g.renderPlaceholderLoader, renderPlaceholderLoader = _j === void 0 ? function () { return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING }); } : _j, _k = _g.renderPlaceholderEmpty, renderPlaceholderEmpty = _k === void 0 ? function () { return React__default.createElement(PlaceHolder, { className: "sendbird-conversation__no-messages", type: PlaceHolderTypes.NO_MESSAGES }); } : _k, _l = _g.renderFrozenNotification, renderFrozenNotification = _l === void 0 ? function () { return React__default.createElement(FrozenNotification, { className: "sendbird-conversation__messages__notification" }); } : _l;
-    var _m = useGroupChannel(), _o = _m.state, channelUrl = _o.channelUrl, hasNext = _o.hasNext, loading = _o.loading, messages = _o.messages, newMessages = _o.newMessages, isScrollBottomReached = _o.isScrollBottomReached, isMessageGroupingEnabled = _o.isMessageGroupingEnabled, currentChannel = _o.currentChannel, replyType = _o.replyType, scrollPubSub = _o.scrollPubSub, loadNext = _o.loadNext, loadPrevious = _o.loadPrevious, resetNewMessages = _o.resetNewMessages, scrollRef = _o.scrollRef, scrollPositionRef = _o.scrollPositionRef, scrollDistanceFromBottomRef = _o.scrollDistanceFromBottomRef, _p = _m.actions, scrollToBottom = _p.scrollToBottom, setIsScrollBottomReached = _p.setIsScrollBottomReached;
-    var state = useSendbird().state;
+    var _m = useGroupChannel(), _o = _m.state, channelUrl = _o.channelUrl, hasNext = _o.hasNext, loading = _o.loading, messages = _o.messages, newMessages = _o.newMessages, isScrollBottomReached = _o.isScrollBottomReached, isMessageGroupingEnabled = _o.isMessageGroupingEnabled, currentChannel = _o.currentChannel, replyType = _o.replyType, scrollPubSub = _o.scrollPubSub, loadNext = _o.loadNext, loadPrevious = _o.loadPrevious, resetNewMessages = _o.resetNewMessages, scrollRef = _o.scrollRef, scrollPositionRef = _o.scrollPositionRef, scrollDistanceFromBottomRef = _o.scrollDistanceFromBottomRef, markAsUnreadSourceRef = _o.markAsUnreadSourceRef, readState = _o.readState, _p = _m.actions, scrollToBottom = _p.scrollToBottom, setIsScrollBottomReached = _p.setIsScrollBottomReached, markAsReadAll = _p.markAsReadAll, markAsUnread = _p.markAsUnread;
+    var _q = useSendbird(), state = _q.state, enableMarkAsUnread = _q.state.config.groupChannel.enableMarkAsUnread;
     var stringSet = useLocalization().stringSet;
-    var _q = useState(), unreadSinceDate = _q[0], setUnreadSinceDate = _q[1];
+    var _r = useState(), unreadSinceDate = _r[0], setUnreadSinceDate = _r[1];
+    var _s = useState(false), showUnreadCount = _s[0], setShowUnreadCount = _s[1];
+    var isInitializedRef = useRef(false);
+    var separatorMessageRef = useRef(undefined);
+    var isUnreadMessageExistInChannel = useRef(false);
+    // Find the first unread message
+    var firstUnreadMessage = useMemo(function () {
+        if (!enableMarkAsUnread || !isInitializedRef.current || messages.length === 0 || readState === 'read') {
+            return undefined;
+        }
+        if (readState === 'unread') {
+            separatorMessageRef.current = undefined;
+            isUnreadMessageExistInChannel.current = true;
+        }
+        var myLastRead = currentChannel.myLastRead;
+        var willFindMessageCreatedAt = myLastRead + 1;
+        // 조건 1: 정확히 myLastRead + 1인 메시지 찾기
+        var exactMatchMessage = messages.find(function (message) { return message.createdAt === willFindMessageCreatedAt; });
+        if (exactMatchMessage) {
+            return exactMatchMessage;
+        }
+        // 조건 2: myLastRead + 1보다 큰 첫 번째 메시지 찾기 (Admin 메시지 제외)
+        return messages.find(function (message) { return message.createdAt > willFindMessageCreatedAt && !isAdminMessage(message); });
+    }, [messages, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myLastRead, readState]);
     useEffect(function () {
-        if (isScrollBottomReached) {
-            setUnreadSinceDate(undefined);
+        var _a;
+        if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && loading) {
+            // done get channel and messages
+            setShowUnreadCount((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) > 0);
+            isInitializedRef.current = true;
+            isUnreadMessageExistInChannel.current = ((_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.lastMessage) === null || _a === void 0 ? void 0 : _a.createdAt) > (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myLastRead);
         }
-        else {
-            setUnreadSinceDate(new Date());
+    }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, loading]);
+    useEffect(function () {
+        if (!isInitializedRef.current)
+            return;
+        if (!enableMarkAsUnread) {
+            // backward compatibility
+            if (isScrollBottomReached) {
+                setUnreadSinceDate(undefined);
+            }
+            else {
+                setUnreadSinceDate(new Date());
+            }
+        }
+        else if (isScrollBottomReached) {
+            if ((markAsUnreadSourceRef === null || markAsUnreadSourceRef === void 0 ? void 0 : markAsUnreadSourceRef.current) !== 'manual') {
+                if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) > 0) {
+                    if (separatorMessageRef.current || !isUnreadMessageExistInChannel.current) {
+                        // called markAsReadAll as after the first unread message is displayed
+                        markAsReadAll(currentChannel);
+                    }
+                }
+            }
         }
     }, [isScrollBottomReached]);
+    var checkDisplayedNewMessageSeparator = useCallback(function (isNewMessageSeparatorVisible) {
+        if (!isInitializedRef.current || !firstUnreadMessage)
+            return;
+        if (isNewMessageSeparatorVisible && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) > 0) {
+            setShowUnreadCount(false);
+        }
+        else if (!isNewMessageSeparatorVisible && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) > 0) {
+            setShowUnreadCount(true);
+        }
+        if (isNewMessageSeparatorVisible && (markAsUnreadSourceRef === null || markAsUnreadSourceRef === void 0 ? void 0 : markAsUnreadSourceRef.current) !== 'manual') {
+            if ((newMessages === null || newMessages === void 0 ? void 0 : newMessages.length) > 0) {
+                markAsUnread(newMessages[0], 'internal');
+                separatorMessageRef.current = undefined;
+            }
+            else if (firstUnreadMessage) {
+                if (!separatorMessageRef.current || separatorMessageRef.current.messageId !== firstUnreadMessage.messageId) {
+                    separatorMessageRef.current = firstUnreadMessage;
+                }
+                markAsReadAll(currentChannel);
+            }
+        }
+    }, [firstUnreadMessage, markAsUnread, markAsReadAll, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount]);
     /**
      * 1. Move the message list scroll
      *    when each message's height is changed by `reactions` OR `showEdit`
@@ -243,9 +347,21 @@ var MessageList = function (props) {
             return renderFrozenNotification();
         },
         unreadMessagesNotification: function () {
+            var _a;
+            if (enableMarkAsUnread) {
+                if (!showUnreadCount || (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) === 0)
+                    return null;
+                return (React__default.createElement(UnreadCount, { className: "sendbird-unread-messages-count", count: (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) !== null && _a !== void 0 ? _a : 0, isFrozenChannel: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isFrozen) || false, onClick: function () {
+                        if (newMessages.length > 0) {
+                            resetNewMessages();
+                        }
+                        isUnreadMessageExistInChannel.current = false;
+                        markAsReadAll(currentChannel);
+                    } }));
+            }
             if (isScrollBottomReached || !unreadSinceDate)
                 return null;
-            return (React__default.createElement(UnreadCount, { className: "sendbird-conversation__messages__notification", count: newMessages.length, lastReadAt: unreadSinceDate, onClick: function () { return scrollToBottom(); } }));
+            return (React__default.createElement(UnreadCount$1, { className: "sendbird-conversation__messages__notification", count: newMessages.length, lastReadAt: unreadSinceDate, onClick: function () { return scrollToBottom(); } }));
         },
         scrollToBottomButton: function () {
             if (!hasNext() && isScrollBottomReached)
@@ -253,6 +369,12 @@ var MessageList = function (props) {
             return (React__default.createElement("div", { className: "sendbird-conversation__scroll-bottom-button", onClick: function () { return scrollToBottom(); }, onKeyDown: function () { return scrollToBottom(); }, tabIndex: 0, role: "button" },
                 React__default.createElement(Icon, { width: "24px", height: "24px", type: IconTypes.CHEVRON_DOWN, fillColor: IconColors.PRIMARY })));
         },
+        newMessageCount: function () {
+            // 스크롤이 bottom에 있을 때는 new message count를 표시하지 않음
+            if (isScrollBottomReached)
+                return null;
+            return (React__default.createElement(NewMessageCount, { className: "sendbird-new-messages-count", count: newMessages.length, onClick: function () { return scrollToBottom(); } }));
+        },
     };
     if (loading) {
         return renderPlaceholderLoader();
@@ -264,13 +386,20 @@ var MessageList = function (props) {
         React__default.createElement("div", { className: "sendbird-conversation__messages ".concat(className), dir: getHTMLTextDirection(state.config.htmlTextDirection, state.config.forceLeftToRightMessageLayout) },
             React__default.createElement(InfiniteList, { ref: scrollRef, initDeps: [channelUrl], scrollPositionRef: scrollPositionRef, scrollDistanceFromBottomRef: scrollDistanceFromBottomRef, onLoadNext: loadNext, onLoadPrevious: loadPrevious, onScrollPosition: function (it) {
                     var isScrollBottomReached = it === 'bottom';
-                    if (newMessages.length > 0 && isScrollBottomReached) {
-                        resetNewMessages();
+                    if (isInitializedRef.current && isScrollBottomReached) {
+                        if (newMessages.length > 0) {
+                            resetNewMessages();
+                        }
+                        else if (!isUnreadMessageExistInChannel.current && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.unreadMessageCount) === 0) {
+                            markAsReadAll(currentChannel);
+                        }
                     }
                     setIsScrollBottomReached(isScrollBottomReached);
                 }, messages: messages, renderMessage: function (_a) {
+                    var _b;
                     var message = _a.message, index = _a.index;
-                    var _b = getMessagePartsInfo({
+                    var finalFirstUnreadMessageId = ((_b = separatorMessageRef.current) === null || _b === void 0 ? void 0 : _b.messageId) || (firstUnreadMessage === null || firstUnreadMessage === void 0 ? void 0 : firstUnreadMessage.messageId);
+                    var _c = getMessagePartsInfo({
                         allMessages: messages,
                         stringSet: stringSet,
                         replyType: replyType !== null && replyType !== void 0 ? replyType : 'NONE',
@@ -278,24 +407,29 @@ var MessageList = function (props) {
                         currentIndex: index,
                         currentMessage: message,
                         currentChannel: currentChannel,
-                    }), chainTop = _b.chainTop, chainBottom = _b.chainBottom, hasSeparator = _b.hasSeparator;
+                        firstUnreadMessageId: finalFirstUnreadMessageId,
+                        isUnreadMessageExistInChannel: isUnreadMessageExistInChannel,
+                    }), chainTop = _c.chainTop, chainBottom = _c.chainBottom, hasSeparator = _c.hasSeparator, hasNewMessageSeparator = _c.hasNewMessageSeparator;
                     var isOutgoingMessage = isSendableMessage(message) && message.sender.userId === state.config.userId;
                     return (React__default.createElement(MessageProvider, { message: message, key: getComponentKeyFromMessage(message), isByMe: isOutgoingMessage }, renderMessage({
                         handleScroll: onMessageContentSizeChanged,
                         message: message,
                         hasSeparator: hasSeparator,
+                        hasNewMessageSeparator: hasNewMessageSeparator,
                         chainTop: chainTop,
                         chainBottom: chainBottom,
                         renderMessageContent: renderMessageContent,
                         renderSuggestedReplies: renderSuggestedReplies,
                         renderCustomSeparator: renderCustomSeparator,
+                        onNewMessageSeparatorVisibilityChange: checkDisplayedNewMessageSeparator,
                     })));
                 }, typingIndicator: !hasNext()
                     && ((_b = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.groupChannel) === null || _b === void 0 ? void 0 : _b.enableTypingIndicator)
                     && ((_e = (_d = (_c = state === null || state === void 0 ? void 0 : state.config) === null || _c === void 0 ? void 0 : _c.groupChannel) === null || _d === void 0 ? void 0 : _d.typingIndicatorTypes) === null || _e === void 0 ? void 0 : _e.has(TypingIndicatorType.Bubble)) && (React__default.createElement(TypingIndicatorBubbleWrapper, { channelUrl: channelUrl, handleScroll: onMessageContentSizeChanged })) }),
             React__default.createElement(React__default.Fragment, null, renderer.frozenNotification()),
             React__default.createElement(React__default.Fragment, null, renderer.unreadMessagesNotification()),
-            React__default.createElement(React__default.Fragment, null, renderer.scrollToBottomButton()))));
+            React__default.createElement(React__default.Fragment, null, renderer.scrollToBottomButton()),
+            React__default.createElement(React__default.Fragment, null, renderer.newMessageCount()))));
 };
 var TypingIndicatorBubbleWrapper = function (props) {
     var stores = useSendbird().state.stores;

package/GroupChannel/components/MessageList.js.map

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

package/GroupChannel/components/RemoveMessageModal.js

@@ -1,41 +1,41 @@
-import { _ as __assign } from '../../chunks/bundle-Cc3I5CYX.js';
+import { _ as __assign } from '../../chunks/bundle-vQs-w4TJ.js';
 import React__default from 'react';
-import { R as RemoveMessageModalView } from '../../chunks/bundle-BdByFEV1.js';
-import { u as useGroupChannel } from '../../chunks/bundle-IZT8GYVx.js';
-import '../../chunks/bundle-CO-raWw1.js';
+import { R as RemoveMessageModalView } from '../../chunks/bundle-DA7UUCQx.js';
+import { u as useGroupChannel } from '../../chunks/bundle-Bw9-kM0p.js';
+import '../../chunks/bundle-Cp4bgSfe.js';
 import 'react-dom';
-import '../../chunks/bundle-P5nwZD8V.js';
-import '../../chunks/bundle-DoS7oWHM.js';
-import '../../chunks/bundle-B9WM87iE.js';
-import '../../chunks/bundle-QoZ0XMP0.js';
-import '../../chunks/bundle-DPQUP26z.js';
+import '../../chunks/bundle-CUxfmOhh.js';
+import '../../chunks/bundle-DNFxWldO.js';
+import '../../chunks/bundle-D30uCNpI.js';
+import '../../chunks/bundle-EukGVDa2.js';
+import '../../chunks/bundle-Bk_SPoMw.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
-import '../../chunks/bundle-C1GT9VW0.js';
+import '../../chunks/bundle-Ck1F12Yd.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-FheET-Q4.js';
-import '../../chunks/bundle-q9ddBKNI.js';
-import '../../chunks/bundle-BHVmxzEQ.js';
-import '../../chunks/bundle-ClaUOmc5.js';
+import '../../chunks/bundle-6CbOefr3.js';
+import '../../chunks/bundle-DJbjYe-m.js';
+import '../../chunks/bundle-o0clu6Og.js';
+import '../../chunks/bundle-BbORJ4UM.js';
 import '@sendbird/chat';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/openChannel';
-import '../../chunks/bundle-ExMX5-sC.js';
-import '../../chunks/bundle-DPyYquOn.js';
+import '../../chunks/bundle-CuPdliCx.js';
+import '../../chunks/bundle-C_fUxdCB.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-BI4FzGRR.js';
-import '../../chunks/bundle-RuHd2ZCg.js';
-import '../../chunks/bundle-B4vASmiS.js';
+import '../../chunks/bundle-mv8ID75t.js';
+import '../../chunks/bundle-CgfPuvrT.js';
+import '../../chunks/bundle-DZoIAKuh.js';
 import '@sendbird/chat/message';
 import '@sendbird/uikit-tools';
-import '../../chunks/bundle-gsWT87_Q.js';
-import '../../chunks/bundle-CzRkg0IM.js';
-import '../../chunks/bundle-D2vnvNzv.js';
-import '../../chunks/bundle-B2lzJfYh.js';
-import '../../chunks/bundle-BLz9BjN4.js';
-import '../../chunks/bundle-DI0o43ul.js';
-import '../../chunks/bundle-BEsTeVKi.js';
-import '../../chunks/bundle-DE6FtXLw.js';
+import '../../chunks/bundle-DkwXJBHp.js';
+import '../../chunks/bundle-DjbhNbPH.js';
+import '../../chunks/bundle-D2stWbEd.js';
+import '../../chunks/bundle-CrjcKLbB.js';
+import '../../chunks/bundle-z5Nelqj0.js';
+import '../../chunks/bundle-mPTSPNOr.js';
+import '../../chunks/bundle-CTIZ7Ykh.js';
+import '../../chunks/bundle-BKEuuTFL.js';
 
 var RemoveMessageModal = function (props) {
     var deleteMessage = useGroupChannel().actions.deleteMessage;

package/GroupChannel/components/SuggestedMentionList.js

@@ -1,21 +1,21 @@
-import { _ as __assign } from '../../chunks/bundle-Cc3I5CYX.js';
+import { _ as __assign } from '../../chunks/bundle-vQs-w4TJ.js';
 import React__default from 'react';
-import { S as SuggestedMentionListView } from '../../chunks/bundle-BkQVRdgx.js';
-import '../../chunks/bundle-C1GT9VW0.js';
-import '../../chunks/bundle-B9WM87iE.js';
+import { S as SuggestedMentionListView } from '../../chunks/bundle-C2fpBb4K.js';
+import '../../chunks/bundle-Ck1F12Yd.js';
+import '../../chunks/bundle-D30uCNpI.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-P5nwZD8V.js';
-import '../../chunks/bundle-BhVTrhDH.js';
+import '../../chunks/bundle-CUxfmOhh.js';
+import '../../chunks/bundle-rILapw_J.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-Bza4PDR2.js';
-import '../../chunks/bundle-DoS7oWHM.js';
-import '../../chunks/bundle-QoZ0XMP0.js';
-import '../../chunks/bundle-FheET-Q4.js';
-import '../../chunks/bundle-B2lzJfYh.js';
-import '../../chunks/bundle-7upDXZ2x.js';
-import '../../chunks/bundle-q9ddBKNI.js';
-import '../../chunks/bundle-BHVmxzEQ.js';
-import '../../chunks/bundle-ClaUOmc5.js';
+import '../../chunks/bundle-BpN5DBcv.js';
+import '../../chunks/bundle-DNFxWldO.js';
+import '../../chunks/bundle-EukGVDa2.js';
+import '../../chunks/bundle-6CbOefr3.js';
+import '../../chunks/bundle-CrjcKLbB.js';
+import '../../chunks/bundle-BVnY-VzH.js';
+import '../../chunks/bundle-DJbjYe-m.js';
+import '../../chunks/bundle-o0clu6Og.js';
+import '../../chunks/bundle-BbORJ4UM.js';
 import '@sendbird/chat';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/openChannel';

package/GroupChannel/components/TypingIndicator.js

@@ -1,14 +1,14 @@
 import React__default, { useState, useEffect, useContext } from 'react';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-C1GT9VW0.js';
-import { L as LocalizationContext } from '../../chunks/bundle-DoS7oWHM.js';
-import { u as uuidv4 } from '../../chunks/bundle-FheET-Q4.js';
-import { u as useSendbird } from '../../chunks/bundle-q9ddBKNI.js';
-import '../../chunks/bundle-Cc3I5CYX.js';
-import '../../chunks/bundle-B9WM87iE.js';
-import '../../chunks/bundle-QoZ0XMP0.js';
-import '../../chunks/bundle-BHVmxzEQ.js';
-import '../../chunks/bundle-ClaUOmc5.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-Ck1F12Yd.js';
+import { L as LocalizationContext } from '../../chunks/bundle-DNFxWldO.js';
+import { u as uuidv4 } from '../../chunks/bundle-6CbOefr3.js';
+import { u as useSendbird } from '../../chunks/bundle-DJbjYe-m.js';
+import '../../chunks/bundle-vQs-w4TJ.js';
+import '../../chunks/bundle-D30uCNpI.js';
+import '../../chunks/bundle-EukGVDa2.js';
+import '../../chunks/bundle-o0clu6Og.js';
+import '../../chunks/bundle-BbORJ4UM.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 

package/GroupChannel/components/UnreadCount.js

@@ -1,13 +1,13 @@
 import React__default, { useContext, useMemo } from 'react';
-import { L as LocalizationContext } from '../../chunks/bundle-DoS7oWHM.js';
-import { L as Label, b as LabelColors, a as LabelTypography } from '../../chunks/bundle-C1GT9VW0.js';
+import { L as LocalizationContext } from '../../chunks/bundle-DNFxWldO.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from '../../chunks/bundle-Ck1F12Yd.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
-import { f as format } from '../../chunks/bundle-d5LRZz0u.js';
-import { c as classnames } from '../../chunks/bundle-P5nwZD8V.js';
-import '../../chunks/bundle-Cc3I5CYX.js';
-import '../../chunks/bundle-B9WM87iE.js';
-import '../../chunks/bundle-QoZ0XMP0.js';
-import '../../chunks/bundle-B4vASmiS.js';
+import { f as format } from '../../chunks/bundle-D0r0ZDJu.js';
+import { c as classnames } from '../../chunks/bundle-CUxfmOhh.js';
+import '../../chunks/bundle-vQs-w4TJ.js';
+import '../../chunks/bundle-D30uCNpI.js';
+import '../../chunks/bundle-EukGVDa2.js';
+import '../../chunks/bundle-DZoIAKuh.js';
 
 var UnreadCount = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.count, count = _c === void 0 ? 0 : _c, _d = _a.time, time = _d === void 0 ? '' : _d, onClick = _a.onClick, lastReadAt = _a.lastReadAt;

package/GroupChannel/context.js

@@ -1,22 +1,22 @@
-export { G as GroupChannelContext, c as GroupChannelManager, a as GroupChannelProvider, I as InternalGroupChannelProvider, u as useGroupChannel, b as useGroupChannelContext } from '../chunks/bundle-IZT8GYVx.js';
-import '../chunks/bundle-Cc3I5CYX.js';
+export { G as GroupChannelContext, c as GroupChannelManager, a as GroupChannelProvider, I as InternalGroupChannelProvider, u as useGroupChannel, b as useGroupChannelContext } from '../chunks/bundle-Bw9-kM0p.js';
+import '../chunks/bundle-vQs-w4TJ.js';
 import 'react';
 import '@sendbird/chat/message';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/uikit-tools';
-import '../chunks/bundle-gsWT87_Q.js';
-import '../chunks/bundle-q9ddBKNI.js';
-import '../chunks/bundle-BHVmxzEQ.js';
-import '../chunks/bundle-ClaUOmc5.js';
+import '../chunks/bundle-DkwXJBHp.js';
+import '../chunks/bundle-DJbjYe-m.js';
+import '../chunks/bundle-o0clu6Og.js';
+import '../chunks/bundle-BbORJ4UM.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import '../chunks/bundle-CzRkg0IM.js';
-import '../chunks/bundle-D2vnvNzv.js';
-import '../chunks/bundle-B2lzJfYh.js';
-import '../chunks/bundle-BLz9BjN4.js';
-import '../chunks/bundle-DI0o43ul.js';
-import '../chunks/bundle-BEsTeVKi.js';
-import '../chunks/bundle-DE6FtXLw.js';
-import '../chunks/bundle-P5nwZD8V.js';
-import '../chunks/bundle-RuHd2ZCg.js';
+import '../chunks/bundle-DjbhNbPH.js';
+import '../chunks/bundle-D2stWbEd.js';
+import '../chunks/bundle-CrjcKLbB.js';
+import '../chunks/bundle-z5Nelqj0.js';
+import '../chunks/bundle-mPTSPNOr.js';
+import '../chunks/bundle-CTIZ7Ykh.js';
+import '../chunks/bundle-BKEuuTFL.js';
+import '../chunks/bundle-CUxfmOhh.js';
+import '../chunks/bundle-CgfPuvrT.js';
 //# sourceMappingURL=context.js.map