stream-chat-react 12.0.0-rc.10 → 12.0.0-rc.12

package/dist/components/MessageInput/MessageInputFlat.js

@@ -20,7 +20,7 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
-    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
+    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
     const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, CooldownTimer = DefaultCooldownTimer, FileUploadIcon = DefaultUploadIcon, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, EmojiPicker, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
@@ -64,7 +64,7 @@ export const MessageInputFlat = () => {
         return React.createElement(AudioRecorder, null);
     // TODO: "!message" condition is a temporary fix for shared
     // state when editing a message (fix shared state issue)
-    const displayQuotedMessage = !message && quotedMessage && !quotedMessage.parent_id;
+    const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
     const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
     const isRecording = !!recordingController.recordingState;
     return (React.createElement(React.Fragment, null,

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { CloseIcon } from './icons';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
@@ -13,7 +14,7 @@ export const QuotedMessagePreviewHeader = () => {
             React.createElement(CloseIcon, null))));
 };
 export const QuotedMessagePreview = ({ quotedMessage, }) => {
-    const { Attachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, } = useComponentContext('QuotedMessagePreview');
     const { userLanguage } = useTranslationContext('QuotedMessagePreview');
     const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
         quotedMessage.text;

package/dist/components/MessageList/MessageList.js

@@ -127,9 +127,7 @@ const MessageListWithContext = (props) => {
     return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
             !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
-            React.createElement("div", { className: clsx(messageListClass, {
-                    [customClasses?.threadList || 'str-chat__thread-list']: threadList,
-                }), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
+            React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
                 React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                 React.createElement(TypingIndicator, { threadList: threadList }),
                 React.createElement("div", { key: 'bottom' }))))),

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

@@ -3,7 +3,7 @@ import { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, Vi
 import { GroupStyle, ProcessMessagesParams } from './utils';
 import { MessageProps, MessageUIComponentProps } from '../Message';
 import { ChannelActionContextValue } from '../../context/ChannelActionContext';
-import { StreamMessage } from '../../context/ChannelStateContext';
+import { ChannelStateContextValue, StreamMessage } from '../../context/ChannelStateContext';
 import { ChatContextValue } from '../../context/ChatContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { UserResponse } from 'stream-chat';
@@ -40,6 +40,7 @@ type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActio
 export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
     /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
     additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext<StreamChatGenerics>>;
+    channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState'];
     /** If true, picking a reaction from the `ReactionSelector` component will close the selector */
     closeReactionSelectorOnClick?: boolean;
     /** Custom render function, if passed, certain UI props are ignored */

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -11,6 +11,9 @@ import { getGroupStyles, getLastReceived, processMessages, } from './utils';
 import { MessageSimple } from '../Message';
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
 import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Header, Item, makeItemsRenderedHandler, messageRenderer, } from './VirtualizedMessageListComponents';
