frontend-tutorial-framework/src/app/messages/messages.component.ts

56 lines
1.6 KiB
TypeScript

import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
import { MessageData, Message } from '../message-types/bot-messages';
import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service';
import { Subject } from 'rxjs';
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {
@Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
newMessage: Subject<MessageData> = new Subject<MessageData>();
showTypingIndicator = false;
messages: MessageData[] = [];
constructor(
private markdownService: MarkdownService,
private websocketService: WebSocketService,
private changeDetectorRef: ChangeDetectorRef
) {}
ngOnInit() {
this.newMessage.subscribe(
message => {
this.writeMessage(message);
this.newMessageEvent.emit();
});
this.websocketService.connect();
this.websocketService.observeControl<Message>('message.send').subscribe(
message => this.newMessage.next(message)
);
}
writeMessage(message: MessageData) {
this.transformMessage(message);
this.messages.push(message);
this.changeDetectorRef.detectChanges();
}
transformMessage(message: MessageData) {
message.message = this.convertMarkdownToHTML(message.message);
if (!message.timestamp) {
message.timestamp = new Date();
}
this.showTypingIndicator = message.typing;
}
convertMarkdownToHTML(text: string) {
return this.markdownService.convertToHtml(text);
}
}