stream-chat-react 11.9.0 → 11.11.0

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -16,6 +16,7 @@ import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
+import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -47,11 +48,11 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 }
 var VirtualizedMessageListWithContext = function (props) {
     var _a, _b;
-    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? 100 : _g, messages = props.messages, notifications = props.notifications, 
+    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, 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.
@@ -179,8 +180,9 @@ var VirtualizedMessageListWithContext = function (props) {
         }
     };
     var atTopStateChange = function (isAtTop) {
-        if (isAtTop)
+        if (isAtTop) {
             loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
+        }
     };
     useEffect(function () {
         var scrollTimeout;
@@ -223,6 +225,8 @@ var VirtualizedMessageListWithContext = function (props) {
                         ownMessagesReadByOthers: ownMessagesReadByOthers,
                         processedMessages: processedMessages,
                         shouldGroupByUser: shouldGroupByUser,
+                        sortReactionDetails: sortReactionDetails,
+                        sortReactions: sortReactions,
                         threadList: threadList,
                         unreadMessageCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
                         UnreadMessagesSeparator: UnreadMessagesSeparator,

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageListComponents.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAMrD,OAAO,EAAU,aAAa,EAAuB,MAAM,eAAe,CAAC;AAI3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhF,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAElF;AAED,wBAAgB,uBAAuB,CAAC,iBAAiB,EAAE,MAAM,UAEhE;AAED,eAAO,MAAM,wBAAwB,0JAGuC,IAAI,uGAG7D,SAAS,WAAW,CAAC,EAAE,UAUjC,CAAC;AAEV,KAAK,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;;;;;;;0EAyBhB,CAAC;AACF,eAAO,MAAM,MAAM,gLAgBlB,CAAC;AACF,eAAO,MAAM,gBAAgB,yKAe5B,CAAC;AACF,eAAO,MAAM,MAAM,kHAKlB,CAAC;AACF,eAAO,MAAM,eAAe,oGAGX,MAAM,SACd,WAAW,mFA+EnB,CAAC"}
+{"version":3,"file":"VirtualizedMessageListComponents.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAMrD,OAAO,EAAU,aAAa,EAAuB,MAAM,eAAe,CAAC;AAI3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhF,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAElF;AAED,wBAAgB,uBAAuB,CAAC,iBAAiB,EAAE,MAAM,UAEhE;AAED,eAAO,MAAM,wBAAwB,0JAGuC,IAAI,uGAG7D,SAAS,WAAW,CAAC,EAAE,UAUjC,CAAC;AAEV,KAAK,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;;;;;;;0EAyBhB,CAAC;AACF,eAAO,MAAM,MAAM,gLAgBlB,CAAC;AACF,eAAO,MAAM,gBAAgB,yKAe5B,CAAC;AACF,eAAO,MAAM,MAAM,kHAKlB,CAAC;AACF,eAAO,MAAM,eAAe,oGAGX,MAAM,SACd,WAAW,mFAmFnB,CAAC"}

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -62,7 +62,7 @@ export var Footer = function () {
 };
 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, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -85,7 +85,7 @@ export var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var isLastReadMessage = message.id === lastReadMessageId;
     var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || unreadMessageCount > 0); // unread count can be 0 if the user marks unread only own messages
     return (React.createElement(React.Fragment, null,
-        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] || [] }),
+        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] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparator && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

package/dist/components/Reactions/ReactionsList.d.ts

@@ -3,6 +3,7 @@ import type { ReactionResponse } from 'stream-chat';
 import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
+import type { ReactionDetailsComparator, ReactionsComparator } from './types';
 import { MessageContextValue } from '../../context';
 export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions'>> & {
     /** Custom on click handler for an individual reaction, defaults to `onReactionListClick` from the `MessageContext` */
@@ -17,6 +18,10 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
     reactions?: ReactionResponse<StreamChatGenerics>[];
     /** Display the reactions in the list in reverse order, defaults to false */
     reverse?: boolean;
