Narcoleptic Pasta Manufacturer

    lmfr-openlab-angular-chatbot-module
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

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

    Keywords

    none

    Install

    npm i lmfr-openlab-angular-chatbot-module

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    none

    Unpacked Size

    1.23 MB

    Total Files

    44

    Last publish

    Collaborators

    • avatar