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

<div class="chat-messages">
  <!-- MESSAGE -->
  <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
  </ucap-chat-message-box-date-splitter>

  <div
    *ngFor="let message of messages; let i = index"
    class="message-row"
    [ngClass]="{
      me: message.senderSeq === loginRes.userSeq,
      contact: message.senderSeq !== loginRes.userSeq
    }"
  >

    <div
      *ngIf="getIsInformation(message); then information; else contents"
    ></div>
    <ng-template #information>
      <ng-container
        class="bubble"
        *ngIf="message.type !== EventType.NotificationForTimerRoom"
        [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-information
          *ngSwitchCase="EventType.RenameRoom"
          [message]="message"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.GuideForRoomTimerChanged"
          [message]="message"
          [senderName]="getUserName(message.senderSeq)"
        >
        </ucap-chat-message-box-information>
      </ng-container>
    </ng-template>
    <ng-template #contents>
      <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
            <!-- <img
              class="avatar"
              style="width: 50px; height: 50px;"
              [src]="
                profileImageRoot
                  | ucapUiImaage
                    : {
                        path: getUserProfile(message.senderSeq),
                        default: 'assets/images/img_nophoto_50.png'
                      }
                  | async
              "
            /> -->
            <ucap-ui-imaage
              [style]="'width: 50px; height: 50px;'"
              [imageClass]="'avatar'"
              [base]="profileImageRoot"
              [path]="getUserProfile(message.senderSeq)"
              [default]="'assets/images/img_nophoto_50.png'"
            ></ucap-ui-imaage>
      </div>

      <div class="message-main">
        <div class="chat-name">
            {{ getUserName(message.senderSeq) }}
        </div>

      <div class="bubble">
        <ng-container
          class="bubble"
          *ngIf="message.type !== EventType.NotificationForTimerRoom"
          [ngSwitch]="message.type"
        >
          <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-recall
            *ngSwitchCase="EventType.RecalledMessage"
          ></ucap-chat-message-box-recall>
          <ucap-chat-message-box-text
            *ngSwitchCase="EventType.Character"
            [message]="message"
            (contextmenu)="onContextMenuMessage($event, 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>
            <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="message">
              {{ message.sentMessage }}
            </div>
          </div>
        </ng-container>
      </div>
    </div>

      <div class="time secondary-text">
        {{ message.sendDate | date: 'a hh:mm' }}
      </div>
    </ng-template>
  </div>
</div>