stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.3

package/src/contexts/themeContext/utils/theme.ts

@@ -25,7 +25,6 @@ export const Colors = {
   bg_user: '#F7F7F8',
   black: '#000000',
   blue_alice: '#E9F2FF',
-  // border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
   code_block: '#DDDDDD',
   disabled: '#B4BBBA',
   grey: '#7A7A7A',
@@ -1210,7 +1209,7 @@ export type Theme = {
     thumb: ViewStyle;
     waveform: ViewStyle;
   };
-  semantics: typeof lightSemantics; // themed semantics have the same type
+  semantics: typeof lightSemantics;
 };
 
 export const defaultTheme: Theme = {
@@ -1874,7 +1873,7 @@ export const defaultTheme: Theme = {
       container: {},
       spacer: {
         height: BASE_AVATAR_SIZE,
-        width: BASE_AVATAR_SIZE, // same as BASE_AVATAR_SIZE
+        width: BASE_AVATAR_SIZE,
       },
     },
     card: {

package/src/contexts/threadContext/ThreadContext.tsx

@@ -9,16 +9,11 @@ export type AlsoSentToChannelHeaderPressPayload = {
 
 export type ThreadContextValue = {
   allowThreadMessagesInChannel: boolean;
-  /**
-   * The thread this subtree renders. Set by `<Thread>`; `undefined` everywhere else.
-   */
+  /** The thread this subtree renders. Set by `<Thread>`, `undefined` elsewhere. */
   thread?: Thread;
 };
 
-/**
- * What `useThreadContext()` returns outside a `<Thread>`. Only `<Thread>` provides this context, so
- * its absence is how a component knows it is not rendering a thread.
- */
+/** What `useThreadContext()` returns outside a `<Thread>`, the only provider of this context. */
 const NO_THREAD_CONTEXT_VALUE: ThreadContextValue = {
   allowThreadMessagesInChannel: false,
   thread: undefined,
@@ -34,7 +29,7 @@ export const ThreadProvider = ({
 }>) => <ThreadContext.Provider value={value}>{children}</ThreadContext.Provider>;
 
 /**
- * The thread the calling component renders, if any. Unlike the other context hooks this one does not
- * throw outside its provider: outside a `<Thread>` it returns `{ thread: undefined }`.
+ * The thread the calling component renders, if any. Unlike the other context hooks it does not
+ * throw outside its provider: it returns `{ thread: undefined }`.
  */
 export const useThreadContext = () => useContext(ThreadContext);

package/src/contexts/translationContext/TranslationContext.tsx

@@ -9,13 +9,9 @@ export const DEFAULT_USER_LANGUAGE = 'en';
 
 export type TranslationContextValue = TranslatorFunctions & {
   /**
-   * The language the SDK's own copy renders in.
-   *
-   * Plain `string`, not `stream-chat`'s `TranslationLanguage`. That union enumerates the languages
-   * the *message auto-translation* endpoint supports, which is a different question from which
-   * languages this SDK's UI can be translated into — any language an integrator registers a
-   * dictionary for is valid here. It also does not contain `pt-BR`, which this SDK itself shipped
-   * a locale for.
+   * The language the SDK's own copy renders in. A plain `string` rather than `stream-chat`'s
+   * `TranslationLanguage` (the message auto-translation languages): any language with a registered
+   * dictionary is valid.
    */
   userLanguage: string;
 };

package/src/contexts/translationContext/types.ts

@@ -1,23 +1,14 @@
 import type { StreamTFunction } from '../../i18n/types';
 
-/**
- * The date/time parser types come from `@stream-io/i18n`, shared with the React SDK.
- *
- * They used to be declared here, and `TDateTimeParserOutput` referenced `Moment` from
- * `moment-timezone` — a *devDependency*, so the type leaked into the published `.d.ts` and failed to
- * resolve for any consumer who had not separately installed it. Core's structural `DateTimeLike`
- * covers a Dayjs or a Moment without depending on either.
- */
+/** The date/time parser types come from `@stream-io/i18n`, shared with the React SDK. */
 export type { TDateTimeParser, TDateTimeParserInput, TDateTimeParserOutput } from '@stream-io/i18n';
 
 export type TranslatorFunctions = {
   /**
-   * The SDK's translation function.
-   *
-   * Typed as {@link StreamTFunction} rather than i18next's `TFunction`, so a key is checked against
-   * the generated catalog and prose call sites are required to pass their English copy inline. The
-   * typing is deliberately local: installing it through i18next's `CustomTypeOptions` would be
-   * global and would force an integrator's own unrelated `t()` calls to satisfy our key union.
+   * The SDK's translation function. Typed as {@link StreamTFunction} so keys are checked against
+   * the generated catalog and prose call sites pass their English copy inline. The typing is local,
+   * not installed through i18next's `CustomTypeOptions`, which would constrain an app's own `t()`
+   * calls.
    */
   t: StreamTFunction;
   tDateTimeParser: import('@stream-io/i18n').TDateTimeParser;

package/src/hooks/__tests__/useAttachmentPickerBottomSheet.test.ts

@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-native';
+
+import { useAttachmentPickerBottomSheet } from '../useAttachmentPickerBottomSheet';
+
+describe('useAttachmentPickerBottomSheet', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('opens the sheet at its first snap point', () => {
+    const snapToIndex = jest.fn();
+    const { result } = renderHook(() => useAttachmentPickerBottomSheet());
+
+    result.current.openPicker({ current: { snapToIndex } as never });
+
+    expect(snapToIndex).toHaveBeenCalledWith(0);
+  });
+
+  it('warns that the sheet cannot open when the ref has no snapToIndex', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const { result } = renderHook(() => useAttachmentPickerBottomSheet());
+
+    result.current.openPicker({ current: null });
+
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('snapToIndex'));
+  });
+});

package/src/hooks/__tests__/useChannelMuteActive.test.tsx

@@ -21,7 +21,7 @@ const createClient = ({
     // muted USERS stay client-global — useMutedUsers reads them reactively from mutedUsersStore.
     mutedUsersStore: new StateStore({ mutedUsers }),
     on: jest.fn(() => ({ unsubscribe: jest.fn() })),
-    userID: CURRENT_USER_ID,
+    userId: CURRENT_USER_ID,
   }) as never;
 
 // Back the mock channel with a real StateStore (so `useStateStore` can subscribe to `members` and

package/src/hooks/__tests__/useIsDirectChat.test.tsx

@@ -23,7 +23,7 @@ describe('useIsDirectChat', () => {
     jest
       .spyOn(ChatContext, 'useChatContext')
       .mockImplementation(
-        () => ({ client: { userID: OWN_USER_ID } }) as unknown as ChatContextValue,
+        () => ({ client: { userId: OWN_USER_ID } }) as unknown as ChatContextValue,
       );
   });
 

package/src/hooks/__tests__/useRAFCoalescedValue.test.tsx

@@ -0,0 +1,80 @@
+import { act, renderHook } from '@testing-library/react-native';
+
+import { useRAFCoalescedValue } from '../useRAFCoalescedValue';
+
+describe('useRAFCoalescedValue', () => {
+  let frames: FrameRequestCallback[];
+
+  beforeEach(() => {
+    frames = [];
+    jest.spyOn(global, 'requestAnimationFrame').mockImplementation((callback) => {
+      frames.push(callback);
+      return frames.length;
+    });
+    jest.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const flushFrame = () =>
+    act(() => {
+      frames.splice(0).forEach((callback) => callback(0));
+    });
+
+  it('publishes the latest value once per frame', () => {
+    const { rerender, result } = renderHook(
+      ({ value }: { value: string }) => useRAFCoalescedValue(value, true),
+      { initialProps: { value: 'a' } },
+    );
+
+    rerender({ value: 'b' });
+    rerender({ value: 'c' });
+    expect(result.current).toBe('a');
+    expect(frames).toHaveLength(1);
+
+    flushFrame();
+    expect(result.current).toBe('c');
+  });
+
+  it('returns the value as is while disabled', () => {
+    const { rerender, result } = renderHook(
+      ({ value }: { value: string }) => useRAFCoalescedValue(value, false),
+      { initialProps: { value: 'a' } },
+    );
+
+    rerender({ value: 'b' });
+    expect(result.current).toBe('b');
+    expect(frames).toHaveLength(0);
+  });
+
+  it('shows the last published value when re-enabled with it', () => {
+    const { rerender, result } = renderHook(
+      ({ isEnabled, value }: { isEnabled: boolean; value: string }) =>
+        useRAFCoalescedValue(value, isEnabled),
+      { initialProps: { isEnabled: true, value: 'a' } },
+    );
+
+    rerender({ isEnabled: true, value: 'b' });
+    flushFrame();
+    rerender({ isEnabled: false, value: 'c' });
+    rerender({ isEnabled: true, value: 'b' });
+
+    expect(result.current).toBe('b');
+  });
+
+  it('publishes a value that changed while disabled once re-enabled', () => {
+    const { rerender, result } = renderHook(
+      ({ isEnabled, value }: { isEnabled: boolean; value: string }) =>
+        useRAFCoalescedValue(value, isEnabled),
+      { initialProps: { isEnabled: true, value: 'a' } },
+    );
+
+    rerender({ isEnabled: false, value: 'b' });
+    rerender({ isEnabled: true, value: 'b' });
+    flushFrame();
+
+    expect(result.current).toBe('b');
+  });
+});

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -58,7 +58,7 @@ const createChannelMock = (params?: {
         getLatestValue: () => ({ userIds: blockedUserIds }),
         subscribeWithSelector: () => () => {},
       },
-      userID: ownUserId,
+      userId: ownUserId,
     }),
     state: {
       members: {

package/src/hooks/actions/__tests__/useChannelActions.test.tsx

@@ -58,7 +58,7 @@ const createClient = () => ({
   unblockUser: jest.fn(),
   unmuteUser: jest.fn(),
   uploadImage: jest.fn().mockResolvedValue({ file: 'https://cdn.example.com/uploaded.png' }),
-  userID: 'current-user-id',
+  userId: 'current-user-id',
 });
 
 const createChannel = (client: ReturnType<typeof createClient>) =>
@@ -273,7 +273,7 @@ describe('useChannelActions', () => {
       await result.current.addMembers(['u-1', 'u-2']);
     });
 
-    expect(channel.addMembers).toHaveBeenCalledWith(['u-1', 'u-2']);
+    expect(channel.addMembers).toHaveBeenCalledWith({ members: ['u-1', 'u-2'] });
     expect(client.notifications.add).toHaveBeenCalledWith({
       message: '{{count}} members added',
       options: {
@@ -326,7 +326,7 @@ describe('useChannelActions', () => {
       await result.current.addMembers(['u-1'], { onSuccess });
     });
 
-    expect(channel.addMembers).toHaveBeenCalledWith(['u-1']);
+    expect(channel.addMembers).toHaveBeenCalledWith({ members: ['u-1'] });
     expect(onSuccess).toHaveBeenCalledTimes(1);
   });
 
@@ -357,7 +357,7 @@ describe('useChannelActions', () => {
       await result.current.removeMembers(['u-1', 'u-2']);
     });
 
-    expect(channel.removeMembers).toHaveBeenCalledWith(['u-1', 'u-2']);
+    expect(channel.removeMembers).toHaveBeenCalledWith({ members: ['u-1', 'u-2'] });
     expect(client.notifications.add).toHaveBeenCalledWith({
       message: '{{count}} members removed',
       options: {

package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx

@@ -35,15 +35,15 @@ const createMemberMock = (userId = 'target-user-id'): ChannelMemberResponse =>
     user_id: userId,
   }) as ChannelMemberResponse;
 
-const createChannelMock = (params?: { blockedUserIds?: string[]; userID?: string }): Channel => {
-  const { blockedUserIds = [], userID = 'current-user-id' } = params ?? {};
+const createChannelMock = (params?: { blockedUserIds?: string[]; userId?: string }): Channel => {
+  const { blockedUserIds = [], userId = 'current-user-id' } = params ?? {};
   return {
     getClient: () => ({
       blockedUsers: {
         getLatestValue: () => ({ userIds: blockedUserIds }),
         subscribeWithSelector: () => () => {},
       },
-      userID,
+      userId,
     }),
   } as unknown as Channel;
 };
@@ -84,7 +84,7 @@ describe('useChannelMemberActionItems', () => {
   });
 
   it('returns no action items when the member is the current user', () => {
-    const currentUserChannel = createChannelMock({ userID: 'target-user-id' });
+    const currentUserChannel = createChannelMock({ userId: 'target-user-id' });
 
     const { result } = renderHook(() =>
       useChannelMemberActionItems({ channel: currentUserChannel, member }),
@@ -101,7 +101,7 @@ describe('useChannelMemberActionItems', () => {
     });
 
     const wrapper = ({ children }: PropsWithChildren) => (
-      <ChatProvider value={{ client: { mutedUsersStore, userID: 'current-user-id' } } as never}>
+      <ChatProvider value={{ client: { mutedUsersStore, userId: 'current-user-id' } } as never}>
         {children}
       </ChatProvider>
     );
@@ -166,7 +166,7 @@ describe('useChannelMemberActionItems', () => {
     jest
       .spyOn(useChannelOwnCapabilitiesModule, 'useChannelOwnCapabilities')
       .mockReturnValue(['update-channel-members']);
-    const currentUserChannel = createChannelMock({ userID: 'target-user-id' });
+    const currentUserChannel = createChannelMock({ userId: 'target-user-id' });
 
     const { result } = renderHook(() =>
       useChannelMemberActionItems({ channel: currentUserChannel, member }),

package/src/hooks/actions/useChannelActionItems.tsx

@@ -22,10 +22,8 @@ import { useChannelMembershipState } from '../useChannelMembershipState';
 import { useIsDirectChat } from '../useIsDirectChat';
 import { useStateStore } from '../useStateStore';
 
-// Lazily resolved to avoid a static import cycle with defaultComponents.ts
-// (defaultComponents → ChannelDetails*/ChannelPreview* → this file). Statically
-// importing defaultIcons corrupts module-init order; require it at call time
-// instead. Same pattern as ComponentsContext's getDefaults().
+// Required lazily: a static import of defaultComponents.ts would form a cycle
+// (defaultComponents -> ChannelDetails*/ChannelPreview* -> this file) and corrupt init order.
 let cachedDefaultIcons: IconsMap | undefined;
 const getDefaultIcons = (): IconsMap => {
   if (!cachedDefaultIcons) {
@@ -40,37 +38,22 @@ export type ChannelActionItem = ActionItem<
   'mute' | 'muteUser' | 'block' | 'leave' | 'deleteChannel' | 'pin' | string
 > & {
   /**
-   * Per item routing **within a channel preview interaction** (swipe row vs
-   * the sheet that opens from it). Only meaningful when the items are consumed
-   * from `<ChannelSwipableWrapper>`:
-   *
-   * - `'swipe'`: shown only in the swipe-row chips.
-   * - `'sheet'`: shown only in the swipe-triggered options sheet.
-   * - `'both'`: shown in both swipe row and sheet.
-   *
-   * The standalone Channel Details screen does **not** filter by `placement` -
-   * use {@link ChannelActionSurface} (`surface`) instead to vary items between
-   * the channel list and the Channel Details screen.
+   * Where the item shows in a channel preview: `'swipe'` (swipe-row chips only), `'sheet'` (the
+   * options sheet opened from the swipe row only) or `'both'`. Only `<ChannelSwipableWrapper>`
+   * reads it; the Channel Details screen does not, so use `surface` to vary items there.
    */
   placement: 'both' | 'sheet' | 'swipe';
 };
 
 /**
- * Identifies which top level UI surface is requesting channel action items.
- * Passed verbatim into {@link ChannelActionItemsParams} so the default builder
- * and any integrator supplied `getChannelActionItems` can branch on it - i.e.
- * to drop or relabel an item on a specific surface or to provide an entirely
- * different builder per surface.
+ * The UI surface requesting channel action items, passed through to `getChannelActionItems` so it
+ * can drop or relabel items per surface.
  *
- * - `'list'`: anything driven by a ChannelList interaction, the swipe row
- *   chips on a channel preview and the bottom sheet that opens from them.
- *   Subrouting between the swipe row and the sheet is handled by the per item
- *   {@link ChannelActionItem.placement} field.
- * - `'details'`: items for the standalone Channel Details screen.
+ * - `'list'`: ChannelList interactions, the swipe row of a channel preview and its options sheet
+ *   (routed between the two by {@link ChannelActionItem.placement}).
+ * - `'details'`: the standalone Channel Details screen.
  *
- * `surface` operates at the call site level (which UI is asking). It is
- * optional and when omitted, the default builder applies no surface specific
- * filtering and returns every item it would otherwise produce.
+ * When omitted, the default builder applies no surface filtering.
  */
 export type ChannelActionSurface = 'list' | 'details';
 
@@ -129,7 +112,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
     t,
     channel,
   } = channelActionItemsParams;
-  const ownUserId = channel.getClient().userID;
+  const ownUserId = channel.getClient().userId;
 
   const actionItems: ChannelActionItem[] = [
     {

package/src/hooks/actions/useChannelActions.ts

@@ -39,7 +39,7 @@ export type ChannelActions = {
 export const getOtherUserInDirectChannel = (channel: Channel) => {
   const members = Object.values(channel.state.members);
   return members.length === 2
-    ? members.find((member) => member.user?.id !== channel.getClient().userID)
+    ? members.find((member) => member.user?.id !== channel.getClient().userId)
     : undefined;
 };
 
@@ -62,7 +62,7 @@ export const useChannelActions = (channel: Channel) => {
   const { client } = useChatContext();
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
-  const ownUserId = client.userID;
+  const ownUserId = client.userId;
 
   const pin = useStableCallback(async (options?: ChannelActionOptions) => {
     try {
@@ -174,7 +174,7 @@ export const useChannelActions = (channel: Channel) => {
     }
     if (ownUserId) {
       try {
-        await channel.removeMembers([ownUserId]);
+        await channel.removeMembers({ members: [ownUserId] });
         addNotification({
           message: t('channel.left.text', 'Left channel'),
           options: { severity: 'success', type: 'api:channel:leave:success' },
@@ -202,7 +202,7 @@ export const useChannelActions = (channel: Channel) => {
         return;
       }
       try {
-        await channel.removeMembers(memberIds);
+        await channel.removeMembers({ members: memberIds });
         addNotification({
           message: t('channel.membersRemoved.text', {
             count: memberIds.length,
@@ -234,7 +234,7 @@ export const useChannelActions = (channel: Channel) => {
         return;
       }
       try {
-        await channel.addMembers(memberIds);
+        await channel.addMembers({ members: memberIds });
         addNotification({
           message: t('channel.membersAdded.text', {
             count: memberIds.length,

package/src/hooks/actions/useChannelMemberActionItems.tsx

@@ -16,10 +16,8 @@ import { IconProps } from '../../icons';
 import { useChannelOwnCapabilities } from '../useChannelOwnCapabilities';
 import { useStateStore } from '../useStateStore';
 
-// Lazily resolved to avoid a static import cycle with defaultComponents.ts
-// (defaultComponents → ChannelDetails*/ChannelPreview* → this file). Statically
-// importing defaultIcons corrupts module-init order; require it at call time
-// instead. Same pattern as ComponentsContext's getDefaults().
+// Required lazily: a static import of defaultComponents.ts would form a cycle
+// (defaultComponents -> ChannelDetails*/ChannelPreview* -> this file) and corrupt init order.
 let cachedDefaultIcons: IconsMap | undefined;
 const getDefaultIcons = (): IconsMap => {
   if (!cachedDefaultIcons) {
@@ -81,8 +79,7 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
 
   const actionItems: ChannelMemberActionItem[] = [];
 
-  // Muting or blocking yourself is meaningless, so these actions are only
-  // added for other members.
+  // Muting or blocking yourself is meaningless, so these actions are only for other members.
   if (!isCurrentUser) {
     actionItems.push(
       {
@@ -214,7 +211,7 @@ export const useChannelMemberActionItems = ({
 
   const isBlocked = blockedUserIds.includes(member.user?.id ?? '');
 
-  const isCurrentUser = member.user?.id === channel.getClient().userID;
+  const isCurrentUser = member.user?.id === channel.getClient().userId;
 
   const channelMemberActionItemsParams = useMemo<ChannelMemberActionItemsParams>(
     () => ({

package/src/hooks/index.ts

@@ -13,6 +13,7 @@ export * from './useChannelMuteActive';
 export * from './useIsDirectChat';
 export * from './useIsChannelMember';
 export * from './useStreami18n';
+export * from './useTranslatedMessage';
 export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useScreenOrientation';

package/src/hooks/messagePreview/__tests__/useMessageDeliveryStatus.test.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 
 import { act, renderHook } from '@testing-library/react-native';
-import { fromPartial } from '@total-typescript/shoehorn';
-
-import type { Channel, UserResponse } from 'stream-chat';
+import { asTimestampNS } from 'stream-chat';
+import type { Channel, MsgRef } from 'stream-chat';
 
 import { Chat } from '../../../components/Chat/Chat';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
@@ -12,7 +11,16 @@ import { generateUser } from '../../../mock-builders/generator/user';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../useMessageDeliveryStatus';
 
 describe('useMessageDeliveryStatus', () => {
-  const ownMessage = generateMessage({ user: generateUser({ id: 'me' }) });
+  const ownMessage = generateMessage({
+    timestamp: new Date('2026-01-01T10:00:00Z'),
+    user: generateUser({ id: 'me' }),
+  });
+
+  // A cursor `offsetNs` after (or, negative, before) `ownMessage`, on a message of its own.
+  const cursorAt = (offsetNs: number, msgId = `cursor-${offsetNs}`): MsgRef => ({
+    msgId,
+    timestamp: asTimestampNS(ownMessage.created_at + offsetNs),
+  });
 
   const setup = async ({
     isReadEventsEnabled = true,
@@ -32,14 +40,11 @@ describe('useMessageDeliveryStatus', () => {
 
   const setReceipts = (
     channel: Channel,
-    {
-      delivered = {},
-      readers = {},
-    }: { delivered?: Record<string, UserResponse[]>; readers?: Record<string, UserResponse[]> },
+    { delivered = null, read = null }: { delivered?: MsgRef | null; read?: MsgRef | null },
   ) =>
     channel.messageReceiptsTracker.snapshotStore.partialNext({
-      deliveredByMessageId: delivered,
-      readersByMessageId: readers,
+      lastDeliveredRefByOthers: delivered,
+      lastReadRefByOthers: read,
     });
 
   it('returns NOT_SENT_BY_CURRENT_USER when read events are disabled', async () => {
@@ -58,22 +63,55 @@ describe('useMessageDeliveryStatus', () => {
     const { channel, result } = await setup();
     expect(result.current.status).toBe(MessageDeliveryStatus.SENT);
 
-    act(() =>
-      setReceipts(channel, {
-        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
-      }),
-    );
+    act(() => setReceipts(channel, { delivered: cursorAt(0, ownMessage.id) }));
     expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
 
     act(() =>
       setReceipts(channel, {
-        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
-        readers: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
+        delivered: cursorAt(0, ownMessage.id),
+        read: cursorAt(0, ownMessage.id),
       }),
     );
     expect(result.current.status).toBe(MessageDeliveryStatus.READ);
   });
 
+  it('returns READ when another member read past the message', async () => {
+    const { channel, result } = await setup();
+
+    act(() => setReceipts(channel, { delivered: cursorAt(1000), read: cursorAt(1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.READ);
+  });
+
+  it('returns DELIVERED when the message was delivered past it but not read', async () => {
+    const { channel, result } = await setup();
+
+    act(() => setReceipts(channel, { delivered: cursorAt(1000), read: cursorAt(-1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
+  });
+
+  it('returns SENT when every cursor is before the message', async () => {
+    const { channel, result } = await setup();
+
+    act(() => setReceipts(channel, { delivered: cursorAt(-1000), read: cursorAt(-1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.SENT);
+  });
+
+  it('returns READ for a thread reply read past by another member', async () => {
+    const reply = generateMessage({
+      parent_id: 'parent',
+      timestamp: new Date('2026-01-01T10:00:00Z'),
+      user: generateUser({ id: 'me' }),
+    });
+    const { channel, result } = await setup({ lastMessage: reply });
+
+    act(() => setReceipts(channel, { delivered: cursorAt(1000), read: cursorAt(1000) }));
+
+    expect(result.current.status).toBe(MessageDeliveryStatus.READ);
+  });
+
   // The receipts tracker rebuilds its reader arrays on every snapshot, presence and user updates
   // included, so a preview row must only re-render when the status itself changes.
   it('does not re-render when the receipts change without changing the status', async () => {
@@ -95,24 +133,11 @@ describe('useMessageDeliveryStatus', () => {
       { wrapper },
     );
 
-    act(() =>
-      setReceipts(channel, {
-        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
-      }),
-    );
+    act(() => setReceipts(channel, { delivered: cursorAt(0, ownMessage.id) }));
     expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
     const rendersWhenDelivered = renders;
 
-    act(() =>
-      setReceipts(channel, {
-        delivered: {
-          [ownMessage.id]: [
-            fromPartial<UserResponse>({ id: 'other' }),
-            fromPartial<UserResponse>({ id: 'third' }),
-          ],
-        },
-      }),
-    );
+    act(() => setReceipts(channel, { delivered: cursorAt(1000) }));
     expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
     expect(renders).toBe(rendersWhenDelivered);
   });

package/src/hooks/messagePreview/useGroupedAttachments.ts

@@ -17,15 +17,15 @@ type GroupedAttachments = {
   images: Attachment[];
   videos: Attachment[];
   files: Attachment[];
-  // Narrowed by `isVoiceRecordingAttachment` below so consumers can read `.custom.duration`
-  // without re-asserting the subtype.
+  // Narrowed by `isVoiceRecordingAttachment` so consumers can read `.custom.duration`.
   voiceRecordings: VoiceRecordingAttachment[];
 };
 
 /**
- * Hook to group attachments by type.
- * @param {Attachment[]} attachments
- * @returns {GroupedAttachments}
+ * Groups attachments by type. Attachments matching no group are dropped.
+ *
+ * @param attachments The attachments to group.
+ * @returns The attachments per type.
  */
 export const useGroupedAttachments = (attachments?: Attachment[]) => {
   return useMemo<GroupedAttachments>(() => {