next-ucap-messenger/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

<virtual-scroller
  #scroll
  [items]="eventList"
  perfectScrollbar
  fxFlexFill
  #psChatContent
  [bufferAmount]="5"
  [compareItems]="compareItemsFunc"
  (psScrollUp)="onScrollup($event)"
  (psYReachStart)="onYReachStart($event)"
  (psYReachEnd)="onYReachEnd($event)"
  [enableUnequalChildrenSizes]="true"
  [modifyOverflowStyleOfParentScroll]="false"
>
  <div #chatMessagesContainer class="chat-messages">
    <div
      *ngIf="eventRemained && !!eventList && eventList.length > 0"
      class="message-row view-previous"
    >
      <button mat-button (click)="onClickMore($event)" class="bg-accent-dark">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle class="st0" cx="10" cy="10" r="7.3" />
          <polyline class="st0" points="12.9,10 10,7.1 7.1,10 " />
          <line class="st0" x1="10" y1="12.9" x2="10" y2="7.1" />
        </svg>
        <span>{{ 'chat.event.showPreviousEvents' | translate }}</span>
      </button>
      <div
        class="unRead-count"
        *ngIf="
          !!roomInfo &&
          !!baseEventSeq &&
          roomInfo.lastReadEventSeq < baseEventSeq
        "
      >
        <span class="line"></span>
        <span class="count" [innerHTML]="getStringReadHereMore()"> </span>
        <span class="line"></span>
      </div>
      <span class="line"></span>
    </div>

    <!-- MESSAGE -->
    <div #container>
      <ucap-chat-message-box
        #chatMessageBox
        *ngFor="let message of scroll.viewPortItems; trackBy: trackByEvent"
        [id]="message.seq"
        [message]="message"
        [mine]="message.senderSeq === loginRes.userSeq"
        [highlight]="isHighlightedEvent(message.seq)"
        [existReadToHere]="
          !!readToHereEvent && readToHereEvent.seq === message.seq
        "
        [dateChanged]="getDateSplitter(message)"
        [senderName]="getUserName(message.senderSeq)"
        [profileImageRoot]="profileImageRoot"
        [profileImage]="getUserProfile(message.senderSeq)"
        [eventInfoStatus]="eventInfoStatus"
        [translationSimpleview]="translationSimpleview"
        [unreadCount]="isShowUnreadCount ? getUnreadCount(message) : undefined"
        (openProfile)="onClickOpenProfile($event)"
        (massDetail)="onMassDetail($event)"
        (massTranslationDetail)="onMassTranslationDetail($event)"
        (fileViewer)="onFileViewer($event)"
        (save)="onSave($event)"
        (contextMenu)="onContextMenu($event)"
      >
      </ucap-chat-message-box>
    </div>
  </div>
</virtual-scroller>

<div
  #chatMessagesBufferContainer
  fxFlexFill
  class="chat-messages-buffer-container disappear"
>
  <div #chatMessagesBuffer fxFlexFill class="chat-messages-buffer"></div>
</div>