RASA Angular Frontend
Fri Jun 23 2023 09:36:30 GMT+0000 (Coordinated Universal Time)
Saved by @cameron_v_r #rasa #angular
<div id="assistant"> <button id="assistant-popup-button" (click)="openSupportPopup()"> Chat Support? </button> <div id="assistant-popup" [style.display]="isOpen ? 'block' : 'none'"> <div id="assistant-popup-header"> Your friendly Assistant <button id="assistant-popup-close-button" (click)="openSupportPopup()"> X </button> </div> <div id="assistant-popup-body"> <div class="messages" #scrollMe> <div *ngFor="let message of messages" class="message"> <div [class]="message.type"> {{ message.message }} </div> </div> <div *ngIf="loading" class="message" style="width: 100%; display: block" > <div [class]="'client'">Typing...</div> </div> </div> </div> <form id="assistant-popup-footer" [formGroup]="chatForm"> <input formControlName="message" type="text" id="assistant-popup-input" placeholder="Type your message here..." /> <button id="assistant-popup-submit-button" [disabled]="!chatForm.valid" (click)="sendMessage()" > Submit </button> </form> </div> </div> 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); } }
Comments