stream-chat-react 12.9.0 → 12.10.0

package/dist/components/Attachment/components/WaveProgressBar.js

@@ -7,7 +7,7 @@ export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, relativeAm
     const isDragging = useRef(false);
     const [root, setRoot] = useState(null);
     const [trackAxisX, setTrackAxisX] = useState();
-    const lastRootWidth = useRef();
+    const lastRootWidth = useRef(undefined);
     const handleDragStart = (e) => {
         e.preventDefault();
         if (!progressIndicator)

package/dist/components/Attachment/hooks/useAudioController.d.ts

@@ -13,7 +13,7 @@ type AudioControllerParams = {
     playbackRates?: number[];
 };
 export declare const useAudioController: ({ durationSeconds, mimeType, playbackRates, }?: AudioControllerParams) => {
-    audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+    audioRef: import("react").RefObject<HTMLAudioElement | null>;
     canPlayRecord: boolean;
     increasePlaybackRate: () => void;
     isPlaying: boolean;

package/dist/components/Attachment/hooks/useAudioController.js

@@ -13,7 +13,7 @@ export const useAudioController = ({ durationSeconds, mimeType, playbackRates =
     const [canPlayRecord, setCanPlayRecord] = useState(true);
     const [secondsElapsed, setSecondsElapsed] = useState(0);
     const [playbackRateIndex, setPlaybackRateIndex] = useState(0);
-    const playTimeout = useRef();
+    const playTimeout = useRef(undefined);
     const audioRef = useRef(null);
     const registerError = useCallback((e) => {
         logError(e);

package/dist/components/AutoCompleteTextarea/Textarea.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Textarea from 'react-textarea-autosize';
 import getCaretCoordinates from 'textarea-caret';
-import { isValidElementType } from 'react-is';
 import clsx from 'clsx';
 import { List as DefaultSuggestionList } from './List';
 import { DEFAULT_CARET_POSITION, defaultScrollToItem, errorMessage, triggerPropsCheck, } from './utils';
@@ -242,9 +241,6 @@ export class ReactTextareaAutocomplete extends React.Component {
                 if (!Array.isArray(data)) {
                     throw new Error('Trigger provider has to provide an array!');
                 }
-                if (!isValidElementType(component)) {
-                    throw new Error('Component should be defined!');
-                }
                 // throw away if we resolved old trigger
                 if (currentTrigger !== this.state.currentTrigger)
                     return;

package/dist/components/AutoCompleteTextarea/utils.js

@@ -1,4 +1,3 @@
-import { isValidElementType } from 'react-is';
 export const DEFAULT_CARET_POSITION = 'next';
 export function defaultScrollToItem(container, item) {
     if (!item)
@@ -26,10 +25,7 @@ export const triggerPropsCheck = ({ trigger }) => {
         }
         // $FlowFixMe
         const triggerSetting = settings;
-        const { callback, component, dataProvider, output } = triggerSetting;
-        if (!isValidElementType(component)) {
-            return Error('Invalid prop trigger: component should be defined.');
-        }
+        const { callback, dataProvider, output } = triggerSetting;
         if (!dataProvider || typeof dataProvider !== 'function') {
             return Error('Invalid prop trigger: dataProvider should be defined.');
         }

package/dist/components/Channel/Channel.js

@@ -4,7 +4,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
-import { channelReducer, initialState } from './channelState';
+import { initialState, makeChannelReducer } from './channelState';
 import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
@@ -63,6 +63,7 @@ const ChannelInner = (props) => {
     const [quotedMessage, setQuotedMessage] = useState();
     const [channelUnreadUiState, _setChannelUnreadUiState] = useState();
     const notificationTimeouts = useRef([]);
+    const channelReducer = useMemo(() => makeChannelReducer(), []);
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -73,7 +74,7 @@ const ChannelInner = (props) => {
     });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
-    const lastRead = useRef();
+    const lastRead = useRef(undefined);
     const online = useRef(true);
     const channelCapabilitiesArray = channel.data?.own_capabilities;
     const throttledCopyStateFromChannel = throttle(() => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }), 500, {

package/dist/components/Channel/channelState.d.ts

@@ -1,4 +1,3 @@
-import type { Reducer } from 'react';
 import type { Channel, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
 import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -61,8 +60,7 @@ export type ChannelStateReducerAction<StreamChatGenerics extends DefaultStreamCh
 } | {
     type: 'jumpToLatestMessage';
 };
-export type ChannelStateReducer<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Reducer<ChannelState<StreamChatGenerics>, ChannelStateReducerAction<StreamChatGenerics>>;
-export declare const channelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
+export declare const makeChannelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => (state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
 export declare const initialState: {
     error: null;
     hasMore: boolean;

package/dist/components/Channel/channelState.js

@@ -1,4 +1,4 @@
-export const channelReducer = (state, action) => {
+export const makeChannelReducer = () => (state, action) => {
     switch (action.type) {
         case 'closeThread': {
             return {

package/dist/components/Channel/hooks/useIsMounted.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;
+export declare const useIsMounted: () => import("react").RefObject<boolean>;

package/dist/components/ChannelList/hooks/useChannelListShape.js

@@ -245,8 +245,8 @@ export const useChannelListShapeDefaults = () => {
 };
 export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels, customHandleChannelListShape, filters, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, setChannels, sort, }) => {
     const defaults = useChannelListShapeDefaults();
-    const defaultHandleChannelListShapeRef = useRef();
-    const customHandleChannelListShapeRef = useRef();
+    const defaultHandleChannelListShapeRef = useRef(undefined);
+    const customHandleChannelListShapeRef = useRef(undefined);
     customHandleChannelListShapeRef.current = (event) => {
         // @ts-expect-error can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
         customHandleChannelListShape?.({ defaults, event, setChannels });

package/dist/components/ChannelList/hooks/useMobileNavigation.d.ts

@@ -1 +1 @@
-export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement>, navOpen: boolean, closeMobileNav?: () => void) => void;
+export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement | null>, navOpen: boolean, closeMobileNav?: () => void) => void;

package/dist/components/ChannelList/hooks/usePaginatedChannels.js

@@ -9,7 +9,7 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
     const { channelsQueryState: { error, setError, setQueryInProgress }, } = useChatContext('usePaginatedChannels');
     const [channels, setChannels] = useState([]);
     const [hasNextPage, setHasNextPage] = useState(true);
-    const lastRecoveryTimestamp = useRef();
+    const lastRecoveryTimestamp = useRef(undefined);
     const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
         ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
         : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;

package/dist/components/ChannelSearch/SearchBar.d.ts

@@ -11,7 +11,7 @@ export type SearchBarController = {
     /** Flag determining whether the search input is focused */
     inputIsFocused: boolean;
     /** Ref object for the input wrapper in the SearchBar */
-    searchBarRef: React.RefObject<HTMLDivElement>;
+    searchBarRef: React.RefObject<HTMLDivElement | null>;
 };
 export type AdditionalSearchBarProps = {
     /** Application menu to be displayed  when clicked on MenuIcon */

package/dist/components/ChannelSearch/SearchInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export type SearchInputController = {
     /** Clears the channel search state */
     clearState: () => void;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     /** Search input change handler */
     onSearch: React.ChangeEventHandler<HTMLInputElement>;
     /** Current search string */

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -9,7 +9,7 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
     const [query, setQuery] = useState('');
     const [results, setResults] = useState([]);
     const [searching, setSearching] = useState(false);
-    const searchQueryPromiseInProgress = useRef();
+    const searchQueryPromiseInProgress = useRef(undefined);
     const shouldIgnoreQueryResults = useRef(false);
     const inputRef = useRef(null);
     const searchBarRef = useRef(null);

package/dist/components/Chat/hooks/useChat.js

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.9.0-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.10.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/Gallery/BaseImage.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
 export type BaseImageProps = React.ComponentPropsWithRef<'img'>;
-export declare const BaseImage: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
-}, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const BaseImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/components/Gallery/Gallery.js

@@ -29,11 +29,19 @@ const UnMemoizedGallery = (props) => {
                 images[lastImageIndexInPreview].image_url ||
                 images[lastImageIndexInPreview].thumb_url})`,
             ...image.style,
-        }, ...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) }) },
+        }, ...(innerRefs?.current && {
+            ref: (r) => {
+                innerRefs.current[i] = r;
+            },
+        }) },
         React.createElement("p", null, t('{{ imageCount }} more', {
             imageCount: images.length - countImagesDisplayedInPreview,
         })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: `gallery-image-${i}`, onClick: () => toggleModal(i) },
-        React.createElement(BaseImage, { alt: image?.fallback || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: image?.fallback || imageFallbackTitle, ...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) }) }))));
+        React.createElement(BaseImage, { alt: image?.fallback || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: image?.fallback || imageFallbackTitle, ...(innerRefs?.current && {
+                ref: (r) => {
+                    innerRefs.current[i] = r;
+                },
+            }) }))));
     const className = clsx('str-chat__gallery', {
         'str-chat__gallery--square': images.length > lastImageIndexInPreview,
         'str-chat__gallery-two-rows': images.length > 2,

package/dist/components/Gallery/ModalGallery.js

@@ -18,8 +18,9 @@ export const ModalGallery = (props) => {
             originalAlt: t('User uploaded content'),
             source: imageSrc,
         };
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [images]);
-    return (React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+    }), [images, t]);
+    return (
+    // ignore the TS error as react-image-gallery was on @types/react@18 while stream-chat-react being upgraded to React 19 (https://github.com/xiaolin/react-image-gallery/issues/809)
+    // @ts-expect-error
+    React.createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
 };

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -26,10 +26,10 @@ export const InfiniteScroll = (props) => {
     const loadPreviousPageFn = loadPreviousPage || loadMore;
     const hasNextPageFlag = hasNextPage || hasMoreNewer;
     const hasPreviousPageFlag = hasPreviousPage || hasMore;
-    const scrollComponent = useRef();
-    const previousOffset = useRef();
-    const previousReverseOffset = useRef();
-    const scrollListenerRef = useRef();
+    const scrollComponent = useRef(undefined);
+    const previousOffset = useRef(undefined);
+    const previousReverseOffset = useRef(undefined);
+    const scrollListenerRef = useRef(undefined);
     scrollListenerRef.current = () => {
         const element = scrollComponent.current;
         if (!element || element.offsetParent === null) {

package/dist/components/MessageActions/hooks/useMessageActionsBoxPopper.d.ts

@@ -11,7 +11,7 @@ export declare function useMessageActionsBoxPopper<T extends HTMLElement>({ open
             [key: string]: string;
         } | undefined;
     };
-    popperElementRef: import("react").RefObject<T>;
+    popperElementRef: import("react").RefObject<T | null>;
     styles: {
         [key: string]: import("react").CSSProperties;
     };

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) {

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/MessageList/MessageList.js

@@ -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({

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

@@ -19,6 +19,7 @@ import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 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.' ||
@@ -122,7 +123,6 @@ const VirtualizedMessageListWithContext = (props) => {
     useMarkRead({
         isMessageListScrolledToBottom,
         messageListIsThread: !!threadList,
-        unreadCount: channelUnreadUiState?.unread_messages ?? 0,
         wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
     });
     const scrollToBottom = useCallback(async () => {
@@ -192,7 +192,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 })),

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;

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>>;

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

@@ -5,8 +5,8 @@ const STATUSES_EXCLUDED_FROM_PREPEND = {
 };
 export function usePrependedMessagesCount(messages, hasDateSeparator) {
     const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-    const firstMessageOnFirstLoadedPage = useRef();
-    const previousFirstMessageOnFirstLoadedPage = useRef();
+    const firstMessageOnFirstLoadedPage = useRef(undefined);
+    const previousFirstMessageOnFirstLoadedPage = useRef(undefined);
     const previousNumItemsPrepended = useRef(0);
     const numItemsPrepended = useMemo(() => {
         if (!messages || !messages.length) {

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 export const useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }) => {
     const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
-    const scrollToBottomIfConfigured = useRef();
+    const scrollToBottomIfConfigured = useRef(undefined);
     scrollToBottomIfConfigured.current = (event) => {
         if (!scrollToLatestMessageOnFocus ||
             !newMessagesReceivedInBackground ||

package/dist/components/MessageList/hooks/useMarkRead.d.ts

@@ -1,8 +1,7 @@
-import { DefaultStreamChatGenerics } from '../../../types';
+import type { DefaultStreamChatGenerics } from '../../../types';
 type UseMarkReadParams = {
     isMessageListScrolledToBottom: boolean;
     messageListIsThread: boolean;
-    unreadCount: number;
     wasMarkedUnread?: boolean;
 };
 /**
@@ -12,8 +11,7 @@ type UseMarkReadParams = {
  * 3. the channel was not marked unread by the user
  * @param isMessageListScrolledToBottom
  * @param messageListIsThread
- * @param unreadCount
  * @param wasChannelMarkedUnread
  */
-export declare const useMarkRead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isMessageListScrolledToBottom, messageListIsThread, unreadCount, wasMarkedUnread, }: UseMarkReadParams) => void;
+export declare const useMarkRead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread, }: UseMarkReadParams) => void;
 export {};

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

@@ -1,5 +1,10 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useChannelActionContext, useChannelStateContext, useChatContext, } from '../../../context';
+const hasReadLastMessage = (channel, userId) => {
+    const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;
+    const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
+    return latestMessageIdInChannel === lastReadMessageIdServer;
+};
 /**
  * Takes care of marking a channel read. The channel is read only if all the following applies:
  * 1. the message list is not rendered in a thread
@@ -7,29 +12,25 @@ import { useChannelActionContext, useChannelStateContext, useChatContext, } from
  * 3. the channel was not marked unread by the user
  * @param isMessageListScrolledToBottom
  * @param messageListIsThread
- * @param unreadCount
  * @param wasChannelMarkedUnread
  */
-export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, unreadCount, wasMarkedUnread, }) => {
+export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread, }) => {
     const { client } = useChatContext('useMarkRead');
     const { markRead, setChannelUnreadUiState } = useChannelActionContext('useMarkRead');
     const { channel } = useChannelStateContext('useMarkRead');
-    const previousRenderMessageListScrolledToBottom = useRef(isMessageListScrolledToBottom);
     useEffect(() => {
-        const shouldMarkRead = (unreadMessages) => !document.hidden &&
+        const shouldMarkRead = () => !document.hidden &&
             !wasMarkedUnread &&
             !messageListIsThread &&
             isMessageListScrolledToBottom &&
-            unreadMessages > 0;
+            client.user?.id &&
+            !hasReadLastMessage(channel, client.user.id);
         const onVisibilityChange = () => {
-            if (shouldMarkRead(channel.countUnread()))
+            if (shouldMarkRead())
                 markRead();
         };
         const handleMessageNew = (event) => {
-            const isOwnMessage = event.user?.id && event.user.id === client.user?.id;
             const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
-            if (isOwnMessage)
-                return;
             if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {
                 setChannelUnreadUiState((prev) => {
                     const previousUnreadCount = prev?.unread_messages ?? 0;
@@ -44,17 +45,15 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
                     };
                 });
             }
-            else if (mainChannelUpdated && shouldMarkRead(channel.countUnread())) {
+            else if (mainChannelUpdated && shouldMarkRead()) {
                 markRead();
             }
         };
         channel.on('message.new', handleMessageNew);
         document.addEventListener('visibilitychange', onVisibilityChange);
-        const hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
-            isMessageListScrolledToBottom;
-        if (hasScrolledToBottom && shouldMarkRead(channel.countUnread()))
+        if (shouldMarkRead()) {
             markRead();
-        previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
+        }
         return () => {
             channel.off('message.new', handleMessageNew);
             document.removeEventListener('visibilitychange', onVisibilityChange);
@@ -66,7 +65,6 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
         markRead,
         messageListIsThread,
         setChannelUnreadUiState,
-        unreadCount,
         wasMarkedUnread,
     ]);
 };

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);