stream-chat-react 12.9.0 → 12.11.0

package/dist/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.js

@@ -8,13 +8,15 @@ export const UnsupportedAttachmentPreview = ({ attachment, handleRetry, removeAt
     return (React.createElement("div", { className: 'str-chat__attachment-preview-unsupported', "data-testid": 'attachment-preview-unknown' },
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id]) },
+        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
+                removeAttachments([attachment.localMetadata?.id]) },
             React.createElement(CloseIcon, null)),
         attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
             React.createElement("div", { className: 'str-chat__attachment-preview-title', title: title }, title),
-            attachment.localMetadata?.uploadState === 'finished' && !!attachment.asset_url && (React.createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank' },
+            attachment.localMetadata?.uploadState === 'finished' &&
+                !!attachment.asset_url && (React.createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank' },
                 React.createElement(DownloadIcon, null))),
             attachment.localMetadata?.uploadState === 'uploading' && (React.createElement(LoadingIndicatorIcon, { size: 17 })))));
 };

package/dist/components/MessageInput/AttachmentSelector.js

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';

package/dist/components/MessageInput/DefaultTriggerProvider.js

@@ -20,5 +20,5 @@ export const DefaultTriggerProvider = ({ children, }) => {
         ...currentValue,
         autocompleteTriggers: defaultAutocompleteTriggers,
     };
-    return React.createElement(MessageInputContextProvider, { value: newValue }, children);
+    return (React.createElement(MessageInputContextProvider, { value: newValue }, children));
 };

package/dist/components/MessageInput/DropzoneProvider.js

@@ -7,7 +7,7 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { MessageInputContextProvider, useMessageInputContext, } from '../../context/MessageInputContext';
 const DropzoneInner = ({ children, }) => {
     const { acceptedFiles, multipleUploads } = useChannelStateContext('DropzoneProvider');
-    const { cooldownRemaining, isUploadEnabled, maxFilesLeft, uploadNewFiles, } = useMessageInputContext('DropzoneProvider');
+    const { cooldownRemaining, isUploadEnabled, maxFilesLeft, uploadNewFiles } = useMessageInputContext('DropzoneProvider');
     return (React.createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads }, children));
 };
 export const DropzoneProvider = (props) => {

package/dist/components/MessageInput/MessageInput.js

@@ -5,7 +5,7 @@ import { useCooldownTimer } from './hooks/useCooldownTimer';
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageInputState } from './hooks/useMessageInputState';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useComponentContext } from '../../context/ComponentContext';
+import { useComponentContext, } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
 const MessageInputProvider = (props) => {

package/dist/components/MessageInput/MessageInputFlat.js

@@ -21,7 +21,7 @@ import { AIStates, useAIState } from '../AIStateIndicator';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
     const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
-    const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, CooldownTimer = DefaultCooldownTimer, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, EmojiPicker, } = useComponentContext('MessageInputFlat');
+    const { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
     const { channel } = useChatContext('MessageInputFlat');
@@ -76,7 +76,8 @@ export const MessageInputFlat = () => {
     const StopAIGenerationButton = StopAIGenerationButtonOverride === undefined
         ? DefaultStopAIGenerationButton
         : StopAIGenerationButtonOverride;
-    const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton;
+    const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) &&
+        !!StopAIGenerationButton;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ...getRootProps({ className: 'str-chat__message-input' }) },
             recordingEnabled &&
