fix: component renames

examples/vite/src/App.tsx

@@ -18,8 +18,7 @@ import {
   type AttachmentProps,
   Chat,
   ChatView,
-  ReactionsList,
-  MessageInput,
+  MessageReactions,
   type NotificationListProps,
   NotificationList,
   Streami18n,
@@ -132,12 +131,12 @@ const useUser = () => {
   return { tokenProvider, userId, userImage, userName };
 };
 
-const CustomMessageReactions = (props: React.ComponentProps<typeof ReactionsList>) => {
+const CustomMessageReactions = (props: React.ComponentProps<typeof MessageReactions>) => {
   const { visualStyle, verticalPosition, flipHorizontalPosition } =
     useAppSettingsSelector((state) => state.reactions);
 
   return (
-    <ReactionsList
+    <MessageReactions
       {...props}
       flipHorizontalPosition={flipHorizontalPosition}
       verticalPosition={verticalPosition}
@@ -318,7 +317,7 @@ const App = () => {
         emojiSearchIndex: SearchIndex,
         EmojiPicker: EmojiPickerWithCustomOptions,
         NotificationList: ConfigurableNotificationList,
-        ReactionsList: CustomMessageReactions,
+        MessageReactions: CustomMessageReactions,
         reactionOptions: newReactionOptions,
         Search: CustomChannelSearch,
         ...messageUiOverrides,

examples/vite/src/ChatLayout/Panels.tsx

@@ -8,7 +8,7 @@ import {
   ChannelHeader,
   ChannelList,
   ChatView,
-  MessageInput,
+  MessageComposer,
   MessageList,
   Thread,
   ThreadList,
@@ -79,7 +79,7 @@ export const ChannelsPanels = ({
                 <ChannelHeader Avatar={ChannelAvatar} />
                 <MessageList returnAllReadData />
                 <AIStateIndicator />
-                <MessageInput
+                <MessageComposer
                   focus
                   audioRecordingEnabled
                   maxRows={10}

examples/vite/src/CustomMessageUi/reaction-variants.tsx

@@ -1,4 +1,8 @@
-import { ReactionSelector, ReactionsList, type ReactionOptions } from 'stream-chat-react';
+import {
+  ReactionSelector,
+  MessageReactions,
+  type ReactionOptions,
+} from 'stream-chat-react';
 
 // ─── Custom Reaction Options (upvote/downvote) ───────────────────
 
@@ -32,8 +36,8 @@ export const customReactionOptionsUpvote: ReactionOptions = {
 // ─── Segmented ReactionsList ─────────────────────────────────────
 
 export const SegmentedReactionsList = (
-  props: React.ComponentProps<typeof ReactionsList>,
-) => <ReactionsList {...props} visualStyle='segmented' />;
+  props: React.ComponentProps<typeof MessageReactions>,
+) => <MessageReactions {...props} visualStyle='segmented' />;
 
 // ─── Passthrough ReactionSelector (for custom handler demo) ──────
 

examples/vite/src/CustomMessageUi/variants.tsx

@@ -3,7 +3,7 @@ import type { LocalMessage, UserResponse } from 'stream-chat';
 import {
   Avatar,
   MessageText,
-  ReactionsList,
+  MessageReactions,
   useMessageContext,
   useChatContext,
   useComponentContext,
@@ -360,7 +360,7 @@ export const CustomMessageUi_V8 = () => {
           </div>
           <CustomMessageUiMetadata showReplyCount />
           <CustomMessageUiActions />
-          <ReactionsList />
+          <MessageReactions />
         </>
       )}
     </div>

src/components/Attachment/components/FileSizeIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { prettifyFileSize } from '../../MessageInput/hooks/utils';
+import { prettifyFileSize } from '../../MessageComposer/hooks/utils';
 
 type FileSizeIndicatorProps = {
   /** file size in byte */

src/components/ChannelHeader/ChannelHeader.tsx

@@ -4,7 +4,7 @@ import { IconLayoutAlignLeft } from '../Icons/icons';
 import { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';
 import { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';
 import { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';
-import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
+import { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTypingContext } from '../../context/TypingContext';

src/components/ChannelList/ChannelList.tsx

@@ -23,8 +23,8 @@ import type { ChannelListMessengerProps } from './ChannelListMessenger';
 import { ChannelListMessenger } from './ChannelListMessenger';
 import type { ChannelAvatarProps } from '../Avatar';
 import { Avatar as DefaultAvatar } from '../Avatar';
-import type { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
-import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
+import type { ChannelListItemUIProps } from '../ChannelListItem/ChannelListItem';
+import { ChannelListItem } from '../ChannelListItem/ChannelListItem';
 import { Search as DefaultSearch } from '../Search';
 import type { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
@@ -141,7 +141,7 @@ export type ChannelListProps = {
   /** Custom UI component to handle channel pagination logic, defaults to and accepts same props as: [LoadMorePaginator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMorePaginator.tsx) */
   Paginator?: React.ComponentType<PaginatorProps | LoadMorePaginatorProps>;
   /** Custom UI component to display the channel preview in the list, defaults to and accepts same props as: [ChannelPreviewMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) */
-  Preview?: React.ComponentType<ChannelPreviewUIComponentProps>;
+  Preview?: React.ComponentType<ChannelListItemUIProps>;
   /**
    * Custom interval during which the recovery channel list queries will be prevented.
    * This is to avoid firing unnecessary queries during internet connection fluctuation.
@@ -216,7 +216,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     useImageFlagEmojisOnWindows,
   } = useChatContext('ChannelList');
   const { NotificationList = DefaultNotificationList, Search = DefaultSearch } =
-    useComponentContext(); // FIXME: use component context to retrieve ChannelPreview UI components too
+    useComponentContext(); // FIXME: use component context to retrieve ChannelListItemUI components too
   const channelListRef = useRef<HTMLDivElement | null>(null);
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
 
@@ -344,7 +344,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
       watchers,
     };
 
-    return <ChannelPreview key={item.cid} {...previewProps} />;
+    return <ChannelListItem key={item.cid} {...previewProps} />;
   };
 
   const baseClass = 'str-chat__channel-list';

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -34,9 +34,9 @@ import {
 import { Chat } from '../../Chat';
 import { ChannelList } from '../ChannelList';
 import {
+  ChannelListItemUI,
   ChannelPreviewCompact,
   ChannelPreviewLastMessage,
-  ChannelPreviewMessenger,
 } from '../../ChannelPreview';
 
 import {
@@ -449,7 +449,7 @@ describe('ChannelList', () => {
         <ChannelList
           Avatar={() => <div data-testid='custom-avatar-messenger'>Avatar</div>}
           List={ChannelListComponent}
-          Preview={ChannelPreviewMessenger}
+          Preview={ChannelListItemUI}
         />
       </Chat>,
     );

src/components/ChannelPreview/ChannelPreview.tsx → src/components/ChannelListItem/ChannelListItem.tsx

@@ -3,20 +3,23 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
 import type { Channel, Event, LocalMessage } from 'stream-chat';
 
-import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
+import { ChannelListItemUI as DefaultChannelListItemUI } from './ChannelListItemUI';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
 import { getLatestMessagePreview as defaultGetLatestMessagePreview } from './utils';
-import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
-import type { ChatContextValue } from '../../context/ChatContext';
 import type { ChannelAvatarProps } from '../Avatar/ChannelAvatar';
 import type { GroupChannelDisplayInfo } from './utils';
-import type { TranslationContextValue } from '../../context/TranslationContext';
-
-export type ChannelPreviewUIComponentProps = ChannelPreviewProps & {
+import {
+  type ChatContextValue,
+  type TranslationContextValue,
+  useChatContext,
+  useComponentContext,
+} from '../../context';
+
+export type ChannelListItemUIProps = ChannelListItemProps & {
   /** Image of Channel to display */
   displayImage?: string;
   /** Title of Channel to display */
@@ -37,7 +40,7 @@ export type ChannelPreviewUIComponentProps = ChannelPreviewProps & {
   unread?: number;
 };
 
-export type ChannelPreviewProps = {
+export type ChannelListItemProps = {
   /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
   channel: Channel;
   /** If the component's channel is the active (selected) Channel */
@@ -50,38 +53,36 @@ export type ChannelPreviewProps = {
   channelUpdateCount?: number;
   /** Custom class for the channel preview root */
   className?: string;
-  /** Custom function that generates the message preview in ChannelPreview component */
+  /** Custom function that generates the message preview in ChannelListItem component */
   getLatestMessagePreview?: (
     channel: Channel,
     t: TranslationContextValue['t'],
     userLanguage: TranslationContextValue['userLanguage'],
     isMessageAIGenerated: ChatContextValue['isMessageAIGenerated'],
   ) => ReactNode;
   key?: string;
-  /** Custom ChannelPreview click handler function */
+  /** Custom ChannelListItem click handler function */
   onSelect?: (event: React.MouseEvent) => void;
-  /** Custom UI component to display the channel preview in the list, defaults to and accepts same props as: [ChannelPreviewMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) */
-  Preview?: React.ComponentType<ChannelPreviewUIComponentProps>;
   /** Setter for selected Channel */
   setActiveChannel?: ChatContextValue['setActiveChannel'];
   /** Object containing watcher parameters */
   watchers?: { limit?: number; offset?: number };
 };
 
-const ChannelPreviewContext = React.createContext<{ channel: Channel }>({
+const ChannelListItemContext = React.createContext<{ channel: Channel }>({
   channel: null as unknown as Channel,
 });
 
-export const useChannelPreviewContext = () => useContext(ChannelPreviewContext);
+export const useChannelListItemContext = () => useContext(ChannelListItemContext);
 
-export const ChannelPreview = (props: ChannelPreviewProps) => {
+export const ChannelListItem = (props: ChannelListItemProps) => {
   const {
     active,
     channel,
     channelUpdateCount,
     getLatestMessagePreview = defaultGetLatestMessagePreview,
-    Preview = ChannelPreviewMessenger,
   } = props;
+  const { ChannelListItemUI = DefaultChannelListItemUI } = useComponentContext();
   const {
     channel: activeChannel,
     client,
@@ -193,11 +194,11 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
 
   const channelPreviewContextValue = useMemo(() => ({ channel }), [channel]);
 
-  if (!Preview) return null;
+  if (!ChannelListItemUI) return null;
 
   return (
-    <ChannelPreviewContext.Provider value={channelPreviewContextValue}>
-      <Preview
+    <ChannelListItemContext.Provider value={channelPreviewContextValue}>
+      <ChannelListItemUI
         {...props}
         active={isActive}
         displayImage={displayImage}
@@ -211,6 +212,6 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
         setActiveChannel={setActiveChannel}
         unread={unread}
       />
-    </ChannelPreviewContext.Provider>
+    </ChannelListItemContext.Provider>
   );
 };