stream-chat-react-native-core 9.2.0-beta.2 → 9.2.0-beta.3

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -29,6 +29,7 @@ import { useComponentsContext } from '../../../../contexts/componentsContext/Com
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useLazyRef } from '../../../../hooks/useLazyRef';
 import { isSoundPackageAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
 
@@ -73,16 +74,6 @@ const ItemSeparatorComponent = () => {
   return <View style={[styles.itemSeparator, itemSeparator]} />;
 };
 
-const useLazyRef = <T,>(getInitialValue: () => T) => {
-  const ref = useRef<T | null>(null);
-
-  if (ref.current === null) {
-    ref.current = getInitialValue();
-  }
-
-  return ref as React.RefObject<T>;
-};
-
 const getIsAudioAttachmentPreview =
   (soundPackageAvailable: boolean) =>
   (

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -23,6 +23,7 @@ import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications';
 
 type AudioRecorderPropsWithContext = Pick<
   MessageInputContextValue,
@@ -100,9 +101,16 @@ const DeleteRecording = ({
 }: {
   deleteVoiceRecordingHandler: () => Promise<void>;
 }) => {
-  const onDeleteVoiceRecording = () => {
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
+  const onDeleteVoiceRecording = async () => {
     NativeHandlers.triggerHaptic('impactMedium');
-    deleteVoiceRecordingHandler();
+    await deleteVoiceRecordingHandler();
+    addNotification({
+      message: t('Voice message deleted'),
+      options: { severity: 'info', type: 'audioRecording:cancel:success' },
+      origin: { emitter: 'AudioRecorder' },
+    });
   };
   return (
     <Button

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Alert, Linking, StyleSheet } from 'react-native';
+import { Linking, StyleSheet } from 'react-native';
 
 import { Gesture, GestureDetector, State } from 'react-native-gesture-handler';
 import Animated, {
@@ -24,6 +24,7 @@ import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications';
 import { ButtonStylesConfig, useButtonStyles } from '../../../ui/Button/hooks/useButtonStyles';
 import { useMicPositionContext } from '../../contexts/MicPositionContext';
 
@@ -92,6 +93,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     },
   } = useTheme();
   const buttonStyles = useButtonStyles(buttonStylesConfig);
+  const { addNotification } = useNotificationApi();
 
   const onPressHandler = useStableCallback(() => {
     if (handlePress) {
@@ -99,7 +101,14 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     }
     if (!recording) {
       NativeHandlers.triggerHaptic('notificationError');
-      Alert.alert(t('Hold to start recording.'));
+      addNotification({
+        message: 'Hold to record. Release to save.',
+        options: {
+          severity: 'info',
+          type: 'validation:audio:recording:hold-required',
+        },
+        origin: { emitter: 'AudioRecordingButton' },
+      });
     }
   });
 
@@ -115,18 +124,23 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       }
       const permissionsGranted = await startVoiceRecording();
       if (!permissionsGranted) {
-        Alert.alert(t('Please allow Audio permissions in settings.'), '', [
-          {
-            onPress: () => {
-              Linking.openSettings();
-            },
-            text: t('Open Settings'),
+        addNotification({
+          message: 'Please allow Audio permissions in settings.',
+          options: {
+            actions: [
+              {
+                handler: () => {
+                  Linking.openSettings();
+                },
+                label: t('Open Settings'),
+              },
+            ],
+            duration: 0,
+            severity: 'warning',
+            type: 'permission:audio:recording:blocked',
           },
-          {
-            text: t('Cancel'),
-            style: 'cancel',
-          },
-        ]);
+          origin: { emitter: 'AudioRecordingButton' },
+        });
         return;
       }
       NativeHandlers.triggerHaptic('impactHeavy');

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -22,7 +22,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { transitions } from '../../../../utils/transitions';
+import { transitions } from '../../../../utils/animations/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 

package/src/components/MessageList/MessageFlashList.tsx

@@ -58,7 +58,7 @@ import { useStableCallback, useStateStore } from '../../hooks';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -298,6 +298,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
+    NotificationList,
     ScrollToBottomButton,
     StickyHeader,
     TypingIndicator,
@@ -1127,6 +1128,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </View>
       ) : null}
+      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
 };

package/src/components/MessageList/MessageList.tsx

@@ -71,7 +71,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
@@ -354,6 +354,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
+    NotificationList,
     ScrollToBottomButton,
     StickyHeader,
     TypingIndicator,
@@ -1356,6 +1357,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </View>
       ) : null}
+      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
 };

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

@@ -184,6 +184,41 @@ describe('MessageList', () => {
     });
   });
 
