feat: add messageDeliveryStatus prop to ChannelListPreview (#2104)

Author: MartinCupela

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

@@ -109,6 +109,40 @@ Latest message preview to display. Will be either a string or a JSX.Element rend
 | --------------------- |
 | string \| JSX.Element |
 
+### 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.
+
+| Type                    |
+|-------------------------|
+| `MessageDeliveryStatus` |
+
+Use `MessageDeliveryStatus` enum to determine the current delivery status, for example:
+
+```typescript jsx
+import { MessageDeliveryStatus } from 'stream-chat-react';
+import {
+    DoubleCheckMarkIcon,
+    SingleCheckMarkIcon,
+} from '../icons';
+
+type MessageDeliveryStatusIndicator = {
+    messageDeliveryStatus: MessageDeliveryStatus;
+}
+
+export const MessageDeliveryStatusIndicator = ({ messageDeliveryStatus }: MessageDeliveryStatusIndicator) => {
+    // the last message is not an own message in the channel
+    if (!messageDeliveryStatus) return null;
+
+    return (
+        <div>
+            {messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && <SingleCheckMarkIcon /> }
+            {messageDeliveryStatus === MessageDeliveryStatus.READ && <DoubleCheckMarkIcon /> }
+        </div>
+    );
+};
+```
+
 ### onSelect
 
 Custom handler invoked when the `ChannelPreview` is clicked. The SDK uses `ChannelPreview` to display items of channel search results. There, behind the scenes, the new active channel is set.

docusaurus/docs/React/guides/customization/channel-list-preview.mdx

@@ -141,7 +141,7 @@ import '@stream-io/stream-chat-css/dist/css/index.css';
 >
 ```
 
-Next, let's add a little bit more useful information to the component using more of the default props and a value pulled from the `ChatContext`, as well as some styling using custom CSS.
+Next, let's add a bit more useful information to the component using more of the default props and a value pulled from the `ChatContext`, as well as some styling using custom CSS.
 This context also exposes the client which makes it possible to use API methods.
 
 :::note

src/components/ChannelPreview/ChannelPreview.tsx

@@ -7,6 +7,7 @@ import { getLatestMessagePreview } from './utils';
 
 import { ChatContextValue, useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 
 import type { Channel, Event } from 'stream-chat';
 
@@ -29,6 +30,8 @@ export type ChannelPreviewUIComponentProps<
   lastMessage?: StreamMessage<StreamChatGenerics>;
   /** Latest message preview to display, will be a string or JSX element supporting markdown. */
   latestMessage?: string | JSX.Element;
+  /** 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. */
+  messageDeliveryStatus?: MessageDeliveryStatus;
   /** Number of unread Messages */
   unread?: number;
 };
@@ -73,6 +76,10 @@ export const ChannelPreview = <
     channel.state.messages[channel.state.messages.length - 1],
   );
   const [unread, setUnread] = useState(0);
+  const { messageDeliveryStatus } = useMessageDeliveryStatus<StreamChatGenerics>({
+    channel,
+    lastMessage,
+  });
 
   const isActive = activeChannel?.cid === channel.cid;
   const { muted } = useIsChannelMuted(channel);
@@ -126,6 +133,7 @@ export const ChannelPreview = <
       displayTitle={displayTitle}
       lastMessage={lastMessage}
       latestMessage={latestMessage}
+      messageDeliveryStatus={messageDeliveryStatus}
       setActiveChannel={setActiveChannel}
       unread={unread}
     />