stream-chat-react 8.0.0 → 8.1.0

package/dist/components/MessageInput/hooks/useMessageInputText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';

package/dist/components/MessageInput/hooks/useMessageInputText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageInputText.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useMessageInputText.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,mBAAmB;;+BAyBb,MAAM;;CAsExB,CAAC"}
+{"version":3,"file":"useMessageInputText.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useMessageInputText.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,mBAAmB;;+BAyBb,MAAM;;CAsExB,CAAC"}

package/dist/components/MessageInput/hooks/useSubmitHandler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Message } from 'stream-chat';
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';

package/dist/components/MessageInput/hooks/useSubmitHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSubmitHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useSubmitHandler.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAc,OAAO,EAAkB,MAAM,aAAa,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAQrF,eAAO,MAAM,gBAAgB,iUAOV,MAAM;0BA4Dd,MAAM,kBAAkB;CAqGlC,CAAC"}
+{"version":3,"file":"useSubmitHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useSubmitHandler.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,OAAO,EAAkB,MAAM,aAAa,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAQrF,eAAO,MAAM,gBAAgB,iUAOV,MAAM;0BA4Dd,MAAM,kBAAkB;CAqGlC,CAAC"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type GiphyPreviewMessageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

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

@@ -1 +1 @@
-{"version":3,"file":"GiphyPreviewMessage.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/GiphyPreviewMessage.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAY/B,CAAC"}
+{"version":3,"file":"GiphyPreviewMessage.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/GiphyPreviewMessage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAY/B,CAAC"}

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

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 import { ChannelActionContextValue } from '../../context/ChannelActionContext';
-import { InfiniteScrollProps } from '../InfiniteScrollPaginator';
+import { InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
 import type { GroupStyle } from './utils';
 import type { MessageProps } from '../Message/types';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 declare type PropsDrilledToMessage = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'disableQuotedMessages' | 'formatDate' | 'getDeleteMessageErrorNotification' | 'getFlagMessageErrorNotification' | 'getFlagMessageSuccessNotification' | 'getMuteUserErrorNotification' | 'getMuteUserSuccessNotification' | 'getPinMessageErrorNotification' | 'Message' | 'messageActions' | 'onlySenderCanEdit' | 'onMentionsClick' | 'onMentionsHover' | 'onUserClick' | 'onUserHover' | 'openThread' | 'pinPermissions' | 'renderText' | 'retrySendMessage' | 'unsafeHTML';
 export declare type MessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
-    /** Disables the injection of date separator components, defaults to `false` */
+    /** Disables the injection of date separator components in MessageList, defaults to `false` */
     disableDateSeparator?: boolean;
     /** Callback function to set group styles for each message */
     groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
@@ -21,10 +20,16 @@ export declare type MessageListProps<StreamChatGenerics extends DefaultStreamCha
     hideNewMessageSeparator?: boolean;
     /** Overrides the default props passed to [InfiniteScroll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx) */
     internalInfiniteScrollProps?: InfiniteScrollProps;
+    /** Function called when latest messages should be loaded, after the list has jumped at an earlier message set */
+    jumpToLatestMessage?: () => Promise<void>;
     /** Whether or not the list is currently loading more items */
     loadingMore?: boolean;
+    /** Whether or not the list is currently loading newer items */
+    loadingMoreNewer?: boolean;
     /** Function called when more messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
+    /** Function called when newer messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
+    loadMoreNewer?: ChannelActionContextValue['loadMoreNewer'] | (() => Promise<void>);
     /** The limit to use when paginating messages */
     messageLimit?: number;
     /** The messages to render in the list, defaults to messages stored in [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageList.tsx"],"names":[],"mappings":";AAWA,OAAO,EACL,yBAAyB,EAE1B,MAAM,oCAAoC,CAAC;AAQ5C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKjF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA2JnE,aAAK,qBAAqB,GACtB,6BAA6B,GAC7B,8BAA8B,GAC9B,sBAAsB,GACtB,uBAAuB,GACvB,YAAY,GACZ,mCAAmC,GACnC,iCAAiC,GACjC,mCAAmC,GACnC,8BAA8B,GAC9B,gCAAgC,GAChC,gCAAgC,GAChC,SAAS,GACT,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,YAAY,GACZ,kBAAkB,GAClB,YAAY,CAAC;AAEjB,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,CAAC,GAAG;IAC3E,+EAA+E;IAC/E,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,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qIAAqI;IACrI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mLAAmL;IACnL,2BAA2B,CAAC,EAAE,mBAAmB,CAAC;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4LAA4L;IAC5L,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yKAAyK;IACzK,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qHAAqH;IACrH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,gJAqBvB,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageList.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,yBAAyB,EAE1B,MAAM,oCAAoC,CAAC;AAQ5C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAKhG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAsLnE,aAAK,qBAAqB,GACtB,6BAA6B,GAC7B,8BAA8B,GAC9B,sBAAsB,GACtB,uBAAuB,GACvB,YAAY,GACZ,mCAAmC,GACnC,iCAAiC,GACjC,mCAAmC,GACnC,8BAA8B,GAC9B,gCAAgC,GAChC,gCAAgC,GAChC,SAAS,GACT,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,YAAY,GACZ,kBAAkB,GAClB,YAAY,CAAC;AAEjB,oBAAY,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,CAAC,GAAG;IAC3E,8FAA8F;IAC9F,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,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qIAAqI;IACrI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mLAAmL;IACnL,2BAA2B,CAAC,EAAE,mBAAmB,CAAC;IAClD,iHAAiH;IACjH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,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,6LAA6L;IAC7L,aAAa,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACnF,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yKAAyK;IACzK,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC/C,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qHAAqH;IACrH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,gJA2BvB,CAAC"}

package/dist/components/MessageList/MessageList.js

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,7 +57,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { useCallLoadMore } from './hooks/useCallLoadMore';
 import { useEnrichedMessages } from './hooks/useEnrichedMessages';
 import { useMessageListElements } from './hooks/useMessageListElements';
 import { useScrollLocationLogic } from './hooks/useScrollLocationLogic';
@@ -33,26 +68,23 @@ import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-import { InfiniteScroll } from '../InfiniteScrollPaginator';
+import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
-var useInternalInfiniteScrollProps = function (props) {
-    var _a = useComponentContext('useInternalInfiniteScrollProps').LoadingIndicator, LoadingIndicator = _a === void 0 ? DefaultLoadingIndicator : _a;
-    return __assign({ hasMore: props.hasMore, isLoading: props.loadingMore, loader: (React.createElement(Center, { key: 'loadingindicator' },
-            React.createElement(LoadingIndicator, { size: 20 }))), loadMore: useCallLoadMore(props.loadMore, props.messageLimit || 100) }, props.internalInfiniteScrollProps);
-};
 var MessageListWithContext = function (props) {
     var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read;
+    returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.messageLimit, messageLimit = _l === void 0 ? 100 : _l, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _m = props.hasMoreNewer, hasMoreNewer = _m === void 0 ? false : _m, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _o = props.jumpToLatestMessage, jumpToLatestMessage = _o === void 0 ? function () { return Promise.resolve(); } : _o;
     var customClasses = useChatContext('MessageList').customClasses;
-    var _l = useComponentContext('MessageList'), _m = _l.EmptyStateIndicator, EmptyStateIndicator = _m === void 0 ? DefaultEmptyStateIndicator : _m, _o = _l.MessageListNotifications, MessageListNotifications = _o === void 0 ? DefaultMessageListNotifications : _o, _p = _l.MessageNotification, MessageNotification = _p === void 0 ? DefaultMessageNotification : _p, _q = _l.TypingIndicator, TypingIndicator = _q === void 0 ? DefaultTypingIndicator : _q;
-    var _r = useScrollLocationLogic({
+    var _p = useComponentContext('MessageList'), _q = _p.EmptyStateIndicator, EmptyStateIndicator = _q === void 0 ? DefaultEmptyStateIndicator : _q, _r = _p.MessageListNotifications, MessageListNotifications = _r === void 0 ? DefaultMessageListNotifications : _r, _s = _p.MessageNotification, MessageNotification = _s === void 0 ? DefaultMessageNotification : _s, _t = _p.TypingIndicator, TypingIndicator = _t === void 0 ? DefaultTypingIndicator : _t;
+    var _u = useScrollLocationLogic({
+        hasMoreNewer: hasMoreNewer,
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
-    }), hasNewMessages = _r.hasNewMessages, listRef = _r.listRef, onMessageLoadCaptured = _r.onMessageLoadCaptured, onScroll = _r.onScroll, scrollToBottom = _r.scrollToBottom, wrapperRect = _r.wrapperRect;
-    var _s = useEnrichedMessages({
+        suppressAutoscroll: suppressAutoscroll,
+    }), hasNewMessages = _u.hasNewMessages, listRef = _u.listRef, onMessageLoadCaptured = _u.onMessageLoadCaptured, onScroll = _u.onScroll, scrollToBottom = _u.scrollToBottom, wrapperRect = _u.wrapperRect;
+    var _v = useEnrichedMessages({
         channel: channel,
         disableDateSeparator: disableDateSeparator,
         groupStyles: groupStyles,
@@ -61,8 +93,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-        threadList: threadList,
-    }), messageGroupStyles = _s.messageGroupStyles, enrichedMessages = _s.messages;
+    }), messageGroupStyles = _v.messageGroupStyles, enrichedMessages = _v.messages;
     var elements = useMessageListElements({
         enrichedMessages: enrichedMessages,
         internalMessageProps: {
@@ -97,15 +128,50 @@ var MessageListWithContext = function (props) {
         returnAllReadData: returnAllReadData,
         threadList: threadList,
     });
-    var finalInternalInfiniteScrollProps = useInternalInfiniteScrollProps(props);
+    var _w = useComponentContext('useInternalInfiniteScrollProps').LoadingIndicator, LoadingIndicator = _w === void 0 ? DefaultLoadingIndicator : _w;
     var messageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.messageList) || 'str-chat__list';
     var threadListClass = threadList ? (customClasses === null || customClasses === void 0 ? void 0 : customClasses.threadList) || 'str-chat__list--thread' : '';
+    var loadMore = React.useCallback(function () {
+        if (loadMoreCallback) {
+            loadMoreCallback(messageLimit);
+        }
+    }, [loadMoreCallback, messageLimit]);
+    var loadMoreNewer = React.useCallback(function () {
+        if (loadMoreNewerCallback) {
+            loadMoreNewerCallback(messageLimit);
+        }
+    }, [loadMoreNewerCallback, messageLimit]);
+    var scrollToBottomFromNotification = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!hasMoreNewer) return [3 /*break*/, 2];
+                    return [4 /*yield*/, jumpToLatestMessage()];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    scrollToBottom();
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [scrollToBottom, hasMoreNewer]);
+    var ulRef = React.useRef(null);
+    React.useLayoutEffect(function () {
+        var _a;
+        if (highlightedMessageId) {
+            var element = (_a = ulRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-message-id='" + highlightedMessageId + "']");
+            element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
+        }
+    }, [highlightedMessageId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: listRef }, !elements.length ? (React.createElement(EmptyStateIndicator, { listType: 'message' })) : (React.createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', isReverse: true, useWindow: false }, finalInternalInfiniteScrollProps),
-            React.createElement("ul", { className: 'str-chat__ul' }, elements),
+        React.createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: listRef }, !elements.length ? (React.createElement(EmptyStateIndicator, { listType: 'message' })) : (React.createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, isLoading: props.loadingMore, loader: React.createElement(Center, { key: 'loadingindicator' },
+                React.createElement(LoadingIndicator, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
+            React.createElement("ul", { className: 'str-chat__ul', ref: ulRef }, elements),
             React.createElement(TypingIndicator, { threadList: threadList }),
             React.createElement("div", { key: 'bottom' })))),
-        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom })));
+        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification })));
 };
 /**
  * The MessageList component renders a list of Messages.
@@ -116,10 +182,10 @@ var MessageListWithContext = function (props) {
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
 export var MessageList = function (props) {
-    var loadMore = useChannelActionContext('MessageList').loadMore;
-    var _a = useChannelStateContext('MessageList'), membersPropToNotPass = _a.members, // eslint-disable-line @typescript-eslint/no-unused-vars
-    mutesPropToNotPass = _a.mutes, // eslint-disable-line @typescript-eslint/no-unused-vars
-    watchersPropToNotPass = _a.watchers, // eslint-disable-line @typescript-eslint/no-unused-vars
-    restChannelStateContext = __rest(_a, ["members", "mutes", "watchers"]);
-    return (React.createElement(MessageListWithContext, __assign({ loadMore: loadMore }, restChannelStateContext, props)));
+    var _a = useChannelActionContext('MessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
+    var _b = useChannelStateContext('MessageList'), membersPropToNotPass = _b.members, // eslint-disable-line @typescript-eslint/no-unused-vars
+    mutesPropToNotPass = _b.mutes, // eslint-disable-line @typescript-eslint/no-unused-vars
+    watchersPropToNotPass = _b.watchers, // eslint-disable-line @typescript-eslint/no-unused-vars
+    restChannelStateContext = __rest(_b, ["members", "mutes", "watchers"]);
+    return (React.createElement(MessageListWithContext, __assign({ jumpToLatestMessage: jumpToLatestMessage, loadMore: loadMore, loadMoreNewer: loadMoreNewer }, restChannelStateContext, props)));
 };

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

@@ -3,6 +3,7 @@ import type { MessageNotificationProps } from './MessageNotification';
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
 export declare type MessageListNotificationsProps = {
     hasNewMessages: boolean;
+    isNotAtLatestMessageSet: boolean;
     MessageNotification: React.ComponentType<MessageNotificationProps>;
     notifications: ChannelNotifications;
     scrollToBottom: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageListNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,oBAAY,6BAA6B,GAAG;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACnE,aAAa,EAAE,oBAAoB,CAAC;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,gBAkB5E,CAAC"}
+{"version":3,"file":"MessageListNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,oBAAY,6BAA6B,GAAG;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACnE,aAAa,EAAE,oBAAoB,CAAC;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,gBA2B5E,CAAC"}

package/dist/components/MessageList/MessageListNotifications.js

@@ -3,10 +3,10 @@ import { ConnectionStatus } from './ConnectionStatus';
 import { CustomNotification } from './CustomNotification';
 import { useTranslationContext } from '../../context/TranslationContext';
 export var MessageListNotifications = function (props) {
-    var hasNewMessages = props.hasNewMessages, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom;
+    var hasNewMessages = props.hasNewMessages, isNotAtLatestMessageSet = props.isNotAtLatestMessageSet, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom;
     var t = useTranslationContext('MessageListNotifications').t;
     return (React.createElement("div", { className: 'str-chat__list-notifications' },
         notifications.map(function (notification) { return (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)); }),
         React.createElement(ConnectionStatus, null),
-        React.createElement(MessageNotification, { onClick: scrollToBottom, showNotification: hasNewMessages }, t('New Messages!'))));
+        React.createElement(MessageNotification, { onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
 };

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

@@ -13,18 +13,26 @@ export declare type VirtualizedMessageListProps<StreamChatGenerics extends Defau
     customMessageRenderer?: (messageList: StreamMessage<StreamChatGenerics>[], index: number) => React.ReactElement;
     /** If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance */
     defaultItemHeight?: number;
