Building the messages list

In this section, we are going to create the UI models that are needed to create the chat screen and the messages two users could have exchanged. Then, we will create the Message composable, and finally, the rest of the screen, including the list of messages.

Modeling the Chat and Message models

Taking into account the information we have to show on the chat screen, we are going to need two data models: one for the static data related to the conversation (for example, the name of the user we are talking to, their avatar, and so on) and one data model per message. This will be the model for the Chat model:

data class Chat(
    val id: String,
    val name: String,
    val avatar: String
)

In this case, we will need the ID of the chat, the name of the person we are talking to, and their avatar address.

Regarding the Message model, we will create the following classes:

data class Message...