stream-chat-react 10.14.0 → 10.15.0

package/dist/components/MessageList/VirtualizedMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -1,26 +1,21 @@
-import { __assign, __awaiter, __generator } from "tslib";
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { __assign, __awaiter, __generator, __rest } from "tslib";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, } from 'react-virtuoso';
 import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
-import { useGiphyPreview } from './hooks/useGiphyPreview';
-import { useLastReadData, useNewMessageNotification, usePrependedMessagesCount, useShouldForceScrollToBottom, } from './hooks';
+import { useLastReadData } from './hooks';
+import { useGiphyPreview, useMessageSetKey, useNewMessageNotification, usePrependedMessagesCount, useScrollToBottomOnNewMessage, useShouldForceScrollToBottom, } from './hooks/VirtualizedMessageList';
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
 import { MessageListMainPanel } from './MessageListMainPanel';
 import { getGroupStyles, getLastReceived, processMessages } from './utils';
-import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { DateSeparator as DefaultDateSeparator } from '../DateSeparator/DateSeparator';
-import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator';
-import { EventComponent } from '../EventComponent/EventComponent';
-import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading/LoadingIndicator';
-import { Message, MessageSimple } from '../Message';
+import { MessageSimple } from '../Message';
+import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
+import { EventComponent } from '../EventComponent';
+import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Footer, Header, Item, messageRenderer, } from './VirtualizedMessageListComponents';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
-import { isDate } from '../../context/TranslationContext';
-var PREPEND_OFFSET = Math.pow(10, 7);
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -51,19 +46,21 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 var VirtualizedMessageListWithContext = function (props) {
-    var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, notifications = props.notifications, 
+    var additionalMessageInputProps = props.additionalMessageInputProps, _a = props.additionalVirtuosoProps, additionalVirtuosoProps = _a === void 0 ? {} : _a, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? true : _b, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _e = props.messageLimit, messageLimit = _e === void 0 ? 100 : _e, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    _e = props.overscan, 
+    _f = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    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;
+    overscan = _f === void 0 ? 0 : _f, read = props.read, _g = props.returnAllReadData, returnAllReadData = _g === void 0 ? false : _g, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _h = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _h === void 0 ? false : _h, _j = props.separateGiphyPreview, separateGiphyPreview = _j === void 0 ? false : _j, _k = props.shouldGroupByUser, shouldGroupByUser = _k === void 0 ? false : _k, _l = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _l === void 0 ? 'smooth' : _l, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = __rest(additionalVirtuosoProps, ["components"]);
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    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;
-    var _w = useChatContext('VirtualizedMessageList'), client = _w.client, customClasses = _w.customClasses;
+    var _m = useComponentContext('VirtualizedMessageList'), _o = _m.DateSeparator, DateSeparator = _o === void 0 ? DefaultDateSeparator : _o, _p = _m.GiphyPreviewMessage, GiphyPreviewMessage = _p === void 0 ? DefaultGiphyPreviewMessage : _p, _q = _m.MessageListNotifications, MessageListNotifications = _q === void 0 ? DefaultMessageListNotifications : _q, _r = _m.MessageNotification, MessageNotification = _r === void 0 ? DefaultMessageNotification : _r, _s = _m.MessageSystem, MessageSystem = _s === void 0 ? EventComponent : _s, _t = _m.VirtualMessage, MessageUIComponentFromContext = _t === void 0 ? MessageSimple : _t;
+    var MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
+    var _u = useChatContext('VirtualizedMessageList'), client = _u.client, customClasses = _u.customClasses;
+    var virtuoso = useRef(null);
     var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
-    var MessageUIComponent = propMessage || contextMessage;
-    var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
+    var _v = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _v.giphyPreviewMessage, setGiphyPreviewMessage = _v.setGiphyPreviewMessage;
     var processedMessages = useMemo(function () {
         if (typeof messages === 'undefined') {
             return [];
@@ -112,9 +109,8 @@ var VirtualizedMessageListWithContext = function (props) {
         }, {});
     }, 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
-    [processedMessages.length, shouldGroupByUser]);
-    var virtuoso = useRef(null);
-    var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
+    [processedMessages.length, shouldGroupByUser, groupStylesFn]);
+    var _w = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _w.atBottom, isMessageListScrolledToBottom = _w.isMessageListScrolledToBottom, newMessagesNotification = _w.newMessagesNotification, setIsMessageListScrolledToBottom = _w.setIsMessageListScrolledToBottom, setNewMessagesNotification = _w.setNewMessagesNotification;
     var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -141,44 +137,9 @@ var VirtualizedMessageListWithContext = function (props) {
         hasMoreNewer,
         jumpToLatestMessage,
     ]);
