import { Component, ViewChild } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { MessageService } from '../service/api.service'; export interface Message { type: string; message: string; } @Component({ selector: 'app-chat-support', templateUrl: './chat-support.component.html', styleUrls: ['./chat-support.component.scss'], }) export class ChatSupportComponent { isOpen = false; loading = false; messages: Message[] = []; chatForm = new FormGroup({ message: new FormControl('', [Validators.required]), }); @ViewChild('scrollMe') private myScrollContainer: any; constructor(private messageService: MessageService) { } openSupportPopup() { this.isOpen = !this.isOpen; } sendMessage() { const sentMessage = this.chatForm.value.message!; this.loading = true; this.messages.push({ type: 'user', message: sentMessage, }); this.chatForm.reset(); this.scrollToBottom(); this.messageService.sendMessage(sentMessage).subscribe((response: any) => { for (const obj of response) { let value console.log(obj); if (obj.hasOwnProperty('text') ) { value = obj['text'] this.pushMessage(value) } if (obj.hasOwnProperty('image') ) { value = obj['image'] this.pushMessage(value) } } //MANIPULATION OF DATA TYPES OF RASA SUCH A IMAGE, TEXT, BUTTONS, ETC } , (error) => { console.log(error)}); } pushMessage(message:string){ console.log(message); setTimeout(() =>{this.messages.push({ type: 'client', message: message, }); this.loading = false; this.scrollToBottom(); }, 150) } scrollToBottom() { setTimeout(() => { try { this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight + 500; } catch (err) {} }, 150); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter