stream-chat-react 11.8.0 → 11.9.0

package/dist/i18n/ko.json

@@ -73,6 +73,25 @@
     "Wait until all attachments have uploaded": "모든 첨부 파일이 업로드될 때까지 기다립니다.",
     "You have no channels currently": "현재 채널이 없습니다.",
     "You've reached the maximum number of files": "최대 파일 수에 도달했습니다.",
+    "aria/Attachment": "첨부 파일",
+    "aria/Cancel Reply": "답장 취소",
+    "aria/Cancel upload": "업로드 취소",
+    "aria/Channel list": "채널 목록",
+    "aria/Channel search results": "채널 검색 결과",
+    "aria/Close thread": "스레드 닫기",
+    "aria/Emoji picker": "이모지 선택기",
+    "aria/File input": "파일 입력",
+    "aria/File upload": "파일 업로드",
+    "aria/Image input": "이미지 입력",
+    "aria/Load More Channels": "더 많은 채널 불러오기",
+    "aria/Menu": "메뉴",
+    "aria/Message Options": "메시지 옵션",
+    "aria/Open Message Actions Menu": "메시지 액션 메뉴 열기",
+    "aria/Open Reaction Selector": "반응 선택기 열기",
+    "aria/Open Thread": "스레드 열기",
+    "aria/Reaction list": "반응 목록",
+    "aria/Retry upload": "업로드 다시 시도",
+    "aria/Send": "보내기",
     "ban-command-args": "[@사용자이름] [텍스트]",
     "ban-command-description": "사용자를 차단",
     "giphy-command-args": "[텍스트]",

package/dist/i18n/nl.json

@@ -73,6 +73,25 @@
     "Wait until all attachments have uploaded": "Wacht tot alle bijlagen zijn geüpload",
     "You have no channels currently": "Er zijn geen chats beschikbaar",
     "You've reached the maximum number of files": "Je hebt het maximale aantal bestanden bereikt",
+    "aria/Attachment": "Bijlage",
+    "aria/Cancel Reply": "Antwoord annuleren",
+    "aria/Cancel upload": "Upload annuleren",
+    "aria/Channel list": "Kanaallijst",
+    "aria/Channel search results": "Zoekresultaten voor kanalen",
+    "aria/Close thread": "Draad sluiten",
+    "aria/Emoji picker": "Emoji kiezer",
+    "aria/File input": "Bestandsinvoer",
+    "aria/File upload": "Bestand uploaden",
+    "aria/Image input": "Afbeelding invoeren",
+    "aria/Load More Channels": "Meer kanalen laden",
+    "aria/Menu": "Menu",
+    "aria/Message Options": "Berichtopties",
+    "aria/Open Message Actions Menu": "Menu voor berichtacties openen",
+    "aria/Open Reaction Selector": "Reactiekiezer openen",
+    "aria/Open Thread": "Draad openen",
+    "aria/Reaction list": "Reactielijst",
+    "aria/Retry upload": "Upload opnieuw proberen",
+    "aria/Send": "Verzenden",
     "ban-command-args": "[@gebruikersnaam] [tekst]",
     "ban-command-description": "Een gebruiker verbannen",
     "giphy-command-args": "[tekst]",

package/dist/i18n/pt.json

@@ -73,6 +73,25 @@
     "Wait until all attachments have uploaded": "Espere até que todos os anexos tenham sido carregados",
     "You have no channels currently": "Você não tem canais atualmente",
     "You've reached the maximum number of files": "Você atingiu o número máximo de arquivos",
+    "aria/Attachment": "Bijlage",
+    "aria/Cancel Reply": "Antwoord annuleren",
+    "aria/Cancel upload": "Upload annuleren",
+    "aria/Channel list": "Kanaallijst",
+    "aria/Channel search results": "Zoekresultaten voor kanalen",
+    "aria/Close thread": "Draad sluiten",
+    "aria/Emoji picker": "Emoji kiezer",
+    "aria/File input": "Bestandsinvoer",
+    "aria/File upload": "Bestand uploaden",
+    "aria/Image input": "Afbeelding invoeren",
+    "aria/Load More Channels": "Meer kanalen laden",
+    "aria/Menu": "Menu",
+    "aria/Message Options": "Berichtopties",
+    "aria/Open Message Actions Menu": "Menu voor berichtacties openen",
+    "aria/Open Reaction Selector": "Reactiekiezer openen",
+    "aria/Open Thread": "Draad openen",
+    "aria/Reaction list": "Reactielijst",
+    "aria/Retry upload": "Upload opnieuw proberen",
+    "aria/Send": "Verzenden",
     "ban-command-args": "[@nomedeusuário] [texto]",
     "ban-command-description": "Banir um usuário",
     "giphy-command-args": "[texto]",