-    var _z = React.useState(false), newMessagesReceivedInBackground = _z[0], setNewMessagesReceivedInBackground = _z[1];
-    var resetNewMessagesReceivedInBackground = useCallback(function () {
-        setNewMessagesReceivedInBackground(false);
-    }, []);
-    useEffect(function () {
-        setNewMessagesReceivedInBackground(true);
-    }, [messages]);
-    var scrollToBottomIfConfigured = useCallback(function (event) {
-        if (scrollToLatestMessageOnFocus && event.target === window) {
-            if (newMessagesReceivedInBackground) {
-                setTimeout(scrollToBottom, 100);
-            }
-        }
-    }, [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]);
-    useEffect(function () {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('focus', scrollToBottomIfConfigured);
-            window.addEventListener('blur', resetNewMessagesReceivedInBackground);
-        }
-        return function () {
-            window.removeEventListener('focus', scrollToBottomIfConfigured);
-            window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
-        };
-    }, [scrollToBottomIfConfigured]);
+    useScrollToBottomOnNewMessage({ messages: messages, scrollToBottom: scrollToBottom, scrollToLatestMessageOnFocus: scrollToLatestMessageOnFocus });
     var numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
-    /**
-     * Logic to update the key of the virtuoso component when the list jumps to a new location.
-     */
-    var _0 = useState(+new Date()), messageSetKey = _0[0], setMessageSetKey = _0[1];
-    var firstMessageId = useRef();
-    useEffect(function () {
-        var _a;
-        var continuousSet = messages === null || messages === void 0 ? void 0 : messages.find(function (message) { return message.id === firstMessageId.current; });
-        if (!continuousSet) {
-            setMessageSetKey(+new Date());
-        }
-        firstMessageId.current = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
-    }, [messages]);
+    var messageSetKey = useMessageSetKey({ messages: messages }).messageSetKey;
     var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
     var followOutput = function (isAtBottom) {
         if (hasMoreNewer || suppressAutoscroll) {
@@ -190,63 +151,10 @@ var VirtualizedMessageListWithContext = function (props) {
         // a message from another user has been received - don't scroll to bottom unless already there
         return isAtBottom ? stickToBottomScrollBehavior : false;
     };
-    var messageRenderer = 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) {
-            return customMessageRenderer(messageList, streamMessageIndex);
-        }
-        var message = messageList[streamMessageIndex];
-        if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
-            return React.createElement(DateSeparator, { date: message.date, unread: message.unread });
-        }
-        if (!message)
-            return React.createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
-        if (message.type === 'system') {
-            return React.createElement(MessageSystem, { message: message });
-        }
-        var groupedByUser = shouldGroupByUser &&
-            streamMessageIndex > 0 &&
-            ((_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.createElement(Message, { additionalMessageInputProps: props.additionalMessageInputProps, 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 = useMemo(function () {
-        // using 'display: inline-block'
-        // traps CSS margins of the item elements, preventing incorrect item measurements
-        var Item = function (props) {
-            var _a;
-            var _b;
-            var context = props.context;
-            var streamMessageIndex = props['data-item-index'] + context.numItemsPrepended - PREPEND_OFFSET;
-            var message = context.processedMessages[streamMessageIndex];
-            var groupStyles = context.messageGroupStyles[message.id] || '';
-            return (React.createElement("div", __assign({}, props, { className: ((_b = context === null || context === void 0 ? void 0 : context.customClasses) === null || _b === void 0 ? void 0 : _b.virtualMessage) ||
-                    clsx('str-chat__virtual-list-message-wrapper str-chat__li', (_a = {},
-                        _a["str-chat__li--".concat(groupStyles)] = groupStyles,
-                        _a)) })));
-        };
-        return Item;
+    var computeItemKey = useCallback(function (index, _, _a) {
+        var numItemsPrepended = _a.numItemsPrepended, processedMessages = _a.processedMessages;
+        return processedMessages[calculateItemIndex(index, numItemsPrepended)].id;
     }, []);
-    var virtuosoComponents = useMemo(function () {
-        var EmptyPlaceholder = function () { return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })))); };
-        var Header = function () {
-            return loadingMore ? (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
-                React.createElement(LoadingIndicator, { size: 20 }))) : (head || null);
-        };
-        var Footer = function () {
-            return TypingIndicator ? React.createElement(TypingIndicator, { avatarSize: 24 }) : React.createElement(React.Fragment, null);
-        };
-        return {
-            EmptyPlaceholder: EmptyPlaceholder,
-            Footer: Footer,
-            Header: Header,
-            Item: Item,
-        };
-    }, [loadingMore, head, Item]);
     var atBottomStateChange = function (isAtBottom) {
         atBottom.current = isAtBottom;
         setIsMessageListScrolledToBottom(isAtBottom);
@@ -278,18 +186,27 @@ var VirtualizedMessageListWithContext = function (props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(MessageListMainPanel, null,
             React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-                React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: virtuosoComponents, computeItemKey: function (index) {
-                        return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
-                    }, context: {
+                React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                        additionalMessageInputProps: additionalMessageInputProps,
+                        closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                         customClasses: customClasses,
+                        customMessageActions: customMessageActions,
+                        customMessageRenderer: customMessageRenderer,
+                        DateSeparator: DateSeparator,
+                        head: head,
                         lastReceivedMessageId: lastReceivedMessageId,
+                        loadingMore: loadingMore,
+                        Message: MessageUIComponent,
+                        messageActions: messageActions,
                         messageGroupStyles: messageGroupStyles,
+                        MessageSystem: MessageSystem,
                         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, _, 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 } : {}))))),
