fix: make sending flow faster and bug free and fix bug with cooldown

Author: khushal87

package/src/components/MessageInput/InputButtons.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native';
 
 import { CustomDataManagerState, TextComposerState } from 'stream-chat';
 
+import { AttachmentPickerContextValue, useAttachmentPickerContext } from '../../contexts';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
@@ -24,9 +25,9 @@ export type InputButtonsWithContextProps = Pick<
   | 'hasFilePicker'
   | 'hasImagePicker'
   | 'MoreOptionsButton'
-  | 'selectedPicker'
   | 'toggleAttachmentPicker'
->;
+> &
+  Pick<AttachmentPickerContextValue, 'selectedPicker'>;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
   text: state.text,
@@ -148,9 +149,9 @@ export const InputButtons = (props: InputButtonsProps) => {
     hasFilePicker,
     hasImagePicker,
     MoreOptionsButton,
-    selectedPicker,
     toggleAttachmentPicker,
   } = useMessageInputContext();
+  const { selectedPicker } = useAttachmentPickerContext();
 
   return (
     <MemoizedInputButtonsWithContext

package/src/components/MessageInput/MessageInput.tsx

@@ -141,7 +141,6 @@ type MessageInputPropsWithContext = Pick<
     | 'maxNumberOfFiles'
     | 'resetInput'
     | 'SendButton'
-    | 'sending'
     | 'ShowThreadMessageInChannelButton'
     | 'StartAudioRecordingButton'
     | 'uploadNewFile'
@@ -206,7 +205,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     Reply,
     resetInput,
     SendButton,
-    sending,
     sendMessage,
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
@@ -748,9 +746,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (
                   <View style={[styles.sendButtonContainer, sendButtonContainer]}>
-                    <SendButton
-                      disabled={sending.current || !hasSendableData || (!!command && !isOnline)}
-                    />
+                    <SendButton disabled={!hasSendableData || (!!command && !isOnline)} />
                   </View>
                 )
               ) : null}