-    /** Disables the injection of date separator components, defaults to `true` */
+    /** Disables the injection of date separator components in MessageList, defaults to `true` */
     disableDateSeparator?: boolean;
     /** Whether or not the list has more items to load */
     hasMore?: boolean;
+    /** Whether or not the list has newer items to load */
+    hasMoreNewer?: boolean;
     /** Hides the `MessageDeleted` components from the list, defaults to `false` */
     hideDeletedMessages?: boolean;
     /** Hides the `DateSeparator` component when new messages are received in a channel that's watched but not active, defaults to false */
     hideNewMessageSeparator?: boolean;
+    /** The id of the message to highlight and center */
+    highlightedMessageId?: string;
     /** Whether or not the list is currently loading more items */
     loadingMore?: boolean;
+    /** Whether or not the list is currently loading newer items */
+    loadingMoreNewer?: boolean;
     /** Function called when more messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
+    /** Function called when new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
+    loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
     /** Custom UI component to display a message, defaults to and accepts same props as [FixedHeightMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/FixedHeightMessage.tsx) */
     Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
     /** The limit to use when paginating messages */
@@ -56,6 +64,8 @@ export declare type VirtualizedMessageListProps<StreamChatGenerics extends Defau
     shouldGroupByUser?: boolean;
     /** The scrollTo behavior when new messages appear. Use `"smooth"` for regular chat channels, and `"auto"` (which results in instant scroll to bottom) if you expect high throughput. */
     stickToBottomScrollBehavior?: 'smooth' | 'auto';