@@ -92,7 +93,7 @@ export const MessageInputFlat = () => {
             React.createElement("div", { className: 'str-chat__message-input-inner' },
                 React.createElement(AttachmentSelector, null),
                 React.createElement("div", { className: 'str-chat__message-textarea-container' },
-                    displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
+                    displayQuotedMessage && (React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage })),
                     isUploadEnabled &&
                         !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (React.createElement(AttachmentPreviewList, null)),
                     React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -17,7 +17,7 @@ export const QuotedMessagePreviewHeader = () => {
 };
 export const QuotedMessagePreview = ({ quotedMessage, }) => {
     const { client } = useChatContext();
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, } = useComponentContext('QuotedMessagePreview');
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
     const { userLanguage } = useTranslationContext('QuotedMessagePreview');
     const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
         quotedMessage.text;

package/dist/components/MessageInput/hooks/useAttachments.js

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { nanoid } from 'nanoid';
 import { checkUploadPermissions } from './utils';
 import { isLocalAttachment, isLocalImageAttachment } from '../../Attachment';
-import { createFileFromBlobs, generateFileName, isBlobButNotFile } from '../../ReactFileUtilities';
+import { createFileFromBlobs, generateFileName, isBlobButNotFile, } from '../../ReactFileUtilities';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useTranslationContext, } from '../../../context';
 const apiMaxNumberOfFiles = 10;
 // const isAudioFile = (file: FileLike) => file.type.includes('audio/');
@@ -109,7 +109,10 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             }
         }
         catch (error) {
-            let finalError = { message: t('Error uploading attachment'), name: 'Error' };
+            let finalError = {
+                message: t('Error uploading attachment'),
+                name: 'Error',
+            };
             if (typeof error.message === 'string') {
                 finalError = error;
             }
@@ -127,7 +130,10 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             };
             upsertAttachments([failedAttachment]);
             if (errorHandler) {
-                errorHandler(finalError, 'upload-attachment', { ...file, id: localMetadata.id });
+                errorHandler(finalError, 'upload-attachment', {
+                    ...file,
+                    id: localMetadata.id,
+                });
             }
             return failedAttachment;
         }
