stream-chat-react 12.8.1 → 12.9.0

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

@@ -24,7 +24,7 @@ type HandleNotificationAddedToChannelParameters<SCG extends ExtendableGenerics>
 } & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
 type HandleMemberUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & {
     lockChannelOrder: boolean;
-} & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
+} & Required<Pick<ChannelListProps<SCG>, 'sort' | 'filters'>>;
 type HandleChannelDeletedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleChannelHiddenParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
@@ -37,9 +37,9 @@ export declare const useChannelListShapeDefaults: <SCG extends ExtendableGeneric
     handleChannelTruncated: ({ customHandler, event, setChannels }: HandleChannelTruncatedParameters<SCG>) => void;
     handleChannelUpdated: ({ customHandler, event, setChannels }: HandleChannelUpdatedParameters<SCG>) => void;
     handleChannelVisible: ({ customHandler, event, setChannels }: HandleChannelVisibleParameters<SCG>) => Promise<void>;
-    handleMemberUpdated: ({ event, lockChannelOrder, setChannels, sort }: HandleMemberUpdatedParameters<SCG>) => void;
+    handleMemberUpdated: ({ event, filters, lockChannelOrder, setChannels, sort, }: HandleMemberUpdatedParameters<SCG>) => void;
     handleMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, lockChannelOrder, setChannels, sort, }: HandleMessageNewParameters<SCG>) => void;
-    handleNotificationAddedToChannel: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, }: HandleNotificationAddedToChannelParameters<SCG>) => Promise<void>;
+    handleNotificationAddedToChannel: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, sort, }: HandleNotificationAddedToChannelParameters<SCG>) => Promise<void>;
     handleNotificationMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort, }: HandleNotificationMessageNewParameters<SCG>) => Promise<void>;
     handleNotificationRemovedFromChannel: ({ customHandler, event, setChannels, }: HandleNotificationRemovedFromChannelParameters<SCG>) => void;
     handleUserPresenceChanged: ({ event, setChannels }: HandleUserPresenceChangedParameters<SCG>) => void;

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

@@ -1,7 +1,7 @@
 // const defaults = useChannelListShapeDefaults();
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import uniqBy from 'lodash.uniqby';
-import { findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels, } from '../utils';
+import { extractSortValue, findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels, } from '../utils';
 import { useChatContext } from '../../../context';
 import { getChannel } from '../../../utils';
 const shared = ({ customHandler, event, setChannels, }) => {
@@ -22,39 +22,37 @@ export const useChannelListShapeDefaults = () => {
         if (typeof customHandler === 'function') {
             return customHandler(setChannels, event);
         }
-        setChannels((channels) => {
-            const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+        const channelType = event.channel_type;
+        const channelId = event.channel_id;
+        if (!channelType || !channelId)
+            return;
+        setChannels((currentChannels) => {
+            const targetChannel = client.channel(channelType, channelId);
+            const targetChannelIndex = currentChannels.indexOf(targetChannel);
             const targetChannelExistsWithinList = targetChannelIndex >= 0;
-            const targetChannel = channels[targetChannelIndex];
             const isTargetChannelPinned = isChannelPinned(targetChannel);
             const isTargetChannelArchived = isChannelArchived(targetChannel);
             const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
             const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
             if (
-            // target channel is archived
-            (isTargetChannelArchived && considerArchivedChannels) ||
-                // target channel is pinned
-                (isTargetChannelPinned && considerPinnedChannels) ||
+            // filter is defined, target channel is archived and filter option is set to false
+            (considerArchivedChannels && isTargetChannelArchived && !filters.archived) ||
+                // filter is defined, target channel isn't archived and filter option is set to true
+                (considerArchivedChannels && !isTargetChannelArchived && filters.archived) ||
+                // sort option is defined, target channel is pinned
+                (considerPinnedChannels && isTargetChannelPinned) ||
                 // list order is locked
                 lockChannelOrder ||
                 // target channel is not within the loaded list and loading from cache is disallowed
                 (!targetChannelExistsWithinList && !allowNewMessagesFromUnfilteredChannels)) {
-                return channels;
-            }
-            // we either have the channel to move or we pull it from the cache (or instantiate) if it's allowed
-            const channelToMove = channels[targetChannelIndex] ??
-                (allowNewMessagesFromUnfilteredChannels && event.channel_type
-                    ? client.channel(event.channel_type, event.channel_id)
-                    : null);
-            if (channelToMove) {
-                return moveChannelUpwards({
-                    channels,
-                    channelToMove,
-                    channelToMoveIndexWithinChannels: targetChannelIndex,
-                    sort,
-                });
+                return currentChannels;
             }
-            return channels;
+            return moveChannelUpwards({
+                channels: currentChannels,
+                channelToMove: targetChannel,
+                channelToMoveIndexWithinChannels: targetChannelIndex,
+                sort,
+            });
         });
     }, [client]);
     const handleNotificationMessageNew = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort, }) => {
@@ -70,7 +68,7 @@ export const useChannelListShapeDefaults = () => {
             type: event.channel.type,
         });
         const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
