Lmfr-openlab-angular-chatbot-module NPM

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 ;

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

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 :

<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();
}

tslib

@everything-registry/sub-chunk-2090 @zalastax/nolb-lm @infinitebrahmanuniverse/nolb-lm

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago