stream-chat-react 11.8.0 → 11.10.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-7d524c3b.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))));
 };
@@ -458,7 +527,8 @@ var InfiniteScroll = function (props) {
     var hasNextPageFlag = hasNextPage || hasMoreNewer;
     var hasPreviousPageFlag = hasPreviousPage || hasMore;
     var scrollComponent = React.useRef();
-    var scrollListener = React.useCallback(function () {
+    var scrollListenerRef = React.useRef();
+    scrollListenerRef.current = function () {
         var element = scrollComponent.current;
         if (!element || element.offsetParent === null) {
             return;
@@ -481,15 +551,7 @@ var InfiniteScroll = function (props) {
         if (offset < Number(threshold) && typeof loadNextPageFn === 'function' && hasNextPageFlag) {
             loadNextPageFn();
         }
-    }, [
-        hasPreviousPageFlag,
-        hasNextPageFlag,
-        isLoading,
-        listenToScroll,
-        loadPreviousPageFn,
-        loadNextPageFn,
-        threshold,
-    ]);
+    };
     React.useEffect(function () {
         Window.deprecationAndReplacementWarning([
             [{ hasMoreNewer: hasMoreNewer }, { hasNextPage: hasNextPage }],
@@ -504,13 +566,15 @@ var InfiniteScroll = function (props) {
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
         if (!scrollElement)
             return;
+        var scrollListener = function () { var _a; return (_a = scrollListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(scrollListenerRef); };
         scrollElement.addEventListener('scroll', scrollListener, useCapture);
         scrollElement.addEventListener('resize', scrollListener, useCapture);
+        scrollListener();
         return function () {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
         };
-    }, [initialLoad, scrollListener, useCapture]);
+    }, [initialLoad, useCapture]);
     React.useEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -568,7 +632,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 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _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 +648,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 +968,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);
@@ -978,7 +1049,7 @@ var Footer = function () {
 };
 var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -1001,7 +1072,7 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var isLastReadMessage = message.id === lastReadMessageId;
     var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || unreadMessageCount > 0); // unread count can be 0 if the user marks unread only own messages
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_j = virtuosoRef.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [] }),
+        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_j = virtuosoRef.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparator && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };
@@ -1037,11 +1108,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 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _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, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, _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 +1124,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 +1182,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) {
@@ -1168,8 +1240,9 @@ var VirtualizedMessageListWithContext = function (props) {
         }
     };
     var atTopStateChange = function (isAtTop) {
-        if (isAtTop)
+        if (isAtTop) {
             loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
+        }
     };
     React.useEffect(function () {
         var scrollTimeout;
@@ -1212,6 +1285,8 @@ var VirtualizedMessageListWithContext = function (props) {
                         ownMessagesReadByOthers: ownMessagesReadByOthers,
                         processedMessages: processedMessages,
                         shouldGroupByUser: shouldGroupByUser,
+                        sortReactionDetails: sortReactionDetails,
+                        sortReactions: sortReactions,
                         threadList: threadList,
                         unreadMessageCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
                         UnreadMessagesSeparator: UnreadMessagesSeparator,
@@ -1231,7 +1306,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.10.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1471,7 +1546,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.10.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,YAAY,CAAC"}

package/dist/version.js

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