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

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -32,7 +32,7 @@ const LoadingErrorWrapper = (props: React.PropsWithChildren<LoadingErrorWrapperP
 };
 
 export type LoadingErrorProps = {
-  error?: boolean | Error;
+  error?: Error;
   listType?: 'channel' | 'message' | 'default';
   loadNextPage?: () => Promise<void>;
   retry?: () => void;
@@ -47,7 +47,10 @@ export const LoadingErrorIndicator = (props: LoadingErrorProps) => {
   switch (listType) {
     case 'channel':
       return (
-        <LoadingErrorWrapper onPress={retry} text={t('Error loading channel list...')}>
+        <LoadingErrorWrapper
+          onPress={retry}
+          text={t('indicators.loading.channels.error', 'Error loading channel list...')}
+        >
           <Text style={styles.retryText}>⟳</Text>
         </LoadingErrorWrapper>
       );
@@ -55,11 +58,14 @@ export const LoadingErrorIndicator = (props: LoadingErrorProps) => {
       return (
         <LoadingErrorWrapper
           onPress={retry}
-          text={t('Error loading messages for this channel...')}
+          text={t(
+            'indicators.loading.messages.error',
+            'Error loading messages for this channel...',
+          )}
         />
       );
     default:
-      return <LoadingErrorWrapper text={t('Error loading')} />;
+      return <LoadingErrorWrapper text={t('indicators.loading.error', 'Error loading')} />;
   }
 };
 

package/src/components/Indicators/LoadingIndicator.tsx

@@ -42,13 +42,21 @@ export const LoadingIndicator = (props: LoadingProps) => {
 
   switch (listType) {
     case 'channel':
-      return <LoadingIndicatorWrapper text={t('Loading channels...')} />;
+      return (
+        <LoadingIndicatorWrapper
+          text={t('indicators.loading.channels.text', 'Loading channels...')}
+        />
+      );
     case 'message':
-      return <LoadingIndicatorWrapper text={t('Loading messages...')} />;
+      return (
+        <LoadingIndicatorWrapper
+          text={t('indicators.loading.messages.text', 'Loading messages...')}
+        />
+      );
     case 'threads':
       return <LoadingIndicatorWrapper text={undefined} />;
     default:
-      return <LoadingIndicatorWrapper text={t('Loading...')} />;
+      return <LoadingIndicatorWrapper text={t('common.loading.text', 'Loading...')} />;
   }
 };
 

package/src/components/Message/Message.tsx

@@ -11,24 +11,28 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
 
-import type { Attachment, LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
-
+import {
+  type Attachment,
+  getAttachmentPreviewUrl,
+  type LocalMessage,
+  type MentionEntity,
+  type Thread,
+  type UserResponse,
+} from 'stream-chat';
+
+import { useCreateMessageActionHandlers } from './hooks/useCreateMessageActionHandlers';
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
-import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
-import { useMessageActions } from './hooks/useMessageActions';
-import { useMessageDeliveredData } from './hooks/useMessageDeliveryData';
-import { useMessageReadData } from './hooks/useMessageReadData';
+import { MessageOperations, useMessageOperations } from './hooks/useMessageOperations';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { DEFAULT_MESSAGE_OVERLAY_TARGET_ID } from './messageOverlayConstants';
 import { MessageOverlayWrapper } from './MessageOverlayWrapper';
 import { measureInWindow } from './utils/measureInWindow';
-import { messageActions as defaultMessageActions } from './utils/messageActions';
 
 import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   KeyboardContextValue,
@@ -50,7 +54,6 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
   TranslationContextValue,
   useTranslationContext,
@@ -70,6 +73,7 @@ import {
 import { primitives } from '../../theme';
 import type { ViewRef } from '../../types/react-native-compat';
 import { FileTypes } from '../../types/types';
+import { getPlayableVideoUrl } from '../../utils/attachmentUrls';
 import {
   checkMessageEquality,
   generateRandomId,
@@ -80,6 +84,7 @@ import {
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
 import { dismissKeyboard } from '../KeyboardCompatibleView/KeyboardCompatibleView';
+import { MessageActionListWithActions } from '../MessageMenu/MessageActionListWithActions';
 import { BottomSheetModal } from '../UIComponents';
 
 const createMessageOverlayId = (messageId?: string) =>
@@ -203,61 +208,35 @@ export type MessageActionHandlers = {
 
 export type MessagePropsWithContext = Pick<
   ChannelContextValue,
-  'channel' | 'enforceUniqueReaction' | 'members'
+  'channel' | 'enforceUniqueReaction'
 > &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
-  Partial<
-    Omit<
-      MessageContextValue,
-      | 'groupStyles'
-      | 'handleReaction'
-      | 'message'
-      | 'isMessageAIGenerated'
-      | 'deliveredToCount'
-      | 'readBy'
-    >
-  > &
+  Partial<Omit<MessageContextValue, 'groupStyles' | 'handleReaction' | 'message'>> &
+  Pick<MessageContextValue, 'groupStyles' | 'message'> &
   Pick<
-    MessageContextValue,
-    'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy' | 'deliveredToCount'
+    MessageOperations,
+    | 'sendReaction'
+    | 'deleteMessage'
+    | 'removeMessage'
+    | 'deleteReaction'
+    | 'retrySendMessage'
+    | 'updateMessage'
   > &
   Pick<
     MessagesContextValue,
-    | 'sendReaction'
-    | 'deleteMessage'
     | 'dismissKeyboardOnMessageTouch'
     | 'forceAlignMessages'
-    | 'handleBan'
-    | 'handleCopy'
-    | 'handleDelete'
-    | 'handleDeleteForMe'
-    | 'handleEdit'
-    | 'handleFlag'
-    | 'handleMarkUnread'
-    | 'handleMute'
-    | 'handlePinMessage'
-    | 'handleQuotedReply'
     | 'handleReaction'
-    | 'handleRetry'
     | 'handleThreadReply'
-    | 'handleBlockUser'
     | 'isAttachmentEqual'
-    | 'messageActions'
     | 'messageOverlayTargetId'
     | 'messageContentOrder'
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
-    | 'removeMessage'
-    | 'deleteReaction'
-    | 'retrySendMessage'
     | 'selectReaction'
-    | 'supportedReactions'
-    | 'updateMessage'
   > &
-  Pick<ThreadContextValue, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
-    chatContext: ChatContextValue;
     messagesContext: MessagesContextValue;
     /**
      * Whether or not users are able to long press messages.
@@ -268,9 +247,9 @@ export type MessagePropsWithContext = Pick<
     /**
      * Handler to open the thread on message. This is callback for touch event for replies button.
      *
-     * @param message A message object to open the thread upon.
+     * @param thread The thread of the message, to render in a `<Thread thread={thread}>`.
      */
-    onThreadSelect?: (message: LocalMessage) => void;
+    onThreadSelect?: (thread: Thread) => void;
     showUnreadUnderlay?: boolean;
     style?: StyleProp<ViewStyle>;
   } & Pick<MessageComposerAPIContextValue, 'setQuotedMessage' | 'setEditingState'>;
@@ -284,37 +263,22 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
+  const { client, isMessageAIGenerated } = useChatContext();
 
   const {
     channel,
-    chatContext,
     deleteMessage: deleteMessageFromContext,
     deleteReaction,
-    deliveredToCount,
     dismissKeyboardOnMessageTouch,
     enableLongPress = true,
-    enforceUniqueReaction,
     forceAlignMessages = false,
     goToMessage,
     groupStyles = ['bottom'],
-    handleBan,
-    handleCopy,
-    handleDelete,
-    handleDeleteForMe,
-    handleEdit,
-    handleFlag,
-    handleMarkUnread,
-    handleMute,
-    handlePinMessage,
-    handleQuotedReply,
     handleReaction: handleReactionProp,
-    handleRetry,
     handleThreadReply,
-    handleBlockUser,
     isTargetedMessage,
-    members,
+    isVeryLastMessage = false,
     message,
-    messageActions: messageActionsProp = defaultMessageActions,
     messageOverlayTargetId = DEFAULT_MESSAGE_OVERLAY_TARGET_ID,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
@@ -322,7 +286,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
     onThreadSelect,
-    openThread,
     preventPress,
     removeMessage,
     retrySendMessage,
@@ -332,15 +295,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     showAvatar,
     showMessageStatus,
     style,
-    supportedReactions,
-    t,
-    threadList = false,
     updateMessage,
-    readBy,
     setQuotedMessage,
   } = props;
   const {
-    MessageActionList,
     MessageBlocked,
     MessageBounce,
     MessageItemView,
@@ -349,14 +307,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   } = useComponentsContext();
   // TODO: V9: Reconsider using safe area insets in every message.
   const insets = useSafeAreaInsets();
-  const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
   );
   const messageOverlayId = useMemo(() => createMessageOverlayId(message.id), [message.id]);
   const isMessageTypeDeleted = message.type === 'deleted';
-  const { client } = chatContext;
 
   const rectRef = useRef<Rect>(undefined);
   const bubbleRect = useRef<Rect>(undefined);
@@ -481,7 +437,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
             ) {
               acc.videos.push({
                 ...cur,
-                image_url: cur.asset_url,
+                image_url: getPlayableVideoUrl(cur),
                 thumb_url: cur.thumb_url,
                 type: FileTypes.Video,
               });
@@ -496,7 +452,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                * this next if is not combined with the above one for cases where we have
                * an image with no url links at all falling back to being an attachment
                */
-              if (cur.image_url || cur.thumb_url) {
+              if (getAttachmentPreviewUrl(cur, cur.image_url, cur.thumb_url)) {
                 acc.images.push(cur);
                 acc.other = []; // remove other attachments if an image exists
               }
@@ -569,10 +525,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const onOpenThread = () => {
     if (onThreadSelect) {
-      onThreadSelect(message);
-    }
-    if (openThread) {
-      openThread(message);
+      onThreadSelect(client.threads.ensure({ channel, parentMessage: message }));
     }
   };
 
@@ -586,6 +539,17 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const ownCapabilities = useOwnCapabilitiesContext();
 
+  const messageActionHandlers = useCreateMessageActionHandlers({
+    channel,
+    client,
+    deleteMessage: deleteMessageFromContext,
+    deleteReaction,
+    message,
+    retrySendMessage,
+    sendReaction,
+    setEditingState,
+    setQuotedMessage,
+  });
   const {
     handleCopyMessage,
     handleDeleteMessage,
@@ -599,99 +563,20 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleToggleMuteUser,
     handleTogglePinMessage,
     handleToggleReaction,
-  } = useMessageActionHandlers({
-    channel,
-    client,
-    deleteMessage: deleteMessageFromContext,
-    deleteReaction,
-    enforceUniqueReaction,
-    message,
-    retrySendMessage,
-    sendReaction,
-    setEditingState,
-    setQuotedMessage,
-    supportedReactions,
-  });
+  } = messageActionHandlers;
 
-  const {
-    banUser,
-    copyMessage,
-    deleteMessage,
-    deleteForMeMessage,
-    editMessage,
-    flagMessage,
-    handleReaction,
-    markUnread,
-    muteUser,
-    pinMessage,
-    quotedReply,
-    retry,
-    threadReply,
-    unpinMessage,
-    blockUser,
-  } = useMessageActions({
-    channel,
-    client,
-    deleteMessage: deleteMessageFromContext,
-    deleteReaction,
-    dismissOverlay,
-    enforceUniqueReaction,
-    handleBan,
-    handleCopy,
-    handleDelete,
-    handleDeleteForMe,
-    handleEdit,
-    handleFlag,
-    handleMarkUnread,
-    handleMute,
-    handlePinMessage,
-    handleQuotedReply,
-    handleReaction: handleReactionProp,
-    handleRetry,
-    handleThreadReply,
-    handleBlockUser,
-    message,
-    onThreadSelect,
-    openThread,
-    removeMessage,
-    retrySendMessage,
-    selectReaction,
-    sendReaction,
-    setEditingState,
-    setQuotedMessage,
-    supportedReactions,
-    t,
-    updateMessage,
+  const onReaction = useStableCallback(async (reactionType: string) => {
+    if (handleReactionProp) {
+      handleReactionProp(message, reactionType);
+    }
+
+    await handleToggleReaction(reactionType);
   });
 
-  const isThreadMessage = threadList || !!message.parent_id;
-
-  const messageActions =
-    typeof messageActionsProp !== 'function'
-      ? messageActionsProp
-      : messageActionsProp({
-          banUser,
-          copyMessage,
-          deleteForMeMessage,
-          deleteMessage,
-          dismissOverlay,
-          editMessage,
-          error: errorOrFailed,
-          flagMessage,
-          isMyMessage,
-          isThreadMessage,
-          markUnread,
-          message,
-          muteUser,
-          ownCapabilities,
-          pinMessage,
-          quotedReply,
-          retry,
-          threadReply,
-          unpinMessage,
-          updateMessage,
-          blockUser,
-        });
+  const handleReaction = useMemo(
+    () => (errorOrFailed ? undefined : selectReaction ? selectReaction(message) : onReaction),
+    [errorOrFailed, message, onReaction, selectReaction],
+  );
 
   const actionHandlers: MessageActionHandlers = {
     copyMessage: handleCopyMessage,
@@ -735,7 +620,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     alignment,
     channel,
     contextMenuAnchorRef,
-    deliveredToCount,
     dismissOverlay,
     files: attachments.files,
     goToMessage,
@@ -746,11 +630,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleToggleReaction,
     hasReactions,
     images: attachments.images,
-    isMessageAIGenerated,
     isMyMessage,
+    isVeryLastMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
-    members,
     message: overlayActive ? frozenMessage.current : message,
+    messageActionHandlers,
     messageOverlayId,
     messageContentOrder,
     messageHasOnlySingleAttachment,
@@ -829,13 +713,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     registerMessageOverlayTarget,
     unregisterMessageOverlayTarget,
     reactions,
-    readBy,
     setQuotedMessage,
     showAvatar,
     showMessageOverlay,
     showReactionsOverlay,
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,
-    threadList,
     videos: attachments.videos,
   });
   const messageOverlayRuntimeContext = useMemo(
@@ -869,9 +751,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     groupStyles?.[0] === 'bottom'
       ? groupStyles[0]
       : undefined;
-  const isVeryLastBubble =
-    messagesContext.enableMessageGroupingByUser &&
-    channel?.state.messages[channel.state.messages.length - 1]?.id === message.id;
+
+  const isVeryLastBubble = messagesContext.enableMessageGroupingByUser && isVeryLastMessage;
   const styles = useStyles({
     groupKey,
     highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
@@ -950,10 +831,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                   });
                 }}
               >
-                <MessageActionList
-                  dismissOverlay={dismissOverlay}
-                  messageActions={messageActions}
-                />
+                <MessageActionListWithActions />
               </View>
             ) : null}
           </Portal>
@@ -968,50 +846,29 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
 const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWithContext) => {
   const {
-    chatContext: { mutedUsers: prevMutedUsers },
-    deliveredToCount: prevDeliveredBy,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
+    isVeryLastMessage: prevIsVeryLastMessage,
     messageOverlayTargetId: prevMessageOverlayTargetId,
-    members: prevMembers,
     message: prevMessage,
     messagesContext: prevMessagesContext,
     showUnreadUnderlay: prevShowUnreadUnderlay,
-    readBy: prevReadBy,
     t: prevT,
   } = prevProps;
   const {
-    chatContext: { mutedUsers: nextMutedUsers },
-    deliveredToCount: nextDeliveredBy,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
+    isVeryLastMessage: nextIsVeryLastMessage,
     messageOverlayTargetId: nextMessageOverlayTargetId,
-    members: nextMembers,
     message: nextMessage,
     messagesContext: nextMessagesContext,
     showUnreadUnderlay: nextShowUnreadUnderlay,
-    readBy: nextReadBy,
     t: nextT,
   } = nextProps;
 
-  const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
-  if (!deliveredByEqual) {
-    return false;
-  }
-
-  const readByEqual = prevReadBy === nextReadBy;
-  if (!readByEqual) {
-    return false;
-  }
-
-  const membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
-  if (!membersEqual) {
-    return false;
-  }
-
   const repliesEqual = prevMessage.reply_count === nextMessage.reply_count;
   if (!repliesEqual) {
     return false;
@@ -1029,6 +886,10 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
+  if (prevIsVeryLastMessage !== nextIsVeryLastMessage) {
+    return false;
+  }
+
   const messageOverlayTargetIdEqual = prevMessageOverlayTargetId === nextMessageOverlayTargetId;
   if (!messageOverlayTargetIdEqual) {
     return false;
@@ -1099,14 +960,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
-  const mutedUserSame =
-    prevMutedUsers.length === nextMutedUsers.length ||
-    prevMutedUsers.some((mutedUser) => mutedUser.target.id === prevMessage.user?.id) ===
-      nextMutedUsers.some((mutedUser) => mutedUser.target.id === nextMessage.user?.id);
-  if (!mutedUserSame) {
-    return false;
-  }
-
   const showUnreadUnderlayEqual = prevShowUnreadUnderlay === nextShowUnreadUnderlay;
   if (!showUnreadUnderlayEqual) {
     return false;
@@ -1158,30 +1011,22 @@ export type MessageProps = Partial<
  * @example ./Message.md
  */
 export const Message = (props: MessageProps) => {
-  const { message } = props;
-  const { channel, enforceUniqueReaction, members } = useChannelContext();
-  const chatContext = useChatContext();
+  const { channel, enforceUniqueReaction } = useChannelContext();
   const { dismissKeyboard } = useKeyboardContext();
   const messagesContext = useMessagesContext();
-  const { openThread } = useThreadContext();
+  const messageOperations = useMessageOperations();
   const { t } = useTranslationContext();
-  const readBy = useMessageReadData({ message });
-  const deliveredTo = useMessageDeliveredData({ message });
   const { setQuotedMessage, setEditingState } = useMessageComposerAPIContext();
 
   return (
     <MemoizedMessage
       {...messagesContext}
+      {...messageOperations}
       {...{
         channel,
-        chatContext,
-        deliveredToCount: deliveredTo.length,
         dismissKeyboard,
         enforceUniqueReaction,
-        members,
         messagesContext,
-        openThread,
-        readBy: readBy.length,
         setEditingState,
         setQuotedMessage,
         t,

package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx

@@ -31,8 +31,10 @@ export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
     <View accessibilityLabel='Message Pinned Header' style={styles.container}>
       <icons.Pin height={16} width={16} stroke={styles.label.color} />
       <Text style={styles.label}>
-        {t('Pinned by')}{' '}
-        {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
+        {t('message.pinnedBy.text', 'Pinned by')}{' '}
+        {message?.pinned_by?.id === client?.user?.id
+          ? t('common.you.label', 'You')
+          : message?.pinned_by?.name}
       </Text>
     </View>
   );

package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx

@@ -32,7 +32,9 @@ const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithC
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
       <icons.Bell height={16} width={16} stroke={styles.time.color} />
       <Text style={styles.label}>
-        {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
+        {isReminderTimeLeft
+          ? t('message.reminderSet.text', 'Reminder set')
+          : t('message.reminderOverdue.text', 'Reminder overdue')}
       </Text>
       <Text
         accessibilityElementsHidden
@@ -42,7 +44,7 @@ const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithC
         ·
       </Text>
       <Text style={styles.time}>
-        {t('duration/Message reminder', {
+        {t('duration.messageReminder', {
           milliseconds: timeLeftMs,
         })}
       </Text>

package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx

@@ -18,7 +18,7 @@ export const MessageSavedForLaterHeader = () => {
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
       <icons.Bookmark height={16} width={16} stroke={styles.label.color} />
-      <Text style={styles.label}>{t('Saved For Later')}</Text>
+      <Text style={styles.label}>{t('message.savedForLater.text', 'Saved For Later')}</Text>
     </View>
   );
 };