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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'>;
+/**
+ * TODO:
+ * - maybe hover state? ask design
+ */
+export declare const attachmentTypeIconMap: {
+    readonly audio: "🔈";
+    readonly file: "📄";
+    readonly image: "📷";
+    readonly video: "🎥";
+    readonly voiceRecording: "🎙️";
+};
+export declare const ThreadListItemUI: (props: ThreadListItemUIProps) => React.JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+export declare const UnreadCountBadge: ({ children, count, position, }: PropsWithChildren<{
+    count: number;
+    position?: 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
+}>) => React.JSX.Element;

package/dist/components/Threads/UnreadCountBadge.js

@@ -0,0 +1,5 @@
+import clsx from 'clsx';
+import React from 'react';
+export const UnreadCountBadge = ({ children, count, position, }) => (React.createElement("div", { className: 'str-chat__unread-count-badge-container' },
+    children,
+    count > 0 && (React.createElement("div", { className: clsx('str-chat__unread-count-badge', position && `str-chat__unread-count-badge--${position}`) }, count))));

package/dist/components/Threads/hooks/useThreadManagerState.d.ts

@@ -0,0 +1,2 @@
+import { ThreadManagerState } from 'stream-chat';
+export declare const useThreadManagerState: <T extends readonly unknown[]>(selector: (nextValue: ThreadManagerState) => T) => T;

package/dist/components/Threads/hooks/useThreadManagerState.js

@@ -0,0 +1,6 @@
+import { useChatContext } from 'context';
+import { useStateStore } from '../../../store';
+export const useThreadManagerState = (selector) => {
+    const { client } = useChatContext();
+    return useStateStore(client.threads.state, selector);
+};

package/dist/components/Threads/hooks/useThreadState.d.ts

@@ -0,0 +1,5 @@
+import { ThreadState } from 'stream-chat';
+/**
+ * @description returns thread state, prioritizes `ThreadListItemContext` falls back to `ThreadContext` if not former is not present
+ */
+export declare const useThreadState: <T extends readonly unknown[]>(selector: (nextValue: ThreadState) => T) => T | undefined;

package/dist/components/Threads/hooks/useThreadState.js

@@ -0,0 +1,11 @@
+import { useThreadListItemContext } from '../ThreadList';
+import { useThreadContext } from '../ThreadContext';
+import { useStateStore } from '../../../store/';
+/**
+ * @description returns thread state, prioritizes `ThreadListItemContext` falls back to `ThreadContext` if not former is not present
+ */
+export const useThreadState = (selector) => {
+    const listItemThread = useThreadListItemContext();
+    const thread = useThreadContext();
+    return useStateStore(listItemThread?.state ?? thread?.state, selector);
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+export declare const Icon: {
+    MessageBubble: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
+    MessageBubbleEmpty: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
+    Reload: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
+    User: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
+};

package/dist/components/Threads/icons.js

@@ -0,0 +1,13 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+// TODO: unify icons across SDK
+export const Icon = {
+    MessageBubble: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--message-bubble', fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg', ...props },
+        React.createElement("path", { d: 'M1.66659 1.66665H12.3333V9.66665H2.44659L1.66659 10.4466V1.66665ZM1.66659 0.333313C0.933252 0.333313 0.339919 0.933313 0.339919 1.66665L0.333252 13.6666L2.99992 11H12.3333C13.0666 11 13.6666 10.4 13.6666 9.66665V1.66665C13.6666 0.933313 13.0666 0.333313 12.3333 0.333313H1.66659ZM2.99992 6.99998H10.9999V8.33331H2.99992V6.99998ZM2.99992 4.99998H10.9999V6.33331H2.99992V4.99998ZM2.99992 2.99998H10.9999V4.33331H2.99992V2.99998Z', fill: 'currentColor' }))),
+    MessageBubbleEmpty: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--message-bubble-empty', fill: 'none', height: '20', viewBox: '0 0 20 20', width: '20', xmlns: 'http://www.w3.org/2000/svg', ...props },
+        React.createElement("path", { d: 'M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z', fill: 'currentColor' }))),
+    Reload: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--reload', fill: 'none', height: '22', viewBox: '0 0 16 22', width: '16', xmlns: 'http://www.w3.org/2000/svg', ...props },
+        React.createElement("path", { d: 'M8 3V0L4 4L8 8V5C11.31 5 14 7.69 14 11C14 12.01 13.75 12.97 13.3 13.8L14.76 15.26C15.54 14.03 16 12.57 16 11C16 6.58 12.42 3 8 3ZM8 17C4.69 17 2 14.31 2 11C2 9.99 2.25 9.03 2.7 8.2L1.24 6.74C0.46 7.97 0 9.43 0 11C0 15.42 3.58 19 8 19V22L12 18L8 14V17Z', fill: 'currentColor' }))),
+    User: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--user', fill: 'none', height: '16', viewBox: '0 0 16 16', width: '16', xmlns: 'http://www.w3.org/2000/svg', ...props },
+        React.createElement("path", { d: 'M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z', fill: 'currentColor' }))),
+};

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

@@ -0,0 +1,2 @@
+export * from './ThreadContext';
+export * from './ThreadList';

package/dist/components/Threads/index.js

@@ -0,0 +1,2 @@
+export * from './ThreadContext';
+export * from './ThreadList';

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './Chat';
 export * from './ChatAutoComplete';
 export * from './CommandItem';
 export * from './DateSeparator';
+export * from './Dialog';
 export * from './EmoticonItem';
 export * from './EmptyStateIndicator';
 export * from './EventComponent';
@@ -31,5 +32,7 @@ export * from './Tooltip';
 export * from './TypingIndicator';
 export * from './UserItem';
 export * from './Window';
+export * from './Threads';
+export * from './ChatView';
 export { UploadButton } from './ReactFileUtilities';
 export type { UploadButtonProps } from './ReactFileUtilities';

package/dist/components/index.js

@@ -10,6 +10,7 @@ export * from './Chat';
 export * from './ChatAutoComplete';
 export * from './CommandItem';
 export * from './DateSeparator';
+export * from './Dialog';
 export * from './EmoticonItem';
 export * from './EmptyStateIndicator';
 export * from './EventComponent';
@@ -31,4 +32,6 @@ export * from './Tooltip';
 export * from './TypingIndicator';
 export * from './UserItem';
 export * from './Window';
+export * from './Threads';
+export * from './ChatView';
 export { UploadButton } from './ReactFileUtilities';

package/dist/context/ComponentContext.d.ts

@@ -1,96 +1,120 @@
 import React, { PropsWithChildren } from 'react';