@@ -830,10 +826,10 @@ const areEqual = (
     audioRecordingEnabled: prevAsyncMessagesEnabled,
     channel: prevChannel,
     closePollCreationDialog: prevClosePollCreationDialog,
+    cooldownEndsAt: prevCooldownEndsAt,
     editing: prevEditing,
     isOnline: prevIsOnline,
     openPollCreationDialog: prevOpenPollCreationDialog,
-    sending: prevSending,
     showPollCreationDialog: prevShowPollCreationDialog,
     t: prevT,
     thread: prevThread,
@@ -847,10 +843,10 @@ const areEqual = (
     audioRecordingEnabled: nextAsyncMessagesEnabled,
     channel: nextChannel,
     closePollCreationDialog: nextClosePollCreationDialog,
+    cooldownEndsAt: nextCooldownEndsAt,
     editing: nextEditing,
     isOnline: nextIsOnline,
     openPollCreationDialog: nextOpenPollCreationDialog,
-    sending: nextSending,
     showPollCreationDialog: nextShowPollCreationDialog,
     t: nextT,
     thread: nextThread,
@@ -909,13 +905,13 @@ const areEqual = (
     return false;
   }
 
-  const sendingEqual = prevSending.current === nextSending.current;
-  if (!sendingEqual) {
+  const isOnlineEqual = prevIsOnline === nextIsOnline;
+  if (!isOnlineEqual) {
     return false;
   }
 
-  const isOnlineEqual = prevIsOnline === nextIsOnline;
-  if (!isOnlineEqual) {
+  const cooldownEndsAtEqual = prevCooldownEndsAt === nextCooldownEndsAt;
+  if (!cooldownEndsAtEqual) {
     return false;
   }
 
@@ -992,7 +988,6 @@ export const MessageInput = (props: MessageInputProps) => {
     openPollCreationDialog,
     resetInput,
     SendButton,
-    sending,
     sendMessage,
     SendMessageDisallowedIndicator,
     showPollCreationDialog,
@@ -1057,7 +1052,6 @@ export const MessageInput = (props: MessageInputProps) => {
         Reply,
         resetInput,
         SendButton,
-        sending,
         sendMessage,
         SendMessageDisallowedIndicator,
         showPollCreationDialog,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -93,8 +93,6 @@ export type LocalMessageInputContext = {
   pickAndUploadImageFromNativePicker: () => Promise<void>;
   pickFile: () => Promise<void>;
   resetInput: (pendingAttachments?: Attachment[]) => void;
-  selectedPicker: string | undefined;
-  sending: React.MutableRefObject<boolean>;
   sendMessage: (params?: { customMessageData?: Partial<Message> }) => Promise<void>;
   sendThreadMessageInChannel: boolean;
   /**
@@ -368,7 +366,6 @@ export const MessageInputProvider = ({
   const { thread } = useThreadContext();
   const { t } = useTranslationContext();
   const inputBoxRef = useRef<TextInput | null>(null);
-  const sending = useRef(false);
 
   const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false);
   const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
@@ -528,8 +525,8 @@ export const MessageInputProvider = ({
     }
   }, [closeAttachmentPicker, openAttachmentPicker, selectedPicker]);
 
-  const resetInput = useStableCallback(async () => {
-    await messageComposer.clear();
+  const resetInput = useStableCallback(() => {
+    messageComposer.clear();
     /**
      * If the MediaLibrary is available, reset the selected files and images
      */
@@ -544,12 +541,6 @@ export const MessageInputProvider = ({
   });
 
   const sendMessage = useStableCallback(async () => {
-    if (sending.current) {
-      return;
-    }
-
-    sending.current = true;
-
     startCooldown();
 
     if (inputBoxRef.current) {
@@ -562,16 +553,14 @@ export const MessageInputProvider = ({
 
     if (editedMessage && editedMessage.type !== 'error') {
       try {
-        value.clearEditingState();
+        resetInput();
         await value.editMessage({ localMessage, options: sendOptions });
-        await resetInput();
       } catch (error) {
-        console.log('Failed to edit message', error);
+        console.log('Failed to edit message:', error);
       }
-
-      sending.current = false;
     } else {
       try {
+        resetInput();
         await value.sendMessage({
           localMessage: {
             ...localMessage,
@@ -583,12 +572,8 @@ export const MessageInputProvider = ({
           },
           options: sendOptions,
         });
-
-        sending.current = false;
-        await resetInput();
       } catch (error) {
-        sending.current = false;
-        console.log('Failed to send message', error);
+        console.log('Failed to send message:', error);
       }
     }
   });
@@ -637,8 +622,6 @@ export const MessageInputProvider = ({
     pickAndUploadImageFromNativePicker,
     pickFile,
     resetInput,
-    selectedPicker,
-    sending,
     sendThreadMessageInChannel,
     setInputBoxRef,
     setSendThreadMessageInChannel,

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -55,9 +55,7 @@ export const useCreateMessageInputContext = ({
   pickAndUploadImageFromNativePicker,
   pickFile,
   resetInput,
-  selectedPicker,
   SendButton,
-  sending,
   sendMessage,
   SendMessageDisallowedIndicator,
   sendThreadMessageInChannel,
@@ -130,9 +128,7 @@ export const useCreateMessageInputContext = ({
       pickAndUploadImageFromNativePicker,
       pickFile,
       resetInput,
-      selectedPicker,
       SendButton,
-      sending,
       sendMessage,
       SendMessageDisallowedIndicator,
       sendThreadMessageInChannel,
@@ -153,7 +149,6 @@ export const useCreateMessageInputContext = ({
       cooldownEndsAt,
       editingdep,
       isCommandUIEnabled,
-      selectedPicker,
       sendThreadMessageInChannel,
       threadId,
       showPollCreationDialog,