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

package/src/components/Message/hooks/useCreateMessageActionHandlers.ts

@@ -197,7 +197,7 @@ export const useCreateMessageActionHandlers = ({
 
     const isMuted = isUserMuted(
       client.mutedUsersStore.getLatestValue().mutedUsers,
-      client.userID,
+      client.userId,
       message.user.id,
     );
 
@@ -371,9 +371,9 @@ export const useCreateMessageActionHandlers = ({
     const userExistingReaction = own_reactions.find((reaction) => {
       // `own_reactions` should only hold the current user's reactions; checked anyway so a bad
       // message update cannot break toggling.
-      if (reaction.user && client.userID === reaction.user.id && reaction.type === reactionType) {
+      if (reaction.user && client.userId === reaction.user.id && reaction.type === reactionType) {
         return true;
-      } else if (reaction.user && client.userID !== reaction.user.id) {
+      } else if (reaction.user && client.userId !== reaction.user.id) {
         console.warn(
           'message.own_reactions contained reactions from a different user, this indicates a bug',
         );

package/src/components/Message/hooks/useProcessReactions.ts

@@ -113,7 +113,7 @@ export const useProcessReactions = (props: UseProcessReactionsParams) => {
           Icon: getEmojiByReactionType(reactionType, supportedReactions),
           lastReactionAt: convertTimestampToDate(last_reaction_at) ?? null,
           latestReactedUserNames,
-          own: isOwnReaction(reactionType, own_reactions, latest_reactions, client.userID),
+          own: isOwnReaction(reactionType, own_reactions, latest_reactions, client.userId),
           type: reactionType,
           unlistedReactedUserCount: count - latestReactedUserNames.length,
         };
@@ -126,7 +126,7 @@ export const useProcessReactions = (props: UseProcessReactionsParams) => {
       totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
     };
   }, [
-    client.userID,
+    client.userId,
     reaction_groups,
     own_reactions,
     latest_reactions,

package/src/components/Message/hooks/useUserMuteActive.ts

@@ -32,7 +32,7 @@ export const isUserMuted = (
  */
 export const useUserMuteActive = (user: UserResponse | null | undefined) => {
   const { client } = useChatContext();
-  const currentUserId = client?.userID;
+  const currentUserId = client?.userId;
   const userId = user?.id;
 
   const selector = useCallback(

package/src/components/MessageInput/MessageComposer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import Animated, {
   Extrapolation,
@@ -328,7 +328,9 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   }));
   const { bottom } = useSafeAreaInsets();
 
-  const BOTTOM_OFFSET = isKeyboardVisible || selectedPicker ? 16 : bottom ? bottom : 16;
+  const safeAreaBottomOffset = Platform.OS === 'android' ? bottom + 16 : bottom;
+  const BOTTOM_OFFSET =
+    isKeyboardVisible || selectedPicker ? 16 : bottom ? safeAreaBottomOffset : 16;
 
   const micPositionContextValue = useMemo(
     () => ({ micPositionX, micPositionY }),

package/src/components/MessageList/MessageFlashList.tsx

@@ -321,7 +321,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       channel,
       markRead,
       readEvents,
-      userId: client.userID,
+      userId: client.userId,
     });
 
   const renderItem = useCallback(
@@ -343,7 +343,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
-    client.userID,
+    client.userId,
   );
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(true);

package/src/components/MessageList/MessageList.tsx

@@ -321,7 +321,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       channel,
       markRead,
       readEvents,
-      userId: client.userID,
+      userId: client.userId,
     });
 
   const previousDerivedItemsRef = useRef<Map<string, MessageListItemWithNeighbours>>(undefined);
@@ -355,7 +355,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
-    client.userID,
+    client.userId,
   );
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(false);

package/src/components/MessageList/__tests__/MessageList.test.tsx

@@ -1375,7 +1375,9 @@ describe('MessageList in a thread', () => {
     expect(markReadLocally).not.toHaveBeenCalled();
   });
 
-  it("places the unread separator from the thread's unread state, not the channel's", async () => {
+  // The LLC seeds the thread's snapshot from the channel's read state, which says nothing about the
+  // replies, so a thread draws no separator from either snapshot.
+  it('draws no unread separator in a thread', async () => {
     const { channel, queryAllByLabelText, replies, threadInstance } = await setup();
 
     act(() =>
@@ -1386,12 +1388,28 @@ describe('MessageList in a thread', () => {
     );
     expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(0);
 
-    act(() =>
-      threadInstance.messagePaginator.unreadStateSnapshot.partialNext({
-        firstUnreadMessageId: replies[3].id,
-        unreadCount: 2,
-      }),
-    );
-    await waitFor(() => expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(1));
+    // The first reply too, whose separator row would be the parent message.
+    for (const firstUnread of [replies[0], replies[3]]) {
+      await act(async () => {
+        threadInstance.messagePaginator.unreadStateSnapshot.partialNext({
+          firstUnreadMessageId: firstUnread.id,
+          unreadCount: 2,
+        });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(0);
+    }
+
+    // The live boundary, from the read time rather than a frozen first-unread ID.
+    await act(async () => {
+      threadInstance.messagePaginator.unreadStateSnapshot.next({
+        firstUnreadMessageId: null,
+        lastReadAt: replies[1].created_at,
+        lastReadMessageId: replies[1].id,
+        unreadCount: 3,
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(0);
   });
 });

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.tsx

@@ -75,7 +75,7 @@ describe('ScrollToBottomButton', () => {
     const i18nInstance = new Streami18n();
     const translators = await i18nInstance.init();
     // The button reads OUR user's count from `channel.state` (a v10 reactive StateStore) via
-    // `useStateStore`, keyed by the chat client's userID. Seed the `read` slice with 3 unread
+    // `useStateStore`, keyed by the chat client's `userId`. Seed the `read` slice with 3 unread
     // for that user.
     const channel = {
       state: generateChannelState({
@@ -91,7 +91,7 @@ describe('ScrollToBottomButton', () => {
     const { getByTestId, getByText } = render(
       <ThemeProvider>
         <TranslationProvider value={{ ...translators, t } as unknown as TranslationContextValue}>
-          <ChatProvider value={{ client: { userID: 'me' } } as unknown as ChatContextValue}>
+          <ChatProvider value={{ client: { userId: 'me' } } as unknown as ChatContextValue}>
             <ChannelProvider value={{ channel } as unknown as ChannelContextValue}>
               <ScrollToBottomButton onPress={() => null} showNotification={true} />
             </ChannelProvider>
@@ -139,7 +139,7 @@ describe('ScrollToBottomButton', () => {
       <ThemeProvider>
         <AccessibilityProvider value={{ enabled: true }}>
           <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
-            <ChatProvider value={{ client: { userID: 'me' } } as unknown as ChatContextValue}>
+            <ChatProvider value={{ client: { userId: 'me' } } as unknown as ChatContextValue}>
               <ChannelProvider value={{ channel } as unknown as ChannelContextValue}>
                 <ScrollToBottomButton onPress={() => null} showNotification={true} />
               </ChannelProvider>

package/src/components/MessageList/hooks/useOwnUnreadCount.ts

@@ -14,7 +14,7 @@ import { useStateStore } from '../../../hooks/useStateStore';
  */
 export const useOwnUnreadCount = (channel: Channel | undefined) => {
   const { client } = useChatContext();
-  const userId = client?.userID;
+  const userId = client?.userId;
   const selector = useMemo(
     () => (state: ReadState) => ({
       unreadCount: userId ? (state.read[userId]?.unread_messages ?? 0) : 0,

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -36,7 +36,7 @@ export const MessageUserReactionsItem = ({
   const styles = useStyles();
 
   const { client } = useChatContext();
-  const isOwnReaction = client.userID === id;
+  const isOwnReaction = client.userId === id;
   const { t } = useTranslationContext();
 
   const { handleReaction } = useMessageContext();

package/src/components/MessageMenu/hooks/useMessageOwnReactions.ts

@@ -10,9 +10,9 @@ export const useMessageOwnReactions = () => {
     const ownReactionTypes = message?.own_reactions?.map((reaction) => reaction.type) || [];
     const latestReactionTypesByCurrentUser =
       message?.latest_reactions
-        ?.filter((reaction) => reaction.user?.id === client.userID)
+        ?.filter((reaction) => reaction.user?.id === client.userId)
         .map((reaction) => reaction.type) || [];
 
     return Array.from(new Set([...ownReactionTypes, ...latestReactionTypesByCurrentUser]));
-  }, [client.userID, message?.latest_reactions, message?.own_reactions]);
+  }, [client.userId, message?.latest_reactions, message?.own_reactions]);
 };

package/src/components/Poll/components/PollAnswersList.tsx

@@ -96,7 +96,7 @@ export const PollAnswerListItem = ({ answer }: { answer: PollVoteResponseData })
     [answer.updated_at, t, tDateTimeParser],
   );
 
-  const isMyAnswer = client.userID === answer.user?.id;
+  const isMyAnswer = client.userId === answer.user?.id;
 
   const isAnonymous = useMemo(
     () => votingVisibility === 'anonymous' && !isMyAnswer,

package/src/components/Poll/components/PollButtons.tsx

@@ -229,7 +229,7 @@ export const EndVoteButton = () => {
   const { client } = useChatContext();
   const styles = useStyles();
 
-  return !isClosed && createdBy?.id === client.userID ? (
+  return !isClosed && createdBy?.id === client.userId ? (
     <GenericPollButton
       label={t('poll.endVote.label', 'End Vote')}
       onPress={endVote}

package/src/components/Poll/hook/useIsPollCreatedByCurrentUser.ts

@@ -10,5 +10,5 @@ export const useIsPollCreatedByCurrentUser = () => {
   const { createdBy } = usePollState();
   const { client } = useChatContext();
 
-  return createdBy?.id === client.userID;
+  return createdBy?.id === client.userId;
 };

package/src/components/Thread/Thread.tsx

@@ -138,7 +138,7 @@ export const Thread = (props: PropsWithChildren<ThreadProps>) => {
         .toTail()
         .catch((err: unknown) => console.warn('Reloading the thread replies failed:', err));
 
-    return <LoadingErrorIndicator error={lastQueryError} listType='message' retry={retry} />;
+    return <LoadingErrorIndicator error={lastQueryError} listType='thread' retry={retry} />;
   }
 
   return (

package/src/components/Thread/__tests__/Thread.test.tsx

@@ -328,6 +328,8 @@ describe('Thread', () => {
       await waitFor(() => {
         expect(screen.getByTestId('loading-error')).toBeTruthy();
       });
+      // The thread's own copy, not the channel's "Error loading messages for this channel...".
+      expect(screen.getByTestId('loading-error')).toHaveTextContent('Error loading replies...');
     });
 
     it('retries the reply query — and only the reply query — from the indicator', async () => {
@@ -511,10 +513,10 @@ describe('Thread lifecycle', () => {
         generateMessage({ reply_count: 3, user }),
       );
       const readState = (unreadMessageCount: number) => ({
-        [chatClient.userID as string]: {
+        [chatClient.userId as string]: {
           lastReadAt: 1,
           unreadMessageCount,
-          user: { id: chatClient.userID as string },
+          user: { id: chatClient.userId as string },
         },
       });
       return { markRead, parentMessage, readState, testChannel };

package/src/components/ThreadList/ThreadListItem.tsx

@@ -158,7 +158,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
         channel: nextValue.channel,
         deletedAt: nextValue.deletedAt,
         ownUnreadMessageCount:
-          (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+          (client.userId && nextValue.read[client.userId]?.unreadMessageCount) || 0,
         parentMessage: nextValue.parentMessage,
       }) as const,
     [client],

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -11,13 +11,15 @@ import { primitives } from '../../theme';
 const selector = (nextValue: ThreadManagerState) =>
   ({ unseenThreadIds: nextValue.unseenThreadIds }) as const;
 
-// The paginator records a failed reload and clears it on the next successful query.
+// The paginator records a failed query and clears it on the next successful one.
 const lastQueryErrorSelector = (nextValue: { lastQueryError?: Error }) => ({
   lastQueryError: nextValue.lastQueryError,
 });
 
 export const ThreadListUnreadBanner = () => {
+  // we need the two extra states so we can tell the client's states apart
   const [loading, setLoading] = useState(false);
+  const [reloadFailed, setReloadFailed] = useState(false);
   const { client } = useChatContext();
   const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
@@ -48,8 +50,10 @@ export const ThreadListUnreadBanner = () => {
     setLoading(true);
     try {
       await client.threads.reload();
+      setReloadFailed(!!client.threads.paginator.lastQueryError);
     } catch {
       // Only with the paginator's `throwErrors`; the error is already in its state.
+      setReloadFailed(true);
     } finally {
       setLoading(false);
     }
@@ -64,7 +68,7 @@ export const ThreadListUnreadBanner = () => {
     );
   }
 
-  if (lastQueryError) {
+  if (reloadFailed && lastQueryError) {
     return (
       <Pressable onPress={handlePress} style={pressableStyle}>
         <icons.ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />

package/src/components/ThreadList/__tests__/ThreadList.test.tsx

@@ -179,4 +179,25 @@ describe('ThreadList loading states', () => {
     await waitFor(() => expect(rows()).toHaveLength(2));
     expect(screen.queryByText("Couldn't load new threads. Tap to retry")).toBeNull();
   });
+
+  it('keeps the new threads count when a different thread query failed', async () => {
+    jest
+      .spyOn(chatClient, 'queryThreadsAndHydrate')
+      .mockResolvedValueOnce({ next: undefined, threads: [makeThread()] });
+    render(
+      <Chat client={chatClient}>
+        <ThreadList isFocused />
+      </Chat>,
+    );
+    await waitFor(() => expect(rows()).toHaveLength(1));
+
+    // A failed next page, for example: the paginator records it the same way as a failed reload.
+    act(() => {
+      chatClient.threads.paginator.state.partialNext({ lastQueryError: new Error('offline') });
+      chatClient.threads.state.partialNext({ unseenThreadIds: ['a'] });
+    });
+
+    await waitFor(() => expect(screen.getByText('1 new thread')).toBeTruthy());
+    expect(screen.queryByText("Couldn't load new threads. Tap to retry")).toBeNull();
+  });
 });

package/src/components/index.ts

@@ -150,7 +150,9 @@ export * from './MessageList/hooks/useMarkRead';
 // Only the constant, for integrators running their own `jumpToMessage`.
 export { DEFAULT_HIGHLIGHT_DURATION } from './MessageList/hooks/useMessageListFocus';
 export * from './MessageList/hooks/useMessageList';
+export * from './MessageList/hooks/useOwnUnreadCount';
 export * from './MessageList/hooks/useTypingString';
+export * from './MessageList/hooks/useTypingUsers';
 export * from './MessageList/InlineDateSeparator';
 export * from './MessageList/InlineLoadingMoreIndicator';
 export * from './MessageList/InlineLoadingMoreRecentIndicator';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -149,7 +149,6 @@ import { StopMessageStreamingButton } from '../../components/MessageInput/StopMe
 import { DateHeader } from '../../components/MessageList/DateHeader';
 import { InlineDateSeparator } from '../../components/MessageList/InlineDateSeparator';
 import { InlineUnreadIndicator } from '../../components/MessageList/InlineUnreadIndicator';
-import { MessageList } from '../../components/MessageList/MessageList';
 import { MessageSystem } from '../../components/MessageList/MessageSystem';
 import { NetworkDownIndicator } from '../../components/MessageList/NetworkDownIndicator';
 import { ScrollToBottomButton } from '../../components/MessageList/ScrollToBottomButton';
@@ -448,7 +447,6 @@ const components = {
   MessageInputLeadingView,
   MessageInputTrailingView,
   MessageItemView,
-  MessageList,
   MessagePinnedHeader,
   MessageReactionPicker,
   MessageReminderHeader,

package/src/contexts/liveLocationManagerContext/LiveLocationManagerContext.tsx

@@ -35,7 +35,7 @@ export const LiveLocationManagerProvider = (
     }
     return new LiveLocationManager({
       client,
-      getDeviceId: getDeviceId ?? (() => `react-native-${Platform.OS}-${client.userID}`),
+      getDeviceId: getDeviceId ?? (() => `react-native-${Platform.OS}-${client.userId}`),
       watchLocation,
     });
   }, [client, getDeviceId, watchLocation]);

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/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>) =>

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

@@ -112,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 {

package/src/hooks/actions/useChannelMemberActionItems.tsx

@@ -211,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';