stream-chat-react 12.9.0 → 12.11.0

package/dist/components/ReactFileUtilities/UploadButton.js

@@ -14,7 +14,7 @@ export const FileInput = UploadButton;
 export const UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
     const { t } = useTranslationContext('UploadFileInput');
     const { acceptedFiles = [], multipleUploads } = useChannelStateContext('UploadFileInput');
-    const { isUploadEnabled, maxFilesLeft, uploadNewFiles, } = useMessageInputContext('UploadFileInput');
+    const { isUploadEnabled, maxFilesLeft, uploadNewFiles } = useMessageInputContext('UploadFileInput');
     const id = useMemo(() => nanoid(), []);
     const onFileChange = useCallback((files) => {
         uploadNewFiles(files);

package/dist/components/ReactFileUtilities/utils.js

@@ -74,7 +74,9 @@ async function getImageSource(fileLikes, src) {
     fileLikes.push(blob);
 }
 const extractImageSources = (s) => {
-    const imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');
+    const imageTags = new DOMParser()
+        .parseFromString(s, 'text/html')
+        .getElementsByTagName('img');
     return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
 };
 export const isBlobButNotFile = (obj) => obj instanceof Blob && !(obj instanceof File);

package/dist/components/Reactions/ReactionSelector.js

@@ -36,7 +36,9 @@ const UnMemoizedReactionSelector = (props) => {
             return;
         const tooltip = tooltipRef.current?.getBoundingClientRect();
         const target = targetRef.current?.getBoundingClientRect();
-        const container = isMutableRef(rootRef) ? rootRef.current?.getBoundingClientRect() : null;
+        const container = isMutableRef(rootRef)
+            ? rootRef.current?.getBoundingClientRect()
+            : null;
         if (!tooltip || !target || !container)
             return;
         const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 /**
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
  * cluttering the parent component.

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

@@ -1,9 +1,9 @@
 import React from 'react';
+import { MessageContextValue } from '../../context';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 import type { ReactionDetailsComparator, ReactionsComparator } from './types';
-import { MessageContextValue } from '../../context';
 export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
@@ -26,7 +26,7 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
     /** Comparator function to sort the list of reacted users
      * @deprecated use `reactionDetailsSort` instead
      */
-    sortReactionDetails?: ReactionDetailsComparator;
+    sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
     /** Comparator function to sort reactions, defaults to chronological order */
     sortReactions?: ReactionsComparator;
 };

package/dist/components/Reactions/ReactionsList.js

@@ -1,14 +1,17 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
+import { ReactionsListModal as DefaultReactionsListModal, } from './ReactionsListModal';
 import { useProcessReactions } from './hooks/useProcessReactions';
-import { ReactionsListModal } from './ReactionsListModal';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext, } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 const UnMemoizedReactionsList = (props) => {
-    const { handleFetchReactions, reactionDetailsSort, reverse = false, sortReactionDetails, ...rest } = props;
+    const { handleFetchReactions, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    reactionDetailsSort, reverse = false, sortReactionDetails, ...rest } = props;
     const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-    const [selectedReactionType, setSelectedReactionType,] = useState(null);
+    const [selectedReactionType, setSelectedReactionType] = useState(null);
     const { t } = useTranslationContext('ReactionsList');
+    const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
     const handleReactionButtonClick = (reactionType) => {
         if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
             return;

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

@@ -4,7 +4,7 @@ import { ModalProps } from '../Modal';
 import { MessageContextValue } from '../../context';
 import { DefaultStreamChatGenerics } from '../../types/types';
 import { ReactionSort } from 'stream-chat';
-type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
+export type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     reactions: ReactionSummary[];
     selectedReactionType: ReactionType<StreamChatGenerics>;
     onSelectedReactionTypeChange?: (reactionType: ReactionType<StreamChatGenerics>) => void;
@@ -13,4 +13,3 @@ type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGeneric
     sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
 };
 export declare function ReactionsListModal<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps<StreamChatGenerics>): React.JSX.Element;
-export {};

package/dist/components/Reactions/ReactionsListModal.js

@@ -12,7 +12,7 @@ export function ReactionsListModal({ handleFetchReactions, onSelectedReactionTyp
     const { reactionDetailsSort: contextReactionDetailsSort, sortReactionDetails: contextSortReactionDetails, } = useMessageContext('ReactionsListModal');
     const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
     const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
-    const { isLoading: areReactionsLoading, reactions: reactionDetails, } = useFetchReactions({
+    const { isLoading: areReactionsLoading, reactions: reactionDetails } = useFetchReactions({
         handleFetchReactions,
         reactionType: selectedReactionType,
         shouldFetch: modalProps.open,

package/dist/components/Reactions/SpriteImage.js

@@ -15,8 +15,12 @@ export const SpriteImage = ({ columns, fallback, height, position, rows, spriteU
             '--str-chat__sprite-image-resize-ratio-y': 'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))',
             '--str-chat__sprite-item-height': `${spriteHeight / rows}`,
             '--str-chat__sprite-item-width': `${spriteWidth / columns}`,
-            ...(Number.isFinite(height) ? { '--str-chat__sprite-image-height': `${height}px` } : {}),
-            ...(Number.isFinite(width) ? { '--str-chat__sprite-image-width': `${width}px` } : {}),
+            ...(Number.isFinite(height)
+                ? { '--str-chat__sprite-image-height': `${height}px` }
+                : {}),
+            ...(Number.isFinite(width)
+                ? { '--str-chat__sprite-image-width': `${width}px` }
+                : {}),
             backgroundImage: `url('${spriteUrl}')`,
             backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
             backgroundSize: `${columns * 100}% ${rows * 100}%`,

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMessageContext } from '../../../context';
 export function useFetchReactions(options) {
-    const { handleFetchReactions: contextHandleFetchReactions, } = useMessageContext('useFetchReactions');
+    const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext('useFetchReactions');
     const [reactions, setReactions] = useState([]);
     const { handleFetchReactions: propHandleFetchReactions, reactionType, shouldFetch, sort, } = options;
     const [isLoading, setIsLoading] = useState(shouldFetch);

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

@@ -10,7 +10,7 @@ export const defaultReactionsSort = (a, b) => {
 export const useProcessReactions = (params) => {
     const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reactions: propReactions, sortReactions: propSortReactions, } = params;
     const { message, sortReactions: contextSortReactions } = useMessageContext('useProcessReactions');
-    const { reactionOptions: contextReactionOptions = defaultReactionOptions, } = useComponentContext('useProcessReactions');
+    const { reactionOptions: contextReactionOptions = defaultReactionOptions } = useComponentContext('useProcessReactions');
     const reactionOptions = propReactionOptions ?? contextReactionOptions;
     const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
     const latestReactions = propReactions || message.latest_reactions;

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

@@ -1,5 +1,6 @@
 export * from './ReactionSelector';
 export * from './ReactionsList';
+export * from './ReactionsListModal';
 export * from './SimpleReactionsList';
 export * from './SpriteImage';
 export * from './StreamEmoji';

package/dist/components/Reactions/index.js

@@ -1,5 +1,6 @@
 export * from './ReactionSelector';
 export * from './ReactionsList';
+export * from './ReactionsListModal';
 export * from './SimpleReactionsList';
 export * from './SpriteImage';
 export * from './StreamEmoji';

package/dist/components/Reactions/reactionOptions.js

@@ -1,11 +1,26 @@
 /* eslint-disable sort-keys */
-/* eslint-disable react/display-name */
 import React from 'react';
 import { StreamEmoji } from './StreamEmoji';
 export const defaultReactionOptions = [
-    { type: 'haha', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }), name: 'Joy' },
-    { type: 'like', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }), name: 'Thumbs up' },
-    { type: 'love', Component: () => React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }), name: 'Heart' },
+    {
+        type: 'haha',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }),
+        name: 'Joy',
+    },
+    {
+        type: 'like',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }),
+        name: 'Thumbs up',
+    },
+    {
+        type: 'love',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }),
+        name: 'Heart',
+    },
     { type: 'sad', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }), name: 'Sad' },
