stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.6

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
-import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
-import { Avatar } from '../../Avatar/Avatar';
+import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
+import { Avatar } from '../../Avatar/Avatar';
 
 import type { Photo } from '../ImageGallery';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
-
 const styles = StyleSheet.create({
   avatarImage: {
     borderRadius: 22,
@@ -32,30 +31,38 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ImageGalleryGridImageComponent<Us extends UnknownType = DefaultUserType> = ({
+export type ImageGalleryGridImageComponent<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ({
   item,
 }: {
-  item: Photo<Us> & {
+  item: Photo<StreamChatGenerics> & {
     selectAndClose: () => void;
     numberOfImageGalleryGridColumns?: number;
   };
 }) => React.ReactElement | null;
 
-export type ImageGalleryGridImageComponents<Us extends UnknownType = DefaultUserType> = {
-  avatarComponent?: ImageGalleryGridImageComponent<Us>;
-  imageComponent?: ImageGalleryGridImageComponent<Us>;
+export type ImageGalleryGridImageComponents<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;
+  imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;
 };
 
-export type GridImageItem<Us extends DefaultUserType = DefaultUserType> = Photo<Us> &
-  ImageGalleryGridImageComponents<Us> & {
+export type GridImageItem<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Photo<StreamChatGenerics> &
+  ImageGalleryGridImageComponents<StreamChatGenerics> & {
     selectAndClose: () => void;
     numberOfImageGalleryGridColumns?: number;
   };
 
-const GridImage = <Us extends DefaultUserType = DefaultUserType>({
+const GridImage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   item,
 }: {
-  item: GridImageItem<Us>;
+  item: GridImageItem<StreamChatGenerics>;
 }) => {
   const {
     theme: {
@@ -100,29 +107,36 @@ const GridImage = <Us extends DefaultUserType = DefaultUserType>({
   );
 };
 
-const renderItem = <Us extends UnknownType = DefaultUserType>({
+const renderItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   item,
 }: {
-  item: GridImageItem<Us>;
+  item: GridImageItem<StreamChatGenerics>;
 }) => <GridImage item={item} />;
 
-type Props<Us extends UnknownType = DefaultUserType> = ImageGalleryGridImageComponents<Us> & {
-  closeGridView: () => void;
-  photos: Photo<Us>[];
-  resetVisibleValues: () => void;
-  setImage: React.Dispatch<
-    React.SetStateAction<
-      | {
-          messageId?: string | undefined;
-          url?: string | undefined;
-        }
-      | undefined
-    >
-  >;
-  numberOfImageGalleryGridColumns?: number;
-};
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryGridImageComponents<StreamChatGenerics> & {
+    closeGridView: () => void;
+    photos: Photo<StreamChatGenerics>[];
+    resetVisibleValues: () => void;
+    setImage: React.Dispatch<
+      React.SetStateAction<
+        | {
+            messageId?: string | undefined;
+            url?: string | undefined;
+          }
+        | undefined
+      >
+    >;
+    numberOfImageGalleryGridColumns?: number;
+  };
 
-export const ImageGrid = <Us extends UnknownType = DefaultUserType>(props: Props<Us>) => {
+export const ImageGrid = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: Props<StreamChatGenerics>,
+) => {
   const {
     avatarComponent,
     closeGridView,
@@ -155,13 +169,13 @@ export const ImageGrid = <Us extends UnknownType = DefaultUserType>(props: Props
   }));
 
   return (
-    <BottomSheetFlatList
+    <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>
       contentContainerStyle={[
         styles.contentContainer,
         { backgroundColor: white },
         contentContainer,
       ]}
-      data={imageGridItems}
+      data={imageGridItems as GridImageItem<StreamChatGenerics>[]}
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';

package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type Animated from 'react-native-reanimated';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { ImageGalleryHeader } from '../ImageGalleryHeader';
+
+it('doesnt fail if fromNow is not available on first render', () => {
+  try {
+    const { getAllByText } = render(
+      <ThemeProvider>
+        <ImageGalleryHeader
+          opacity={1 as unknown as Animated.SharedValue<number>}
+          photo={{
+            id: 'id',
+            uri: 'file:///bogus/uri/to/photo.jpg',
+          }}
+          visible={1 as unknown as Animated.SharedValue<number>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getAllByText('Unknown User')).toBeTruthy();
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      throw new Error(`Error encountered on first render of ImageGalleryHeader: ${error.message}`);
+    }
+  }
+});

package/src/components/Indicators/LoadingIndicator.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { Spinner } from '../Spinner/Spinner';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Spinner } from '../Spinner/Spinner';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Message/Message.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
+import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
+import { useMessageActions } from './hooks/useMessageActions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
-import {
-  isMessageWithStylesReadByAndDateSeparator,
-  MessageType,
-} from '../MessageList/hooks/useMessageList';
-
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -28,7 +26,6 @@ import {
   MessageOverlayContextValue,
   useMessageOverlayContext,
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
-import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -37,6 +34,7 @@ import {
   OverlayContextValue,
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
@@ -45,22 +43,14 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 
 import { triggerHaptic } from '../../native';
-import { emojiRegex } from '../../utils/utils';
-
-import type { Attachment } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { emojiRegex, MessageStatusTypes } from '../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-import { useMessageActions } from './hooks/useMessageActions';
-import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
+import {
+  isMessageWithStylesReadByAndDateSeparator,
+  MessageType,
+} from '../MessageList/hooks/useMessageList';
+import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
@@ -79,16 +69,10 @@ export type TouchableHandlerPayload = {
 };
 
 export type MessageTouchableHandlerPayload<
-  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,
 > = TouchableHandlerPayload & {
   actionHandlers?: MessageActionHandlers;
-  message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+  message?: MessageType<StreamChatGenerics>;
 };
 
 export type MessageActionHandlers = {
@@ -104,23 +88,17 @@ export type MessageActionHandlers = {
 };
 
 export type MessagePropsWithContext<
-  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<
-  ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  ChannelContextValue<StreamChatGenerics>,
   'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'
 > &
-  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client' | 'mutedUsers'> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'mutedUsers'> &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
-  Partial<Omit<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'groupStyles' | 'message'>> &
-  Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'groupStyles' | 'message'> &
+  Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> &
+  Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> &
   Pick<
-    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessagesContextValue<StreamChatGenerics>,
     | 'dismissKeyboardOnMessageTouch'
     | 'forceAlignMessages'
     | 'handleBlock'
@@ -149,11 +127,11 @@ export type MessagePropsWithContext<
     | 'supportedReactions'
     | 'updateMessage'
   > &
-  Pick<MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'setData'> &
+  Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> &
   Pick<OverlayContextValue, 'setOverlay'> &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'openThread'> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
-    messagesContext: MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+    messagesContext: MessagesContextValue<StreamChatGenerics>;
     /**
      * Whether or not users are able to long press messages.
      */
@@ -175,9 +153,7 @@ export type MessagePropsWithContext<
      * @param message Message object which was long pressed
      * @param event   Event object for onLongPress event
      **/
-    onLongPress?: (
-      payload: Partial<MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>>,
-    ) => void;
+    onLongPress?: (payload: Partial<MessageTouchableHandlerPayload<StreamChatGenerics>>) => void;
 
     /**
      * You can call methods available on the Message
@@ -190,18 +166,14 @@ export type MessagePropsWithContext<
      * @param message Message object which was long pressed
      * @param event   Event object for onLongPress event
      * */
-    onPress?: (
-      payload: Partial<MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>>,
-    ) => void;
-    onPressIn?: (
-      payload: Partial<MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>>,
-    ) => void;
+    onPress?: (payload: Partial<MessageTouchableHandlerPayload<StreamChatGenerics>>) => void;
+    onPressIn?: (payload: Partial<MessageTouchableHandlerPayload<StreamChatGenerics>>) => void;
     /**
      * Handler to open the thread on message. This is callback for touch event for replies button.
      *
      * @param message A message object to open the thread upon.
      */
-    onThreadSelect?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => void;
+    onThreadSelect?: (message: MessageType<StreamChatGenerics>) => void;
     showUnreadUnderlay?: boolean;
     style?: StyleProp<ViewStyle>;
   };
@@ -212,15 +184,9 @@ export type MessagePropsWithContext<
  * each individual Message component.
  */
 const MessageWithContext = <
-  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: MessagePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
   const isMessageTypeDeleted = props.message.type === 'deleted';
 
@@ -288,7 +254,8 @@ const MessageWithContext = <
     },
   } = useTheme();
 
-  const actionsEnabled = message.type === 'regular' && message.status === 'received';
+  const actionsEnabled =
+    message.type === 'regular' && message.status === MessageStatusTypes.RECEIVED;
 
   const isMyMessage = client && message && client.userID === message.user?.id;
 
@@ -306,17 +273,19 @@ const MessageWithContext = <
     }
   };
 
-  const onPressQuotedMessage = (quotedMessage: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => {
+  const onPressQuotedMessage = (quotedMessage: MessageType<StreamChatGenerics>) => {
     if (!goToMessage) return;
 
     goToMessage(quotedMessage.id);
   };
 
-  const onPress = (error = message.type === 'error' || message.status === 'failed') => {
+  const errorOrFailed = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
+
+  const onPress = (error = errorOrFailed) => {
     if (dismissKeyboardOnMessageTouch) {
       Keyboard.dismiss();
     }
-    const quotedMessage = message.quoted_message as MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+    const quotedMessage = message.quoted_message as MessageType<StreamChatGenerics>;
     if (error) {
       showMessageOverlay(false, true);
     } else if (quotedMessage) {
@@ -362,15 +331,15 @@ const MessageWithContext = <
             return acc;
           },
           {
-            files: [] as Attachment<At>[],
-            images: [] as Attachment<At>[],
-            other: [] as Attachment<At>[],
+            files: [] as Attachment<StreamChatGenerics>[],
+            images: [] as Attachment<StreamChatGenerics>[],
+            other: [] as Attachment<StreamChatGenerics>[],
           },
         )
       : {
-          files: [] as Attachment<At>[],
-          images: [] as Attachment<At>[],
-          other: [] as Attachment<At>[],
+          files: [] as Attachment<StreamChatGenerics>[],
+          images: [] as Attachment<StreamChatGenerics>[],
+          other: [] as Attachment<StreamChatGenerics>[],
         };
 
   /**
@@ -454,6 +423,7 @@ const MessageWithContext = <
     client,
     enforceUniqueReaction,
     message,
+    removeMessage,
     retrySendMessage,
     setEditingState,
     setQuotedMessageState,
@@ -492,6 +462,7 @@ const MessageWithContext = <
     message,
     onThreadSelect,
     openThread,
+    removeMessage,
     retrySendMessage,
     selectReaction,
     setEditingState,
@@ -501,11 +472,7 @@ const MessageWithContext = <
     t,
     updateMessage,
   });
-
-  const showMessageOverlay = async (
-    messageReactions = false,
-    error = message.type === 'error' || message.status === 'failed',
-  ) => {
+  const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
     await dismissKeyboard();
 
     const isThreadMessage = threadList || !!message.parent_id;
@@ -707,17 +674,9 @@ const MessageWithContext = <
   );
 };
 
-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: MessagePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessagePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessagePropsWithContext<StreamChatGenerics>,
+  nextProps: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     goToMessage: prevGoToMessage,
@@ -832,15 +791,9 @@ const areEqual = <
 const MemoizedMessage = React.memo(MessageWithContext, areEqual) as typeof MessageWithContext;
 
 export type MessageProps<
-  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<Omit<MessagePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'groupStyles' | 'message'>> &
-  Pick<MessagePropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'groupStyles' | 'message'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Omit<MessagePropsWithContext<StreamChatGenerics>, 'groupStyles' | 'message'>> &
+  Pick<MessagePropsWithContext<StreamChatGenerics>, 'groupStyles' | 'message'>;
 
 /**
  * Message - A high level component which implements all the logic required for a message.
@@ -849,28 +802,22 @@ export type MessageProps<
  * @example ./Message.md
  */
 export const Message = <
-  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: MessageProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageProps<StreamChatGenerics>,
 ) => {
   const { channel, disabled, enforceUniqueReaction, members } =
-    useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { client, mutedUsers } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useChannelContext<StreamChatGenerics>();
+  const { client, mutedUsers } = useChatContext<StreamChatGenerics>();
   const { dismissKeyboard } = useKeyboardContext();
-  const { setData } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const messagesContext = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { setData } = useMessageOverlayContext<StreamChatGenerics>();
+  const messagesContext = useMessagesContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
-  const { openThread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { openThread } = useThreadContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
   return (
-    <MemoizedMessage<At, Ch, Co, Ev, Me, Re, Us>
+    <MemoizedMessage<StreamChatGenerics>
       {...messagesContext}
       {...{
         channel,

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

@@ -1,49 +1,27 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Avatar, AvatarProps } from '../../Avatar/Avatar';
-
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 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';
+import { Avatar, AvatarProps } from '../../Avatar/Avatar';
 
 export type MessageAvatarPropsWithContext<
-  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,
 > = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageContextValue<StreamChatGenerics>,
   'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'
 > &
   Partial<Pick<AvatarProps, 'size'>>;
 
 const MessageAvatarWithContext = <
-  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: MessageAvatarPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageAvatarPropsWithContext<StreamChatGenerics>,
 ) => {
   const { alignment, lastGroupMessage, message, showAvatar, size } = props;
   const {
@@ -75,17 +53,9 @@ const MessageAvatarWithContext = <
   );
 };
 
-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: MessageAvatarPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageAvatarPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageAvatarPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageAvatarPropsWithContext<StreamChatGenerics>,
 ) => {
   const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;
   const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;
@@ -108,28 +78,16 @@ const MemoizedMessageAvatar = React.memo(
 ) as typeof MessageAvatarWithContext;
 
 export type MessageAvatarProps<
-  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<MessageAvatarPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageAvatarPropsWithContext<StreamChatGenerics>>;
 
 export const MessageAvatar = <
-  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: MessageAvatarProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageAvatarProps<StreamChatGenerics>,
 ) => {
   const { alignment, lastGroupMessage, message, showAvatar } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessageContext<StreamChatGenerics>();
 
   return (
     <MemoizedMessageAvatar