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" class="chat-header" >
      <div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
        <!-- 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 class="room-name">
        대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명
      </div>
      <div class="room-option">
        <button
          *ngIf="!!roomInfo"
          mat-icon-button
          (click)="onClickReceiveAlarm($event)"
          aria-label="Toggle Receive Alarm"
        >
          <mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm"
            >notifications_active</mat-icon
          >
          <mat-icon class="secondary-text" *ngIf="!roomInfo.receiveAlarm"
            >notifications_off</mat-icon
          >
        </button>

        <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
    ucapUiFileUploadFor
    (fileSelected)="onFileSelected($event)"
    (fileDragEnter)="onFileDragEnter()"
    (fileDragOver)="onFileDragOver()"
    (fileDragLeave)="onFileDragLeave()"
  >
    <!-- Timer Room Info -->
    <span *ngIf="roomInfo && roomInfo.isTimeRoom">비밀 대화방입니다.</span>
    <!-- Timer Room Info -->

    <!-- CHAT MESSAGES -->
    <ucap-chat-messages
      [messages]="eventList$ | async"
      [userInfos]="userInfoList$ | async"
      [loginRes]="loginRes"
      [sessionVerInfo]="sessionVerInfo"
      (massDetail)="onMassDetail($event)"
      (save)="onSave($event)"
      (imageViewer)="onImageViewer($event)"
      (contextMenu)="onContextMenuMessage($event)"
    >
    </ucap-chat-messages>
    <!-- CHAT MESSAGES -->

    <div
      *ngIf="fileDragOver || (files && 0 < files.length)"
      class="file-drop-zone-container"
    >
      <div class="file-drop-zone">
        <ucap-ui-file-upload-queue
          [(files)]="files"
        ></ucap-ui-file-upload-queue>
      </div>
    </div>
  </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 -->

<div
  style="visibility: hidden; position: fixed"
  [style.left]="messageContextMenuPosition.x"
  [style.top]="messageContextMenuPosition.y"
  #messageContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="messageContextMenu"
></div>
<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
  <ng-template matMenuContent let-message="message" let-loginRes="loginRes">
    <ng-container *ngIf="!isRecalledMessage(message.type)">
      <button
        mat-menu-item
        *ngIf="isCopyableMessage(message.type)"
        (click)="onClickMessageContextMenu('COPY', message)"
      >
        대화 복사
      </button>
      <button
        mat-menu-item
        (click)="onClickMessageContextMenu('REPLAY', message)"
      >
        대화 전달
      </button>
      <button
        mat-menu-item
        (click)="onClickMessageContextMenu('REPLAY_TO_ME', message)"
      >
        대화 나에게 전달
      </button>
      <button
        mat-menu-item
        (click)="onClickMessageContextMenu('DELETE', message)"
      >
        대화 삭제
      </button>
      <button
        mat-menu-item
        *ngIf="isRecallableMessage(message, loginRes.userSeq)"
        (click)="onClickMessageContextMenu('RECALL', message)"
      >
        대화 회수
      </button>
    </ng-container>
  </ng-template>
</mat-menu>