+    /** Comparator function to sort the list of reacted users, defaults to alphabetical order */
+    sortReactionDetails?: ReactionDetailsComparator;
+    /** Comparator function to sort reactions, defaults to alphabetical order */
+    sortReactions?: ReactionsComparator;
 };
 /**
  * Component that displays a list of reactions on a message.

package/dist/components/Reactions/ReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAyB,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IACnF,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA+EF;;GAEG;AACH,eAAO,MAAM,aAAa,+JAAwE,CAAC"}
+{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAyB,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IACnF,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,4EAA4E;IAC5E,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAgFF;;GAEG;AACH,eAAO,MAAM,aAAa,+JAAwE,CAAC"}

package/dist/components/Reactions/ReactionsList.js

@@ -6,7 +6,7 @@ import { ReactionsListModal } from './ReactionsListModal';
 import { useTranslationContext } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 var UnMemoizedReactionsList = function (props) {
-    var handleFetchReactions = props.handleFetchReactions, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["handleFetchReactions", "reverse"]);
+    var handleFetchReactions = props.handleFetchReactions, _a = props.reverse, reverse = _a === void 0 ? false : _a, sortReactionDetails = props.sortReactionDetails, rest = __rest(props, ["handleFetchReactions", "reverse", "sortReactionDetails"]);
     var _b = useProcessReactions(rest), existingReactions = _b.existingReactions, hasReactions = _b.hasReactions, totalReactionCount = _b.totalReactionCount;
     var _c = useState(null), selectedReactionType = _c[0], setSelectedReactionType = _c[1];
     var t = useTranslationContext('ReactionsList').t;
@@ -36,7 +36,7 @@ var UnMemoizedReactionsList = function (props) {
                 }),
                 React.createElement("li", null,
                     React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))),
-        React.createElement(ReactionsListModal, { handleFetchReactions: handleFetchReactions, onClose: function () { return setSelectedReactionType(null); }, onSelectedReactionTypeChange: setSelectedReactionType, open: selectedReactionType !== null, reactions: existingReactions, selectedReactionType: selectedReactionType })));
+        React.createElement(ReactionsListModal, { handleFetchReactions: handleFetchReactions, onClose: function () { return setSelectedReactionType(null); }, onSelectedReactionTypeChange: setSelectedReactionType, open: selectedReactionType !== null, reactions: existingReactions, selectedReactionType: selectedReactionType, sortReactionDetails: sortReactionDetails })));
 };
 /**
  * Component that displays a list of reactions on a message.

package/dist/components/Reactions/ReactionsListModal.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
+import type { ReactionDetailsComparator, ReactionSummary } from './types';
 import { ModalProps } from '../Modal';
-import { ReactionSummary } from './types';
 import { MessageContextValue } from '../../context';
 import { DefaultStreamChatGenerics } from '../../types/types';
 type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions'>> & {
     reactions: ReactionSummary[];
     selectedReactionType: string | null;
     onSelectedReactionTypeChange?: (reactionType: string) => void;
+    sortReactionDetails?: ReactionDetailsComparator;
 };
-export declare function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactions, selectedReactionType, ...modalProps }: ReactionsListModalProps): React.JSX.Element;
+export declare function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ReactionsListModal.d.ts.map

package/dist/components/Reactions/ReactionsListModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsListModal.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsListModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,KAAK,uBAAuB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,UAAU,GACZ,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IAC/E,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEJ,wBAAgB,kBAAkB,CAAC,EACjC,oBAAoB,EACpB,4BAA4B,EAC5B,SAAS,EACT,oBAAoB,EACpB,GAAG,UAAU,EACd,EAAE,uBAAuB,qBAyEzB"}
+{"version":3,"file":"ReactionsListModal.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsListModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EAAE,mBAAmB,EAAqB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,KAAK,uBAAuB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,UAAU,GACZ,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,CAAC,GAAG;IAC/E,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CACjD,CAAC;AAQJ,wBAAgB,kBAAkB,CAAC,EACjC,oBAAoB,EACpB,4BAA4B,EAC5B,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EAAE,uBAAuB,EAC5C,GAAG,UAAU,EACd,EAAE,uBAAuB,qBAgFzB"}

package/dist/components/Reactions/ReactionsListModal.js

@@ -5,24 +5,34 @@ import { Modal } from '../Modal';
 import { useFetchReactions } from './hooks/useFetchReactions';
 import { LoadingIndicator } from '../Loading';
 import { Avatar } from '../Avatar';
+import { useMessageContext } from '../../context';
+var defaultSortReactionDetails = function (a, b) {
+    var _a, _b, _c, _d, _e, _f;
+    var aName = (_b = (_a = a.user) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = a.user) === null || _c === void 0 ? void 0 : _c.id;
+    var bName = (_e = (_d = b.user) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : (_f = b.user) === null || _f === void 0 ? void 0 : _f.id;
+    return aName ? (bName ? aName.localeCompare(bName, 'en') : -1) : 1;
+};
 export function ReactionsListModal(_a) {
-    var _b;
-    var handleFetchReactions = _a.handleFetchReactions, onSelectedReactionTypeChange = _a.onSelectedReactionTypeChange, reactions = _a.reactions, selectedReactionType = _a.selectedReactionType, modalProps = __rest(_a, ["handleFetchReactions", "onSelectedReactionTypeChange", "reactions", "selectedReactionType"]);
+    var _b, _c;
+    var handleFetchReactions = _a.handleFetchReactions, onSelectedReactionTypeChange = _a.onSelectedReactionTypeChange, reactions = _a.reactions, selectedReactionType = _a.selectedReactionType, propSortReactionDetails = _a.sortReactionDetails, modalProps = __rest(_a, ["handleFetchReactions", "onSelectedReactionTypeChange", "reactions", "selectedReactionType", "sortReactionDetails"]);
     var selectedReaction = reactions.find(function (_a) {
         var reactionType = _a.reactionType;
         return reactionType === selectedReactionType;
     });
     var SelectedEmojiComponent = (_b = selectedReaction === null || selectedReaction === void 0 ? void 0 : selectedReaction.EmojiComponent) !== null && _b !== void 0 ? _b : null;
-    var _c = useFetchReactions({
+    var _d = useFetchReactions({
         handleFetchReactions: handleFetchReactions,
         shouldFetch: modalProps.open,
-    }), areReactionsLoading = _c.isLoading, allReactions = _c.reactions;
+    }), areReactionsLoading = _d.isLoading, allReactions = _d.reactions;
+    var contextSortReactionDetails = useMessageContext('ReactionsListModal').sortReactionDetails;
+    var sortReactionDetails = (_c = propSortReactionDetails !== null && propSortReactionDetails !== void 0 ? propSortReactionDetails : contextSortReactionDetails) !== null && _c !== void 0 ? _c : defaultSortReactionDetails;
     var currentReactions = useMemo(function () {
         if (!selectedReactionType) {
             return [];
         }
-        return allReactions.filter(function (reaction) { return reaction.type === selectedReactionType && reaction.user; });
-    }, [allReactions, selectedReactionType]);
+        var unsortedCurrentReactions = allReactions.filter(function (reaction) { return reaction.type === selectedReactionType && reaction.user; });
+        return unsortedCurrentReactions.sort(sortReactionDetails);
+    }, [allReactions, selectedReactionType, sortReactionDetails]);
     return (React.createElement(Modal, __assign({}, modalProps),
         React.createElement("div", { className: 'str-chat__message-reactions-details', "data-testid": 'reactions-list-modal' },
             React.createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(function (_a) {

package/dist/components/Reactions/hooks/useProcessReactions.d.ts

@@ -1,8 +1,11 @@
 import type { ReactionsListProps } from '../ReactionsList';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { ReactionSummary } from '../types';
+import type { ReactionsComparator, ReactionSummary } from '../types';
 type SharedReactionListProps = 'own_reactions' | 'reaction_counts' | 'reactionOptions' | 'reactions';
-type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps>;
+type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps> & {
+    sortReactions?: ReactionsComparator;
+};
+export declare const defaultReactionsSort: ReactionsComparator;
 export declare const useProcessReactions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseProcessReactionsParams) => {
     existingReactions: ReactionSummary[];
     hasReactions: boolean;

package/dist/components/Reactions/hooks/useProcessReactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,KAAK,uBAAuB,GACxB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,KAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAC;AAEnF,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;;CAwFlC,CAAC"}
+{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAErE,KAAK,uBAAuB,GACxB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,KAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,mBACiB,CAAC;AAErD,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;;CAiGlC,CAAC"}

package/dist/components/Reactions/hooks/useProcessReactions.js

@@ -1,10 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import { useComponentContext, useMessageContext } from '../../../context';
+export var defaultReactionsSort = function (a, b) {
+    return a.reactionType.localeCompare(b.reactionType, 'en');
+};
 export var useProcessReactions = function (params) {
-    var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions;
-    var message = useMessageContext('useProcessReactions').message;
+    var _a;
+    var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions, propSortReactions = params.sortReactions;
+    var _b = useMessageContext('useProcessReactions'), message = _b.message, contextSortReactions = _b.sortReactions;
     var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
     var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
+    var sortReactions = (_a = propSortReactions !== null && propSortReactions !== void 0 ? propSortReactions : contextSortReactions) !== null && _a !== void 0 ? _a : defaultReactionsSort;
     var latestReactions = propReactions || message.latest_reactions;
     var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions);
     var reactionCounts = propReactionCounts || message.reaction_counts;
@@ -31,7 +36,7 @@ export var useProcessReactions = function (params) {
         if (!reactionCounts) {
             return [];
         }
-        return Object.entries(reactionCounts).flatMap(function (_a) {
+        var unsortedReactions = Object.entries(reactionCounts).flatMap(function (_a) {
             var reactionType = _a[0], reactionCount = _a[1];
             if (reactionCount === 0 || !isSupportedReaction(reactionType)) {
                 return [];
@@ -46,12 +51,14 @@ export var useProcessReactions = function (params) {
                 },
             ];
         });
+        return unsortedReactions.sort(sortReactions);
     }, [
         getEmojiByReactionType,
         getLatestReactedUserNames,
         isOwnReaction,
         isSupportedReaction,
         reactionCounts,
+        sortReactions,
     ]);
     var hasReactions = existingReactions.length > 0;
     var totalReactionCount = useMemo(function () { return existingReactions.reduce(function (total, _a) {

package/dist/components/Reactions/types.d.ts

@@ -1,4 +1,5 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
+import type { ReactionResponse } from 'stream-chat';
 export interface ReactionSummary {
     EmojiComponent: ComponentType | null;
     isOwnReaction: boolean;
@@ -6,4 +7,6 @@ export interface ReactionSummary {
     reactionCount: number;
     reactionType: string;
 }
+export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
+export type ReactionDetailsComparator = (a: ReactionResponse, b: ReactionResponse) => number;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Reactions/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC;AAErF,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,KAAK,MAAM,CAAC"}

package/dist/constants/limits.d.ts

@@ -1,4 +1,5 @@
 export declare const DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
 export declare const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
 export declare const DEFAULT_THREAD_PAGE_SIZE = 50;
+export declare const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 //# sourceMappingURL=limits.d.ts.map

package/dist/constants/limits.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/constants/limits.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,wBAAwB,KAAK,CAAC"}
+{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/constants/limits.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,kCAAkC,MAAM,CAAC"}

package/dist/constants/limits.js

@@ -1,3 +1,4 @@
 export var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
 export var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
 export var DEFAULT_THREAD_PAGE_SIZE = 50;
+export var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;

package/dist/context/MessageContext.d.ts

@@ -8,6 +8,7 @@ import type { ReactEventHandler } from '../components/Message/types';
 import type { MessageActionsArray } from '../components/Message/utils';
 import type { MessageInputProps } from '../components/MessageInput/MessageInput';
 import type { GroupStyle } from '../components/MessageList/utils';
+import type { ReactionDetailsComparator, ReactionsComparator } from '../components/Reactions/types';
 import type { RenderTextOptions } from '../components/Message/renderText';
 import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
 export type CustomMessageActions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -105,6 +106,10 @@ export type MessageContextValue<StreamChatGenerics extends DefaultStreamChatGene
     readBy?: UserResponse<StreamChatGenerics>[];
     /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) */
     renderText?: (text?: string, mentioned_users?: UserResponse<StreamChatGenerics>[], options?: RenderTextOptions) => JSX.Element | null;
