stream-chat-react 12.0.0-rc.9 → 12.0.0

package/dist/components/Avatar/Avatar.js

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import { Icon } from '../Threads/icons';
 import { getWholeChar } from '../../utils';
 /**
  * A round avatar image with fallback to username's first letter
@@ -15,6 +16,9 @@ export const Avatar = (props) => {
     const showImage = image && !error;
     return (React.createElement("div", { className: clsx(`str-chat__avatar str-chat__message-sender-avatar`, className, {
             ['str-chat__avatar--multiple-letters']: initials.length > 1,
+            ['str-chat__avatar--no-letters']: !initials.length,
             ['str-chat__avatar--one-letter']: initials.length === 1,
-        }), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, title: name }, showImage ? (React.createElement("img", { alt: initials, className: clsx(`str-chat__avatar-image`), "data-testid": 'avatar-img', onError: () => setError(true), src: image })) : (React.createElement("div", { className: 'str-chat__avatar-fallback', "data-testid": 'avatar-fallback' }, initials))));
+        }), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, role: 'button', title: name }, showImage ? (React.createElement("img", { alt: initials, className: 'str-chat__avatar-image', "data-testid": 'avatar-img', onError: () => setError(true), src: image })) : (React.createElement(React.Fragment, null,
+        !!initials.length && (React.createElement("div", { className: clsx('str-chat__avatar-fallback'), "data-testid": 'avatar-fallback' }, initials)),
+        !initials.length && React.createElement(Icon.User, null)))));
 };

package/dist/components/Channel/Channel.d.ts

@@ -2,11 +2,10 @@ import React, { PropsWithChildren } from 'react';
 import { ChannelQueryOptions, EventAPIResponse, Message, MessageResponse, Channel as StreamChannel, StreamChat, UpdatedMessage } from 'stream-chat';
 import { OnMentionAction } from './hooks/useMentionsHandlers';
 import { LoadingErrorIndicatorProps } from '../Loading';
-import { StreamMessage } from '../../context/ChannelStateContext';
-import { ComponentContextValue } from '../../context/ComponentContext';
+import { ComponentContextValue, StreamMessage } from '../../context';
 import type { UnreadMessagesNotificationProps } from '../MessageList';
-import type { MessageProps } from '../Message/types';
-import type { MessageInputProps } from '../MessageInput/MessageInput';
+import type { MessageProps } from '../Message';
+import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
 import { ReactionOptions } from '../Reactions';

package/dist/components/Channel/Channel.js

@@ -10,26 +10,17 @@ import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
 import { useIsMounted } from './hooks/useIsMounted';
 import { useMentionsHandlers } from './hooks/useMentionsHandlers';
-import { Attachment as DefaultAttachment } from '../Attachment/Attachment';
 import { LoadingErrorIndicator as DefaultLoadingErrorIndicator, } from '../Loading';
 import { LoadingChannel as DefaultLoadingIndicator } from './LoadingChannel';
-import { MessageSimple } from '../Message/MessageSimple';
 import { DropzoneProvider } from '../MessageInput/DropzoneProvider';
-import { ChannelActionProvider, } from '../../context/ChannelActionContext';
-import { ChannelStateProvider, } from '../../context/ChannelStateContext';
-import { ComponentProvider } from '../../context/ComponentContext';
-import { useChatContext } from '../../context/ChatContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { TypingProvider } from '../../context/TypingContext';
+import { ChannelActionProvider, ChannelStateProvider, TypingProvider, useChatContext, useTranslationContext, WithComponents, } from '../../context';
 import { DEFAULT_HIGHLIGHT_DURATION, DEFAULT_INITIAL_CHANNEL_PAGE_SIZE, DEFAULT_JUMP_TO_PAGE_SIZE, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, DEFAULT_THREAD_PAGE_SIZE, } from '../../constants/limits';
-import { hasMoreMessagesProbably, UnreadMessagesSeparator } from '../MessageList';
+import { hasMoreMessagesProbably } from '../MessageList';
 import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
-import { defaultReactionOptions } from '../Reactions';
-import { EventComponent } from '../EventComponent';
-import { DateSeparator } from '../DateSeparator';
+import { useThreadContext } from '../Threads';
 const isUserResponseArray = (output) => output[0]?.id != null;
 const UnMemoizedChannel = (props) => {
     const { channel: propsChannel, EmptyPlaceholder = null, LoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, } = props;
@@ -60,6 +51,7 @@ const ChannelInner = (props) => {
     const { client, customClasses, latestMessageDatesByChannels, mutes, theme, } = useChatContext('Channel');
     const { t } = useTranslationContext('Channel');
     const { channelClass, chatClass, chatContainerClass, windowsEmojiClass, } = useChannelContainerClasses({ customClasses });
+    const thread = useThreadContext();
     const [channelConfig, setChannelConfig] = useState(channel.getConfig());
     const [notifications, setNotifications] = useState([]);
     const [quotedMessage, setQuotedMessage] = useState();
@@ -565,25 +557,37 @@ const ChannelInner = (props) => {
                     errorStatusCode: parsedError.status || undefined,
                     status: 'failed',
                 });
+                thread?.upsertReplyLocally({
+                    // @ts-expect-error
+                    message: {
+                        ...message,
+                        error: parsedError,
+                        errorStatusCode: parsedError.status || undefined,
+                        status: 'failed',
+                    },
+                });
             }
         }
     };
     const sendMessage = async ({ attachments = [], mentioned_users = [], parent, text = '', }, customMessageData, options) => {
         channel.state.filterErrorMessages();
         const messagePreview = {
-            __html: text,
             attachments,
             created_at: new Date(),
             html: text,
             id: customMessageData?.id ?? `${client.userID}-${nanoid()}`,
             mentioned_users,
+            parent_id: parent?.id,
             reactions: [],
             status: 'sending',
             text,
             type: 'regular',
             user: client.user,
-            ...(parent?.id ? { parent_id: parent.id } : null),
         };
+        thread?.upsertReplyLocally({
+            // @ts-expect-error
+            message: messagePreview,
+        });
         updateMessage(messagePreview);
         await doSendMessage(messagePreview, customMessageData, options);
     };
@@ -722,8 +726,9 @@ const ChannelInner = (props) => {
         jumpToLatestMessage,
         setChannelUnreadUiState,
     ]);
+    // @ts-expect-error
     const componentContextValue = useMemo(() => ({
-        Attachment: props.Attachment || DefaultAttachment,
+        Attachment: props.Attachment,
         AttachmentPreviewList: props.AttachmentPreviewList,
         AudioRecorder: props.AudioRecorder,
         AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
@@ -732,7 +737,7 @@ const ChannelInner = (props) => {
         BaseImage: props.BaseImage,
         CooldownTimer: props.CooldownTimer,
         CustomMessageActionsList: props.CustomMessageActionsList,
-        DateSeparator: props.DateSeparator || DateSeparator,
+        DateSeparator: props.DateSeparator,
         EditMessageInput: props.EditMessageInput,
         EmojiPicker: props.EmojiPicker,
         emojiSearchIndex: props.emojiSearchIndex,
@@ -743,7 +748,7 @@ const ChannelInner = (props) => {
         Input: props.Input,
         LinkPreviewList: props.LinkPreviewList,
         LoadingIndicator: props.LoadingIndicator,
-        Message: props.Message || MessageSimple,
+        Message: props.Message,
         MessageBouncePrompt: props.MessageBouncePrompt,
         MessageDeleted: props.MessageDeleted,
         MessageListNotifications: props.MessageListNotifications,
@@ -751,13 +756,13 @@ const ChannelInner = (props) => {
         MessageOptions: props.MessageOptions,
         MessageRepliesCountButton: props.MessageRepliesCountButton,
         MessageStatus: props.MessageStatus,
-        MessageSystem: props.MessageSystem || EventComponent,
+        MessageSystem: props.MessageSystem,
         MessageTimestamp: props.MessageTimestamp,
         ModalGallery: props.ModalGallery,
         PinIndicator: props.PinIndicator,
         QuotedMessage: props.QuotedMessage,
         QuotedMessagePreview: props.QuotedMessagePreview,
-        reactionOptions: props.reactionOptions ?? defaultReactionOptions,
+        reactionOptions: props.reactionOptions,
         ReactionSelector: props.ReactionSelector,
         ReactionsList: props.ReactionsList,
         SendButton: props.SendButton,
@@ -769,11 +774,58 @@ const ChannelInner = (props) => {
         TriggerProvider: props.TriggerProvider,
         TypingIndicator: props.TypingIndicator,
         UnreadMessagesNotification: props.UnreadMessagesNotification,
-        UnreadMessagesSeparator: props.UnreadMessagesSeparator || UnreadMessagesSeparator,
+        UnreadMessagesSeparator: props.UnreadMessagesSeparator,
         VirtualMessage: props.VirtualMessage,
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.reactionOptions]);
+    }), [
+        props.Attachment,
+        props.AttachmentPreviewList,
+        props.AudioRecorder,
+        props.AutocompleteSuggestionItem,
+        props.AutocompleteSuggestionList,
+        props.Avatar,
+        props.BaseImage,
+        props.CooldownTimer,
+        props.CustomMessageActionsList,
+        props.DateSeparator,
+        props.EditMessageInput,
+        props.EmojiPicker,
+        props.EmptyStateIndicator,
+        props.FileUploadIcon,
+        props.GiphyPreviewMessage,
+        props.HeaderComponent,
+        props.Input,
+        props.LinkPreviewList,
+        props.LoadingIndicator,
+        props.Message,
+        props.MessageBouncePrompt,
+        props.MessageDeleted,
+        props.MessageListNotifications,
+        props.MessageNotification,
+        props.MessageOptions,
+        props.MessageRepliesCountButton,
+        props.MessageStatus,
+        props.MessageSystem,
+        props.MessageTimestamp,
+        props.ModalGallery,
+        props.PinIndicator,
+        props.QuotedMessage,
+        props.QuotedMessagePreview,
+        props.ReactionSelector,
+        props.ReactionsList,
+        props.SendButton,
+        props.StartRecordingAudioButton,
+        props.ThreadHead,
+        props.ThreadHeader,
+        props.ThreadStart,
+        props.Timestamp,
+        props.TriggerProvider,
+        props.TypingIndicator,
+        props.UnreadMessagesNotification,
+        props.UnreadMessagesSeparator,
+        props.VirtualMessage,
+        props.emojiSearchIndex,
+        props.reactionOptions,
+    ]);
     const typingContextValue = useCreateTypingContext({
         typing,
     });
@@ -793,7 +845,7 @@ const ChannelInner = (props) => {
     return (React.createElement("div", { className: clsx(className, windowsEmojiClass) },
         React.createElement(ChannelStateProvider, { value: channelStateContextValue },
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
-                React.createElement(ComponentProvider, { value: componentContextValue },
+                React.createElement(WithComponents, { overrides: componentContextValue },
                     React.createElement(TypingProvider, { value: typingContextValue },
                         React.createElement("div", { className: `${chatContainerClass}` },
                             dragAndDropWindow && (React.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children)),

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isDate, isDayOrMoment } from '../../../context/TranslationContext';
+import { isDate, isDayOrMoment } from '../../../i18n';
 export const useCreateChannelStateContext = (value) => {
     const { acceptedFiles, channel, channelCapabilitiesArray = [], channelConfig, debounceURLEnrichmentMs, dragAndDropWindow, enrichURLForPreview, giphyVersion, error, findURLFn, hasMore, hasMoreNewer, imageAttachmentSizeHandler, suppressAutoscroll, highlightedMessageId, loading, loadingMore, maxNumberOfFiles, members, messages = [], multipleUploads, mutes, notifications, onLinkPreviewDismissed, pinnedMessages, quotedMessage, read = {}, shouldGenerateVideoThumbnail, skipMessageDataMemoization, thread, threadHasMore, threadLoadingMore, threadMessages = [], channelUnreadUiState, videoAttachmentSizeHandler, watcherCount, watcher_count, watchers, } = value;
     const channelId = channel.cid;
@@ -67,6 +67,7 @@ export const useCreateChannelStateContext = (value) => {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+        channel.data?.name, // otherwise ChannelHeader will not be updated
         channelId,
         channelUnreadUiState,
         debounceURLEnrichmentMs,

package/dist/components/ChannelHeader/ChannelHeader.js

@@ -5,7 +5,10 @@ import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreview
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-const UnMemoizedChannelHeader = (props) => {
+/**
+ * The ChannelHeader component renders some basic information about a Channel.
+ */
+export const ChannelHeader = (props) => {
     const { Avatar = DefaultAvatar, MenuIcon = DefaultMenuIcon, image: overrideImage, live, title: overrideTitle, } = props;
     const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
     const { openMobileNav } = useChatContext('ChannelHeader');
@@ -35,7 +38,3 @@ const UnMemoizedChannelHeader = (props) => {
                     ' ')),
                 t('{{ watcherCount }} online', { watcherCount: watcher_count })))));
 };