-import type { AttachmentProps } from '../components/Attachment/Attachment';
-import type { AvatarProps } from '../components/Avatar/Avatar';
-import type { DateSeparatorProps } from '../components/DateSeparator/DateSeparator';
-import type { EmptyStateIndicatorProps } from '../components/EmptyStateIndicator/EmptyStateIndicator';
-import type { EventComponentProps } from '../components/EventComponent/EventComponent';
-import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
-import type { FixedHeightMessageProps } from '../components/Message/FixedHeightMessage';
-import type { MessageProps, MessageUIComponentProps, PinIndicatorProps } from '../components/Message/types';
-import type { MessageDeletedProps } from '../components/Message/MessageDeleted';
-import type { GiphyPreviewMessageProps } from '../components/MessageList/GiphyPreviewMessage';
-import type { MessageListNotificationsProps } from '../components/MessageList/MessageListNotifications';
-import type { MessageNotificationProps } from '../components/MessageList/MessageNotification';
-import type { MessageOptionsProps } from '../components/Message/MessageOptions';
-import type { EmojiSearchIndex, MessageInputProps } from '../components/MessageInput/MessageInput';
-import type { QuotedMessagePreviewProps } from '../components/MessageInput/QuotedMessagePreview';
-import type { MessageRepliesCountButtonProps } from '../components/Message/MessageRepliesCountButton';
-import type { MessageStatusProps } from '../components/Message/MessageStatus';
-import type { MessageTimestampProps } from '../components/Message/MessageTimestamp';
-import type { ModalGalleryProps } from '../components/Gallery/ModalGallery';
-import type { ReactionSelectorProps } from '../components/Reactions/ReactionSelector';
-import type { ReactionsListProps } from '../components/Reactions/ReactionsList';
-import type { SuggestionItemProps, SuggestionListProps } from '../components/ChatAutoComplete/ChatAutoComplete';
-import { UnreadMessagesSeparatorProps } from '../components/MessageList/UnreadMessagesSeparator';
-import type { ThreadHeaderProps } from '../components/Thread/ThreadHeader';
-import type { TypingIndicatorProps } from '../components/TypingIndicator/TypingIndicator';
-import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../types/types';
-import type { RecordingPermissionDeniedNotificationProps } from '../components';
 import { BaseImageProps, CooldownTimerProps, CustomMessageActionsListProps, StartRecordingAudioButtonProps } from '../components';
-import type { AttachmentPreviewListProps } from '../components/MessageInput';
-import type { LinkPreviewListProps } from '../components/MessageInput/LinkPreviewList';
-import type { ReactionOptions } from '../components/Reactions/reactionOptions';
+import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { MessageBouncePromptProps } from '../components/MessageBounce';
-import type { UnreadMessagesNotificationProps } from '../components/MessageList/UnreadMessagesNotification';
-import type { SendButtonProps } from '../components/MessageInput/SendButton';
 import type { TimestampProps } from '../components/Message/Timestamp';
+import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
-    Attachment: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
-    DateSeparator: React.ComponentType<DateSeparatorProps>;
-    Message: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
-    MessageSystem: React.ComponentType<EventComponentProps<StreamChatGenerics>>;
-    reactionOptions: ReactionOptions;
-    UnreadMessagesSeparator: React.ComponentType<UnreadMessagesSeparatorProps>;
+    /** 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?: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<AttachmentPreviewListProps>;
+    /** 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?: React.ComponentType;
+    /** 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?: React.ComponentType<SuggestionItemProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<SuggestionListProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<AvatarProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<BaseImageProps>;
+    /** 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?: React.ComponentType<CooldownTimerProps>;
+    /** 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?: React.ComponentType<CustomMessageActionsListProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<DateSeparatorProps>;
+    /** 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?: React.ComponentType<MessageInputProps<StreamChatGenerics>>;
+    /** Custom UI component for rendering button with emoji picker in MessageInput */
     EmojiPicker?: React.ComponentType;
+    /** 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?: 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?: React.ComponentType<EmptyStateIndicatorProps>;
+    /** 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?: React.ComponentType;
+    /** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */
     GiphyPreviewMessage?: React.ComponentType<GiphyPreviewMessageProps<StreamChatGenerics>>;
+    /** Custom UI component to render at the top of the `MessageList` */
     HeaderComponent?: React.ComponentType;
+    /** 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?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
+    /** Custom component to render link previews in message input **/
     LinkPreviewList?: React.ComponentType<LinkPreviewListProps>;
