Unseen text bubbles MessageKit

I am trying to use messageKit library for my app. Even the beginning of the interface building I have an issue. Although I design my codeblock as shown in the quick start and some usage videos, when I run it there is no text bubble like in the examples. I have textbar and send button, I cant see the text bubbles and can not activate the keyboard. Here is my code block below. If you know some kind of sources about how to use messagekit completely (except iosacademy youtubechannel because it did not help me ) can you please let me know.

import UIKit
import MessageKit


struct Message: MessageType {
    var sender: SenderType
    var messageId: String
    var sentDate: Date
    var kind: MessageKind
}
struct Sender: SenderType {
    var senderId: String
    var displayName: String
}

class ChatViewController: MessagesViewController {
    
    private var messages = [Message]()
    private let selfSender = Sender(senderId: "12", displayName: "noah")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        messages.append(Message(sender: selfSender,
                                messageId: "2",
                                sentDate: Date(),
                                kind: .attributedText(NSAttributedString(string: "nsattributedstring example", attributes: [NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 21)]))))
        print("messages: \(messages)")
        
        view.backgroundColor = .red
        messagesCollectionView.messagesDataSource = self
        messagesCollectionView.messagesLayoutDelegate = self
        messagesCollectionView.messagesDisplayDelegate = self
    }
}
extension ChatViewController: MessagesDataSource, MessagesLayoutDelegate, MessagesDisplayDelegate {
    var currentSender: SenderType {
        return selfSender
    }
    func messageForItem(at indexPath: IndexPath, in messagesCollectionView: MessageKit.MessagesCollectionView) -> any MessageKit.MessageType {
        return messages[indexPath.section]
    }
    func numberOfSections(in messagesCollectionView: MessageKit.MessagesCollectionView) -> Int {
        return messages.count
    }
}

xcode 15.3 messageKit 4.2.0 ios 17.2

When I print messages I can print out the message in the log.

Solution

Firstly, you should reload the messagesCollectionView data in viewDidLoad as follows (after setting the messages for sure):

messagesCollectionView.reloadData()

Then you should add the following extension to your view controller to handle the entered message.

extension ChatViewController: InputBarAccessoryViewDelegate {
    func inputBar(_ inputBar: InputBarAccessoryView, didPressSendButtonWith text: String) {
        processInputBar(inputBar) // 
    }
}

Also don't forget to set the delegate:

messageInputBar.delegate = self

messageInputBar is the default text field of the MessagesViewController just like messagesCollectionView. So don't worry you don't need to declare it.

Add this function to your view controller to handle the message. Since it can be a photo, message, video or audio etc. you should check if it is String first.

private func processInputBar(_ inputBar: InputBarAccessoryView) {
    let components = inputBar.inputTextView.components
    for component in components {
        if let message = component as? String {
            // handle the message
        }
    }
}