Vmeda.Online/src/addons/mod/chat/pages/session-messages/session-messages.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <h1>{{ 'addon.mod_chat.messages' | translate }}</h1>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshMessages($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="loaded" class="safe-area-padding">
        <ion-list class="addon-messages-discussion-container">
            <ng-container *ngFor="let message of messages; index as index;">

                <div class="ion-text-center addon-messages-date" *ngIf="message.showDate">
                    {{ message.timestamp * 1000 | coreFormatDate:"strftimedayshort" }}
                </div>

                <div class="ion-text-center addon-mod_chat-notice" *ngIf="message.special">
                    <ion-badge class="ion-text-wrap" color="success" *ngIf="message.issystem && message.message == 'enter'">
                        <span>
                            <ion-icon name="fas-sign-in-alt" aria-hidden="true"></ion-icon>
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="danger" *ngIf="message.issystem && message.message == 'exit'">
                        <span>
                            <ion-icon name="fas-sign-out-alt" aria-hidden="true"></ion-icon>
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="primary" *ngIf="message.beep == 'all'">
                        <span>
                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messagebeepseveryone' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="primary"
                        *ngIf="message.userid != currentUserId && message.beep == currentUserId">
                        <span>
                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="light"
                        *ngIf="message.userid == currentUserId && message.beep && message.beep != 'all'">
                        <span>
                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="info" *ngIf="!message.issystem && !message.beep">
                        <span>
                            <ion-icon name="fas-asterisk" aria-hidden="true"></ion-icon>
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            <strong>
                                {{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
                                [contextInstanceId]="cmId" [courseId]="courseId"></core-format-text>
                            </strong>
                        </span>
                    </ion-badge>
                </div>

                <ion-item *ngIf="!message.special" class="ion-text-wrap addon-message"
                    [class.addon-message-mine]="message.userid == currentUserId"
                    [class.addon-message-not-mine]="message.userid != currentUserId"
                    [class.addon-message-no-user]="!message.showUserData">
                    <ion-label>
                        <!-- User data. -->
                        <h2 class="addon-message-user">
                            <core-user-avatar slot="start" [user]="message" [linkProfile]="false" *ngIf="message.showUserData">
                            </core-user-avatar>
                            <div *ngIf="message.showUserData">{{ message.userfullname }}</div>
                        </h2>

                        <p class="addon-message-text">
                            <core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
                                [courseId]="courseId">
                            </core-format-text>
                        </p>
                        <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                    </ion-label>
                    <div class="tail" *ngIf="message.showTail"></div>
                </ion-item>
            </ng-container>
        </ion-list>
    </core-loading>
</ion-content>