stream-chat-react 10.8.9 → 10.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -46,6 +46,8 @@ export declare type VirtualizedMessageListProps<StreamChatGenerics extends Defau
46
46
  messages?: StreamMessage<StreamChatGenerics>[];
47
47
  /** The amount of extra content the list should render in addition to what's necessary to fill in the viewport */
48
48
  overscan?: number;
49
+ /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */
50
+ returnAllReadData?: boolean;
49
51
  /**
50
52
  * Performance improvement by showing placeholders if user scrolls fast through list.
51
53
  * it can be used like this:
@@ -1 +1 @@
1
- {"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAEL,uBAAuB,EACvB,0BAA0B,EAG1B,aAAa,EACd,MAAM,gBAAgB,CAAC;AAUxB,OAAO,EAAkB,UAAU,EAAmB,MAAM,SAAS,CAAC;AAOtE,OAAO,EAAW,YAAY,EAAiB,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE3F,OAAO,EACL,yBAAyB,EAE1B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,aAAa,EAEd,MAAM,mCAAmC,CAAC;AAQ3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8chF,oBAAY,2BAA2B,CACrC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,GAAG,gBAAgB,CAAC,CAAC,GAAG;IAC/F,gJAAgJ;IAChJ,uBAAuB,CAAC,EAAE,aAAa,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC9D,gGAAgG;IAChG,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,sEAAsE;IACtE,qBAAqB,CAAC,EAAE,CACtB,WAAW,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAChD,KAAK,EAAE,MAAM,KACV,KAAK,CAAC,YAAY,CAAC;IACxB,qJAAqJ;IACrJ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6FAA6F;IAC7F,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,eAAe,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAClD,WAAW,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC9C,aAAa,EAAE,OAAO,KACnB,UAAU,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iIAAiI;IACjI,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,+EAA+E;IAC/E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uIAAuI;IACvI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oDAAoD;IACpD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4LAA4L;IAC5L,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,2LAA2L;IAC3L,aAAa,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9E,2MAA2M;IAC3M,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC3E,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4JAA4J;IAC5J,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,qBAAqB,CAAC,EAAE,uBAAuB,GAAG;QAChD,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;KAC9D,CAAC;IACF,4FAA4F;IAC5F,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,sJAAsJ;IACtJ,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wLAAwL;IACxL,2BAA2B,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAChD,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,KAAK,EAAE,2BAA2B,CAAC,kBAAkB,CAAC,eAqCvD"}
1
+ {"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}
@@ -50,13 +50,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
50
50
  import { Virtuoso, } from 'react-virtuoso';
51
51
  import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
52
52
  import { useGiphyPreview } from './hooks/useGiphyPreview';
53
- import { useNewMessageNotification } from './hooks/useNewMessageNotification';
54
- import { usePrependedMessagesCount } from './hooks/usePrependMessagesCount';
55
- import { useShouldForceScrollToBottom } from './hooks/useShouldForceScrollToBottom';
53
+ import { useLastReadData, useNewMessageNotification, usePrependedMessagesCount, useShouldForceScrollToBottom, } from './hooks';
56
54
  import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
57
55
  import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
58
56
  import { MessageListMainPanel } from './MessageListMainPanel';
59
- import { getGroupStyles, processMessages } from './utils';
57
+ import { getGroupStyles, getLastReceived, processMessages } from './utils';
60
58
  import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
61
59
  import { DateSeparator as DefaultDateSeparator } from '../DateSeparator/DateSeparator';
62
60
  import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator';
@@ -103,15 +101,15 @@ var VirtualizedMessageListWithContext = function (props) {
103
101
  // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
104
102
  _e = props.overscan,
105
103
  // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
106
- 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;
104
+ 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;
107
105
  // Stops errors generated from react-virtuoso to bubble up
108
106
  // to Sentry or other tracking tools.
109
107
  useCaptureResizeObserverExceededError();
110
- var _k = useComponentContext('VirtualizedMessageList'), _l = _k.DateSeparator, DateSeparator = _l === void 0 ? DefaultDateSeparator : _l, _m = _k.EmptyStateIndicator, EmptyStateIndicator = _m === void 0 ? DefaultEmptyStateIndicator : _m, _o = _k.GiphyPreviewMessage, GiphyPreviewMessage = _o === void 0 ? DefaultGiphyPreviewMessage : _o, _p = _k.LoadingIndicator, LoadingIndicator = _p === void 0 ? DefaultLoadingIndicator : _p, _q = _k.MessageListNotifications, MessageListNotifications = _q === void 0 ? DefaultMessageListNotifications : _q, _r = _k.MessageNotification, MessageNotification = _r === void 0 ? DefaultMessageNotification : _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;
111
- var _v = useChatContext('VirtualizedMessageList'), client = _v.client, customClasses = _v.customClasses;
108
+ var _l = useComponentContext('VirtualizedMessageList'), _m = _l.DateSeparator, DateSeparator = _m === void 0 ? DefaultDateSeparator : _m, _o = _l.EmptyStateIndicator, EmptyStateIndicator = _o === void 0 ? DefaultEmptyStateIndicator : _o, _p = _l.GiphyPreviewMessage, GiphyPreviewMessage = _p === void 0 ? DefaultGiphyPreviewMessage : _p, _q = _l.LoadingIndicator, LoadingIndicator = _q === void 0 ? DefaultLoadingIndicator : _q, _r = _l.MessageListNotifications, MessageListNotifications = _r === void 0 ? DefaultMessageListNotifications : _r, _s = _l.MessageNotification, MessageNotification = _s === void 0 ? DefaultMessageNotification : _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;
109
+ var _w = useChatContext('VirtualizedMessageList'), client = _w.client, customClasses = _w.customClasses;
112
110
  var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
113
111
  var MessageUIComponent = propMessage || contextMessage;
114
- var _w = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _w.giphyPreviewMessage, setGiphyPreviewMessage = _w.setGiphyPreviewMessage;
112
+ var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
115
113
  var processedMessages = useMemo(function () {
116
114
  if (typeof messages === 'undefined') {
117
115
  return [];
@@ -140,6 +138,16 @@ var VirtualizedMessageListWithContext = function (props) {
140
138
  messages === null || messages === void 0 ? void 0 : messages.length,
141
139
  client.userID,
142
140
  ]);
141
+ // get the mapping of own messages to array of users who read them
142
+ var ownMessagesReadByOthers = useLastReadData({
143
+ messages: processedMessages,
144
+ read: read,
145
+ returnAllReadData: returnAllReadData,
146
+ userID: client.userID,
147
+ });
148
+ var lastReceivedMessageId = useMemo(function () { return getLastReceived(processedMessages); }, [
149
+ processedMessages,
150
+ ]);
143
151
  var groupStylesFn = groupStyles || getGroupStyles;
144
152
  var messageGroupStyles = useMemo(function () {
145
153
  return processedMessages.reduce(function (acc, message, i) {
@@ -152,7 +160,7 @@ var VirtualizedMessageListWithContext = function (props) {
152
160
  // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
153
161
  [processedMessages.length, shouldGroupByUser]);
154
162
  var virtuoso = useRef(null);
155
- var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, newMessagesNotification = _x.newMessagesNotification, setIsMessageListScrolledToBottom = _x.setIsMessageListScrolledToBottom, setNewMessagesNotification = _x.setNewMessagesNotification;
163
+ var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
156
164
  var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
157
165
  return __generator(this, function (_a) {
158
166
  switch (_a.label) {
@@ -179,7 +187,7 @@ var VirtualizedMessageListWithContext = function (props) {
179
187
  hasMoreNewer,
180
188
  jumpToLatestMessage,
181
189
  ]);
182
- var _y = React.useState(false), newMessagesReceivedInBackground = _y[0], setNewMessagesReceivedInBackground = _y[1];
190
+ var _z = React.useState(false), newMessagesReceivedInBackground = _z[0], setNewMessagesReceivedInBackground = _z[1];
183
191
  var resetNewMessagesReceivedInBackground = useCallback(function () {
184
192
  setNewMessagesReceivedInBackground(false);
185
193
  }, []);
@@ -207,7 +215,7 @@ var VirtualizedMessageListWithContext = function (props) {
207
215
  /**
208
216
  * Logic to update the key of the virtuoso component when the list jumps to a new location.
209
217
  */
210
- var _z = useState(+new Date()), messageSetKey = _z[0], setMessageSetKey = _z[1];
218
+ var _0 = useState(+new Date()), messageSetKey = _0[0], setMessageSetKey = _0[1];
211
219
  var firstMessageId = useRef();
212
220
  useEffect(function () {
213
221
  var _a;
@@ -228,8 +236,9 @@ var VirtualizedMessageListWithContext = function (props) {
228
236
  // a message from another user has been received - don't scroll to bottom unless already there
229
237
  return isAtBottom ? stickToBottomScrollBehavior : false;
230
238
  };
231
- var messageRenderer = useCallback(function (messageList, virtuosoIndex) {
239
+ var messageRenderer = useCallback(function (messageList, virtuosoIndex, virtuosoContext) {
232
240
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
241
+ var lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers;
233
242
  var streamMessageIndex = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
234
243
  // use custom renderer supplied by client if present and skip the rest
235
244
  if (customMessageRenderer) {
@@ -249,7 +258,7 @@ var VirtualizedMessageListWithContext = function (props) {
249
258
  ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
250
259
  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);
251
260
  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);
252
- return (React.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 }));
261
+ return (React.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] || [] }));
253
262
  }, [customMessageRenderer, shouldGroupByUser, numItemsPrepended]);