@@ -173,7 +179,9 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         upsertAttachments,
     ]);
     const uploadNewFiles = useCallback((files) => {
-        const filesToBeUploaded = noFiles ? Array.from(files).filter(isImageFile) : Array.from(files);
+        const filesToBeUploaded = noFiles
+            ? Array.from(files).filter(isImageFile)
+            : Array.from(files);
         filesToBeUploaded.slice(0, maxFilesLeft).forEach((fileLike) => {
             uploadAttachment({
                 localMetadata: {

package/dist/components/MessageInput/hooks/useLinkPreviews.js

@@ -102,6 +102,8 @@ export const useLinkPreviews = ({ debounceURLEnrichmentMs: debounceURLEnrichment
     return {
         cancelURLEnrichment,
         dismissLinkPreview,
-        findAndEnqueueURLsToEnrich: channelConfig?.url_enrichment && enrichURLForPreview ? findAndEnqueueURLsToEnrich : undefined,
+        findAndEnqueueURLsToEnrich: channelConfig?.url_enrichment && enrichURLForPreview
+            ? findAndEnqueueURLsToEnrich
+            : undefined,
     };
 };

package/dist/components/MessageInput/hooks/useMessageInputState.js

@@ -1,12 +1,12 @@
 import { useCallback, useReducer, useState } from 'react';
 import { nanoid } from 'nanoid';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChannelStateContext, } from '../../../context/ChannelStateContext';
 import { useAttachments } from './useAttachments';
 import { useLinkPreviews } from './useLinkPreviews';
 import { useMessageInputText } from './useMessageInputText';
 import { useSubmitHandler } from './useSubmitHandler';
 import { usePasteHandler } from './usePasteHandler';
-import { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';
+import { useMediaRecorder, } from '../../MediaRecorder/hooks/useMediaRecorder';
 import { LinkPreviewState, SetLinkPreviewMode } from '../types';
 import { mergeDeep } from '../../../utils/mergeDeep';
 const makeEmptyMessageInputState = () => ({
@@ -59,7 +59,8 @@ const messageInputReducer = (state, action) => {
         case 'upsertAttachments': {
             const attachments = [...state.attachments];
             action.attachments.forEach((actionAttachment) => {
-                const attachmentIndex = state.attachments.findIndex((att) => att.localMetadata?.id && att.localMetadata?.id === actionAttachment.localMetadata?.id);
+                const attachmentIndex = state.attachments.findIndex((att) => att.localMetadata?.id &&
+                    att.localMetadata?.id === actionAttachment.localMetadata?.id);
                 if (attachmentIndex === -1) {
                     attachments.push(actionAttachment);
                 }

package/dist/components/MessageInput/hooks/useMessageInputText.d.ts

@@ -6,5 +6,5 @@ import type { EnrichURLsController } from './useLinkPreviews';
 export declare const useMessageInputText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>, state: MessageInputState<StreamChatGenerics>, dispatch: React.Dispatch<MessageInputReducerAction<StreamChatGenerics>>, findAndEnqueueURLsToEnrich?: EnrichURLsController['findAndEnqueueURLsToEnrich']) => {
     handleChange: import("react").ChangeEventHandler<HTMLTextAreaElement>;
     insertText: (textToInsert: string) => void;
-    textareaRef: import("react").MutableRefObject<HTMLTextAreaElement | undefined>;
+    textareaRef: import("react").RefObject<HTMLTextAreaElement | undefined>;
 };

package/dist/components/MessageInput/hooks/useMessageInputText.js

@@ -5,7 +5,7 @@ export const useMessageInputText = (props, state, dispatch, findAndEnqueueURLsTo
     const { channel } = useChannelStateContext('useMessageInputText');
     const { additionalTextareaProps, focus, parent, publishTypingEvent = true } = props;
     const { text } = state;
-    const textareaRef = useRef();
+    const textareaRef = useRef(undefined);
     // Focus
     useEffect(() => {
         if (focus && textareaRef.current) {
@@ -13,7 +13,7 @@ export const useMessageInputText = (props, state, dispatch, findAndEnqueueURLsTo
         }
     }, [focus]);
     // Text + cursor position
-    const newCursorPosition = useRef();
+    const newCursorPosition = useRef(undefined);
     const insertText = useCallback((textToInsert) => {
         const { maxLength } = additionalTextareaProps || {};
         if (!textareaRef.current) {
@@ -32,7 +32,9 @@ export const useMessageInputText = (props, state, dispatch, findAndEnqueueURLsTo
         newCursorPosition.current = selectionStart + textToInsert.length;
         dispatch({
             getNewText: (prevText) => {
-                const updatedText = prevText.slice(0, selectionStart) + textToInsert + prevText.slice(selectionEnd);
+                const updatedText = prevText.slice(0, selectionStart) +
+                    textToInsert +
+                    prevText.slice(selectionEnd);
                 if (maxLength && updatedText.length > maxLength) {
                     return updatedText.slice(0, maxLength);
                 }

package/dist/components/MessageInput/hooks/useSubmitHandler.js

@@ -4,7 +4,7 @@ import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 import { LinkPreviewState } from '../types';
 export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrichURLsController) => {
-    const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent } = props;
+    const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent, } = props;
     const { attachments, linkPreviews, mentioned_users, text } = state;
     const { cancelURLEnrichment, findAndEnqueueURLsToEnrich } = enrichURLsController;
     const { channel } = useChannelStateContext('useSubmitHandler');
@@ -42,6 +42,7 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
             .filter((att) => att.localMetadata?.uploadState !== 'failed' ||
             (findAndEnqueueURLsToEnrich && !att.og_scrape_url))
             .map((localAttachment) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { localMetadata: _, ...attachment } = localAttachment;
             return attachment;
         });
@@ -57,8 +58,9 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
                 : Array.from(linkPreviews.values())
                     .filter((linkPreview) => linkPreview.state === LinkPreviewState.LOADED &&
                     !attachmentsFromUploads.find((attFromUpload) => attFromUpload.og_scrape_url === linkPreview.og_scrape_url))
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    .map(({ state: linkPreviewState, ...ogAttachment }) => ogAttachment);
+                    .map(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                ({ state: linkPreviewState, ...ogAttachment }) => ogAttachment);
             // scraped attachments are added only if all enrich queries has completed. Otherwise, the scraping has to be done server-side.
             sendOptions.skip_enrich_url =
                 (!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) ||

package/dist/components/MessageInput/hooks/useTimeElapsed.js

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 // todo: provide start timestamp
 export const useTimeElapsed = ({ startOnMount } = {}) => {
     const [secondsElapsed, setSecondsElapsed] = useState(0);
-    const updateInterval = useRef();
+    const updateInterval = useRef(undefined);
     const startCounter = useCallback(() => {
         if (updateInterval.current)
             return;

package/dist/components/MessageInput/hooks/useUserTrigger.js

@@ -27,7 +27,7 @@ export const useUserTrigger = (params) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const queryMembersThrottled = useCallback(throttle(async (query, onReady) => {
         try {
-            // @ts-expect-error
+            // @ts-expect-error valid query
             const response = await channel.queryMembers({
                 name: { $autocomplete: query },
             });
@@ -49,7 +49,7 @@ export const useUserTrigger = (params) => {
         setSearching(true);
         try {
             const { users } = await client.queryUsers(
-            // @ts-expect-error
+            // @ts-expect-error valid query
             {
                 $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }],
                 ...(typeof mentionQueryParams.filters === 'function'

package/dist/components/MessageInput/hooks/utils.js

@@ -53,6 +53,7 @@ export const searchLocalUsers = (params) => {
         let updatedQuery = removeDiacritics(query).toLowerCase();
         if (useMentionsTransliteration) {
             (async () => {
+                // eslint-disable-next-line import/no-extraneous-dependencies
                 const { default: transliterate } = await import('@stream-io/transliterate');
                 updatedName = transliterate(user.name || '').toLowerCase();
                 updatedQuery = transliterate(query).toLowerCase();
@@ -63,7 +64,8 @@ export const searchLocalUsers = (params) => {
         const lastDigits = text.slice(-(maxDistance + 1)).includes('@');
         if (updatedName) {
             const levenshtein = calculateLevenshtein(updatedQuery, updatedName);
-            if (updatedName.includes(updatedQuery) || (levenshtein <= maxDistance && lastDigits)) {
+            if (updatedName.includes(updatedQuery) ||
+                (levenshtein <= maxDistance && lastDigits)) {
                 return true;
             }
         }
@@ -79,7 +81,9 @@ export const checkUploadPermissions = async (params) => {
     const { allowed_file_extensions, allowed_mime_types, blocked_file_extensions, blocked_mime_types, size_limit, } = (uploadType === 'image'
         ? appSettings?.app?.image_upload_config
         : appSettings?.app?.file_upload_config) || {};
-    const sendNotAllowedErrorNotification = () => addNotification(t(`Upload type: "{{ type }}" is not allowed`, { type: file.type || 'unknown type' }), 'error');
+    const sendNotAllowedErrorNotification = () => addNotification(t(`Upload type: "{{ type }}" is not allowed`, {
+        type: file.type || 'unknown type',
+    }), 'error');
     if (allowed_file_extensions?.length) {
         const allowed = allowed_file_extensions.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
         if (!allowed) {

package/dist/components/MessageList/ConnectionStatus.js

@@ -6,7 +6,7 @@ const UnMemoizedConnectionStatus = () => {
     const { t } = useTranslationContext('ConnectionStatus');
     const [online, setOnline] = useState(true);
     useEffect(() => {
-        const connectionChanged = ({ online: onlineStatus = false }) => {
+        const connectionChanged = ({ online: onlineStatus = false, }) => {
             if (online !== onlineStatus) {
                 setOnline(onlineStatus);
             }

package/dist/components/MessageList/MessageList.js

@@ -12,7 +12,7 @@ import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageListContextProvider } from '../../context/MessageListContext';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';
+import { InfiniteScroll, } from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
@@ -20,12 +20,12 @@ import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageLi
 import { defaultRenderMessages } from './renderMessages';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 const MessageListWithContext = (props) => {
-    const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hideDeletedMessages = false, hideNewMessageSeparator = false, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messages = [], notifications, noGroupByUser = false, pinPermissions = defaultPinPermissions, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = false, threadList = false, unsafeHTML = false, headerPosition, read, renderMessages = defaultRenderMessages, reviewProcessedMessage, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, hasMoreNewer = false, reactionDetailsSort, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, highlightedMessageId, jumpToLatestMessage = () => Promise.resolve(), } = props;
+    const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hasMoreNewer = false, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, jumpToLatestMessage = () => Promise.resolve(), loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages = [], noGroupByUser = false, notifications, pinPermissions = defaultPinPermissions, reactionDetailsSort, read, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, threadList = false, unsafeHTML = false, } = props;
     const [listElement, setListElement] = React.useState(null);
     const [ulElement, setUlElement] = React.useState(null);
     const { customClasses } = useChatContext('MessageList');
-    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, MessageListMainPanel = DefaultMessageListMainPanel, } = useComponentContext('MessageList');
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
     const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect, } = useScrollLocationLogic({
         hasMoreNewer,
         listElement,
@@ -42,7 +42,6 @@ const MessageListWithContext = (props) => {
     useMarkRead({
         isMessageListScrolledToBottom,
         messageListIsThread: threadList,
-        unreadCount: channelUnreadUiState?.unread_messages ?? 0,
         wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
     });
     const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({
@@ -147,7 +146,7 @@ const MessageListWithContext = (props) => {
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
 export const MessageList = (props) => {
-    const { jumpToLatestMessage, loadMore, loadMoreNewer, } = useChannelActionContext('MessageList');
+    const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext('MessageList');
     const { members: membersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
     mutes: mutesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
     watchers: watchersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars

package/dist/components/MessageList/MessageListNotifications.js

@@ -8,5 +8,7 @@ export const MessageListNotifications = (props) => {
     return (React.createElement("div", { className: 'str-chat__list-notifications' },
         notifications.map((notification) => (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text))),
         React.createElement(ConnectionStatus, null),
-        React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList, unreadCount: unreadCount }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
+        React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList, unreadCount: unreadCount }, isNotAtLatestMessageSet
+            ? t('Latest Messages')
+            : t('New Messages!'))));
 };

package/dist/components/MessageList/VirtualizedMessageList.d.ts

@@ -25,7 +25,7 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */
     processedMessages: StreamMessage<StreamChatGenerics>[];
     /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */
-    virtuosoRef: RefObject<VirtuosoHandle>;
+    virtuosoRef: RefObject<VirtuosoHandle | null>;
     /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */
     firstUnreadMessageId?: string;
     lastReadDate?: Date;

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -18,7 +18,8 @@ import { DialogManagerProvider } from '../../context';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
-import { useComponentContext } from '../../context/ComponentContext';
+import { useComponentContext, } from '../../context/ComponentContext';
+import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
@@ -52,17 +53,17 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 const VirtualizedMessageListWithContext = (props) => {
     const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, openThread, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = 0, read, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, reactionDetailsSort, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
+    overscan = 0, reactionDetailsSort, read, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
     const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    const { DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem = DefaultMessageSystem, MessageListMainPanel = DefaultMessageListMainPanel, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
+    const { DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem = DefaultMessageSystem, TypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, } = useComponentContext('VirtualizedMessageList');
     const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
     const { client, customClasses } = useChatContext('VirtualizedMessageList');
     const virtuoso = useRef(null);
     const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
-    const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification, } = useUnreadMessagesNotificationVirtualized({
+    const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({
         lastRead: channelUnreadUiState?.last_read,
         showAlways: !!showUnreadNotificationAlways,
         unreadCount: channelUnreadUiState?.unread_messages ?? 0,
@@ -105,9 +106,7 @@ const VirtualizedMessageListWithContext = (props) => {
         returnAllReadData,
         userID: client.userID,
     });
-    const lastReceivedMessageId = useMemo(() => getLastReceived(processedMessages), [
-        processedMessages,
-    ]);
+    const lastReceivedMessageId = useMemo(() => getLastReceived(processedMessages), [processedMessages]);
     const groupStylesFn = groupStyles || getGroupStyles;
     const messageGroupStyles = useMemo(() => processedMessages.reduce((acc, message, i) => {
         const style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser, maxTimeBetweenGroupedMessages);
@@ -117,12 +116,16 @@ const VirtualizedMessageListWithContext = (props) => {
     }, {}), 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maxTimeBetweenGroupedMessages, processedMessages.length, shouldGroupByUser, groupStylesFn]);
+    [
+        maxTimeBetweenGroupedMessages,
+        processedMessages.length,
+        shouldGroupByUser,
+        groupStylesFn,
+    ]);
     const { atBottom, isMessageListScrolledToBottom, newMessagesNotification, setIsMessageListScrolledToBottom, setNewMessagesNotification, } = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer);
     useMarkRead({
         isMessageListScrolledToBottom,
         messageListIsThread: !!threadList,
-        unreadCount: channelUnreadUiState?.unread_messages ?? 0,
         wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
     });
     const scrollToBottom = useCallback(async () => {
@@ -144,7 +147,11 @@ const VirtualizedMessageListWithContext = (props) => {
         hasMoreNewer,
         jumpToLatestMessage,
     ]);
-    useScrollToBottomOnNewMessage({ messages, scrollToBottom, scrollToLatestMessageOnFocus });
+    useScrollToBottomOnNewMessage({
+        messages,
+        scrollToBottom,
+        scrollToLatestMessageOnFocus,
+    });
     const numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
     const { messageSetKey } = useMessageSetKey({ messages });
     const shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
@@ -192,7 +199,7 @@ const VirtualizedMessageListWithContext = (props) => {
     const dialogManagerId = threadList
         ? 'virtualized-message-list-dialog-manager-thread'
         : 'virtualized-message-list-dialog-manager';
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
@@ -242,7 +249,7 @@ const VirtualizedMessageListWithContext = (props) => {
  * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
  */
 export function VirtualizedMessageList(props) {
-    const { jumpToLatestMessage, loadMore, loadMoreNewer, } = useChannelActionContext('VirtualizedMessageList');
+    const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext('VirtualizedMessageList');
     const { channel, channelUnreadUiState, hasMore, hasMoreNewer, highlightedMessageId, loadingMore, loadingMoreNewer, messages: contextMessages, notifications, read, suppressAutoscroll, } = useChannelStateContext('VirtualizedMessageList');
     const messages = props.messages || contextMessages;
     return (React.createElement(VirtualizedMessageListWithContext, { channel: channel, channelUnreadUiState: props.channelUnreadUiState ?? channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll, ...props }));

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -43,7 +43,7 @@ export const Header = ({ context, }) => {
             React.createElement(LoadingIndicator, { size: 20 })))));
 };
 export const EmptyPlaceholder = ({ context, }) => {
-    const { EmptyStateIndicator = DefaultEmptyStateIndicator, } = useComponentContext('VirtualizedMessageList');
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('VirtualizedMessageList');
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
@@ -56,7 +56,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     if (!message)
         return React.createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
     if (isDateSeparatorMessage(message)) {
-        return DateSeparator ? React.createElement(DateSeparator, { date: message.date, unread: message.unread }) : null;
+        return DateSeparator ? (React.createElement(DateSeparator, { date: message.date, unread: message.unread })) : null;
     }
     if (message.type === 'system') {
         return MessageSystem ? React.createElement(MessageSystem, { message: message }) : null;

package/dist/components/MessageList/hooks/MessageList/useMessageListElements.js

@@ -14,9 +14,7 @@ export const useMessageListElements = (props) => {
         returnAllReadData,
         userID: client.userID,
     });
-    const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [
-        enrichedMessages,
-    ]);
+    const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [enrichedMessages]);
     const elements = useMemo(() => renderMessages({
         channelUnreadUiState,
         components,

package/dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.js

@@ -8,7 +8,7 @@ export function useMessageListScrollManager(params) {
         offsetHeight: 0,
         scrollHeight: 0,
     });
-    const messages = useRef();
+    const messages = useRef(undefined);
     const scrollTop = useRef(0);
     useLayoutEffect(() => {
         const prevMeasures = measures.current;
@@ -41,7 +41,8 @@ export function useMessageListScrollManager(params) {
             }
             // message list length didn't change, but check if last message had reaction/reply update
             else {
-                const hasNewReactions = lastPrevMessage?.latest_reactions?.length !== lastNewMessage.latest_reactions?.length;
+                const hasNewReactions = lastPrevMessage?.latest_reactions?.length !==
+                    lastNewMessage.latest_reactions?.length;
                 const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;
                 if ((hasNewReactions || hasNewReplies) && wasAtBottom) {
                     scrollToBottom();

package/dist/components/MessageList/hooks/MessageList/useScrollLocationLogic.js

@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useMessageListScrollManager } from './useMessageListScrollManager';
 export const useScrollLocationLogic = (params) => {
-    const { loadMoreScrollThreshold, messages = [], scrolledUpThreshold = 200, hasMoreNewer, suppressAutoscroll, listElement, } = params;
+    const { hasMoreNewer, listElement, loadMoreScrollThreshold, messages = [], scrolledUpThreshold = 200, suppressAutoscroll, } = params;
     const [hasNewMessages, setHasNewMessages] = useState(false);
     const [wrapperRect, setWrapperRect] = useState();
     const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
@@ -44,7 +44,8 @@ export const useScrollLocationLogic = (params) => {
         const offsetHeight = element.offsetHeight;
         const scrollHeight = element.scrollHeight;
         const prevCloseToBottom = closeToBottom.current;
-        closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+        closeToBottom.current =
+            scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
         closeToTop.current = scrollTop < scrolledUpThreshold;
         if (closeToBottom.current) {
             setHasNewMessages(false);

package/dist/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.js

@@ -31,7 +31,9 @@ export const useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, s
         }
         const scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget);
         const scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(observedTarget, msgListPanel);
-        setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
+        setShow(showAlways
+            ? scrolledBelowSeparator || scrolledAboveSeparator
+            : scrolledBelowSeparator);
         const observer = new IntersectionObserver((elements) => {
             if (!elements.length)
                 return;
@@ -61,7 +63,9 @@ export const useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, s
          * The intersection observer is not triggered when Element.scrollTo() is called. So we end up in a situation when we are scrolled to the bottom
          * and at the same time scrolled above the observed target.
          */
-        if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
+        if (unreadCount &&
+            isMessageListScrolledToBottom &&
+            isScrolledAboveTargetTop.current) {
             setShow(true);
             isScrolledAboveTargetTop.current = false;
         }

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js

@@ -4,7 +4,7 @@ export const useMessageSetKey = ({ messages, }) => {
      * Logic to update the key of the virtuoso component when the list jumps to a new location.
      */
     const [messageSetKey, setMessageSetKey] = useState(+new Date());
-    const firstMessageId = useRef();
+    const firstMessageId = useRef(undefined);
     useEffect(() => {
         const continuousSet = messages?.find((message) => message.id === firstMessageId.current);
         if (!continuousSet) {

package/dist/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.d.ts

@@ -2,7 +2,7 @@
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
-    atBottom: import("react").MutableRefObject<boolean>;
+    atBottom: import("react").RefObject<boolean>;
     isMessageListScrolledToBottom: boolean;
     newMessagesNotification: boolean;
     setIsMessageListScrolledToBottom: import("react").Dispatch<import("react").SetStateAction<boolean>>;