feat: add optional Delete for me message action (#2855)

MartinCupela · web-flow · commit ade1a9c1c409 · 2025-10-09T12:49:16.000+02:00
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
@@ -18,6 +18,7 @@ import type {
   ChannelMemberResponse,
   ChannelQueryOptions,
   ChannelState,
+  DeleteMessageOptions,
   ErrorFromResponse,
   Event,
   EventAPIResponse,
@@ -176,7 +177,10 @@ export type ChannelProps = ChannelPropsForwardedToComponentContext & {
    */
   channelQueryOptions?: ChannelQueryOptions;
   /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
-  doDeleteMessageRequest?: (message: LocalMessage) => Promise<MessageResponse>;
+  doDeleteMessageRequest?: (
+    message: LocalMessage,
+    options?: DeleteMessageOptions,
+  ) => Promise<MessageResponse>;
   /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
   doMarkReadRequest?: (
     channel: StreamChannel,
@@ -910,15 +914,18 @@ const ChannelInner = (
     );
 
   const deleteMessage = useCallback(
-    async (message: LocalMessage): Promise<MessageResponse> => {
+    async (
+      message: LocalMessage,
+      options?: DeleteMessageOptions,
+    ): Promise<MessageResponse> => {
       if (!message?.id) {
         throw new Error('Cannot delete a message - missing message ID.');
       }
       let deletedMessage;
       if (doDeleteMessageRequest) {
-        deletedMessage = await doDeleteMessageRequest(message);
+        deletedMessage = await doDeleteMessageRequest(message, options);
       } else {
-        const result = await client.deleteMessage(message.id);
+        const result = await client.deleteMessage(message.id, options);
         deletedMessage = result.message;
       }
 
diff --git a/src/components/Channel/__tests__/Channel.test.js b/src/components/Channel/__tests__/Channel.test.js
@@ -1607,15 +1607,18 @@ describe('Channel', () => {
 
         it('should call the default client.deleteMessage() function', async () => {
           const message = generateMessage();
-
+          const deleteMessageOptions = { deleteForMe: true, hard: false };
           const clientDeleteMessageSpy = jest
             .spyOn(chatClient, 'deleteMessage')
             .mockImplementationOnce(() => Promise.resolve({ message }));
           await renderComponent({ channel, chatClient }, ({ deleteMessage }) => {
-            deleteMessage(message);
+            deleteMessage(message, deleteMessageOptions);
           });
           await waitFor(() =>
-            expect(clientDeleteMessageSpy).toHaveBeenCalledWith(message.id),
+            expect(clientDeleteMessageSpy).toHaveBeenCalledWith(
+              message.id,
+              deleteMessageOptions,
+            ),
           );
         });
 
@@ -1644,7 +1647,7 @@ describe('Channel', () => {
 
         it('should call the custom doDeleteMessageRequest instead of client.deleteMessage()', async () => {
           const message = generateMessage();
-
+          const deleteMessageOptions = { deleteForMe: true, hard: false };
           const doDeleteMessageRequest = jest.fn();
           const clientDeleteMessageSpy = jest
             .spyOn(chatClient, 'deleteMessage')
@@ -1653,13 +1656,16 @@ describe('Channel', () => {
           await renderComponent(
             { channel, chatClient, doDeleteMessageRequest },
             ({ deleteMessage }) => {
-              deleteMessage(message);
+              deleteMessage(message, deleteMessageOptions);
             },
           );
 
           await waitFor(() => {
             expect(clientDeleteMessageSpy).not.toHaveBeenCalled();
-            expect(doDeleteMessageRequest).toHaveBeenCalledWith(message);
+            expect(doDeleteMessageRequest).toHaveBeenCalledWith(
+              message,
+              deleteMessageOptions,
+            );
           });
         });
       });
diff --git a/src/components/Channel/hooks/useCreateChannelStateContext.ts b/src/components/Channel/hooks/useCreateChannelStateContext.ts
@@ -59,6 +59,8 @@ export const useCreateChannelStateContext = (
     channelCapabilities[capability] = true;
   });
 
+  // FIXME: this is crazy - I could not find out why the messages were not getting updated when only message properties that are not part
+  // of this serialization has been changed. A great example of memoization gone wrong.
   const memoizedMessageData = skipMessageDataMemoization
     ? messages
     : messages
@@ -69,10 +71,11 @@ export const useCreateChannelStateContext = (
             pinned,
             reply_count,
             status,
+            type,
             updated_at,
             user,
           }) =>
-            `${deleted_at}${
+            `${type}${deleted_at}${
               latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
             }${pinned}${reply_count}${status}${
               updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
diff --git a/src/components/Message/__tests__/utils.test.js b/src/components/Message/__tests__/utils.test.js
@@ -17,6 +17,7 @@ import {
   MESSAGE_ACTIONS,
   messageHasAttachments,
   messageHasReactions,
+  OPTIONAL_MESSAGE_ACTIONS,
   validateAndGetMessage,
 } from '../utils';
 
@@ -90,6 +91,7 @@ describe('Message utils', () => {
       canReply: true,
     };
     const actions = Object.values(MESSAGE_ACTIONS);
+    const optionalActions = Object.values(OPTIONAL_MESSAGE_ACTIONS);
 
     it.each([
       ['empty', []],
@@ -131,31 +133,36 @@ describe('Message utils', () => {
     });
 
     it.each([
-      ['allow', 'edit', 'canEdit', true],
-      ['not allow', 'edit', 'canEdit', false],
-      ['allow', 'delete', 'canDelete', true],
-      ['not allow', 'delete', 'canDelete', false],
-      ['allow', 'flag', 'canFlag', true],
-      ['not allow', 'flag', 'canFlag', false],
-      ['allow', 'markUnread', 'canMarkUnread', true],
-      ['not allow', 'markUnread', 'canMarkUnread', false],
-      ['allow', 'mute', 'canMute', true],
-      ['not allow', 'mute', 'canMute', false],
-      ['allow', 'pin', 'canPin', true],
-      ['not allow', 'pin', 'canPin', false],
-      ['allow', 'quote', 'canQuote', true],
-      ['not allow', 'quote', 'canQuote', false],
-    ])('it should %s %s when %s is %s', (_, action, capabilityKey, capabilityValue) => {
-      const capabilities = {
-        [capabilityKey]: capabilityValue,
-      };
-      const result = getMessageActions(actions, capabilities);
-      if (capabilityValue) {
-        expect(result).toStrictEqual([action]);
-      } else {
-        expect(result).not.toStrictEqual([action]);
-      }
-    });
+      ['allow', 'edit', 'canEdit', true, actions],
+      ['not allow', 'edit', 'canEdit', false, actions],
+      ['allow', 'delete', 'canDelete', true, actions],
+      ['not allow', 'delete', 'canDelete', false, actions],
+      ['allow', 'deleteForMe', 'canDelete', true, optionalActions],
+      ['not allow', 'deleteForMe', 'canDelete', false, optionalActions],
+      ['allow', 'flag', 'canFlag', true, actions],
+      ['not allow', 'flag', 'canFlag', false, actions],
+      ['allow', 'markUnread', 'canMarkUnread', true, actions],
+      ['not allow', 'markUnread', 'canMarkUnread', false, actions],
+      ['allow', 'mute', 'canMute', true, actions],
+      ['not allow', 'mute', 'canMute', false, actions],
+      ['allow', 'pin', 'canPin', true, actions],
+      ['not allow', 'pin', 'canPin', false, actions],
+      ['allow', 'quote', 'canQuote', true, actions],
+      ['not allow', 'quote', 'canQuote', false, actions],
+    ])(
+      'it should %s %s when %s is %s',
+      (_, action, capabilityKey, capabilityValue, actionsToUse) => {
+        const capabilities = {
+          [capabilityKey]: capabilityValue,
+        };
+        const result = getMessageActions(actionsToUse, capabilities);
+        if (capabilityValue) {
+          expect(result).toStrictEqual([action]);
+        } else {
+          expect(result).not.toStrictEqual([action]);
+        }
+      },
+    );
   });
 
   describe('shouldMessageComponentUpdate', () => {
diff --git a/src/components/Message/hooks/__tests__/useDeleteHandler.test.js b/src/components/Message/hooks/__tests__/useDeleteHandler.test.js
@@ -75,9 +75,10 @@ describe('useDeleteHandler custom hook', () => {
 
   it('should delete a message by its id', async () => {
     const message = generateMessage();
+    const deleteMessageOptions = { deleteForMe: true, hard: false };
     const handleDelete = await renderUseDeleteHandler(message);
-    await handleDelete(mouseEventMock);
-    expect(deleteMessage).toHaveBeenCalledWith(message);
+    await handleDelete(mouseEventMock, deleteMessageOptions);
+    expect(deleteMessage).toHaveBeenCalledWith(message, deleteMessageOptions);
   });
 
   it('should update the message with the result of deletion', async () => {
diff --git a/src/components/Message/hooks/useDeleteHandler.ts b/src/components/Message/hooks/useDeleteHandler.ts
@@ -4,7 +4,7 @@ import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
-import type { LocalMessage } from 'stream-chat';
+import type { DeleteMessageOptions, LocalMessage } from 'stream-chat';
 import type { ReactEventHandler } from '../types';
 
 export type DeleteMessageNotifications = {
@@ -22,14 +22,14 @@ export const useDeleteHandler = (
   const { client } = useChatContext('useDeleteHandler');
   const { t } = useTranslationContext('useDeleteHandler');
 
-  return async (event) => {
+  return async (event, options?: DeleteMessageOptions) => {
     event.preventDefault();
     if (!message?.id || !client || !updateMessage) {
       return;
     }
 
     try {
-      const deletedMessage = await deleteMessage(message);
+      const deletedMessage = await deleteMessage(message, options);
       updateMessage(deletedMessage);
     } catch (e) {
       const errorMessage =
diff --git a/src/components/Message/utils.tsx b/src/components/Message/utils.tsx
@@ -52,6 +52,10 @@ export const isUserMuted = (message: LocalMessage, mutes?: Mute[]) => {
   return !!userMuted.length;
 };
 
+export const OPTIONAL_MESSAGE_ACTIONS = {
+  deleteForMe: 'deleteForMe',
+};
+
 export const MESSAGE_ACTIONS = {
   delete: 'delete',
   edit: 'edit',
@@ -67,7 +71,7 @@ export const MESSAGE_ACTIONS = {
 };
 
 export type MessageActionsArray<T extends string = string> = Array<
-  keyof typeof MESSAGE_ACTIONS | T
+  keyof typeof MESSAGE_ACTIONS | keyof typeof OPTIONAL_MESSAGE_ACTIONS | T
 >;
 
 // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
@@ -172,6 +176,10 @@ export const getMessageActions = (
     messageActionsAfterPermission.push(MESSAGE_ACTIONS.delete);
   }
 
+  if (canDelete && messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1) {
+    messageActionsAfterPermission.push(OPTIONAL_MESSAGE_ACTIONS.deleteForMe);
+  }
+
   if (canEdit && messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1) {
     messageActionsAfterPermission.push(MESSAGE_ACTIONS.edit);
   }
diff --git a/src/components/MessageActions/MessageActionsBox.tsx b/src/components/MessageActions/MessageActionsBox.tsx
@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 import React from 'react';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
 import { RemindMeActionButton } from './RemindMeSubmenu';
-import { useMessageReminder } from '../Message';
+import { OPTIONAL_MESSAGE_ACTIONS, useMessageReminder } from '../Message';
 import { useMessageComposer } from '../MessageInput';
 import {
   useChatContext,
@@ -162,6 +162,17 @@ const UnMemoizedMessageActionsBox = (props: MessageActionsBoxProps) => {
             {t('Delete')}
           </button>
         )}
+        {messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1 &&
+          !message.deleted_for_me && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={(e) => handleDelete(e, { deleteForMe: true })}
+              role='option'
+            >
+              {t('Delete for me')}
+            </button>
+          )}
         {messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1 && (
           <RemindMeActionButton className={buttonClassName} isMine={mine} />
         )}
diff --git a/src/components/MessageActions/__tests__/MessageActionsBox.test.js b/src/components/MessageActions/__tests__/MessageActionsBox.test.js
@@ -179,6 +179,20 @@ describe('MessageActionsBox', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should call the handleDelete prop if the deleteForMe button is clicked', async () => {
+    getMessageActionsMock.mockImplementationOnce(() => ['deleteForMe']);
+    const handleDelete = jest.fn();
+    const {
+      result: { container, getByText },
+    } = await renderComponent({ handleDelete, message: generateMessage() });
+    await act(async () => {
+      await fireEvent.click(getByText('Delete for me'));
+    });
+    expect(handleDelete).toHaveBeenCalledTimes(1);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
   it('should call the handlePin prop if the pin button is clicked', async () => {
     getMessageActionsMock.mockImplementationOnce(() => ['pin']);
     const handlePin = jest.fn();
diff --git a/src/context/ChannelActionContext.tsx b/src/context/ChannelActionContext.tsx
@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
 
 import type {
+  DeleteMessageOptions,
   LocalMessage,
   Message,
   MessageResponse,
@@ -29,7 +30,10 @@ export type RetrySendMessage = (message: LocalMessage) => Promise<void>;
 export type ChannelActionContextValue = {
   addNotification: (text: string, type: 'success' | 'error') => void;
   closeThread: (event?: React.BaseSyntheticEvent) => void;
-  deleteMessage: (message: LocalMessage) => Promise<MessageResponse>;
+  deleteMessage: (
+    message: LocalMessage,
+    options?: DeleteMessageOptions,
+  ) => Promise<MessageResponse>;
   dispatch: React.Dispatch<ChannelStateReducerAction>;
   editMessage: (
     message: LocalMessage | MessageResponse,
diff --git a/src/context/MessageContext.tsx b/src/context/MessageContext.tsx
@@ -1,7 +1,8 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
 import React, { useContext } from 'react';
 
 import type {
+  DeleteMessageOptions,
   LocalMessage,
   Mute,
   ReactionResponse,
@@ -48,7 +49,10 @@ export type MessageContextValue = {
   /** Function to send an action in a Channel */
   handleAction: ActionHandlerReturnType;
   /** Function to delete a message in a Channel */
-  handleDelete: ReactEventHandler;
+  handleDelete: (
+    event: BaseSyntheticEvent,
+    options?: DeleteMessageOptions,
+  ) => Promise<void> | void;
   /** Function to edit a message in a Channel */
   handleEdit: ReactEventHandler;
   /** Function to fetch the message reactions */
diff --git a/src/i18n/de.json b/src/i18n/de.json
@@ -29,6 +29,7 @@
   "Create poll": "Umfrage erstellen",
   "Current location": "Aktueller Standort",
   "Delete": "Löschen",
+  "Delete for me": "Für mich löschen",
   "Delivered": "Zugestellt",
   "Download attachment {{ name }}": "Anhang {{ name }} herunterladen",
   "Drag your files here": "Ziehen Sie Ihre Dateien hierher",
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -29,6 +29,7 @@
   "Create poll": "Create poll",
   "Current location": "Current location",
   "Delete": "Delete",
+  "Delete for me": "Delete for me",
   "Delivered": "Delivered",
   "Download attachment {{ name }}": "Download attachment {{ name }}",
   "Drag your files here": "Drag your files here",
diff --git a/src/i18n/es.json b/src/i18n/es.json
@@ -29,6 +29,7 @@
   "Create poll": "Crear encuesta",
   "Current location": "Ubicación actual",
   "Delete": "Borrar",
+  "Delete for me": "Eliminar para mí",
   "Delivered": "Entregado",
   "Download attachment {{ name }}": "Descargar adjunto {{ name }}",
   "Drag your files here": "Arrastra tus archivos aquí",
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -29,6 +29,7 @@
   "Create poll": "Créer un sondage",
   "Current location": "Emplacement actuel",
   "Delete": "Supprimer",
+  "Delete for me": "Supprimer pour moi",
   "Delivered": "Publié",
   "Download attachment {{ name }}": "Télécharger la pièce jointe {{ name }}",
   "Drag your files here": "Glissez vos fichiers ici",
diff --git a/src/i18n/hi.json b/src/i18n/hi.json
@@ -29,6 +29,7 @@
   "Create poll": "मतदान बनाएँ",
   "Current location": "वर्तमान स्थान",
   "Delete": "डिलीट",
+  "Delete for me": "मेरे लिए डिलीट करें",
   "Delivered": "पहुंच गया",
   "Download attachment {{ name }}": "अनुलग्नक {{ name }} डाउनलोड करें",
   "Drag your files here": "अपनी फ़ाइलें यहाँ खींचें",
diff --git a/src/i18n/it.json b/src/i18n/it.json
@@ -29,6 +29,7 @@
   "Create poll": "Crea sondaggio",
   "Current location": "Posizione attuale",
   "Delete": "Elimina",
+  "Delete for me": "Elimina per me",
   "Delivered": "Consegnato",
   "Download attachment {{ name }}": "Scarica l'allegato {{ name }}",
   "Drag your files here": "Trascina i tuoi file qui",
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
diff --git a/src/i18n/ko.json b/src/i18n/ko.json
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
diff --git a/src/i18n/tr.json b/src/i18n/tr.json
