SAP Conversational AI - How to integrate SAP Chatbot To UI5 Application

[rpatra]

Hi Readers!

First of all, thank you very much for reading this blog. I hope it will be helpful for you.

In this blog, I am going to write about the integration of SAP Conversational AI into your SAP Fiori/UI5 application. Before starting anything, let's understand what is SAP Conversational AI.

SAP Conversational AI

SAP Conversational AI is an SAP product which is available from January 2019. You can build innovative chat Bots with a comprehensive bot provided by SAP Conversational AI. You can leverage artificial intelligence (AI), world-class language technology, and preconfigured bots to improve customer experience.

You can visit https://cai.tools.sap/and signup to start building your Bot. It is free of cost to build your test Bot, but if you want to use at the organization level then you need to buy a license. It's also become a part of SAP Cloud Platform Enterprise Agreement Licensing. So, if your company holds this license then you are okay to use your bot in your production system.

Let's start how to build a new Bot.

STEP 1

Create a New Bot by clicking on New Bot



STEP 2

Select Greetings and Smart Talk to add default skills to your Bot. Give a name of your Bot as an example

CREATE YOUR BOT

Name: Password Reset Chat Bot

Description: To Reset System Password

Topics: IT-Support, Customer Support

Default language: English

DATA POLICY

Type of Data: Personal

End-Users: Non-vulnerable

BOT VISIBILITY

Make it Private.

Your Bot will be created and it will be added to your workspace.





STEP 3

Click on the Bot. You can find 3 default skills [Greetings, Small-Talk, Fallback] will be available for your Bot.



You can check your Bot will respond if you ask anything regarding greetings. But, where will your chat? You can find one big button on the down right corner named as 'CHAT WITH YOUR BOT'. Click on that to start chatting with your Bot.



You can start chatting by typing 'Hi Bot', your Bot will respond. See as below.



STEP 4

So, your bot is successfully configured with default skills. Now you need to create a new skill for password reset scenario. Go to BUILD tab and create a new Skill. Give name as 'Password-Reset'.



Once it created, it will be available on your BUILD tab.



STEP 5

Now, your skill is created, it's time to train your Bot. Go to TRAIN Tab. You will find multiple standard Intents and Entities will be available. But, you should first know what is Intent and Entity.

ENTITIES

Entities are designed to solve this problem: they extract key information in a sentence. To help you speed up your development, SAP Conversational AI extracts several entities by default: Dates, locations, phone numbers… An exhaustive list is available here.

INTENTS

Intents make you understand that you have to do something. Entities help you actually do something.

CREATING CUSTOM INTENT

Now, create a new custom Intent. Give name as 'password-reset'.





STEP 6

Once it created it will be available on the list of intents. Now, you have to create a new custom entity.

CREATING CUSTOM ENTITY

We will create custom entities to extract the information we need. As with intents, training is very important: the more examples you add to your bot, the more accurate it gets.

Create a new custom Entity. Give name as 'reset_password'. Select type as Restricted entity.



STEP 7

Now, you need to add expression to the Bot in Intents. Go to 'password-reset' intent and start adding expression.



STEP 8

Now, you need to tag your expressions, select the text you want to tag and type your entity name:



STEP 9

Now that we have labeled have our entities we are going to enrich them! Open the entities panel from your bot under the training tab as shown below:



Now let’s open the RESET_PASSOWRD entity. If you look at the top right of the panel you should see a toggle saying free - restricted and settings, open it so we can explain in details the different options you have access to:



Within the entity panel you have access to different options for your entity:

• Free vs Restricted – A free custom entity is used when you don’t have a strict list of values and want machine learning to detect all possible values whereas a restricted custom entity is used if you have a strict list of words to detect and don’t need automatic detection of the entity.

 

• Fuzzy matching – Fuzzy matching is an index between 0 and 1 to indicate how close a word can be from the one in your entity list of values. If the word is above this index then the platform will tag it as the closest value within your list.

 

• List of values – This is where you can add all the list of values of your entity which could be different values or synonyms

In our case, our RESET_PASSOWRD entity is going to be restricted.

STEP 10

Let's start building the chat flow, go to the BUILD tab, and click on the Password-Reset skill.

You will find 3 Tabs: Trigger, Requirements, Actions