-        if (isChannelArchived(channel) && considerArchivedChannels) {
+        if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {
             return;
         }
         if (!allowNewMessagesFromUnfilteredChannels) {
@@ -83,25 +81,31 @@ export const useChannelListShapeDefaults = () => {
             sort,
         }));
     }, [client]);
-    const handleNotificationAddedToChannel = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, }) => {
+    const handleNotificationAddedToChannel = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, sort, }) => {
         if (typeof customHandler === 'function') {
             return customHandler(setChannels, event);
         }
-        if (allowNewMessagesFromUnfilteredChannels && event.channel?.type) {
-            const channel = await getChannel({
-                client,
-                id: event.channel.id,
-                members: event.channel.members?.reduce((acc, { user, user_id }) => {
-                    const userId = user_id || user?.id;
-                    if (userId) {
-                        acc.push(userId);
-                    }
-                    return acc;
-                }, []),
-                type: event.channel.type,
-            });
-            setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+        if (!event.channel || !allowNewMessagesFromUnfilteredChannels) {
+            return;
         }
+        const channel = await getChannel({
+            client,
+            id: event.channel.id,
+            members: event.channel.members?.reduce((newMembers, { user, user_id }) => {
+                const userId = user_id || user?.id;
+                if (userId)
+                    newMembers.push(userId);
+                return newMembers;
+            }, []),
+            type: event.channel.type,
+        });
+        // membership has been reset (target channel shouldn't be pinned nor archived)
+        setChannels((channels) => moveChannelUpwards({
+            channels,
+            channelToMove: channel,
+            channelToMoveIndexWithinChannels: -1,
+            sort,
+        }));
     }, [client]);
     const handleNotificationRemovedFromChannel = useCallback(({ customHandler, event, setChannels, }) => {
         if (typeof customHandler === 'function') {
@@ -109,21 +113,22 @@ export const useChannelListShapeDefaults = () => {
         }
         setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
     }, []);
-    const handleMemberUpdated = useCallback(({ event, lockChannelOrder, setChannels, sort }) => {
+    const handleMemberUpdated = useCallback(({ event, filters, lockChannelOrder, setChannels, sort, }) => {
         if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
             return;
         }
-        const member = event.member;
         const channelType = event.channel_type;
         const channelId = event.channel_id;
         const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-        // TODO: extract this and consider single property sort object too
-        const pinnedAtSort = Array.isArray(sort) ? sort[0]?.pinned_at ?? null : null;
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+        const pinnedAtSort = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });
         setChannels((currentChannels) => {
             const targetChannel = client.channel(channelType, channelId);
             // assumes that channel instances are not changing
             const targetChannelIndex = currentChannels.indexOf(targetChannel);
             const targetChannelExistsWithinList = targetChannelIndex >= 0;
+            const isTargetChannelArchived = isChannelArchived(targetChannel);
+            const isTargetChannelPinned = isChannelPinned(targetChannel);
             // handle pinning
             if (!considerPinnedChannels || lockChannelOrder)
                 return currentChannels;
@@ -132,14 +137,15 @@ export const useChannelListShapeDefaults = () => {
                 newChannels.splice(targetChannelIndex, 1);
             }
             // handle archiving (remove channel)
-            if (typeof member.archived_at === 'string') {
+            if ((considerArchivedChannels && isTargetChannelArchived && !filters.archived) ||
+                (considerArchivedChannels && !isTargetChannelArchived && filters.archived)) {
                 return newChannels;
             }
             let lastPinnedChannelIndex = null;
             // calculate last pinned channel index only if `pinned_at` sort is set to
             // ascending order or if it's in descending order while the pin is being removed, otherwise
             // we move to the top (index 0)
-            if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !member.pinned_at)) {
+            if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !isTargetChannelPinned)) {
                 lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
             }
             const newTargetChannelIndex = typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0;
@@ -311,6 +317,7 @@ export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels
             case 'member.updated':
                 defaults.handleMemberUpdated({
                     event,
+                    filters,
                     lockChannelOrder,
                     setChannels,
                     sort,

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

@@ -1,2 +1,3 @@
-import type { Channel, ExtendableGenerics } from 'stream-chat';
-export declare const useChannelMembershipState: <SCG extends ExtendableGenerics>(channel?: Channel<SCG>) => import("stream-chat").ChannelMemberResponse<SCG>;
+import type { Channel, ChannelMemberResponse, ExtendableGenerics } from 'stream-chat';
+export declare function useChannelMembershipState<SCG extends ExtendableGenerics>(channel: Channel<SCG>): ChannelMemberResponse<SCG>;
+export declare function useChannelMembershipState<SCG extends ExtendableGenerics>(channel?: Channel<SCG> | undefined): ChannelMemberResponse<SCG> | undefined;

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

@@ -1,15 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useChatContext } from '../../../context';
-export const useChannelMembershipState = (channel) => {
-    const [membership, setMembership] = useState(channel?.state.membership || {});
-    const { client } = useChatContext();
-    useEffect(() => {
-        if (!channel)
-            return;
-        const subscriptions = ['member.updated'].map((v) => client.on(v, () => {
-            setMembership(channel.state.membership);
-        }));
-        return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-    }, [client, channel]);
-    return membership;
-};
+import { useSelectedChannelState } from './useSelectedChannelState';
+const selector = (c) => c.state.membership;
+const keys = ['member.updated'];
+export function useChannelMembershipState(channel) {
+    return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+}

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

@@ -0,0 +1,11 @@
+import type { Channel, EventTypes, ExtendableGenerics } from 'stream-chat';
+export declare function useSelectedChannelState<SCG extends ExtendableGenerics, O>(_: {
+    channel: Channel<SCG>;
+    selector: (channel: Channel<SCG>) => O;
+    stateChangeEventKeys?: EventTypes[];
+}): O;
+export declare function useSelectedChannelState<SCG extends ExtendableGenerics, O>(_: {
+    selector: (channel: Channel<SCG>) => O;
+    channel?: Channel<SCG> | undefined;
+    stateChangeEventKeys?: EventTypes[];
+}): O | undefined;

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

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
+export function useSelectedChannelState({ channel, stateChangeEventKeys = ['all'], selector, }) {
+    const subscribe = useCallback((onStoreChange) => {
+        if (!channel)
+            return noop;
+        const subscriptions = stateChangeEventKeys.map((et) => channel.on(et, () => {
+            onStoreChange(selector(channel));
+        }));
+        return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }, [channel, selector, stateChangeEventKeys]);
+    const getSnapshot = useCallback(() => {
+        if (!channel)
+            return undefined;
+        return selector(channel);
+    }, [channel, selector]);
+    return useSyncExternalStore(subscribe, getSnapshot);
+}

package/dist/components/ChannelList/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Channel, ChannelSort, ExtendableGenerics } from 'stream-chat';
+import type { Channel, ChannelSort, ChannelSortBase, ExtendableGenerics } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ChannelListProps } from './ChannelList';
 export declare const MAX_QUERY_CHANNELS_LIMIT = 30;
@@ -29,18 +29,28 @@ type MoveChannelUpwardsParams<SCG extends DefaultStreamChatGenerics = DefaultStr
      */
     channelToMoveIndexWithinChannels?: number;
 };
