Added docs for read indicators

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift

@@ -143,9 +143,8 @@ struct MessageContainerView<Factory: ViewFactory>: View {
                         } else if message.isSentByCurrentUser {
                             HStack(spacing: 4) {
                                 factory.makeMessageReadIndicatorView(
-                                    readUsers: channel.readUsers(
-                                        currentUserId: chatClient.currentUserId
-                                    ),
+                                    channel: channel,
+                                    message: message,
                                     showReadCount: isInGroup
                                 )
                                 MessageDateView(message: message)

Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift

@@ -7,6 +7,10 @@ import StreamChat
 
 extension ChatChannel {
 
+    /// Returns the online info text for a channel.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: the online info text string.
     func onlineInfoText(currentUserId: String) -> String {
         if isDirectMessageChannel {
             guard let member = lastActiveMembers
@@ -28,12 +32,20 @@ extension ChatChannel {
         return L10n.Message.Title.group(memberCount, watcherCount)
     }
 
+    /// Returns the currently typing users, without the current user.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: Array of users that are currently typing.
     func currentlyTypingUsersFiltered(currentUserId: UserId?) -> [ChatUser] {
         currentlyTypingUsers.filter { user in
             user.id != currentUserId
         }
     }
 
+    /// Returns the typing indicator string.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: the typing indicator string.
     func typingIndicatorString(currentUserId: UserId?) -> String {
         let typingUsers = currentlyTypingUsersFiltered(currentUserId: currentUserId)
         if let user = typingUsers.first(where: { user in user.name != nil }), let name = user.name {
@@ -44,7 +56,11 @@ extension ChatChannel {
         }
     }
 
-    func readUsers(currentUserId: UserId?) -> [ChatUser] {
+    /// Returns users that have read the channel's latest message.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: The list of users that read the channel.
+    public func readUsers(currentUserId: UserId?) -> [ChatUser] {
         guard let message = latestMessages.first else {
             return []
         }

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -555,10 +555,14 @@ extension ViewFactory {
     }
 
     public func makeMessageReadIndicatorView(
-        readUsers: [ChatUser],
+        channel: ChatChannel,
+        message: ChatMessage,
         showReadCount: Bool
     ) -> some View {
-        MessageReadIndicatorView(
+        let readUsers = channel.readUsers(
+            currentUserId: chatClient.currentUserId
+        )
+        return MessageReadIndicatorView(
             readUsers: readUsers,
             showReadCount: showReadCount
         )

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -545,11 +545,13 @@ public protocol ViewFactory: AnyObject {
     associatedtype MessageReadIndicatorViewType: View
     /// Creates the message read indicator view.
     /// - Parameters:
-    ///  - readUsers: list of users who read the message.
+    ///  - channel: the channel where the message was sent.
+    ///  - message: the sent message.
     ///  - showReadCount: whether read count should be shown.
     /// - Returns: view shown in the message read indicator slot.
     func makeMessageReadIndicatorView(
-        readUsers: [ChatUser],
+        channel: ChatChannel,
+        message: ChatMessage,
         showReadCount: Bool
     ) -> MessageReadIndicatorViewType
 }

StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift

@@ -527,7 +527,8 @@ class ViewFactory_Tests: XCTestCase {
 
         // When
         let view = viewFactory.makeMessageReadIndicatorView(
-            readUsers: [],
+            channel: .mockDMChannel(),
+            message: .mock(id: .unique, cid: .unique, text: "Test", author: .mock(id: .unique)),
             showReadCount: false
         )
 

docusaurus/docs/iOS/swiftui/components/read-indicators.md

@@ -0,0 +1,30 @@
+---
+title: Read Indicators
+---
+
+## Read Indicators Overview
+
+The SwiftUI SDK supports read indicators, which indicate whether a message was read by the other channel participants. 
+
+The read indicators are available in both the channel and the message list. The default implementation shows one gray checkmark if a message was sent, but not read by anyone and two blue (depending on tint color) checkmarks for a read message. If a message is sent in a group, the number of readers of the message is also shown.
+
+It is possible to customize the read indicator in the message list. For example, some messaging apps show small icons of the users who have read the message. 
+
+In order to implement your own version of the read indicator, you will need to implement the `makeMessageReadIndicatorView` in the `ViewFactory` protocol.
+
+```swift
+public func makeMessageReadIndicatorView(
+    channel: ChatChannel,
+    message: ChatMessage,
+    showReadCount: Bool
+) -> some View {
+	CustomMessageReadIndicatorView(
+		channel: ChatChannel,
+    	message: ChatMessage
+	)
+}
+```
+
+In this method, you receive the channel and the message as parameters. Additionally, you receive the `showReadCount`, which you can ignore in case you don't want to support conditional display of the number of users that read a message.
+
+You can use the channel to extract the users who have read the message. In order to do this, call the `readUsers(currentUserId:)` method of the channel. If you need more information about the reads (e.g. last read date), you can access the `reads` property of the channel.

docusaurus/sidebars-ios.json

@@ -67,7 +67,8 @@
             "swiftui/components/message-threads",
             "swiftui/components/inline-replies",
             "swiftui/components/composer-commands",
-            "swiftui/components/typing-indicators"
+            "swiftui/components/typing-indicators",
+            "swiftui/components/read-indicators"
           ]
         }
       ]