package/dist/i18n/ru.json

@@ -73,6 +73,25 @@
     "Wait until all attachments have uploaded": "Подождите, пока все вложения загрузятся",
     "You have no channels currently": "У вас нет каналов в данный момент",
     "You've reached the maximum number of files": "Вы достигли максимального количества файлов",
+    "aria/Attachment": "Вложение",
+    "aria/Cancel Reply": "Отменить ответ",
+    "aria/Cancel upload": "Отменить загрузку",
+    "aria/Channel list": "Список каналов",
+    "aria/Channel search results": "Результаты поиска по каналам",
+    "aria/Close thread": "Закрыть тему",
+    "aria/Emoji picker": "Выбор эмодзи",
+    "aria/File input": "Ввод файла",
+    "aria/File upload": "Загрузка файла",
+    "aria/Image input": "Ввод изображения",
+    "aria/Load More Channels": "Загрузить больше каналов",
+    "aria/Menu": "Меню",
+    "aria/Message Options": "Параметры сообщения",
+    "aria/Open Message Actions Menu": "Открыть меню действий с сообщениями",
+    "aria/Open Reaction Selector": "Открыть селектор реакций",
+    "aria/Open Thread": "Открыть тему",
+    "aria/Reaction list": "Список реакций",
+    "aria/Retry upload": "Повторить загрузку",
+    "aria/Send": "Отправить",
     "ban-command-args": "[@имяпользователя] [текст]",
     "ban-command-description": "Заблокировать пользователя",
     "giphy-command-args": "[текст]",

package/dist/i18n/tr.json

@@ -73,6 +73,25 @@
     "Wait until all attachments have uploaded": "Tüm ekler yüklenene kadar bekleyin",
     "You have no channels currently": "Henüz kanalınız yok",
     "You've reached the maximum number of files": "Maksimum dosya sayısına ulaştınız",
+    "aria/Attachment": "Bijlage",
+    "aria/Cancel Reply": "Antwoord annuleren",
+    "aria/Cancel upload": "Upload annuleren",
+    "aria/Channel list": "Kanaallijst",
+    "aria/Channel search results": "Zoekresultaten voor kanalen",
+    "aria/Close thread": "Draad sluiten",
+    "aria/Emoji picker": "Emoji kiezer",
+    "aria/File input": "Bestandsinvoer",
+    "aria/File upload": "Bestand uploaden",
+    "aria/Image input": "Afbeelding invoeren",
+    "aria/Load More Channels": "Meer kanalen laden",
+    "aria/Menu": "Menu",
+    "aria/Message Options": "Berichtopties",
+    "aria/Open Message Actions Menu": "Menu voor berichtacties openen",
+    "aria/Open Reaction Selector": "Reactiekiezer openen",
+    "aria/Open Thread": "Draad openen",
+    "aria/Reaction list": "Reactielijst",
+    "aria/Retry upload": "Upload opnieuw proberen",
+    "aria/Send": "Verzenden",
     "ban-command-args": "[@kullanıcıadı] [metin]",
     "ban-command-description": "Bir kullanıcıyı yasakla",
     "giphy-command-args": "[metin]",

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-7c2f264c.js');
+var Window = require('./Window-5e0717c0.js');
 var React = require('react');
 var reactVirtuoso = require('react-virtuoso');
 var throttle = require('lodash.throttle');
@@ -36,7 +36,6 @@ require('dayjs/locale/pt');
 require('dayjs/locale/ru');
 require('dayjs/locale/tr');
 require('dayjs/locale/en');
-require('react/jsx-runtime');
 require('react-player');
 require('pretty-bytes');
 require('prop-types');
@@ -46,6 +45,7 @@ require('react-textarea-autosize');
 require('textarea-caret');
 require('react-is');
 require('crypto');
+require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -332,13 +332,17 @@ var MessageListMainPanel = function (_a) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 };
 
