feat: add optional support of delete message for me (#3246)

* feat: add optional support of delete message for me

* feat: add optional support of delete message for me

* fix: update stream-chat package

* fix: add action to sample app only

* fix: add action to sample app only

* fix: how delete for me action is handled on the SDK

* chore: update stream-chat version

Author: khushal87

examples/ExpoMessaging/app/index.tsx

@@ -1,5 +1,5 @@
 import { Alert, Image, Pressable, StyleSheet, View } from 'react-native';
-import { ChannelList } from 'stream-chat-expo';
+import { ChannelList, SqliteClient } from 'stream-chat-expo';
 import { useCallback, useContext, useMemo } from 'react';
 import { Stack, useRouter } from 'expo-router';
 import { ChannelSort } from 'stream-chat';
@@ -19,7 +19,13 @@ const LogoutButton = () => {
   const onLogoutHandler = useCallback(() => {
     Alert.alert('Logout', 'Are you sure you want to logout?', [
       { text: 'Cancel', style: 'cancel' },
-      { text: 'Logout', onPress: logOut },
+      {
+        text: 'Logout',
+        onPress: () => {
+          SqliteClient.resetDB();
+          logOut();
+        },
+      },
     ]);
   }, [logOut]);
 

examples/ExpoMessaging/components/ChatWrapper.tsx

@@ -46,7 +46,7 @@ export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <OverlayProvider i18nInstance={streami18n} value={{ style: theme }}>
-      <Chat client={chatClient} i18nInstance={streami18n}>
+      <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>
         {children}
       </Chat>
     </OverlayProvider>

examples/SampleApp/src/utils/messageActions.tsx

@@ -2,6 +2,7 @@ import { Alert } from 'react-native';
 import { StreamChat } from 'stream-chat';
 import {
   Colors,
+  Delete,
   messageActions,
   MessageActionsParams,
   Time,
@@ -20,7 +21,7 @@ export function channelMessageActions({
   t: TranslationContextValue['t'];
   colors?: typeof Colors;
 }) {
-  const { dismissOverlay } = params;
+  const { dismissOverlay, deleteForMeMessage } = params;
   const actions = messageActions(params);
 
   // We cannot use the useMessageReminder hook here because it is a hook.
@@ -88,6 +89,27 @@ export function channelMessageActions({
     title: reminder ? 'Remove Reminder' : 'Remind Me',
     icon: <Bell height={24} width={24} />,
   });
+  actions.push({
+    action: async () => {
+      Alert.alert('Delete for me', 'Are you sure you want to delete this message for me?', [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          onPress: async () => {
+            await deleteForMeMessage?.action();
+            dismissOverlay();
+          },
+          style: 'destructive',
+        },
+      ]);
+    },
+    actionType: 'deleteForMe',
+    icon: <Delete fill={colors?.accent_red} size={24} />,
+    title: t('Delete for me'),
+  });
 
   return actions;
 }

examples/TypeScriptMessaging/yarn.lock

@@ -2734,6 +2734,15 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axios@^1.12.2:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.12.2.tgz#6c307390136cf7a2278d09cec63b136dfc6e6da7"
+  integrity sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.4"
+    proxy-from-env "^1.1.0"
+
 axios@^1.6.0:
   version "1.7.9"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a"
@@ -7319,14 +7328,14 @@ [email protected]:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.17.0:
-  version "9.17.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.17.0.tgz#540cf1ea03b08a394d6140696aae8528e9ba9ce2"
-  integrity sha512-ys6K73wIVWs5+qsfPJ9wumEUtgbMXYVbH1dhmAZ1oYtQ01dY/avsvt25PYDakVjKeyrnT+y8T/xEzfeF/WDJsg==
+stream-chat@^9.23.0:
+  version "9.23.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.23.0.tgz#e7e5cf729861597e7198907c1cab22a57d68a2fc"
+  integrity sha512-UW112HYsLnYb4RMIXBtAouNQCCe0weVzNivjezsw+JKK1b/TX0JLBi+wK25mBUEO+coOGKfXiye6IB3gao8ipw==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"
-    axios "^1.6.0"
+    axios "^1.12.2"
     base64-js "^1.5.1"
     form-data "^4.0.4"
     isomorphic-ws "^5.0.0"

package/src/components/Channel/Channel.tsx

@@ -9,6 +9,7 @@ import {
   Channel as ChannelClass,
   ChannelState,
   Channel as ChannelType,
+  DeleteMessageOptions,
   EventHandler,
   LocalMessage,
   localMessageToNewMessagePayload,
@@ -324,6 +325,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'handleBan'
       | 'handleCopy'
       | 'handleDelete'
+      | 'handleDeleteForMe'
       | 'handleEdit'
       | 'handleFlag'
       | 'handleMarkUnread'
@@ -582,6 +584,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,
@@ -1515,7 +1518,15 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   });
 
   const deleteMessage: MessagesContextValue['deleteMessage'] = useStableCallback(
-    async (message, hardDelete = false) => {
+    async (message, optionsOrHardDelete = false) => {
+      let options: DeleteMessageOptions = {};
+      if (typeof optionsOrHardDelete === 'boolean') {
+        options = optionsOrHardDelete ? { hardDelete: true } : {};
+      } else if (optionsOrHardDelete?.deleteForMe) {
+        options = { deleteForMe: true };
+      } else if (optionsOrHardDelete?.hardDelete) {
+        options = { hardDelete: true };
+      }
       if (!channel.id) {
         throw new Error('Channel has not been initialized yet');
       }
@@ -1534,7 +1545,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
       threadInstance?.upsertReplyLocally({ message: updatedMessage });
 
-      const data = await client.deleteMessage(message.id, hardDelete);
+      const data = await client.deleteMessage(message.id, options);
 
       if (data?.message) {
         updateMessage({ ...data.message });
@@ -1845,6 +1856,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -33,6 +33,7 @@ export const useCreateMessagesContext = ({
   handleBan,
   handleCopy,
   handleDelete,
+  handleDeleteForMe,
   handleEdit,
   handleFlag,
   handleMarkUnread,
@@ -150,6 +151,7 @@ export const useCreateMessagesContext = ({
       handleBan,
       handleCopy,
       handleDelete,
+      handleDeleteForMe,
       handleEdit,
       handleFlag,
       handleMarkUnread,

package/src/components/Message/Message.tsx

@@ -121,6 +121,7 @@ export type MessagePressableHandlerPayload = PressableHandlerPayload & {
 export type MessageActionHandlers = {
   copyMessage: () => void;
   deleteMessage: () => void;
+  deleteForMeMessage: () => void;
   editMessage: () => void;
   flagMessage: () => void;
   markUnread: () => Promise<void>;
@@ -155,6 +156,7 @@ export type MessagePropsWithContext = Pick<
     | 'handleBan'
     | 'handleCopy'
     | 'handleDelete'
+    | 'handleDeleteForMe'
     | 'handleEdit'
     | 'handleFlag'
     | 'handleMarkUnread'
@@ -229,6 +231,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,
@@ -487,6 +490,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const {
     handleCopyMessage,
     handleDeleteMessage,
+    handleDeleteForMeMessage,
     handleEditMessage,
     handleFlagMessage,
     handleMarkUnreadMessage,
@@ -514,6 +518,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     banUser,
     copyMessage,
     deleteMessage,
+    deleteForMeMessage,
     editMessage,
     flagMessage,
     handleReaction,
@@ -534,6 +539,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleBan,
     handleCopy,
     handleDelete,
+    handleDeleteForMe,
     handleEdit,
     handleFlag,
     handleMarkUnread,
@@ -565,6 +571,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       : messageActionsProp({
           banUser,
           copyMessage,
+          deleteForMeMessage,
           deleteMessage,
           dismissOverlay,
           editMessage,
@@ -582,10 +589,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           showMessageReactions,
           threadReply,
           unpinMessage,
+          updateMessage,
         });
 
   const actionHandlers: MessageActionHandlers = {
     copyMessage: handleCopyMessage,
+    deleteForMeMessage: handleDeleteForMeMessage,
     deleteMessage: handleDeleteMessage,
     editMessage: handleEditMessage,
     flagMessage: handleFlagMessage,

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

@@ -66,6 +66,14 @@ export const useMessageActionHandlers = ({
     );
   };
 
+  const handleDeleteForMeMessage = async () => {
+    if (!message.id) {
+      return;
+    }
+
+    await deleteMessage(message, { deleteForMe: true });
+  };
+
   const handleToggleMuteUser = async () => {
     if (!message.user?.id) {
       return;
@@ -182,6 +190,7 @@ export const useMessageActionHandlers = ({
 
   return {
     handleCopyMessage,
+    handleDeleteForMeMessage,
     handleDeleteMessage,
     handleEditMessage,
     handleFlagMessage,

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

@@ -39,6 +39,7 @@ export type MessageActionsHookProps = Pick<
   | 'handleBan'
   | 'handleCopy'
   | 'handleDelete'
+  | 'handleDeleteForMe'
   | 'handleEdit'
   | 'handleFlag'
   | 'handleQuotedReply'
@@ -73,6 +74,7 @@ export const useMessageActions = ({
   handleBan,
   handleCopy,
   handleDelete,
+  handleDeleteForMe,
   handleEdit,
   handleFlag,
   handleMarkUnread,
@@ -101,6 +103,7 @@ export const useMessageActions = ({
   const {
     handleCopyMessage,
     handleDeleteMessage,
+    handleDeleteForMeMessage,
     handleEditMessage,
     handleFlagMessage,
     handleMarkUnreadMessage,
@@ -182,6 +185,19 @@ export const useMessageActions = ({
     titleStyle: { color: accent_red },
   };
 
+  const deleteForMeMessage: MessageActionType = {
+    action: () => {
+      dismissOverlay();
+      if (handleDeleteForMe) {
+        handleDeleteForMe(message);
+      }
+      handleDeleteForMeMessage();
+    },
+    actionType: 'deleteForMeMessage',
+    icon: <Delete fill={accent_red} size={24} />,
+    title: t('Delete for me'),
+  };
+
   const editMessage: MessageActionType = {
     action: () => {
       dismissOverlay();
@@ -319,6 +335,7 @@ export const useMessageActions = ({
   return {
     banUser,
     copyMessage,
+    deleteForMeMessage,
     deleteMessage,
     editMessage,
     flagMessage,

package/src/components/Message/utils/messageActions.ts

@@ -1,4 +1,5 @@
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { isClipboardAvailable } from '../../../native';
 
@@ -25,7 +26,10 @@ export type MessageActionsParams = {
   showMessageReactions: boolean;
   threadReply: MessageActionType;
   unpinMessage: MessageActionType;
-} & Pick<MessageContextValue, 'message' | 'isMyMessage'>;
+  // Optional Actions
+  deleteForMeMessage?: MessageActionType;
+} & Pick<MessageContextValue, 'message' | 'isMyMessage'> &
+  Pick<MessagesContextValue, 'updateMessage'>;
 
 export type MessageActionsProp = (param: MessageActionsParams) => MessageActionType[];