Как отобразить все обсуждения в интерфейсе чат-бота

Question

<div class="msg-page">
  <div class="user-chats">
<div class="user-chats-msg">
  <div>
    <p class="bg-info">hello! I'm a chatbot. How can I help you?</p>
  </div>
</div>
  </div>
  <div class="bot-chats">
<div class="bot-msg">
  <div class="bot-msg-inbox">
    <p>{{titleInput.value}}</p>
  </div>
</div>
  </div>
  <div class="user-chats">
<div class="user-chats-msg">
  <div *ngFor="let result of res">
    <p class="bg-info">{{result.text}}</p>
  </div>
</div>
  </div>
</div>
<input
  type="text"
  class="form-control"
  placeholder="write your message"
  aria-label="Recipient's username"
  aria-describedby="basic-addon2"
  #titleInput
  id="msg"
/>
<div class="input-group-append">
  <span class="input-group-text" id="basic-addon2">
<fa-icon
  [icon]="faPaperPlane"
  class="fa-icon"
  (click)="sendMessage(titleInput.value)"
>
</fa-icon>
  </span>
</div>

Я создаю интерфейс чат-бота, используя Angular6. Моя проблема в том, что когда я задаю вопрос, я получаю ответ, а когда я задаю другой вопрос, ответ и вопросы будут отображаться в той же текстовой области, как показано на скриншотах ниже:

Как я могу сделать это как обсуждение и отобразить обсуждение (все вопросы и ответы):