-var targetIsVisibleInContainer = function (element, container) {
-    var msgListHeight = container.getBoundingClientRect().height;
-    var targetMessageY = element.getBoundingClientRect().y;
-    return 0 <= targetMessageY && targetMessageY <= msgListHeight;
+var targetScrolledAboveVisibleContainerArea = function (element) {
+    var targetBottom = element.getBoundingClientRect().bottom;
+    return targetBottom < 0;
+};
+var targetScrolledBelowVisibleContainerArea = function (element, container) {
+    var targetTop = element.getBoundingClientRect().top;
+    var containerBottom = container.getBoundingClientRect().top;
+    return targetTop > containerBottom;
 };
 var useUnreadMessagesNotification = function (_a) {
-    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, unreadCount = _a.unreadCount;
+    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, showAlways = _a.showAlways, unreadCount = _a.unreadCount;
     var messages = Window.useChannelStateContext('UnreadMessagesNotification').messages;
     var _b = React.useState(false), show = _b[0], setShow = _b[1];
     var isScrolledAboveTargetTop = React.useRef(false);
@@ -356,22 +360,32 @@ var useUnreadMessagesNotification = function (_a) {
             setShow(true);
             return;
         }
-        setShow(!targetIsVisibleInContainer(observedTarget, msgListPanel));
+        var scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget);
+        var scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(observedTarget, msgListPanel);
+        setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
         var observer = new IntersectionObserver(function (elements) {
             if (!elements.length)
                 return;
-            var _a = elements[0], boundingClientRect = _a.boundingClientRect, isIntersecting = _a.isIntersecting, rootBounds = _a.rootBounds;
-            var isScrolledAboveTargetTopCurrent = !!(rootBounds &&
-                boundingClientRect &&
-                rootBounds.bottom < boundingClientRect.top);
-            setShow(!isIntersecting && !isScrolledAboveTargetTopCurrent);
-            isScrolledAboveTargetTop.current = isScrolledAboveTargetTopCurrent;
+            var _a = elements[0], boundingClientRect = _a.boundingClientRect, isIntersecting = _a.isIntersecting;
+            if (isIntersecting) {
+                setShow(false);
+                return;
+            }
+            var separatorIsAboveContainerTop = boundingClientRect.bottom < 0;
+            setShow(showAlways || separatorIsAboveContainerTop);
+            isScrolledAboveTargetTop.current = separatorIsAboveContainerTop;
         }, { root: msgListPanel });
         observer.observe(observedTarget);
         return function () {
             observer.disconnect();
         };
-    }, [intersectionObserverIsSupported, messages, unreadCount]);
+    }, [
+        intersectionObserverIsSupported,
+        isMessageListScrolledToBottom,
+        messages,
+        showAlways,
+        unreadCount,
+    ]);
     React.useEffect(function () {
         /**
          * Handle situation when scrollToBottom is called from another component when the msg list is scrolled above the observed target (unread separator).
@@ -397,31 +411,84 @@ var useUnreadMessagesNotification = function (_a) {
  * @param wasChannelMarkedUnread
  */
 var useMarkRead = function (_a) {
-    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, markReadOnScrolledToBottom = _a.markReadOnScrolledToBottom, messageListIsThread = _a.messageListIsThread, unreadCount = _a.unreadCount;
-    var markRead = Window.useChannelActionContext('useMarkRead').markRead;
+    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, messageListIsThread = _a.messageListIsThread, unreadCount = _a.unreadCount, wasMarkedUnread = _a.wasMarkedUnread;
+    var client = Window.useChatContext('useMarkRead').client;
+    var _b = Window.useChannelActionContext('useMarkRead'), markRead = _b.markRead, setChannelUnreadUiState = _b.setChannelUnreadUiState;
+    var channel = Window.useChannelStateContext('useMarkRead').channel;
+    var previousRenderMessageListScrolledToBottom = React.useRef(isMessageListScrolledToBottom);
     React.useEffect(function () {
-        var shouldMarkRead = !messageListIsThread &&
-            isMessageListScrolledToBottom &&
-            markReadOnScrolledToBottom &&
-            unreadCount > 0;
+        var shouldMarkRead = function (unreadMessages) {
+            return !document.hidden &&
+                !wasMarkedUnread &&
+                !messageListIsThread &&
+                isMessageListScrolledToBottom &&
+                unreadMessages > 0;
+        };
         var onVisibilityChange = function () {
-            if (!document.hidden && shouldMarkRead)
+            if (shouldMarkRead(unreadCount))
                 markRead();
         };
+        var handleMessageNew = function (event) {
+            var _a, _b, _c, _d;
+            var newMessageToCurrentChannel = event.cid === channel.cid;
+            var isOwnMessage = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) && event.user.id === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id);
+            var mainChannelUpdated = !((_c = event.message) === null || _c === void 0 ? void 0 : _c.parent_id) || ((_d = event.message) === null || _d === void 0 ? void 0 : _d.show_in_channel);
+            if (isOwnMessage)
+                return;
+            if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {
+                setChannelUnreadUiState(function (prev) {
+                    var _a, _b;
+                    var previousUnreadCount = (_a = prev === null || prev === void 0 ? void 0 : prev.unread_messages) !== null && _a !== void 0 ? _a : 0;
+                    var previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+                    return Window.__assign(Window.__assign({}, (prev || {})), { last_read: (_b = prev === null || prev === void 0 ? void 0 : prev.last_read) !== null && _b !== void 0 ? _b : (previousUnreadCount === 0 && (previousLastMessage === null || previousLastMessage === void 0 ? void 0 : previousLastMessage.created_at)
+                            ? new Date(previousLastMessage.created_at)
+                            : new Date(0)), unread_messages: previousUnreadCount + 1 });
+                });
+            }
+            else if (newMessageToCurrentChannel &&
+                mainChannelUpdated &&
+                !isOwnMessage &&
+                shouldMarkRead(channel.countUnread())) {
+                markRead();
+            }
+        };
+        client.on('message.new', handleMessageNew);
         document.addEventListener('visibilitychange', onVisibilityChange);
-        if (shouldMarkRead)
+        var hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
+            isMessageListScrolledToBottom;
+        if (shouldMarkRead(hasScrolledToBottom ? channel.countUnread() : unreadCount))
             markRead();
+        previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
         return function () {
+            client.off('message.new', handleMessageNew);
             document.removeEventListener('visibilitychange', onVisibilityChange);
         };
     }, [
+        channel,
+        client,
         isMessageListScrolledToBottom,
         markRead,
         messageListIsThread,
+        setChannelUnreadUiState,
         unreadCount,
-        markReadOnScrolledToBottom,
+        wasMarkedUnread,
     ]);
 };