+    /** Comparator function to sort the list of reacted users, defaults to alphabetical order */
+    sortReactionDetails?: ReactionDetailsComparator;
+    /** Comparator function to sort reactions, defaults to alphabetical order */
+    sortReactions?: ReactionsComparator;
     /** Whether or not the Message is in a Thread */
     threadList?: boolean;
     /** render HTML instead of markdown. Posting HTML is only allowed server-side */

package/dist/context/MessageContext.d.ts.map

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

package/dist/index.cjs.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-5e0717c0.js');
+var Window = require('./Window-194c5448.js');
 var React = require('react');
+var streamChat = require('stream-chat');
 var reactVirtuoso = require('react-virtuoso');
 var throttle = require('lodash.throttle');
 require('emoji-regex');
@@ -13,7 +14,6 @@ require('@braintree/sanitize-url');
 require('react-image-gallery');
 require('react-dom');
 require('react-fast-compare');
-require('stream-chat');
 require('lodash.debounce');
 require('dayjs');
 require('dayjs/plugin/calendar');
@@ -521,13 +521,14 @@ var mousewheelListener = function (event) {
     }
 };
 var InfiniteScroll = function (props) {
-    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, hasNextPage = props.hasNextPage, hasPreviousPage = props.hasPreviousPage, head = props.head, _b = props.initialLoad, initialLoad = _b === void 0 ? true : _b, isLoading = props.isLoading, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, loadNextPage = props.loadNextPage, loadPreviousPage = props.loadPreviousPage, _c = props.threshold, threshold = _c === void 0 ? 250 : _c, _d = props.useCapture, useCapture = _d === void 0 ? false : _d, elementProps = Window.__rest(props, ["children", "element", "hasMore", "hasMoreNewer", "hasNextPage", "hasPreviousPage", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "loadNextPage", "loadPreviousPage", "threshold", "useCapture"]);
+    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, hasNextPage = props.hasNextPage, hasPreviousPage = props.hasPreviousPage, head = props.head, _b = props.initialLoad, initialLoad = _b === void 0 ? true : _b, isLoading = props.isLoading, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, loadNextPage = props.loadNextPage, loadPreviousPage = props.loadPreviousPage, _c = props.threshold, threshold = _c === void 0 ? Window.DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _c, _d = props.useCapture, useCapture = _d === void 0 ? false : _d, elementProps = Window.__rest(props, ["children", "element", "hasMore", "hasMoreNewer", "hasNextPage", "hasPreviousPage", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "loadNextPage", "loadPreviousPage", "threshold", "useCapture"]);
     var loadNextPageFn = loadNextPage || loadMoreNewer;
     var loadPreviousPageFn = loadPreviousPage || loadMore;
     var hasNextPageFlag = hasNextPage || hasMoreNewer;
     var hasPreviousPageFlag = hasPreviousPage || hasMore;
     var scrollComponent = React.useRef();
-    var scrollListener = React.useCallback(function () {
+    var scrollListenerRef = React.useRef();
+    scrollListenerRef.current = function () {
         var element = scrollComponent.current;
         if (!element || element.offsetParent === null) {
             return;
@@ -550,15 +551,7 @@ var InfiniteScroll = function (props) {
         if (offset < Number(threshold) && typeof loadNextPageFn === 'function' && hasNextPageFlag) {
             loadNextPageFn();
         }
-    }, [
-        hasPreviousPageFlag,
-        hasNextPageFlag,
-        isLoading,
-        listenToScroll,
-        loadPreviousPageFn,
-        loadNextPageFn,
-        threshold,
-    ]);
+    };
     React.useEffect(function () {
         Window.deprecationAndReplacementWarning([
             [{ hasMoreNewer: hasMoreNewer }, { hasNextPage: hasNextPage }],
@@ -573,13 +566,15 @@ var InfiniteScroll = function (props) {
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
         if (!scrollElement)
             return;
+        var scrollListener = function () { var _a; return (_a = scrollListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(scrollListenerRef); };
         scrollElement.addEventListener('scroll', scrollListener, useCapture);
         scrollElement.addEventListener('resize', scrollListener, useCapture);
+        scrollListener();
         return function () {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
         };
-    }, [initialLoad, scrollListener, useCapture]);
+    }, [initialLoad, useCapture]);
     React.useEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -635,22 +630,21 @@ function defaultRenderMessages(_a) {
 
 var MessageListWithContext = function (props) {
     var _a;
-    var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _e = props.messageActions, messageActions = _e === void 0 ? Object.keys(Window.MESSAGE_ACTIONS) : _e, _f = props.messages, messages = _f === void 0 ? [] : _f, notifications = props.notifications, _g = props.noGroupByUser, noGroupByUser = _g === void 0 ? false : _g, _h = props.pinPermissions, pinPermissions = _h === void 0 ? Window.defaultPinPermissions : _h, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    _j = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = _j === void 0 ? false : _j, _k = props.threadList, threadList = _k === void 0 ? false : _k, _l = props.unsafeHTML, unsafeHTML = _l === void 0 ? false : _l, headerPosition = props.headerPosition, read = props.read, _m = props.renderMessages, renderMessages = _m === void 0 ? defaultRenderMessages : _m, _o = props.messageLimit, messageLimit = _o === void 0 ? 100 : _o, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _p = props.hasMoreNewer, hasMoreNewer = _p === void 0 ? false : _p, showUnreadNotificationAlways = props.showUnreadNotificationAlways, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _q = props.jumpToLatestMessage, jumpToLatestMessage = _q === void 0 ? function () { return Promise.resolve(); } : _q;
-    var _r = React__default["default"].useState(null), listElement = _r[0], setListElement = _r[1];
-    var _s = React__default["default"].useState(null), ulElement = _s[0], setUlElement = _s[1];
+    var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, _e = props.internalInfiniteScrollProps, _f = _e === void 0 ? {} : _e, _g = _f.threshold, loadMoreScrollThreshold = _g === void 0 ? Window.DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = Window.__rest(_f, ["threshold"]), _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(Window.MESSAGE_ACTIONS) : _h, _j = props.messages, messages = _j === void 0 ? [] : _j, notifications = props.notifications, _k = props.noGroupByUser, noGroupByUser = _k === void 0 ? false : _k, _l = props.pinPermissions, pinPermissions = _l === void 0 ? Window.defaultPinPermissions : _l, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    _m = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    returnAllReadData = _m === void 0 ? false : _m, _o = props.threadList, threadList = _o === void 0 ? false : _o, _p = props.unsafeHTML, unsafeHTML = _p === void 0 ? false : _p, headerPosition = props.headerPosition, read = props.read, _q = props.renderMessages, renderMessages = _q === void 0 ? defaultRenderMessages : _q, _r = props.messageLimit, messageLimit = _r === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _r, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _s = props.hasMoreNewer, hasMoreNewer = _s === void 0 ? false : _s, showUnreadNotificationAlways = props.showUnreadNotificationAlways, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _t = props.jumpToLatestMessage, jumpToLatestMessage = _t === void 0 ? function () { return Promise.resolve(); } : _t;
+    var _u = React__default["default"].useState(null), listElement = _u[0], setListElement = _u[1];
+    var _v = React__default["default"].useState(null), ulElement = _v[0], setUlElement = _v[1];
     var customClasses = Window.useChatContext('MessageList').customClasses;
-    var _t = Window.useComponentContext('MessageList'), _u = _t.EmptyStateIndicator, EmptyStateIndicator = _u === void 0 ? Window.EmptyStateIndicator : _u, _v = _t.LoadingIndicator, LoadingIndicator = _v === void 0 ? Window.LoadingIndicator : _v, _w = _t.MessageListNotifications, MessageListNotifications$1 = _w === void 0 ? MessageListNotifications : _w, _x = _t.MessageNotification, MessageNotification = _x === void 0 ? Window.MessageNotification : _x, _y = _t.TypingIndicator, TypingIndicator = _y === void 0 ? Window.TypingIndicator : _y, _z = _t.UnreadMessagesNotification, UnreadMessagesNotification$1 = _z === void 0 ? UnreadMessagesNotification : _z;
-    var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
-    var _0 = useScrollLocationLogic({
+    var _w = Window.useComponentContext('MessageList'), _x = _w.EmptyStateIndicator, EmptyStateIndicator = _x === void 0 ? Window.EmptyStateIndicator : _x, _y = _w.LoadingIndicator, LoadingIndicator = _y === void 0 ? Window.LoadingIndicator : _y, _z = _w.MessageListNotifications, MessageListNotifications$1 = _z === void 0 ? MessageListNotifications : _z, _0 = _w.MessageNotification, MessageNotification = _0 === void 0 ? Window.MessageNotification : _0, _1 = _w.TypingIndicator, TypingIndicator = _1 === void 0 ? Window.TypingIndicator : _1, _2 = _w.UnreadMessagesNotification, UnreadMessagesNotification$1 = _2 === void 0 ? UnreadMessagesNotification : _2;
+    var _3 = useScrollLocationLogic({
         hasMoreNewer: hasMoreNewer,
         listElement: listElement,
         loadMoreScrollThreshold: loadMoreScrollThreshold,
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
         suppressAutoscroll: suppressAutoscroll,
-    }), hasNewMessages = _0.hasNewMessages, isMessageListScrolledToBottom = _0.isMessageListScrolledToBottom, onScroll = _0.onScroll, scrollToBottom = _0.scrollToBottom, wrapperRect = _0.wrapperRect;
+    }), hasNewMessages = _3.hasNewMessages, isMessageListScrolledToBottom = _3.isMessageListScrolledToBottom, onScroll = _3.onScroll, scrollToBottom = _3.scrollToBottom, wrapperRect = _3.wrapperRect;
     var showUnreadMessagesNotification = useUnreadMessagesNotification({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
         showAlways: !!showUnreadNotificationAlways,
@@ -662,7 +656,7 @@ var MessageListWithContext = function (props) {
         unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _a !== void 0 ? _a : 0,
         wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
     });
-    var _1 = useEnrichedMessages({
+    var _4 = useEnrichedMessages({
         channel: channel,
         disableDateSeparator: disableDateSeparator,
         groupStyles: groupStyles,
@@ -671,7 +665,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-    }), messageGroupStyles = _1.messageGroupStyles, enrichedMessages = _1.messages;
+    }), messageGroupStyles = _4.messageGroupStyles, enrichedMessages = _4.messages;
     var elements = useMessageListElements({
         channelUnreadUiState: channelUnreadUiState,
         enrichedMessages: enrichedMessages,
@@ -750,7 +744,7 @@ var MessageListWithContext = function (props) {
     return (React__default["default"].createElement(Window.MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
         React__default["default"].createElement(MessageListMainPanel, null,
             !threadList && showUnreadMessagesNotification && (React__default["default"].createElement(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })),
-            React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, Window.__assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps, { threshold: loadMoreScrollThreshold }),
+            React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, Window.__assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold }, restInternalInfiniteScrollProps),
                 React__default["default"].createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                 React__default["default"].createElement(TypingIndicator, { threadList: threadList }),
                 React__default["default"].createElement("div", { key: 'bottom' }))))),
@@ -1054,7 +1048,7 @@ var Footer = function () {
 };
 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, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -1077,7 +1071,7 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var isLastReadMessage = message.id === lastReadMessageId;
     var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || unreadMessageCount > 0); // unread count can be 0 if the user marks unread only own messages
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Window.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] || [] }),
+        React__default["default"].createElement(Window.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] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparator && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };
@@ -1113,11 +1107,11 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 }
 var VirtualizedMessageListWithContext = function (props) {
     var _a, _b;
-    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? 100 : _g, messages = props.messages, notifications = props.notifications, 
+    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
     var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = Window.__rest(additionalVirtuosoProps, ["components"]);
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
@@ -1245,8 +1239,9 @@ var VirtualizedMessageListWithContext = function (props) {
         }
     };
     var atTopStateChange = function (isAtTop) {
-        if (isAtTop)
+        if (isAtTop) {
             loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
+        }
     };
     React.useEffect(function () {
         var scrollTimeout;
@@ -1289,6 +1284,8 @@ var VirtualizedMessageListWithContext = function (props) {
                         ownMessagesReadByOthers: ownMessagesReadByOthers,
                         processedMessages: processedMessages,
                         shouldGroupByUser: shouldGroupByUser,
+                        sortReactionDetails: sortReactionDetails,
+                        sortReactions: sortReactions,
                         threadList: threadList,
                         unreadMessageCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
                         UnreadMessagesSeparator: UnreadMessagesSeparator,
@@ -1308,7 +1305,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
 }
 
-var version = '11.9.0';
+var version = '11.11.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1527,6 +1524,36 @@ var Chat = function (props) {
         React__default["default"].createElement(Window.TranslationProvider, { value: translators }, children)));
 };
 
