iosswiftuicollectionviewmessagekit

configureAvatarView not working properly in MessageKit

I'm using MessageKit to create a chat interface for my app.

I'm currently using this code from their examples to not show a user's avatar if the multiple messages are from the same author:

func configureAvatarView(_ avatarView: AvatarView, for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) {
    let sigil = Sigil(ship: Sigil.Ship(rawValue: message.sender.senderId)!, color: .black).image(with: CGSize(width: 24.0, height: 24.0))
    let avatar = Avatar(image: sigil, initials: "")
        avatarView.set(avatar: avatar)
                avatarView.isHidden = isNextMessageSameSender(at: indexPath)
}

func isNextMessageSameSender(at indexPath: IndexPath) -> Bool {
    guard indexPath.section + 1 < messages.count else { return false }
    return messages[indexPath.section].sender.displayName == messages[indexPath.section + 1].sender.displayName
}

This is what it looks like in the MessageKit example app:

enter image description here

And this is the result of using the same code in my app:

enter image description here

EDIT

So it appears that the issue is somewhere here:

func isNextMessageSameSender(at indexPath: IndexPath) -> Bool {
    guard indexPath.section + 1 < messages.count else { return false }
    return messages[indexPath.section].sender.displayName == messages[indexPath.section + 1].sender.displayName
}

But I've not narrowed down exactly what it is yet

EDIT 2 I tried making it so that the check was using rows and not columns; still getting this sort of result:

enter image description here

Solution

  • Okay, first of all, let's analyze your function configureAvatarView.

    func configureAvatarView(_ avatarView: AvatarView, for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) {
    let sigil = Sigil(ship: Sigil.Ship(rawValue: message.sender.senderId)!, color: .black).image(with: CGSize(width: 24.0, height: 24.0))
    let avatar = Avatar(image: sigil, initials: "")
        avatarView.set(avatar: avatar)
                avatarView.isHidden = isNextMessageSameSender(at: indexPath)
}

    From what we can see there, you're generating a Sigil based on the name of the sender, and you are creating the avatar based on that image.

    As we can see in the first image that you shared, this image changed in the 8th message from the receiver. That makes me think that maybe the problem isn't actually in the graphical functions, but in how you are handling the data structure that holds the MessageType collection.

    enter image description here

    Secondly, I see that you use that sender.senderId attribute to set up the avatar, so I guess it's an unique attribute, but afterwards you use another one in order to do the comparison related to the next message ownership: sender.displayName. Is there any reason behind this?

    func isNextMessageSameSender(at indexPath: IndexPath) -> Bool {
    guard indexPath.section + 1 < messages.count else { return false }
    return messages[indexPath.section].sender.displayName == messages[indexPath.section + 1].sender.displayName
}

    Finally, since you are using a SenderType in your message, how are you attaching those senders to the message itself?

    Also, it could be helpful if you indicate in your question which users are supposed to take part in that conversation and which message does correspond to each of them. Does the problem occur with them? Only with the sender?

    I don't think the problem you are facing is in the ViewController.