mirror of
				https://github.com/avatao-content/frontend-tutorial-framework
				synced 2025-11-04 04:52:55 +00:00 
			
		
		
		
	Simplify bot messages
This commit is contained in:
		
							
								
								
									
										23
									
								
								src/app/message-types/bot-messages.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										23
									
								
								src/app/message-types/bot-messages.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,23 @@
 | 
			
		||||
// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
 | 
			
		||||
// All Rights Reserved. See LICENSE file for details.
 | 
			
		||||
 | 
			
		||||
import { WebSocketMessage } from './websocket-message';
 | 
			
		||||
 | 
			
		||||
export interface MessageConfig extends WebSocketMessage {
 | 
			
		||||
  originator?: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface MessageMetadata {
 | 
			
		||||
  originator?: string;
 | 
			
		||||
  timestamp?: Date;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface MessageData extends MessageMetadata {
 | 
			
		||||
  message: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface MessagesMessage extends MessageData, WebSocketMessage {}
 | 
			
		||||
 | 
			
		||||
export interface MessageQueueMessage extends WebSocketMessage {
 | 
			
		||||
    value: Array<MessageData>;
 | 
			
		||||
}
 | 
			
		||||
@@ -17,11 +17,4 @@
 | 
			
		||||
      <div class="jumping-circle" id="jc2"></div>
 | 
			
		||||
      <div class="jumping-circle" id="jc3"></div>
 | 
			
		||||
    </div>
 | 
			
		||||
  <div class="tfw-next-button">
 | 
			
		||||
    <button *ngIf="showNextButton"
 | 
			
		||||
            (click)="stepFSM()"
 | 
			
		||||
            class="tao-btn-rainbow">
 | 
			
		||||
            Next
 | 
			
		||||
    </button>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 
 | 
			
		||||
@@ -2,14 +2,11 @@
 | 
			
		||||
// All Rights Reserved. See LICENSE file for details.
 | 
			
		||||
 | 
			
		||||
import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
 | 
			
		||||
import { MessageConfig, MessageData, MessagesMessage, MessageQueueMessage } from '../message-types/bot-messages';
 | 
			
		||||
import { MarkdownService } from '../services/markdown.service';
 | 
			
		||||
import { WebSocketService } from '../services/websocket.service';
 | 
			
		||||
 | 
			
		||||
import { MessagesMessage } from '../message-types/messages-message';
 | 
			
		||||
import { MessagesControlCommand } from '../message-types/messages-control-command';
 | 
			
		||||
import { config } from '../config';
 | 
			
		||||
import { CommandMessage } from '../message-types/command-message';
 | 
			
		||||
import { MessageQueueMessage } from '../message-types/message-queue-message';
 | 
			
		||||
import { Subject, Observer, BehaviorSubject } from 'rxjs';
 | 
			
		||||
 | 
			
		||||
@Component({
 | 
			
		||||
@@ -19,16 +16,12 @@ import { Subject, Observer, BehaviorSubject } from 'rxjs';
 | 
			
		||||
})
 | 
			
		||||
export class MessagesComponent implements OnInit {
 | 
			
		||||
  @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
 | 
			
		||||
  newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
 | 
			
		||||
  newMessage: Subject<MessageData> = new Subject<MessageData>();
 | 
			
		||||
  messageInQueue = true;
 | 
			
		||||
 | 
			
		||||
  messages: MessagesMessage[] = [];
 | 
			
		||||
  originator: string = 'avataobot';
 | 
			
		||||
  messages: MessageData[] = [];
 | 
			
		||||
  messageQueueAttender: MessageQueueAttender;
 | 
			
		||||
  showNextButton: boolean = config.messages.showNextButton;
 | 
			
		||||
 | 
			
		||||
  command_handlers = {
 | 
			
		||||
    'showNextButton': this.showButtonHandler.bind(this)
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  constructor(
 | 
			
		||||
    private markdownService: MarkdownService,
 | 
			
		||||
@@ -49,45 +42,46 @@ export class MessagesComponent implements OnInit {
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
    this.websocketService.connect();
 | 
			
		||||
    this.websocketService.observeKey<MessagesMessage>('message').subscribe(
 | 
			
		||||
      (event) => this.newMessage.next(event.data)
 | 
			
		||||
    this.websocketService.observeKey<MessagesMessage>('message.send').subscribe(
 | 
			
		||||
      (event) => this.newMessage.next(event)
 | 
			
		||||
    );
 | 
			
		||||
    this.websocketService.observeKey<MessageQueueMessage>('queueMessages').subscribe(
 | 
			
		||||
      (event) => this.handleQueueMessage(event.data)
 | 
			
		||||
    this.websocketService.observeKey<MessageQueueMessage>('message.queue').subscribe(
 | 
			
		||||
      (event) => this.handleQueueMessage(event)
 | 
			
		||||
    );
 | 
			
		||||
    this.websocketService.observeKey<CommandMessage>('messagecontrol').subscribe(
 | 
			
		||||
      (event) => this.command_handlers[event.data.command](event.data)
 | 
			
		||||
    this.websocketService.observeKey<MessageConfig>('message.config').subscribe(
 | 
			
		||||
      (event) => this.configureMessages(event)
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  writeMessage(message: MessagesMessage) {
 | 
			
		||||
    this.transformMessage(message);
 | 
			
		||||
    this.messages.push(message);
 | 
			
		||||
  writeMessage(data: MessageData) {
 | 
			
		||||
    this.transformMessage(data);
 | 
			
		||||
    this.messages.push(data);
 | 
			
		||||
    this.changeDetectorRef.detectChanges();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  transformMessage(message: MessagesMessage) {
 | 
			
		||||
    message.message = this.convertMarkdownToHTML(message.message);
 | 
			
		||||
    if (!message.timestamp) {
 | 
			
		||||
      message.timestamp = new Date();
 | 
			
		||||
  transformMessage(data: MessageData) {
 | 
			
		||||
    data.message = this.convertMarkdownToHTML(data.message);
 | 
			
		||||
    if (!data.originator) {
 | 
			
		||||
      data.originator = this.originator;
 | 
			
		||||
    }
 | 
			
		||||
    if (!data.timestamp) {
 | 
			
		||||
      data.timestamp = new Date();
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  handleQueueMessage(data: MessageQueueMessage) {
 | 
			
		||||
    this.messageQueueAttender.queueMessages(data.messages);
 | 
			
		||||
    this.messageQueueAttender.queueMessages(data.value);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  configureMessages(data: MessageConfig) {
 | 
			
		||||
    if (data.originator) {
 | 
			
		||||
      this.originator = data.originator;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  convertMarkdownToHTML(text: string) {
 | 
			
		||||
    return this.markdownService.convertToHtml(text);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  showButtonHandler(data: MessagesControlCommand) {
 | 
			
		||||
    this.showNextButton = data.value;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  stepFSM() {
 | 
			
		||||
    this.websocketService.sendJSON({key: '', trigger: 'step_next'});
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -96,14 +90,14 @@ class MessageQueueAttender {
 | 
			
		||||
 | 
			
		||||
  private readonly charPerSecond: number;
 | 
			
		||||
  private lastMessageLength = 0;
 | 
			
		||||
  private queue: MessagesMessage[] = [];
 | 
			
		||||
  private queue: MessageData[] = [];
 | 
			
		||||
 | 
			
		||||
  constructor(private messageEmitter: Observer<MessagesMessage>, wordPerMinute: number = config.messages.messageQueueWPM) {
 | 
			
		||||
  constructor(private messageEmitter: Observer<MessageData>, wordPerMinute: number = config.messages.messageQueueWPM) {
 | 
			
		||||
    const charPerMinute = wordPerMinute * 5;
 | 
			
		||||
    this.charPerSecond = charPerMinute / 60;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  queueMessages(messages: Array<MessagesMessage>) {
 | 
			
		||||
  queueMessages(messages: Array<MessageData>) {
 | 
			
		||||
    this.queue = this.queue.concat(messages);
 | 
			
		||||
    this.attendQueue();
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user