+function getPreviousLastMessage(messages, newMessage) {
+    if (!newMessage)
+        return;
+    var previousLastMessage;
+    for (var i = messages.length - 1; i >= 0; i--) {
+        var msg = messages[i];
+        if (!(msg === null || msg === void 0 ? void 0 : msg.id))
+            break;
+        if (msg.id !== newMessage.id) {
+            previousLastMessage = msg;
+            break;
+        }
+    }
+    return previousLastMessage;
+}
 
 var MessageListNotifications = function (props) {
     var hasNewMessages = props.hasNewMessages, isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, isNotAtLatestMessageSet = props.isNotAtLatestMessageSet, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom, threadList = props.threadList, unreadCount = props.unreadCount;
@@ -433,11 +500,13 @@ var MessageListNotifications = function (props) {
 };
 
 var UnreadMessagesNotification = function (_a) {
-    var queryMessageLimit = _a.queryMessageLimit, unreadCount = _a.unreadCount;
+    var queryMessageLimit = _a.queryMessageLimit, showCount = _a.showCount, unreadCount = _a.unreadCount;
     var _b = Window.useChannelActionContext('UnreadMessagesNotification'), jumpToFirstUnreadMessage = _b.jumpToFirstUnreadMessage, markRead = _b.markRead;
     var t = Window.useTranslationContext('UnreadMessagesNotification').t;
     return (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-notification', "data-testid": 'unread-messages-notification' },
-        React__default["default"].createElement("button", { onClick: function () { return jumpToFirstUnreadMessage(queryMessageLimit); } }, t('{{count}} unread', { count: unreadCount !== null && unreadCount !== void 0 ? unreadCount : 0 })),
+        React__default["default"].createElement("button", { onClick: function () { return jumpToFirstUnreadMessage(queryMessageLimit); } }, unreadCount && showCount
+            ? t('{{count}} unread', { count: unreadCount !== null && unreadCount !== void 0 ? unreadCount : 0 })
+            : t('Unread messages')),
         React__default["default"].createElement("button", { onClick: function () { return markRead(); } },
             React__default["default"].createElement(Window.CloseIcon, null))));
 };