-/**
- * The ChannelHeader component renders some basic information about a Channel.
- */
-export const ChannelHeader = React.memo(UnMemoizedChannelHeader);

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js

@@ -3,26 +3,24 @@ import { getDisplayImage, getDisplayTitle } from '../utils';
 import { useChatContext } from '../../../context';
 export const useChannelPreviewInfo = (props) => {
     const { channel, overrideImage, overrideTitle } = props;
-    const { client } = useChatContext('ChannelPreview');
-    const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(channel, client.user));
-    const [displayImage, setDisplayImage] = useState(getDisplayImage(channel, client.user));
+    const { client } = useChatContext('useChannelPreviewInfo');
+    const [displayTitle, setDisplayTitle] = useState(() => overrideTitle || getDisplayTitle(channel, client.user));
+    const [displayImage, setDisplayImage] = useState(() => overrideImage || getDisplayImage(channel, client.user));
     useEffect(() => {
-        const handleEvent = () => {
-            setDisplayTitle((displayTitle) => {
-                const newDisplayTitle = getDisplayTitle(channel, client.user);
-                return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
-            });
-            setDisplayImage((displayImage) => {
-                const newDisplayImage = getDisplayImage(channel, client.user);
-                return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
-            });
+        if (overrideTitle && overrideImage)
+            return;
+        const updateTitles = () => {
+            if (!overrideTitle)
+                setDisplayTitle(getDisplayTitle(channel, client.user));
+            if (!overrideImage)
+                setDisplayImage(getDisplayImage(channel, client.user));
         };
-        client.on('user.updated', handleEvent);
+        updateTitles();
+        client.on('user.updated', updateTitles);
         return () => {
-            client.off('user.updated', handleEvent);
+            client.off('user.updated', updateTitles);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [channel, channel.data, client, overrideImage, overrideTitle]);
     return {
         displayImage: overrideImage || displayImage,
         displayTitle: overrideTitle || displayTitle,

package/dist/components/ChannelPreview/utils.js

@@ -23,25 +23,14 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
     }
     return t('Empty message...');
 };
-export const getDisplayTitle = (channel, currentUser) => {
-    let title = channel.data?.name;
+const getChannelDisplayInfo = (info, channel, currentUser) => {
+    if (channel.data?.[info])
+        return channel.data[info];
     const members = Object.values(channel.state.members);
-    if (!title && members.length === 2) {
-        const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-        if (otherMember?.user?.name) {
-            title = otherMember.user.name;
-        }
-    }
-    return title;
-};
-export const getDisplayImage = (channel, currentUser) => {
-    let image = channel.data?.image;
-    const members = Object.values(channel.state.members);
-    if (!image && members.length === 2) {
-        const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-        if (otherMember?.user?.image) {
-            image = otherMember.user.image;
-        }
-    }
-    return image;
+    if (members.length !== 2)
+        return;
+    const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
+    return otherMember?.user?.[info];
 };
+export const getDisplayTitle = (channel, currentUser) => getChannelDisplayInfo('name', channel, currentUser);
+export const getDisplayImage = (channel, currentUser) => getChannelDisplayInfo('image', channel, currentUser);

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -97,13 +97,12 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
             // @ts-expect-error
             {
                 $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }],
-                id: { $ne: client.userID },
                 ...searchQueryParams?.userFilters?.filters,
             }, { id: 1, ...searchQueryParams?.userFilters?.sort }, { limit: 8, ...searchQueryParams?.userFilters?.options });
             if (!searchForChannels) {
                 searchQueryPromiseInProgress.current = userQueryPromise;
                 const { users } = await searchQueryPromiseInProgress.current;
-                results = users;
+                results = users.filter((u) => u.id !== client.user?.id);
             }
             else {
                 const channelQueryPromise = client.queryChannels(
@@ -117,7 +116,7 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
                     userQueryPromise,
                 ]);
                 const [channels, { users }] = await searchQueryPromiseInProgress.current;
