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

package/src/components/Notifications/notificationTranslations.ts

@@ -0,0 +1,142 @@
+import type { TFunction } from 'i18next';
+import type { Notification } from 'stream-chat';
+
+const normalizeReason = (notification?: Notification) => {
+  const reason = notification?.metadata?.reason;
+  if (typeof reason !== 'string' || !reason.length) return undefined;
+
+  return reason.toLowerCase();
+};
+
+const withReasonFallback = ({
+  fallbackTranslationKey,
+  notification,
+  reasonTranslationKey,
+  t,
+}: {
+  fallbackTranslationKey: string;
+  notification?: Notification;
+  reasonTranslationKey: string;
+  t: TFunction;
+}) => {
+  const reason = normalizeReason(notification);
+  if (!reason) return t(fallbackTranslationKey);
+
+  return t(reasonTranslationKey, { reason });
+};
+
+const translateAttachmentUploadBlocked = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) => {
+  const rawReason = notification?.metadata?.reason;
+  let reason = t('unsupported file type');
+  if (typeof rawReason !== 'string') reason = t('unknown error');
+  if (rawReason === 'size_limit') reason = t('size limit');
+
+  return t('Attachment upload blocked due to {{reason}}', { reason });
+};
+
+const translateAttachmentUploadFailed = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) =>
+  withReasonFallback({
+    fallbackTranslationKey: 'Error uploading attachment',
+    notification,
+    reasonTranslationKey: 'Attachment upload failed due to {{reason}}',
+    t,
+  });
+
+const translatePollCreateFailed = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) =>
+  withReasonFallback({
+    fallbackTranslationKey: 'Failed to create the poll',
+    notification,
+    reasonTranslationKey: 'Failed to create the poll due to {{reason}}',
+    t,
+  });
+
+const translatePollEndFailed = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) =>
+  withReasonFallback({
+    fallbackTranslationKey: 'Failed to end the poll',
+    notification,
+    reasonTranslationKey: 'Failed to end the poll due to {{reason}}',
+    t,
+  });
+
+const translateCommandDisabled = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) => {
+  const reason = normalizeReason(notification);
+
+  if (reason === 'editing') {
+    return t('Command not available while editing');
+  }
+
+  if (reason === 'quoted_message') {
+    return t('Command not available while replying');
+  }
+
+  return t(notification?.message || 'Command not available');
+};
+
+const notificationTranslatorsByType: Record<
+  string,
+  (options: { notification: Notification; t: TFunction }) => string
+> = {
+  'api:attachment:upload:failed': translateAttachmentUploadFailed,
+  'api:location:create:failed': ({ t }) => t('Failed to share location'),
+  'api:location:share:failed': ({ t }) => t('Failed to share location'),
+  'api:poll:create:failed': translatePollCreateFailed,
+  'api:poll:end:failed': translatePollEndFailed,
+  'api:poll:end:success': ({ t }) => t('Poll ended'),
+  'api:reply:search:failed': ({ t }) => t('Thread has not been found'),
+  'browser:audio:playback:error': ({ notification, t }) =>
+    notification.message ? t(notification.message) : t('Error reproducing the recording'),
+  'browser:location:get:failed': ({ t }) => t('Failed to retrieve location'),
+  'channel:jumpToFirstUnread:failed': ({ t }) => t('Failed to jump to the first unread message'),
+  'validation:attachment:file:missing': ({ t }) => t('File is required for upload attachment'),
+  'validation:attachment:id:missing': ({ t }) => t('Local upload attachment missing local id'),
+  'validation:attachment:upload:blocked': translateAttachmentUploadBlocked,
+  'validation:attachment:upload:in-progress': ({ t }) =>
+    t('Wait until all attachments have uploaded'),
+  'validation:command:disabled': translateCommandDisabled,
+  'validation:poll:castVote:limit': ({ t }) =>
+    t('Reached the vote limit. Remove an existing vote first.'),
+};
+
+export const getNotificationDisplayMessage = ({
+  notification,
+  t,
+}: {
+  notification: Notification;
+  t: TFunction;
+}) => {
+  const translator = notification.type
+    ? notificationTranslatorsByType[notification.type]
+    : undefined;
+
+  return translator ? translator({ notification, t }) : t(notification.message);
+};