@@ -568,7 +637,7 @@ var MessageListWithContext = function (props) {
     var _a;
     var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _e = props.messageActions, messageActions = _e === void 0 ? Object.keys(Window.MESSAGE_ACTIONS) : _e, _f = props.messages, messages = _f === void 0 ? [] : _f, notifications = props.notifications, _g = props.noGroupByUser, noGroupByUser = _g === void 0 ? false : _g, _h = props.pinPermissions, pinPermissions = _h === void 0 ? Window.defaultPinPermissions : _h, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _j = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = _j === void 0 ? false : _j, _k = props.threadList, threadList = _k === void 0 ? false : _k, _l = props.unsafeHTML, unsafeHTML = _l === void 0 ? false : _l, headerPosition = props.headerPosition, read = props.read, markReadOnScrolledToBottom = props.markReadOnScrolledToBottom, _m = props.renderMessages, renderMessages = _m === void 0 ? defaultRenderMessages : _m, _o = props.messageLimit, messageLimit = _o === void 0 ? 100 : _o, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _p = props.hasMoreNewer, hasMoreNewer = _p === void 0 ? false : _p, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _q = props.jumpToLatestMessage, jumpToLatestMessage = _q === void 0 ? function () { return Promise.resolve(); } : _q;
+    returnAllReadData = _j === void 0 ? false : _j, _k = props.threadList, threadList = _k === void 0 ? false : _k, _l = props.unsafeHTML, unsafeHTML = _l === void 0 ? false : _l, headerPosition = props.headerPosition, read = props.read, _m = props.renderMessages, renderMessages = _m === void 0 ? defaultRenderMessages : _m, _o = props.messageLimit, messageLimit = _o === void 0 ? 100 : _o, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _p = props.hasMoreNewer, hasMoreNewer = _p === void 0 ? false : _p, showUnreadNotificationAlways = props.showUnreadNotificationAlways, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _q = props.jumpToLatestMessage, jumpToLatestMessage = _q === void 0 ? function () { return Promise.resolve(); } : _q;
     var _r = React__default["default"].useState(null), listElement = _r[0], setListElement = _r[1];
     var _s = React__default["default"].useState(null), ulElement = _s[0], setUlElement = _s[1];
     var customClasses = Window.useChatContext('MessageList').customClasses;
@@ -584,13 +653,14 @@ var MessageListWithContext = function (props) {
     }), hasNewMessages = _0.hasNewMessages, isMessageListScrolledToBottom = _0.isMessageListScrolledToBottom, onScroll = _0.onScroll, scrollToBottom = _0.scrollToBottom, wrapperRect = _0.wrapperRect;
     var showUnreadMessagesNotification = useUnreadMessagesNotification({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+        showAlways: !!showUnreadNotificationAlways,
         unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
     }).show;
     useMarkRead({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-        markReadOnScrolledToBottom: markReadOnScrolledToBottom,
         messageListIsThread: threadList,
         unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _a !== void 0 ? _a : 0,
+        wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
     });
     var _1 = useEnrichedMessages({
         channel: channel,
@@ -903,19 +973,25 @@ var useScrollToBottomOnNewMessage = function (_a) {
  * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being
  * scrolled below the `UnreadMessagesNotification` component.
  * @param lastRead
+ * @param showAlways
  * @param unreadCount
  */
 var useUnreadMessagesNotificationVirtualized = function (_a) {
-    var lastRead = _a.lastRead, unreadCount = _a.unreadCount;
+    var lastRead = _a.lastRead, showAlways = _a.showAlways, unreadCount = _a.unreadCount;
     var _b = React.useState(false), show = _b[0], setShow = _b[1];
     var toggleShowUnreadMessagesNotification = React.useCallback(function (renderedMessages) {
-        if (!renderedMessages.length)
+        if (!unreadCount)
+            return;
+        var firstRenderedMessage = renderedMessages[0];
+        var lastRenderedMessage = renderedMessages.slice(-1)[0];
+        if (!(firstRenderedMessage && lastRenderedMessage))
             return;
-        var firstRenderedMessageTimestamp = renderedMessages[0].created_at
-            ? new Date(renderedMessages[0].created_at).getTime()
-            : 0;
-        setShow(unreadCount > 0 && !!lastRead && firstRenderedMessageTimestamp > lastRead.getTime());
-    }, [unreadCount, lastRead]);
+        var scrolledBelowSeparator = !!lastRead &&
+            new Date(firstRenderedMessage.created_at).getTime() > lastRead.getTime();
+        var scrolledAboveSeparator = !!lastRead &&
+            new Date(lastRenderedMessage.created_at).getTime() < lastRead.getTime();
+        setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
+    }, [lastRead, showAlways, unreadCount]);
     React.useEffect(function () {
         if (!unreadCount)
             setShow(false);
@@ -1037,11 +1113,11 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 }
 var VirtualizedMessageListWithContext = function (props) {
     var _a, _b;
-    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, markReadOnScrolledToBottom = props.markReadOnScrolledToBottom, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? 100 : _g, messages = props.messages, notifications = props.notifications, 
+    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? 100 : _g, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
     var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = Window.__rest(additionalVirtuosoProps, ["components"]);
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
@@ -1053,6 +1129,7 @@ var VirtualizedMessageListWithContext = function (props) {
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
     var _w = useUnreadMessagesNotificationVirtualized({
         lastRead: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read,
+        showAlways: !!showUnreadNotificationAlways,
         unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _a !== void 0 ? _a : 0,
     }), showUnreadMessagesNotification = _w.show, toggleShowUnreadMessagesNotification = _w.toggleShowUnreadMessagesNotification;
     var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
@@ -1110,9 +1187,9 @@ var VirtualizedMessageListWithContext = function (props) {
     var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
     useMarkRead({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-        markReadOnScrolledToBottom: markReadOnScrolledToBottom,
         messageListIsThread: !!threadList,
         unreadCount: (_b = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _b !== void 0 ? _b : 0,
+        wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
     });
     var scrollToBottom = React.useCallback(function () { return Window.__awaiter(void 0, void 0, void 0, function () {
         return Window.__generator(this, function (_a) {
@@ -1231,7 +1308,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
 }
 
-var version = '11.8.0';
+var version = '11.9.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1471,7 +1548,7 @@ var ThreadHeader = function (props) {
         React__default["default"].createElement("div", { className: 'str-chat__thread-header-details' },
             React__default["default"].createElement("div", { className: 'str-chat__thread-header-title' }, t('Thread')),
             React__default["default"].createElement("div", { className: 'str-chat__thread-header-subtitle' }, displayTitle)),
-        React__default["default"].createElement("button", { "aria-label": 'Close thread', className: 'str-chat__square-button str-chat__close-thread-button', "data-testid": 'close-button', onClick: closeThread },
+        React__default["default"].createElement("button", { "aria-label": t('aria/Close thread'), className: 'str-chat__square-button str-chat__close-thread-button', "data-testid": 'close-button', onClick: closeThread },
             React__default["default"].createElement(CloseIcon, null))));
 };
 

package/dist/scss/v2/MessageReactions/MessageReactions-layout.scss

@@ -104,21 +104,35 @@
       padding: var(--str-chat__spacing-1) 0;
       flex-shrink: 0;
       cursor: pointer;
+
+      .str-chat__message-reaction-emoji--with-fallback {
+        width: 18px;
+        line-height: 18px;
+      }
     }
   }
 
   .str-chat__message-reaction-emoji-big {
+    --str-chat__stream-emoji-size: 1em;
     align-self: center;
     font-size: 2rem;
   }
 
+  .str-chat__message-reaction-emoji-big.str-chat__message-reaction-emoji--with-fallback {
+    line-height: 2rem;
+  }
+
   .str-chat__message-reactions-details-reacting-users {
     display: flex;
     flex-direction: column;
     gap: var(--str-chat__spacing-3);
     max-height: 100%;
     overflow-y: auto;
-    min-height: 0;
+    min-height: 30vh;
+
+    .str-chat__loading-indicator {
+      margin: auto;
+    }
 
     .str-chat__message-reactions-details-reacting-user {
       display: flex;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.8.0";
+export declare const version = "11.9.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.8.0';
+export var version = '11.9.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.8.0",
+  "version": "11.9.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -62,6 +62,7 @@
     "@babel/runtime": "^7.23.6",
     "@braintree/sanitize-url": "^6.0.4",
     "@popperjs/core": "^2.11.5",
+    "@react-aria/focus": "^3.16.1",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
     "emoji-regex": "^9.2.0",
@@ -144,7 +145,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^4.7.0",
+    "@stream-io/stream-chat-css": "^4.7.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
@@ -157,10 +158,10 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.uniqby": "^4.7.7",
     "@types/moment": "^2.13.0",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
-    "@types/react-image-gallery": "^1.0.5",
-    "@types/react-is": "^17.0.3",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-image-gallery": "^1.2.4",
+    "@types/react-is": "^18.2.4",
     "@types/textarea-caret": "3.0.0",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "4.27.0",