-                results = [...channels, ...users];
+                results = [...channels, ...users.filter((u) => u.id !== client.user?.id)];
             }
         }
         catch (error) {

package/dist/components/Chat/Chat.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { CustomClasses } from '../../context/ChatContext';
-import { SupportedTranslations } from '../../context/TranslationContext';
 import type { StreamChat } from 'stream-chat';
+import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

package/dist/components/Chat/hooks/useChat.d.ts

@@ -1,5 +1,5 @@
-import { SupportedTranslations, TranslationContextValue } from '../../../context/TranslationContext';
-import { Streami18n } from '../../../i18n';
+import { TranslationContextValue } from '../../../context/TranslationContext';
+import { Streami18n, SupportedTranslations } from '../../../i18n';
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export type UseChatParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {

package/dist/components/Chat/hooks/useChat.js

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { defaultDateTimeParser, isLanguageSupported, } from '../../../context/TranslationContext';
-import { Streami18n } from '../../../i18n';
+import { defaultDateTimeParser, isLanguageSupported, Streami18n, } from '../../../i18n';
 import { version } from '../../../version';
 export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialNavOpen, }) => {
     const [translators, setTranslators] = useState({
@@ -24,13 +23,17 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         return appSettings.current;
     };
     useEffect(() => {
-        if (client) {
-            const userAgent = client.getUserAgent();
-            if (!userAgent.includes('stream-chat-react')) {
-                // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
-                client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
-            }
+        if (!client)
+            return;
+        const userAgent = client.getUserAgent();
+        if (!userAgent.includes('stream-chat-react')) {
+            // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
+            client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
         }
+        client.threads.registerSubscriptions();
+        return () => {
+            client.threads.unregisterSubscriptions();
+        };
     }, [client]);
     useEffect(() => {
         setMutes(clientMutes);

package/dist/components/ChatView/ChatView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { Thread } from 'stream-chat';
+export declare const ChatView: {
+    ({ children }: PropsWithChildren): React.JSX.Element;
+    Channels: ({ children }: PropsWithChildren) => React.JSX.Element | null;
+    Threads: ({ children }: PropsWithChildren) => React.JSX.Element | null;
+    ThreadAdapter: ({ children }: PropsWithChildren) => React.JSX.Element;
+    Selector: () => React.JSX.Element;
+};
+export type ThreadsViewContextValue = {
+    activeThread: Thread | undefined;
+    setActiveThread: (cv: ThreadsViewContextValue['activeThread']) => void;
+};
+export declare const useThreadsViewContext: () => ThreadsViewContextValue;
+export declare const useActiveThread: ({ activeThread }: {
+    activeThread?: Thread;
+}) => void;

package/dist/components/ChatView/ChatView.js

@@ -0,0 +1,103 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { ThreadProvider } from '../Threads';
+import { Icon } from '../Threads/icons';
+import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
+import { useChatContext } from '../../context';
+import { useStateStore } from '../../store';
+import clsx from 'clsx';
+const availableChatViews = ['channels', 'threads'];
+const ChatViewContext = createContext({
+    activeChatView: 'channels',
+    setActiveChatView: () => undefined,
+});
+export const ChatView = ({ children }) => {
+    const [activeChatView, setActiveChatView] = useState('channels');
+    const { theme } = useChatContext();
+    const value = useMemo(() => ({ activeChatView, setActiveChatView }), [activeChatView]);
+    return (React.createElement(ChatViewContext.Provider, { value: value },
+        React.createElement("div", { className: clsx('str-chat', theme, 'str-chat__chat-view') }, children)));
+};
+const ChannelsView = ({ children }) => {
+    const { activeChatView } = useContext(ChatViewContext);
+    if (activeChatView !== 'channels')
+        return null;
+    return React.createElement("div", { className: 'str-chat__chat-view__channels' }, children);
+};
+const ThreadsViewContext = createContext({
+    activeThread: undefined,
+    setActiveThread: () => undefined,
+});
+export const useThreadsViewContext = () => useContext(ThreadsViewContext);
+const ThreadsView = ({ children }) => {
+    const { activeChatView } = useContext(ChatViewContext);
+    const [activeThread, setActiveThread] = useState(undefined);
+    const value = useMemo(() => ({ activeThread, setActiveThread }), [activeThread]);
+    if (activeChatView !== 'threads')
+        return null;
+    return (React.createElement(ThreadsViewContext.Provider, { value: value },
+        React.createElement("div", { className: 'str-chat__chat-view__threads' }, children)));
+};
+// thread business logic that's impossible to keep within client but encapsulated for ease of use
+export const useActiveThread = ({ activeThread }) => {
+    useEffect(() => {
+        if (!activeThread)
+            return;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible' && document.hasFocus()) {
+                activeThread.activate();
+            }
+            if (document.visibilityState === 'hidden' || !document.hasFocus()) {
+                activeThread.deactivate();
+            }
+        };
+        handleVisibilityChange();
+        window.addEventListener('focus', handleVisibilityChange);
+        window.addEventListener('blur', handleVisibilityChange);
+        return () => {
+            activeThread.deactivate();
+            window.addEventListener('blur', handleVisibilityChange);
+            window.removeEventListener('focus', handleVisibilityChange);
+        };
+    }, [activeThread]);
+};
+// ThreadList under View.Threads context, will access setting function and on item click will set activeThread
+// which can be accessed for the ease of use by ThreadAdapter which forwards it to required ThreadProvider
+// ThreadList can easily live without this context and click handler can be overriden, ThreadAdapter is then no longer needed
+/**
+ * // this setup still works
+ * const MyCustomComponent = () => {
+ *  const [activeThread, setActiveThread] = useState();
+ *
+ *  return <>
+ *    // simplified
+ *    <ThreadList onItemPointerDown={setActiveThread} />
+ *    <ThreadProvider thread={activeThread}>
+ *      <Thread />
+ *    </ThreadProvider>
+ *  </>
+ * }
+ *
+ */
+const ThreadAdapter = ({ children }) => {
+    const { activeThread } = useThreadsViewContext();
+    useActiveThread({ activeThread });
+    return React.createElement(ThreadProvider, { thread: activeThread }, children);
+};
+const selector = (nextValue) => [nextValue.unreadThreadCount];
+const ChatViewSelector = () => {
+    const { client } = useChatContext();
+    const [unreadThreadCount] = useStateStore(client.threads.state, selector);
+    const { activeChatView, setActiveChatView } = useContext(ChatViewContext);
+    return (React.createElement("div", { className: 'str-chat__chat-view__selector' },
+        React.createElement("button", { "aria-selected": activeChatView === 'channels', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('channels'), role: 'tab' },
+            React.createElement(Icon.MessageBubbleEmpty, null),
+            React.createElement("div", { className: 'str-chat__chat-view__selector-button-text' }, "Channels")),
+        React.createElement("button", { "aria-selected": activeChatView === 'threads', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('threads'), role: 'tab' },
+            React.createElement(UnreadCountBadge, { count: unreadThreadCount, position: 'top-right' },
+                React.createElement(Icon.MessageBubble, null)),
+            React.createElement("div", { className: 'str-chat__chat-view__selector-button-text' }, "Threads"))));
+};
+ChatView.Channels = ChannelsView;
+ChatView.Threads = ThreadsView;
+ChatView.ThreadAdapter = ThreadAdapter;
+ChatView.Selector = ChatViewSelector;

package/dist/components/ChatView/index.d.ts

@@ -0,0 +1 @@
+export * from './ChatView';

package/dist/components/ChatView/index.js

@@ -0,0 +1 @@
+export * from './ChatView';

package/dist/components/DateSeparator/DateSeparator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type DateSeparatorProps = TimestampFormatterOptions & {
     /** The date to format */
     date: Date;

package/dist/components/Dialog/DialogAnchor.d.ts

@@ -0,0 +1,25 @@
+import { Placement } from '@popperjs/core';
+import React, { ComponentProps, PropsWithChildren } from 'react';
+export interface DialogAnchorOptions {
+    open: boolean;
+    placement: Placement;
+    referenceElement: HTMLElement | null;
+}
+export declare function useDialogAnchor<T extends HTMLElement>({ open, placement, referenceElement, }: DialogAnchorOptions): {
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    setPopperElement: React.Dispatch<React.SetStateAction<T | null>>;
+    styles: {
+        [key: string]: React.CSSProperties;
+    };
+};
+type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
+    id: string;
+    focus?: boolean;
+    trapFocus?: boolean;
+} & ComponentProps<'div'>;
+export declare const DialogAnchor: ({ children, className, focus, id, placement, referenceElement, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;
+export {};