+import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from '../MessageList';
+import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
+import { EventComponent as DefaultMessageSystem } from '../EventComponent';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
@@ -53,7 +56,7 @@ const VirtualizedMessageListWithContext = (props) => {
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    const { DateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
+    const { DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem = DefaultMessageSystem, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
     const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
     const { client, customClasses } = useChatContext('VirtualizedMessageList');
     const virtuoso = useRef(null);
@@ -236,5 +239,5 @@ export function VirtualizedMessageList(props) {
     const { jumpToLatestMessage, loadMore, loadMoreNewer, } = useChannelActionContext('VirtualizedMessageList');
     const { channel, channelUnreadUiState, hasMore, hasMoreNewer, highlightedMessageId, loadingMore, loadingMoreNewer, messages: contextMessages, notifications, read, suppressAutoscroll, } = useChannelStateContext('VirtualizedMessageList');
     const messages = props.messages || contextMessages;
-    return (React.createElement(VirtualizedMessageListWithContext, { 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 }));
+    return (React.createElement(VirtualizedMessageListWithContext, { channel: channel, channelUnreadUiState: props.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 }));
 }

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

@@ -11,7 +11,7 @@ type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGe
     context?: VirtuosoContext<StreamChatGenerics>;
 };
 export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: ItemProps & CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => React.JSX.Element | null;
 export {};

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -37,17 +37,17 @@ export const Item = ({ context, ...props }) => {
 };
 export const Header = ({ context, }) => {
     const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext('VirtualizedMessageListHeader');
-    if (!context?.loadingMore)
-        return null;
-    return LoadingIndicator ? (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
-        React.createElement(LoadingIndicator, { size: 20 }))) : (context?.head || null);
+    return (React.createElement(React.Fragment, null,
+        context?.head,
+        context?.loadingMore && LoadingIndicator && (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
+            React.createElement(LoadingIndicator, { size: 20 })))));
 };
 export const EmptyPlaceholder = ({ context, }) => {
     const { EmptyStateIndicator = DefaultEmptyStateIndicator, } = useComponentContext('VirtualizedMessageList');
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
-    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
     const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -89,7 +89,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return (React.createElement(React.Fragment, null,
         showUnreadSeparatorAbove && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList }),
         showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

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

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { UserResponse } from 'stream-chat';
 import { GroupStyle } from './utils';
-import { MessageProps } from '../Message';
 import { ComponentContextValue, CustomClasses } from '../../context';
-import type { UserResponse } from 'stream-chat';
 import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../types';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { MessageProps } from '../Message';
 export interface RenderMessagesOptions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
     components: ComponentContextValue<StreamChatGenerics>;
     lastReceivedMessageId: string | null;

package/dist/components/MessageList/renderMessages.js

@@ -1,9 +1,12 @@
 import React, { Fragment } from 'react';
 import { isDateSeparatorMessage } from './utils';
 import { Message } from '../Message';
+import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
+import { EventComponent as DefaultMessageSystem } from '../EventComponent';
+import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }) {
-    const { DateSeparator, HeaderComponent, MessageSystem, UnreadMessagesSeparator } = components;
+    const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
     for (let index = 0; index < messages.length; index++) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+import type { AvatarProps } from '../Avatar';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -21,7 +21,10 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
     reaction_counts?: Record<string, number>;
     /** An object containing summary for each reaction type on a message */
     reaction_groups?: Record<string, ReactionGroupResponse>;
-    /** A list of the currently supported reactions on a message */
+    /**
+     * @deprecated
+     * A list of the currently supported reactions on a message
+     * */
     reactionOptions?: ReactionOptions;
     /** If true, adds a CSS class that reverses the horizontal positioning of the selector */
     reverse?: boolean;

package/dist/components/Reactions/ReactionSelector.js

@@ -4,9 +4,10 @@ import { isMutableRef } from './utils/utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
+import { defaultReactionOptions } from './reactionOptions';
 const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
     const { Avatar: propAvatar, detailedView = true, handleReaction: propHandleReaction, latest_reactions: propLatestReactions, own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reverse = false, } = props;
-    const { Avatar: contextAvatar, reactionOptions: contextReactionOptions, } = useComponentContext('ReactionSelector');
+    const { Avatar: contextAvatar, reactionOptions: contextReactionOptions = defaultReactionOptions, } = useComponentContext('ReactionSelector');
     const { handleReaction: contextHandleReaction, message, } = useMessageContext('ReactionSelector');
     const reactionOptions = propReactionOptions ?? contextReactionOptions;
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;

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

@@ -17,7 +17,10 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
     reaction_counts?: Record<string, number>;
     /** An object containing summary for each reaction type on a message */
     reaction_groups?: Record<string, ReactionGroupResponse>;
-    /** A list of the currently supported reactions on a message */
+    /**
+     * @deprecated
+     * A list of the currently supported reactions on a message
+     * */
     reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */
     reactions?: ReactionResponse<StreamChatGenerics>[];

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

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useComponentContext, useMessageContext } from '../../../context';
+import { defaultReactionOptions } from '../reactionOptions';
 export const defaultReactionsSort = (a, b) => {
     if (a.firstReactionAt && b.firstReactionAt) {
         return +a.firstReactionAt - +b.firstReactionAt;
@@ -9,7 +10,7 @@ export const defaultReactionsSort = (a, b) => {
 export const useProcessReactions = (params) => {
     const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reactions: propReactions, sortReactions: propSortReactions, } = params;
     const { message, sortReactions: contextSortReactions } = useMessageContext('useProcessReactions');
-    const { reactionOptions: contextReactionOptions } = useComponentContext('useProcessReactions');
+    const { reactionOptions: contextReactionOptions = defaultReactionOptions, } = useComponentContext('useProcessReactions');
     const reactionOptions = propReactionOptions ?? contextReactionOptions;
     const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
     const latestReactions = propReactions || message.latest_reactions;

package/dist/components/Thread/Thread.js

@@ -6,19 +6,31 @@ import { MessageList, VirtualizedMessageList, } from '../MessageList';
 import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
 import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
+import { useStateStore, useThreadContext } from '../../components/Threads';
 /**
  * The Thread component renders a parent Message with a list of replies
  */
 export const Thread = (props) => {
     const { channel, channelConfig, thread } = useChannelStateContext('Thread');
-    if (!thread || channelConfig?.replies === false)
+    const threadInstance = useThreadContext();
+    if ((!thread && !threadInstance) || channelConfig?.replies === false)
         return null;
-    // The wrapper ensures a key variable is set and the component recreates on thread switch
-    return React.createElement(ThreadInner, { ...props, key: `thread-${thread.id}-${channel?.cid}` });
+    // the wrapper ensures a key variable is set and the component recreates on thread switch
+    return (
+    // FIXME: TS is having trouble here as at least one of the two would always be defined
+    React.createElement(ThreadInner, { ...props, key: `thread-${(thread ?? threadInstance)?.id}-${channel?.cid}` }));
 };
+const selector = (nextValue) => [
+    nextValue.replies,
+    nextValue.pagination.isLoadingPrev,
+    nextValue.pagination.isLoadingNext,
+    nextValue.parentMessage,
+];
 const ThreadInner = (props) => {
     const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
-    const { thread, threadHasMore, threadLoadingMore, threadMessages, threadSuppressAutoscroll, } = useChannelStateContext('Thread');
+    const threadInstance = useThreadContext();
+    const [latestReplies, isLoadingPrev, isLoadingNext, parentMessage] = useStateStore(threadInstance?.state, selector) ?? [];
+    const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll, } = useChannelStateContext('Thread');
     const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
     const { customClasses } = useChatContext('Thread');
     const { ThreadInput: ContextInput, Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, VirtualMessage, } = useComponentContext('Thread');
@@ -33,16 +45,31 @@ const ThreadInner = (props) => {
             loadMoreThread();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    if (!thread)
+    }, [thread, loadMoreThread]);
+    const threadProps = threadInstance
+        ? {
+            loadingMore: isLoadingPrev,
+            loadingMoreNewer: isLoadingNext,
+            loadMore: threadInstance.loadPrevPage,
+            loadMoreNewer: threadInstance.loadNextPage,
+            messages: latestReplies,
+        }
+        : {
+            hasMore: threadHasMore,
+            loadingMore: threadLoadingMore,
+            loadMore: loadMoreThread,
+            messages: threadMessages,
+        };
+    const messageAsThread = thread ?? parentMessage;
+    if (!messageAsThread)
         return null;
     const threadClass = customClasses?.thread ||
         clsx('str-chat__thread-container str-chat__thread', {
             'str-chat__thread--virtualized': virtualized,
         });
-    const head = (React.createElement(ThreadHead, { key: thread.id, message: thread, Message: MessageUIComponent, ...additionalParentMessageProps }));
+    const head = (React.createElement(ThreadHead, { key: messageAsThread.id, message: messageAsThread, Message: MessageUIComponent, ...additionalParentMessageProps }));
     return (React.createElement("div", { className: threadClass },
-        React.createElement(ThreadHeader, { closeThread: closeThread, thread: thread }),
-        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, head: head, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: MessageUIComponent, messageActions: messageActions, messages: threadMessages || [], suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...(virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps) }),
-        React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false, ...additionalMessageInputProps })));
+        React.createElement(ThreadHeader, { closeThread: closeThread, thread: messageAsThread }),
+        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps) }),
+        React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, parent: thread ?? parentMessage, publishTypingEvent: false, ...additionalMessageInputProps })));
 };

