chore: resolve conflicts from develop

Author: khushal87

docusaurus/docs/reactnative/common-content/ui-components/channel/props/should_show_unread_underlay.mdx

@@ -0,0 +1,5 @@
+Boolean to enable/disable the message underlay background when there are unread messages in the Message List.
+
+| Type                   | Default |
+| ---------------------- | ------- |
+| `boolean`\|`undefined` | `true`  |

docusaurus/docs/reactnative/contexts/messages-context.mdx

@@ -74,6 +74,7 @@ import ReactionListPosition from '../common-content/ui-components/channel/props/
 import ReactionListTop from '../common-content/ui-components/channel/props/reaction-list-top.mdx';
 import Reply from '../common-content/ui-components/channel/props/reply.mdx';
 import ScrollToBottomButton from '../common-content/ui-components/channel/props/scroll-to-bottom-button.mdx';
+import ShouldShowUnreadUnderlay from '../common-content/ui-components/channel/props/should_show_unread_underlay.mdx';
 import SelectReaction from '../common-content/ui-components/channel/props/select_reaction.mdx';
 import SupportedReactions from '../common-content/ui-components/channel/props/supported_reactions.mdx';
 import TypingIndicator from '../common-content/ui-components/channel/props/typing_indicator.mdx';
@@ -247,6 +248,10 @@ Enables quoted-reply state on given message.
 | ------------------- |
 | `(message) => void` |
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#shouldshowunreadunderlay)_ props</div> shouldShowUnreadUnderlay {#shouldshowunreadunderlay}
+
+<ShouldShowUnreadUnderlay />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#supportedreactions)_ props</div> supportedReactions {#supportedreactions}
 
 <SupportedReactions />

docusaurus/docs/reactnative/core-components/channel-list.mdx