+  it('should render client notifications in the message list notification host', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+    await channel.watch();
+
+    const { getByText } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      chatClient.notifications.add({
+        message: 'Message list notification',
+        options: { severity: 'warning' },
+        origin: { emitter: 'MessageListTest' },
+      });
+    });
+
+    await waitFor(() => {
+      expect(getByText('Message list notification')).toBeTruthy();
+    });
+  });
+
   it('should render the is offline error', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({

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

@@ -18,7 +18,7 @@ exports[`ScrollToBottomButton should render the message notification and match s
         },
         {
           "elevation": 2,
-          "shadowColor": "rgba(0,0,0,0.12)",
+          "shadowColor": "rgb(0,0,0)",
           "shadowOffset": {
             "height": 1,
             "width": 0,

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

@@ -3,6 +3,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalMessage, ReactionResponse, ReactionSort } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useNotificationApi } from '../../Notifications';
 
 export type UseFetchReactionParams = {
   limit?: number;
@@ -98,6 +100,8 @@ export const useFetchReactions = ({
   const messageId = message?.id;
 
   const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
 
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
@@ -122,10 +126,21 @@ export const useFetchReactions = ({
           setLoading(false);
         }
       } catch (error) {
-        console.log('Error fetching reactions: ', error);
+        addNotification({
+          message: t('Error fetching reactions'),
+          options: {
+            ...(error instanceof Error ? { originalError: error } : {}),
+            severity: 'error',
+            type: 'api:message:reactions:fetch:failed',
+          },
+          origin: {
+            ...(message ? { context: { message } } : {}),
+            emitter: 'Reactions',
+          },
+        });
       }
     },
-    [messageId, client, reactionType, sort, limit],
+    [addNotification, client, limit, message, messageId, reactionType, sort, t],
   );
 
   const loadNextPage = useCallback(async () => {

package/src/components/Notifications/Notification.tsx

@@ -0,0 +1,254 @@
+import React, { type ComponentType, useMemo } from 'react';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+
+import { Pressable } from 'react-native-gesture-handler';
+
+import type { Notification as NotificationType, NotificationSeverity } from 'stream-chat';
+
+import { useNotificationApi } from './hooks/useNotificationApi';
+import { getNotificationDisplayMessage } from './notificationTranslations';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Check } from '../../icons/checkmark';
+import { Warning } from '../../icons/exclamation-triangle-fill';
+import { Reload } from '../../icons/refresh';
+import { IconProps } from '../../icons/utils/base';
+import { NewClose } from '../../icons/xmark';
+import { primitives } from '../../theme';
+import { Button } from '../ui/Button';
+
+/** Direction from which a snackbar enters and exits the screen. */
+export type NotificationEntryDirection = 'bottom' | 'left' | 'right' | 'top';
+export type NotificationTransitionState = 'enter' | 'exit';
+
+export type NotificationIconProps = {
+  /** Notification rendered by the icon slot. */
+  notification: NotificationType;
+};
+
+/** Visual variant resolved from notification severity. Notifications without severity use `default`. */
+export type NotificationVariant = 'default' | NotificationSeverity;
+
+/** Resolves the visual variant used by the default notification renderer. */
+export const getNotificationVariant = (notification: NotificationType): NotificationVariant =>
+  notification.severity ?? 'default';
+
+const IconsByVariant: Partial<Record<NotificationVariant, ComponentType<IconProps> | null>> = {
+  error: Warning,
+  info: null,
+  loading: Reload,
+  success: Check,
+  warning: Warning,
+};
+
+const getNotificationIconComponent = (notification: NotificationType) => {
+  const variant = getNotificationVariant(notification);
+  if (variant === 'default') return undefined;
+
+  return IconsByVariant[variant] ?? undefined;
+};
+
+export const NotificationIcon = ({ notification }: NotificationIconProps) => {
+  const Icon = getNotificationIconComponent(notification);
+  const { iconColor, styles } = useNotificationIconStyles();
+  if (!Icon) return null;
+
+  return (
+    <View style={styles.iconContainer} testID='notification-icon'>
+      <Icon height={20} pathFill={iconColor} stroke={iconColor} width={20} />
+    </View>
+  );
+};
+
+export type NotificationProps = {
+  /** Notification object produced by the Stream Chat notification manager. */
+  notification: NotificationType;
+  /** Direction used by the surrounding list animation. */
+  entryDirection?: NotificationEntryDirection;
+  /** Optional icon override for this notification instance. */
+  Icon?: React.ComponentType<NotificationIconProps>;
+  /** Called instead of the default notification removal behavior. */
+  onDismiss?: () => void;
+  /** Forces a dismiss button for transient notifications. Persistent notifications always show one. */
+  showClose?: boolean;
+  /** Reserved for custom animated notification implementations. */
+  transitionState?: NotificationTransitionState;
+};
+
+/** Default snackbar notification renderer used by `NotificationList`. */
+export const Notification = ({
+  Icon,
+  notification,
+  onDismiss,
+  showClose = false,
+}: NotificationProps) => {
+  const { NotificationIcon: NotificationIconComponent = NotificationIcon } = useComponentsContext();
+  const { removeNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
+  const displayMessage = getNotificationDisplayMessage({ notification, t });
+  const ResolvedIcon = Icon ?? NotificationIconComponent;
+  const hasResolvedIcon =
+    ResolvedIcon === NotificationIcon
+      ? !!getNotificationIconComponent(notification)
+      : !!ResolvedIcon;
+  const { closeIconColor, styles } = useNotificationStyles({ hasResolvedIcon });
+  const isPersistent = !notification.duration;
+  const closeVisible = showClose || isPersistent;
+
+  const handleDismiss = () => {
+    if (onDismiss) {
+      onDismiss();
+      return;
+    }
+
+    removeNotification(notification.id);
+  };
+
+  return (
+    <View
+      accessibilityLiveRegion={notification.severity === 'error' ? 'assertive' : 'polite'}
+      accessibilityRole={notification.severity === 'error' ? 'alert' : 'summary'}
+      style={styles.container}
+      testID='notification'
+    >
+      <View style={styles.contentContainer}>
+        {hasResolvedIcon ? <ResolvedIcon notification={notification} /> : null}
+        <Text style={styles.message}>{displayMessage}</Text>
+      </View>
+      {notification.actions && notification.actions.length > 0 ? (
+        <View style={styles.actionsContainer}>
+          {notification.actions.map((action, index) => (
+            <Button
+              accessibilityLabel={action.label}
+              key={`${action.label}-${index}`}
+              label={action.label}
+              onPress={action.handler}
+              size='sm'
+              style={styles.actionButton}
+              type='outline'
+              variant='primary'
+            />
+          ))}
+        </View>
+      ) : null}
+      {closeVisible ? (
+        <Pressable
+          accessibilityLabel={t('a11y/Dismiss notification')}
+          accessibilityRole='button'
+          hitSlop={8}
+          onPress={handleDismiss}
+          style={({ pressed }) => (pressed ? styles.closeButtonPressed : styles.closeButton)}
+          testID='notification-close-button'
+        >
+          <NewClose height={20} stroke={closeIconColor} width={20} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+};
+
+const useNotificationIconStyles = () => {
+  const {
+    theme: { notification: notificationTheme, semantics },
+  } = useTheme();
+
+  return useMemo(() => {
+    const baseStyles = StyleSheet.create({
+      iconContainer: {
+        alignItems: 'center',
+        height: 20,
+        justifyContent: 'center',
+        width: 20,
+      },
+    });
+
+    return {
+      iconColor: semantics.textOnInverse,
+      styles: {
+        iconContainer: [baseStyles.iconContainer, notificationTheme.iconContainer],
+      },
+    };
+  }, [notificationTheme.iconContainer, semantics]);
+};
+
+const useNotificationStyles = ({ hasResolvedIcon }: { hasResolvedIcon: boolean }) => {
+  const {
+    theme: { notification: notificationTheme, semantics },
+  } = useTheme();
+  const scheme = useColorScheme();
+  const notificationShadow =
+    scheme === 'dark' ? primitives.darkElevation3 : primitives.lightElevation3;
+
+  return useMemo(() => {
+    const baseStyles = StyleSheet.create({
+      actionButton: {
+        width: 'auto',
+      },
+      actionsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: primitives.spacingXs,
+        marginTop: primitives.spacingXs,
+      },
+      closeButton: {
+        alignItems: 'center',
+        borderRadius: primitives.radiusMax,
+        height: 24,
+        justifyContent: 'center',
+        marginLeft: primitives.spacingXs,
+        width: 24,
+      },
+      closeButtonPressed: {
+        backgroundColor: semantics.backgroundUtilityPressed,
+      },
+      container: {
+        alignItems: 'flex-start',
+        alignSelf: 'center',
+        backgroundColor: semantics.backgroundCoreInverse,
+        borderRadius: primitives.radius3xl,
+        flexDirection: 'row',
+        maxWidth: '100%',
+        paddingHorizontal: primitives.spacingSm,
+        ...notificationShadow,
+        shadowOpacity: 0,
+      },
+      contentContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        flexShrink: 1,
+        gap: primitives.spacingXs,
+        minHeight: 48,
+        paddingLeft: hasResolvedIcon ? primitives.spacingXxs : primitives.spacingXs,
+        paddingRight: primitives.spacingXs,
+        paddingVertical: primitives.spacingXxxs,
+      },
+      message: {
+        color: semantics.textOnInverse,
+        flexShrink: 1,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightNormal,
+        paddingVertical: primitives.spacingSm,
+      },
+    });
+
+    return {
+      closeIconColor: semantics.textOnInverse,
+      styles: {
+        actionButton: [baseStyles.actionButton, notificationTheme.actionButton],
+        actionsContainer: [baseStyles.actionsContainer, notificationTheme.actionsContainer],
+        closeButton: [baseStyles.closeButton, notificationTheme.closeButton],
+        closeButtonPressed: [
+          baseStyles.closeButton,
+          baseStyles.closeButtonPressed,
+          notificationTheme.closeButton,
+        ],
+        container: [baseStyles.container, notificationTheme.container],
+        contentContainer: [baseStyles.contentContainer, notificationTheme.contentContainer],
+        message: [baseStyles.message, notificationTheme.message],
+      },
+    };
+  }, [hasResolvedIcon, notificationShadow, notificationTheme, semantics]);
+};