Trigger

The trigger is basically, a checklist to enter to the skills. You can set conditions there if the condition satisfies then the skill will be triggered.

Action

Action is basically the task you want to perform by the skill.

Requirements

Requirements are basically the condition you want to keep before going for action.

Example:

If I feel hungry, I will take 100 rupees from my Dad to purchase a Burger.

In this above example,

If I feel hungry is the trigger condition.

I will take 100 rupees from my Dad is the requirement

to purchase a Burger is the Action of the skill.

Now, let's integrate this to our Bot, go to the trigger tab. Add the below condition by typing in “@password-reset” at textbox and click “SAVE”, and you should see this:



STEP 11

Now, let's add an action. Go to the Actions tab. Add a new Message Group. Click on Send Message and select a card.

Image URL:

https://securityintelligence.com/wp-content/uploads/2017/06/forgot-password-man-in-the-middle-attack...

Title: Password Reset

Subtitle: Reset your SAP password.

Click on the SAVE button.



STEP 12

Let's chat with the BOT. You can see the below chat, I am giving "Reset my system password", here my "@password-reset" skill got triggered and the action performed.



STEP 13

Now, I will add some requirements before executing the action. Let's go to the requirements tab. Add the below condition



Click on the +NEW REPLIES If #password_reset is missing. Add a new Quick reply Message.



STEP 14

Once the user is asked for reset password, 2nd question the bot should ask: 'In which system?'

So, we are creating a new Entity as 'System'. The process will be the same as Step 6.

Name: System

Mode: Restricted



 

Go to password-reset intent and add new expression related to the system. Follow Step 8 to tag your expressions with System entity.



Once you tagged follow STEP 9. Now you can test the expression is working fine or not. On the right side, there is a button 'Test'. Click on that and write 'In EMD System'.



You can see, EMD is highlighted with the #SYSTEM entity.

STEP 15

Add this also as a condition in Requirements Tab of "@reset-password" skill.



Again follow STEP 13  to add a New message on the +NEW REPLIES If #system is missing.



Now, let's chat with the Bot.



STEP 16

Now, Let's see how to connect this bot with our Fiori application.

Open Full Stack Web-IDE and create a new UI5 Project from Template.







STEP 17

Once your project is created, then go to Connect Tab. And click the + button of Webchat.



Once you clicked one pop up will come to customize your webchat UI. You can add color based on your brand guidelines.



Give the name of the Bot.



Then click on the CREATE button. You will get a script file along with a channelId and Token.

STEP 18

Now we are in the final step. Open Component.js file of your UI5 application. Add a new Function inside the onInit function.

init: function () {

	// call the base component's init function

	UIComponent.prototype.init.apply(this, arguments);



	// enable routing

	this.getRouter().initialize();



	// set the device model

	this.setModel(models.createDeviceModel(), "device");

	this.renderRecastChatbot();

},

renderRecastChatbot: function() {

	if (!document.getElementById("cai-webchat")) {

		var s = document.createElement("script");

	 	  s.setAttribute("id", "cai-webchat");

		  s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");

			  document.body.appendChild(s);

		}

		s.setAttribute("channelId", "<<Your Bot Channel Id>>");

		s.setAttribute("token", "<<Your Bot Token Id>>");

},

Now, Run the application.



 

Hurrah!! You have made it.

Many Thanks!!

Rahul Patra

 

[Gurpreet_Jaspal]

Cool... Will try soon. Thanks for sharing.

[rpatra]

You are welcome Gurpreet !! 🙂

 

[Dhanasupriya]

Nice Blog!!

[Archana]

Hello Rahul,
Good introductory blog to ChatBot. How have you used SAP Cloud Platform Workflow in here? (its tagged to SCP Workflow!)

[rpatra]

Thanks, Supriya.

[Jayakrishnan]

Great Work!!

Thanks,

JK

[former_member623434]

Hi,

Thanks for clean post,

I tried the above  approach but i am getting following as an error "Parsing error: Unexpected token renderRecastChatbot [ESLINT: ()]" . I am getting error on the line highlighted below in the image. Can anyone suggest what i am doing wrong here?



Thanks

 

 

[rpatra]

Hi  sapcpidev3

You have missed a comma (,) on 31st line no at the end of last function. It will resolve the issue.