+    /** stops the list from autoscrolling when new messages are loaded */
+    suppressAutoscroll?: boolean;
     /** If true, indicates the message list is a thread  */
     threadList?: boolean;
 };

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":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,uBAAuB,EACvB,0BAA0B,EAG1B,aAAa,EACd,MAAM,gBAAgB,CAAC;AAexB,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;AAO3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA6ThF,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,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+EAA+E;IAC/E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uIAAuI;IACvI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4LAA4L;IAC5L,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,qNAAqN;IACrN,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,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,KAAK,EAAE,2BAA2B,CAAC,kBAAkB,CAAC,eAuBvD"}
+{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAEL,uBAAuB,EACvB,0BAA0B,EAG1B,aAAa,EACd,MAAM,gBAAgB,CAAC;AAexB,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;AAO3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsYhF,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,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+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,qNAAqN;IACrN,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;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,KAAK,EAAE,2BAA2B,CAAC,kBAAkB,CAAC,eAqCvD"}

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -9,7 +9,43 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, } from 'react-virtuoso';
 import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
 import { useGiphyPreview } from './hooks/useGiphyPreview';
@@ -47,10 +83,24 @@ function useCaptureResizeObserverExceededError() {
 function fractionalItemSize(element) {
     return element.getBoundingClientRect().height;
 }
+function findMessageIndex(messages, id) {
+    return messages.findIndex(function (message) { return message.id === id; });
+}
+function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
+    if (highlightedMessageId) {
+        var index = findMessageIndex(messages, highlightedMessageId);
+        if (index !== -1) {
+            return { align: 'center', index: index };
+        }
+    }
+    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, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, notifications = props.notifications, _e = props.overscan, overscan = _e === void 0 ? 0 : _e, 
+    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, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, _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, 
+    // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
+    _e = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    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;
+    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;
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
@@ -70,12 +120,11 @@ var VirtualizedMessageListWithContext = function (props) {
             return messages;
         }
         return processMessages({
-            disableDateSeparator: disableDateSeparator,
+            enableDateSeparator: !disableDateSeparator,
             hideDeletedMessages: hideDeletedMessages,
             hideNewMessageSeparator: hideNewMessageSeparator,
             lastRead: lastRead,
             messages: messages,
-            separateGiphyPreview: separateGiphyPreview,
             setGiphyPreviewMessage: setGiphyPreviewMessage,
             userId: client.userID || '',
         });
@@ -89,13 +138,32 @@ var VirtualizedMessageListWithContext = function (props) {
         client.userID,
     ]);
     var virtuoso = useRef(null);
-    var _x = useNewMessageNotification(processedMessages, client.userID), atBottom = _x.atBottom, newMessagesNotification = _x.newMessagesNotification, setNewMessagesNotification = _x.setNewMessagesNotification;
-    var scrollToBottom = useCallback(function () {
-        if (virtuoso.current) {
-            virtuoso.current.scrollToIndex(processedMessages.length - 1);
-        }
-        setNewMessagesNotification(false);
-    }, [virtuoso, processedMessages, setNewMessagesNotification, processedMessages.length]);
+    var _x = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _x.atBottom, newMessagesNotification = _x.newMessagesNotification, setNewMessagesNotification = _x.setNewMessagesNotification;
+    var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!hasMoreNewer) return [3 /*break*/, 2];
+                    return [4 /*yield*/, jumpToLatestMessage()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+                case 2:
+                    if (virtuoso.current) {
+                        virtuoso.current.scrollToIndex(processedMessages.length - 1);
+                    }
+                    setNewMessagesNotification(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [
+        virtuoso,
+        processedMessages,
+        setNewMessagesNotification,
+        processedMessages.length,
+        hasMoreNewer,
+        jumpToLatestMessage,
+    ]);
     var _y = React.useState(false), newMessagesReceivedInBackground = _y[0], setNewMessagesReceivedInBackground = _y[1];
     var resetNewMessagesReceivedInBackground = useCallback(function () {
         setNewMessagesReceivedInBackground(false);
@@ -121,8 +189,24 @@ var VirtualizedMessageListWithContext = function (props) {
         };
     }, [scrollToBottomIfConfigured]);
     var numItemsPrepended = usePrependedMessagesCount(processedMessages);
+    /**
+     * Logic to update the key of the virtuoso component when the list jumps to a new location.
+     */
+    var _z = useState(+new Date()), messageSetKey = _z[0], setMessageSetKey = _z[1];
+    var firstMessageId = useRef();
+    useEffect(function () {
+        var _a;
+        var continuousSet = messages && 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 shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
     var followOutput = function (isAtBottom) {
+        if (hasMoreNewer || suppressAutoscroll) {
+            return false;
+        }
         if (shouldForceScrollToBottom()) {
             return isAtBottom ? stickToBottomScrollBehavior : 'auto';
         }
@@ -182,13 +266,26 @@ var VirtualizedMessageListWithContext = function (props) {
             loadMore(messageLimit);
         }
     };
+    var endReached = function () {
+        if (hasMoreNewer && loadMoreNewer) {
+            loadMoreNewer(messageLimit);
+        }
+    };
+    useEffect(function () {
+        var _a;
+        if (highlightedMessageId) {
+            var index = findMessageIndex(processedMessages, highlightedMessageId);
+            if (index !== -1) {
+                (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index });
+            }
+        }
+    }, [highlightedMessageId]);
     if (!processedMessages)
         return null;
-    var virtualizedMessageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list';
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: virtualizedMessageListClass },
-            React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: processedMessages.length ? processedMessages.length - 1 : 0, itemContent: function (i) { return messageRenderer(processedMessages, i); }, itemSize: fractionalItemSize, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))),
-        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom }),
+        React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
+            React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, 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 } : {})))),
+        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
 };
 /**
@@ -198,8 +295,8 @@ var VirtualizedMessageListWithContext = function (props) {
  * **Note**: It works well when there are thousands of messages in a channel, it has a shortcoming though - the message UI should have a fixed height.
  */
 export function VirtualizedMessageList(props) {
-    var loadMore = useChannelActionContext('VirtualizedMessageList').loadMore;
-    var _a = useChannelStateContext('VirtualizedMessageList'), channel = _a.channel, hasMore = _a.hasMore, loadingMore = _a.loadingMore, contextMessages = _a.messages, notifications = _a.notifications;
+    var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
+    var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, suppressAutoscroll = _b.suppressAutoscroll;
     var messages = props.messages || contextMessages;
-    return (React.createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, loadingMore: !!loadingMore, loadMore: loadMore, messages: messages, notifications: notifications }, props)));
+    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)));
 }

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

