feat: mark channel unread (#2238)

docusaurus/docs/React/components/contexts/channel-action-context.mdx

@@ -50,6 +50,14 @@ A function that takes a message to be edited, returns a Promise.
 | -------- |
 | function |
 
+### jumpToFirstUnreadMessage
+
+Jumps to the first unread message in the channel, if such message exists. If the message is not found, jumps to last read message. Does not jump if the last read message is not defined. The parameter `queryMessageLimit` specifies the message page size around the first unread message in case it is not found in the local app state and has to be retrieved through and API call.
+
+| Type                  |
+| --------------------- |
+| `(queryMessageLimit?: number) => Promise<void>` |
+
 ### jumpToLatestMessage
 
 Used in conjunction with `jumpToMessage`. Restores the position of the message list back to the most recent messages.

docusaurus/docs/React/components/contexts/component-context.mdx

@@ -365,6 +365,22 @@ Custom UI component for the typing indicator.
 | --------- | ------------------------------------------------------------------------------------- |
 | component | <GHComponentLink text='TypingIndicator' path='/TypingIndicator/TypingIndicator.tsx'/> |
 
+### UnreadMessagesNotification
+
+Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`.
+
+| Type      | Default                                                                               |
+| --------- | ------------------------------------------------------------------------------------- |
+| component | <GHComponentLink text='UnreadMessagesNotification' path='/MessageList/UnreadMessagesNotification.tsx'/> |
+
+### UnreadMessagesSeparator
+
+Custom UI component inserted before the first message marked unread.
+
+| Type      | Default                                                                               |
+| --------- | ------------------------------------------------------------------------------------- |
+| component | <GHComponentLink text='UnreadMessagesSeparator' path='/MessageList/UnreadMessagesSeparator.tsx'/> |
+
 ### VirtualMessage
 
 Custom UI component to display a message in the `VirtualizedMessageList`.

docusaurus/docs/React/components/contexts/message-context.mdx

@@ -177,6 +177,14 @@ Function that flags a message.
 | ----------------------------------------------------------- |
 | (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
 
+### handleMarkUnread
+
+Function that marks the message and all the following messages as unread in a channel.
+
+| Type                                                        |
+| ----------------------------------------------------------- |
+| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
+
 ### handleMute
 
 Function that mutes the sender of a message.

docusaurus/docs/React/components/contexts/message-list-context.mdx

@@ -15,6 +15,8 @@ The context value is provided by `MessageListContextProvider` which wraps the co
 - `DateSeparator` - component rendered to separate messages posted on different dates. The [`component can be customized`](./component-context.mdx#dateseparator).
 - `MessageSystem` - component to display system messages in the message list. The [`component can be customized`](./component-context.mdx#messagesystem).
 - `HeaderComponent` - component to be displayed before the oldest message in the message list. The [`component can be customized`](./component-context.mdx#headercomponent).
+- `UnreadMessagesNotification` - custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`. The [`component can be customized`](./component-context.mdx#unreadmessagesnotification).
+- `UnreadMessagesSeparator` - component to be displayed before the oldest message in the message list. The [`component can be customized`](./component-context.mdx#unreadmessagesseparator).
 
 ## Basic Usage
 

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

@@ -469,6 +469,14 @@ export const MessageInput = (props: MessageInputProps) => {
 | ------- | ------- |
 | boolean | true    |
 
+### markReadOnMount
+
+Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is not marked read on mount.
+
+| Type    | Default |
+|---------|---------|
+| boolean | false   |
+
 ### Input
 
 Custom UI component handling how the message input is rendered.
@@ -733,6 +741,23 @@ Custom UI component for the typing indicator.
 | --------- | ------------------------------------------------------------------------------------- |
 | component | <GHComponentLink text='TypingIndicator' path='/TypingIndicator/TypingIndicator.tsx'/> |
 
+### UnreadMessagesNotification
+
+Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`.
+
+| Type      | Default                                                                               |
+| --------- | ------------------------------------------------------------------------------------- |
+| component | <GHComponentLink text='UnreadMessagesNotification' path='/MessageList/UnreadMessagesNotification.tsx'/> |
+
+
+### UnreadMessagesSeparator
+
+Custom UI component inserted before the first message marked unread.
+
+| Type      | Default                                                                               |
+| --------- | ------------------------------------------------------------------------------------- |
+| component | <GHComponentLink text='UnreadMessagesSeparator' path='/MessageList/UnreadMessagesSeparator.tsx'/> |
+
 ### videoAttachmentSizeHandler
 
 A custom function to provide size configuration for video attachments

docusaurus/docs/React/components/core-components/message-list.mdx

@@ -266,7 +266,7 @@ If true, picking a reaction from the `ReactionSelector` component will close the
 
 ### customMessageActions
 
-An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../message-components/message_ui/#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
+An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../message-components/message_ui#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
 
 ```jsx
 const customActions = {
@@ -350,6 +350,24 @@ flagged [message object](https://getstream.io/chat/docs/javascript/message_forma
 | ---------------------------------- |
 | (message: StreamMessage) => string |
 
+### getMarkMessageUnreadErrorNotification
+
+Function that returns the notification text to be displayed when a mark message unread request fails. This function receives the
+marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
+
+| Type                               |
+| ---------------------------------- |
+| (message: StreamMessage) => string |
+
+### getMarkMessageUnreadSuccessNotification
+
+Function that returns the notification text to be displayed when a mark message unread request succeeds. This function receives the
+marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
+
+| Type                               |
+| ---------------------------------- |
+| (message: StreamMessage) => string |
+
 ### getMuteUserErrorNotification
 
 Function that returns the notification text to be displayed when a mute user request fails. This function receives the
@@ -441,6 +459,14 @@ Function called when more messages are to be loaded, provide your own function t
 | -------- | ---------------------------------------------------------------------------------------- |
 | function | [ChannelActionContextValue['loadMore']](../contexts/channel-action-context.mdx#loadmore) |
 
+### markReadOnScrolledToBottom
+
+When enabled, the channel will be marked read when a user scrolls to the bottom. Ignored when scrolled to the bottom of a thread message list.
+
+| Type    | Default |
+|---------|---------|
+| boolean | false   |
+
 ### Message
 
 Custom UI component to display an individual message.

docusaurus/docs/React/components/core-components/virtualized-list.mdx

@@ -174,6 +174,14 @@ Function called when more messages are to be loaded, provide your own function t
 | -------- | ---------------------------------------------------------------------------------------- |
 | function | [ChannelActionContextValue['loadMore']](../contexts/channel-action-context.mdx#loadmore) |
 
+### markReadOnScrolledToBottom
+
+When enabled, the channel will be marked read when a user scrolls to the bottom. Ignored when scrolled to the bottom of a thread message list.
+
+| Type    | Default |
+|---------|---------|
+| boolean | false   |
+
 ### Message
 
 Custom UI component to display an individual message.

docusaurus/docs/React/components/message-components/message-ui.mdx

@@ -305,6 +305,15 @@ Function that flags a message (overrides the function stored in `MessageContext`
 | ----------------------------------------------------------- | ------------------------------------------------------------------------------- |
 | (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['handleFlag']](../contexts/message-context.mdx#handleflag) |
 
+### handleMarkUnread
+
+Function that marks the message and all the following messages as unread in a channel. (overrides the function stored in `MessageContext`).
+
+| Type                                                        | Default                                                                         |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['handleMarkUnread']](../contexts/message-context.mdx#handleMarkUnread) |
+
+
 ### handleMute
 
 Function that mutes the sender of a message (overrides the function stored in `MessageContext`).

docusaurus/docs/React/components/message-components/message.mdx

@@ -174,6 +174,24 @@ flagged [message object](https://getstream.io/chat/docs/javascript/message_forma
 | ---------------------------------- |
 | (message: StreamMessage) => string |
 
+### getMarkMessageUnreadErrorNotification
+
+Function that returns the notification text to be displayed when a mark message unread request fails. This function receives the
+marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
+
+| Type                               |
+| ---------------------------------- |
+| (message: StreamMessage) => string |
+
+### getMarkMessageUnreadSuccessNotification
+
+Function that returns the notification text to be displayed when a mark message unread request succeeds. This function receives the
+marked [message object](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) as its argument.
+
+| Type                               |
+| ---------------------------------- |
+| (message: StreamMessage) => string |
+
 ### getMuteUserErrorNotification
 
 Function that returns the notification text to be displayed when a mute user request fails. This function receives the

docusaurus/docs/React/components/message-components/ui-components.mdx

@@ -81,6 +81,14 @@ Function that flags a message (overrides the value from `MessageContext`).
 | ----------------------------------------------------------- |
 | (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
 
+### handleMarkUnread
+
+Function that marks the message and all the following messages as unread in a channel.
+
+| Type                                                        |
+| ----------------------------------------------------------- |
+| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |
+
 ### handleMute
 
 Function that mutes the sender of a message (overrides the value from `MessageContext`).

docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx

@@ -109,6 +109,22 @@ Latest message preview to display. Will be either a string or a JSX.Element rend
 | --------------------- |
 | string \| JSX.Element |
 
+### markActiveChannelReadOn
+
+Configuration that determines when and whether a channel is marked read upon clicking ChannelPreview.
+1. `MarkChannelReadOn.never`: Prevents a channel from being marked read when any ChannelPreview is clicked.
+2. `MarkChannelReadOn.leave`: Marks active channel read before switching the active channel state to the clicked preview's channel.
+This means that active channel being left is marked read before navigating to another channel.
+3. `MarkChannelReadOn.reenter`: Channel, which is re-entered by clicking the preview, is marked read. That means:
+- an active channel can be marked unread, left and on return marked read.
+- a non-active channel receives a new message, is entered, left and re-entered and marked read.
+
+The default configuration is set to `MarkChannelReadOn.reenter`.
+
+| Type | Default                     |
+|------|-----------------------------|
+| enum | `MarkChannelReadOn.reenter` |
+
 ### messageDeliveryStatus
 
 Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. The value is calculated from `channel.read` data on mount and updated on every `message.new` resp. `message.read` WS event.