feat: component renaming

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/ChannelPreview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import {
-  ChannelPreviewMessenger,
-  ChannelPreviewMessengerProps,
+  ChannelPreviewView,
+  ChannelPreviewViewProps,
   ChannelPreviewStatus,
   ChannelPreviewStatusProps,
   Pin,
@@ -54,6 +54,6 @@ const CustomChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
   );
 };
 
-export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (props) => {
-  return <ChannelPreviewMessenger {...props} PreviewStatus={CustomChannelPreviewStatus} />;
+export const ChannelPreview: React.FC<ChannelPreviewViewProps> = (props) => {
+  return <ChannelPreviewView {...props} PreviewStatus={CustomChannelPreviewStatus} />;
 };

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/SampleApp/src/screens/SharedGroupsScreen.tsx

@@ -3,9 +3,9 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { NavigationProp, RouteProp, useNavigation } from '@react-navigation/native';
 import {
   ChannelList,
-  ChannelListMessenger,
-  ChannelListMessengerProps,
-  ChannelPreviewMessengerProps,
+  ChannelListView,
+  ChannelListViewProps,
+  ChannelPreviewViewProps,
   getChannelPreviewDisplayAvatar,
   GroupAvatar,
   useChannelPreviewDisplayName,
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   },
 });
 
-type CustomPreviewProps = ChannelPreviewMessengerProps;
+type CustomPreviewProps = ChannelPreviewViewProps;
 
 const CustomPreview: React.FC<CustomPreviewProps> = ({ channel }) => {
   const { chatClient } = useAppContext();
@@ -150,7 +150,7 @@ const EmptyListComponent = () => {
   );
 };
 
-type ListComponentProps = ChannelListMessengerProps;
+type ListComponentProps = ChannelListViewProps;
 
 // If the length of channels is 1, which means we only got 1:1-distinct channel,
 // And we don't want to show 1:1-distinct channel in this list.
@@ -161,7 +161,7 @@ const ListComponent: React.FC<ListComponentProps> = (props) => {
     return <EmptyListComponent />;
   }
 
-  return <ChannelListMessenger {...props} />;
+  return <ChannelListView {...props} />;
 };
 
 type SharedGroupsScreenRouteProp = RouteProp<StackNavigatorParamList, 'SharedGroupsScreen'>;

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/__tests__/offline-support/offline-feature.js

@@ -44,7 +44,7 @@ import { BetterSqlite } from '../../test-utils/BetterSqlite';
 
 /**
  * We are gonna use following custom UI components for preview and list.
- * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
+ * If we use ChannelPreviewView or ChannelPreviewLastMessage here, then changes
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug.
  */

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -34,7 +34,7 @@ export const AITypingIndicatorView = ({
   ) : null;
 };
 
-AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';
+AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageItemView{content}}';
 
 const useStyles = () => {
   const {

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/Attachment/FileAttachment.tsx

@@ -120,7 +120,7 @@ export const FileAttachment = (props: FileAttachmentProps) => {
   );
 };
 
-FileAttachment.displayName = 'FileAttachment{messageSimple{file}}';
+FileAttachment.displayName = 'FileAttachment{messageItemView{file}}';
 
 const useStyles = () => {
   const {

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -28,7 +28,7 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         fileAttachmentGroup: { attachmentContainer, container },
       },
     },
@@ -106,4 +106,4 @@ const styles = StyleSheet.create({
   },
 });
 
-FileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';
+FileAttachmentGroup.displayName = 'FileAttachmentGroup{messageItemView{fileAttachmentGroup}}';

package/src/components/Attachment/FileIcon.tsx

@@ -421,7 +421,7 @@ const sizeToNumber = (size?: 'sm' | 'md' | 'lg') => {
 export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         file: { icon },
       },
     },
@@ -432,4 +432,4 @@ export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
   return <Icon {...(size ? sizeToNumber(size) : {})} {...icon} />;
 };
 
-FileIcon.displayName = 'FileIcon{messageSimple{file{icon}}}';
+FileIcon.displayName = 'FileIcon{messageItemView{file{icon}}}';

package/src/components/Attachment/FilePreview.tsx

@@ -43,7 +43,7 @@ export const FilePreview = (props: FilePreviewProps) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         file: { container, details, fileSize, title },
       },
     },
@@ -70,7 +70,7 @@ export const FilePreview = (props: FilePreviewProps) => {
   );
 };
 
-FilePreview.displayName = 'FilePreview{messageSimple{file}}';
+FilePreview.displayName = 'FilePreview{messageItemView{file}}';
 
 const useStyles = () => {
   const {

package/src/components/Attachment/Gallery.tsx

@@ -89,7 +89,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
@@ -261,7 +261,7 @@ const GalleryThumbnail = ({
 }: GalleryThumbnailProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         gallery: { image, imageBorderRadius, imageContainer, moreImagesContainer, moreImagesText },
       },
       semantics,
@@ -389,7 +389,7 @@ const GalleryImageThumbnail = ({
 
   const {
     theme: {
-      messageSimple: { gallery },
+      messageItemView: { gallery },
     },
   } = useTheme();
 
@@ -667,4 +667,4 @@ const useStyles = () => {
   }, [semantics, isMyMessage]);
 };
 
-Gallery.displayName = 'Gallery{messageSimple{gallery}}';
+Gallery.displayName = 'Gallery{messageItemView{gallery}}';

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -45,7 +45,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         giphy: {
           actionButtonContainer,
           actionButton,
@@ -210,7 +210,7 @@ export const Giphy = (props: GiphyProps) => {
   );
 };
 
-Giphy.displayName = 'Giphy{messageSimple{giphy}}';
+Giphy.displayName = 'Giphy{messageItemView{giphy}}';
 
 const useStyles = () => {
   const {

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -49,7 +49,7 @@ const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         giphy: { giphyMask, giphy, imageIndicatorContainer },
       },
     },

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -34,7 +34,7 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         unsupportedAttachment: { container, details, title },
       },
     },
@@ -53,7 +53,7 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
   );
 };
 
-UnsupportedAttachment.displayName = 'UnsupportedAttachment{messageSimple{file}}';
+UnsupportedAttachment.displayName = 'UnsupportedAttachment{messageItemView{file}}';
 
 const useStyles = ({ isMyMessage }: { isMyMessage: boolean }) => {
   const {

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -73,7 +73,7 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         card: {
           container,
           cover,
@@ -292,4 +292,4 @@ const useStyles = () => {
   );
 };
 
-URLPreview.displayName = 'URLPreview{messageSimple{card}}';
+URLPreview.displayName = 'URLPreview{messageItemView{card}}';

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -69,7 +69,7 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         compactUrlPreview: {
           wrapper,
           container,
@@ -296,4 +296,4 @@ const useStyles = () => {
   );
 };
 
-URLPreviewCompact.displayName = 'URLPreviewCompact{messageSimple{urlPreviewCompact}}';
+URLPreviewCompact.displayName = 'URLPreviewCompact{messageItemView{urlPreviewCompact}}';

package/src/components/Attachment/VideoThumbnail.tsx

@@ -22,7 +22,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail = (props: VideoThumbnailProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         videoThumbnail: { container },
       },
     },

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 },
         },