@@ -1,4 +1,3 @@
-export * from './useCallLoadMore';
 export * from './useEnrichedMessages';
 export * from './useLastReadData';
 export * from './useMessageListElements';

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

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

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

@@ -1,4 +1,3 @@
-export * from './useCallLoadMore';
 export * from './useEnrichedMessages';
 export * from './useLastReadData';
 export * from './useMessageListElements';

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

@@ -9,7 +9,6 @@ export declare const useEnrichedMessages: <StreamChatGenerics extends DefaultStr
     hideNewMessageSeparator: boolean;
     messages: StreamMessage<StreamChatGenerics>[];
     noGroupByUser: boolean;
-    threadList: boolean;
     groupStyles?: ((message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle) | undefined;
     headerPosition?: number | undefined;
 }) => {

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

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

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

@@ -3,19 +3,19 @@ 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, threadList = args.threadList;
+    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;
     var HeaderComponent = useComponentContext('useEnrichedMessages').HeaderComponent;
     var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
-    var messagesWithDates = disableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator
+    var enableDateSeparator = !disableDateSeparator;
+    var messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator
         ? messages
         : processMessages({
-            disableDateSeparator: disableDateSeparator,
+            enableDateSeparator: enableDateSeparator,
             hideDeletedMessages: hideDeletedMessages,
             hideNewMessageSeparator: hideNewMessageSeparator,
             lastRead: lastRead,
             messages: messages,
-            threadList: threadList,
             userId: client.userID || '',
         });
     if (HeaderComponent) {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare const useGiphyPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(separateGiphyPreview: boolean) => {