-/**
- * This function should not be used to move pinned already channels.
- */
 export declare const moveChannelUpwards: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }: MoveChannelUpwardsParams<SCG>) => Channel<SCG>[];
 /**
- * Returns true only if `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ * Returns `true` only if object with `pinned_at` property is first within the `sort` array
+ * or if `pinned_at` key of the `sort` object gets picked first when using `for...in` looping mechanism
+ * and value of the `pinned_at` is either `1` or `-1`.
  */
 export declare const shouldConsiderPinnedChannels: <SCG extends ExtendableGenerics>(sort: ChannelListProps<SCG>['sort']) => boolean;
+export declare const extractSortValue: <SCG extends ExtendableGenerics>({ atIndex, sort, targetKey, }: {
+    atIndex: number;
+    targetKey: keyof ChannelSortBase<SCG>;
+    sort?: ChannelListProps<SCG>['sort'];
+}) => NonNullable<ChannelSortBase<SCG>["created_at" | "pinned_at" | "updated_at" | keyof SCG["channelType"] | "has_unread" | "last_message_at" | "last_updated" | "member_count" | "unread_count"]> | null;
 /**
- * Returns `true` only if `archived` property is set to `false` within `filters`.
+ * Returns `true` only if `archived` property is of type `boolean` within `filters` object.
  */
 export declare const shouldConsiderArchivedChannels: <SCG extends ExtendableGenerics>(filters: ChannelListProps<SCG>['filters']) => boolean;
