- SAP Managed Tags:
If you haven’t looked at the first part of this blog series, please do so before you proceed with part 2.
Very Short Summary
We built a custom user interface for our chatbot in UI5 and added it to an existing UI5 app deployed on SAP Cloud Platform. We used SAP Conversational AI API to process the user input and display it. We had to create a popover fragment view in our view folder. We also had to create a “css” folder in the same level as our controller and put a “style.css” file for our custom styling. We added skills such as fallback and created a Speech-To-Text feature to enhance user experience
What you will learn in Part 2:
How to follow steps in this post?
I will give snippets of functions. In your UI5 application, you can add these functions to your root component without affecting the existing functionality in your app. In your app, your root component might look like this based on whether you are extending a controller or creating your controller from scratch.
Last learning step we covered in post 1 was step 4. Now, we continue from step 5.
Learning #5: Adding custom CSS to modify the interface of the chatbot container
Create a new folder at the same level as the controller folder. Add a new css file named style.css and include the following code.
Custom style will give a messenger-like style to messages that user and bot exchange. Once style.css is added, we need to tell the UI5 application to use it. We can do it by adding a new key-value pair in our manifest.json. Go to the manifest.json and add the css key-value pair to the “resources” key in the manifest.json. If you don’t have the "resources" key field in your manifest JSON file, feel free to add it as follows:
Your manifest.json might look like this:
This uri tells that the root of the application is “/”. “/css/” indicates that we have a css folder at the root level of the application and then style.css file inside our folder. Make sure that the root of the application is “/”. Otherwise the css won’t be applied.
Learning #5: Creating a basic skill in SAP Conversational AI
We can think of the SAP Conversational AI(CAI) as the Natural Language Processing (NLP) Engine. By using this NLP API, we provide the user input and make an ajax call to their API point. You can think of the entire SAP CAI platform as a function with an input and output. A feature that I like about SAP CAI is that you can fork skills from other bots that are created on the platform.
First create an intent in the "train" section and then create a skill that is triggered by that intent.
First, let's start with the intent.
Here we are seeing an intent called ask-feeling. Next, we will create a skill. A skill that include this entity can be called ask-feeling-skill. Appending a ‘skill’ as suffix can be one of many conventions.
If the entity is detected, we can trigger a skill. Once the skill is triggered, we can take actions. Entity and Trigger relationships can be found here: https://cai.tools.sap/blog/build-your-first-bot-with-sap-conversational-ai/
Learning #6: Implementing a speech-to-text feature to the chatbot (Chrome Browser only)
First, we will need a button to in order to activate your microphone and speech-to-text conversion.
This function that we just wrote should be added to the root controller. Since the popup fragment view has the following line: <Button type="Emphasized" press="handleSpeechToText" id="mic", we have already passed the function handle to the view from the controller. SAP UI5 adheres by the Model View Controller framework practices, so passing a function handle from our view to our controller is a good practice of MVC.
Learning #7: Adding a Fallback skill to the chatbot so that bot says “I don’t get it” when the input is unclear to the bot.
We need to add a fallback skill that is triggered when the user input is not understood by our chatbot. If you picked some predefined features such as smalltalk skill when you first created your chatbot, then fallback skill might already be created for you. To check it, go to build tab and look for the fallback skill.
This is a message group added to the fallback skill which can be seen in the skills list.
This skill list has the fallback skill. You might see this skill like this too depending on your settings:
The two views above are the list view and graphical view of the skills in the build tab.
Learning #8: Adding a “Bot is typing status” to the pop over
We will need two functions to toggle the” bot is tying status.”. The default SAP Conversational AI webchat UI as animations to indicate that the bot is typing. One can also do an animation of three dots as the bot is typing, but “Bot is typing” text on our UI does the same job.
The two functions are changing “typingStatus” property of our popover model. We haven’t changed the UI yet. Let's do that with this function:
The three functions above will toggle the typing status to create a messenger-like app.
Conclusion
We created a custom user interface for our chatbot in UI5 and added it to an existing UI5 app deployed on SAP Cloud Platform. We used SAP Conversational AI API to process the user input and display it. We had to create a popover fragment view in our view folder. We also had to create a “css” folder in the same level as our controller and put a “style.css” file for our custom styling. We added skills such as fallback and created a Speech-To-Text feature to enhance user experience. Because the code for the chatbot is part of a larger code base for an app already deployed, I won’t be able to publish a GitHub link. Happy coding!
To see my other projects, you can check my personal website, GitHub page and Linkedin Page:
https://ya332.github.io/
https://github.com/ya332
https://www.linkedin.com/in/yigit-alparslan/
Very Short Summary
We built a custom user interface for our chatbot in UI5 and added it to an existing UI5 app deployed on SAP Cloud Platform. We used SAP Conversational AI API to process the user input and display it. We had to create a popover fragment view in our view folder. We also had to create a “css” folder in the same level as our controller and put a “style.css” file for our custom styling. We added skills such as fallback and created a Speech-To-Text feature to enhance user experience
What you will learn in Part 2:
- Adding custom CSS to modify the interface of the chatbot container
- Creating a basic skill in SAP Conversational AI
- Implementing a button to the pop over in order to activate your microphone and speech-to-text conversion.
- Adding a Fallback skill to the chatbot so that bot says “I don’t get it” when the input is unclear to the bot
- Adding a “Bot is typing status” to the pop over
How to follow steps in this post?
I will give snippets of functions. In your UI5 application, you can add these functions to your root component without affecting the existing functionality in your app. In your app, your root component might look like this based on whether you are extending a controller or creating your controller from scratch.
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/Fragment',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/Popover',
'sap/m/Button',
"../controller/BaseController",
"sap/m/Dialog",
"sap/m/MessageToast",
"sap/ui/core/mvc/XMLView"
], function (jQuery, Fragment, Controller, JSONModel, Popover, Button, BaseController, Dialog, MessageToast, XMLView) {
"use strict";
var CController = BaseController.extend("mydomain.myappname.mycomponentname.", {
model: new sap.ui.model.json.JSONModel(),
data: {},
onInit: function () {
var that = this;
var oStatus = sap.ui.getCore().byId("statusbar");
},
Last learning step we covered in post 1 was step 4. Now, we continue from step 5.
Learning #5: Adding custom CSS to modify the interface of the chatbot container
Create a new folder at the same level as the controller folder. Add a new css file named style.css and include the following code.
.statusBar {
margin-left: 10px;
font-size: 12px;
visibility: visible;
}
.userStyle {
text-align: right;
margin-right: 20px;
padding-left: 15px;
float: right;
margin-left: 15px;
}
.userStyle>div {
display: flex;
flex-direction: row;
}
.botStyle {
text-align: left;
padding-left: 5px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 35px;
margin-right: 22px;
}
.userStyle>div>span {
background: #b0e0fc;
border-radius: 10px;
padding: 8px;
}
.botStyle>div>span {
background: #e7ecf0;
border-radius: 10px;
padding: 8px;
}
.botInput>div>input {
width: 290px;
border-radius: 5px;
margin-left: 5px;
}
.botStyle>div{
display: flex;
flex-direction: row;
}Custom style will give a messenger-like style to messages that user and bot exchange. Once style.css is added, we need to tell the UI5 application to use it. We can do it by adding a new key-value pair in our manifest.json. Go to the manifest.json and add the css key-value pair to the “resources” key in the manifest.json. If you don’t have the "resources" key field in your manifest JSON file, feel free to add it as follows:
Your manifest.json might look like this:
{
"_version": "1.8.0",
"sap.app": {
"some": "keys"
},
"sap.ui5": {
"resources": {
"css": [
{
"uri": "/css/style.css"
}
]
},
"routing": {
"some": "key"
},
"model": {
"another": "key here"
}
}
}This uri tells that the root of the application is “/”. “/css/” indicates that we have a css folder at the root level of the application and then style.css file inside our folder. Make sure that the root of the application is “/”. Otherwise the css won’t be applied.
Learning #5: Creating a basic skill in SAP Conversational AI
We can think of the SAP Conversational AI(CAI) as the Natural Language Processing (NLP) Engine. By using this NLP API, we provide the user input and make an ajax call to their API point. You can think of the entire SAP CAI platform as a function with an input and output. A feature that I like about SAP CAI is that you can fork skills from other bots that are created on the platform.
First create an intent in the "train" section and then create a skill that is triggered by that intent.
First, let's start with the intent.
Here we are seeing an intent called ask-feeling. Next, we will create a skill. A skill that include this entity can be called ask-feeling-skill. Appending a ‘skill’ as suffix can be one of many conventions.
If the entity is detected, we can trigger a skill. Once the skill is triggered, we can take actions. Entity and Trigger relationships can be found here: https://cai.tools.sap/blog/build-your-first-bot-with-sap-conversational-ai/
Learning #6: Implementing a speech-to-text feature to the chatbot (Chrome Browser only)
First, we will need a button to in order to activate your microphone and speech-to-text conversion.
handleSpeechToText: function () {
var that = this;
MessageToast.show("Speech-To-Text activated. Please start speaking to the microphone");
var myBtn = sap.ui.getCore().byId("mic");
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.start();
document.getElementById("interndashboard---app--chatBotFragment--mic-img").src =
"https://www.google.com/intl/en/chrome/assets/common/images/content/mic-animate.gif"
recognition.onresult = function (event) {
document.getElementById("interndashboard---app--chatBotFragment--chat-inner").placeholder = event.results[0][0].transcript;
that.createMessage("user", event.results[0][0].transcript, "0", "false");
that.botStartTyping().bind(that);
that.respondTo(event.results[0][0].transcript);
that.botFinishTyping();
MessageToast.show('You said: ' + event.results[0][0].transcript);
document.getElementById("interndashboard---app--chatBotFragment--mic-img").src =
"https://www.google.com/intl/en/chrome/assets/common/images/content/mic.gif"
};
recognition.onspeechend = function () {
document.getElementById("interndashboard---app--chatBotFragment--chat-inner").placeholder = "Your message...";
recognition.stop();
MessageToast.show('Speech has stopped being detected');
document.getElementById("interndashboard---app--chatBotFragment--mic-img").src =
"https://www.google.com/intl/en/chrome/assets/common/images/content/mic.gif"
};
recognition.onerror = function (event) {
MessageToast.show('Error occurred in recognition: ' + event.error);
document.getElementById("interndashboard---app--chatBotFragment--mic-img").src =
"https://www.google.com/intl/en/chrome/assets/common/images/content/mic-slash.gif"
};
},
This function that we just wrote should be added to the root controller. Since the popup fragment view has the following line: <Button type="Emphasized" press="handleSpeechToText" id="mic", we have already passed the function handle to the view from the controller. SAP UI5 adheres by the Model View Controller framework practices, so passing a function handle from our view to our controller is a good practice of MVC.
Learning #7: Adding a Fallback skill to the chatbot so that bot says “I don’t get it” when the input is unclear to the bot.
We need to add a fallback skill that is triggered when the user input is not understood by our chatbot. If you picked some predefined features such as smalltalk skill when you first created your chatbot, then fallback skill might already be created for you. To check it, go to build tab and look for the fallback skill.
This is a message group added to the fallback skill which can be seen in the skills list.
This skill list has the fallback skill. You might see this skill like this too depending on your settings:
The two views above are the list view and graphical view of the skills in the build tab.
Learning #8: Adding a “Bot is typing status” to the pop over
We will need two functions to toggle the” bot is tying status.”. The default SAP Conversational AI webchat UI as animations to indicate that the bot is typing. One can also do an animation of three dots as the bot is typing, but “Bot is typing” text on our UI does the same job.
botStartTyping: function () {
// Set visible true
var that = this;
this._oPopover.getModel().setProperty("/typingStatus", this.typingStatus);
},
botFinishTyping: function () {
// Set visible false
var that = this;
this._oPopover.getModel().setProperty("/typingStatus", this.typingStatus);
},The two functions are changing “typingStatus” property of our popover model. We haven’t changed the UI yet. Let's do that with this function:
createStatusModel: function () {
this.popModel = this.getView().getModel();
var oEntry = this.typingStatus;
this.popModel.setProperty("/typingStatus", oEntry);
var oStatus = sap.ui.getCore().byId("statusbar");
},
The three functions above will toggle the typing status to create a messenger-like app.
Conclusion
We created a custom user interface for our chatbot in UI5 and added it to an existing UI5 app deployed on SAP Cloud Platform. We used SAP Conversational AI API to process the user input and display it. We had to create a popover fragment view in our view folder. We also had to create a “css” folder in the same level as our controller and put a “style.css” file for our custom styling. We added skills such as fallback and created a Speech-To-Text feature to enhance user experience. Because the code for the chatbot is part of a larger code base for an app already deployed, I won’t be able to publish a GitHub link. Happy coding!
To see my other projects, you can check my personal website, GitHub page and Linkedin Page:
https://ya332.github.io/
https://github.com/ya332
https://www.linkedin.com/in/yigit-alparslan/