+/**
+ * React hook to create, connect and return `StreamChat` client.
+ */
+var useCreateChatClient = function (_a) {
+    var apiKey = _a.apiKey, tokenOrProvider = _a.tokenOrProvider, userData = _a.userData;
+    var _b = React.useState(null), chatClient = _b[0], setChatClient = _b[1];
+    var _c = React.useState(userData), cachedUserData = _c[0], setCachedUserData = _c[1];
+    if (userData.id !== cachedUserData.id) {
+        setCachedUserData(userData);
+    }
+    React.useEffect(function () {
+        var client = new streamChat.StreamChat(apiKey);
+        var didUserConnectInterrupt = false;
+        var connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(function () {
+            if (!didUserConnectInterrupt)
+                setChatClient(client);
+        });
+        return function () {
+            didUserConnectInterrupt = true;
+            setChatClient(null);
+            connectionPromise
+                .then(function () { return client.disconnectUser(); })
+                .then(function () {
+                console.log("Connection for user \"".concat(cachedUserData.id, "\" has been closed"));
+            });
+        };
+    }, [apiKey, cachedUserData, tokenOrProvider]);
+    return chatClient;
+};
+
 var CloseIcon = function (_a) {
     var title = _a.title;
     var t = Window.useTranslationContext('CloseIcon').t;
@@ -1914,6 +1941,7 @@ exports.VirtualizedMessageList = VirtualizedMessageList;
 exports.darkModeTheme = darkModeTheme;
 exports.defaultRenderMessages = defaultRenderMessages;
 exports.useChat = useChat;
+exports.useCreateChatClient = useCreateChatClient;
 exports.useCustomStyles = useCustomStyles;
 exports.useEnrichedMessages = useEnrichedMessages;
 exports.useLastReadData = useLastReadData;