+                        shouldGroupByUser: shouldGroupByUser,
+                        threadList: threadList,
+                        virtuosoRef: virtuoso,
+                    }, endReached: endReached, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
         React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
 };

package/dist/components/MessageList/VirtualizedMessageListComponents.d.ts

@@ -0,0 +1,23 @@
+import { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import React from 'react';
+import { ItemProps } from 'react-virtuoso';
+import { VirtuosoContext } from './VirtualizedMessageList';
+export declare function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number): number;
+export declare function calculateFirstItemIndex(numItemsPrepended: number): number;
+declare type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    context?: VirtuosoContext<StreamChatGenerics>;
+};
+export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "children"> & {
+    'data-index': number;
+    'data-item-index': number;
+    'data-item-group-index'?: number | undefined;
+    'data-known-size': number;
+} & CommonVirtuosoComponentProps<StreamChatGenerics>) => JSX.Element;
+export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => JSX.Element | null;
+export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => JSX.Element;
+export declare const Footer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => JSX.Element | null;
+export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => JSX.Element | null;
+export {};
+//# sourceMappingURL=VirtualizedMessageListComponents.d.ts.map

package/dist/components/MessageList/VirtualizedMessageListComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedMessageListComponents.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAElF;AAED,wBAAgB,uBAAuB,CAAC,iBAAiB,EAAE,MAAM,UAEhE;AAED,aAAK,4BAA4B,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,OAAO,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;CAC/C,CAAC;AAGF,eAAO,MAAM,IAAI;;;;;;;oEAyBhB,CAAC;AACF,eAAO,MAAM,MAAM,0KAgBlB,CAAC;AACF,eAAO,MAAM,gBAAgB,mKAe5B,CAAC;AACF,eAAO,MAAM,MAAM,4GAKlB,CAAC;AACF,eAAO,MAAM,eAAe,oGAGX,MAAM,SACd,WAAW,6EAgEnB,CAAC"}

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -0,0 +1,70 @@
+import { __assign, __rest } from "tslib";
+import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
+import { isDate, useComponentContext } from '../../context';
+import React from 'react';
+import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
+import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
+import { Message } from '../Message';
+import clsx from 'clsx';
+var PREPEND_OFFSET = Math.pow(10, 7);
+export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
+    return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
+}
+export function calculateFirstItemIndex(numItemsPrepended) {
+    return PREPEND_OFFSET - numItemsPrepended;
+}
+// using 'display: inline-block'
+// traps CSS margins of the item elements, preventing incorrect item measurements
+export var Item = function (_a) {
+    var _b;
+    var _c;
+    var context = _a.context, props = __rest(_a, ["context"]);
+    if (!context)
+        return React.createElement(React.Fragment, null);
+    var message = context.processedMessages[calculateItemIndex(props['data-item-index'], context.numItemsPrepended)];
+    var groupStyles = context.messageGroupStyles[message.id];
+    return (React.createElement("div", __assign({}, props, { className: ((_c = context === null || context === void 0 ? void 0 : context.customClasses) === null || _c === void 0 ? void 0 : _c.virtualMessage) ||
+            clsx('str-chat__virtual-list-message-wrapper str-chat__li', (_b = {},
+                _b["str-chat__li--".concat(groupStyles)] = groupStyles,
+                _b)) })));
+};
+export var Header = function (_a) {
+    var context = _a.context;
+    var _b = useComponentContext('VirtualizedMessageListHeader').LoadingIndicator, LoadingIndicator = _b === void 0 ? DefaultLoadingIndicator : _b;
+    if (!(context === null || context === void 0 ? void 0 : context.loadingMore))
+        return null;
+    return LoadingIndicator ? (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
+        React.createElement(LoadingIndicator, { size: 20 }))) : ((context === null || context === void 0 ? void 0 : context.head) || null);
+};
+export var EmptyPlaceholder = function (_a) {
+    var context = _a.context;
+    var _b = useComponentContext('VirtualizedMessageList').EmptyStateIndicator, EmptyStateIndicator = _b === void 0 ? DefaultEmptyStateIndicator : _b;
+    return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: (context === null || context === void 0 ? void 0 : context.threadList) ? 'thread' : 'message' }))));
+};
+export var Footer = function () {
+    var TypingIndicator = useComponentContext('VirtualizedMessageList').TypingIndicator;
+    return TypingIndicator ? React.createElement(TypingIndicator, { avatarSize: 24 }) : null;
+};
+export 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, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, virtuosoRef = virtuosoContext.virtuosoRef;
+    var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
+    if (customMessageRenderer) {
+        return customMessageRenderer(messageList, streamMessageIndex);
+    }
+    var message = messageList[streamMessageIndex];
+    if (!message)
+        return React.createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
+    if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
+        return DateSeparator ? React.createElement(DateSeparator, { date: message.date, unread: message.unread }) : null;
+    }
+    if (message.type === 'system') {
+        return MessageSystem ? React.createElement(MessageSystem, { message: message }) : null;
+    }
+    var groupedByUser = shouldGroupByUser &&
+        streamMessageIndex > 0 &&
+        ((_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.createElement(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] || [] }));
+};

package/dist/components/MessageList/hooks/MessageList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useEnrichedMessages';
+export * from './useMessageListElements';
+export * from './useMessageListScrollManager';
+export * from './useScrollLocationLogic';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/hooks/MessageList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC"}

package/dist/components/MessageList/hooks/MessageList/index.js

@@ -0,0 +1,4 @@
+export * from './useEnrichedMessages';
+export * from './useMessageListElements';
+export * from './useMessageListScrollManager';
+export * from './useScrollLocationLogic';

package/dist/components/MessageList/hooks/{useEnrichedMessages.d.ts → MessageList/useEnrichedMessages.d.ts}

@@ -1,7 +1,7 @@
-import { GroupStyle } from '../utils';
+import { GroupStyle } from '../../utils';
 import type { Channel } from 'stream-chat';
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare const useEnrichedMessages: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(args: {
     channel: Channel<StreamChatGenerics>;
     disableDateSeparator: boolean;

package/dist/components/MessageList/hooks/MessageList/useEnrichedMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnrichedMessages.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAgC,MAAM,aAAa,CAAC;AAKvF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,eAAO,MAAM,mBAAmB;;0BAIR,OAAO;yBACR,OAAO;6BACH,OAAO;;mBAEjB,OAAO;mLAKL,OAAO,KACnB,UAAU;;;;;CAsDhB,CAAC"}

package/dist/components/MessageList/hooks/{useEnrichedMessages.js → MessageList/useEnrichedMessages.js}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import { getGroupStyles, insertIntro, processMessages } from '../utils';
-import { useChatContext } from '../../../context/ChatContext';
-import { useComponentContext } from '../../../context/ComponentContext';
+import { getGroupStyles, insertIntro, processMessages } from '../../utils';
+import { useChatContext } from '../../../../context/ChatContext';
+import { useComponentContext } from '../../../../context/ComponentContext';
 export var useEnrichedMessages = function (args) {
     var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser;
     var client = useChatContext('useEnrichedMessages').client;

package/dist/components/MessageList/hooks/{useMessageListElements.d.ts → MessageList/useMessageListElements.d.ts}

@@ -1,9 +1,9 @@
 import React from 'react';
-import { GroupStyle } from '../utils';
+import { GroupStyle } from '../../utils';
 import type { UserResponse } from 'stream-chat';
-import type { MessageProps } from '../../Message/types';
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageProps } from '../../../Message/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 declare type MessagePropsToOmit = 'channel' | 'groupStyles' | 'initialMessage' | 'lastReceivedId' | 'message' | 'readBy' | 'threadList';
 declare type UseMessageListElementsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     enrichedMessages: StreamMessage<StreamChatGenerics>[];

package/dist/components/MessageList/hooks/MessageList/useMessageListElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,aAAa,CAAC;AAW1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,aAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,CAAC;AAEjB,aAAK,2BAA2B,CAC9B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACtD,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACjF,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAA;KAAE,CAAC,CAAC;CACpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,iKAkGlC,CAAC"}

package/dist/components/MessageList/hooks/{useMessageListElements.js → MessageList/useMessageListElements.js}

@@ -1,15 +1,15 @@
 import { __assign } from "tslib";
 /* eslint-disable no-continue */
 import React, { useMemo } from 'react';
-import { useLastReadData } from './useLastReadData';
-import { getLastReceived } from '../utils';
-import { CUSTOM_MESSAGE_TYPE } from '../../../constants/messageTypes';
-import { DateSeparator as DefaultDateSeparator } from '../../DateSeparator/DateSeparator';
-import { EventComponent } from '../../EventComponent/EventComponent';
-import { Message } from '../../Message';
-import { useChatContext } from '../../../context/ChatContext';
-import { useComponentContext } from '../../../context/ComponentContext';
-import { isDate } from '../../../context/TranslationContext';
+import { useLastReadData } from '../useLastReadData';
+import { getLastReceived } from '../../utils';
+import { CUSTOM_MESSAGE_TYPE } from '../../../../constants/messageTypes';
+import { DateSeparator as DefaultDateSeparator } from '../../../DateSeparator/DateSeparator';
+import { EventComponent } from '../../../EventComponent/EventComponent';
+import { Message } from '../../../Message';
+import { useChatContext } from '../../../../context/ChatContext';
+import { useComponentContext } from '../../../../context/ComponentContext';
+import { isDate } from '../../../../context/TranslationContext';
 export var useMessageListElements = function (props) {
     var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
     var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;

package/dist/components/MessageList/hooks/{useMessageListScrollManager.d.ts → MessageList/useMessageListScrollManager.d.ts}

@@ -1,5 +1,5 @@
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare type ContainerMeasures = {
     offsetHeight: number;
     scrollHeight: number;

package/dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageListScrollManager.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,CAC3C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;IACjD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAGF,wBAAgB,2BAA2B,CACzC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,MAAM,EAAE,iCAAiC,CAAC,kBAAkB,CAAC,oBAmErC,MAAM,UAG/B"}

package/dist/components/MessageList/hooks/{useMessageListScrollManager.js → MessageList/useMessageListScrollManager.js}

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from 'react';
-import { useChatContext } from '../../../context/ChatContext';
+import { useChatContext } from '../../../../context/ChatContext';
 // FIXME: change this generic name to something like useAdjustScrollPositionToListSize
 export function useMessageListScrollManager(params) {
     var loadMoreScrollThreshold = params.loadMoreScrollThreshold, onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;

package/dist/components/MessageList/hooks/{useScrollLocationLogic.d.ts → MessageList/useScrollLocationLogic.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare type UseScrollLocationLogicParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     hasMoreNewer: boolean;
     listElement: HTMLDivElement | null;

package/dist/components/MessageList/hooks/MessageList/useScrollLocationLogic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLocationLogic.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,oBAAY,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;sBA0DvB,aAAa,CAAC,cAAc,CAAC;;;CAgCxC,CAAC"}

package/dist/components/MessageList/hooks/VirtualizedMessageList/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useGiphyPreview';
+export * from './useMessageSetKey';
+export * from './useNewMessageNotification';
+export * from './usePrependMessagesCount';
+export * from './useScrollToBottomOnNewMessage';
+export * from './useShouldForceScrollToBottom';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC"}

package/dist/components/MessageList/hooks/VirtualizedMessageList/index.js

@@ -0,0 +1,6 @@
+export * from './useGiphyPreview';
+export * from './useMessageSetKey';
+export * from './useNewMessageNotification';
+export * from './usePrependMessagesCount';
+export * from './useScrollToBottomOnNewMessage';
+export * from './useShouldForceScrollToBottom';

package/dist/components/MessageList/hooks/{useGiphyPreview.d.ts → VirtualizedMessageList/useGiphyPreview.d.ts}

@@ -1,5 +1,5 @@
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare const useGiphyPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(separateGiphyPreview: boolean) => {
     giphyPreviewMessage: StreamMessage<StreamChatGenerics> | undefined;
     setGiphyPreviewMessage: import("react").Dispatch<import("react").SetStateAction<StreamMessage<StreamChatGenerics> | undefined>>;

package/dist/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGiphyPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,eAAO,MAAM,eAAe,2GAGJ,OAAO;;;CAsB9B,CAAC"}

package/dist/components/MessageList/hooks/{useGiphyPreview.js → VirtualizedMessageList/useGiphyPreview.js}

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useChatContext } from '../../../context/ChatContext';
+import { useChatContext } from '../../../../context/ChatContext';
 export var useGiphyPreview = function (separateGiphyPreview) {
     var _a = useState(), giphyPreviewMessage = _a[0], setGiphyPreviewMessage = _a[1];
     var client = useChatContext('useGiphyPreview').client;

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.d.ts

@@ -0,0 +1,10 @@
+import { StreamMessage } from '../../../../context';
+import { DefaultStreamChatGenerics } from '../../../../types/types';
+declare type UseMessageSetKeyParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    messages?: StreamMessage<StreamChatGenerics>[];
+};
+export declare const useMessageSetKey: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ messages, }: UseMessageSetKeyParams<StreamChatGenerics>) => {
+    messageSetKey: number;
+};
+export {};
+//# sourceMappingURL=useMessageSetKey.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageSetKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,aAAK,sBAAsB,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,gBAAgB;;CAsB5B,CAAC"}

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+export var useMessageSetKey = function (_a) {
+    var messages = _a.messages;
+    /**
+     * Logic to update the key of the virtuoso component when the list jumps to a new location.
+     */
+    var _b = useState(+new Date()), messageSetKey = _b[0], setMessageSetKey = _b[1];
+    var firstMessageId = useRef();
+    useEffect(function () {
+        var _a;
+        var continuousSet = messages === null || messages === void 0 ? void 0 : messages.find(function (message) { return message.id === firstMessageId.current; });
+        if (!continuousSet) {
+            setMessageSetKey(+new Date());
+        }
+        firstMessageId.current = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
+    }, [messages]);
+    return {
+        messageSetKey: messageSetKey,
+    };
+};

package/dist/components/MessageList/hooks/{useNewMessageNotification.d.ts → VirtualizedMessageList/useNewMessageNotification.d.ts}

@@ -1,5 +1,5 @@
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
     atBottom: import("react").MutableRefObject<boolean>;
     isMessageListScrolledToBottom: boolean;

package/dist/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNewMessageNotification.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAEhF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAC7C,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,YAAY,CAAC,EAAE,OAAO;;;;;;EA6CvB"}

package/dist/components/MessageList/hooks/{usePrependMessagesCount.d.ts → VirtualizedMessageList/usePrependMessagesCount.d.ts}

@@ -1,4 +1,4 @@
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare function usePrependedMessagesCount<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], hasDateSeparator: boolean): number;
 //# sourceMappingURL=usePrependMessagesCount.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIzE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,UA2DzE"}