feat: snackbar notifications

examples/SampleApp/yarn.lock

@@ -8291,10 +8291,10 @@ stream-chat-react-native-core@8.1.0:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.43.1:
-  version "9.43.1"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.43.1.tgz#5b2cccdd95ce92cc44c6691c527eeee271ce37bd"
-  integrity sha512-lP1B3ulv2B20tqbn0xWUaVuKgBPAtgiKRGTBgmZsAIcOKDziR0xbYmZuC8zo9+L6yPh3euSdbF5w+CQ/Rn1FiQ==
+stream-chat@^9.43.2:
+  version "9.43.2"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.43.2.tgz#2b53af3a4ce00c90f531cb44f01b6e09a91bfe13"
+  integrity sha512-+o1f8RfqqeBq7ShH74TyZDei4+8UWagKFz2xYhmANHCNl2bNPuLIAaDbV7sK3Liw9eg/26Kml/gUgGoSLUwZVA==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"

package/package.json

@@ -83,7 +83,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
-    "stream-chat": "^9.43.1",
+    "stream-chat": "^9.43.2",
     "use-sync-external-store": "^1.5.0"
   },
   "peerDependencies": {

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -3,7 +3,7 @@ import { Linking, Platform, Pressable, StyleSheet, Text } from 'react-native';
 
 import { FlatList } from 'react-native-gesture-handler';
 
-import { CommandSearchSource, CommandSuggestion } from 'stream-chat';
+import { CommandSearchSource, CommandSuggestion, notifyCommandDisabled } from 'stream-chat';
 
 import { AttachmentMediaPicker } from './AttachmentMediaPicker/AttachmentMediaPicker';
 
@@ -58,7 +58,7 @@ export const AttachmentCommandNativePickerItem = ({ item }: { item: CommandSugge
   const { close } = useBottomSheetContext();
 
   const handlePress = useCallback(() => {
-    if (messageComposer.isCommandDisabled(item)) {
+    if (notifyCommandDisabled(messageComposer, item)) {
       return;
     }
 
@@ -77,7 +77,7 @@ export const AttachmentCommandPickerItem = ({ item }: { item: CommandSuggestion
   const { inputBoxRef } = useMessageInputContext();
 
   const handlePress = useCallback(() => {
-    if (messageComposer.isCommandDisabled(item)) {
+    if (notifyCommandDisabled(messageComposer, item)) {
       return;
     }
 

package/src/components/AttachmentPicker/components/__tests__/AttachmentPickerContent.test.tsx

@@ -1,27 +1,31 @@
 import React from 'react';
 
 import { fireEvent, render, screen } from '@testing-library/react-native';
-import type { CommandSuggestion } from 'stream-chat';
-
-import {
-  AttachmentCommandNativePickerItem,
-  AttachmentCommandPickerItem,
-} from '../AttachmentPickerContent';
+import { type CommandSuggestion, notifyCommandDisabled } from 'stream-chat';
 
 jest.mock('stream-chat', () => ({
   CommandSearchSource: jest.fn(() => ({
     query: jest.fn(() => ({ items: [] })),
   })),
+  notifyCommandDisabled: jest.fn(),
 }));
 
+import {
+  AttachmentCommandNativePickerItem,
+  AttachmentCommandPickerItem,
+} from '../AttachmentPickerContent';
+
 jest.mock('../AttachmentMediaPicker/AttachmentMediaPicker', () => ({
   AttachmentMediaPicker: () => null,
 }));
 
+const mockNotifyCommandDisabled = jest.mocked(notifyCommandDisabled);
 const mockClose = jest.fn((callback?: () => void) => callback?.());
 const mockFocus = jest.fn();
-const mockIsCommandDisabled = jest.fn();
 const mockSetCommand = jest.fn();
+const mockMessageComposer = {
+  textComposer: { setCommand: mockSetCommand },
+};
 
 jest.mock('../../../../contexts', () => ({
   useAttachmentPickerContext: jest.fn(() => ({
@@ -30,10 +34,7 @@ jest.mock('../../../../contexts', () => ({
   useBottomSheetContext: jest.fn(() => ({
     close: mockClose,
   })),
-  useMessageComposer: jest.fn(() => ({
-    isCommandDisabled: mockIsCommandDisabled,
-    textComposer: { setCommand: mockSetCommand },
-  })),
+  useMessageComposer: jest.fn(() => mockMessageComposer),
   useMessageInputContext: jest.fn(() => ({
     inputBoxRef: { current: { focus: mockFocus } },
   })),
@@ -73,30 +74,30 @@ describe('AttachmentPickerContent commands', () => {
   beforeEach(() => {
     mockClose.mockClear();
     mockFocus.mockClear();
-    mockIsCommandDisabled.mockReset();
+    mockNotifyCommandDisabled.mockReset();
     mockSetCommand.mockClear();
   });
 
-  it('does not focus the input when a disabled command is pressed', () => {
-    mockIsCommandDisabled.mockReturnValue(true);
+  it('does not focus the input when a disabled command notification is emitted', () => {
+    mockNotifyCommandDisabled.mockReturnValue(true);
 
     render(<AttachmentCommandPickerItem item={command} />);
 
     fireEvent.press(screen.getByText('ban'));
 
-    expect(mockIsCommandDisabled).toHaveBeenCalledWith(command);
+    expect(mockNotifyCommandDisabled).toHaveBeenCalledWith(mockMessageComposer, command);
     expect(mockSetCommand).not.toHaveBeenCalled();
     expect(mockFocus).not.toHaveBeenCalled();
   });
 
-  it('does not close the picker or focus the input when a disabled command is pressed in native picker mode', () => {
-    mockIsCommandDisabled.mockReturnValue(true);
+  it('does not close the picker or focus the input when a disabled command notification is emitted in native picker mode', () => {
+    mockNotifyCommandDisabled.mockReturnValue(true);
 
     render(<AttachmentCommandNativePickerItem item={command} />);
 
     fireEvent.press(screen.getByText('ban'));
 
-    expect(mockIsCommandDisabled).toHaveBeenCalledWith(command);
+    expect(mockNotifyCommandDisabled).toHaveBeenCalledWith(mockMessageComposer, command);
     expect(mockSetCommand).not.toHaveBeenCalled();
     expect(mockClose).not.toHaveBeenCalled();
     expect(mockFocus).not.toHaveBeenCalled();

package/src/components/Channel/__tests__/useMessageListPagination.test.tsx

@@ -1,6 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat';
 
+import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
@@ -11,6 +14,12 @@ import { channelInitialState } from '../hooks/useChannelDataState';
 import * as ChannelStateHooks from '../hooks/useChannelDataState';
 import { useMessageListPagination } from '../hooks/useMessageListPagination';
 
+const createChatWrapper =
+  (client: StreamChat) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+
 describe('useMessageListPagination', () => {
   let chatClient: StreamChat;
   let channel: ChannelType;
@@ -618,17 +627,20 @@ describe('useMessageListPagination', () => {
         };
 
         // Mock query if needed
-        const queryMock = jest.fn();
+        const queryMock = jest.fn().mockResolvedValue({ messages: [] });
         channel.query = queryMock as unknown as typeof channel.query;
 
         // Set up mocks
         const jumpToMessageFinishedMock = jest.fn();
         mockedHook(channelInitialState, { jumpToMessageFinished: jumpToMessageFinishedMock });
         const setChannelUnreadStateMock = jest.fn();
         const setTargetedMessageIdMock = jest.fn((message) => message);
+        const addNotificationSpy = jest.spyOn(chatClient.notifications, 'add');
 
         // Render hook
-        const { result } = renderHook(() => useMessageListPagination({ channel }));
+        const { result } = renderHook(() => useMessageListPagination({ channel }), {
+          wrapper: createChatWrapper(chatClient),
+        });
 
         // Act
         await act(async () => {
@@ -642,6 +654,21 @@ describe('useMessageListPagination', () => {
         // Assert
         await waitFor(() => {
           expect(queryMock).toHaveBeenCalledTimes(expectedQueryCalls);
+          if (expectedQueryCalls) {
+            expect(addNotificationSpy).toHaveBeenCalledWith({
+              message: 'Failed to jump to the first unread message',
+              options: {
+                originalError: expect.any(Error),
+                severity: 'error',
+                tags: ['target:channel'],
+                type: 'channel:jumpToFirstUnread:failed',
+              },
+              origin: {
+                context: { feature: 'jumpToFirstUnread' },
+                emitter: 'Channel',
+              },
+            });
+          }
           expect(jumpToMessageFinishedMock).toHaveBeenCalledTimes(
             expectedJumpToMessageFinishedCalls,
           );

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -6,8 +6,10 @@ import { Channel, ChannelState, MessageResponse } from 'stream-chat';
 import { useChannelMessageDataState } from './useChannelDataState';
 
 import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../hooks';
 import { findInMessagesByDate, findInMessagesById } from '../../../utils/utils';
+import { useNotificationApi } from '../../Notifications';
 
 const defaultDebounceInterval = 500;
 const debounceOptions = {
@@ -22,6 +24,8 @@ const debounceOptions = {
  * @param channel The channel object for which the message list pagination is being handled.
  */
 export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
   const {
     copyMessagesStateFromChannel,
     jumpToLatestMessage,
@@ -180,6 +184,18 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
     },
   );
 
+  const notifyJumpToFirstUnreadError = useStableCallback((error: unknown) => {
+    addNotification({
+      context: { feature: 'jumpToFirstUnread' },
+      emitter: 'Channel',
+      error: error instanceof Error ? error : undefined,
+      message: t('Failed to jump to the first unread message'),
+      severity: 'error',
+      targetPanels: ['channel'],
+      type: 'channel:jumpToFirstUnread:failed',
+    });
+  });
+
   /**
    * Loads channel at first unread message.
    */
@@ -225,7 +241,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
               } catch (error) {
                 setLoading(false);
                 loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
-                console.log('Loading channel at first unread message failed with error:', error);
+                notifyJumpToFirstUnreadError(error);
                 return;
               }
 
@@ -275,7 +291,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
             } catch (error) {
               setLoading(false);
               loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-              console.log('Loading channel at first unread message failed with error:', error);
+              notifyJumpToFirstUnreadError(error);
               return;
             }
           }
@@ -296,7 +312,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
             setTargetedMessage(firstUnreadMessageId);
           }
         } catch (error) {
-          console.log('Loading channel at first unread message failed with error:', error);
+          notifyJumpToFirstUnreadError(error);
         }
       },
     );

package/src/components/ChannelList/ChannelList.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { StyleSheet, View } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
 
 import {
@@ -21,6 +22,7 @@ import {
   ChannelsProvider,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { SwipeRegistryProvider } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import type { ChannelListEventListenerOptions } from '../../types/types';
 
@@ -250,6 +252,7 @@ export const ChannelList = (props: ChannelListProps) => {
 
   const [forceUpdate, setForceUpdate] = useState(0);
   const { client, enableOfflineSupport } = useChatContext();
+  const { NotificationList } = useComponentsContext();
   const channelManager = useMemo(() => client.createChannelManager({}), [client]);
 
   /**
@@ -370,8 +373,17 @@ export const ChannelList = (props: ChannelListProps) => {
   return (
     <ChannelsProvider value={channelsContext}>
       <SwipeRegistryProvider>
-        <ChannelListView />
+        <View style={styles.container}>
+          <ChannelListView />
+          <NotificationList panel='channel-list' />
+        </View>
       </SwipeRegistryProvider>
     </ChannelsProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});