The query from the user and the response from the agent can be thought of as two different parts of a single component. We will create two different containers for them and then add them inside a single unit called ChatMessage. This will ensure that each query, along with its answer, appears in the same order as they were input by the user. We will start by creating a stateful widget called ChatMessage inside a new dart file called chat_message.dart. The following image shows the division of a ChatMesage into a query and a response:
To create the UI of the screen, follow these steps:
- Create a container with some text ...
