stream-chat-react 12.8.2 → 12.10.0

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