+/**
+ * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
+ */
 export declare const isChannelPinned: <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => boolean;
+/**
+ * Returns `true` only if `archived_at` property is of type `string` within `membership` object.
+ */
 export declare const isChannelArchived: <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => boolean;
 export {};

package/dist/components/ChannelList/utils.js

@@ -31,9 +31,6 @@ export function findLastPinnedChannelIndex({ channels, }) {
     }
     return lastPinnedChannelIndex;
 }
-/**
- * This function should not be used to move pinned already channels.
- */
 export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }) => {
     // get index of channel to move up
     const targetChannelIndex = channelToMoveIndexWithinChannels ??
@@ -44,8 +41,10 @@ export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndex
     // receive messages and are not pinned should move upwards but only under the last pinned channel
     // in the list
     const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-    if (targetChannelAlreadyAtTheTop)
+    const isTargetChannelPinned = isChannelPinned(channelToMove);
+    if (targetChannelAlreadyAtTheTop || (considerPinnedChannels && isTargetChannelPinned)) {
         return channels;
+    }
     const newChannels = [...channels];
     // target channel index is known, remove it from the list
     if (targetChannelExistsWithinList) {
@@ -62,35 +61,62 @@ export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndex
     return newChannels;
 };
 /**
- * Returns true only if `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ * Returns `true` only if object with `pinned_at` property is first within the `sort` array
+ * or if `pinned_at` key of the `sort` object gets picked first when using `for...in` looping mechanism
+ * and value of the `pinned_at` is either `1` or `-1`.
  */
 export const shouldConsiderPinnedChannels = (sort) => {
-    if (!sort)
+    const value = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });
+    if (typeof value !== 'number')
         return false;
-    if (!Array.isArray(sort))
-        return false;
-    const [option] = sort;
-    if (!option?.pinned_at)
-        return false;
-    return Math.abs(option.pinned_at) === 1;
+    return Math.abs(value) === 1;
+};
+export const extractSortValue = ({ atIndex, sort, targetKey, }) => {
+    if (!sort)
+        return null;
+    let option = null;
+    if (Array.isArray(sort)) {
+        option = sort[atIndex] ?? null;
+    }
+    else {
+        let index = 0;
+        for (const key in sort) {
+            if (index !== atIndex) {
+                index++;
+                continue;
+            }
+            if (key !== targetKey) {
+                return null;
+            }
+            option = sort;
+            break;
+        }
+    }
+    return option?.[targetKey] ?? null;
 };
 /**
- * Returns `true` only if `archived` property is set to `false` within `filters`.
+ * Returns `true` only if `archived` property is of type `boolean` within `filters` object.
  */
 export const shouldConsiderArchivedChannels = (filters) => {
     if (!filters)
         return false;
-    return !filters.archived;
+    return typeof filters.archived === 'boolean';
 };
