stream-chat-react 12.0.0-rc.9 → 12.1.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,114 +2,11 @@ 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 type { UnreadMessagesNotificationProps } from '../MessageList';
-import type { MessageProps } from '../Message/types';
-import type { MessageInputProps } from '../MessageInput/MessageInput';
+import { ComponentContextValue, StreamMessage } from '../../context';
+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';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
-    Attachment?: ComponentContextValue<StreamChatGenerics>['Attachment'];
-    /** Custom UI component to display an attachment previews in MessageInput, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) */
-    AttachmentPreviewList?: ComponentContextValue<StreamChatGenerics>['AttachmentPreviewList'];
-    /** Custom UI component to display AudioRecorder in MessageInput, defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) */
-    AudioRecorder?: ComponentContextValue<StreamChatGenerics>['AudioRecorder'];
-    /** Optional UI component to override the default suggestion Item component, defaults to and accepts same props as: [Item](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Item.js) */
-    AutocompleteSuggestionItem?: ComponentContextValue<StreamChatGenerics>['AutocompleteSuggestionItem'];
-    /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
-    AutocompleteSuggestionList?: ComponentContextValue<StreamChatGenerics>['AutocompleteSuggestionList'];
-    /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
-    Avatar?: ComponentContextValue<StreamChatGenerics>['Avatar'];
-    /** Custom UI component to display <img/> elements resp. a fallback in case of load error, defaults to and accepts same props as: [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) */
-    BaseImage?: ComponentContextValue<StreamChatGenerics>['BaseImage'];
-    /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */
-    CooldownTimer?: ComponentContextValue<StreamChatGenerics>['CooldownTimer'];
-    /** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */
-    CustomMessageActionsList?: ComponentContextValue<StreamChatGenerics>['CustomMessageActionsList'];
-    /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */
-    DateSeparator?: ComponentContextValue<StreamChatGenerics>['DateSeparator'];
-    /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
-    EditMessageInput?: ComponentContextValue<StreamChatGenerics>['EditMessageInput'];
-    /** Custom UI component for rendering button with emoji picker in MessageInput */
-    EmojiPicker?: ComponentContextValue<StreamChatGenerics>['EmojiPicker'];
-    /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
-    emojiSearchIndex?: ComponentContextValue<StreamChatGenerics>['emojiSearchIndex'];
-    /** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)  */
-    EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];
-    /** Custom UI component for file upload icon, defaults to and accepts same props as: [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
-    FileUploadIcon?: ComponentContextValue<StreamChatGenerics>['FileUploadIcon'];
-    /** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */
-    GiphyPreviewMessage?: ComponentContextValue<StreamChatGenerics>['GiphyPreviewMessage'];
-    /** Custom UI component to render at the top of the `MessageList` */
-    HeaderComponent?: ComponentContextValue<StreamChatGenerics>['HeaderComponent'];
-    /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
-    Input?: ComponentContextValue<StreamChatGenerics>['Input'];
-    /** Custom component to render link previews in message input **/
-    LinkPreviewList?: ComponentContextValue<StreamChatGenerics>['LinkPreviewList'];
-    /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
-    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
-    /** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
-    LoadingIndicator?: ComponentContextValue<StreamChatGenerics>['LoadingIndicator'];
-    /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
-    Message?: ComponentContextValue<StreamChatGenerics>['Message'];
-    /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
-    MessageBouncePrompt?: ComponentContextValue<StreamChatGenerics>['MessageBouncePrompt'];
-    /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
-    MessageDeleted?: ComponentContextValue<StreamChatGenerics>['MessageDeleted'];
-    /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */
-    MessageListNotifications?: ComponentContextValue<StreamChatGenerics>['MessageListNotifications'];
-    /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */
-    MessageNotification?: ComponentContextValue<StreamChatGenerics>['MessageNotification'];
-    /** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */
-    MessageOptions?: ComponentContextValue<StreamChatGenerics>['MessageOptions'];
-    /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */
-    MessageRepliesCountButton?: ComponentContextValue<StreamChatGenerics>['MessageRepliesCountButton'];
-    /** Custom UI component to display message delivery status, defaults to and accepts same props as: [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) */
-    MessageStatus?: ComponentContextValue<StreamChatGenerics>['MessageStatus'];
-    /** Custom UI component to display system messages, defaults to and accepts same props as: [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) */
-    MessageSystem?: ComponentContextValue<StreamChatGenerics>['MessageSystem'];
-    /** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
-    MessageTimestamp?: ComponentContextValue<StreamChatGenerics>['MessageTimestamp'];
-    /** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
-    ModalGallery?: ComponentContextValue<StreamChatGenerics>['ModalGallery'];
-    /** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) */
-    PinIndicator?: ComponentContextValue<StreamChatGenerics>['PinIndicator'];
-    /** Custom UI component to override quoted message UI on a sent message, defaults to and accepts same props as: [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) */
-    QuotedMessage?: ComponentContextValue<StreamChatGenerics>['QuotedMessage'];
-    /** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */
-    QuotedMessagePreview?: ComponentContextValue<StreamChatGenerics>['QuotedMessagePreview'];
-    /** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */
-    reactionOptions?: ReactionOptions;
-    /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
-    ReactionSelector?: ComponentContextValue<StreamChatGenerics>['ReactionSelector'];
-    /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
-    ReactionsList?: ComponentContextValue<StreamChatGenerics>['ReactionsList'];
-    /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
-    SendButton?: ComponentContextValue<StreamChatGenerics>['SendButton'];
-    /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */
-    StartRecordingAudioButton?: ComponentContextValue<StreamChatGenerics>['StartRecordingAudioButton'];
-    /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
-    ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
-    /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
-    ThreadHeader?: ComponentContextValue<StreamChatGenerics>['ThreadHeader'];
-    /** Custom UI component to display the start of a threaded `MessageList`, defaults to and accepts same props as: [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
-    ThreadStart?: ComponentContextValue<StreamChatGenerics>['ThreadStart'];
-    /** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */
-    Timestamp?: ComponentContextValue<StreamChatGenerics>['Timestamp'];
-    /** Optional context provider that lets you override the default autocomplete triggers, defaults to: [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) */
-    TriggerProvider?: ComponentContextValue<StreamChatGenerics>['TriggerProvider'];
-    /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
-    TypingIndicator?: ComponentContextValue<StreamChatGenerics>['TypingIndicator'];
-    /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
-    UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
-    /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
-    UnreadMessagesSeparator?: ComponentContextValue<StreamChatGenerics>['UnreadMessagesSeparator'];
-    /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
-    VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
-};
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'QuotedMessage' | 'QuotedMessagePreview' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage'>;
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];
@@ -154,6 +51,8 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
      * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
      */
     initializeOnMount?: boolean;
+    /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
+    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
     /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */
     markReadOnMount?: boolean;
     /** Maximum number of attachments allowed per message */

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;