The idea of this blog post is to show how to extend the webchat.js and store some info on the SAP Conversational AI memory during its creation.
The steps are shown here they do not cover the Bot creation on the SAP Conversational AI. At the end of the blog post, there is a link for a video where I quickly create a Bot and do all the steps described here.
Here is the list of the steps to build your webchat.js:
I've created a simple video with the steps and a GitHub repository with the sources.
Github: https://github.com/eddiedu/test-bot
Youtube: https://www.youtube.com/watch?v=D95PeY8jV2s
Observation:
This method will run only one time per Bot session, once your browser has the cookie the initChat and updateMemory won't run again. If you need to run it every reload or any other event you'll need to find another moment that best suite your needs.
You can also check on the Webchat documentation, https://cai.tools.sap/docs/concepts/webchat, the section "Bot memory management", this event is implemented without any modification on the webchat.js and it is executed every message. In my case, it won't help, because the first conversation the memory is not updated yet.
Important:
Some sensitive information as the Developer Token, User Slug and Bot Slug are exposed in this way, so you should encapsulate these calls on a Service that is already authenticated with your app/portal.
Hope this helps you.
Thanks and best regards,
Eduardo
The steps are shown here they do not cover the Bot creation on the SAP Conversational AI. At the end of the blog post, there is a link for a video where I quickly create a Bot and do all the steps described here.
Here is the list of the steps to build your webchat.js:
- Clone from the GitHub repository https://github.com/SAPConversationalAI/Webchat
- Import the dependencies and build to check if everything is ok:
- npm install
- npm run build
- The build should result like this:
- Now that everything is working properly, you can start to modify the sources.
- In this case, we will modify the src/Containers/App/index.js at the moment that it is writing the cookie on the browser.
if (credentials) {
Object.assign(payload, credentials)
} else {
this.props.createConversation(channelId, token).then(({
id,
chatId
}) => {
storeCredentialsInCookie(chatId, id, preferences.conversationTimeToLive, channelId)
initChat(chatId)
updateMemory(chatId)
})
}
- In order to be able to update the memory, we need first call the API to start the chat. This is necessary because until you begin a conversation you will not be able to do any changes on its memory. Here is an example of an ajax call with JQuery to send one first message.
https://cai.tools.sap/docs/api-reference/?python#dialog-endpoints
function initChat(conversationId) {
var dev_token = "DEVELOPER TOKEN";
var url_post = "https://api.cai.tools.sap/build/v1/dialog";
$.ajax({
url: url_post,
type: 'post',
headers: {
"Authorization": "Token " + dev_token
},
data: {
"message": {
"content": "Hello SAP Conversational AI",
"type": "text"
},
"conversation_id": conversationId
},
success: function(data) {
console.log(data);
},
error: function() {
alert("Error");
}
});
}
- Now we are able to update the memory. To update the memory we will call another API provided by SAP Conversational AI. Here we will do another ajax call with JQuery.
https://cai.tools.sap/docs/api-reference/?python#update-a-conversation
function updateMemory(conversationId) {
var url = "PUT https://api.cai.tools.sap/core/v1/users/${USER_SLUG}/bots/${BOT_SLUG}/versions/v1/builder/conversation_states/" + conversationId;
$.ajax({
url: url,
type: 'PUT',
headers: {
"Authorization": "Token DEVELOPER TOKEN"
},
data: {
"language": "pt",
"merge_memory": true,
"memory": {
"user": {
"id": "12345",
"name": "Iron Man"
}
}
},
success: function(data) {
console.log(data);
window.tokenLoad = true;
},
error: function() {
alert("Error");
}
});
}
- After the modifications, you need to build the Webchat again
- Copy the webchat.js to your application and use it instead of the original one.
<script src="webchat.js"
channelId="XXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXX"
token="XXXXXXXXXXXXXXXXXXXXXX"
id="cai-webchat"
></script>
- In the end, you should get an answer like this:
I've created a simple video with the steps and a GitHub repository with the sources.
Github: https://github.com/eddiedu/test-bot
Youtube: https://www.youtube.com/watch?v=D95PeY8jV2s
Observation:
This method will run only one time per Bot session, once your browser has the cookie the initChat and updateMemory won't run again. If you need to run it every reload or any other event you'll need to find another moment that best suite your needs.
You can also check on the Webchat documentation, https://cai.tools.sap/docs/concepts/webchat, the section "Bot memory management", this event is implemented without any modification on the webchat.js and it is executed every message. In my case, it won't help, because the first conversation the memory is not updated yet.
Important:
Some sensitive information as the Developer Token, User Slug and Bot Slug are exposed in this way, so you should encapsulate these calls on a Service that is already authenticated with your app/portal.
Hope this helps you.
Thanks and best regards,
Eduardo
- SAP Managed Tags:
