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"
          class="responsive-chats-button"
        >
          <!--<mat-icon>chat</mat-icon>-->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="currentColor"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="round"
          >
            <g>
              <path
                d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
                      		c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
                      		c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
                      		c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
                      		c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z"
              />
            </g>
            <g>
              <circle cx="9" cy="12" r="1" />
              <circle cx="12.5" cy="12" r="1" />
              <circle cx="16" cy="12" r="1" />
            </g>
          </svg>
        </button>
        <!-- / RESPONSIVE CHATS BUTTON-->
        <button
          mat-icon-button
          aria-label="chats button"
          class="responsive-chats-button chat-timer"
          *ngIf="!!roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
        >
          <mat-icon>timer</mat-icon>
        </button>
      </div>
      <div class="room-info">
        <div *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom" class="room-type text-accent-color ">
          <span class="bg-accent-darkest">{{
                      getConvertTimer(roomInfoSubject.value.timeRoomInterval)
                    }} </span>
        </div>
        <h3 class="room-name">
          <ng-container
            *ngIf="!roomInfoSubject.value || !userInfoListSubject.value"
          >
            {{ 'chat.getRoomNameInProgress' | translate }}
          </ng-container>
          <ng-container
            *ngIf="!!roomInfoSubject.value && !!userInfoListSubject.value"
          >
            <ng-container [ngSwitch]="roomInfoSubject.value.roomType">
              <ng-container *ngSwitchCase="RoomType.Mytalk">
                MyTalk
              </ng-container>
              <ng-container
                *ngSwitchCase="
                  RoomType.Bot ||
                  RoomType.Allim ||
                  RoomType.Allim_Elephant ||
                  RoomType.Allim_TMS
                "
              >
                {{ _roomUserInfos | ucapTranslate: 'name':',' }}
              </ng-container>
              <ng-container *ngSwitchDefault>
                <ng-template
                  [ngIf]="
                    !!roomInfoSubject.value.roomName &&
                    '' !== roomInfoSubject.value.roomName.trim()
                  "
                  [ngIfElse]="roomNameNotExist"
                >
                  {{ roomInfoSubject.value.roomName }}
                </ng-template>
                <ng-template #roomNameNotExist>
                  {{ getRoomNameByRoomUser(_roomUserInfos) }}
                </ng-template>
              </ng-container>
            </ng-container>
          </ng-container>
        </h3>
        <!-- Timer Room Info -->
        <!--<div
          *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
          class="room-type text-accent-color "
        >
          <span class="bg-accent-darkest"
            >{{
              getConvertTimer(roomInfoSubject.value.timeRoomInterval)
            }} </span
          >{{ 'chat.isRoomTypeSecret' | translate }}
        </div>-->
        <!-- Timer Room Info -->
      </div>
      <div class="room-option">
        <button
          *ngIf="!!roomInfoSubject.value"
          mat-icon-button
          (click)="onClickReceiveAlarm()"
          aria-label="Toggle Receive Alarm"
        >
          <!--<mat-icon
            class="amber-fg"
            *ngIf="roomInfoSubject.value.receiveAlarm"
            matTooltip="{{ 'chat.notificationIsOn' | translate }}"
            >notifications_active</mat-icon>-->
            <mat-icon class="icon-button" *ngIf="roomInfoSubject.value.receiveAlarm"
              matTooltip="{{ 'chat.notificationIsOn' | translate }}"><i class="mid mdi-bell-ring-outline"></i></mat-icon>

          <mat-icon
            class="icon-button"
            *ngIf="!roomInfoSubject.value.receiveAlarm"
            matTooltip="{{ 'chat.notificationIsOff' | translate }}"
            ><i class="mid mdi-bell-off-outline"></i></mat-icon>
        </button>

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

        <mat-menu #contactMenu="matMenu">
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('OPEN_ALBUM_LIST')"
            (click)="onClickContextMenu('OPEN_ALBUM_LIST')"
          >
            {{ 'chat.albumBox.label' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('OPEN_FILE_LIST')"
            (click)="onClickContextMenu('OPEN_FILE_LIST')"
          >
            {{ 'chat.fileBox.label' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('CHAT_SEARCH')"
            (click)="onClickContextMenu('CHAT_SEARCH')"
          >
            {{ 'chat.searchEventByText' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('OPEN_ROOM_USER')"
            (click)="onClickContextMenu('OPEN_ROOM_USER')"
          >
            {{ 'chat.listOfRoomMember' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('ADD_MEMBER')"
            (click)="onClickContextMenu('ADD_MEMBER')"
          >
            {{ 'chat.addMemberToRoom' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('ADD_GROUP')"
            (click)="onClickContextMenu('ADD_GROUP')"
          >
            {{ 'chat.addMemberToGroup' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('EDIT_ROOM')"
            (click)="onClickContextMenu('EDIT_ROOM')"
          >
            {{ 'chat.settingsOfRoom' | translate }}
          </button>
          <button
            mat-menu-item
            *ngIf="getShowContextMenu('CLOSE_ROOM')"
            (click)="onClickContextMenu('CLOSE_ROOM')"
          >
            {{ 'chat.closeRoom' | translate }}
          </button>
        </mat-menu>
      </div>
    </div>
    <div class="chat-search-frame">
      <div
        *ngIf="(eventListProcessing$ | async) || isTranslationProcess"
        style="position: absolute; width: 100%;"
      >
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      </div>
      <div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
        <ucap-chat-search
          [totalCount]="searchTotalCount"
          [curIndex]="searchCurrentIndex"
          (searchText)="onSearchChat($event)"
          (prevSearch)="onPrevSearch()"
          (nextSearch)="onNextSearch()"
          (searchAndPrev)="onSearchAndPrev()"
          (closeSearchArea)="onCloseSearchArea()"
        ></ucap-chat-search>
      </div>
    </div>
  </mat-toolbar>
  <!-- / CHAT TOOLBAR -->

  <!-- CHAT CONTENT -->
  <div
    fxFlex="1 1 auto"
    class="chat-content"
    ucapFileUploadFor
    [fileUploadQueue]="fileUploadQueue"
    (fileSelected)="onFileSelected($event)"
    (fileDragEnter)="onFileDragEnter($event)"
    (fileDragOver)="onFileDragOver()"
    (fileDragLeave)="onFileDragLeave()"
  >
    <!-- CHAT MESSAGES -->

    <ucap-chat-messages
      #chatMessages
      [eventList$]="eventListSubject.asObservable()"
      [newEventList$]="eventListNewSubject.asObservable()"
      [searchedList$]="searchedListSubject.asObservable()"
      [roomInfo$]="roomInfoSubject.asObservable()"
      [eventInfoStatus$]="eventInfoStatusSubject.asObservable()"
      [eventRemained$]="eventRemainedSubject.asObservable()"
      [userInfos$]="userInfoListSubject.asObservable()"
      [loginRes$]="loginResSubject.asObservable()"
      [sessionVerInfo]="sessionVerInfo"
      [isShowUnreadCount]="getShowUnreadCount()"
      [clearReadHere]="clearReadHere"
      [minShowReadHere]="
        environment.productConfig.CommonSetting.readHereShowMinimumEventCount
      "
      [translationSimpleview]="translationSimpleview"
      [searchingMode]="moreSearchProcessing"
      (moreEvent)="onMoreEvent($event)"
      (massDetail)="onMassDetail($event)"
      (massTranslationDetail)="onMassTranslationDetail($event)"
      (save)="onSave($event)"
      (fileViewer)="onFileViewer($event)"
      (contextMenu)="onContextMenuMessage($event)"
      (openProfile)="onClickOpenProfile($event)"
      (scrollUp)="onScrollupMessages($event)"
      (yReachStart)="onYReachStartMessages($event)"
      (yReachEnd)="onYReachEndMessages($event)"
      (existNewMessage)="onExistNewMessage($event)"
    >
    </ucap-chat-messages>

    <!-- CHAT MESSAGES -->
    <div class="file-drop-zone-container">
      <ucap-file-upload-queue
        #fileUploadQueue
        [dropZoneIncludeParent]="true"
        class="file-drop-zone"
      ></ucap-file-upload-queue>
    </div>
  </div>
  <!-- / CHAT CONTENT -->

  <!-- sticker-selector -->
  <div class="sticker-selector-container">
    <ucap-sticker-selector
      *ngIf="isShowStickerSelector"
      #stickerSelector
      [stickerHistory]="getStickerHistory()"
      (selectedSticker)="onSelectedSticker($event)"
      (closeSticker)="onShowToggleStickerSelector()"
      class="sticker-selector-zone"
    ></ucap-sticker-selector>
    <div></div>
  </div>
  <!-- / sticker-selector -->

  <!-- Translation -->
  <div class="translation-container">
    <ucap-translation-section
      *ngIf="isShowTranslation"
      [destLocale]="destLocale"
      [simpleView]="translationSimpleview"
      [preView]="translationPreview"
      [translationPreviewInfo]="translationPreviewInfo"
      (changeTranslationSimpleview)="onChangeTranslationSimpleView($event)"
      (changeTranslationPreview)="onChangeTranslationPreView($event)"
      (changeDestLocale)="onChangeDestLocale($event)"
      (cancelTranslation)="onCancelTranslation($event)"
      (sendTranslationMessage)="onSendTranslationMessage($event)"
    >
    </ucap-translation-section>
  </div>
  <!-- / Translation -->

  <!-- CHAT FOOTER -->
  <div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()">
    <!-- REPLY FORM -->
    <ucap-chat-form
      #chatForm
      [fileUploadQueue]="fileUploadQueue"
      (send)="onSendMessage($event)"
      (sendFiles)="onFileSelected($event)"
      (clearView)="clearView()"
      (toggleStickerSelector)="onShowToggleStickerSelector($event)"
      (toggleTranslation)="onShowToggleTranslation($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">
  <ng-template matMenuContent let-message="message" let-clicktype="clicktype">
    <ng-container *ngIf="!isRecalledMessage(message.type)">
      <button
        mat-menu-item
        *ngIf="isCopyableMessage(message.type)"
        (click)="onClickMessageContextMenu('COPY', message, clicktype)"
      >
        {{ 'chat.copyChatText' | translate }}
      </button>
      <button
        mat-menu-item
        *ngIf="isForwardableMessage(message, eventInfoStatusSubject.value)"
        (click)="onClickMessageContextMenu('REPLAY', message)"
      >
        {{ 'chat.forwardEventTo' | translate }}
      </button>
      <button
        mat-menu-item
        *ngIf="isForwardableMessage(message, eventInfoStatusSubject.value)"
        (click)="onClickMessageContextMenu('REPLAY_TO_ME', message)"
      >
        {{ 'chat.forwardEventToMe' | translate }}
      </button>
      <button
        mat-menu-item
        (click)="onClickMessageContextMenu('DELETE', message)"
      >
        {{ 'chat.removeEvent' | translate }}
      </button>
      <button
        mat-menu-item
        *ngIf="isRecallableMessage(message, loginResSubject.value.userSeq)"
        (click)="onClickMessageContextMenu('RECALL', message)"
      >
        {{ 'chat.recallEvent' | translate }}
      </button>
    </ng-container>
  </ng-template>
</mat-menu>