package/dist/components/Threads/ThreadContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import { Thread } from 'stream-chat';
+export type ThreadContextValue = Thread | undefined;
+export declare const ThreadContext: React.Context<ThreadContextValue>;
+export declare const useThreadContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
+export declare const ThreadProvider: ({ children, thread }: PropsWithChildren<{
+    thread?: Thread;
+}>) => React.JSX.Element;

package/dist/components/Threads/ThreadContext.js

@@ -0,0 +1,9 @@
+import React, { createContext, useContext } from 'react';
+import { Channel } from '../../components';
+export const ThreadContext = createContext(undefined);
+export const useThreadContext = () => {
+    const thread = useContext(ThreadContext);
+    return thread ?? undefined;
+};
+export const ThreadProvider = ({ children, thread }) => (React.createElement(ThreadContext.Provider, { value: thread },
+    React.createElement(Channel, { channel: thread?.channel }, children)));

package/dist/components/Threads/ThreadList/ThreadList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { VirtuosoProps } from 'react-virtuoso';
+import type { Thread } from 'stream-chat';
+type ThreadListProps = {
+    virtuosoProps?: VirtuosoProps<Thread, unknown>;
+};
+export declare const useThreadList: () => void;
+export declare const ThreadList: ({ virtuosoProps }: ThreadListProps) => React.JSX.Element;
+export {};

