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

<div class="chat-messages" #scrollMe>
  <!-- <div class="message-row" *ngIf="eventRemain">
    <button mat-button (click)="onClickMore($event)">이전 대화 보기</button>
  </div> -->
  <!-- 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)"
      class="date-splitter"
      [message]="message"
    >
    </ucap-chat-message-box-date-splitter>

    <div class="chat-row">
      <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"
            class="information-msg"
          >
          </ucap-chat-message-box-information>
          <ucap-chat-message-box-information
            *ngSwitchCase="EventType.Exit"
            [message]="message"
            class="information-msg"
          >
          </ucap-chat-message-box-information>
          <ucap-chat-message-box-information
            *ngSwitchCase="EventType.ForcedExit"
            [message]="message"
            class="information-msg"
          >
          </ucap-chat-message-box-information>
          <ucap-chat-message-box-information
            *ngSwitchCase="EventType.RenameRoom"
            [message]="message"
            class="information-msg"
          >
          </ucap-chat-message-box-information>
          <ucap-chat-message-box-information
            *ngSwitchCase="EventType.GuideForRoomTimerChanged"
            [message]="message"
            [senderName]="getUserName(message.senderSeq)"
            class="information-msg"
          >
          </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
                "
              /> -->
          <img
            class="avatar"
            style="width: 50px; height: 50px;"
            ucapImage
            [base]="profileImageRoot"
            [path]="getUserProfile(message.senderSeq)"
            [default]="'assets/images/img_nophoto_50.png'"
            (click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
          />
          <!-- <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)"
                (contextmenu)="onContextMenuMessage($event, message)"
              >
              </ucap-chat-message-box-mass>
              <ucap-chat-message-box-file
                *ngSwitchCase="EventType.File"
                [eventInfoStatus]="eventInfoStatus"
                [message]="message"
                (save)="onSave($event)"
                (fileViewer)="onFileViewer($event)"
                (contextmenu)="onContextMenuMessage($event, message)"
              >
              </ucap-chat-message-box-file>
              <ucap-chat-message-box-sticker
                *ngSwitchCase="EventType.Sticker"
                [message]="message"
                (contextmenu)="onContextMenuMessage($event, 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> -->
                {{ message.type }} / {{ message.sentMessage }}
              </div>
            </ng-container>
          </div>
        </div>

        <div class="time secondary-text">
          <ul>
            <li *ngIf="isShowUnreadCount">{{ getUnreadCount(message) }}</li>
            <li>
              {{ moment(message.sendDate).toDate() | date: 'a hh:mm' }}
            </li>
          </ul>
        </div>
      </ng-template>
    </div>
  </div>
</div>