Lmfr-Openlab-Angular-Chatbot-Module

Integrate library into angular application

Install firebase dependency required by the module

npm i firebase --save
npm i ngx-cookie --save 
npm i @nguniversal/express-engine --save 
npm install @agm/core --save 
ng add @angular/material 

In app.module.ts :

import {LmfrOpenlabAngularChatbotModule} from 'lmfr-openlab-angular-chatbot-module';

Bot initlization data

const chatbotConfig = {
name: 'Bot api name ',
displayName: 'Bot display name',
token: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
expression: 'first expression', // To wake up the bot
apiUrl: 'https://api.cai.tools.sap/build/v1/dialog' ,
clientApiKey: 'PUBLIC_LMFR_API_KEY'
//Si Dialogflow => fournir l'url de l'instance lmfr-openlab-support-client-chatbot-backend/df/detect
type: 'recast' // ou bien 'dialogflow',
project: 'id du project DF' ,
firebaseConfig : fbConfig ,
shouldShowSummaryPannel: shouldShowSummaryPannelOption,
errorMessageText: 'Arf ... Je ne sais pas quoi répondre'

};

Optional config for vote tracking on firebase

const fb = {
apiKey: '.............................',
authDomain: '.........................',
databaseURL: '.....................',
projectId: '...................',
storageBucket: '................',
messagingSenderId: '...........',
appId: '..................................'
};

Configuation of the summary pannel

const shouldShowSummaryPannelOption = false  // default value is true ;

Add LmfrOpenlabAngularChatbotModule to imports

imports: [
...,
LmfrOpenlabAngularChatbotModule.forRoot(chatbotConfig), 
  
...
]

Copy /lmfr-openlab-angular-chatbot-module/projects.lmfr-openlab-angular-chatbot-module/src/assets/chatbot folder to your assets folder

Usage:

In footer componant html file :
<lib-lmfr-openlab-angular-chatbot-module></lib-lmfr-openlab-angular-chatbot-module>
OR

<lib-lmfr-openlab-angular-chatbot-module <br>
(activateBotEvent)="onActivateBotEvent()" (hideBotEvent)="onhideBotEvent()"<br>
(resetBotEvent)="onResetBotEvent()" (rateThumbUpEvent)="onRateThumbUpEvent()"<br>
(rateThumbDownEvent)="onRateThumbDownEvent()"<br>
(userSentMessageEvent)="onUserSentMessageEvent($event)"<br>
(botRespondedEvent)="onBotRespondedEvent($event)"></lib-lmfr-openlab-angular-chatbot-module>;

Events triggerged :

onActivateBotEvent() {} 

onhideBotEvent() {} 

onResetBotEvent() {} 

onRateThumbUpEvent() {} 

onRateThumbDownEvent() {}

onUserSentMessageEvent(messsage: Message[]) {}

onBotRespondedEvent(messsage: Message[]) {}

Summary panel:

A panel containing summary on what the bot can do .
To use it , set shouldShowSummaryPannel = true ;
create intention in your agent "get-resume" that responde with a custom payload :

{
    "type": "summary",
    "elements": [
     {
        "type": "image",
        "value": "https://firebasestorage.googleapis.com/v0/b/portal-bot-19e73.appspot.com/o/uploads%2Ftenor.gif?alt=media&token=372824a2-fb29-451f-8f1a-54e7ac046fa4",
        "title": "Funny gif",
        "icon": ""
      },
      {
        "type": "html",
        "value": "cosutom html  value ",
        "title": "Funny gif",
        "icon": ""
      },
      {
        "type": "button",
        "value": "Action 1",
        "title": "Do Action 1",
        "icon": ""
      },
      {
        "type": "button",
        "value": "Action 2",
        "title": "Do Action 2",
        "icon": ""
      },
      {
        "type": "button",
        "value": "Action 3",
        "title": "Do Action 3",
        "icon": ""
      },
      {
        "type": "button_list",
        "value": [
                    {
                        "type": "button",
                        "value": "Action 1",
                        "title": "Do Action 1",
                        "icon": ""
                    },
                    {
                        "type": "button",
                        "value": "Action 2",
                        "title": "Do Action 2",
                        "icon": ""
                    },
                    {
                        "type": "button",
                        "value": "Action 3",
                        "title": "Do Action 3",
                        "icon": ""
                    }
                ],
        "title": "Do Action 2",
        "icon": ""
      }
        ]
}

Add css

download the default css file from :
https://github.com/adeo/lmfr-openlab-angular-chatbot-module/blob/master/external-css-file/lmfr-openlab-angular-chatbot-module.css Apply your modifications
link it on the project index.html file at the closing of head tag

<head>
...
<link href="assets/lmfr-openlab-angular-chatbot-module.css" rel="stylesheet">
</head>

if summary feat is used edit css to make it pretty

IAdvize

Intercept "botRespondedEvent" and call method onBotRespondedEvent:

onBotRespondedEvent(messsage: Message[]) {
if (messsage.length > 0) {
      if (messsage[messsage.length - 1].intent === 'talk.human') {
        console.log('calling iadvize');
        try {
          // @ts-ignore
          window.idzCustomData = messsage;
          // @ts-ignore
          tc.event();
        } catch (e) {
          console.log('error invok iadvize');
          console.log(e);
        }
      }
    }
}

Acces to library functions

Here is an example on how to activate and hide the bot without clic on icon:

if (LmfrOpenlabAngularChatbotComponent.instance.botService.bot.isMinimised) {
   LmfrOpenlabAngularChatbotComponent.instance.onActivateClick();
} else {
   LmfrOpenlabAngularChatbotComponent.instance.onCloseClick();
}