next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

<!-- CHAT -->
<div class="container" fxFlex fxLayout="column">
  <!-- CHAT TOOLBAR -->
  <mat-toolbar class="chat-toolbar">
    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
      <div fxLayout="row" fxLayoutAlign="start center">
        <!-- RESPONSIVE CHATS BUTTON-->
        <button
          mat-icon-button
          aria-label="chats button"
          fxHide.gt-md
          class="responsive-chats-button"
        >
          <mat-icon>chat</mat-icon>
        </button>
        <!-- / RESPONSIVE CHATS BUTTON-->
      </div>

      <div>
        <button
          mat-icon-button
          [matMenuTriggerFor]="contactMenu"
          aria-label="more"
        >
          <mat-icon>more_vert</mat-icon>
        </button>

        <mat-menu #contactMenu="matMenu">
          <button mat-menu-item (click)="selectContact()">
            Contact Info
          </button>
        </mat-menu>
      </div>
    </div>
  </mat-toolbar>
  <!-- / CHAT TOOLBAR -->
  <mat-progress-bar
    *ngIf="eventListProcessing$ | async"
    mode="indeterminate"
  ></mat-progress-bar>
  <!-- CHAT CONTENT -->
  <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
    <!-- CHAT MESSAGES -->
    <ucap-chat-messages
      [messages]="eventList$ | async"
      [loginRes]="loginRes"
    ></ucap-chat-messages>
    <!-- CHAT MESSAGES -->
  </div>
  <!-- / CHAT CONTENT -->

  <!-- CHAT FOOTER -->
  <div fxFlex="0 0 auto" fxLayout="column">
    <!-- REPLY FORM -->
    <ucap-chat-form (send)="onSendMessage($event)"></ucap-chat-form>
    <!-- / REPLY FORM -->
  </div>
  <!-- / CHAT FOOTER-->
</div>
<!-- / CHAT -->