Reverse order of messaging messages

src/app/dashboard/dashboard.component.html

@@ -4,8 +4,10 @@
 <div [attr.class]="layout">
   <div class="tfw-grid-main-components">
     <div class="tfw-header"><app-header></app-header></div>
-    <div [ngClass]="{'hide-attribute': hideMessages}" class="tfw-messages">
-      <app-messages></app-messages>
+    <div [ngClass]="{'hide-attribute': hideMessages}"
+         class="tfw-messages"
+         #tfwmessages>
+      <app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
     </div>
     <div class="tfw-web tao-grid-top-left"
          [ngClass]="{'deploy-blur': deploying}">

src/app/dashboard/dashboard.component.scss

@@ -58,6 +58,11 @@
     }
   }
 
+  .tfw-messages::-webkit-scrollbar {
+    width: 0px;
+    background: transparent;
+  }
+
   .tfw-ide {
     background-color: #1e1e1e; // vscode dark theme
   }

src/app/dashboard/dashboard.component.ts

@@ -20,6 +20,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   deploying = false;
   deploymentNotificationSubscription: Subscription;
   @ViewChild('webiframe') webiframe: ElementRef;
+  @ViewChild('tfwmessages') messages: ElementRef;
 
   layout: string = config.dashboard.currentLayout;
   hideMessages: boolean = config.dashboard.hideMessages;
@@ -125,4 +126,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
       this.selectTerminalMenuItem('console');
     }
   }
+
+  scrollMessagesToBottom(): void {
+    const element = this.messages.nativeElement;
+    // This must be done in the Angular event loop to avoid messing up
+    // change detection (not in the template like ConsoleComponent does)
+    element.scrollTop = element.scrollHeight;
+  }
 }

src/app/messages/messages.component.html

@@ -3,17 +3,11 @@
 
 <div class="tfw-messages-main">
   <div class="tfw-grid-messages-header">
-    <div class="tao-grid-top-left"><span>Instructions</span></div>
     <div class="tao-grid-center-right"><button *ngIf="showNextButton" (click)="stepFSM()" class="tao-btn-rainbow">Next</button></div>
   </div>
-  <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
-    <div class="jumping-circle" id="jc1"></div>
-    <div class="jumping-circle" id="jc2"></div>
-    <div class="jumping-circle" id="jc3"></div>
-  </div>
   <div class="tfw-grid-message"
-       *ngFor="let message of messages.slice().reverse(); let first = first"
-       [class.highlighted-message]="first">
+       *ngFor="let message of messages.slice(); let last = last"
+       [class.highlighted-message]="last">
     <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
@@ -21,4 +15,9 @@
     </div>
     <div [innerHtml]="message.message"></div>
   </div>
+  <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
+      <div class="jumping-circle" id="jc1"></div>
+      <div class="jumping-circle" id="jc2"></div>
+      <div class="jumping-circle" id="jc3"></div>
+    </div>
 </div>

src/app/messages/messages.component.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2018 Avatao.com Innovative Learning Kft.
 // All Rights Reserved. See LICENSE file for details.
 
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
 
@@ -18,6 +18,7 @@ import { Subject, Observer, BehaviorSubject } from 'rxjs';
   styleUrls: ['./messages.component.scss']
 })
 export class MessagesComponent implements OnInit {
+  @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
   newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
   messageInQueue = true;
 
@@ -38,7 +39,11 @@ export class MessagesComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.newMessage.subscribe(this.writeMessage.bind(this));
+    this.newMessage.subscribe(
+      (message) => {
+        this.writeMessage(message);
+        this.newMessageEvent.emit();
+    });
     this.messageQueueAttender.messageInQueue.subscribe(
       (value) => this.messageInQueue = value
     );