stream-chat-react 10.8.8 → 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.
- package/dist/browser.full-bundle.js +32 -17
- package/dist/browser.full-bundle.js.map +1 -1
- package/dist/browser.full-bundle.min.js +1 -1
- package/dist/browser.full-bundle.min.js.map +1 -1
- package/dist/components/Loading/LoadingIndicator.js +1 -1
- package/dist/components/MessageList/VirtualizedMessageList.d.ts +2 -0
- package/dist/components/MessageList/VirtualizedMessageList.d.ts.map +1 -1
- package/dist/components/MessageList/VirtualizedMessageList.js +29 -16
- package/dist/components/MessageList/utils.js +1 -1
- package/dist/index.cjs.js +30 -15
- package/dist/index.cjs.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
var UnMemoizedLoadingIndicator = function (props) {
|
|
3
3
|
var _a = props.color, color = _a === void 0 ? '#006CFF' : _a, _b = props.size, size = _b === void 0 ? 15 : _b;
|
|
4
|
-
return (React.createElement("div", { className: "str-chat__loading-indicator
|
|
4
|
+
return (React.createElement("div", { className: "str-chat__loading-indicator", "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
|
|
5
5
|
React.createElement("svg", { height: size, viewBox: "0 0 30 30", width: size, xmlns: 'http://www.w3.org/2000/svg' },
|
|
6
6
|
React.createElement("defs", null,
|
|
7
7
|
React.createElement("linearGradient", { id: 'a', x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
|
|
@@ -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;
|
|
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
|
|
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,
|
|
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
|
|
111
|
-
var
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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
|
@@ -25169,7 +25169,7 @@ var LoadingErrorIndicator = React__default["default"].memo(UnMemoizedLoadingErro
|
|
|
25169
25169
|
|
|
25170
25170
|
var UnMemoizedLoadingIndicator = function (props) {
|
|
25171
25171
|
var _a = props.color, color = _a === void 0 ? '#006CFF' : _a, _b = props.size, size = _b === void 0 ? 15 : _b;
|
|
25172
|
-
return (React__default["default"].createElement("div", { className: "str-chat__loading-indicator
|
|
25172
|
+
return (React__default["default"].createElement("div", { className: "str-chat__loading-indicator", "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
|
|
25173
25173
|
React__default["default"].createElement("svg", { height: size, viewBox: "0 0 30 30", width: size, xmlns: 'http://www.w3.org/2000/svg' },
|
|
25174
25174
|
React__default["default"].createElement("defs", null,
|
|
25175
25175
|
React__default["default"].createElement("linearGradient", { id: 'a', x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
|
|
@@ -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.
|
|
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.
|
|
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,
|
|
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
|
|
35492
|
-
var
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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) {
|