perf: input buttons on text render issue

Author: khushal87

package/src/components/MessageInput/InputButtons.tsx

@@ -29,12 +29,12 @@ export type InputButtonsWithContextProps<
   | 'hasCommands'
   | 'hasFilePicker'
   | 'hasImagePicker'
+  | 'hasText'
   | 'MoreOptionsButton'
   | 'openCommandsPicker'
   | 'selectedPicker'
   | 'setShowMoreOptions'
   | 'showMoreOptions'
-  | 'text'
   | 'toggleAttachmentPicker'
 >;
 
@@ -51,11 +51,11 @@ export const InputButtonsWithContext = <
     hasCommands,
     hasFilePicker,
     hasImagePicker,
+    hasText,
     MoreOptionsButton,
     openCommandsPicker,
     setShowMoreOptions,
     showMoreOptions,
-    text,
   } = props;
 
   const {
@@ -81,7 +81,7 @@ export const InputButtonsWithContext = <
           <AttachButton />
         </View>
       )}
-      {hasCommands && !text && (
+      {hasCommands && !hasText && (
         <View style={commandsButtonContainer}>
           <CommandsButton handleOnPress={openCommandsPicker} />
         </View>
@@ -100,9 +100,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     hasCommands: prevHasCommands,
     hasFilePicker: prevHasFilePicker,
     hasImagePicker: prevHasImagePicker,
+    hasText: prevHasText,
     selectedPicker: prevSelectedPicker,
     showMoreOptions: prevShowMoreOptions,
-    text: prevText,
   } = prevProps;
 
   const {
@@ -111,9 +111,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     hasCommands: nextHasCommands,
     hasFilePicker: nextHasFilePicker,
     hasImagePicker: nextHasImagePicker,
+    hasText: nextHasText,
     selectedPicker: nextSelectedPicker,
     showMoreOptions: nextShowMoreOptions,
-    text: nextText,
   } = nextProps;
 
   if (prevHasCameraPicker !== nextHasCameraPicker) {
@@ -140,7 +140,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     return false;
   }
 
-  if ((!prevProps.text && nextText) || (prevText && !nextText)) {
+  if (prevHasText !== nextHasText) {
     return false;
   }
 
@@ -169,12 +169,12 @@ export const InputButtons = <
     hasCommands,
     hasFilePicker,
     hasImagePicker,
+    hasText,
     MoreOptionsButton,
     openCommandsPicker,
     selectedPicker,
     setShowMoreOptions,
     showMoreOptions,
-    text,
     toggleAttachmentPicker,
   } = useMessageInputContext<StreamChatGenerics>();
 
@@ -188,12 +188,12 @@ export const InputButtons = <
         hasCommands,
         hasFilePicker,
         hasImagePicker,
+        hasText,
         MoreOptionsButton,
         openCommandsPicker,
         selectedPicker,
         setShowMoreOptions,
         showMoreOptions,
-        text,
         toggleAttachmentPicker,
       }}
       {...props}

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -152,6 +152,7 @@ export type LocalMessageInputContext<
    */
   fileUploads: FileUpload[];
   giphyActive: boolean;
+  hasText: boolean;
   /**
    * An array of image objects which are set for upload. It has the following structure:
    *
@@ -1492,6 +1493,7 @@ export const MessageInputProvider = <
     uploadNewImage,
     ...value,
     closePollCreationDialog,
+    hasText: !!text,
     openPollCreationDialog,
     sendMessage, // overriding the originally passed in sendMessage
     showPollCreationDialog,

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

@@ -47,6 +47,7 @@ export const useCreateMessageInputContext = <
   hasCommands,
   hasFilePicker,
   hasImagePicker,
+  hasText,
   ImageUploadPreview,
   imageUploads,
   initialValue,
@@ -171,6 +172,7 @@ export const useCreateMessageInputContext = <
       hasCommands,
       hasFilePicker,
       hasImagePicker,
+      hasText,
       ImageUploadPreview,
       imageUploads,
       initialValue,
@@ -249,6 +251,7 @@ export const useCreateMessageInputContext = <
       fileUploadsValue,
       giphyActive,
       giphyEnabled,
+      hasText,
       imageUploadsValue,
       maxMessageLength,
       mentionedUsersLength,