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

package/src/components/Message/hooks/useMessageActions.tsx

@@ -1,92 +1,48 @@
 import React, { useMemo } from 'react';
 import { Alert } from 'react-native';
 
-import { LocalMessage } from 'stream-chat';
-
 import { useMessageActionHandlers } from './useMessageActionHandlers';
-
 import { useUserMuteActive } from './useUserMuteActive';
 
-import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
-import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
-import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
-import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
-import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
+import { useMessageContext } from '../../../contexts/messageContext/MessageContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../hooks';
 
 import { removeReservedFields } from '../../../utils/removeReservedFields';
-import { MessageStatusTypes } from '../../../utils/utils';
 
 import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
 
-export type MessageActionsHookProps = Pick<
-  MessagesContextValue,
-  | 'deleteMessage'
-  | 'sendReaction'
-  | 'handleBan'
-  | 'handleCopy'
-  | 'handleDelete'
-  | 'handleDeleteForMe'
-  | 'handleEdit'
-  | 'handleFlag'
-  | 'handleQuotedReply'
-  | 'handleMarkUnread'
-  | 'handleMute'
-  | 'handlePinMessage'
-  | 'handleRetry'
-  | 'handleReaction'
-  | 'handleThreadReply'
-  | 'handleBlockUser'
-  | 'removeMessage'
-  | 'deleteReaction'
-  | 'retrySendMessage'
-  | 'selectReaction'
-  | 'supportedReactions'
-  | 'updateMessage'
-> &
-  Pick<ChannelContextValue, 'channel' | 'enforceUniqueReaction'> &
-  Pick<ChatContextValue, 'client'> &
-  Pick<ThreadContextValue, 'openThread'> &
-  Pick<MessageContextValue, 'dismissOverlay' | 'message'> &
-  Pick<TranslationContextValue, 't'> & {
-    onThreadSelect?: (message: LocalMessage) => void;
-  } & Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>;
-
-export const useMessageActions = ({
-  channel,
-  client,
-  deleteMessage: deleteMessageFromContext,
-  deleteReaction,
-  enforceUniqueReaction,
-  handleBan,
-  handleCopy,
-  handleDelete,
-  handleDeleteForMe,
-  handleEdit,
-  handleFlag,
-  handleMarkUnread,
-  handleMute,
-  handlePinMessage,
-  handleQuotedReply,
-  handleReaction: handleReactionProp,
-  handleRetry,
-  handleThreadReply,
-  handleBlockUser,
-  message,
-  onThreadSelect,
-  openThread,
-  retrySendMessage,
-  selectReaction,
-  sendReaction,
-  setEditingState,
-  supportedReactions,
-  t,
-  setQuotedMessage,
-}: MessageActionsHookProps) => {
+/**
+ * The default message actions (copy, edit, reply, pin, mute, delete, ...) for the message this
+ * component renders, ready to pass to a `MessageActionList`. Call it inside a message, e.g. in a
+ * custom message component or a custom `MessageActionList`. The SDK itself calls it only when a
+ * message's action menu opens.
+ */
+export const useMessageActions = () => {
+  const { client } = useChatContext();
+  const { channel } = useChannelContext();
+  const { handleReaction, message, onThreadSelect } = useMessageContext();
+  const {
+    handleBan,
+    handleBlockUser,
+    handleCopy,
+    handleDelete,
+    handleDeleteForMe,
+    handleEdit,
+    handleFlag,
+    handleMarkUnread,
+    handleMute,
+    handlePinMessage,
+    handleQuotedReply,
+    handleRetry,
+    handleThreadReply,
+  } = useMessagesContext();
+  const { t } = useTranslationContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -103,30 +59,12 @@ export const useMessageActions = ({
     handleToggleBanUser,
     handleToggleMuteUser,
     handleTogglePinMessage,
-    handleToggleReaction,
     handleToggleBlockUser,
-  } = useMessageActionHandlers({
-    channel,
-    client,
-    deleteMessage: deleteMessageFromContext,
-    deleteReaction,
-    enforceUniqueReaction,
-    message,
-    retrySendMessage,
-    sendReaction,
-    setEditingState,
-    setQuotedMessage,
-    supportedReactions,
-  });
-
-  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
+  } = useMessageActionHandlers();
 
   const onOpenThread = useStableCallback(() => {
     if (onThreadSelect) {
-      onThreadSelect(message);
-    }
-    if (openThread) {
-      openThread(message);
+      onThreadSelect(client.threads.ensure({ channel, parentMessage: message }));
     }
   });
 
@@ -141,7 +79,6 @@ export const useMessageActions = ({
   });
 
   const onCopyMessage = useStableCallback(() => {
-    //
     if (handleCopy) {
       handleCopy(message);
     }
@@ -190,14 +127,6 @@ export const useMessageActions = ({
     handleTogglePinMessage();
   });
 
-  const onReaction = useStableCallback(async (reactionType: string) => {
-    if (handleReactionProp) {
-      handleReactionProp(message, reactionType);
-    }
-
-    await handleToggleReaction(reactionType);
-  });
-
   const onMuteUser = useStableCallback(async () => {
     if (message.user?.id) {
       if (handleMute) {
@@ -218,7 +147,7 @@ export const useMessageActions = ({
   const onRetry = useStableCallback(async () => {
     const messageWithoutReservedFields = removeReservedFields(message);
     if (handleRetry) {
-      handleRetry(messageWithoutReservedFields as LocalMessage);
+      handleRetry(messageWithoutReservedFields);
     }
 
     await handleResendMessage();
@@ -232,6 +161,7 @@ export const useMessageActions = ({
   });
 
   const isMuted = useUserMuteActive(message.user);
+  const isBanned = message.user?.banned;
   const isBlocked = new Set(client.blockedUsers.getLatestValue().userIds).has(
     message.user?.id ?? '',
   );
@@ -249,33 +179,35 @@ export const useMessageActions = ({
     const name = message.user?.name || message.user?.id || '';
 
     Alert.alert(
-      t('Block {{ name }}', { name }),
-      t("They won't be able to message or call you. You can unblock them later."),
+      t('message.blockUserConfirm.title', 'Block {{ name }}', { name }),
+      t(
+        'message.blockUserConfirm.text',
+        "They won't be able to message or call you. You can unblock them later.",
+      ),
       [
         {
           style: 'cancel',
-          text: t('Cancel'),
+          text: t('common.cancel.label', 'Cancel'),
         },
         {
           onPress: () => {
             handleToggleBlockUser(message.user);
           },
           style: 'destructive',
-          text: t('Block'),
+          text: t('message.blockUserConfirm.label', 'Block'),
         },
       ],
     );
   });
 
   return useMemo(() => {
-    const handleReaction =
-      !error && !selectReaction ? onReaction : !error ? selectReaction?.(message) : undefined;
-
     const banUser: MessageActionType = {
       action: onBanUser,
       actionType: 'banUser',
       icon: <icons.UserDelete width={20} height={20} stroke={semantics.accentError} />,
-      title: message.user?.banned ? t('Unban User') : t('Ban User'),
+      title: isBanned
+        ? t('message.unbanUser.label', 'Unban User')
+        : t('message.banUser.label', 'Ban User'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
     };
@@ -284,7 +216,7 @@ export const useMessageActions = ({
       action: onCopyMessage,
       actionType: 'copyMessage',
       icon: <icons.Copy width={20} height={20} stroke={semantics.textSecondary} />,
-      title: t('Copy Message'),
+      title: t('message.copyMessage.label', 'Copy Message'),
       type: 'standard',
     };
 
@@ -292,7 +224,7 @@ export const useMessageActions = ({
       action: onDeleteMessage,
       actionType: 'deleteMessage',
       icon: <icons.Delete stroke={semantics.accentError} width={20} height={20} />,
-      title: t('Delete Message'),
+      title: t('message.deleteMessage.label', 'Delete Message'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
     };
@@ -301,7 +233,7 @@ export const useMessageActions = ({
       action: onDeleteForMeMessage,
       actionType: 'deleteForMeMessage',
       icon: <icons.Delete stroke={semantics.accentError} width={20} height={20} />,
-      title: t('Delete for me'),
+      title: t('message.deleteForMe.label', 'Delete for me'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
     };
@@ -310,7 +242,7 @@ export const useMessageActions = ({
       action: onEditMessage,
       actionType: 'editMessage',
       icon: <icons.Edit width={20} height={20} stroke={semantics.textSecondary} />,
-      title: t('Edit Message'),
+      title: t('message.editMessage.label', 'Edit Message'),
       type: 'standard',
     };
 
@@ -318,7 +250,7 @@ export const useMessageActions = ({
       action: onFlagMessage,
       actionType: 'flagMessage',
       icon: <icons.MessageFlag width={20} height={20} stroke={semantics.textSecondary} />,
-      title: t('Flag Message'),
+      title: t('message.flagMessage.label', 'Flag Message'),
       type: 'standard',
     };
 
@@ -326,7 +258,7 @@ export const useMessageActions = ({
       action: onMarkUnread,
       actionType: 'markUnread',
       icon: <icons.UnreadIndicator width={20} height={20} stroke={semantics.textSecondary} />,
-      title: t('Mark as Unread'),
+      title: t('message.markUnread.label', 'Mark as Unread'),
       type: 'standard',
     };
 
@@ -334,7 +266,7 @@ export const useMessageActions = ({
       action: onTogglePinMessage,
       actionType: 'pinMessage',
       icon: <icons.Pin width={20} height={20} stroke={semantics.textSecondary} />,
-      title: t('Pin to Conversation'),
+      title: t('message.pinMessage.label', 'Pin to Conversation'),
       type: 'standard',
     };
 
@@ -342,7 +274,7 @@ export const useMessageActions = ({
       action: onTogglePinMessage,
       actionType: 'unpinMessage',
       icon: <icons.Unpin width={20} height={20} stroke={semantics.textSecondary} />,
-      title: t('Unpin from Conversation'),
+      title: t('message.unpinMessage.label', 'Unpin from Conversation'),
       type: 'standard',
     };
 
@@ -354,7 +286,9 @@ export const useMessageActions = ({
       ) : (
         <icons.Mute fill={semantics.textSecondary} height={20} width={20} />
       ),
-      title: isMuted ? t('Unmute User') : t('Mute User'),
+      title: isMuted
+        ? t('message.unmuteUser.label', 'Unmute User')
+        : t('message.muteUser.label', 'Mute User'),
       type: 'standard',
     };
 
@@ -362,7 +296,7 @@ export const useMessageActions = ({
       action: onQuotedReply,
       actionType: 'quotedReply',
       icon: <icons.CurveLineLeftUp stroke={semantics.textSecondary} height={20} width={20} />,
-      title: t('Reply'),
+      title: t('message.reply.label', 'Reply'),
       type: 'standard',
     };
 
@@ -370,7 +304,7 @@ export const useMessageActions = ({
       action: onRetry,
       actionType: 'retry',
       icon: <icons.Resend stroke={semantics.textSecondary} height={20} width={20} />,
-      title: t('Resend'),
+      title: t('message.resend.label', 'Resend'),
       type: 'standard',
     };
 
@@ -378,7 +312,7 @@ export const useMessageActions = ({
       action: onThreadReply,
       actionType: 'threadReply',
       icon: <icons.ThreadReply stroke={semantics.textSecondary} height={20} width={20} />,
-      title: t('Thread Reply'),
+      title: t('message.threadReply.label', 'Thread Reply'),
       type: 'standard',
     };
 
@@ -386,7 +320,9 @@ export const useMessageActions = ({
       action: onBlockUser,
       actionType: 'blockUser',
       icon: <icons.BlockUser stroke={semantics.accentError} height={20} width={20} />,
-      title: isBlocked ? t('Unblock User') : t('Block User'),
+      title: isBlocked
+        ? t('message.unblockUser.label', 'Unblock User')
+        : t('message.blockUser.label', 'Block User'),
       titleStyle: { color: semantics.accentError },
       type: 'destructive',
     };
@@ -409,11 +345,11 @@ export const useMessageActions = ({
       blockUser,
     };
   }, [
-    error,
+    handleReaction,
     icons,
+    isBanned,
     isBlocked,
     isMuted,
-    message,
     onBanUser,
     onBlockUser,
     onCopyMessage,
@@ -424,11 +360,9 @@ export const useMessageActions = ({
     onMarkUnread,
     onMuteUser,
     onQuotedReply,
-    onReaction,
     onRetry,
     onThreadReply,
     onTogglePinMessage,
-    selectReaction,
     semantics.accentError,
     semantics.textSecondary,
     t,

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

@@ -6,29 +6,27 @@ import {
 import { MessageStatusTypes } from '../../../utils/utils';
 
 export type UseMessageDataProps = Partial<
-  Pick<MessageContextValue, 'channel' | 'groupStyles' | 'isMyMessage' | 'message'>
+  Pick<MessageContextValue, 'groupStyles' | 'isMyMessage' | 'isVeryLastMessage' | 'message'>
 >;
 
 export const useMessageData = ({
-  channel: propChannel,
   groupStyles: propGroupStyles,
   isMyMessage: propIsMyMessage,
+  isVeryLastMessage: propIsVeryLastMessage,
   message: propMessage,
 }: UseMessageDataProps) => {
   const {
-    channel: contextChannel,
     groupStyles: contextGroupStyles,
     isMyMessage: contextIsMyMessage,
+    isVeryLastMessage: contextIsVeryLastMessage,
     message: contextMessage,
   } = useMessageContext();
 
-  const channel = propChannel || contextChannel;
   const groupStyles = propGroupStyles || contextGroupStyles;
   const isMyMessage = propIsMyMessage || contextIsMyMessage;
   const message = propMessage || contextMessage;
 
-  const isVeryLastMessage =
-    channel?.state.messages[channel?.state.messages.length - 1]?.id === message.id;
+  const isVeryLastMessage = propIsVeryLastMessage ?? contextIsVeryLastMessage ?? false;
 
   const messageGroupedSingle = groupStyles.includes('single');
   const messageGroupedBottom = groupStyles.includes('bottom');

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

@@ -1,46 +1,28 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
 
-import { Event, LocalMessage, UserResponse } from 'stream-chat';
+import type { LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import { useStableCallback } from '../../../hooks';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const EMPTY_DELIVERED: UserResponse[] = [];
 
 export const useMessageDeliveredData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
-  const { client } = useChatContext();
-
-  const messageIdRef = useRef<string>(message?.id);
-
-  const calculate = useStableCallback(() => {
-    if (!message?.created_at) {
-      return [];
-    }
-    const messageRef = {
-      msgId: message.id,
-      timestampMs: new Date(message.created_at).getTime(),
-    };
-    return channel.messageReceiptsTracker.deliveredForMessage(messageRef);
-  });
-
-  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>(() => calculate());
-
-  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
-    setDeliveredTo(calculate());
-    messageIdRef.current = message.id;
-  }
-
-  useEffect(() => {
-    const { unsubscribe } = channel.on('message.delivered', (event: Event) => {
-      /**
-       * An optimization to only re-calculate if the event is received by a different user.
-       */
-      if (event.user?.id !== client.user?.id) {
-        setDeliveredTo(calculate());
-      }
-    });
-    return unsubscribe;
-  }, [channel, calculate, client.user?.id]);
+  const msgId = message?.id;
+  const createdAt = message?.created_at;
+
+  const selector = useCallback(
+    () => ({
+      deliveredTo:
+        msgId && typeof createdAt === 'number' && Number.isFinite(createdAt)
+          ? channel.messageReceiptsTracker.deliveredForMessage({ msgId, timestamp: createdAt })
+          : EMPTY_DELIVERED,
+    }),
+    [channel, createdAt, msgId],
+  );
+
+  const { deliveredTo } = useStateStore(channel.messageReceiptsTracker.snapshotStore, selector);
 
   return deliveredTo;
 };

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

@@ -0,0 +1,153 @@
+import { DeleteMessageOptions, LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
+import { useStableCallback } from '../../../hooks';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+export type MessageOperations = {
+  // FIXME: Remove the signature with optionsOrHardDelete boolean with the next major release
+  deleteMessage: (
+    message: LocalMessage,
+    optionsOrHardDelete?: boolean | DeleteMessageOptions,
+  ) => Promise<void>;
+  deleteReaction: (type: string, messageId: string) => Promise<void>;
+  removeMessage: (message: { id: string; parent_id?: string }) => Promise<void>;
+  retrySendMessage: (message: LocalMessage) => Promise<void>;
+  sendReaction: (type: string, messageId: string) => Promise<void>;
+  updateMessage: (updatedMessage: MessageResponse | LocalMessage) => void;
+};
+
+/**
+ * Message operations (delete/remove/retry/react/update) resolved from the channel and — when a
+ * thread is open — the thread instance. These are thin wrappers over the stream-chat message
+ * operations engine (`messageOperations.*`, `messagePaginator.ingestItem/removeItem`), which owns the
+ * optimistic lifecycle, offline-DB persistence and paginator ingest. Previously these lived on the
+ * MessagesContext; they now resolve per-message (mirroring stream-chat-react, which has no shared
+ * action context) so the operations stay co-located with the LLC state they drive.
+ */
+export const useMessageOperations = (): MessageOperations => {
+  const { client } = useChatContext();
+  const { channel, enforceUniqueReaction } = useChannelContext();
+  const { thread } = useThreadContext();
+
+  const updateMessage: MessageOperations['updateMessage'] = useStableCallback((updatedMessage) => {
+    if (!channel) {
+      return;
+    }
+
+    const formatted = channel.state.formatMessage(updatedMessage);
+    if (!updatedMessage.parent_id || updatedMessage.show_in_channel) {
+      channel.messagePaginator.ingestItem(formatted);
+    }
+    if (updatedMessage.parent_id) {
+      thread?.messagePaginator?.ingestItem(formatted);
+    }
+  });
+
+  /**
+   * Removes the message from local state
+   */
+  const removeMessage: MessageOperations['removeMessage'] = useStableCallback(async (message) => {
+    if (channel) {
+      // removeItem is a no-op when the item isn't in that paginator, so removing from the channel
+      // unconditionally is safe (a hidden reply simply isn't there) and covers replies shown in
+      // the channel; replies additionally live in the open thread's paginator. No channel.state
+      // write (that store is being removed).
+      channel.messagePaginator.removeItem({ id: message.id });
+      if (message.parent_id) {
+        thread?.messagePaginator?.removeItem({ id: message.id });
+      }
+    }
+
+    if (client.offlineDb) {
+      await client.offlineDb.handleRemoveMessage({ messageId: message.id });
+    }
+  });
+
+  const retrySendMessage: MessageOperations['retrySendMessage'] = useStableCallback(
+    async (localMessage) => {
+      await (thread ?? channel).messageOperations.retry({ localMessage });
+    },
+  );
+
+  const sendReaction: MessageOperations['sendReaction'] = useStableCallback(
+    async (type, messageId) => {
+      if (!channel?.id || !client.user) {
+        throw new Error('Channel has not been initialized');
+      }
+
+      // Route the optimistic update to the paginator that actually holds the message: the open
+      // thread when the message is a reply loaded there (giving pure replies optimism the channel
+      // paginator can't), otherwise the channel. Both instances forward the request through
+      // `channel.sendReaction`, so this only decides the optimistic ingest target — never sending a
+      // channel message's reaction into the thread paginator while a (channel-wide) thread is open.
+      const target = thread?.messagePaginator.getItem(messageId) ? thread : channel;
+
+      await target.messageOperations.addReaction({
+        messageId,
+        options: { enforce_unique: enforceUniqueReaction },
+        reaction: { type },
+      });
+    },
+  );
+
+  const deleteReaction: MessageOperations['deleteReaction'] = useStableCallback(
+    async (type, messageId) => {
+      if (!channel?.id || !client.user) {
+        throw new Error('Channel has not been initialized');
+      }
+
+      const target = thread?.messagePaginator.getItem(messageId) ? thread : channel;
+
+      await target.messageOperations.deleteReaction({ messageId, type });
+    },
+  );
+
+  const deleteMessage: MessageOperations['deleteMessage'] = useStableCallback(
+    async (message, optionsOrHardDelete = false) => {
+      if (!channel?.id) {
+        throw new Error('Channel has not been initialized yet');
+      }
+
+      // A failed send exists only locally, so it is removed without a server delete. A failed edit has
+      // the same status but the server has the message; it is the one carrying `message_text_updated_at`.
+      if (message.status === MessageStatusTypes.FAILED && !message.message_text_updated_at) {
+        await removeMessage(message);
+        return;
+      }
+
+      let options: DeleteMessageOptions = {};
+      if (typeof optionsOrHardDelete === 'boolean') {
+        options = optionsOrHardDelete ? { hard: true } : {};
+      } else if (optionsOrHardDelete?.delete_for_me) {
+        options = { delete_for_me: true };
+      } else if (optionsOrHardDelete?.hard) {
+        options = { hard: true };
+      }
+
+      // The LLC owns the whole delete lifecycle: the optimistic `deleted` marking (or removal, for a
+      // hard delete), the request (honoring any configState delete handler), the offline-DB write, and
+      // the revert if the delete is definitively rejected.
+      //
+      // Routed by MEMBERSHIP, like `sendReaction` above: a reply loaded in the open thread goes through
+      // the thread instance, everything else — including the thread's own parent message, which the
+      // reply paginator cannot hold — through the channel.
+      const target = thread?.messagePaginator.getItem(message.id) ? thread : channel;
+      await target.messageOperations.delete({
+        localMessage: message,
+        options,
+      });
+    },
+  );
+
+  return {
+    deleteMessage,
+    deleteReaction,
+    removeMessage,
+    retrySendMessage,
+    sendReaction,
+    updateMessage,
+  };
+};