Move message queue logic to backend

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

@@ -7,6 +7,7 @@ export interface MessageConfig extends WebSocketMessage {
 export interface MessageMetadata {
   originator?: string;
   timestamp?: Date;
+  typing?: boolean;
 }
 
 export interface MessageData extends MessageMetadata {
@@ -14,7 +15,3 @@ export interface MessageData extends MessageMetadata {
 }
 
 export interface Message extends MessageData, WebSocketMessage {}
-
-export interface MessageQueue extends WebSocketMessage {
-    value: Array<MessageData>;
-}

src/app/message-types/deploy-message.ts

@@ -0,0 +1,5 @@
+import { WebSocketMessage } from './websocket-message';
+
+export interface DeployMessage extends WebSocketMessage {
+  status: string;
+}

src/app/messages/messages.component.html

@@ -9,7 +9,7 @@
     </div>
     <div class="tfw-grid-message-body" [innerHtml]="message.message"></div>
   </div>
-  <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
+  <div *ngIf="showTypingIndicator" 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>

src/app/messages/messages.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
-import { MessageConfig, MessageData, Message, MessageQueue } from '../message-types/bot-messages';
+import { MessageConfig, MessageData, Message } from '../message-types/bot-messages';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
 
@@ -14,42 +14,31 @@ import { Subject, Observer, BehaviorSubject } from 'rxjs';
 export class MessagesComponent implements OnInit {
   @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
   newMessage: Subject<MessageData> = new Subject<MessageData>();
-  messageInQueue = true;
+  showTypingIndicator = false;
 
   originator = 'avataobot';
   messages: MessageData[] = [];
-  messageQueueAttender: MessageQueueAttender;
-
-  command_handlers = {
-    'message.queue': this.handleQueueMessage.bind(this),
-    'message.config': this.configureMessages.bind(this),
-    'message.send': () => {}
-  };
 
   constructor(
     private markdownService: MarkdownService,
     private websocketService: WebSocketService,
     private changeDetectorRef: ChangeDetectorRef
-  ) {
+  ) {}
-    this.messageQueueAttender = new MessageQueueAttender(this.newMessage);
-  }
 
   ngOnInit() {
     this.newMessage.subscribe(
       message => {
+        this.showTypingIndicator = true;
         this.writeMessage(message);
         this.newMessageEvent.emit();
     });
-    this.messageQueueAttender.messageInQueue.subscribe(
-      (value) => this.messageInQueue = value
-    );
 
     this.websocketService.connect();
     this.websocketService.observeKey<Message>('message.send').subscribe(
       message => this.newMessage.next(message)
     );
-    this.websocketService.observeKey<MessageQueue>('message').subscribe(
+    this.websocketService.observeKey<MessageConfig>('message.config').subscribe(
-      message => this.command_handlers[message.key](message)
+      message => this.configureMessages(message)
     );
   }
 
@@ -67,10 +56,7 @@ export class MessagesComponent implements OnInit {
     if (!message.timestamp) {
       message.timestamp = new Date();
     }
-  }
+    this.showTypingIndicator = message.typing;
-
-  handleQueueMessage(message: MessageQueue) {
-    this.messageQueueAttender.queueMessages(message.value);
   }
 
   configureMessages(message: MessageConfig) {
@@ -83,48 +69,3 @@ export class MessagesComponent implements OnInit {
     return this.markdownService.convertToHtml(text);
   }
 }
-
-
-class MessageQueueAttender {
-  public messageInQueue = new BehaviorSubject<boolean>(false);
-
-  private readonly charPerSecond: number;
-  private lastMessageLength = 0;
-  private queue: MessageData[] = [];
-
-  constructor(private messageEmitter: Observer<MessageData>, wordPerMinute: number = config.messages.messageQueueWPM) {
-    const charPerMinute = wordPerMinute * 5;
-    this.charPerSecond = charPerMinute / 60;
-  }
-
-  queueMessages(messages: Array<MessageData>) {
-    this.queue = this.queue.concat(messages);
-    this.attendQueue();
-  }
-
-  private processMessage() {
-    if (this.queue.length > 0) {
-      const lastMessage = this.queue.shift();
-      this.lastMessageLength = lastMessage.message.length;
-      this.messageEmitter.next(lastMessage);
-    }
-    if (this.queue.length === 0) {
-      this.lastMessageLength = 0;
-      this.messageInQueue.next(false);
-    }
-  }
-
-  private attendQueue() {
-    if (this.queue.length > 0) {
-      this.messageInQueue.next(true);
-      const timeoutSeconds = this.lastMessageLength / this.charPerSecond;
-      setTimeout(
-        () => {
-          this.processMessage();
-          this.attendQueue();
-        },
-        timeoutSeconds * 1000
-      );
-    }
-  }
-}