Sent / Delivered / Read message indicators

[vladpre92]

Hi guys,

I was wondering if you plan to implement (in the near future) message status indicators for each message from message list. I think this is a must for any chat app.
I saw that you have ChatChannelReadStatusCheckmarkView class implemented but you don't use it.

At this moment, based on the current architecture, what do you think it's the easiest way to achieve this?
Personally I have trouble to distinguish between sent status (message uploaded to server) / delivered status (at least 1 user got the message). The read status I can get it based on message createdAt property and channel's reads property.

Also I have trouble injecting this info into the message cell's content view by subclassing you out-of-the-box UI classes. I found a way but I think it's a little bit messy. Any input here?

I don't know if this issue is more like a Question than Feature Request, but feel free to mark it as you wish.

Thank you!

[tbarbugli]

Thank you for opening the issue. At the moment messages can be in one of these states:

• sending
• failed sending
• sent
• read

At the moment the API does not provide delivery information for a message so in principle you cant always tell if a message was delivered to a user. This feature is in our backlog but it is most likely not going to be implemented before January.

Can you share the code you are using to show the status information? @b-onc do you have a code example on how to customize messages to show their status?

[FCView]

@tbarbugli , this exact functionality appears to be implemented in the Flutter package. You can see the checkmarks on the Channel List page in screenshots here:

https://pub.dev/packages/stream_chat_flutter

The same checkmarks are also available in the Message List page by enabling showSendingIndicator in the MessageWidget class in the Flutter implementation.

I know those checkmarks may not provide delivery information, but is it not possible to provide the exact same implementation in the iOS SDK?

[vladpre92]

@tbarbugli Thank you for your response.

What I did was:

1. Extension for ChatMessage adding information extraction for message read status based on a channel object:

    private func readStatus(for channel: ChatChannel) -> ReadStatus {
        let reads = channel.reads
        return reads
            .first(where: {
                $0.lastReadAt >= createdAt && $0.user.id != author.id
            }) != nil ? .read : .sent
    }
    
    private func readAvatars(for channel: ChatChannel) -> [URL?] {
        let usersThatRead = channel.reads
            .filter({ $0.lastReadAt >= createdAt && $0.user.id != author.id })
            .map({ $0.user })
        let firstSixAvatars = usersThatRead
            .prefix(6)
            .map({ $0.imageURL })
        return firstSixAvatars
    }
    
    func readStatusData(for channel: ChatChannel) -> ReadStatusData {
        let status = readStatus(for: channel)
        let avatars = readAvatars(for: channel)
        return ReadStatusData(status: status, avatars: avatars)
    }

2. Override for channelController(_ channelController: ChatChannelController, didUpdateChannel channel: EntityChange<ChatChannel>) inside my ChatChannelVC subclass:

    override func channelController(_ channelController: ChatChannelController, didUpdateChannel channel: EntityChange<ChatChannel>) {
        super.channelController(channelController, didUpdateChannel: channel)
        switch channel {
        case .update:
            // when channel reads updated, we must update read status indicator for visible cells
            messageListVC.listView.reloadRows(
                at: messageListVC.listView.indexPathsForVisibleRows ?? [],
                with: .none
            )
        default:
            break
        }
    }

3. Override tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell in my ChatMessageListVC in order to inject status data inside cell content view.

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = super.tableView(tableView, cellForRowAt: indexPath)
        
        guard  let channel = dataSource?.channel(for: self),
               let message = dataSource?.chatMessageListVC(self, messageAt: indexPath) else {
                   return cell
               }
        let data = message.readStatusData(for: channel)
        
        let chatMessageCell = cell as? ChatMessageCell
        let chatMessageView = chatMessageCell?.messageContentView as? ChatMessageView
        chatMessageView?.readStatus = data
        
        return cell
    }

4. Also had to override reloadRows(at indexPaths: [IndexPath], with animation: UITableView.RowAnimation) inside my ChatMessageListView subclass to update the way table view reload is done and to pass status information from cellAfterUpdate to cellBeforeUpdate.
5. Subclassed ChatMessageContentView with new UI properties and put the layout logic. Also had to cache status data property inside subclass.

This is my approach to this problem. It works but I'm not sure it's the best solution.

Thank you!

[soyeb313]

readStatus

@vladpre92 @tbarbugli
Can you elaborate more.. have same requirement. see screenshot. i am using Stream chat Swift SDK..
i want to show user imageview who read message below the bubble-view.
@tbarbugli @vladpre92 Any Idea ... Plz help me on this..

[vladpre92]

Hi @soyeb313 !
You have all the steps in the above reply.
I can't get more explicit than that.
Basically I explained the steps to inject read data inside message view (ChatMessageContentView subclass). (but I don't know if it's the best solution out there). You only have to write the UI code inside a ChatMessageContentView to display this info.

Good luck!

[soyeb313]

@vladpre92 Thank you for your response.
i have followed your step in mentioned replay. its giving me error in ChatMessageContentView subclass define any properties or UI code. I have no idea about How implement UI code and read status data in ChatMessageContentView. You can help on this. it's more appreciated .

Thank you once again for your response.

[soyeb313]

@vladpre92 @tbarbugli
Please help on this...

[evsaev]

Hey there! 👋

We're happy to inform you that message delivery status is now officially supported by iOS SDKs starting from 4.15.0 🎉

The info about users who have seen the message is available on the message:

public var readBy: Set<ChatUser>

@vladpre92 I can see that you're showing user avatars as part of the message read state. We explain how to customize the default read indicator in exactly this way here so feel free to check it out 🙂