+/**
+ * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
+ */
 export const isChannelPinned = (channel) => {
     if (!channel)
         return false;
-    const member = channel.state.membership;
-    return !!member?.pinned_at;
+    const membership = channel.state.membership;
+    return typeof membership.pinned_at === 'string';
 };
+/**
+ * Returns `true` only if `archived_at` property is of type `string` within `membership` object.
+ */
 export const isChannelArchived = (channel) => {
     if (!channel)
         return false;
-    const member = channel.state.membership;
-    return !!member?.archived_at;
+    const membership = channel.state.membership;
+    return typeof membership.archived_at === 'string';
 };

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.8.1-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.9.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/ChatAutoComplete/ChatAutoComplete.d.ts

@@ -53,6 +53,8 @@ export type SuggestionListProps<StreamChatGenerics extends DefaultStreamChatGene
     };
 }>;
 export type ChatAutoCompleteProps<T extends UnknownType = UnknownType> = {
+    /** Override the default disabled state of the underlying `textarea` component. */
+    disabled?: boolean;
     /** Function to override the default submit handler on the underlying `textarea` component */
     handleSubmit?: (event: React.BaseSyntheticEvent) => void;
     /** Function to run on blur of the underlying `textarea` component */

package/dist/components/ChatAutoComplete/ChatAutoComplete.js

@@ -28,6 +28,6 @@ const UnMemoizedChatAutoComplete = (props) => {
             innerRef.current = ref;
         }
     }, [innerRef]);
-    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, minRows: messageInput.minRows, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
+    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: (props.disabled ?? disabled) || !!cooldownRemaining, disableMentions: messageInput.disableMentions, grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, minRows: messageInput.minRows, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
 };
 export const ChatAutoComplete = React.memo(UnMemoizedChatAutoComplete);

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -5,7 +5,7 @@ import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyState
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { isMessageEdited, Message } from '../Message';
 import { useComponentContext } from '../../context';
-import { isDateSeparatorMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils';
 const PREPEND_OFFSET = 10 ** 7;
 export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
     return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -72,24 +72,17 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
             (maybePrevMessage && isMessageEdited(maybePrevMessage)));
     const endOfGroup = shouldGroupByUser &&
         (message.user?.id !== maybeNextMessage?.user?.id || isMessageEdited(message));
-    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-    const lastReadTimestamp = lastReadDate?.getTime();
-    const isFirstMessage = streamMessageIndex === 0;
-    const isNewestMessage = lastReadMessageId === lastReceivedMessageId;
-    const isLastReadMessage = message.id === lastReadMessageId ||
-        (!unreadMessageCount && createdAtTimestamp === lastReadTimestamp);
-    const isFirstUnreadMessage = firstUnreadMessageId === message.id ||
-        (!!unreadMessageCount &&
-            createdAtTimestamp &&
-            lastReadTimestamp &&
-            createdAtTimestamp > lastReadTimestamp &&
-            isFirstMessage);
-    const showUnreadSeparatorAbove = !lastReadMessageId && isFirstUnreadMessage;
-    const showUnreadSeparatorBelow = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || !!unreadMessageCount);
+    const isFirstUnreadMessage = getIsFirstUnreadMessage({
+        firstUnreadMessageId,
+        isFirstMessage: streamMessageIndex === 0,
+        lastReadDate,
+        lastReadMessageId,
+        message,
+        previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,
+        unreadMessageCount,
+    });
     return (React.createElement(React.Fragment, null,
-        showUnreadSeparatorAbove && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
+        isFirstUnreadMessage && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList }),
-        showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
-            React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList })));
 };

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

@@ -26,7 +26,6 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
                 markRead();
         };
         const handleMessageNew = (event) => {
-            const newMessageToCurrentChannel = event.cid === channel.cid;
             const isOwnMessage = event.user?.id && event.user.id === client.user?.id;
             const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
             if (isOwnMessage)
@@ -45,13 +44,11 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
                     };
                 });
             }
