<h3 class="title">Web Chat</h3>
<div class="chat">
    <ul class="messages">
        <app-chat-message *ngFor="let message of messages" [message]="message"></app-chat-message>
    </ul>
    <div class="ui-inputgroup send-message-input">
        <input [(ngModel)]="messageValue" type="text" pInputText placeholder="Your message...">
        <button pButton type="button" label="Send" (click)="sendMessage()"></button>
    </div>
</div>

<p-dialog [modal]="true" header="Chat nickname" [closable]="false" [(visible)]="authorNicknameDisplayed" [style]="{width: 'auto', height: 'auto'}">
    <div class="ui-inputgroup author-nickname-input">
            <input [(ngModel)]="author" type="text" pInputText placeholder="Your nickname...">
            <button pButton type="button" label="Choose" (click)="onAuthorSet()"></button>
        </div>
</p-dialog>