feat: add ability to customize channel preview last message

Author: khushal87

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -30,6 +30,7 @@ export const useCreateChannelsContext = ({
   PreviewMutedStatus,
   PreviewStatus,
   PreviewTitle,
+  PreviewLastMessage,
   PreviewTypingIndicator,
   PreviewMessageDeliveryStatus,
   PreviewUnreadCount,
@@ -84,6 +85,7 @@ export const useCreateChannelsContext = ({
       PreviewUnreadCount,
       PreviewTypingIndicator,
       PreviewMessageDeliveryStatus,
+      PreviewLastMessage,
       ChannelDetailsBottomSheet,
       swipeActionsEnabled,
       refreshing,

…ChannelPreview/ChannelMessagePreview.tsx …nelPreview/ChannelLastMessagePreview.tsxpackage/src/components/ChannelPreview/ChannelMessagePreview.tsx renamed to package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx package/src/components/ChannelPreview/ChannelMessagePreview.tsx renamed to package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx

@@ -7,11 +7,11 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
 import { primitives } from '../../theme';
 
-export type ChannelMessagePreviewProps = {
+export type ChannelLastMessagePreviewProps = {
   message: LocalMessage | MessageResponse | DraftMessage;
 };
 
-export const ChannelMessagePreview = ({ message }: ChannelMessagePreviewProps) => {
+export const ChannelLastMessagePreview = ({ message }: ChannelLastMessagePreviewProps) => {
   const isMessageDeleted = message?.type === 'deleted';
   const {
     theme: { semantics },

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ChannelMessagePreview } from './ChannelMessagePreview';
+import { ChannelLastMessagePreview } from './ChannelLastMessagePreview';
 import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewProps } from './ChannelPreview';
 
@@ -24,7 +24,10 @@ import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
 
 export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> &
-  Pick<ChannelsContextValue, 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus'> & {
+  Pick<
+    ChannelsContextValue,
+    'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage'
+  > & {
     lastMessage?: LastMessageType;
   };
 
@@ -34,6 +37,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     lastMessage,
     PreviewTypingIndicator = ChannelPreviewTypingIndicator,
     PreviewMessageDeliveryStatus = ChannelMessagePreviewDeliveryStatus,
+    PreviewLastMessage = ChannelLastMessagePreview,
   } = props;
   const {
     theme: { semantics },
@@ -66,7 +70,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         <Text style={styles.draftText}>{t('Draft')}:</Text>
-        <ChannelMessagePreview message={draftMessage} />
+        <PreviewLastMessage message={draftMessage} />
       </View>
     );
   }
@@ -102,14 +106,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
-        <ChannelMessagePreview message={lastMessage} />
+        <PreviewLastMessage message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
         <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
-        <ChannelMessagePreview message={lastMessage} />
+        <PreviewLastMessage message={lastMessage} />
       </View>
     );
   }

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -111,7 +111,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
         ]}
         testID='channel-preview-button'
       >
-        <PreviewAvatar channel={channel} size='xl' />
+        <PreviewAvatar channel={channel} />
         <View
           style={[styles.contentContainer, contentContainer]}
           testID={`channel-preview-content-${channel.id}`}

package/src/components/index.ts

@@ -45,12 +45,13 @@ export * from './ChannelList/hooks';
 
 /** Channel Preview exports */
 export * from './ChannelPreview/ChannelDetailsBottomSheet';
-export * from './ChannelPreview/ChannelMessagePreview';
+export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 export * from './ChannelPreview/ChannelPreview';
 export * from './ChannelPreview/ChannelPreviewMessage';
 export * from './ChannelPreview/ChannelPreviewMessenger';
 export * from './ChannelPreview/ChannelPreviewMutedStatus';
+export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
 export * from './ChannelPreview/ChannelPreviewTitle';
 export * from './ChannelPreview/ChannelPreviewTypingIndicator';

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -16,15 +16,15 @@ import { hashStringToNumber } from '../../../utils/utils';
 export type ChannelAvatarProps = {
   channel: Channel;
   showOnlineIndicator?: boolean;
-  size: 'lg' | 'xl' | '2xl';
+  size?: 'lg' | 'xl' | '2xl';
   showBorder?: boolean;
 };
 
 export const ChannelAvatar = (props: ChannelAvatarProps) => {
   const { client } = useChatContext();
   const { channel } = props;
   const online = useChannelPreviewDisplayPresence(channel);
-  const { showOnlineIndicator = online, size, showBorder = true } = props;
+  const { showOnlineIndicator = online, size = 'xl', showBorder = true } = props;
 
   const {
     theme: { semantics },

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -9,6 +9,7 @@ import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListH
 import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
 import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
+import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
 import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
@@ -20,6 +21,7 @@ import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndi
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
 
+import { ChannelAvatarProps } from '../../components/ui/Avatar/ChannelAvatar';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -179,7 +181,7 @@ export type ChannelsContextValue = {
    *
    * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
    */
-  PreviewAvatar?: React.ComponentType;
+  PreviewAvatar?: React.ComponentType<ChannelAvatarProps>;
   /**
    * Custom UI component to render preview of latest message on channel.
    *
@@ -218,6 +220,12 @@ export type ChannelsContextValue = {
   PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps>;
   PreviewTypingIndicator?: React.ComponentType<ChannelPreviewTypingIndicatorProps>;
   ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
+  /**
+   * Custom UI component to render preview of last message on channel.
+   *
+   * **Default** [ChannelLastMessagePreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx)
+   */
+  PreviewLastMessage?: React.ComponentType<ChannelLastMessagePreviewProps>;
   getChannelActionItems?: GetChannelActionItems;
   swipeActionsEnabled?: boolean;