-            else if (newMessageToCurrentChannel &&
-                mainChannelUpdated &&
-                shouldMarkRead(channel.countUnread())) {
+            else if (mainChannelUpdated && shouldMarkRead(channel.countUnread())) {
                 markRead();
             }
         };
-        client.on('message.new', handleMessageNew);
+        channel.on('message.new', handleMessageNew);
         document.addEventListener('visibilitychange', onVisibilityChange);
         const hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
             isMessageListScrolledToBottom;
@@ -59,7 +56,7 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
             markRead();
         previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
         return () => {
-            client.off('message.new', handleMessageNew);
+            channel.off('message.new', handleMessageNew);
             document.removeEventListener('visibilitychange', onVisibilityChange);
         };
     }, [

package/dist/components/MessageList/renderMessages.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { isDateSeparatorMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils';
 import { Message } from '../Message';
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
@@ -9,6 +9,7 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
     const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
+    let previousMessage = undefined;
     for (let index = 0; index < messages.length; index++) {
         const message = messages[index];
         if (isDateSeparatorMessage(message)) {
@@ -29,29 +30,21 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
             }
             const groupStyles = messageGroupStyles[message.id] || '';
             const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
-            const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-            const lastReadTimestamp = channelUnreadUiState?.last_read.getTime();
-            const isFirstMessage = firstMessage?.id && firstMessage.id === message.id;
-            const isNewestMessage = index === messages.length - 1;
-            const isLastReadMessage = channelUnreadUiState?.last_read_message_id === message.id ||
-                (!channelUnreadUiState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
-            const isFirstUnreadMessage = channelUnreadUiState?.first_unread_message_id === message.id ||
-                (!!channelUnreadUiState?.unread_messages &&
-                    !!createdAtTimestamp &&
-                    !!lastReadTimestamp &&
-                    createdAtTimestamp > lastReadTimestamp &&
-                    isFirstMessage);
-            const showUnreadSeparatorAbove = !channelUnreadUiState?.last_read_message_id && isFirstUnreadMessage;
-            const showUnreadSeparatorBelow = isLastReadMessage &&
-                !isNewestMessage &&
-                (channelUnreadUiState?.first_unread_message_id || !!channelUnreadUiState?.unread_messages); // this part has to be here as we do not mark channel read when sending a message
+            const isFirstUnreadMessage = getIsFirstUnreadMessage({
+                firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+                isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,
+                lastReadDate: channelUnreadUiState?.last_read,
+                lastReadMessageId: channelUnreadUiState?.last_read_message_id,
+                message,
+                previousMessage,
+                unreadMessageCount: channelUnreadUiState?.unread_messages,
+            });
             renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at },
-                showUnreadSeparatorAbove && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
                     React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages }))),
                 React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
-                    React.createElement(Message, { groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps })),
-                showUnreadSeparatorBelow && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages })))));
+                    React.createElement(Message, { groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps }))));
+            previousMessage = message;
         }
     }
     return renderedMessages;

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

@@ -68,4 +68,13 @@ type DateSeparatorMessage = {
     unread: boolean;
 };
 export declare function isDateSeparatorMessage<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage;
+export declare const getIsFirstUnreadMessage: ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount, }: {
+    isFirstMessage: boolean;
+    message: StreamMessage;
+    firstUnreadMessageId?: string;
+    lastReadDate?: Date;
+    lastReadMessageId?: string;
+    previousMessage?: StreamMessage;
+    unreadMessageCount?: number;
+}) => boolean;
 export {};

package/dist/components/MessageList/utils.js

@@ -241,3 +241,11 @@ export const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCoun
 export function isDateSeparatorMessage(message) {
     return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
 }
+export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0, }) => {
+    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+    const lastReadTimestamp = lastReadDate?.getTime();
+    const messageIsUnread = !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;
+    const previousMessageIsLastRead = !!lastReadMessageId && lastReadMessageId === previousMessage?.id;
+    return (firstUnreadMessageId === message.id ||
+        (!!unreadMessageCount && messageIsUnread && (isFirstMessage || previousMessageIsLastRead)));
+};