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) {
if (obj.hasOwnProperty('text')) {
const value = obj['text'];
this.pushMessage('text', value); // Specify the type as 'text'
}
if (obj.hasOwnProperty('image')) {
const value = obj['image'];
this.pushMessage('image', value); // Specify the type as 'image'
}
// Add more conditions for other types like buttons, cards, etc.
}
}, (error) => {
console.log(error);
});
}
pushMessage(type: string, 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);
}
}