Build a Fiori ChatBot with SAP Conversational AI a...

ferrygun18 · ‎02-26-2019

In this blog we'll learn how to build a simple chatbot with SAP Conversational AI and SAP Open Connectors. We will also build an SAPUI5 Fiori front-end as an UI for the chatbot.

Pre-requisites

You need to have an account created for SAP HANA Trial OnDemand and SAP Conversational AI.

Setting Up SAP Conversational AI

I created hello bot with @buy and @flower intents.

@buy intent

@flower intent

I also created @flower_entity entity.

@flower_entity entity.

Setup the triggers.

Under Actions tab, I defined the Requirements.

Once you have completed the setup, we will use Dialog end points to test the bot with curl command:

Select Train tab and get the authorization token information. Take note of this token information, we will use it later when we setup SAP Open Connectors.

Use the SAP Conversational AI Dialog endpoints to communicate with bot.

Run curl command to test:

curl -H "Authorization: Token d54cc18944a6cc60ca94852d2fc8d8ce" -H "Content-Type: application/json" -d '{"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}' -X POST "https://api.cai.tools.sap/build/v1/dialog"

If no error, you will get the response message in JSON format:

{

  "results": {

    "nlp": {

      "uuid": "6631abdd-73a8-4de2-ab98-249e3f0abee5",

      "intents": [

        {

          "slug": "buy",

          "confidence": 0.99,

          "description": null

        }

      ],

      "entities": {

        "pronoun": [

          {

            "person": 1,

            "number": "singular",

            "gender": "unknown",

            "raw": "I",

            "confidence": 0.99

          }

        ],

        "number": [

          {

            "scalar": 1,

            "raw": "an",

            "confidence": 0.99

          }

        ]

      },

      "language": "en",

      "processing_language": "en",

      "version": "1902.2.0",

      "timestamp": "2019-02-26T08:10:54.924465+00:00",

      "status": 200,

      "source": "I want flowers for my mom, an offer?",

      "act": "assert",

      "type": null,

      "sentiment": "neutral"

    },

    "qna": {

      

    },

    "messages": [

      {

        "type": "text",

        "content": "Rose, Tulip and Daisy, which one you like?",

        "delay": null

      }

    ],

    "conversation": {

      "id": "CONVERSATION_ID",

      "language": "en",

      "memory": {

        

      },

      "skill": "greetings",

      "skill_occurences": 2

    }

  },

  "message": "Dialog rendered with success"

}

Setting Up SAP Open Connectors

Enable Open Connectors service in SAP Cloud Platform.

Logon to SAP HANA Trials On Demand and select Neo Trial.

Select Services.

Search for open and select Open Connectors.

Select Enable.

Select Go to Service.

Now you are at Open Connectors Service main page.

Select Connectors to create new connection.

Select Build a new connector.

Click Create.

Under Information tab, give the connector name cai and description, type of service REST API and authentication method Custom. Select Save & Next to continue.

Under Setup tab, Properties section set the following properties:
base URL: https://api.cai.tools.sap/build/v1/dialog
Pagination type: page starts with 0
Pagination Max: 100
Content-Type Header: application/json
Accept Header: application/jsonAuthentication section, authentication type: custom

At Configuration section, set the following properties:
Name: Authorization
Key: Authorization
Type: Text 128
Default: Token d54cc18944a6cc60ca94852d2fc8d8ce
Description: Authorization

At Parameters section, set the following properties.

Select Save & Next to continue.

Under Resources tab, add a new resource, select Post and click Go.

Complete the following parameters and click Save.

Select Authenticate instance.

Enter the name cai and select Create Instance.

Select Test in the API docs.

Select Try it out.

Enter the following in body'section and click Execute.

{"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}

You will get the response message back in JSON format.

Take note the authorization header information in curl command, we will use this information when we build the SAPUI5 chatbot front-end.

curl -X POST "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/" -H  "accept: application/json" -H  "Authorization: User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=" -H  "Content-Type: application/json" -d "{\"message\": {\"content\":\"I want flowers for my mom, an offer?\",\"type\":\"text\"}, \"conversation_id\": \"CONVERSATION_ID\"}"

Authorization: User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=

SAPUI5 Front-End

I have created a simple front-end with a nice button Chat with me.

Take a look at onSendPressed() method in App.controller.js Here I have defined the Ajax HTTP Post query with the following parameters:

url: https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/

headers: 'Authorization':'User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=',This is from curl command when we setup in SAP Open Connectors.

data: '{"message": {"content":"' + question + '","type":"text"}, "conversation_id": "CONVERSATION_ID"}'

onSendPressed: function(oEvent) {



    var chatbot = this.getView().byId("botchat");

    var question = oEvent.getParameter("text");



    console.log(question);

    var data = '{"message": {"content":"' + question + '","type":"text"}, "conversation_id": "CONVERSATION_ID"}';





    var _id = localStorage.getItem("chatId");

    if (_id != undefined) {

        //payload.id = _id;

    }



    jQuery.ajax({

        url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/",

        cache: false,

        type: "POST",

        headers: {

            'Authorization': 'User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=',

            'Content-Type': 'application/json'

        },

        data: data,

        async: true,

        success: function(sData) {

            console.log('[POST] /discover-dialog', sData);



            chatbot.addChatItem(sData.results.messages[0].content, false);

            chatbot.botFinishTyping();

            localStorage.setItem("chatId", sData.id);



        },

        error: function(sError) {

            chatbot.addChatItem("Something error!", false);

        }

    });



}

Execute the Ajax call and we'll get the response back in JSON format. Parse it and send back to user. Simple!

Source code: https://github.com/ferrygun/SAPOpenConnectorsChatBot

That's all the required setup that we need to do.