-    { type: 'wow', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }), name: 'Astonished' },
+    {
+        type: 'wow',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }),
+        name: 'Astonished',
+    },
 ];

package/dist/components/Thread/Thread.js

@@ -34,7 +34,7 @@ const ThreadInner = (props) => {
     const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll, } = useChannelStateContext('Thread');
     const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
     const { customClasses } = useChatContext('Thread');
-    const { ThreadInput: ContextInput, Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, VirtualMessage, } = useComponentContext('Thread');
+    const { Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, ThreadInput: ContextInput, VirtualMessage, } = useComponentContext('Thread');
     const ThreadInput = PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
     const ThreadMessage = PropMessage || additionalMessageListProps?.Message;
     const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
@@ -45,7 +45,6 @@ const ThreadInner = (props) => {
             // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
             loadMoreThread();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [thread, loadMoreThread]);
     const threadProps = threadInstance
         ? {
@@ -71,6 +70,8 @@ const ThreadInner = (props) => {
     const head = (React.createElement(ThreadHead, { key: messageAsThread.id, message: messageAsThread, Message: MessageUIComponent, ...additionalParentMessageProps }));
     return (React.createElement("div", { className: threadClass },
         React.createElement(ThreadHeader, { closeThread: closeThread, thread: messageAsThread }),
-        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps) }),
+        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized
+                ? additionalVirtualizedMessageListProps
+                : additionalMessageListProps) }),
         React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, isThreadInput: true, parent: thread ?? parentMessage, publishTypingEvent: false, ...additionalMessageInputProps })));
 };

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

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