package/src/components/Poll/components/PollOption.tsx

@@ -20,6 +20,7 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 
 import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
+import { useNotificationApi } from '../../Notifications';
 import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
@@ -160,6 +161,7 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
 export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
+  const { runWithNotificationTarget } = useNotificationApi();
   const ownCapabilities = useOwnCapabilitiesContext();
   const {
     theme: { semantics },
@@ -178,12 +180,14 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   } = useTheme();
 
   const toggleVote = useCallback(async () => {
-    if (ownVotesByOptionId[option.id]) {
-      await poll.removeVote(ownVotesByOptionId[option.id]?.id, message.id);
-    } else {
-      await poll.castVote(option.id, message.id);
-    }
-  }, [message.id, option.id, ownVotesByOptionId, poll]);
+    await runWithNotificationTarget(async () => {
+      if (ownVotesByOptionId[option.id]) {
+        await poll.removeVote(ownVotesByOptionId[option.id]?.id, message.id);
+      } else {
+        await poll.castVote(option.id, message.id);
+      }
+    });
+  }, [message.id, option.id, ownVotesByOptionId, poll, runWithNotificationTarget]);
 
   const onPressHandler = useCallback(() => {
     if (onPress) {

package/src/components/Poll/hooks/usePollState.ts

@@ -14,7 +14,8 @@ import {
 
 import { usePollStateStore } from './usePollStateStore';
 
-import { usePollContext } from '../../../contexts';
+import { usePollContext, useTranslationContext } from '../../../contexts';
+import { useNotificationApi } from '../../Notifications';
 
 export type UsePollStateSelectorReturnType = {
   allowAnswers: boolean | undefined;
@@ -62,6 +63,8 @@ const selector = (nextValue: PollState): UsePollStateSelectorReturnType => ({
 
 export const usePollState = (): UsePollStateReturnType => {
   const { message, poll } = usePollContext();
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
   const {
     allowAnswers,
     allowUserSuggestedOptions,
@@ -91,7 +94,28 @@ export const usePollState = (): UsePollStateReturnType => {
     (answerText: string) => poll.addAnswer(answerText, message.id),
     [message.id, poll],
   );
-  const endVote = useCallback(() => poll.close(), [poll]);
+  const endVote = useCallback(async () => {
+    try {
+      const response = await poll.close();
+      addNotification({
+        message: t('Poll ended'),
+        options: { severity: 'success', type: 'api:poll:end:success' },
+        origin: { emitter: 'PollActions' },
+      });
+      return response;
+    } catch (error) {
+      addNotification({
+        message: t('Failed to end the poll'),
+        options: {
+          ...(error instanceof Error ? { originalError: error } : {}),
+          severity: 'error',
+          type: 'api:poll:end:failed',
+        },
+        origin: { emitter: 'PollActions' },
+      });
+      throw error;
+    }
+  }, [addNotification, poll, t]);
 
   return {
     addComment,

package/src/components/Thread/Thread.tsx

@@ -10,6 +10,8 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 import type { MessageComposerProps } from '../MessageInput/MessageComposer';
 import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
 import { MessageListProps } from '../MessageList/MessageList';
+import { getThreadNotificationHostId } from '../Notifications/notificationTarget';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 let FlashList;
 
@@ -56,6 +58,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
      * Call custom function on closing thread if handling thread state elsewhere
      */
     onThreadDismount?: () => void;
+    notificationHostId?: string;
     shouldUseFlashList?: boolean;
   };
 
@@ -70,6 +73,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     disabled,
     loadMoreThread,
     onThreadDismount,
+    notificationHostId: notificationHostIdProp,
     parentMessagePreventPress = true,
     thread,
     threadInstance,
@@ -120,26 +124,30 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     return null;
   }
 
+  const notificationHostId = notificationHostIdProp ?? getThreadNotificationHostId(thread.id);
+
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      {FlashList && shouldUseFlashList ? (
-        <MessageFlashList
-          HeaderComponent={MemoizedThreadFooterComponent}
-          threadList
-          {...additionalMessageFlashListProps}
-        />
-      ) : (
-        <MessageList
-          FooterComponent={MemoizedThreadFooterComponent}
+      <NotificationTargetProvider hostId={notificationHostId} panel='thread'>
+        {FlashList && shouldUseFlashList ? (
+          <MessageFlashList
+            HeaderComponent={MemoizedThreadFooterComponent}
+            threadList
+            {...additionalMessageFlashListProps}
+          />
+        ) : (
+          <MessageList
+            FooterComponent={MemoizedThreadFooterComponent}
+            threadList
+            {...additionalMessageListProps}
+          />
+        )}
+        <MessageComposer
+          additionalTextInputProps={additionalTextInputProps}
           threadList
-          {...additionalMessageListProps}
+          {...additionalMessageComposerProps}
         />
-      )}
-      <MessageComposer
-        additionalTextInputProps={additionalTextInputProps}
-        threadList
-        {...additionalMessageComposerProps}
-      />
+      </NotificationTargetProvider>
     </React.Fragment>
   );
 };

package/src/components/ThreadList/ThreadList.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FlatList, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 
 import { Thread, ThreadManagerState } from 'stream-chat';
 
@@ -14,9 +14,12 @@ import {
   useThreadsContext,
 } from '../../contexts/threadsContext/ThreadsContext';
 import { useStateStore } from '../../hooks';
+import { useLazyRef } from '../../hooks/useLazyRef';
+import { generateRandomId } from '../../utils/utils';
 
 import { EmptyStateIndicator } from '../Indicators/EmptyStateIndicator';
 import { LoadingIndicator } from '../Indicators/LoadingIndicator';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 const selector = (nextValue: ThreadManagerState) =>
   ({
@@ -28,7 +31,9 @@ const selector = (nextValue: ThreadManagerState) =>
 export type ThreadListProps = Pick<
   ThreadsContextValue,
   'additionalFlatListProps' | 'isFocused' | 'onThreadSelect'
->;
+> & {
+  notificationHostId?: string;
+};
 
 export const DefaultThreadListEmptyPlaceholder = () => <EmptyStateIndicator listType='threads' />;
 
@@ -76,9 +81,11 @@ export const DefaultThreadListComponent = () => {
 };
 
 export const ThreadList = (props: ThreadListProps) => {
-  const { isFocused = true } = props;
-  const { ThreadListComponent: ThreadListContent } = useComponentsContext();
+  const { isFocused = true, notificationHostId: notificationHostIdProp } = props;
+  const { NotificationList, ThreadListComponent: ThreadListContent } = useComponentsContext();
   const { client } = useChatContext();
+  const fallbackNotificationHostIdRef = useLazyRef(() => `thread-list:${generateRandomId()}`);
+  const notificationHostId = notificationHostIdProp ?? fallbackNotificationHostIdRef.current;
 
   useEffect(() => {
     if (!client) {
@@ -109,10 +116,27 @@ export const ThreadList = (props: ThreadListProps) => {
   const { isLoading, isLoadingNext, threads } = useStateStore(client.threads.state, selector);
 
   return (
-    <ThreadsProvider
-      value={{ isLoading, isLoadingNext, loadMore: client.threads.loadNextPage, threads, ...props }}
-    >
-      <ThreadListContent />
-    </ThreadsProvider>
+    <NotificationTargetProvider hostId={notificationHostId} panel='thread-list'>
+      <ThreadsProvider
+        value={{
+          isLoading,
+          isLoadingNext,
+          loadMore: client.threads.loadNextPage,
+          threads,
+          ...props,
+        }}
+      >
+        <View style={styles.container}>
+          <ThreadListContent />
+          <NotificationList />
+        </View>
+      </ThreadsProvider>
+    </NotificationTargetProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/index.ts

@@ -175,6 +175,8 @@ export * from './MessageMenu/MessageReactionPicker';
 export * from './MessageMenu/utils/toUnicodeScalarString';
 export * from './MessageMenu/hooks/useFetchReactions';
 
+export * from './Notifications';
+
 export * from './ProgressControl/ProgressControl';
 export * from './ProgressControl/WaveProgressBar';
 export * from './Poll';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -130,6 +130,7 @@ import { MessageReactionPicker } from '../../components/MessageMenu/MessageReact
 import { MessageUserReactions } from '../../components/MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar } from '../../components/MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem } from '../../components/MessageMenu/MessageUserReactionsItem';
+import { Notification, NotificationIcon, NotificationList } from '../../components/Notifications';
 import { PollAnswersListContent } from '../../components/Poll/components/PollAnswersList';
 import { PollButtons } from '../../components/Poll/components/PollButtons';
 import { PollAllOptionsContent } from '../../components/Poll/components/PollOption';
@@ -245,6 +246,9 @@ const components = {
   MessageUserReactionsAvatar,
   MessageUserReactionsItem,
   NetworkDownIndicator,
+  Notification,
+  NotificationIcon,
+  NotificationList,
   ChannelPreview: ChannelPreviewView,
   ChannelPreviewAvatar: ChannelAvatar,
   ChannelPreviewLastMessage: ChannelLastMessagePreview,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -26,6 +26,7 @@ import { useMessageComposer } from './hooks/useMessageComposer';
 import { dismissKeyboard } from '../../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { parseLinksFromText } from '../../components/Message/MessageItemView/utils/parseLinks';
 import { useAudioRecorder } from '../../components/MessageInput/hooks/useAudioRecorder';
+import { useNotificationApi } from '../../components/Notifications';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
@@ -220,6 +221,7 @@ export const MessageInputProvider = ({
   const { clearEditingState } = useMessageComposerAPIContext();
   const { thread } = useThreadContext();
   const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
   const inputBoxRef = useRef<InputBoxRef | null>(null);
 
   const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
@@ -407,6 +409,23 @@ export const MessageInputProvider = ({
           clearEditingState();
           await value.editMessage({ localMessage, options: sendOptions });
         } catch (error) {
+          addNotification(
+            {
+              message: t('Edit message request failed'),
+              options: {
+                ...(error instanceof Error ? { originalError: error } : {}),
+                severity: 'error',
+              },
+              origin: { emitter: 'MessageComposer' },
+            },
+            {
+              incident: {
+                domain: 'api',
+                entity: 'message',
+                operation: 'edit',
+              },
+            },
+          );
           throw new Error('Error while editing message');
         }
       } else {
@@ -433,6 +452,23 @@ export const MessageInputProvider = ({
             options: sendOptions,
           });
         } catch (error) {
+          addNotification(
+            {
+              message: t('Send message request failed'),
+              options: {
+                ...(error instanceof Error ? { originalError: error } : {}),
+                severity: 'error',
+              },
+              origin: { emitter: 'MessageComposer' },
+            },
+            {
+              incident: {
+                domain: 'api',
+                entity: 'message',
+                operation: 'send',
+              },
+            },
+          );
           throw new Error('Error while sending message');
         }
       }

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

@@ -532,6 +532,19 @@ export type Theme = {
       rightButtonContainer: ViewStyle;
     };
   };
+  notification: {
+    actionButton: ViewStyle;
+    actionButtonText: TextStyle;
+    actionsContainer: ViewStyle;
+    closeButton: ViewStyle;
+    container: ViewStyle;
+    contentContainer: ViewStyle;
+    iconContainer: ViewStyle;
+    message: TextStyle;
+  };
+  notificationList: {
+    container: ViewStyle;
+  };
   messageMenu: {
     actionList: {
       container: ViewStyle;
@@ -1457,6 +1470,19 @@ export const defaultTheme: Theme = {
     },
     unreadMessagesNotificationContainer: {},
   },
+  notification: {
+    actionButton: {},
+    actionButtonText: {},
+    actionsContainer: {},
+    closeButton: {},
+    container: {},
+    contentContainer: {},
+    iconContainer: {},
+    message: {},
+  },
+  notificationList: {
+    container: {},
+  },
   messageMenu: {
     actionList: {
       container: {},

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export * from './useQueryReminders';
 export * from './useAfterKeyboardOpenCallback';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
+export * from '../components/Notifications/hooks';
 export * from './usePortalSettledCallback';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayer';

package/src/hooks/useAudioPlayer.ts

@@ -1,7 +1,10 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
+import { useNotificationApi } from '../components/Notifications';
 import { useAudioPlayerContext } from '../contexts/audioPlayerContext/AudioPlayerContext';
-import { AudioPlayerOptions } from '../state-store/audio-player';
+import { useChatContext } from '../contexts/chatContext/ChatContext';
+import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
+import { AudioPlayerErrorCode, AudioPlayerOptions } from '../state-store/audio-player';
 
 export type UseAudioPlayerProps = {
   /**
@@ -40,19 +43,57 @@ export const useAudioPlayer = ({
   id: fileId,
 }: UseAudioPlayerProps) => {
   const { audioPlayerPool } = useAudioPlayerContext();
+  const { addNotification } = useNotificationApi();
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const hasNotificationManager = !!client?.notifications;
   const id = makeAudioPlayerId({ id: fileId, requester, src: uri ?? '' });
+  const onError = useCallback(
+    ({ errCode, error }: { errCode: AudioPlayerErrorCode; error?: Error }) => {
+      if (!hasNotificationManager) return;
+
+      const errorMessages: Record<AudioPlayerErrorCode, string> = {
+        'failed-to-start': t('Failed to play the recording'),
+        'not-playable': t('Recording format is not supported and cannot be reproduced'),
+        'seek-not-supported': t('Cannot seek in the recording'),
+      };
+      const message = errorMessages[errCode];
+
+      addNotification({
+        message,
+        options: {
+          originalError: error ?? new Error(message),
+          severity: 'error',
+          type: 'browser:audio:playback:error',
+        },
+        origin: { emitter: 'AudioPlayer' },
+      });
+    },
+    [addNotification, hasNotificationManager, t],
+  );
   const audioPlayer = useMemo(
     () =>
       audioPlayerPool?.getOrAddPlayer({
         duration: duration ?? 0,
         id,
         mimeType: mimeType ?? '',
+        onError,
         playbackRates,
         previewVoiceRecording,
         type: type ?? 'audio',
         uri: uri ?? '',
       }),
-    [audioPlayerPool, duration, id, mimeType, playbackRates, previewVoiceRecording, type, uri],
+    [
+      audioPlayerPool,
+      duration,
+      id,
+      mimeType,
+      onError,
+      playbackRates,
+      previewVoiceRecording,
+      type,
+      uri,
+    ],
   );
 
   return audioPlayer;

package/src/hooks/useInAppNotificationsState.ts

@@ -14,6 +14,12 @@ const selector = ({ notifications }: InAppNotificationsState) => ({
   notifications,
 });
 
+/**
+ * @deprecated Prefer the client-backed notification APIs exported from
+ * `components/Notifications` (`useNotificationApi`, `useNotifications`, and
+ * `NotificationList`). This hook is kept for apps that already render their own
+ * legacy in-app notification store.
+ */
 export const useInAppNotificationsState = () => {
   const { notifications } = useStateStore(inAppNotificationsStore, selector);
 

package/src/hooks/useLazyRef.ts

@@ -0,0 +1,15 @@
+import { type RefObject, useRef } from 'react';
+
+/**
+ * Creates a stable ref whose initial value is computed only once.
+ * Use this when the initial ref value is expensive or allocates an object.
+ */
+export const useLazyRef = <T>(getInitialValue: () => T) => {
+  const ref = useRef<T | null>(null);
+
+  if (ref.current === null) {
+    ref.current = getInitialValue();
+  }
+
+  return ref as RefObject<T>;
+};