@@ -40,6 +40,10 @@ export const App = () => <OverlayProvider>
   </OverlayProvider>;
 ```
 
+:::note
+When receiving channel information from channel events, the filters are not respected; the reason for this is that channel filters can get very complex, and implementing that filtering logic that supports all of the custom filter would be very hard to do. Implementing this on the backend side isn't an option as it is inefficient and has to cater to different filters. So, to help you with it, you will have to override the `notification.message_new` event using the [`onNewMessageNotification`](./channel-list.mdx#onnewmessagenotification) and `message.new` event handlers using the [`onNewMessage`](./channel-list.mdx#onnewmessage) prop of the `ChannelList` component.
+:::
+
 ## Context Providers
 
 `ChannelList` contains the provider for the `ChannelsContext`. This can be accessed using the corresponding hook.

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -143,6 +143,7 @@ import ScrollToBottomButton from '../common-content/ui-components/channel/props/
 import SelectReaction from '../common-content/ui-components/channel/props/select_reaction.mdx';
 import SendButton from '../common-content/ui-components/channel/props/send_button.mdx';
 import SendMessageDisallowedIndicator from '../common-content/ui-components/channel/props/send_message_disallowed_indicator.mdx';
+import ShouldShowUnreadUnderlay from '../common-content/ui-components/channel/props/should_show_unread_underlay.mdx';
 import ShowThreadMessageInChannelButton from '../common-content/ui-components/channel/props/show_thread_message_in_channel_button.mdx';
 import StartAudioRecordingButton from '../common-content/ui-components/channel/props/start_audio_recording_button.mdx';
 import StateUpdateThrottleInterval from '../common-content/ui-components/channel/props/state_update_throttle_interval.mdx';
@@ -715,6 +716,10 @@ Callback function to set the [ref](https://reactjs.org/docs/refs-and-the-dom.htm
 | --------- | -------------------- |
 | ref       | ref of the TextInput |
 
+### `shouldShowUnreadUnderlay`
+
+<ShouldShowUnreadUnderlay />
+
 ### stateUpdateThrottleInterval
 
 <StateUpdateThrottleInterval />

package/src/components/Channel/Channel.tsx

@@ -347,6 +347,7 @@ export type ChannelPropsWithContext<
       | 'reactionListPosition'
       | 'ReactionListTop'
       | 'Reply'
+      | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
       | 'selectReaction'
       | 'supportedReactions'
@@ -615,6 +616,7 @@ const ChannelWithContext = <
     setTyping,
     setWatcherCount,
     setWatchers,
+    shouldShowUnreadUnderlay = true,
     shouldSyncChannel,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
     StartAudioRecordingButton = AudioRecordingButtonDefault,
@@ -2341,6 +2343,7 @@ const ChannelWithContext = <
     sendReaction,
     setEditingState,
     setQuotedMessageState,
+    shouldShowUnreadUnderlay,
     supportedReactions,
     targetedMessage,
     TypingIndicator,

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

@@ -93,6 +93,7 @@ export const useCreateMessagesContext = <
   sendReaction,
   setEditingState,
   setQuotedMessageState,
+  shouldShowUnreadUnderlay,
   supportedReactions,
   targetedMessage,
   TypingIndicator,
@@ -199,6 +200,7 @@ export const useCreateMessagesContext = <
       sendReaction,
       setEditingState,
       setQuotedMessageState,
+      shouldShowUnreadUnderlay,
       supportedReactions,
       targetedMessage,
       TypingIndicator,

package/src/components/Message/Message.tsx

@@ -257,8 +257,8 @@ const MessageWithContext = <
   const { client } = chatContext;
   const {
     theme: {
-      colors: { bg_gradient_start, targetedMessageBackground },
-      messageSimple: { targetedMessageContainer },
+      colors: { targetedMessageBackground },
+      messageSimple: { targetedMessageContainer, unreadUnderlayColor },
       screenPadding,
     },
   } = useTheme();
@@ -665,7 +665,7 @@ const MessageWithContext = <
         style={[
           style,
           {
-            backgroundColor: showUnreadUnderlay ? bg_gradient_start : undefined,
+            backgroundColor: showUnreadUnderlay ? unreadUnderlayColor : undefined,
           },
         ]}
       >

package/src/components/MessageList/MessageList.tsx

@@ -144,6 +144,7 @@ type MessageListPropsWithContext<
     | 'ScrollToBottomButton'
     | 'MessageSystem'
     | 'myMessageTheme'
+    | 'shouldShowUnreadUnderlay'
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
@@ -270,6 +271,7 @@ const MessageListWithContext = <
     setMessages,
     setSelectedPicker,
     setTargetedMessage,
+    shouldShowUnreadUnderlay,
     StickyHeader,
     targetedMessage,
     thread,
@@ -630,7 +632,10 @@ const MessageListWithContext = <
 
     const isCurrentMessageUnread = isMessageUnread(index);
     const showUnreadUnderlay =
-      !channel.muteStatus().muted && isCurrentMessageUnread && scrollToBottomButtonVisible;
+      !!shouldShowUnreadUnderlay &&
+      !channel.muteStatus().muted &&
+      isCurrentMessageUnread &&
+      scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1); // show only if previous message is read
 
     if (message.type === 'system') {
@@ -1260,6 +1265,7 @@ export const MessageList = <
     MessageSystem,
     myMessageTheme,
     ScrollToBottomButton,
+    shouldShowUnreadUnderlay,
     TypingIndicator,
     TypingIndicatorContainer,
   } = useMessagesContext<StreamChatGenerics>();
@@ -1309,6 +1315,7 @@ export const MessageList = <
         setMessages,
         setSelectedPicker,
         setTargetedMessage,
+        shouldShowUnreadUnderlay,
         StickyHeader,
         targetedMessage,
         thread,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -918,6 +918,7 @@ export const MessageInputProvider = <
 
     const prevText = giphyEnabled && giphyActive ? `/giphy ${text}` : text;
     setText('');
+
     if (inputBoxRef.current) {
       inputBoxRef.current.clear();
     }

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -560,6 +560,13 @@ export type MessagesContextValue<
     message: MessageType<StreamChatGenerics>,
   ) => (reactionType: string) => Promise<void>;
 
+  /**
+   * Boolean to enable/disable the message underlay background when there are unread messages in the Message List.
+   */
+  shouldShowUnreadUnderlay?: boolean;
+  /**
+   * The supported reactions that the user can use to react to messages.
+   */
   supportedReactions?: ReactionData[];
 
   targetedMessage?: string;