+    /** 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?: React.ComponentType<LoadingIndicatorProps>;
+    /** 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?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<MessageBouncePromptProps>;
+    /** 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?: React.ComponentType<MessageDeletedProps<StreamChatGenerics>>;
+    MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
+    /** 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?: React.ComponentType<MessageListNotificationsProps>;
+    /** 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?: React.ComponentType<MessageNotificationProps>;
+    /** 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?: React.ComponentType<MessageOptionsProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<MessageRepliesCountButtonProps>;
+    /** 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?: React.ComponentType<MessageStatusProps>;
+    /** 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?: React.ComponentType<EventComponentProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<MessageTimestampProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<ModalGalleryProps>;
+    /** 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?: React.ComponentType<PinIndicatorProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType;
+    /** 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?: React.ComponentType<QuotedMessagePreviewProps<StreamChatGenerics>>;
+    /** 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?: React.ForwardRefExoticComponent<ReactionSelectorProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<ReactionsListProps<StreamChatGenerics>>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+    /** 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?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
+    /** 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?: React.ComponentType<StartRecordingAudioButtonProps>;
+    /** 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?: React.ComponentType<ThreadHeaderProps<StreamChatGenerics>>;
     ThreadInput?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
+    ThreadListEmptyPlaceholder?: React.ComponentType;
+    ThreadListItem?: React.ComponentType<ThreadListItemProps>;
+    ThreadListItemUI?: React.ComponentType<ThreadListItemUIProps>;
+    ThreadListLoadingIndicator?: React.ComponentType;
+    ThreadListUnseenThreadsBanner?: React.ComponentType;
+    /** 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?: React.ComponentType;
+    /** 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?: React.ComponentType<TimestampProps>;
+    /** 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?: React.ComponentType;
+    /** 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?: React.ComponentType<TypingIndicatorProps>;
+    /** 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?: React.ComponentType<UnreadMessagesSeparatorProps>;
+    /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: React.ComponentType<FixedHeightMessageProps<StreamChatGenerics>>;
 };
-export declare const ComponentContext: React.Context<ComponentContextValue<DefaultStreamChatGenerics, CustomTrigger> | undefined>;
+export declare const ComponentContext: React.Context<ComponentContextValue<DefaultStreamChatGenerics, CustomTrigger>>;
 export declare const ComponentProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>({ children, value, }: PropsWithChildren<{
     value: Partial<ComponentContextValue<StreamChatGenerics, V>>;
 }>) => React.JSX.Element;
-export declare const useComponentContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(componentName?: string) => ComponentContextValue<StreamChatGenerics, V>;
+export declare const useComponentContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(_componentName?: string) => ComponentContextValue<StreamChatGenerics, V>;
 /**
  * Typescript currently does not support partial inference, so if ComponentContext
  * typing is desired while using the HOC withComponentContext, the Props for the

package/dist/context/ComponentContext.js

@@ -1,14 +1,12 @@
 import React, { useContext } from 'react';
-export const ComponentContext = React.createContext(undefined);
+export const ComponentContext = React.createContext({});
 export const ComponentProvider = ({ children, value, }) => (React.createElement(ComponentContext.Provider, { value: value }, children));
-export const useComponentContext = (componentName) => {
-    const contextValue = useContext(ComponentContext);
-    if (!contextValue) {
-        console.warn(`The useComponentContext hook was called outside of the ComponentContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`);
-        return {};
-    }
-    return contextValue;
-};
+export const useComponentContext = (
+/**
+ * @deprecated
+ */
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+_componentName) => useContext(ComponentContext);
 /**
  * Typescript currently does not support partial inference, so if ComponentContext
  * typing is desired while using the HOC withComponentContext, the Props for the

package/dist/context/DialogManagerContext.d.ts

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from 'react';
+import { DialogManager } from '../components/Dialog/DialogManager';
+type DialogManagerProviderContextValue = {
+    dialogManager: DialogManager;
+};
+export declare const DialogManagerProvider: ({ children, id }: PropsWithChildren<{
+    id?: string;
+}>) => React.JSX.Element;
+export declare const useDialogManager: () => DialogManagerProviderContextValue;
+export {};

package/dist/context/DialogManagerContext.js

@@ -0,0 +1,14 @@
+import React, { useContext, useState } from 'react';
+import { DialogManager } from '../components/Dialog/DialogManager';
+import { DialogPortalDestination } from '../components/Dialog/DialogPortal';
+const DialogManagerProviderContext = React.createContext(undefined);
+export const DialogManagerProvider = ({ children, id }) => {
+    const [dialogManager] = useState(() => new DialogManager({ id }));
+    return (React.createElement(DialogManagerProviderContext.Provider, { value: { dialogManager } },
+        children,
+        React.createElement(DialogPortalDestination, null)));
+};
+export const useDialogManager = () => {
+    const value = useContext(DialogManagerProviderContext);
+    return value;
+};

package/dist/context/MessageContext.d.ts

@@ -50,10 +50,6 @@ export type MessageContextValue<StreamChatGenerics extends DefaultStreamChatGene
     handleRetry: ChannelActionContextValue<StreamChatGenerics>['retrySendMessage'];
     /** Function that returns whether the Message belongs to the current user */
     isMyMessage: () => boolean;
