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

package/src/components/MessageOverlay/OverlayBackdrop.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+type OverlayBackdropProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export const OverlayBackdrop = (props: OverlayBackdropProps): JSX.Element => {
+  const { style = {} } = props;
+  const {
+    theme: {
+      colors: { overlay },
+    },
+  } = useTheme();
+  return <View style={[{ backgroundColor: overlay }, style]} />;
+};

package/src/components/MessageOverlay/OverlayReactionList.tsx

@@ -40,16 +40,7 @@ import {
 
 import { triggerHaptic } from '../../native';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
 const AnimatedCircle = Animated.createAnimatedComponent
@@ -98,15 +89,9 @@ const reactionData: ReactionData[] = [
 ];
 
 type ReactionButtonProps<
-  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<
-  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  OverlayReactionListPropsWithContext<StreamChatGenerics>,
   'ownReactionTypes' | 'handleReaction' | 'setOverlay'
 > & {
   Icon: React.FC<IconProps>;
@@ -117,15 +102,9 @@ type ReactionButtonProps<
 };
 
 export const ReactionButton = <
-  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: ReactionButtonProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ReactionButtonProps<StreamChatGenerics>,
 ) => {
   const {
     handleReaction,
@@ -248,39 +227,26 @@ export const ReactionButton = <
 };
 
 export type OverlayReactionListPropsWithContext<
-  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<
-  MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageOverlayData<StreamChatGenerics>,
   'alignment' | 'handleReaction' | 'messagesContext'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'> &
   Pick<OverlayContextValue, 'setOverlay'> & {
     messageLayout: Animated.SharedValue<{
       x: number;
       y: number;
     }>;
     ownReactionTypes: string[];
-    setReactionListHeight: React.Dispatch<React.SetStateAction<number>>;
     showScreen: Animated.SharedValue<number>;
     fill?: FillProps['fill'];
   };
 
 const OverlayReactionListWithContext = <
-  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: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: OverlayReactionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
@@ -288,7 +254,6 @@ const OverlayReactionListWithContext = <
     handleReaction,
     messageLayout,
     ownReactionTypes,
-    setReactionListHeight,
     showScreen,
     setOverlay,
     supportedReactions = reactionData,
@@ -334,14 +299,12 @@ const OverlayReactionListWithContext = <
   const animatedBigCircleProps = useAnimatedProps<CircleProps>(() => ({
     cx: messageLayout.value.x - radius * 3,
     cy: messageLayout.value.y - radius * 3,
-    fill: fill || white_snow,
     r: radius * 2,
   }));
 
   const animateSmallCircleProps = useAnimatedProps<CircleProps>(() => ({
     cx: messageLayout.value.x - radius,
     cy: messageLayout.value.y,
-    fill: fill || white_snow,
     r: radius,
   }));
 
@@ -372,7 +335,7 @@ const OverlayReactionListWithContext = <
   const numberOfReactions = supportedReactions.length;
 
   return (
-    <View style={StyleSheet.absoluteFill}>
+    <View style={StyleSheet.absoluteFill} testID='overlay-reaction-list'>
       <Animated.View
         onLayout={({ nativeEvent: { layout } }) => {
           reactionBubbleWidth.value = layout.width;
@@ -380,8 +343,8 @@ const OverlayReactionListWithContext = <
         style={showScreenStyle}
       >
         <Svg>
-          <AnimatedCircle animatedProps={animatedBigCircleProps} />
-          <AnimatedCircle animatedProps={animateSmallCircleProps} />
+          <AnimatedCircle animatedProps={animatedBigCircleProps} fill={fill || white_snow} />
+          <AnimatedCircle animatedProps={animateSmallCircleProps} fill={fill || white_snow} />
         </Svg>
         <Animated.View
           onLayout={({
@@ -391,7 +354,6 @@ const OverlayReactionListWithContext = <
           }) => {
             reactionListLayout.value = { height, width: layoutWidth };
             reactionListHeight.value = height;
-            setReactionListHeight(height);
           }}
           style={[
             styles.reactionList,
@@ -401,7 +363,7 @@ const OverlayReactionListWithContext = <
           ]}
         >
           {supportedReactions?.map(({ Icon, type }, index) => (
-            <ReactionButton<At, Ch, Co, Ev, Me, Re, Us>
+            <ReactionButton<StreamChatGenerics>
               handleReaction={handleReaction}
               Icon={Icon}
               index={index}
@@ -419,17 +381,9 @@ const OverlayReactionListWithContext = <
   );
 };
 
-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: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: OverlayReactionListPropsWithContext<StreamChatGenerics>,
+  nextProps: OverlayReactionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const { alignment: prevAlignment, ownReactionTypes: prevOwnReactionTypes } = prevProps;
   const { alignment: nextAlignment, ownReactionTypes: nextOwnReactionTypes } = nextProps;
@@ -449,20 +403,14 @@ const MemoizedOverlayReactionList = React.memo(
 ) as typeof OverlayReactionListWithContext;
 
 export type OverlayReactionListProps<
-  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,
 > = Omit<
-  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  OverlayReactionListPropsWithContext<StreamChatGenerics>,
   'setOverlay' | 'supportedReactions'
 > &
   Partial<
     Pick<
-      OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+      OverlayReactionListPropsWithContext<StreamChatGenerics>,
       'setOverlay' | 'supportedReactions'
     >
   >;
@@ -471,18 +419,12 @@ export type OverlayReactionListProps<
  * OverlayReactionList - A high level component which implements all the logic required for a message overlay reaction list
  */
 export const OverlayReactionList = <
-  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: OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: OverlayReactionListProps<StreamChatGenerics>,
 ) => {
-  const { data } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { data } = useMessageOverlayContext<StreamChatGenerics>();
+  const { supportedReactions } = useMessagesContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
   return (

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { FlatList } from 'react-native-gesture-handler';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 
-import { Avatar } from '../Avatar/Avatar';
-
+import type { Alignment } from '../../contexts/messageContext/MessageContext';
+import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   LOLReaction,
   LoveReaction,
@@ -14,9 +15,8 @@ import {
   Unknown,
   WutReaction,
 } from '../../icons';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { Alignment } from '../../contexts/messageContext/MessageContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -101,7 +101,9 @@ export type Reaction = {
   image?: string;
 };
 
-export type OverlayReactionsProps = {
+export type OverlayReactionsProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
   reactions: Reaction[];
   showScreen: Animated.SharedValue<number>;
   title: string;
@@ -130,6 +132,7 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
     supportedReactions = reactionData,
     showScreen,
     title,
+    OverlayReactionsAvatar,
   } = props;
   const layoutHeight = useSharedValue(0);
   const layoutWidth = useSharedValue(0);
@@ -184,7 +187,8 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
         2,
   );
 
-  const renderItem = ({ item: { alignment = 'left', image, name, type } }: { item: Reaction }) => {
+  const renderItem = ({ item }: { item: Reaction }) => {
+    const { alignment = 'left', name, type } = item;
     const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
     const y = avatarSize - radius;
 
@@ -202,7 +206,7 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
     return (
       <View style={[styles.avatarContainer, avatarContainer]}>
         <View style={styles.avatarInnerContainer}>
-          <Avatar image={image} name={name} size={avatarSize} />
+          <OverlayReactionsAvatar reaction={item} size={avatarSize} />
           <View style={[StyleSheet.absoluteFill]}>
             <Svg>
               <Circle

package/src/components/MessageOverlay/OverlayReactionsAvatar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { Reaction } from './OverlayReactions';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Avatar, AvatarProps } from '../Avatar/Avatar';
+
+export type OverlayReactionsAvatarProps = {
+  reaction: Reaction;
+} & Partial<Pick<AvatarProps, 'size'>>;
+
+export const OverlayReactionsAvatar: React.FC<OverlayReactionsAvatarProps> = (props) => {
+  const {
+    reaction: { image, name },
+    size,
+  } = props;
+
+  const {
+    theme: {
+      avatar: { BASE_AVATAR_SIZE },
+    },
+  } = useTheme();
+
+  return <Avatar image={image} name={name} size={size || BASE_AVATAR_SIZE} />;
+};
+
+OverlayReactionsAvatar.displayName = 'OverlayReactionsAvatar{overlay{reactionsAvatar}}';

package/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx

@@ -0,0 +1,44 @@
+import type { ViewStyle } from 'react-native';
+import type { TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import type { MessageActionListItemProps } from '../MessageActionListItem';
+
+export const useMessageActionAnimation = ({
+  action,
+  activeOpacity = 0.2,
+}: Pick<MessageActionListItemProps, 'action'> & {
+  activeOpacity?: number;
+}) => {
+  const opacity = useSharedValue(1);
+
+  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(
+    {
+      onEnd: () => {
+        runOnJS(action)();
+      },
+      onFinish: () => {
+        opacity.value = 1;
+      },
+      onStart: () => {
+        opacity.value = activeOpacity;
+      },
+    },
+    [action],
+  );
+
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => ({
+    opacity: opacity.value,
+  }));
+
+  return {
+    animatedStyle,
+    onTap,
+    opacity,
+  };
+};

package/src/components/Reply/Reply.tsx

@@ -1,37 +1,31 @@
 import React, { useState } from 'react';
 import { Image, ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
+
 import merge from 'lodash/merge';
 
-import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
-import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
-import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import type { Attachment } from 'stream-chat';
 
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { emojiRegex } from '../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
+import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
+import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 
 const styles = StyleSheet.create({
   container: {
@@ -61,15 +55,9 @@ const styles = StyleSheet.create({
 });
 
 type ReplyPropsWithContext<
-  At extends DefaultAttachmentType = 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,
-> = Pick<MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'quotedMessage'> &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'FileAttachmentIcon' | 'MessageAvatar'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'quotedMessage'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon' | 'MessageAvatar'> &
   Pick<TranslationContextValue, 't'> & {
     attachmentSize?: number;
     styles?: Partial<{
@@ -82,15 +70,9 @@ type ReplyPropsWithContext<
   };
 
 const ReplyWithContext = <
-  At extends DefaultAttachmentType = 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: ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ReplyPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     FileAttachmentIcon,
@@ -122,7 +104,7 @@ const ReplyWithContext = <
 
   if (typeof quotedMessage === 'boolean') return null;
 
-  const lastAttachment = quotedMessage.attachments?.slice(-1)[0];
+  const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
 
   const messageType = lastAttachment
     ? lastAttachment.type === 'file' || lastAttachment.type === 'audio'
@@ -177,16 +159,25 @@ const ReplyWithContext = <
             <Image
               onError={() => setError(true)}
               source={{
-                uri:
-                  lastAttachment.image_url ||
-                  lastAttachment.thumb_url ||
-                  lastAttachment.og_scrape_url,
+                uri: getResizedImageUrl({
+                  height:
+                    stylesProp.imageAttachment?.height ||
+                    imageAttachment?.height ||
+                    styles.imageAttachment.height,
+                  url: (lastAttachment.image_url ||
+                    lastAttachment.thumb_url ||
+                    lastAttachment.og_scrape_url) as string,
+                  width:
+                    stylesProp.imageAttachment?.width ||
+                    imageAttachment?.width ||
+                    styles.imageAttachment.width,
+                }),
               }}
               style={[styles.imageAttachment, imageAttachment, stylesProp.imageAttachment]}
             />
           ) : null
         ) : null}
-        <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
+        <MessageTextContainer<StreamChatGenerics>
           markdownStyles={
             quotedMessage.deleted_at
               ? merge({ em: { color: grey } }, deletedText)
@@ -241,17 +232,9 @@ const ReplyWithContext = <
   );
 };
 
-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: ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ReplyPropsWithContext<StreamChatGenerics>,
+  nextProps: ReplyPropsWithContext<StreamChatGenerics>,
 ) => {
   const { quotedMessage: prevQuotedMessage } = prevProps;
   const { quotedMessage: nextQuotedMessage } = nextProps;
@@ -273,39 +256,27 @@ const areEqual = <
 const MemoizedReply = React.memo(ReplyWithContext, areEqual) as typeof ReplyWithContext;
 
 export type ReplyProps<
-  At extends DefaultAttachmentType = 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<ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<ReplyPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for reply
  */
 export const Reply = <
-  At extends DefaultAttachmentType = 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: ReplyProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ReplyProps<StreamChatGenerics>,
 ) => {
-  const { message } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { message } = useMessageContext<StreamChatGenerics>();
 
   const { FileAttachmentIcon = FileIconDefault, MessageAvatar = MessageAvatarDefault } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessagesContext<StreamChatGenerics>();
 
-  const { editing, quotedMessage } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { editing, quotedMessage } = useMessageInputContext<StreamChatGenerics>();
 
   const quotedEditingMessage = (
     typeof editing !== 'boolean' ? editing?.quoted_message || false : false
-  ) as MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>['quotedMessage'];
+  ) as MessageInputContextValue<StreamChatGenerics>['quotedMessage'];
 
   const { t } = useTranslationContext();
 
@@ -315,15 +286,7 @@ export const Reply = <
         FileAttachmentIcon,
         MessageAvatar,
         quotedMessage: message
-          ? (message.quoted_message as MessageInputContextValue<
-              At,
-              Ch,
-              Co,
-              Ev,
-              Me,
-              Re,
-              Us
-            >['quotedMessage'])
+          ? (message.quoted_message as MessageInputContextValue<StreamChatGenerics>['quotedMessage'])
           : quotedMessage || quotedEditingMessage,
         t,
       }}