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

<div class="chat-messages">
  <!-- MESSAGE -->
  <div *ngFor="let message of messages; let i = index" class="message-row" [ngClass]="{
      me: message.senderSeq === loginRes.userSeq,
      contact: message.senderSeq !== loginRes.userSeq
    }">
    <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
    </ucap-chat-message-box-date-splitter>

    <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
      <ul>
        <li *ngIf="getUserProfile(message.senderSeq) != ''">
          <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
            class="avatar" style="width: 50px; height: 50px;" />
        </li>
        <li>
          {{ getUserName(message.senderSeq) }}
        </li>
      </ul>
    </div>
    <ng-container [ngSwitch]="message.type">
      <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
      </ucap-chat-message-box-information>
      <ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
      </ucap-chat-message-box-information>
      <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
        (massDetail)="onMassDetail($event)">
      </ucap-chat-message-box-mass>
      <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
        (imageViewer)="onImageViewer($event)">
      </ucap-chat-message-box-file>
      <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
      </ucap-chat-message-box-sticker>
      <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
      <div *ngSwitchDefault>
        mass-translation
        <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
        notice
        <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
        recall
        <ucap-chat-message-box-recall></ucap-chat-message-box-recall>
        <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
        translation
        <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
        video-conference
        <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>

        <div class="bubble">
          <div class="message">
            {{ message.sentMessage }}
          </div>
          <div class="time secondary-text">
            {{ message.sendDate | date: 'short' }}
          </div>
        </div>
      </div>
    </ng-container>


  </div>
</div>