feat: message headers redesign

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -27,7 +27,6 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 import type { StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from '../components/NetworkDownIndicator';
 import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.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';
@@ -176,7 +175,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
   };
 
   const onThreadSelect = useCallback(
-    (thread: LocalMessage | null) => {
+    (thread: LocalMessage | null, targetedMessageId?: string) => {
       if (!thread || !channel) {
         return;
       }
@@ -185,6 +184,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       navigation.navigate('ThreadScreen', {
         channel,
         thread,
+        targetedMessageId,
       });
     },
     [channel, navigation, setThread],
@@ -233,7 +233,6 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         initialScrollToFirstUnreadMessage
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
-        MessageHeader={MessageHeader}
         MessageLocation={MessageLocation}
         messageId={messageId}
         NetworkDownIndicator={() => null}

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -15,12 +15,11 @@ import { useStateStore } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
 
-import type { RouteProp } from '@react-navigation/native';
+import { type RouteProp } from '@react-navigation/native';
 
 import type { StackNavigatorParamList } from '../types';
 import { LocalMessage, ThreadState, UserResponse } from 'stream-chat';
 import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.tsx';
-import { MessageReminderHeader } from '../components/Reminders/MessageReminderHeader.tsx';
 import { channelMessageActions } from '../utils/messageActions.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -74,7 +73,7 @@ const ThreadHeader: React.FC<ThreadHeaderProps> = ({ thread }) => {
 export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   navigation,
   route: {
-    params: { channel, thread },
+    params: { channel, thread, targetedMessageId },
   },
 }) => {
   const {
@@ -87,7 +86,6 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   const { t } = useTranslationContext();
   const { setThread } = useStreamChatContext();
   const { messageInputFloating, messageListImplementation } = useAppContext();
-
   const onPressMessage: NonNullable<React.ComponentProps<typeof Channel>['onPressMessage']> = (
     payload,
   ) => {
@@ -118,6 +116,13 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
     setThread(null);
   }, [setThread]);
 
+  const onBackPressThread = useCallback(
+    (messageId?: string) => {
+      navigation.popTo('ChannelScreen', { messageId: messageId });
+    },
+    [navigation],
+  );
+
   return (
     <View style={[styles.container, { backgroundColor: white }]}>
       <Channel
@@ -128,14 +133,18 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
         messageInputFloating={messageInputFloating}
-        MessageHeader={MessageReminderHeader}
         MessageLocation={MessageLocation}
         onPressMessage={onPressMessage}
         thread={thread}
         threadList
+        onBackPressThread={onBackPressThread}
+        messageId={targetedMessageId}
       >
         <ThreadHeader thread={thread} />
-        <Thread onThreadDismount={onThreadDismount} shouldUseFlashList={messageListImplementation === 'flashlist'} />
+        <Thread
+          onThreadDismount={onThreadDismount}
+          shouldUseFlashList={messageListImplementation === 'flashlist'}
+        />
       </Channel>
     </View>
   );

examples/SampleApp/src/types.ts

@@ -40,6 +40,7 @@ export type StackNavigatorParamList = {
   ThreadScreen: {
     channel: Channel;
     thread: LocalMessage | ThreadType;
+    targetedMessageId?: string;
   };
 };
 

examples/SampleApp/src/utils/messageActions.tsx

@@ -9,8 +9,8 @@ import {
   MessageActionsParams,
   Time,
   TranslationContextValue,
+  Bell,
 } from 'stream-chat-react-native';
-import { Bell } from '../icons/Bell';
 import { Theme } from 'stream-chat-react-native';
 
 export function channelMessageActions({
@@ -94,7 +94,7 @@ export function channelMessageActions({
     },
     actionType: reminder ? 'remove-reminder' : 'remind-me',
     title: reminder ? 'Remove Reminder' : 'Remind Me',
-    icon: <Bell height={20} width={20} pathFill={semantics.textSecondary} />,
+    icon: <Bell height={20} width={20} stroke={semantics.textSecondary} />,
     type: 'standard',
   });
   actions.push({

package/src/components/Channel/Channel.tsx

@@ -141,6 +141,9 @@ import {
 } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Message as MessageDefault } from '../Message/Message';
 import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/Headers/MessagePinnedHeader';
+import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageSimple/Headers/MessageReminderHeader';
+import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageSimple/Headers/MessageSavedForLaterHeader';
+import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageSimple/Headers/SentToChannelHeader';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
 import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
@@ -366,6 +369,9 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageLocation'
       | 'MessageMenu'
       | 'MessagePinnedHeader'
+      | 'MessageReminderHeader'
+      | 'MessageSavedForLaterHeader'
+      | 'SentToChannelHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
       | 'MessageSimple'
@@ -404,7 +410,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
     >
   > &
   Partial<Pick<MessageContextValue, 'isMessageAIGenerated'>> &
-  Partial<Pick<ThreadContextValue, 'allowThreadMessagesInChannel'>> & {
+  Partial<Pick<ThreadContextValue, 'allowThreadMessagesInChannel' | 'onBackPressThread'>> & {
     shouldSyncChannel: boolean;
     thread: ThreadType;
     /**
@@ -683,6 +689,9 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageLocation,
     MessageMenu = MessageMenuDefault,
     MessagePinnedHeader = MessagePinnedHeaderDefault,
+    MessageReminderHeader = MessageReminderHeaderDefault,
+    MessageSavedForLaterHeader = MessageSavedForLaterHeaderDefault,
+    SentToChannelHeader = SentToChannelHeaderDefault,
     MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
@@ -704,6 +713,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
+    onBackPressThread,
     openPollCreationDialog,
     overrideOwnCapabilities,
     PollContent,
@@ -1941,6 +1951,9 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageLocation,
     MessageMenu,
     MessagePinnedHeader,
+    MessageReminderHeader,
+    MessageSavedForLaterHeader,
+    SentToChannelHeader,
     MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
@@ -1984,6 +1997,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const threadContext = useCreateThreadContext({
     allowThreadMessagesInChannel,
+    onBackPressThread,
     closeThread,
     loadMoreThread,
     openThread,

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

@@ -65,6 +65,9 @@ export const useCreateMessagesContext = ({
   MessageLocation,
   MessageMenu,
   MessagePinnedHeader,
+  MessageReminderHeader,
+  MessageSavedForLaterHeader,
+  SentToChannelHeader,
   MessageReactionPicker,
   MessageReplies,
   MessageRepliesAvatars,
@@ -178,6 +181,9 @@ export const useCreateMessagesContext = ({
       MessageLocation,
       MessageMenu,
       MessagePinnedHeader,
+      MessageReminderHeader,
+      MessageSavedForLaterHeader,
+      SentToChannelHeader,
       MessageReactionPicker,
       MessageReplies,
       MessageRepliesAvatars,

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

@@ -12,6 +12,7 @@ const selector = (nextValue: ThreadState) =>
 
 export const useCreateThreadContext = ({
   allowThreadMessagesInChannel,
+  onBackPressThread,
   closeThread,
   loadMoreThread,
   openThread,
@@ -39,6 +40,7 @@ export const useCreateThreadContext = ({
 
   return {
     allowThreadMessagesInChannel,
+    onBackPressThread,
     closeThread,
     loadMoreThread,
     openThread,

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -79,7 +79,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (draftMessage) {
     return (
       <View style={styles.container}>
-        <Text style={styles.draftText}>{t('Draft:')}</Text>
+        <Text style={styles.draftText}>{t('Draft')}:</Text>
         {renderMessagePreview(draftMessage)}
       </View>
     );

package/src/components/Message/Message.tsx

@@ -773,6 +773,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           }
         }
       : null,
+    onThreadSelect,
     otherAttachments: attachments.other,
     preventPress: overlayActive ? true : preventPress,
     reactions,