@lifeintelligencegroup/ngx-lig-ari
Version:
Life Intelligence Group Artificial Intelligence
818 lines • 228 kB
JavaScript
import { Component, Output, EventEmitter, ViewChild, Input, ElementRef, Inject, } from '@angular/core';
import { Validators, FormControl, } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import cloneDeep from 'lodash-es/cloneDeep';
import each from 'lodash-es/each';
import find from 'lodash-es/find';
import isEmpty from 'lodash-es/isEmpty';
import isNull from 'lodash-es/isNull';
import includes from 'lodash-es/includes';
import uniqBy from 'lodash-es/uniqBy';
import eachSeries from 'async-es/eachSeries';
import { Voices } from '../services/voice-setup.constant';
import { Browser } from '@capacitor/browser';
import { IonContent, } from '@ionic/angular';
import { ConnectionStatus, } from '../services/network-service.service';
import { AriListenerSheetComponent } from '../components/ari-listener-sheet/ari-listener-sheet.component';
import { KeyboardAttachDirective } from '../directives/keyboard-attach.directive';
import { AriConfigService, ariTimeoutMessage, } from '../model/ari-bot.mode';
import { GoogleProperty } from '../model/google';
import * as i0 from "@angular/core";
import * as i1 from "@ionic/angular";
import * as i2 from "@angular/forms";
import * as i3 from "../services/pubsub.service";
import * as i4 from "../services/ari-bot.service";
import * as i5 from "../services/ngx-lig-ari.service";
import * as i6 from "../services/common.service";
import * as i7 from "../services/localstorage.service";
import * as i8 from "../services/network-service.service";
import * as i9 from "../services/httpcancel.service";
import * as i10 from "../services/ari-speech.service";
import * as i11 from "@ionic-native/text-to-speech/ngx";
import * as i12 from "../services/google-analytics.service";
import * as i13 from "../components/ari-logo/ari-logo.component";
import * as i14 from "../components/ari-svg-icon/ari-svg-icon.component";
import * as i15 from "../components/ari-splash-screen/ari-splash-screen.component";
import * as i16 from "../components/ari-suggestion-buttons/ari-suggestion-buttons.component";
import * as i17 from "../components/ari-select-option/ari-select-option.component";
import * as i18 from "../components/ari-multiple-selection-card/ari-multiple-selection-card.component";
import * as i19 from "../components/weather-card/weather-card.component";
import * as i20 from "../components/ari-card-attachments/ari-card-attachments.component";
import * as i21 from "../components/ari-card-video-attachments/ari-card-video-attachments.component";
import * as i22 from "../components/ari-card-news-attachments/ari-card-news-attachments.component";
import * as i23 from "../components/ari-card-shop-attachments/ari-card-shop-attachments.component";
import * as i24 from "../components/ari-tasks/ari-tasks.component";
import * as i25 from "../components/ari-show-cards/ari-show-cards.component";
import * as i26 from "../components/ari-error/ari-error.component";
import * as i27 from "../components/ari-loader/ari-loader.component";
import * as i28 from "../components/ari-chat-toolbar/ari-chat-toolbar.component";
import * as i29 from "@angular/common";
import * as i30 from "../directives/keyboard-attach.directive";
import * as i31 from "../pipes/linkify.pipe";
import * as i32 from "../pipes/ari-text-response.pipe";
export class AriMobileComponent {
constructor(zone, plt, fb, pubsub, modalController, loadingController, ariBotService, ariService, commonService, localStorage, networkService, httpCancelService, ariSpeechService, tts, googleEventService, config) {
this.zone = zone;
this.plt = plt;
this.fb = fb;
this.pubsub = pubsub;
this.modalController = modalController;
this.loadingController = loadingController;
this.ariBotService = ariBotService;
this.ariService = ariService;
this.commonService = commonService;
this.localStorage = localStorage;
this.networkService = networkService;
this.httpCancelService = httpCancelService;
this.ariSpeechService = ariSpeechService;
this.tts = tts;
this.googleEventService = googleEventService;
this.config = config;
this.ariBotResponseActivity = [];
this.ariOnClose = new EventEmitter();
this.ariOnResize = new EventEmitter();
this.ariBotResponse$ = new Observable();
this.searchIntervalTime = 2;
this.sizeClass = 'is-25';
this.showError = false;
this.errorResponse = {};
this.showCardnumbers = 3;
this._unsubscribe$ = new Subject();
this.synth = window.speechSynthesis;
this.ariSubs = [];
this.slideOpts = {
slidesPerView: 2,
spaceBetween: 10,
};
this.messageColor = '#3880ff';
this.ariCloseByTimeout = false;
this.ariTimeoutMessage = ariTimeoutMessage.ariLabel;
this.tasksPaginationIndex = 1;
this.tasksPagination = true;
this.activatedByVoice = this.ariService.activatedByVoice;
this.ariBotService.ariTimeout(); // 5mins timeout auto close
if (config.settings) {
this.messageColor = config.settings.theme;
if (config.settings.gtm) {
this.googleEventService.initGoogleAnalytics();
}
}
this.showCloseButton = true;
this.showSplash = true;
this.form = this.fb.group({
userInput: new FormControl('', [Validators.maxLength(500)]),
upload: new FormControl('', []),
});
this.pubsub.$sub('ARI-TIMEOUT', (response) => {
this.ariCloseByTimeout = response;
});
this.pubsub.$sub('ARI-ERROR', (error) => {
this.showError = true;
if (error) {
this.errorResponse = error.error;
console.log('ARI-ERROR errorResponse: ', error.error);
if (this.showSplash) {
this.showSplash = false;
}
}
});
this.pubsub.$sub('ARI-LOADING', () => {
this.zone.run(() => {
this.showLoading = true;
this.form.controls.userInput.disable();
});
});
this.pubsub.$sub('ARI-LOADING-DONE', () => {
this.zone.run(() => {
this.showLoading = false;
this.form.controls.userInput.enable();
this.scrollToBottom();
});
});
this.pubsub.$sub('ari-ionViewDidEnter', () => {
this.initAri();
});
this.pubsub.$sub('ari-ionViewWillLeave', () => {
this.forViewWillLeave();
});
this.networkService
.onNetworkChange()
.pipe(takeUntil(this._unsubscribe$))
.subscribe((status) => {
if (status === ConnectionStatus.Offline) {
this.httpCancelService.cancelPendingRequests();
}
});
}
get userInput() {
return this.form.get('userInput');
}
closeTimeoutReminder() {
this.ariCloseByTimeout = false;
this.pubsub.$pub('ARI-TIMEOUT', false);
this.ariBotService.resetConversation();
this.closeAri();
}
showMoreCards(attachmentLength, taskPaginationIndex) {
if (taskPaginationIndex >= 0) {
const getCurrentUrl = this.ariBotResponse.activities[taskPaginationIndex].entities[0]
.mentioned.name;
const getCurrentParams = getCurrentUrl.substring(getCurrentUrl.indexOf('?') + 1, getCurrentUrl.length);
const paramsFormatter = getCurrentParams
.replace(/&/g, '","')
.replace(/=/g, '":"');
const paramsToJson = JSON.parse('{"' + paramsFormatter + '"}');
const pageIndex = (this.tasksPaginationIndex += 1);
this.ariBotService
.paginateTasks({
PageIndex: pageIndex,
PageSize: 3,
...paramsToJson,
})
.subscribe((res) => {
if (res) {
// Concat response activities to current activities
this.ariBotResponse.activities[taskPaginationIndex].attachments =
this.ariBotResponse.activities[taskPaginationIndex].attachments.concat(res.activities[0].attachments);
const entity = this.ariBotResponse.activities[taskPaginationIndex].entities[0]
.mentioned;
// Check if API still return an item
if (res.activities[0].attachments.length > 0) {
// Property ID value is total length of User filtered tasks
if (parseInt(entity.id) > this.showCardnumbers) {
this.showCardnumbers =
this.showCardnumbers + res.activities[0].attachments.length;
if (this.showCardnumbers >= parseInt(entity.id)) {
this.showCardnumbers = parseInt(entity.id);
this.tasksPagination = false;
}
}
else {
this.showCardnumbers = parseInt(entity.id);
this.tasksPagination = false;
}
}
else {
this.tasksPagination = false;
}
}
});
}
else {
if (attachmentLength > this.showCardnumbers) {
this.showCardnumbers = this.showCardnumbers + 3;
if (this.showCardnumbers > attachmentLength) {
this.showCardnumbers = attachmentLength;
}
}
else {
this.showCardnumbers = attachmentLength;
}
}
}
forViewWillLeave() {
this.ariBotResponseActivity = [];
if (this.ariBotResponse) {
this.ariBotResponse.activities = [];
}
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
this.plt.ready().then(() => {
this.tts.speak('');
this.tts.stop();
});
}
else {
if (this.ariSpeechService &&
this.ariSpeechService.SpeechSynthesisUtterance) {
this.ariSpeechService.SpeechSynthesisUtterance.cancel();
}
}
this.ariBotResponse$ = new Observable();
if (this.ariSubs) {
this.ariSubs.forEach((subs) => subs.unsubscribe());
}
this._unsubscribe$.next();
this._unsubscribe$.complete();
}
readByAri() {
const allSpeech = [];
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
this.plt.ready().then(() => {
eachSeries(this.ariBotResponseActivity, (row, callback) => {
allSpeech.push(row);
if (!isEmpty(row.text) && row.replyToId && !row.isRead) {
row.isRead = true;
row.text = row.text
.replace(/<[^>]*b>/g, '')
.replace(/"/g, '')
.replace(/\n/gi, '<br>');
let message = row.text;
if (!this.isAriMuted) {
this.tts
.speak({
text: message.replace(/<br>/g, ', ').replace(/, {1}$/g, ''),
locale: this.ttsSpeech.Language,
rate: this.plt.is('ios') ? 1.6 : 1,
})
.then((event) => {
const allRead = allSpeech.filter((item) => {
if (item.isRead) {
return item;
}
});
if (allRead.length == allSpeech.length) {
if (this.ariService.activatedByVoice) {
this.startListening();
}
}
this.scrollToBottom();
callback();
})
.catch(() => {
callback();
});
}
else {
row.isRead = true;
this.scrollToBottom();
callback();
}
}
else {
callback();
}
});
});
}
else {
if (this.ariSpeechService.isWebSpeechSynthesisSupported()) {
this.ariSpeechService.initWebSpeechSynthesis();
eachSeries(this.ariBotResponseActivity, (row, callback) => {
allSpeech.push(row);
if (!isEmpty(row.text) && row.replyToId && !row.isRead) {
row.text = row.text
.replace(/<[^>]*b>/g, '')
.replace(/"/g, '')
.replace(/\n/gi, '<br>');
let message = row.text;
const defaultVoiceName = this.ttsSpeech.Language;
this.ariSpeechService.SpeechSynthesisUtterance.init({
lang: this.ttsSpeech.Language,
})
.then((data) => {
if (data && data.voices) {
const matchVoice = find(data.voices, (obj) => {
return obj.lang === defaultVoiceName;
});
if (matchVoice) {
this.ariSpeechService.SpeechSynthesisUtterance.setVoice(matchVoice.name);
}
else {
this.ariSpeechService.SpeechSynthesisUtterance.setVoice(data.voices[1].name);
}
}
})
.then(() => {
if (!this.isAriMuted) {
var el = this;
var utterThis = new SpeechSynthesisUtterance(message.replace(/<br>/g, ', ').replace(/, {1}$/g, ''));
row.isRead = true;
setTimeout(() => {
this.ariSpeechService.SpeechSynthesisUtterance.speak({
text: utterThis.text,
listeners: {
onend: () => {
if (!el.synth.pending && !el.synth.speaking) {
if (el.ariService.activatedByVoice) {
el.startListening();
}
}
},
},
});
}, 300);
this.scrollToBottom();
callback();
}
else {
row.isRead = true;
this.scrollToBottom();
callback();
}
});
}
else {
callback();
}
});
}
}
}
get currentSize() {
switch (this.sizeClass) {
case 'is-25':
return 1;
case 'is-50':
return 2;
case 'is-75':
return 3;
case 'is-100':
return 4;
}
}
isJson(str) {
try {
JSON.parse(str);
}
catch (e) {
return false;
}
return true;
}
initAri() {
this.isKeyBoardShow = false;
this.chatIsReady = false;
this.ariBotService.initConversation();
this.ariBotResponse$ = this.ariBotService.botResponse$();
const ariSubs = this.ariBotResponse$.subscribe((response) => {
this.showError = false;
if (response) {
this.zone.run(() => {
this.chatIsReady = !!response;
this.ariBotResponse = response;
if (this.ariBotResponse) {
if (isEmpty(this.ariBotResponseActivity)) {
this.ariBotResponseActivity = cloneDeep(this.ariBotResponse.activities);
each(this.ariBotResponseActivity, (row) => {
if (!isEmpty(row.text)) {
row.isRead = false;
}
});
uniqBy(this.ariBotResponseActivity, (e) => {
return e.id;
});
if (!this.showSplash) {
this.readByAri();
}
}
else {
each(this.ariBotResponse.activities, (row) => {
// updating token and refresh token from ari response
if (row.text) {
row.text =
row.text.indexOf('|') > 0
? row.text.split('|')[0]
: row.text
.replace(/<[^>]*b>/g, '')
.replace(/"/g, '')
.replace(/\n/gi, '<br>');
}
if (row.from.Token && row.from.RefreshToken) {
this.commonService.updateUserObject(row.from.Token, row.from.RefreshToken);
}
const result = find(this.ariBotResponseActivity, {
id: row.id,
});
if (isEmpty(result)) {
if (!isEmpty(row.text)) {
row.isRead = false;
}
this.ariBotResponseActivity.push(row);
}
});
uniqBy(this.ariBotResponseActivity, (e) => {
return e.id;
});
if (!this.showSplash) {
this.readByAri();
}
}
this.scrollToBottom();
}
});
}
}, (error) => {
this.showError = true;
});
this.ariSubs.push(ariSubs);
}
resize(size) {
window.localStorage.setItem('ariSize', size);
this.ariOnResize.emit(size);
switch (size) {
case 2:
this.sizeClass = 'is-50';
this.googleEventService.googleEvent(GoogleProperty.half_view);
break;
case 3:
this.sizeClass = 'is-75';
this.googleEventService.googleEvent(GoogleProperty.three_quarter_view);
break;
case 4:
this.sizeClass = 'is-100';
this.googleEventService.googleEvent(GoogleProperty.full_view);
break;
default:
this.sizeClass = 'is-25';
this.googleEventService.googleEvent(GoogleProperty.quarter_view);
break;
}
}
onStartTalking() {
this.showSplash = false;
if (this.showLoading && this.showSplash && !this.chatIsReady) {
return;
}
setTimeout(() => {
this.readByAri();
}, 600);
}
async refreshAri() {
const loading = await this.loadingController.create();
loading.present();
this.showError = false;
this.forViewWillLeave();
setTimeout(() => {
this.initAri();
loading.dismiss();
}, 1000);
}
ngOnInit() {
// this.ariBotService.locationStatusChanged.subscribe((permission) => {
this.ariBotService.resetConversation();
// });
this.isKeyBoardShow = false;
this.showLoading = false;
this.chatIsReady = false;
this.showSplash = true;
this.showError = false;
this.ttsSpeech = Voices[5];
this.isAriMuted = this.localStorage.getItem('isAriMuted');
this.isAriMuted = isNull(this.isAriMuted) ? false : this.isAriMuted;
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
this.showVolume = true;
}
else {
if (this.ariSpeechService.isWebSpeechSynthesisSupported()) {
this.showVolume = true;
}
else {
this.showVolume = false;
}
}
}
ionViewDidEnter() {
this.isKeyBoardShow = false;
this.showLoading = false;
this.chatIsReady = false;
this.showSplash = true;
this.showError = false;
this.isAriMuted = this.localStorage.getItem('isAriMuted');
this.isAriMuted = isNull(this.isAriMuted) ? false : this.isAriMuted;
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
this.showVolume = true;
}
else {
if (this.ariSpeechService.isWebSpeechSynthesisSupported()) {
this.showVolume = true;
}
else {
this.showVolume = false;
}
}
}
ionViewWillLeave() {
this.forViewWillLeave();
}
getElements() {
this.ariConvoScrollArea = document.getElementById('chat-container');
this.ariChatboxContainer = document.getElementById('chat-content');
}
scrollToBottom() {
const container = document.getElementById('chat-container');
if (container) {
container.scrollTop = container.scrollHeight;
setTimeout(() => {
this.content.scrollToBottom(0);
}, 400);
}
}
trackByConvoId(convo) {
return convo.id;
}
getContentClass() {
let klass = 'default';
if (this.plt.is('ios') || this.plt.is('android')) {
klass = `${klass} mobile-device`;
}
return klass;
}
getChatClass(item) {
if (item) {
return item.from.id.indexOf('AriBotChannel') >= 0
? 'bot-chat-2'
: 'user-chat-2';
}
}
hasButtons(content) {
return content && !!content.buttons ? content.buttons : null;
}
hasSuggestedActions(suggestedActions) {
return suggestedActions && !!suggestedActions.actions
? suggestedActions.actions
: null;
}
hasWasIHelpful(text) {
if (includes(text, 'Was I helpful')) {
return true;
}
else {
return false;
}
}
hasAnythingElse(text) {
if (includes(text, 'anything else')) {
return true;
}
else {
return false;
}
}
Thankyou(text) {
if (includes(text, 'Thank you and')) {
return true;
}
else {
return false;
}
}
ForWhichGoal(text) {
if (text) {
if (includes(text, 'For which goal')) {
return true;
}
else {
return false;
}
}
}
GoalType(text) {
if (includes(text[0].title, 'Unscheduled')) {
return true;
}
else {
return false;
}
}
sendActionMessage(messageItem) {
if (this.ariBotResponse) {
if (this.ariBotResponse.activities) {
this.ariBotResponse.activities.splice(this.ariBotResponse.activities.length - 1, 0, messageItem);
}
else {
this.ariBotResponse.activities = [];
this.ariBotResponse.activities.push(messageItem);
}
}
}
async sendSelection(action) {
this.showCardnumbers = 3;
switch (action.type) {
case 'openUrl':
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
const inAppOptions = {
presentationStyle: 'fullscreen',
windowName: '_blank',
url: action.value,
};
await Browser.open(inAppOptions);
}
else {
window.open(action.value, '_blank', 'noopener noreferrer');
}
break;
default:
this.sendMessage(action);
break;
}
}
sendMessage(action) {
// Pause ARI
// Mobile
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
this.plt.ready().then(() => {
this.ariBotResponseActivity.forEach((res) => {
res.isRead = true;
});
this.tts.speak('');
this.tts.stop();
});
}
// Web
if (this.ariSpeechService.SpeechSynthesisUtterance) {
this.ariSpeechService.SpeechSynthesisUtterance.cancel();
}
const userInfo = this.commonService.getUserObject();
const message = {
text: action.value || action.data,
from: userInfo,
};
const item = {
text: action.text || action.title || action.data,
from: userInfo,
};
if (this.networkService.getCurrentNetworkStatus() === ConnectionStatus.Offline) {
// this.toastr.showOfflineWarning();
return;
}
if (this.showLoading) {
return;
}
if (this.ariBotResponse) {
if (this.ariBotResponse.activities) {
this.ariBotResponse.activities.push(item);
}
else {
this.ariBotResponse.activities = [];
this.ariBotResponse.activities.push(item);
}
}
this.ariBotService.sendMessage(message);
setTimeout(() => {
// Pause ARI
this.scrollToBottom();
}, 600);
}
send() {
if (this.showLoading && this.showSplash && !this.chatIsReady) {
return;
}
let msgObj = { value: '', text: '' };
const message = this.userInput.value;
if (message) {
this.userInput.setValue('');
msgObj.value = message;
msgObj.text = message;
this.ariBotService.refreshTimer();
this.googleEventService.googleEvent(GoogleProperty.send);
this.sendMessage(msgObj);
}
}
async startListening(obj) {
if (obj.ev) {
obj.ev.preventDefault();
obj.ev.stopPropagation();
}
if (obj.activatedByVoice !== undefined) {
this.activatedByVoice = obj.activatedByVoice;
this.ariService.activatedByVoice = obj.activatedByVoice;
}
if (this.showLoading && this.showSplash && !this.chatIsReady) {
return;
}
// if (
// this.networkService.getCurrentNetworkStatus() === ConnectionStatus.Offline
// ) {
// // this.toastr.showOfflineWarning();
// return;
// }
this.googleEventService.googleEvent(GoogleProperty.mic);
this.scrollToBottom();
const modal = await this.modalController.create({
component: AriListenerSheetComponent,
cssClass: 'ari-modal-bottom-sheet',
showBackdrop: true,
mode: 'ios',
});
modal.onDidDismiss().then((resp) => {
if (resp && resp.data) {
this.ariBotService.refreshTimer();
let element = this.ariBotResponse.activities.pop();
if (element.suggestedActions) {
element.suggestedActions.actions.some((action) => {
const sim = this.similarity(action.value, resp.data);
if (sim > 0.3) {
resp.data = action.value;
resp.text = action.value;
resp.value = action.value;
return true;
}
});
}
this.sendMessage(resp);
}
});
modal.present();
}
closeAri() {
// this.arBotService.resetConversation();
this.forViewWillLeave();
this.ariOnClose.emit();
this.ariBotService.refreshTimer();
this.ariBotService.stopTimer();
this.ariService.closeAri();
this.googleEventService.googleEvent(GoogleProperty.close);
}
similarity(s1, s2) {
let longer = s1;
let shorter = s2;
if (s1.length < s2.length) {
longer = s2;
shorter = s1;
}
const longerLength = longer.length;
if (longerLength === 0) {
return 1.0;
}
return ((longerLength - this.editDistance(longer, shorter)) /
parseFloat(longerLength));
}
editDistance(s1, s2) {
s1 = s1.toLowerCase();
s2 = s2.toLowerCase();
const costs = new Array();
for (let i = 0; i <= s1.length; i++) {
let lastValue = i;
for (let j = 0; j <= s2.length; j++) {
if (i === 0) {
costs[j] = j;
}
else {
if (j > 0) {
let newValue = costs[j - 1];
if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
}
costs[j - 1] = lastValue;
lastValue = newValue;
}
}
}
if (i > 0) {
costs[s2.length] = lastValue;
}
}
return costs[s2.length];
}
muteAri() {
this.isAriMuted = !this.isAriMuted;
this.localStorage.setItem('isAriMuted', this.isAriMuted);
this.googleEventService.googleEvent(this.isAriMuted ? GoogleProperty.mute : GoogleProperty.unmute);
if (this.isAriMuted) {
if (this.plt.is('cordova') || this.plt.is('capacitor')) {
this.plt.ready().then(() => {
this.tts.speak('');
this.tts.stop();
});
}
else {
if (this.ariSpeechService.isWebSpeechSynthesisSupported()) {
this.ariSpeechService.SpeechSynthesisUtterance.cancel();
}
}
}
}
}
AriMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: AriMobileComponent, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i2.FormBuilder }, { token: i3.PubsubService }, { token: i1.ModalController }, { token: i1.LoadingController }, { token: i4.AriBotService }, { token: i5.NgxLigAriService }, { token: i6.CommonService }, { token: i7.LocalstorageService }, { token: i8.NetworkServiceService }, { token: i9.HttpCancelService }, { token: i10.AriSpeechService }, { token: i11.TextToSpeech }, { token: i12.GoogleEventsAnalyticsService }, { token: AriConfigService }], target: i0.ɵɵFactoryTarget.Component });
AriMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: AriMobileComponent, selector: "lib-ari-mobile", inputs: { showCloseButton: "showCloseButton" }, outputs: { ariOnClose: "ariOnClose", ariOnResize: "ariOnResize" }, providers: [KeyboardAttachDirective], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true }, { propertyName: "coversationList", first: true, predicate: ["coversationList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header *ngIf=\"!showSplash\" class=\"header-mobile\">\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <div class=\"welcome-group\">\n <lig-ari-logo></lig-ari-logo>\n </div>\n <ng-container *ngIf=\"(plt.is('desktop') || plt.is('tablet'))\">\n <ion-button class=\"ari-size-btn\" [ngClass]=\"{ 'is-active': sizeClass === 'is-25' }\" (click)=\"resize(1)\"\n color=\"1D57A4\">\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-25' }\" *ngIf=\"currentSize === 1\"\n [name]=\"'chat-size-03-active'\"></lig-ari-icon>\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-25' }\" *ngIf=\"currentSize !== 1\"\n [name]=\"'chat-size-03'\"></lig-ari-icon>\n </ion-button>\n <ion-button class=\"ari-size-btn\" [ngClass]=\"{ 'is-active': sizeClass === 'is-50' }\" color=\"lightgray\"\n (click)=\"resize(2)\">\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-50' }\" *ngIf=\"currentSize === 2\"\n [name]=\"'chat-size-02-active'\"></lig-ari-icon>\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-50' }\" *ngIf=\"currentSize !== 2\"\n [name]=\"'chat-size-02'\"></lig-ari-icon>\n </ion-button>\n <ion-button class=\"ari-size-btn\" [ngClass]=\"{ 'is-active': sizeClass === 'is-75' }\" (click)=\"resize(3)\"\n color=\"lightgray\">\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-75' }\" *ngIf=\"currentSize === 3\"\n [name]=\"'chat-size-01-active'\"></lig-ari-icon>\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-75' }\" *ngIf=\"currentSize !== 3\"\n [name]=\"'chat-size-01'\"></lig-ari-icon>\n </ion-button>\n <ion-button class=\"ari-size-btn\" [ngClass]=\"{ 'is-active': sizeClass === 'is-100' }\" (click)=\"resize(4)\"\n color=\"lightgray\">\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-100' }\" *ngIf=\"currentSize === 4\"\n [name]=\"'chat-size-04-active'\"></lig-ari-icon>\n <lig-ari-icon class=\"size-icon\" [ngClass]=\"{ active: sizeClass === 'is-100' }\" *ngIf=\"currentSize !== 4\"\n [name]=\"'chat-size-04'\"></lig-ari-icon>\n </ion-button>\n </ng-container>\n </ion-buttons>\n <ion-title></ion-title>\n <ion-buttons slot=\"end\">\n <ion-button fill=\"clear\" (click)=\"muteAri()\" *ngIf=\"showVolume\">\n <lig-ari-icon class=\"ari-volume\" slot=\"icon-only\" [name]=\"'icon-volume'\" *ngIf=\"!isAriMuted\"></lig-ari-icon>\n <lig-ari-icon class=\"ari-volume\" slot=\"icon-only\" [name]=\"'icon-volume-mute'\" *ngIf=\"isAriMuted\">\n </lig-ari-icon>\n </ion-button>\n <ion-button (click)=\"closeAri()\" color=\"dark\" fill=\"clear\" *ngIf=\"showCloseButton\">\n <lig-ari-icon class=\"ari-close\" slot=\"icon-only\" [name]=\"'icon-close'\"></lig-ari-icon>\n </ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content class=\"ari-content-mobile\" [ngClass]=\"getContentClass()\" #content>\n <div *ngIf=\"!showError && !showSplash\" class=\"transition-div\"></div>\n <ng-container *ngIf=\"!showError && showSplash\">\n <lig-ari-splash-screen (ariOnReady)=\"initAri()\" (ariOnTalking)=\"onStartTalking()\"></lig-ari-splash-screen>\n </ng-container>\n <!-- <lig-ari-splash-screen></lig-ari-splash-screen> -->\n <ng-container *ngIf=\"!showError && !showSplash\">\n <div id=\"chat-container\" class=\"chat-container p-3\">\n <div id=\"chat-content\" class=\"chat-content\" *ngIf=\"ariBotResponse$ | async as ariBotResponse\">\n <ul class=\"conversation-list\">\n <ng-container *ngFor=\"\n let item of ariBotResponse.activities;\n let index = index;\n let last = last;\n trackBy: trackByConvoId\n \">\n <li [ngClass]=\"getChatClass(item)\">\n <div class=\"chat-item\">\n <ng-container *ngIf=\"item.text\">\n <div [ngClass]=\"\n getChatClass(item) === 'user-chat-2' ? 'user-msg' : ''\n \" [ngStyle]=\"{\n 'background-color':\n getChatClass(item) === 'user-chat-2' ? messageColor : ''\n }\" class=\"d-flex text-message\" *ngIf=\"!item.suggestedActions\">\n <span class=\"m-0\" [innerHtml]=\"item.text | ariTextResponse | linkify\"></span>\n <ion-icon *ngIf=\"Thankyou(item.text)\" class=\"ari-thanks\" slot=\"icon-only\"\n src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNC42ODciIGhlaWdodD0iMjQuMDI4IiB2aWV3Qm94PSIwIDAgMjQuNjg3IDI0LjAyOCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgyOTAgLTYwMTApIj48cGF0aCBkPSJNNTkuMDI5LDU2LjhjLTIuOTA4LjExLTUuNzYuNDExLTguMjI5LDEuNzgzLDIuNjA2LS4xMzcsNS4wNDctLjgsOC4xNDcuNDExQTE4LjYwNywxOC42MDcsMCwwLDAsNTkuMDI5LDU2LjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjUyLjMxMiA1OTY3LjYyOCkiIGZpbGw9IiMzMDlkYTYiLz48cGF0aCBkPSJNNTQuNTIyLDMzLjY0N2MtLjc2OC0uMTY1LTEuMDE1LS4wNTUtMS44MS0uMjQ3LS40MzksMy42NDgtMy45NSw2LjI1NC01LjIxMiw3LjQzM0M1MC4xNjEsMzkuNDA3LDUyLjc2NywzNy43NjEsNTQuNTIyLDMzLjY0N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgyNTQuNzA2IDU5ODQuNjA5KSIgZmlsbD0iI2ZhYzQ0MSIvPjxwYXRoIGQ9Ik00MC4zNDcsMzEuN2MyLjY2MS0xLjgzOCwzLjctNS45NTIsMy4yMzctOC43YTIuODIxLDIuODIxLDAsMCwxLTIuNDQxLjQxMWMxLjIwNywyLjE2Ny45MzMsNS4wMi0xLjA0Miw4LjI4NEM0MC4zNDcsMzEuNyw0MC4wNzMsMzEuODYsNDAuMzQ3LDMxLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjYwLjA3NiA1OTkyLjE1NykiIGZpbGw9IiNmNjRkNGIiLz48cGF0aCBkPSJNMzAuODYxLDMwLjA3N2MuMjc0LTIuNjA2LjE5Mi01LjEtMS4zNzEtNy4wNzctLjQxMS40NjYtLjUyMS44NzgtMS4yODksMS4zMTdDMjkuOTI4LDI1LjkzNSwzMC4yLDI4LjA3NCwzMC44NjEsMzAuMDc3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODI2OC43MTIgNTk5Mi4xNTcpIiBmaWxsPSIjMWQ1N2E0Ii8+PHBhdGggZD0iTTU4LjA3OCwyMC42ODlsMS40MjYtLjc0MSwxLjQyNi43NDFMNjAuNjU2LDE5LjFsMS4xNTItMS4xMjUtMS41OTEtLjIxOUw1OS41LDE2LjNsLS43MTMsMS40NTQtMS41OTEuMjE5TDU4LjM1MiwxOS4xWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODI0Ny42NjcgNTk5Ny4wMTkpIiBmaWxsPSIjZmFjNDQxIi8+PHBhdGggZD0iTTc5LjczOCwzOC44MTZsMS4wNy0xLjE3OUw3OS4yMTcsMzcuNWwtLjgtMS40LS42MzEsMS40ODEtMS41OTEuMywxLjIzNCwxLjA3LS4xOTIsMS41OTEsMS4zNzEtLjgyMywxLjQ4MS42NThaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjMzLjg3OSA1OTgyLjY1KSIgZmlsbD0iIzMwOWRhNiIvPjxwYXRoIGQ9Ik00MS40MzYsNy4yMTdsLjQ5NCwxLjUwOS45MzMtMS4zMTdoMS41OTFsLS45Ni0xLjI2Mi40OTQtMS41MzYtMS41MDkuNTQ5TDQxLjE2Miw0LjJsLjA1NSwxLjYxOEwzOS45LDYuNzUxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODI2MC4yMjIgNjAwNS44KSIgZmlsbD0iI2Y2NGQ0YiIvPjxwYXRoIGQ9Ik00LjI2Miw1Ni4yMDcsMyw1Ni4xbDEuNjE4LDIuMDMuMzI5LTEuMDE1LDExLjc5NS00Ljk2NUwxMC42OCw0NS40Wm01LjY3OC0xLjctMS4xNTItLjMtLjkwNS43NjgtLjA1NS0xLjIwNy0xLjAxNS0uNjMxTDcuOTM3LDUyLjdsLjI3NC0xLjE1Mi43NDEuOTMzLDEuMTc5LS4wODItLjY1OCwxLjAxNVptMS41MDktNi40NDYuNDExLDEuMTI1LDEuMTUyLjMtLjk2Ljc0MS4wNTUsMS4yMDctLjk4Ny0uNjg2LTEuMTI1LjQzOS4zMjktMS4xNTJMOS41ODMsNDkuMWwxLjIwNy0uMDI3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODI4NyA1OTc1LjkwMSkiIGZpbGw9IiMxZDU3YTQiLz48L2c+PC9zdmc+\">\n </ion-icon>\n </div>\n\n <div class=\"d-flex text-submessage\" *ngIf=\"item.suggestedActions\">\n <p class=\"m-0\" [innerHtml]=\"item.text | ariTextResponse | linkify\"></p>\n </div>\n </ng-container>\n\n <!-- Suggested actions -->\n <div class=\"card-attachments-container\" *ngIf=\"\n hasSuggestedActions(\n item.suggestedActions\n ) as suggestedActions\n \">\n <div class=\"suggested-action-container\" *ngIf=\"\n !ForWhichGoal(item.text) && !GoalType(suggestedActions)\n \">\n <ng-container *ngFor=\"let suggestedAction of suggestedActions\">\n <lig-ari-suggestion-buttons [suggestedAction]=\"suggestedAction\"\n (sendSelectionAction)=\"sendSelection(suggestedAction)\">\n {{ suggestedAction.value }}\n </lig-ari-suggestion-buttons>\n </ng-container>\n </div>\n\n <div class=\"select-options\" *ngIf=\"\n ForWhichGoal(item.text) || GoalType(suggestedActions)\n \">\n <div *ngFor=\"\n let suggestedAction of suggestedActions;\n let i = index\n \">\n <lig-ari-select-option [suggestedAction]=\"suggestedAction\" [index]=\"i\"\n (sendSelectionAction)=\"sendSelection(suggestedAction)\">\n </lig-ari-select-option>\n </div>\n </div>\n </div>\n <!-- End Suggested actions -->\n\n <div *ngIf=\"item.attachments\">\n <div *ngIf=\"\n item.inputHint &&\n item.inputHint === 'acceptingInput' &&\n !item.attachmentLayout\n \">\n <div class=\"card\" *ngFor=\"let attachment of item.attachments\">\n <div class=\"card-header\">\n {{ attachment?.content?.text }}\n </div>\n <div class=\"card-body\" *ngIf=\"hasButtons(attachment?.content) as buttons\">\n <ion-button expand=\"block\" size=\"small\" *ngFor=\"let button of buttons\" class=\"margin-bottom-5\"\n (click)=\"sendSelection(button)\">\n {{ button.title }}\n </ion-button>\n </div>\n </div>\n </div>\n <div *ngIf=\"\n item?.inputHint === 'acceptingInput' &&\n item.attachmentLayout === 'list' && item.attachments?.length && item.attachments[0].content?.body?.length &&\n item.attachments[0].content?.body[0]?.type == 'Input.ChoiceSet'\n \">\n <div class=\"card\" *ngFor=\"let attachment of item.attachments\">\n <ng-container *ngIf=\"\n attachment.contentType ===\n 'application/vnd.microsoft.card.adaptive'\n \">\n <lig-ari-multiple-selection-card [attachment]=\"attachment\"\n (sendSelectionEv)=\"sendSelection($event)\"></lig-ari-multiple-selection-card>\n </ng-container>\n <!--end multiple selection-->\n </div>\n </div>\n\n <div *ngIf=\"\n item.attachments?.length > 0 &&\n item.attachments[0].content?.title == 'Weather'\n \">\n <lig-weather-card [attachment]=\"item.attachments\" [ariMuteStatus]=\"isAriMuted\">\n </lig-weather-card>\n </div>\n <div class=\"card-attachments-container\" *ngIf=\"!item.inputHint\">\n <div class=\"card-attachments-card-container\">\n <ng-container *ngFor=\"\n let attachment of item.attachments;\n let i = index\n \">\n <!--\n =======================================================\n =======================================================\n =======================================================\n -->\n <ng-container *ngIf=\"\n attachment.contentType ===\n 'application/vnd.microsoft.card.hero' &&\n !isJson(attachment.content?.text)\n \">\n <lig-ari-card-attachments *ngIf=\"i < showCardnumbers\" [attachment]=\"attachment\"\n (sendSelectionEv)=\"sendSelection($event)\"></lig-ari-card-attachments>\n </ng-container>\n <!--\n =======================================================\n =======================================================\n =======================================================\n -->\n <ng-container *ngIf=\"\n attachment.contentType ===\n 'application/vnd.microsoft.card.video'\n \">\n <lib-ari-card-video-attachments *ngIf=\"i < showCardnumbers\" [attachment]=\"attachment\"\n (sendSelectionEv)=\"sendSelection($event)\"></lib-ari-card-video-attachments>\n </ng-container>\n\n <!--\n =======================================================\n =======================================================\n =======================================================\n -->\n <ng-container *ngIf=\"\n attachment.contentType ===\n 'application/vnd.microsoft.card.thumbnail'\n \">\n <lib-ari-card-news-attachments *ngIf=\"i < showCardnumbers\" [attachment]=\"attachment\"\n (sendSelectionEv)=\"sendSelection($event)\"></lib-ari-card-news-attachments>\n </ng-container>\n <!--shop-->\n <ng-container\n *ngIf=\"item.entities?.length > 0 && item.entities[0]?.mentioned?.role === 'Products'\">\n <lib-ari-card-shop-attachments [attachment]=\"attachment\"\n (sendSelectionEv)=\"sendSelection($event)\"></lib-ari-card-shop-attachments>\n </ng-container>\n <!--\n =======================================================\n ======================= tasks ================================\n =======================================================\n -->\n <ng-container *ngIf=\"item.entities?.length > 0\">\n <ng-container *ngIf=\"\n item.entities[0]?.mentioned?.role === 'Tasks'\n \">\n <lig-ari-tasks [attachment]=\"attachment\" (sendSelectionEv)=\"sendSelection($event)\"\n (sendActionMessageEv)=\"sendActionMessage($event)\"></lig-ari-tasks>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"item.attachments\">\n <ng-container *ngIf=\"item.attachments.length > 0\">\n <!-- Show more button for tasks -->\n <ng-container *ngIf=\"item.entities?.length > 0\">\n <ng-container *ngIf=\"\n item.entities[0].mentioned?.role === 'Tasks' &&\n item.entities[0].mentioned?.id > 3\n \">\n <lig-ari-show-cards *ngIf=\"tasksPagination\" (click)=\"\n showMoreCards(\n item.attachments.length,\n index\n )\n \"></lig-ari-show-cards>\n </ng-container>\n </ng-container>\n <!-- Show more button for not tasks -->\n <ng-container *ngIf=\"item.