package/dist/components/Threads/ThreadContext.js

@@ -5,5 +5,5 @@ export const useThreadContext = () => {
     const thread = useContext(ThreadContext);
     return thread ?? undefined;
 };
-export const ThreadProvider = ({ children, thread }) => (React.createElement(ThreadContext.Provider, { value: thread },
+export const ThreadProvider = ({ children, thread, }) => (React.createElement(ThreadContext.Provider, { value: thread },
     React.createElement(Channel, { channel: thread?.channel }, children)));

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

@@ -29,7 +29,7 @@ export const useThreadList = () => {
 };
 export const ThreadList = ({ virtuosoProps }) => {
     const { client } = useChatContext();
-    const { ThreadListItem = DefaultThreadListItem, ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
+    const { ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListItem = DefaultThreadListItem, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
     const { threads } = useStateStore(client.threads.state, selector);
     useThreadList();
     return (React.createElement("div", { className: 'str-chat__thread-list-container' },

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

@@ -6,4 +6,4 @@ export type ThreadListItemProps = {
     threadListItemUIProps?: ThreadListItemUIProps;
 };
 export declare const useThreadListItemContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
-export declare const ThreadListItem: ({ thread, threadListItemUIProps }: ThreadListItemProps) => React.JSX.Element;
+export declare const ThreadListItem: ({ thread, threadListItemUIProps, }: ThreadListItemProps) => React.JSX.Element;

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

@@ -3,7 +3,7 @@ import { useComponentContext } from '../../../context';
 import { ThreadListItemUI as DefaultThreadListItemUI } from './ThreadListItemUI';
 const ThreadListItemContext = createContext(undefined);
 export const useThreadListItemContext = () => useContext(ThreadListItemContext);
-export const ThreadListItem = ({ thread, threadListItemUIProps }) => {
+export const ThreadListItem = ({ thread, threadListItemUIProps, }) => {
     const { ThreadListItemUI = DefaultThreadListItemUI } = useComponentContext();
     return (React.createElement(ThreadListItemContext.Provider, { value: thread },
         React.createElement(ThreadListItemUI, { ...threadListItemUIProps })));

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

@@ -26,8 +26,7 @@ const getTitleFromMessage = ({ currentUserId, message, }) => {
     let attachmentIcon = '';
     if (attachment) {
         attachmentIcon +=
-            attachmentTypeIconMap[attachment.type ?? 'file'] ??
-                attachmentTypeIconMap.file;
+            attachmentTypeIconMap[attachment.type ?? 'file'] ?? attachmentTypeIconMap.file;
     }
     const messageBelongsToCurrentUser = message?.user?.id === currentUserId;
     if (message?.deleted_at && message.parent_id)
@@ -69,7 +68,10 @@ export const ThreadListItemUI = (props) => {
                 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 })),
+                        : 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/icons.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 // TODO: unify icons across SDK
 export const Icon = {

package/dist/components/Tooltip/Tooltip.d.ts

@@ -11,4 +11,4 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
     /** Tells component whether to render its contents */
     visible?: boolean;
 }>;
-export declare const PopperTooltip: <T extends HTMLElement>({ children, offset, referenceElement, placement, visible, }: PopperTooltipProps<T>) => React.JSX.Element | null;
+export declare const PopperTooltip: <T extends HTMLElement>({ children, offset, placement, referenceElement, visible, }: PopperTooltipProps<T>) => React.JSX.Element | null;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 export const Tooltip = ({ children, ...rest }) => (React.createElement("div", { className: 'str-chat__tooltip', ...rest }, children));
-export const PopperTooltip = ({ children, offset = [0, 10], referenceElement, placement = 'top', visible = false, }) => {
+export const PopperTooltip = ({ children, offset = [0, 10], placement = 'top', referenceElement, visible = false, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const { attributes, styles } = usePopper(referenceElement, popperElement, {
         modifiers: [

package/dist/context/ComponentContext.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
@@ -105,6 +105,8 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     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>>;
+    /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
+    ReactionsListModal?: React.ComponentType<ReactionsListModalProps<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>>;

package/dist/context/ComponentContext.js

@@ -5,7 +5,7 @@ export const useComponentContext = (
 /**
  * @deprecated
  */
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 _componentName) => useContext(ComponentContext);
 /**
  * Typescript currently does not support partial inference, so if ComponentContext

package/dist/context/DialogManagerContext.d.ts

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

package/dist/context/DialogManagerContext.js

@@ -2,7 +2,7 @@ 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 }) => {
+export const DialogManagerProvider = ({ children, id, }) => {
     const [dialogManager] = useState(() => new DialogManager({ id }));
     return (React.createElement(DialogManagerProviderContext.Provider, { value: { dialogManager } },
         children,

package/dist/context/MessageBounceContext.js

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, } from 'react';
 import { useMessageContext } from './MessageContext';
 import { useChannelActionContext } from './ChannelActionContext';
 import { isMessageBounced } from '../components';
@@ -32,5 +32,5 @@ export function MessageBounceProvider({ children }) {
         handleRetry,
         message,
     }), [handleDelete, handleEdit, handleRetry, message]);
-    return React.createElement(MessageBounceContext.Provider, { value: value }, children);
+    return (React.createElement(MessageBounceContext.Provider, { value: value }, children));
 }

package/dist/context/MessageContext.js

@@ -2,7 +2,7 @@ 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 = (
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 _componentName) => {
     const contextValue = useContext(MessageContext);
     if (!contextValue) {

package/dist/context/VirtualizedMessageListContext.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+export type VirtualizedMessageListContextValue = {
+    /** Function that scrolls the list to the bottom. */
+    scrollToBottom: () => void;
+};
+export declare const VirtualizedMessageListContext: React.Context<VirtualizedMessageListContextValue | undefined>;
+/**
+ * Context provider for components rendered within the `VirtualizedMessageList`
+ */
+export declare const VirtualizedMessageListContextProvider: ({ children, value, }: PropsWithChildren<{
+    value: VirtualizedMessageListContextValue;
+}>) => React.JSX.Element;
+export declare const useVirtualizedMessageListContext: () => VirtualizedMessageListContextValue;

package/dist/context/VirtualizedMessageListContext.js

@@ -0,0 +1,7 @@
+import React, { createContext, useContext } from 'react';
+export const VirtualizedMessageListContext = createContext(undefined);
+/**
+ * Context provider for components rendered within the `VirtualizedMessageList`
+ */
+export const VirtualizedMessageListContextProvider = ({ children, value, }) => (React.createElement(VirtualizedMessageListContext.Provider, { value: value }, children));
+export const useVirtualizedMessageListContext = () => useContext(VirtualizedMessageListContext);

package/dist/context/WithComponents.js

@@ -3,5 +3,5 @@ import { ComponentContext } from './ComponentContext';
 export function WithComponents({ children, overrides, }) {
     const parentOverrides = useContext(ComponentContext);
     const actualOverrides = { ...parentOverrides, ...overrides };
-    return React.createElement(ComponentContext.Provider, { value: actualOverrides }, children);
+    return (React.createElement(ComponentContext.Provider, { value: actualOverrides }, children));
 }