-    /** @deprecated will be removed in the next major release.
-     *  Whether sending reactions is enabled for the active channel.
-     */
-    isReactionEnabled: boolean;
     /** The message object */
     message: StreamMessage<StreamChatGenerics>;
     /** Indicates whether a message has not been read yet or has been marked unread */
@@ -62,22 +58,18 @@ export type MessageContextValue<StreamChatGenerics extends DefaultStreamChatGene
     onMentionsClickMessage: ReactEventHandler;
     /** Handler function for a hover event on an @mention in Message */
     onMentionsHoverMessage: ReactEventHandler;
-    /** Handler function for a click event on the reaction list */
-    onReactionListClick: ReactEventHandler;
     /** Handler function for a click event on the user that posted the Message */
     onUserClick: ReactEventHandler;
     /** Handler function for a hover event on the user that posted the Message */
     onUserHover: ReactEventHandler;
-    /** Ref to be placed on the reaction selector component */
-    reactionSelectorRef: React.MutableRefObject<HTMLDivElement | null>;
     /** Function to toggle the edit state on a Message */
     setEditingState: ReactEventHandler;
-    /** Whether or not to show reaction list details */
-    showDetailedReactions: boolean;
     /** Additional props for underlying MessageInput component, [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */
     additionalMessageInputProps?: MessageInputProps<StreamChatGenerics>;
     /** Call this function to keep message list scrolled to the bottom when the scroll height increases, e.g. an element appears below the last message (only used in the `VirtualizedMessageList`) */
     autoscrollToBottom?: () => void;
+    /** Message component configuration prop. If true, picking a reaction from the `ReactionSelector` component will close the selector */
+    closeReactionSelectorOnClick?: boolean;
     /** Object containing custom message actions and function handlers */
     customMessageActions?: CustomMessageActions<StreamChatGenerics>;
     /** If true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */
@@ -123,7 +115,7 @@ export declare const MessageContext: React.Context<MessageContextValue<DefaultSt
 export declare const MessageProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: PropsWithChildren<{
     value: MessageContextValue<StreamChatGenerics>;
 }>) => React.JSX.Element;
-export declare const useMessageContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(componentName?: string) => MessageContextValue<StreamChatGenerics>;
+export declare const useMessageContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(_componentName?: string) => MessageContextValue<StreamChatGenerics>;
 /**
  * Typescript currently does not support partial inference, so if MessageContext
  * typing is desired while using the HOC withMessageContext, the Props for the

package/dist/context/MessageContext.js

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 export const MessageContext = React.createContext(undefined);
 export const MessageProvider = ({ children, value, }) => (React.createElement(MessageContext.Provider, { value: value }, children));
-export const useMessageContext = (componentName) => {
+export const useMessageContext = (
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+_componentName) => {
     const contextValue = useContext(MessageContext);
     if (!contextValue) {
-        console.warn(`The useMessageContext hook was called outside of the MessageContext provider. Make sure this hook is called within the Message's UI component. The errored call is located in the ${componentName} component.`);
         return {};
     }
     return contextValue;