254
263
  var Item = useMemo(function () {
255
264
  // using 'display: inline-block'
@@ -319,10 +328,14 @@ var VirtualizedMessageListWithContext = function (props) {
319
328
  return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
320
329
  }, context: {
321
330
  customClasses: customClasses,
331
+ lastReceivedMessageId: lastReceivedMessageId,
322
332
  messageGroupStyles: messageGroupStyles,
323
333
  numItemsPrepended: numItemsPrepended,
334
+ ownMessagesReadByOthers: ownMessagesReadByOthers,
324
335
  processedMessages: processedMessages,
325
- }, 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 } : {}))))),
336
+ }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i, _, context) {
337
+ return messageRenderer(processedMessages, i, context);
338
+ }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
326
339
  React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
327
340
  giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
328
341
  };
@@ -332,7 +345,7 @@ var VirtualizedMessageListWithContext = function (props) {
332
345
  */
333
346
  export function VirtualizedMessageList(props) {
334
347
  var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
335
- 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;
348
+ 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;
336
349
  var messages = props.messages || contextMessages;
337
- return (React.createElement(VirtualizedMessageListWithContext, __assign({ 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)));
350
+ return (React.createElement(VirtualizedMessageListWithContext, __assign({ 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)));
338
351
  }
@@ -108,7 +108,7 @@ export var getReadStates = function (messages, read, returnAllReadData) {
108
108
  var userLastReadMsgId;
109
109
  // loop messages sent by current user and add read data for other users in channel
110
110
  messages.forEach(function (msg) {
111
- if (msg.updated_at && msg.updated_at < readState.last_read) {
111
+ if (msg.created_at && msg.created_at < readState.last_read) {
112
112
  userLastReadMsgId = msg.id;
113
113
  // if true, save other user's read data for all messages they've read
114
114
  if (returnAllReadData) {
package/dist/index.cjs.js CHANGED
@@ -31740,7 +31740,7 @@ var getReadStates = function (messages, read, returnAllReadData) {
31740
31740
  var userLastReadMsgId;
31741
31741
  // loop messages sent by current user and add read data for other users in channel
31742
31742
  messages.forEach(function (msg) {
31743
- if (msg.updated_at && msg.updated_at < readState.last_read) {
31743
+ if (msg.created_at && msg.created_at < readState.last_read) {
31744
31744
  userLastReadMsgId = msg.id;
31745
31745
  // if true, save other user's read data for all messages they've read
31746
31746
  if (returnAllReadData) {
@@ -33779,7 +33779,7 @@ var UnMemoizedChannelList = function (props) {
33779
33779
  */
33780
33780
  var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
33781
33781
 
33782
- var version = '10.8.9';
33782
+ var version = '10.9.0';
33783
33783
 
33784
33784
  var useChat = function (_a) {
33785
33785
  var _b, _c;
@@ -35484,15 +35484,15 @@ var VirtualizedMessageListWithContext = function (props) {
35484
35484
  // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
35485
35485
  _e = props.overscan,
35486
35486
  // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
35487
- 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;
35487
+ 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;
35488
35488
  // Stops errors generated from react-virtuoso to bubble up
35489
35489
  // to Sentry or other tracking tools.
35490
35490
  useCaptureResizeObserverExceededError();
35491
- 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;
35492
- var _v = useChatContext('VirtualizedMessageList'), client = _v.client, customClasses = _v.customClasses;
35491
+ 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;
35492
+ var _w = useChatContext('VirtualizedMessageList'), client = _w.client, customClasses = _w.customClasses;
35493
35493
  var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
35494
35494
  var MessageUIComponent = propMessage || contextMessage;
35495
- var _w = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _w.giphyPreviewMessage, setGiphyPreviewMessage = _w.setGiphyPreviewMessage;
35495
+ var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
35496
35496
  var processedMessages = React.useMemo(function () {
35497
35497
  if (typeof messages === 'undefined') {
35498
35498
  return [];
@@ -35521,6 +35521,16 @@ var VirtualizedMessageListWithContext = function (props) {
35521
35521
  messages === null || messages === void 0 ? void 0 : messages.length,
35522
35522
  client.userID,
35523
35523
  ]);
35524
+ // get the mapping of own messages to array of users who read them
35525
+ var ownMessagesReadByOthers = useLastReadData({
35526
+ messages: processedMessages,
35527
+ read: read,
35528
+ returnAllReadData: returnAllReadData,
35529
+ userID: client.userID,
35530
+ });
35531
+ var lastReceivedMessageId = React.useMemo(function () { return getLastReceived(processedMessages); }, [
35532
+ processedMessages,
35533
+ ]);
35524
35534
  var groupStylesFn = groupStyles || getGroupStyles;
35525
35535
  var messageGroupStyles = React.useMemo(function () {
35526
35536
  return processedMessages.reduce(function (acc, message, i) {
@@ -35533,7 +35543,7 @@ var VirtualizedMessageListWithContext = function (props) {
35533
35543
  // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
35534
35544
  [processedMessages.length, shouldGroupByUser]);
35535
35545
  var virtuoso = React.useRef(null);
35536
- var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, newMessagesNotification = _x.newMessagesNotification, setIsMessageListScrolledToBottom = _x.setIsMessageListScrolledToBottom, setNewMessagesNotification = _x.setNewMessagesNotification;
35546
+ var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
35537
35547
  var scrollToBottom = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
35538
35548
  return __generator(this, function (_a) {
35539
35549
  switch (_a.label) {
@@ -35560,7 +35570,7 @@ var VirtualizedMessageListWithContext = function (props) {
35560
35570
  hasMoreNewer,
35561
35571
  jumpToLatestMessage,
35562
35572
  ]);
35563
- var _y = React__default["default"].useState(false), newMessagesReceivedInBackground = _y[0], setNewMessagesReceivedInBackground = _y[1];
35573
+ var _z = React__default["default"].useState(false), newMessagesReceivedInBackground = _z[0], setNewMessagesReceivedInBackground = _z[1];
35564
35574
  var resetNewMessagesReceivedInBackground = React.useCallback(function () {
35565
35575
  setNewMessagesReceivedInBackground(false);
35566
35576
  }, []);
@@ -35588,7 +35598,7 @@ var VirtualizedMessageListWithContext = function (props) {
35588
35598
  /**
35589
35599
  * Logic to update the key of the virtuoso component when the list jumps to a new location.
35590
35600
  */
35591
- var _z = React.useState(+new Date()), messageSetKey = _z[0], setMessageSetKey = _z[1];
35601
+ var _0 = React.useState(+new Date()), messageSetKey = _0[0], setMessageSetKey = _0[1];
35592
35602
  var firstMessageId = React.useRef();
35593
35603
  React.useEffect(function () {
35594
35604
  var _a;
@@ -35609,8 +35619,9 @@ var VirtualizedMessageListWithContext = function (props) {
35609
35619
  // a message from another user has been received - don't scroll to bottom unless already there
35610
35620
  return isAtBottom ? stickToBottomScrollBehavior : false;
35611
35621
  };
35612
- var messageRenderer = React.useCallback(function (messageList, virtuosoIndex) {
35622
+ var messageRenderer = React.useCallback(function (messageList, virtuosoIndex, virtuosoContext) {
35613
35623
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
35624
+ var lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers;
35614
35625
  var streamMessageIndex = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
35615
35626
  // use custom renderer supplied by client if present and skip the rest
35616
35627
  if (customMessageRenderer) {
@@ -35630,7 +35641,7 @@ var VirtualizedMessageListWithContext = function (props) {
35630
35641
  ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
35631
35642
  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);
35632
35643
  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);
35633
- 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 }));
35644
+ 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] || [] }));
35634
35645
  }, [customMessageRenderer, shouldGroupByUser, numItemsPrepended]);
35635
35646
  var Item = React.useMemo(function () {
35636
35647
  // using 'display: inline-block'
@@ -35700,10 +35711,14 @@ var VirtualizedMessageListWithContext = function (props) {
35700
35711
  return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
35701
35712
  }, context: {
35702
35713
  customClasses: customClasses,
35714
+ lastReceivedMessageId: lastReceivedMessageId,
35703
35715
  messageGroupStyles: messageGroupStyles,
35704
35716
  numItemsPrepended: numItemsPrepended,
35717
+ ownMessagesReadByOthers: ownMessagesReadByOthers,
35705
35718
  processedMessages: processedMessages,
35706
- }, 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 } : {}))))),
35719
+ }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i, _, context) {
35720
+ return messageRenderer(processedMessages, i, context);
35721
+ }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
35707
35722
  React__default["default"].createElement(MessageListNotifications$1, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
35708
35723
  giphyPreviewMessage && React__default["default"].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
35709
35724
  };
@@ -35713,9 +35728,9 @@ var VirtualizedMessageListWithContext = function (props) {
35713
35728
  */
35714
35729
  function VirtualizedMessageList(props) {
35715
35730
  var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
35716
- 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;
35731
+ 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;
35717
35732
  var messages = props.messages || contextMessages;
35718
- return (React__default["default"].createElement(VirtualizedMessageListWithContext, __assign({ 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)));
35733
+ return (React__default["default"].createElement(VirtualizedMessageListWithContext, __assign({ 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)));
35719
35734
  }
35720
35735
 
35721
35736
  var CloseIcon = function (_a) {