fix: message input focus responsiveness

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -24,6 +24,7 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
+import { useStableCallback } from '../../../hooks/useStableCallback';
 import { NativeHandlers } from '../../../native';
 
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
@@ -74,6 +75,7 @@ export type MessageSimplePropsWithContext = Pick<
 > &
   Pick<
     MessagesContextValue,
+    | 'customMessageSwipeAction'
     | 'enableMessageGroupingByUser'
     | 'enableSwipeToReply'
     | 'myMessageTheme'
@@ -106,6 +108,8 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
   const { width } = Dimensions.get('screen');
   const {
     alignment,
+    channel,
+    customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
@@ -215,9 +219,13 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     shouldRenderSwipeableWrapper,
   );
 
-  const onSwipeToReply = useCallback(() => {
+  const onSwipeActionHandler = useStableCallback(() => {
+    if (customMessageSwipeAction) {
+      customMessageSwipeAction({ channel, message });
+      return;
+    }
     setQuotedMessage(message);
-  }, [setQuotedMessage, message]);
+  });
 
   const THRESHOLD = 25;
 
@@ -260,7 +268,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
         })
         .onEnd(() => {
           if (translateX.value >= THRESHOLD) {
-            runOnJS(onSwipeToReply)();
+            runOnJS(onSwipeActionHandler)();
             if (triggerHaptic) {
               runOnJS(triggerHaptic)('impactMedium');
             }
@@ -284,7 +292,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     [
       isSwiping,
       messageSwipeToReplyHitSlop,
-      onSwipeToReply,
+      onSwipeActionHandler,
       touchStart,
       translateX,
       triggerHaptic,
@@ -603,6 +611,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
     setQuotedMessage,
   } = useMessageContext();
   const {
+    customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
     MessageAvatar,
@@ -631,6 +640,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
       {...{
         alignment,
         channel,
+        customMessageSwipeAction,
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,

package/src/components/MessageInput/MessageInput.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Modal, SafeAreaView, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
+import {
+  Modal,
+  Pressable,
+  SafeAreaView,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  View,
+} from 'react-native';
 
 import {
   Gesture,
@@ -52,6 +60,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useStateStore } from '../../hooks/useStateStore';
 import {
   isAudioRecorderAvailable,
@@ -432,6 +441,10 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const shouldDisplayStopAIGeneration =
     [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
 
+  const onFocusHandler = useStableCallback(() => {
+    inputBoxRef.current?.focus();
+  });
+
   return (
     <>
       <View
@@ -489,7 +502,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                   <View style={[styles.optionsContainer, optionsContainer]}>
                     {InputButtons && <InputButtons />}
                   </View>
-                  <View
+                  <Pressable
+                    onPress={onFocusHandler}
                     style={[
                       styles.inputBoxContainer,
                       {
@@ -517,7 +531,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         />
                       </View>
                     )}
-                  </View>
+                  </Pressable>
                 </>
               )}
 

package/src/components/MessageList/MessageList.tsx

@@ -1143,23 +1143,14 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
   }
 
-  const ItemSeparatorComponent = additionalFlatListProps?.ItemSeparatorComponent;
-  const WrappedItemSeparatorComponent = useCallback(() => {
-    return ItemSeparatorComponent ? <ItemSeparatorComponent /> : null;
-  }, [ItemSeparatorComponent]);
-
   // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
   let additionalFlatListPropsExcludingStyle:
-    | Omit<
-        NonNullable<typeof additionalFlatListProps>,
-        'style' | 'contentContainerStyle' | 'ItemSeparatorComponent'
-      >
+    | Omit<NonNullable<typeof additionalFlatListProps>, 'style' | 'contentContainerStyle'>
     | undefined;
 
   if (additionalFlatListProps) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { contentContainerStyle, ItemSeparatorComponent, style, ...rest } =
-      additionalFlatListProps;
+    const { contentContainerStyle, style, ...rest } = additionalFlatListProps;
     additionalFlatListPropsExcludingStyle = rest;
   }
 
@@ -1206,7 +1197,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           data={processedMessageList}
           extraData={disabled}
           inverted={inverted}
-          ItemSeparatorComponent={WrappedItemSeparatorComponent}
           keyboardShouldPersistTaps='handled'
           keyExtractor={keyExtractor}
           ListFooterComponent={FooterComponent}

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -34,7 +34,6 @@ exports[`Thread should match thread snapshot 1`] = `
       testID="message-flat-list-wrapper"
     >
       <RCTScrollView
-        ItemSeparatorComponent={[Function]}
         ListFooterComponent={null}
         ListHeaderComponent={[Function]}
         contentContainerStyle={

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,19 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    */
   CardHeader?: React.ComponentType<CardProps>;
 
+  /**
+   * Custom handler to handle message swipe action.
+   *
+   * The default behaviour is swipe to reply for this.
+   */
+  customMessageSwipeAction?: ({
+    channel,
+    message,
+  }: {
+    channel: Channel;
+    message: LocalMessage;
+  }) => void;
+
   /**
    * Full override of the delete message button in the Message Actions
    *