package/dist/components/Threads/ThreadList/ThreadList.js

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { ThreadListItem as DefaultThreadListItem } from './ThreadListItem';
+import { ThreadListEmptyPlaceholder as DefaultThreadListEmptyPlaceholder } from './ThreadListEmptyPlaceholder';
+import { ThreadListUnseenThreadsBanner as DefaultThreadListUnseenThreadsBanner } from './ThreadListUnseenThreadsBanner';
+import { ThreadListLoadingIndicator as DefaultThreadListLoadingIndicator } from './ThreadListLoadingIndicator';
+import { useChatContext, useComponentContext } from '../../../context';
+import { useStateStore } from '../hooks/useStateStore';
+const selector = (nextValue) => [nextValue.threads];
+const computeItemKey = (_, item) => item.id;
+export const useThreadList = () => {
+    const { client } = useChatContext();
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                client.threads.activate();
+            }
+            if (document.visibilityState === 'hidden') {
+                client.threads.deactivate();
+            }
+        };
+        handleVisibilityChange();
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            client.threads.deactivate();
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [client]);
+};
+export const ThreadList = ({ virtuosoProps }) => {
+    const { client } = useChatContext();
+    const { ThreadListItem = DefaultThreadListItem, ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
+    const [threads] = useStateStore(client.threads.state, selector);
+    useThreadList();
+    return (React.createElement("div", { className: 'str-chat__thread-list-container' },
+        React.createElement(ThreadListUnseenThreadsBanner, null),
+        React.createElement(Virtuoso, { atBottomStateChange: (atBottom) => atBottom && client.threads.loadNextPage(), className: 'str-chat__thread-list', components: {
+                EmptyPlaceholder: ThreadListEmptyPlaceholder,
+                Footer: ThreadListLoadingIndicator,
+            }, computeItemKey: computeItemKey, data: threads, itemContent: (_, thread) => React.createElement(ThreadListItem, { thread: thread }), ...virtuosoProps })));
+};

package/dist/components/Threads/ThreadList/ThreadListEmptyPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThreadListEmptyPlaceholder: () => React.JSX.Element;

package/dist/components/Threads/ThreadList/ThreadListEmptyPlaceholder.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Icon } from '../icons';
+export const ThreadListEmptyPlaceholder = () => (React.createElement("div", { className: 'str-chat__thread-list-empty-placeholder' },
+    React.createElement(Icon.MessageBubble, null),
+    "No threads here yet..."));

package/dist/components/Threads/ThreadList/ThreadListItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Thread } from 'stream-chat';
+import type { ThreadListItemUIProps } from './ThreadListItemUI';
+export type ThreadListItemProps = {
+    thread: Thread;
+    threadListItemUIProps?: ThreadListItemUIProps;
+};
+export declare const useThreadListItemContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
+export declare const ThreadListItem: ({ thread, threadListItemUIProps }: ThreadListItemProps) => React.JSX.Element;

