stream-chat-react 10.8.8 → 10.9.0

package/dist/browser.full-bundle.js

@@ -39866,7 +39866,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedLoadingIndicator = function (props) {
         var _a = props.color, color = _a === void 0 ? '#006CFF' : _a, _b = props.size, size = _b === void 0 ? 15 : _b;
-        return (React__default["default"].createElement("div", { className: "str-chat__loading-indicator ".concat(color), "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
+        return (React__default["default"].createElement("div", { className: "str-chat__loading-indicator", "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
             React__default["default"].createElement("svg", { height: size, viewBox: "0 0 30 30", width: size, xmlns: 'http://www.w3.org/2000/svg' },
                 React__default["default"].createElement("defs", null,
                     React__default["default"].createElement("linearGradient", { id: 'a', x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
@@ -46460,7 +46460,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             var userLastReadMsgId;
             // loop messages sent by current user and add read data for other users in channel
             messages.forEach(function (msg) {
-                if (msg.updated_at && msg.updated_at < readState.last_read) {
+                if (msg.created_at && msg.created_at < readState.last_read) {
                     userLastReadMsgId = msg.id;
                     // if true, save other user's read data for all messages they've read
                     if (returnAllReadData) {
@@ -48515,7 +48515,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.8.8';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.9.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -51418,6 +51418,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         return recheckForNewOwnMessage;
     }
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var PREPEND_OFFSET = Math.pow(10, 7);
     function captureResizeObserverExceededError(e) {
         if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
@@ -51453,15 +51455,15 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
         _e = props.overscan, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-        overscan = _e === void 0 ? 0 : _e, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+        overscan = _e === void 0 ? 0 : _e, read = props.read, _f = props.returnAllReadData, returnAllReadData = _f === void 0 ? false : _f, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _g = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _g === void 0 ? false : _g, _h = props.separateGiphyPreview, separateGiphyPreview = _h === void 0 ? false : _h, _j = props.shouldGroupByUser, shouldGroupByUser = _j === void 0 ? false : _j, _k = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _k === void 0 ? 'smooth' : _k, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
         // Stops errors generated from react-virtuoso to bubble up
         // to Sentry or other tracking tools.
         useCaptureResizeObserverExceededError();
-        var _k = useComponentContext('VirtualizedMessageList'), _l = _k.DateSeparator, DateSeparator$1 = _l === void 0 ? DateSeparator : _l, _m = _k.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _k.GiphyPreviewMessage, GiphyPreviewMessage$1 = _o === void 0 ? GiphyPreviewMessage : _o, _p = _k.LoadingIndicator, LoadingIndicator$1 = _p === void 0 ? LoadingIndicator : _p, _q = _k.MessageListNotifications, MessageListNotifications$1 = _q === void 0 ? MessageListNotifications : _q, _r = _k.MessageNotification, MessageNotification$1 = _r === void 0 ? MessageNotification : _r, _s = _k.MessageSystem, MessageSystem = _s === void 0 ? EventComponent : _s, _t = _k.TypingIndicator, TypingIndicator = _t === void 0 ? null : _t, _u = _k.VirtualMessage, contextMessage = _u === void 0 ? MessageSimple : _u;
-        var _v = useChatContext('VirtualizedMessageList'), client = _v.client, customClasses = _v.customClasses;
+        var _l = useComponentContext('VirtualizedMessageList'), _m = _l.DateSeparator, DateSeparator$1 = _m === void 0 ? DateSeparator : _m, _o = _l.EmptyStateIndicator, EmptyStateIndicator$1 = _o === void 0 ? EmptyStateIndicator : _o, _p = _l.GiphyPreviewMessage, GiphyPreviewMessage$1 = _p === void 0 ? GiphyPreviewMessage : _p, _q = _l.LoadingIndicator, LoadingIndicator$1 = _q === void 0 ? LoadingIndicator : _q, _r = _l.MessageListNotifications, MessageListNotifications$1 = _r === void 0 ? MessageListNotifications : _r, _s = _l.MessageNotification, MessageNotification$1 = _s === void 0 ? MessageNotification : _s, _t = _l.MessageSystem, MessageSystem = _t === void 0 ? EventComponent : _t, _u = _l.TypingIndicator, TypingIndicator = _u === void 0 ? null : _u, _v = _l.VirtualMessage, contextMessage = _v === void 0 ? MessageSimple : _v;
+        var _w = useChatContext('VirtualizedMessageList'), client = _w.client, customClasses = _w.customClasses;
         var lastRead = React$2.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
         var MessageUIComponent = propMessage || contextMessage;
-        var _w = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _w.giphyPreviewMessage, setGiphyPreviewMessage = _w.setGiphyPreviewMessage;
+        var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
         var processedMessages = React$2.useMemo(function () {
             if (typeof messages === 'undefined') {
                 return [];
@@ -51490,6 +51492,16 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             messages === null || messages === void 0 ? void 0 : messages.length,
             client.userID,
         ]);
+        // get the mapping of own messages to array of users who read them
+        var ownMessagesReadByOthers = useLastReadData({
+            messages: processedMessages,
+            read: read,
+            returnAllReadData: returnAllReadData,
+            userID: client.userID,
+        });
+        var lastReceivedMessageId = React$2.useMemo(function () { return getLastReceived(processedMessages); }, [
+            processedMessages,
+        ]);
         var groupStylesFn = groupStyles || getGroupStyles;
         var messageGroupStyles = React$2.useMemo(function () {
             return processedMessages.reduce(function (acc, message, i) {
@@ -51502,7 +51514,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
         [processedMessages.length, shouldGroupByUser]);
         var virtuoso = React$2.useRef(null);
-        var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, newMessagesNotification = _x.newMessagesNotification, setIsMessageListScrolledToBottom = _x.setIsMessageListScrolledToBottom, setNewMessagesNotification = _x.setNewMessagesNotification;
+        var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
         var scrollToBottom = React$2.useCallback(function () { return __awaiter$1(void 0, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
@@ -51529,7 +51541,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             hasMoreNewer,
             jumpToLatestMessage,
         ]);
-        var _y = React__default["default"].useState(false), newMessagesReceivedInBackground = _y[0], setNewMessagesReceivedInBackground = _y[1];
+        var _z = React__default["default"].useState(false), newMessagesReceivedInBackground = _z[0], setNewMessagesReceivedInBackground = _z[1];
         var resetNewMessagesReceivedInBackground = React$2.useCallback(function () {
             setNewMessagesReceivedInBackground(false);
         }, []);
@@ -51557,7 +51569,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         /**
          * Logic to update the key of the virtuoso component when the list jumps to a new location.
          */
-        var _z = React$2.useState(+new Date()), messageSetKey = _z[0], setMessageSetKey = _z[1];
+        var _0 = React$2.useState(+new Date()), messageSetKey = _0[0], setMessageSetKey = _0[1];
         var firstMessageId = React$2.useRef();
         React$2.useEffect(function () {
             var _a;
@@ -51578,8 +51590,9 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             // a message from another user has been received - don't scroll to bottom unless already there
             return isAtBottom ? stickToBottomScrollBehavior : false;
         };
-        var messageRenderer = React$2.useCallback(function (messageList, virtuosoIndex) {
+        var messageRenderer = React$2.useCallback(function (messageList, virtuosoIndex, virtuosoContext) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers;
             var streamMessageIndex = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
             // use custom renderer supplied by client if present and skip the rest
             if (customMessageRenderer) {
@@ -51599,7 +51612,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
             var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
             var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
-            return (React__default["default"].createElement(Message, { autoscrollToBottom: (_j = virtuoso.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, message: message, Message: MessageUIComponent, messageActions: props.messageActions }));
+            return (React__default["default"].createElement(Message, { autoscrollToBottom: (_j = virtuoso.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: props.messageActions, readBy: ownMessagesReadByOthers[message.id] || [] }));
         }, [customMessageRenderer, shouldGroupByUser, numItemsPrepended]);
         var Item = React$2.useMemo(function () {
             // using 'display: inline-block'
@@ -51669,10 +51682,14 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                             return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
                         }, context: {
                             customClasses: customClasses,
+                            lastReceivedMessageId: lastReceivedMessageId,
                             messageGroupStyles: messageGroupStyles,
                             numItemsPrepended: numItemsPrepended,
+                            ownMessagesReadByOthers: ownMessagesReadByOthers,
                             processedMessages: processedMessages,
-                        }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
+                        }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i, _, context) {
+                            return messageRenderer(processedMessages, i, context);
+                        }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
             React__default["default"].createElement(MessageListNotifications$1, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
             giphyPreviewMessage && React__default["default"].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
     };
@@ -51682,15 +51699,13 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
      */
     function VirtualizedMessageList(props) {
         var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
-        var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, suppressAutoscroll = _b.suppressAutoscroll;
+        var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, read = _b.read, suppressAutoscroll = _b.suppressAutoscroll;
         var messages = props.messages || contextMessages;
-        return (React__default["default"].createElement(VirtualizedMessageListWithContext, __assign$8({ channel: channel, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, suppressAutoscroll: suppressAutoscroll }, props)));
+        return (React__default["default"].createElement(VirtualizedMessageListWithContext, __assign$8({ channel: channel, 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)));
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CloseIcon = function (_a) {
         var title = _a.title;
         var t = useTranslationContext('CloseIcon').t;