Add message buttons to control the user flow

src/app/app.module.ts

@@ -28,6 +28,7 @@ import {
 } from './services/config.service';
 import { FSMUpdateService } from './services/fsmupdate.service';
 import { LoaderComponent } from './loader/loader.component';
+import {CapitalizePipe} from './pipes/capitalize.pipe';
 
 
 @NgModule({
@@ -42,6 +43,7 @@ import { LoaderComponent } from './loader/loader.component';
     TestmessengerComponent,
     SafePipe,
     SafeHtmlPipe,
+    CapitalizePipe,
     ConsoleComponent,
     LoaderComponent
   ],

src/app/dashboard/dashboard.component.scss

@@ -65,15 +65,15 @@
   }
 
   .tfw-header {
-    padding: $small;
+    padding: $tiny;
-    padding-top: $tiny;
+    padding-top: $hair;
     background-color: $tao-base-color;
   }
 
   @include set-scrollbar-style('dark', '.tfw-messages');
 
   .tfw-messages {
-    padding: $small;
+    padding: $tiny;
     background-color: $tao-base-color;
     overflow-y: scroll;
     max-height: 95vmin;

src/app/message-types/bot-messages.ts

@@ -4,7 +4,7 @@ export interface MessageData {
   originator?: string;
   timestamp?: Date;
   typing?: boolean;
-  buttons?: [string];
+  buttons?: Array<'yes'|'no'|'solution'|'hint'|'fix'>;
   command?: any;
   message: string;
 }

src/app/messages/messages.component.html

@@ -8,10 +8,15 @@
       <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
     </div>
     <div class="tfw-grid-message-body" [innerHtml]="message.message | safeHtml"></div>
-    <div *ngIf="showButton" class="tfw-btn">
+    <div *ngIf="message.buttons !== undefined">
 
-      <div class="no">
+      <div class="tfw-message-btn-divider"></div>
-        No
+      <div class="tfw-message-btn">
+        <button *ngFor="let button of message.buttons"
+             class="{{button}}"
+             (click)="sendButtonCommand(button)">
+          {{button | capitalize}}
+        </button>
       </div>
     </div>
   </div>

src/app/messages/messages.component.scss

@@ -5,9 +5,9 @@
 .tfw-grid-message {
   display: grid;
   grid-template-rows: 1fr auto;
-  grid-row-gap: $hair;
+  grid-row-gap: $nano;
   width: 100%;
-  padding: $small;
+  padding: $hair;
   border-radius: $tao-panel-border-radius-sm;
   font-size: $font-size-base;
   margin-bottom: 8px;
@@ -18,31 +18,41 @@
   color: white;
   background-color: $tao-card-color;
 
-  .tfw-btn {
+  .tfw-message-btn-divider {
+    opacity: 0.25;
+    border: 1px solid $tao-divider-color;
+  }
+  .tfw-message-btn {
     color: $tao-btn-font-color;
-
+    padding-top: $tiny;
+    padding-bottom: $hair;
     display: flex;
     align-items: center;
     text-align: center;
 
     .no {
       @include set-button-style($tao-red-color);
+      width: $xlarge;
     }
 
     .yes {
       @include set-button-style($tao-green-color);
+      width: $xlarge;
     }
 
     .solution {
       @include set-button-style($tao-green-color);
+      width: $xlarge + $medium + $tiny;
     }
 
     .hint {
       @include set-button-style($tao-yellow-color);
+      width: $xlarge + $medium + $tiny;
     }
 
     .fix {
       @include set-button-style($tao-yellow-color);
+      width: $xlarge;
     }
 
     .next {
@@ -94,16 +104,19 @@
 
 .tfw-grid-message-header {
   display: grid;
-  grid-template-columns: 1fr 5fr 8fr;
+  grid-template-columns: 5fr 8fr;
   grid-column-gap: 4px;
   width: 100%;
 
-  img {
-    width: 12px;
-  }
-
   .originator {
-    font-weight: 500;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 26px;
+
+    display: flex;
+    align-items: center;
+    color: $tao-message-originator-color;
   }
 
   .timestamp {
@@ -114,4 +127,8 @@
 
 .tfw-grid-message-body {
   @include word-break();
+
+  & p {
+    margin-bottom: $tiny !important;
+  }
 }

src/app/messages/messages.component.ts

@@ -13,12 +13,6 @@ export class MessagesComponent implements OnInit {
   @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
   newMessage: Subject<MessageData> = new Subject<MessageData>();
   showTypingIndicator = false;
-  showButton = true;
-  noButton = false;
-  solutionButton = false;
-  hintButton = false;
-  fixButton = false;
-
   messages: MessageData[] = [];
 
   constructor(
@@ -76,4 +70,11 @@ export class MessagesComponent implements OnInit {
       this.websocketService.send(message.command);
     }
   }
+
+  sendButtonCommand(button: string) {
+    this.websocketService.send({
+      'key': 'button.click',
+      'value': button
+    });
+  }
 }

src/app/pipes/capitalize.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'capitalize',
+})
+export class CapitalizePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) {
+      return '';
+    }
+    return value[0].toLocaleUpperCase() + value.toLocaleLowerCase().slice(1);
+  }
+}

src/assets/scss/_variables.scss

@@ -2,7 +2,7 @@
 // Spaces
 //
 
-$space: 24px;
+$space: 32px;
 
 $sxlarge: 9 * $space;
 $xxxlarge: 6 * $space;
@@ -95,7 +95,7 @@ $tao-gray-900: #000000;
 $tao-base-color: #2A324C;
 $tao-btn-font-color: #1F2836;
 $tao-card-color: #363E56;
-$tao-title-color: #6697FF;
+$tao-message-originator-color: #6697FF;
 $tao-copy-color: #FFFFFF;
 $tao-timestamp-color: #94A6B9;
 $tao-divider-color: #94A6B9; // @25% opacity

src/assets/scss/mixins/_button.scss

@@ -10,5 +10,7 @@
   font-weight: bold;
   font-size: 14px;
   line-height: 26px;
+  height: $space;
+  margin-right: $tiny;
 }