feat: message headers redesign (#3437)

This pull request makes several significant updates to the handling and
display of message reminders and thread navigation in the sample app and
core library. The main changes include refactoring the way message
reminder headers are implemented, improving thread navigation (including
scrolling to a targeted message), and exposing new header components for
easier customization. Additionally, some code cleanup and minor UI
improvements are included.

**Message Reminder and Header Refactoring:**

* Removed the custom `MessageReminderHeader` and related logic from the
sample app, shifting responsibility for reminder headers to the core
library and exposing them as customizable components
(`MessageReminderHeader`, `MessageSavedForLaterHeader`,
`SentToChannelHeader`).
[[1]](diffhunk://#diff-e4b7ff703c5409150f35f3d93f9b4a6ca081dcc4bf8115f4fdb2a2d0439c6205L1-L92)
[[2]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R144-R146)
[[3]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R372-R374)
[[4]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R692-R694)
[[5]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R1954-R1956)
[[6]](diffhunk://#diff-d3e4f4cdcef10807a38eab86f6ead6bbfe01980e7326f3cadfeb8186760d7af1R68-R70)
[[7]](diffhunk://#diff-d3e4f4cdcef10807a38eab86f6ead6bbfe01980e7326f3cadfeb8186760d7af1R184-R186)

* Updated the message actions to use the `Bell` icon directly from the
core library instead of a local copy, and adjusted the icon prop to use
`stroke` instead of `pathFill` for consistency.
[[1]](diffhunk://#diff-3003c10c02dbe4fd6a088502b48ef3cf6b539a4c30704273f10482dbc8ae52a5R12-L13)
[[2]](diffhunk://#diff-3003c10c02dbe4fd6a088502b48ef3cf6b539a4c30704273f10482dbc8ae52a5L97-R97)
[[3]](diffhunk://#diff-550d274d1ba08f0f6b63d767444bd4f08e1e0e6daa758b818cc5cf213fda5c55L1-L22)

**Thread Navigation and Targeted Message Scroll:**

* Enhanced thread navigation by passing an optional `targetedMessageId`
when navigating to the thread screen, allowing the UI to scroll directly
to a specific message within a thread.
[[1]](diffhunk://#diff-2335969a90d85933b956775f38af8bf0485cd538b0e73115b8087467d7ed116aL179-R179)
[[2]](diffhunk://#diff-2335969a90d85933b956775f38af8bf0485cd538b0e73115b8087467d7ed116aR188)
[[3]](diffhunk://#diff-f6f5acf3649a7159a27117d2ea15769405d09c079894eb8bc3a5e765cca5e9d8R43)
[[4]](diffhunk://#diff-d205a2fd76b4c4f669af948205f8a5e11c6267f3e4e26dc91e3a6036cd87d606L77-R76)
[[5]](diffhunk://#diff-d205a2fd76b4c4f669af948205f8a5e11c6267f3e4e26dc91e3a6036cd87d606L131-R147)

* Added an `onBackPressThread` callback to the thread context and
channel props, enabling the thread screen to return to the channel
screen and optionally scroll to a targeted message.
[[1]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85L407-R413)
[[2]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R716)
[[3]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R2000)
[[4]](diffhunk://#diff-1c9dec060e52c82d28b7c313abbac01d23d19ddda8dc53cf82174b5432231231R15)
[[5]](diffhunk://#diff-1c9dec060e52c82d28b7c313abbac01d23d19ddda8dc53cf82174b5432231231R43)
[[6]](diffhunk://#diff-d205a2fd76b4c4f669af948205f8a5e11c6267f3e4e26dc91e3a6036cd87d606R119-R125)

**Component and Prop Management:**

* Removed direct usage of `MessageHeader` and `MessageReminderHeader`
props in the sample app screens, relying on the core library's exposed
components and context for message header rendering.
[[1]](diffhunk://#diff-2335969a90d85933b956775f38af8bf0485cd538b0e73115b8087467d7ed116aL236)
[[2]](diffhunk://#diff-d205a2fd76b4c4f669af948205f8a5e11c6267f3e4e26dc91e3a6036cd87d606L18-L23)
[[3]](diffhunk://#diff-d205a2fd76b4c4f669af948205f8a5e11c6267f3e4e26dc91e3a6036cd87d606L90)
[[4]](diffhunk://#diff-d205a2fd76b4c4f669af948205f8a5e11c6267f3e4e26dc91e3a6036cd87d606L131-R147)

**Minor Improvements and Cleanup:**

* Fixed a minor translation string in `ChannelPreviewMessage` to remove
an unnecessary colon from the translation key.

* Ensured the `onThreadSelect` prop is passed to the
`MessageWithContext` component for better thread handling.

These changes collectively improve the flexibility, maintainability, and
user experience of message reminders and thread navigation in the app.

---------

Co-authored-by: Ivan Sekovanikj <[email protected]>

Author: khushal87

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

@@ -26,7 +26,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';
@@ -174,7 +173,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
   };
 
   const onThreadSelect = useCallback(
-    (thread: LocalMessage | null) => {
+    (thread: LocalMessage | null, targetedMessageId?: string) => {
       if (!thread || !channel) {
         return;
       }
@@ -183,6 +182,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       navigation.navigate('ThreadScreen', {
         channel,
         thread,
+        targetedMessageId,
       });
     },
     [channel, navigation, setThread],
@@ -230,7 +230,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/icons/Bell.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/screens/ChannelScreen.tsx

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

examples/SampleApp/src/screens/ThreadScreen.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({

examples/SampleApp/src/types.ts

@@ -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,

examples/SampleApp/src/utils/messageActions.tsx

@@ -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/Channel.tsx

@@ -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/Channel/hooks/useCreateMessagesContext.ts

@@ -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>
     );