stream-chat-react 12.0.0-rc.8 → 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();
@@ -68,7 +60,11 @@ const ChannelInner = (props) => {
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
-    { ...initialState, loading: !channel.initialized });
+    {
+        ...initialState,
+        hasMore: channel.state.messagePagination.hasPrev,
+        loading: !channel.initialized,
+    });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
     const lastRead = useRef();
@@ -184,7 +180,6 @@ const ChannelInner = (props) => {
     useLayoutEffect(() => {
         let errored = false;
         let done = false;
-        let channelInitializedExternally = true;
         (async () => {
             if (!channel.initialized && initializeOnMount) {
                 try {
@@ -210,7 +205,6 @@ const ChannelInner = (props) => {
                     await getChannel({ channel, client, members, options: channelQueryOptions });
                     const config = channel.getConfig();
                     setChannelConfig(config);
-                    channelInitializedExternally = false;
                 }
                 catch (e) {
                     dispatch({ error: e, type: 'setError' });
@@ -222,8 +216,7 @@ const ChannelInner = (props) => {
             if (!errored) {
                 dispatch({
                     channel,
-                    hasMore: channelInitializedExternally ||
-                        hasMoreMessagesProbably(channel.state.messages.length, channelQueryOptions.messages.limit),
+                    hasMore: channel.state.messagePagination.hasPrev,
                     type: 'initStateFromChannel',
                 });
                 if (client.user?.id && channel.state.read[client.user.id]) {
@@ -283,7 +276,7 @@ const ChannelInner = (props) => {
         dispatch({ hasMore, messages, type: 'loadMoreFinished' });
     }, 2000, { leading: true, trailing: true }), []);
     const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMore)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev)
             return 0;
         // prevent duplicate loading events...
         const oldestMessage = state?.messages?.[0];
@@ -305,12 +298,11 @@ const ChannelInner = (props) => {
             dispatch({ loadingMore: false, type: 'setLoadingMore' });
             return 0;
         }
-        const hasMoreMessages = queryResponse.messages.length === perPage;
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         return queryResponse.messages.length;
     };
     const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMoreNewer)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasNext)
             return 0;
         const newestMessage = state?.messages?.[state?.messages?.length - 1];
         if (state.loadingMore || state.loadingMoreNewer)
@@ -330,9 +322,8 @@ const ChannelInner = (props) => {
             dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
             return 0;
         }
-        const hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
         dispatch({
-            hasMoreNewer: hasMoreNewerMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             messages: channel.state.messages,
             type: 'loadMoreNewerFinished',
         });
@@ -342,15 +333,9 @@ const ChannelInner = (props) => {
     const jumpToMessage = useCallback(async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
         dispatch({ loadingMore: true, type: 'setLoadingMore' });
         await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
-        /**
-         * if the message we are jumping to has less than half of the page size older messages,
-         * we have jumped to the beginning of the channel.
-         */
-        const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
-        const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: messageId,
             type: 'jumpToMessageFinished',
         });
@@ -364,9 +349,7 @@ const ChannelInner = (props) => {
     }, [channel, loadMoreFinished]);
     const jumpToLatestMessage = useCallback(async () => {
         await channel.state.loadMessageIntoState('latest');
-        // FIXME: we cannot rely on constant value 25 as the page size can be customized by integrators
-        const hasMoreOlder = channel.state.messages.length >= 25;
-        loadMoreFinished(hasMoreOlder, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
             type: 'jumpToLatestMessage',
         });
@@ -377,7 +360,6 @@ const ChannelInner = (props) => {
         let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
         let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
         let isInCurrentMessageSet = false;
-        let hasMoreMessages = true;
         if (firstUnreadMessageId) {
             const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
             isInCurrentMessageSet = result.index !== -1;
@@ -409,27 +391,25 @@ const ChannelInner = (props) => {
                 }
                 catch (e) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
                 if (!firstMessageWithCreationDate) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageTimestamp = new Date(firstMessageWithCreationDate.created_at).getTime();
                 if (lastReadTimestamp < firstMessageTimestamp) {
                     // whole channel is unread
                     firstUnreadMessageId = firstMessageWithCreationDate.id;
-                    hasMoreMessages = false;
                 }
                 else {
                     const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
                     lastReadMessageId = result.target?.id;
-                    hasMoreMessages = result.index >= Math.floor(queryMessageLimit / 2);
                 }
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
             }
         }
         if (!firstUnreadMessageId && !lastReadMessageId) {
@@ -446,14 +426,13 @@ const ChannelInner = (props) => {
                  * we have arrived to the oldest page of the channel
                  */
                 const indexOfTarget = channel.state.messages.findIndex((message) => message.id === targetId);
-                hasMoreMessages = indexOfTarget >= Math.floor(queryMessageLimit / 2);
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 firstUnreadMessageId =
                     firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
             }
             catch (e) {
                 addNotification(t('Failed to jump to the first unread message'), 'error');
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 return;
             }
         }
@@ -468,7 +447,7 @@ const ChannelInner = (props) => {
                 last_read_message_id: lastReadMessageId,
             });
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: firstUnreadMessageId,
             type: 'jumpToMessageFinished',
         });
@@ -578,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);
     };
@@ -735,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,
@@ -745,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,
@@ -756,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,
@@ -764,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,
@@ -782,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,
     });
@@ -806,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;