Thanks & Regards,

Rahul

 

[former_member99272]

Hi Rahul, I am having a few small issues with this Blog. Did you walk it through end 2 end yourself? For example, it would seem like when I try to test the Bot with "Reset my System Password", it is picking up one of the other Intents. If you look into it, you will see that "@reset" is there in a couple of formats so whenever I try the text you have listed I get "Lets start Over" 🙂 Any thoughts?

[former_member414688]

Hi I had written the same code which was given in the component.js but I was getting the below attached screen without chatbox and with an error in console

[rpatra]

Dear Scott,

There is a standard Intent present in the chatbot as the name @reset. The standard @reset intent to reset the chat or to Start Over a new Chat, For that you are getting the message.

 

In my use case, I have also used the Word 'RESET' to reset the password. So, please delete the standard intent @reset and test. It should work. If you don't delete @reset it will clash between @reset and @resetpassword

Thanks & Regards,

Rahul

[rpatra]

Dear Rajasekhar,

Can you please upload a snap of your component.js just to validate.

Thanks & Regards,

Rahul

[former_member624576]

Hi I am getting same issue Have you given any solution For Rahasekher otherwise can You share the code of Component,js

 

 

[angelcortes]

Hi Rahul Patra
It is a very good tutorial, thanks. I followed it to the letter in my chatbots and they work in a Fiori application, but what if we want to take this to the next level. To a Portal in Fiorilaunchpad.
Maybe you have already asked yourself the same thing or have another tutorial on how to do it.
With the steps you gave us everything goes well until we deploy the application in the Portal, the chatbot works without problems the first time it is run. But if I return to my home page, first: the chatbot window is still active, and the most appropriate thing would be to close it when leaving the application, I want to believe it like this. second: if I want to enter the chatbot application again, an error is generated in the application component.
Thanks for your attention, I would very much like to read your comments.

Best regards
Angel Cortes, Mexico.

[rpatra]

Dear angelcortes,

If you want to integrate this chatbot to the Fiori launchpad, you can select a Fiori Launchpad Extenstion in Web IDe and try to import code in Fiori Launchpad.html.

You change the settings in CAI tool in your bot connector to make your chatbot never open always.

Regarding the issue, there is some code Fiori 3.0 not expecting, will check and revert with an alternative.

Thanks!!

[rpatra]

	renderRecastChatbot: function () {

			if (!document.getElementById("cai-webchat")) {

				var s = document.createElement("script");

				s.setAttribute("id", "cai-webchat");

				s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");

				document.body.appendChild(s);

			}

			s.setAttribute("channelId", "");

			s.setAttribute("token", "");

	}

[gacortezia]

Hello  rpatra,

 

I am facing the same error identified by Rajsekhar.

 

I am using exactly the same code in Component.js

renderRecastChatbot: function() {

			if (!document.getElementById("cai-webchat")) {

				var s = document.createElement("script");

				s.setAttribute("id", "cai-webchat");

				s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");

				document.body.appendChild(s);

			}

			s.setAttribute("channelId", "XXXXXXXXXXXXXXXXXXXX");

			s.setAttribute("token", "XXXXXXXXXXXXXXXXXXXXXXXX");



		}

Do you have an ideia of what is wrong?

 

Regards.

[csolleti]

Hi   gacortezia  , were you able to solve this issue ?

[csolleti]

Hi rajsekhar.nadella

, were you able to solve this issue ? , i am having the same issue now.

[smarchesini]

IMPORTANT UPDATE:

Now it's not working if you don't add:

renderRecastChatbot: function() {

			if (!document.getElementById("cai-webchat")) {

				var s = document.createElement("script");

				s.setAttribute("id", "cai-webchat");

				s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");

                                s.setAttribute("apiRoot","https://h2btechedge.sapcai.eu10.hana.ondemand.com/public/api"); //NEW LINE

				document.body.appendChild(s);

			}

			s.setAttribute("channelId", "XXXXXXXXXXXXXXXXXXXX");

			s.setAttribute("token", "XXXXXXXXXXXXXXXXXXXXXXXX");

                       

		}

[esameer]

Appreciate the blog Rahul! great topic, very well explained and man you nailed the use case ! Thank you so much!