feat: component renaming (#3502)

## 🎯 Goal

This PR standardizes several legacy UI component names to a cleaner and
more consistent naming scheme. It also aligns the related public API,
theme keys, tests, and sample usages with those names. It also adds a
few lightweight message row customization slots so consumers can extend
layout without fully replacing the default message components.

  - Renamed `MessageSimple` -> `MessageItemView`
  - Renamed `MessageAvatar` -> `MessageAuthor`
  - Renamed `MessageInput` -> `MessageComposer`
  - Renamed `ChannelListMessenger` -> `ChannelListView`
  - Renamed `ChannelPreviewMessenger` -> `ChannelPreviewView`
  - Added `MessageSpacer`
  - Added `MessageContentTopView`
  - Added `MessageContentBottomView`
  - Added `MessageContentLeadingView`
  - Added `MessageContentTrailingView`


## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

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/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}}';