feat: message input rename

Author: isekovanic

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import type { Channel as StreamChatChannel } from 'stream-chat';
 import {
   Channel,
-  MessageInput,
+  MessageComposer,
   useChatContext,
   ThreadContextValue,
   MessageList,
@@ -84,7 +84,7 @@ export default function ChannelScreen() {
             router.push(`/channel/${channel.cid}/thread/${thread?.cid ?? ''}`);
           }}
         />
-        <MessageInput InputButtons={InputButtons} />
+        <MessageComposer InputButtons={InputButtons} />
       </Channel>
     </View>
   );

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -30,7 +30,7 @@ const SendButtonWithContext = (props: NewDirectMessagingSendButtonPropsWithConte
   const {
     theme: {
       colors: { accent_blue, grey_gainsboro },
-      messageInput: { sendButton },
+      messageComposer: { sendButton },
     },
   } = useTheme();
 
@@ -89,7 +89,7 @@ const MemoizedNewDirectMessagingSendButton = React.memo(
 export type SendButtonProps = Partial<NewDirectMessagingSendButtonPropsWithContext>;
 
 /**
- * UI Component for send button in MessageInput component.
+ * UI Component for send button in MessageComposer component.
  */
 export const NewDirectMessagingSendButton = (props: SendButtonProps) => {
   const { chatClient } = useAppContext();

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -4,7 +4,7 @@ import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/nati
 import {
   AlsoSentToChannelHeaderPressPayload,
   Channel,
-  MessageInput,
+  MessageComposer,
   MessageList,
   MessageFlashList,
   ThreadContextValue,
@@ -301,7 +301,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
           />
         )}
         <AITypingIndicatorView channel={channel} />
-        <MessageInput />
+        <MessageComposer />
         {modalVisible && (
           <MessageInfoBottomSheet
             visible={modalVisible}

examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx

@@ -3,7 +3,7 @@ import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'r
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Channel,
-  MessageInput,
+  MessageComposer,
   MessageList,
   User,
   UserAdd,
@@ -340,7 +340,7 @@ export const NewDirectMessagingScreen: React.FC<NewDirectMessagingScreenProps> =
         {results && results.length >= 0 && !focusOnSearchInput && focusOnMessageInput && (
           <MessageList />
         )}
-        <MessageInput />
+        <MessageComposer />
       </Channel>
     </SafeAreaView>
   );

examples/TypeScriptMessaging/App.tsx

@@ -16,7 +16,7 @@ import {
   Channel,
   ChannelList,
   Chat,
-  MessageInput,
+  MessageComposer,
   MessageList,
   OverlayProvider,
   SqliteClient,
@@ -132,7 +132,7 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
               }
             }}
           />
-          <MessageInput />
+          <MessageComposer />
         </View>
       </Channel>
     </SafeAreaView>

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -187,7 +187,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
         rightContainer,
       },
       semantics,
-      messageInput: {
+      messageComposer: {
         fileAttachmentUploadPreview: { filenameText },
       },
     },
@@ -354,4 +354,4 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-AudioAttachment.displayName = 'AudioAttachment{messageInput{audioAttachment}}';
+AudioAttachment.displayName = 'AudioAttachment{messageComposer{audioAttachment}}';

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -50,7 +50,7 @@ type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<MessageInputContextValue, 'setInputBoxRef'> &
   Pick<TranslationContextValue, 't'> & {
     /**
-     * This is currently passed in from MessageInput to avoid rerenders
+     * This is currently passed in from MessageComposer to avoid rerenders
      * that would happen if we put this in the MessageInputContext
      */
     cooldownRemainingSeconds?: number;
@@ -134,7 +134,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
 
   const {
     theme: {
-      messageInput: { inputBox },
+      messageComposer: { inputBox },
       semantics,
     },
   } = useTheme();
@@ -258,4 +258,4 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-AutoCompleteInput.displayName = 'AutoCompleteInput{messageInput{inputBox}}';
+AutoCompleteInput.displayName = 'AutoCompleteInput{messageComposer{inputBox}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -35,7 +35,7 @@ export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
 export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           command: { iconContainer },
         },

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -15,7 +15,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestions: {
           header: { container, title },
         },
@@ -39,7 +39,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
 export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ queryText }) => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           header: { container, title },
         },
@@ -102,7 +102,7 @@ export const AutoCompleteSuggestionHeader = (props: AutoCompleteSuggestionHeader
 );
 
 AutoCompleteSuggestionHeader.displayName =
-  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';
+  'AutoCompleteSuggestionHeader{messageComposer{suggestions{Header}}}';
 
 const useStyles = () => {
   const {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -21,7 +21,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
   const { id, name, online } = item;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           mention: { column, container: mentionContainer, name: nameStyle },
         },
@@ -46,7 +46,7 @@ export const EmojiSuggestionItem = (item: Emoji) => {
   const { native, name } = item;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           emoji: { container: emojiContainer, text },
         },
@@ -72,7 +72,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestions: {
           command: { args: argsStyle, container: commandContainer, title },
         },
@@ -128,7 +128,7 @@ const UnMemoizedAutoCompleteSuggestionItem = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: { item: itemStyle },
       },
     },