feat: add message view replies, footer, avatar, content redesign

examples/SampleApp/src/components/Reminders/MessageReminderHeader.tsx

@@ -1,8 +1,11 @@
 import {
-  MessageFooterProps,
+  MessageHeaderProps,
+  MessagePinnedHeader,
   Time,
+  useMessageContext,
   useMessageReminder,
   useStateStore,
+  useTheme,
   useTranslationContext,
 } from 'stream-chat-react-native';
 import { ReminderState } from 'stream-chat';
@@ -12,12 +15,16 @@ const reminderStateSelector = (state: ReminderState) => ({
   timeLeftMs: state.timeLeftMs,
 });
 
-export const MessageReminderHeader = ({ message }: MessageFooterProps) => {
+export const MessageReminderHeader = ({ message }: MessageHeaderProps) => {
   const messageId = message?.id ?? '';
   const reminder = useMessageReminder(messageId);
   const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
   const { t } = useTranslationContext();
 
+  const {
+    theme: { semantics },
+  } = useTheme();
+
   const stopRefreshBoundaryMs = reminder?.timer.stopRefreshBoundaryMs;
   const stopRefreshTimeStamp =
     reminder?.remindAt && stopRefreshBoundaryMs
@@ -43,8 +50,8 @@ export const MessageReminderHeader = ({ message }: MessageFooterProps) => {
   if (reminder.remindAt && timeLeftMs !== null) {
     return (
       <View style={styles.headerContainer}>
-        <Time height={16} width={16} />
-        <Text style={styles.headerTitle}>
+        <Time height={16} width={16} stroke={semantics.chatTextTimestamp} />
+        <Text style={[styles.headerTitle, { color: semantics.chatTextTimestamp }]}>
           {isBehindRefreshBoundary
             ? t('Due since {{ dueSince }}', {
                 dueSince: t('timestamp/ReminderNotification', {
@@ -62,6 +69,16 @@ export const MessageReminderHeader = ({ message }: MessageFooterProps) => {
   }
 };
 
+export const MessageHeader = () => {
+  const { message } = useMessageContext();
+  return (
+    <>
+      <MessageReminderHeader message={message} />
+      <MessagePinnedHeader />
+    </>
+  );
+};
+
 const styles = StyleSheet.create({
   headerContainer: {
     flexDirection: 'row',

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -27,7 +27,7 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 import type { StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from '../components/NetworkDownIndicator';
 import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.tsx';
-import { MessageReminderHeader } from '../components/Reminders/MessageReminderHeader.tsx';
+import { MessageHeader } from '../components/Reminders/MessageReminderHeader.tsx';
 import { channelMessageActions } from '../utils/messageActions.tsx';
 import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
@@ -233,7 +233,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         initialScrollToFirstUnreadMessage
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
-        MessageHeader={MessageReminderHeader}
+        MessageHeader={MessageHeader}
         MessageLocation={MessageLocation}
         messageId={messageId}
         NetworkDownIndicator={() => null}

examples/SampleApp/src/utils/messageActions.tsx

@@ -48,7 +48,7 @@ export function channelMessageActions({
     },
     actionType: reminder ? 'remove-from-later' : 'save-for-later',
     title: reminder ? 'Remove from Later' : 'Save for Later',
-    icon: <Time width={20} height={20} pathFill={semantics.textSecondary} />,
+    icon: <Time width={20} height={20} stroke={semantics.textSecondary} />,
     type: 'standard',
   });
   actions.push({

package/src/components/Channel/Channel.tsx

@@ -145,9 +145,9 @@ import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimpl
 import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
 import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
 import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
-import { MessageEditedTimestamp as MessageEditedTimestampDefault } from '../Message/MessageSimple/MessageEditedTimestamp';
 import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
 import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
+import { MessageHeader as MessageHeaderDefault } from '../Message/MessageSimple/MessageHeader';
 import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
 import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
 import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
@@ -359,7 +359,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageContent'
       | 'messageContentOrder'
       | 'MessageDeleted'
-      | 'MessageEditedTimestamp'
       | 'MessageError'
       | 'MessageFooter'
       | 'MessageHeader'
@@ -673,11 +672,10 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       'location',
     ],
     MessageDeleted = MessageDeletedDefault,
-    MessageEditedTimestamp = MessageEditedTimestampDefault,
     MessageError = MessageErrorDefault,
     messageInputFloating = false,
     MessageFooter = MessageFooterDefault,
-    MessageHeader,
+    MessageHeader = MessageHeaderDefault,
     messageId,
     MessageList = MessageListDefault,
     MessageLocation,
@@ -1931,7 +1929,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageContent,
     messageContentOrder,
     MessageDeleted,
-    MessageEditedTimestamp,
     MessageError,
     MessageFooter,
     MessageHeader,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -58,7 +58,6 @@ export const useCreateMessagesContext = ({
   MessageContent,
   messageContentOrder,
   MessageDeleted,
-  MessageEditedTimestamp,
   MessageError,
   MessageFooter,
   MessageHeader,
@@ -171,7 +170,6 @@ export const useCreateMessagesContext = ({
       MessageContent,
       messageContentOrder,
       MessageDeleted,
-      MessageEditedTimestamp,
       MessageError,
       MessageFooter,
       MessageHeader,

package/src/components/Message/Message.tsx

@@ -57,7 +57,6 @@ import {
   hasOnlyEmojis,
   isBlockedMessage,
   isBouncedMessage,
-  isEditedMessage,
   MessageStatusTypes,
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
@@ -243,7 +242,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const [isErrorInMessage, setIsErrorInMessage] = useState(false);
   const [showMessageReactions, setShowMessageReactions] = useState(true);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
-  const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
   // const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
 
   const {
@@ -319,9 +317,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const { client } = chatContext;
   const {
     theme: {
-      colors: { targetedMessageBackground, bg_gradient_start },
+      colors: { bg_gradient_start },
       messageSimple: { targetedMessageContainer, unreadUnderlayColor = bg_gradient_start, wrapper },
       screenPadding,
+      semantics,
     },
   } = useTheme();
 
@@ -391,9 +390,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     if (dismissKeyboardOnMessageTouch) {
       dismissKeyboard();
     }
-    if (isEditedMessage(message)) {
-      setIsEditedMessageOpen((prevState) => !prevState);
-    }
     const quotedMessage = message.quoted_message;
     if (error) {
       setIsErrorInMessage(true);
@@ -706,7 +702,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleToggleReaction,
     hasReactions,
     images: attachments.images,
-    isEditedMessageOpen,
     isMessageAIGenerated,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
@@ -779,7 +774,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     preventPress: overlayActive ? true : preventPress,
     reactions,
     readBy,
-    setIsEditedMessageOpen,
     setQuotedMessage,
     showAvatar,
     showMessageOverlay,
@@ -827,7 +821,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
             wrapper,
             (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
               ? {
-                  backgroundColor: targetedMessageBackground,
+                  backgroundColor: semantics.backgroundCoreHighlight,
                   ...targetedMessageContainer,
                 }
               : {},

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

@@ -11,31 +11,28 @@ import { avatarSizes } from '../../ui/Avatar/constants';
 
 export type MessageAvatarPropsWithContext = Pick<
   MessageContextValue,
-  'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'
+  'lastGroupMessage' | 'message' | 'showAvatar'
 > &
   Partial<Pick<AvatarProps, 'size'>>;
 
 const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
-  const { alignment, lastGroupMessage, message, showAvatar, size } = props;
+  const { lastGroupMessage, message, showAvatar, size } = props;
   const {
     theme: {
       messageSimple: {
-        avatarWrapper: { container, leftAlign, rightAlign },
+        avatarWrapper: { container },
       },
     },
   } = useTheme();
 
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
   return (
-    <View
-      style={[alignment === 'left' ? leftAlign : rightAlign, container]}
-      testID='message-avatar'
-    >
+    <View style={container} testID='message-avatar'>
       {visible && message.user ? (
-        <UserAvatar user={message.user} size={size ?? 'sm'} />
+        <UserAvatar user={message.user} size={size ?? 'md'} />
       ) : (
-        <View style={avatarSizes[size ?? 'sm']} testID='spacer' />
+        <View style={avatarSizes[size ?? 'md']} testID='spacer' />
       )}
     </View>
   );
@@ -72,12 +69,11 @@ const MemoizedMessageAvatar = React.memo(
 export type MessageAvatarProps = Partial<MessageAvatarPropsWithContext>;
 
 export const MessageAvatar = (props: MessageAvatarProps) => {
-  const { alignment, lastGroupMessage, message, showAvatar } = useMessageContext();
+  const { lastGroupMessage, message, showAvatar } = useMessageContext();
 
   return (
     <MemoizedMessageAvatar
       {...{
-        alignment,
         lastGroupMessage,
         message,
         showAvatar,

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

@@ -18,10 +18,11 @@ import { MessagesContextValue, useTheme } from '../../../contexts';
 
 import { useStableCallback } from '../../../hooks';
 import { NativeHandlers } from '../../../native';
+import { MessageStatusTypes } from '../../../utils/utils';
 
 export type MessageBubbleProps = Pick<
-  MessageSimplePropsWithContext,
-  'reactionListPosition' | 'MessageContent' | 'ReactionListTop'
+  MessagesContextValue,
+  'reactionListPosition' | 'MessageContent' | 'ReactionListTop' | 'MessageError'
 > &
   Pick<
     MessageContentProps,
@@ -30,6 +31,7 @@ export type MessageBubbleProps = Pick<
     | 'messageGroupedSingleOrBottom'
     | 'noBorder'
     | 'setMessageContentWidth'
+    | 'message'
   > &
   Pick<ReactionListTopProps, 'messageContentWidth'>;
 
@@ -44,15 +46,19 @@ export const MessageBubble = React.memo(
     isVeryLastMessage,
     messageGroupedSingleOrBottom,
     noBorder,
+    MessageError,
+    message,
   }: MessageBubbleProps) => {
     const {
       theme: {
-        messageSimple: { contentWrapper },
+        messageSimple: { contentContainer },
       },
     } = useTheme();
+    const isMessageErrorType =
+      message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
 
     return (
-      <View style={[styles.contentWrapper, contentWrapper]}>
+      <View style={[styles.contentContainer, contentContainer]}>
         <MessageContent
           backgroundColor={backgroundColor}
           isVeryLastMessage={isVeryLastMessage}
@@ -63,6 +69,11 @@ export const MessageBubble = React.memo(
         {reactionListPosition === 'top' && ReactionListTop ? (
           <ReactionListTop messageContentWidth={messageContentWidth} />
         ) : null}
+        {isMessageErrorType ? (
+          <View style={styles.errorContainer}>
+            <MessageError />
+          </View>
+        ) : null}
       </View>
     );
   },
@@ -210,10 +221,17 @@ const styles = StyleSheet.create({
   contentWrapper: {
     alignItems: 'center',
     flexDirection: 'row',
+    zIndex: 1, // To hide the stick inside the message content
   },
+  contentContainer: {},
   swipeContentContainer: {
     flexShrink: 0,
     overflow: 'hidden',
     position: 'relative',
   },
+  errorContainer: {
+    position: 'absolute',
+    top: 8,
+    right: -12,
+  },
 });