stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -11,16 +11,7 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 const styles = StyleSheet.create({
   container: {
@@ -30,41 +21,35 @@ const styles = StyleSheet.create({
 });
 
 export type MessageSimplePropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageContextValue<StreamChatGenerics>,
   'alignment' | 'channel' | 'groupStyles' | 'hasReactions' | 'message'
 > &
   Pick<
-    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'MessageAvatar' | 'MessageContent' | 'ReactionList'
+    MessagesContextValue<StreamChatGenerics>,
+    | 'enableMessageGroupingByUser'
+    | 'MessageAvatar'
+    | 'MessageContent'
+    | 'MessagePinnedHeader'
+    | 'ReactionList'
   >;
 
 const MessageSimpleWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageSimplePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageSimplePropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
     channel,
+    enableMessageGroupingByUser,
     groupStyles,
     hasReactions,
     message,
     MessageAvatar,
     MessageContent,
+    MessagePinnedHeader,
     ReactionList,
   } = props;
 
@@ -84,36 +69,35 @@ const MessageSimpleWithContext = <
   const showReactions = hasReactions && ReactionList;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-          marginBottom: hasMarginBottom ? (isVeryLastMessage ? 30 : 8) : 0,
-          marginTop: showReactions ? 2 : 0,
-        },
-        container,
-      ]}
-      testID='message-simple-wrapper'
-    >
-      {alignment === 'left' && <MessageAvatar />}
-      <MessageContent setMessageContentWidth={setMessageContentWidth} />
-      {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
-    </View>
+    <>
+      {message.pinned && <MessagePinnedHeader />}
+      <View
+        style={[
+          styles.container,
+          {
+            justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+            marginBottom: hasMarginBottom
+              ? isVeryLastMessage && enableMessageGroupingByUser
+                ? 30
+                : 8
+              : 0,
+            marginTop: showReactions ? 2 : 0,
+          },
+          container,
+        ]}
+        testID='message-simple-wrapper'
+      >
+        {alignment === 'left' && <MessageAvatar />}
+        <MessageContent setMessageContentWidth={setMessageContentWidth} />
+        {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
+      </View>
+    </>
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: MessageSimplePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageSimplePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageSimplePropsWithContext<StreamChatGenerics>,
+  nextProps: MessageSimplePropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     channel: prevChannel,
@@ -137,16 +121,23 @@ const areEqual = <
   const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
   if (!groupStylesEqual) return false;
 
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
+  const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
+  const isNextQuotedMessageTypeDeleted = nextMessage.quoted_message?.type === 'deleted';
+
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
-    prevMessage.quoted_message?.deleted_at === nextMessage.quoted_message?.deleted_at;
+    isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
 
   if (!quotedMessageEqual) return false;
 
@@ -185,45 +176,40 @@ const MemoizedMessageSimple = React.memo(
 ) as typeof MessageSimpleWithContext;
 
 export type MessageSimpleProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<MessageSimplePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageSimplePropsWithContext<StreamChatGenerics>>;
 
 /**
  *
  * Message UI component
  */
 export const MessageSimple = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageSimpleProps<StreamChatGenerics>,
 ) => {
   const { alignment, channel, groupStyles, hasReactions, message } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { MessageAvatar, MessageContent, ReactionList } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessageContext<StreamChatGenerics>();
+  const {
+    enableMessageGroupingByUser,
+    MessageAvatar,
+    MessageContent,
+    MessagePinnedHeader,
+    ReactionList,
+  } = useMessagesContext<StreamChatGenerics>();
 
   return (
-    <MemoizedMessageSimple<At, Ch, Co, Ev, Me, Re, Us>
+    <MemoizedMessageSimple<StreamChatGenerics>
       {...{
         alignment,
         channel,
+        enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
         message,
         MessageAvatar,
         MessageContent,
+        MessagePinnedHeader,
         ReactionList,
       }}
       {...props}

package/src/components/Message/MessageSimple/MessageStatus.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import {
   MessageContextValue,
   useMessageContext,
@@ -11,17 +9,10 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Check } from '../../../icons/Check';
 import { CheckAll } from '../../../icons/CheckAll';
 import { Time } from '../../../icons/Time';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   readByCount: {
@@ -38,73 +29,61 @@ const styles = StyleSheet.create({
 });
 
 export type MessageStatusPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends DefaultUserType = DefaultUserType,
-> = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'message' | 'readEventsEnabled' | 'threadList'
->;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageContextValue<StreamChatGenerics>, 'message' | 'threadList'>;
 
 const MessageStatusWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageStatusPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { message, readEventsEnabled, threadList } = props;
+  const { message, threadList } = props;
 
   const {
     theme: {
-      colors: { accent_blue },
+      colors: { accent_blue, grey_dark },
       messageSimple: {
         status: { checkAllIcon, checkIcon, readByCount, statusContainer, timeIcon },
       },
     },
   } = useTheme();
 
-  if (message.status === 'sending') {
+  if (message.status === MessageStatusTypes.SENDING) {
     return (
-      <View style={[styles.statusContainer, statusContainer]}>
+      <View style={[styles.statusContainer, statusContainer]} testID='sending-container'>
         <Time {...timeIcon} />
       </View>
     );
   }
 
-  if (
-    isMessageWithStylesReadByAndDateSeparator(message) &&
-    !threadList &&
-    readEventsEnabled !== false
-  ) {
+  if (isMessageWithStylesReadByAndDateSeparator(message) && !threadList) {
     return (
       <View style={[styles.statusContainer, statusContainer]}>
         {typeof message.readBy === 'number' ? (
-          <Text style={[styles.readByCount, { color: accent_blue }, readByCount]}>
+          <Text
+            style={[styles.readByCount, { color: accent_blue }, readByCount]}
+            testID='read-by-container'
+          >
             {message.readBy}
           </Text>
         ) : null}
         {typeof message.readBy === 'number' || message.readBy === true ? (
           <CheckAll pathFill={accent_blue} {...checkAllIcon} />
         ) : (
-          <Check {...checkIcon} />
+          <Check pathFill={grey_dark} {...checkIcon} />
         )}
       </View>
     );
   }
 
-  if (message.status === 'received' && message.type !== 'ephemeral' && !threadList) {
+  if (
+    message.status === MessageStatusTypes.RECEIVED &&
+    message.type !== 'ephemeral' &&
+    !threadList
+  ) {
     return (
-      <View style={[styles.statusContainer, statusContainer]}>
-        <Check {...checkIcon} />
+      <View style={[styles.statusContainer, statusContainer]} testID='delivered-container'>
+        <Check pathFill={grey_dark} {...checkIcon} />
       </View>
     );
   }
@@ -112,35 +91,16 @@ const MessageStatusWithContext = <
   return null;
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageStatusPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageStatusPropsWithContext<StreamChatGenerics>,
 ) => {
-  const {
-    message: prevMessage,
-    readEventsEnabled: prevReadEventsEnabled,
-    threadList: prevThreadList,
-  } = prevProps;
-  const {
-    message: nextMessage,
-    readEventsEnabled: nextReadEventsEnabled,
-    threadList: nextThreadList,
-  } = nextProps;
+  const { message: prevMessage, threadList: prevThreadList } = prevProps;
+  const { message: nextMessage, threadList: nextThreadList } = nextProps;
 
   const threadListEqual = prevThreadList === nextThreadList;
   if (!threadListEqual) return false;
 
-  const readEventsEnabledEqual = prevReadEventsEnabled === nextReadEventsEnabled;
-  if (!readEventsEnabledEqual) return false;
-
   const messageEqual =
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
@@ -157,30 +117,17 @@ const MemoizedMessageStatus = React.memo(
 ) as typeof MessageStatusWithContext;
 
 export type MessageStatusProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends DefaultUserType = DefaultUserType,
-> = Partial<MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageStatusPropsWithContext<StreamChatGenerics>>;
 
 export const MessageStatus = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageStatusProps<StreamChatGenerics>,
 ) => {
-  const { message, readEventsEnabled, threadList } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { message, threadList } = useMessageContext<StreamChatGenerics>();
 
-  return <MemoizedMessageStatus {...{ message, readEventsEnabled, threadList }} {...props} />;
+  return <MemoizedMessageStatus {...{ message, threadList }} {...props} />;
 };
 
 MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -14,64 +14,38 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import type { MarkdownStyle, Theme } from '../../../contexts/themeContext/utils/theme';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 const styles = StyleSheet.create({
   textContainer: { maxWidth: 250, paddingHorizontal: 16 },
 });
 
 export type MessageTextProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = MessageTextContainerProps<At, Ch, Co, Ev, Me, Re, Us> & {
-  renderText: (params: RenderTextParams<At, Ch, Co, Ev, Me, Re, Us>) => JSX.Element | null;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = MessageTextContainerProps<StreamChatGenerics> & {
+  renderText: (params: RenderTextParams<StreamChatGenerics>) => JSX.Element | null;
   theme: { theme: Theme };
 };
 
 export type MessageTextContainerPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageContextValue<StreamChatGenerics>,
   'message' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'preventPress'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'markdownRules' | 'MessageText'> & {
+  Pick<MessagesContextValue<StreamChatGenerics>, 'markdownRules' | 'MessageText'> & {
     markdownStyles?: MarkdownStyle;
     messageOverlay?: boolean;
+    messageTextNumberOfLines?: number;
     styles?: Partial<{
       textContainer: StyleProp<ViewStyle>;
     }>;
   };
 
 const MessageTextContainerWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageTextContainerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageTextContainerPropsWithContext<StreamChatGenerics>,
 ) => {
   const theme = useTheme();
 
@@ -81,6 +55,7 @@ const MessageTextContainerWithContext = <
     message,
     messageOverlay,
     MessageText,
+    messageTextNumberOfLines,
     onLongPress,
     onlyEmojis,
     onPress,
@@ -112,7 +87,7 @@ const MessageTextContainerWithContext = <
       {MessageText ? (
         <MessageText {...props} renderText={renderText} theme={theme} />
       ) : (
-        renderText<At, Ch, Co, Ev, Me, Re, Us>({
+        renderText<StreamChatGenerics>({
           colors,
           markdownRules,
           markdownStyles: {
@@ -121,6 +96,7 @@ const MessageTextContainerWithContext = <
           },
           message,
           messageOverlay,
+          messageTextNumberOfLines,
           onLongPress,
           onlyEmojis,
           onPress,
@@ -131,17 +107,9 @@ const MessageTextContainerWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: MessageTextContainerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageTextContainerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
 ) => {
   const { message: prevMessage, onlyEmojis: prevOnlyEmojis } = prevProps;
   const { message: nextMessage, onlyEmojis: nextOnlyEmojis } = nextProps;
@@ -169,29 +137,18 @@ const MemoizedMessageTextContainer = React.memo(
 ) as typeof MessageTextContainerWithContext;
 
 export type MessageTextContainerProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<MessageTextContainerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageTextContainerPropsWithContext<StreamChatGenerics>>;
 
 export const MessageTextContainer = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageTextContainerProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageTextContainerProps<StreamChatGenerics>,
 ) => {
   const { message, onLongPress, onlyEmojis, onPress, preventPress } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { markdownRules, MessageText } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessageContext<StreamChatGenerics>();
+  const { markdownRules, MessageText } = useMessagesContext<StreamChatGenerics>();
+  const { messageTextNumberOfLines } = props;
 
   return (
     <MemoizedMessageTextContainer
@@ -199,6 +156,7 @@ export const MessageTextContainer = <
         markdownRules,
         message,
         MessageText,
+        messageTextNumberOfLines,
         onLongPress,
         onlyEmojis,
         onPress,