package/dist/components/Threads/ThreadList/ThreadListItem.js

@@ -0,0 +1,52 @@
+import React, { createContext, useContext } from 'react';
+import { useComponentContext } from '../../../context';
+import { ThreadListItemUI as DefaultThreadListItemUI } from './ThreadListItemUI';
+const ThreadListItemContext = createContext(undefined);
+export const useThreadListItemContext = () => useContext(ThreadListItemContext);
+export const ThreadListItem = ({ thread, threadListItemUIProps }) => {
+    const { ThreadListItemUI = DefaultThreadListItemUI } = useComponentContext();
+    return (React.createElement(ThreadListItemContext.Provider, { value: thread },
+        React.createElement(ThreadListItemUI, { ...threadListItemUIProps })));
+};
+// const App = () => {
+//   const route = useRouter();
+//   return (
+//     <Chat>
+//       {route === '/channels' && (
+//         <Channel>
+//           <MessageList />
+//           <Thread />
+//         </Channel>
+//       )}
+//       {route === '/threads' && (
+//         <Threads>
+//           <ThreadList />
+//           <ThreadProvider>
+//             <Thread />
+//           </ThreadProvider>
+//         </Threads>
+//       )}
+//     </Chat>
+//   );
+// };
+// pre-built layout
+{
+    /*
+  <Chat client={chatClient}>
+    <Views>
+      // has default
+      <ViewSelector onItemPointerDown={} />
+      <View.Chat>
+        <Channel>
+          <MessageList />
+          <MessageInput />
+        </Channel>
+      </View.Chat>
+      <View.Thread> <-- activeThread state
+        <ThreadList /> <-- uses context for click handler
+        <WrappedThread /> <-- ThreadProvider + Channel combo
+      </View.Thread>
+    </Views>
+  </Chat>;
+  */
+}

package/dist/components/Threads/ThreadList/ThreadListItemUI.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'>;
+/**
+ * TODO:
+ * - maybe hover state? ask design
+ * - move styling to CSS library and clean it up (separate layout and theme)
+ * - use Moment/DayJs for proper created_at formatting (replace toLocaleTimeString)
+ * - handle deleted message [in progress]
+ */
+export declare const attachmentTypeIconMap: {
+    readonly audio: "🔈";
+    readonly file: "📄";
+    readonly image: "📷";
+    readonly video: "🎥";
+    readonly voiceRecording: "🎙️";
+};
+export declare const ThreadListItemUI: (props: ThreadListItemUIProps) => React.JSX.Element;

