feat: add custom swipe action handler

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -304,6 +304,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'CardCover'
       | 'CardFooter'
       | 'CardHeader'
+      | 'customMessageSwipeAction'
       | 'DateHeader'
       | 'deletedMessagesVisibilityType'
       | 'disableTypingIndicator'
@@ -550,6 +551,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     compressImageQuality,
     CooldownTimer = CooldownTimerDefault,
     CreatePollContent,
+    customMessageSwipeAction,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
     disableKeyboardCompatibleView = false,
@@ -1814,6 +1816,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     CardFooter,
     CardHeader,
     channelId,
+    customMessageSwipeAction,
     DateHeader,
     deletedMessagesVisibilityType,
     deleteMessage,

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

@@ -12,6 +12,7 @@ export const useCreateMessagesContext = ({
   CardFooter,
   CardHeader,
   channelId,
+  customMessageSwipeAction,
   DateHeader,
   deletedMessagesVisibilityType,
   deleteMessage,
@@ -128,6 +129,7 @@ export const useCreateMessagesContext = ({
       CardCover,
       CardFooter,
       CardHeader,
+      customMessageSwipeAction,
       DateHeader,
       deletedMessagesVisibilityType,
       deleteMessage,

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -74,6 +74,7 @@ export type MessageSimplePropsWithContext = Pick<
 > &
   Pick<
     MessagesContextValue,
+    | 'customMessageSwipeAction'
     | 'enableMessageGroupingByUser'
     | 'enableSwipeToReply'
     | 'myMessageTheme'
@@ -106,6 +107,8 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
   const { width } = Dimensions.get('screen');
   const {
     alignment,
+    channel,
+    customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
@@ -215,9 +218,13 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     shouldRenderSwipeableWrapper,
   );
 
-  const onSwipeToReply = useCallback(() => {
+  const onSwipeActionHandler = useCallback(() => {
+    if (customMessageSwipeAction) {
+      customMessageSwipeAction({ channel, message });
+      return;
+    }
     setQuotedMessage(message);
-  }, [setQuotedMessage, message]);
+  }, [channel, customMessageSwipeAction, message, setQuotedMessage]);
 
   const THRESHOLD = 25;
 
@@ -260,7 +267,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
         })
         .onEnd(() => {
           if (translateX.value >= THRESHOLD) {
-            runOnJS(onSwipeToReply)();
+            runOnJS(onSwipeActionHandler)();
             if (triggerHaptic) {
               runOnJS(triggerHaptic)('impactMedium');
             }
@@ -284,7 +291,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     [
       isSwiping,
       messageSwipeToReplyHitSlop,
-      onSwipeToReply,
+      onSwipeActionHandler,
       touchStart,
       translateX,
       triggerHaptic,
@@ -603,6 +610,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
     setQuotedMessage,
   } = useMessageContext();
   const {
+    customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
     MessageAvatar,
@@ -631,6 +639,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
       {...{
         alignment,
         channel,
+        customMessageSwipeAction,
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -4,6 +4,7 @@ import { PressableProps, ViewProps } from 'react-native';
 
 import type {
   Attachment,
+  Channel,
   ChannelState,
   CommandSuggestion,
   LocalMessage,
@@ -362,6 +363,14 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    */
   CardHeader?: React.ComponentType<CardProps>;
 
+  customMessageSwipeAction?: ({
+    channel,
+    message,
+  }: {
+    channel: Channel;
+    message: LocalMessage;
+  }) => void;
+
   /**
    * Full override of the delete message button in the Message Actions
    *