Refactor message buttons using Records for mapping

src/app/dashboard/dashboard.component.scss

@@ -57,7 +57,7 @@
   .tfw-messages {
     // Check whether the layout contains a web component
     div[class*="web"] & {
-      border: 2px solid  $tao-base-color;
+      border: 2px solid $tao-base-color;
       border-top: 0;
       border-left: 0;
       border-bottom: 0;

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

@@ -1,17 +1,15 @@
 import { WebSocketMessage } from './websocket-message';
 
+export type MessageButton = 'yes' | 'no' | 'fix' | 'hint' | 'solution' | 'next';
+export type MessageButtonMap = Record<MessageButton, {caption: string}>;
+
 export interface MessageData {
   originator?: string;
   timestamp?: Date;
   typing?: boolean;
-  buttons?: Array<'yes'|'no'|'solution'|'hint'|'fix'>;
+  buttons?: MessageButton[];
   command?: any;
   message: string;
 }
 
-export interface MessageButton {
-  [Key: string]: string;
-}
-
-
 export interface Message extends MessageData, WebSocketMessage {}

src/app/messages/messages.component.html

@@ -15,7 +15,7 @@
         <button *ngFor="let button of message.buttons"
              class="{{button}}"
              (click)="sendButtonCommand(button)">
-          {{buttons[button] | capitalize}}
+          {{buttonMap[button].caption}}
         </button>
       </div>
     </div>

src/app/messages/messages.component.scss

@@ -12,7 +12,7 @@
   padding: $hair;
   border-radius: $tao-panel-border-radius-sm;
   font-size: $font-size-base;
-  margin-bottom: 8px;
+  margin-bottom: $hair;
 
   animation-name: inflate;
   animation-duration: 0.5s;
@@ -131,6 +131,7 @@
 
 .tfw-grid-message-body {
   @include word-break();
+  line-height: 26px;
 
   & p {
     margin-bottom: $tiny !important;

src/app/messages/messages.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
-import { MessageData, Message, MessageButton } from '../message-types/bot-messages';
+import {MessageData, Message, MessageButton, MessageButtonMap} from '../message-types/bot-messages';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
 import { Subject } from 'rxjs';
@@ -14,13 +14,13 @@ export class MessagesComponent implements OnInit {
   newMessage: Subject<MessageData> = new Subject<MessageData>();
   showTypingIndicator = false;
   messages: MessageData[] = [];
-  buttons: MessageButton = {
-    'yes' : 'Yes',
-    'no' : 'No',
-    'fix' : 'Ready to fix',
-    'solution' : 'Show solution',
-    'hint' : 'Hint',
-    'next' : 'Next',
+  buttonMap: MessageButtonMap = {
+    fix: {caption: 'Ready to fix'},
+    solution: {caption: 'Show solution'},
+    hint: {caption: 'Hint'},
+    next: {caption: 'Next'},
+    yes: {caption: 'Yes'},
+    no: {caption: 'No'},
   };
 
   constructor(