package/dist/components/Threads/ThreadList/ThreadListItemUI.js

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { Timestamp } from '../../Message/Timestamp';
+import { Avatar } from '../../Avatar';
+import { Icon } from '../icons';
+import { UnreadCountBadge } from '../UnreadCountBadge';
+import { useChatContext } from '../../../context';
+import { useThreadsViewContext } from '../../ChatView';
+import { useThreadListItemContext } from './ThreadListItem';
+import { useStateStore } from '../hooks/useStateStore';
+/**
+ * TODO:
+ * - maybe hover state? ask design
+ * - move styling to CSS library and clean it up (separate layout and theme)
+ * - use Moment/DayJs for proper created_at formatting (replace toLocaleTimeString)
+ * - handle deleted message [in progress]
+ */
+export const attachmentTypeIconMap = {
+    audio: '🔈',
+    file: '📄',
+    image: '📷',
+    video: '🎥',
+    voiceRecording: '🎙️',
+};
+// TODO: translations
+const getTitleFromMessage = ({ currentUserId, message, }) => {
+    const attachment = message?.attachments?.at(0);
+    let attachmentIcon = '';
+    if (attachment) {
+        attachmentIcon +=
+            attachmentTypeIconMap[attachment.type ?? 'file'] ??
+                attachmentTypeIconMap.file;
+    }
+    const messageBelongsToCurrentUser = message?.user?.id === currentUserId;
+    if (message?.deleted_at && message.parent_id)
+        return clsx(messageBelongsToCurrentUser && 'You:', 'This reply was deleted.');
+    if (message?.deleted_at && !message.parent_id)
+        return clsx(messageBelongsToCurrentUser && 'You:', 'The source message was deleted.');
+    if (attachment?.type === 'voiceRecording')
+        return clsx(attachmentIcon, messageBelongsToCurrentUser && 'You:', 'Voice message');
+    return clsx(attachmentIcon, messageBelongsToCurrentUser && 'You:', message?.text || attachment?.fallback || 'N/A');
+};
+export const ThreadListItemUI = (props) => {
+    const { client } = useChatContext();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const thread = useThreadListItemContext();
+    const selector = useCallback((nextValue) => [
+        nextValue.replies.at(-1),
+        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+        nextValue.parentMessage,
+        nextValue.channel,
+        nextValue.deletedAt,
+    ], [client]);
+    const [latestReply, ownUnreadMessageCount, parentMessage, channelData, deletedAt] = useStateStore(thread.state, selector);
+    const { activeThread, setActiveThread } = useThreadsViewContext();
+    const avatarProps = deletedAt ? null : latestReply?.user;
+    return (React.createElement("button", { "aria-selected": activeThread === thread, className: 'str-chat__thread-list-item', "data-thread-id": thread.id, onClick: () => setActiveThread(thread), role: 'option', ...props },
+        React.createElement("div", { className: 'str-chat__thread-list-item__channel' },
+            React.createElement(Icon.MessageBubble, null),
+            React.createElement("div", { className: 'str-chat__thread-list-item__channel-text' }, channelData.data?.name || 'N/A')),
+        React.createElement("div", { className: 'str-chat__thread-list-item__parent-message' },
+            React.createElement("div", { className: 'str-chat__thread-list-item__parent-message-text' },
+                "replied to: ",
+                getTitleFromMessage({ message: parentMessage })),
+            !deletedAt && React.createElement(UnreadCountBadge, { count: ownUnreadMessageCount })),
+        React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply' },
+            React.createElement(Avatar, { ...avatarProps }),
+            React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-details' },
+                !deletedAt && (React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-created-by' }, latestReply?.user?.name || latestReply?.user?.id || 'Unknown sender')),
+                React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-text-and-timestamp' },
+                    React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-text' }, deletedAt
+                        ? 'This thread was deleted'
+                        : getTitleFromMessage({ currentUserId: client.user?.id, message: latestReply })),
+                    React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-timestamp' },
+                        React.createElement(Timestamp, { timestamp: deletedAt ?? latestReply?.created_at })))))));
+};

package/dist/components/Threads/ThreadList/ThreadListLoadingIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThreadListLoadingIndicator: () => React.JSX.Element | null;

package/dist/components/Threads/ThreadList/ThreadListLoadingIndicator.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';
+import { useChatContext, useComponentContext } from '../../../context';
+import { useStateStore } from '../hooks/useStateStore';
+const selector = (nextValue) => [nextValue.pagination.isLoadingNext];
+export const ThreadListLoadingIndicator = () => {
+    const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();
+    const { client } = useChatContext();
+    const [isLoadingNext] = useStateStore(client.threads.state, selector);
+    if (!isLoadingNext)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__thread-list-loading-indicator' },
+        React.createElement(LoadingIndicator, null)));
+};

package/dist/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThreadListUnseenThreadsBanner: () => React.JSX.Element | null;

package/dist/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Icon } from '../icons';
+import { useChatContext } from '../../../context';
+import { useStateStore } from '../hooks/useStateStore';
+const selector = (nextValue) => [nextValue.unseenThreadIds];
+export const ThreadListUnseenThreadsBanner = () => {
+    const { client } = useChatContext();
+    const [unseenThreadIds] = useStateStore(client.threads.state, selector);
+    if (!unseenThreadIds.length)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__unseen-threads-banner' },
+        unseenThreadIds.length,
+        " unread threads",
+        React.createElement("button", { className: 'str-chat__unseen-threads-banner__button', onClick: () => client.threads.reload() },
+            React.createElement(Icon.Reload, null))));
+};

package/dist/components/Threads/ThreadList/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThreadList';
+export * from './ThreadListItem';
+export * from './ThreadListItemUI';

package/dist/components/Threads/ThreadList/index.js

@@ -0,0 +1,3 @@
+export * from './ThreadList';
+export * from './ThreadListItem';
+export * from './ThreadListItemUI';