Building a simple web interface for your chatbot
In Chatbot Anatomy in SAS Conversation Designer, Teri Patsilaras introduces the basic concepts used in SAS Conversation Designer. In this article, I will explain how you can deploy a custom client for your chatbot. Even though you don't have to be a web developer to follow this post, having some basic knowledge of web programming will surely help. As usual, I will do my best to make it understandable to those who are new to web developments.
When you start building a web application, you have two approaches:
- Create an application from scratch.
- Reuse an existing application that you or somebody else wrote.
We will go for the second option. SAS has created a simple application to interact with chatbots.
This is already a good start. The application makes use of NodeJS and Express framework. I will not start a tutorial on NodeJS and Express. There are plenty of good tutorials and books available on the web. What you should know is that NodeJS is a JavaScript runtime and Express is web framework for NodeJS. If you are new to web development, you might be asking yourself what it means. So, to make a long story short, you will be writing JavaScript, HTML and CSS to build the web interface and JavaScript will also be used on the backend. It also means that NodeJS is the only component that should be installed. As a result, it will be easy to setup a development environment and it will be as simple to setup the production environment. If you combine NodeJS with Git, it is really easy to deploy an application on premise or on the cloud. NodeJs can be considered as a nice companion to your SAS Viya 4 environment when it comes to deploy your custom web applications.
Why do you need a client for your chatbot?
SAS Conversation Designer is a platform in which you can design and test the chatbot. Once development is complete and you are ready to expose your bot to your audience, it needs to run on a client. This client is what you will provide to your client to interact with the chatbot and the user will never even enter SAS Conversation Designer. In our case, we will be deploying this client interface via the web.
Configuring the development environment
To prepare your environment, you should install NodeJS and Git on your machine.
To write code, you need a text editor. Even though Notepad, Textpad or Notepad++ will be enough, I recommend using Visual Studio Code as it brings a lot features that you will most likely use when building custom web applications or writing code (not only for web developments) in the future.
With these components installed, you are ready to build a custom application to interact with your chatbot.
What else do you need?
The purpose of this post is to explain how to build a web application to interact with a chatbot developed using SAS Conversation Designer. The development of the chatbot is not part of this article. I will assume that you already have a chatbot. In this case, I have one named "Auto Insurance Policies". If you don't have a chatbot available on your environment, you have to design one before you can go further.
Configuring the custom client
The first step will be to clone the repository provided by SAS as it will be our starting point. On your development environment, open a terminal or a DOS prompt and navigate to the location where you want to create your application. For example, on my environment:
C:\Users\sbxxab\projects
Under that location, execute the following command:
git clone https://github.com/sassoftware/conversation-designer-sample-connector.git
This command will download the content of the repository to your machine.
When done, navigate to the newly created folder called conversation-designer-sample-connector.
Under that location, execute the following command:
npm install
This command will install the needed components to run the NodeJS application.
When you are done, you should update the file chat.js located under javascript folder.
In that file, you should change the following lines:
const baseURL = "REPLACE_THIS_VALUE";
const botId = "REPLACE_THIS_VALUE";
const revisionId = "REPLACE_THIS_VALUE";
const sasUserId = "REPLACE_THIS_VALUE";
const sasPassword = "REPLACE_THIS_VALUE";
- baseURL is the address used to access the SAS Viya environment
- botId is the bot URI
- revisionId is the revision URI
- sasUserId is the user used to connect to SAS Viya
- sasPassword if the password for the sasUserId
Note: It is not ideal to have the username and password hardcoded, but we will provide an alternative solution a bit later in the article.
After editing, the code should be similar to this:
const baseURL = "https://live.lts.gel.race.sas.com";
const botId = "359ab223-e180-4d87-a03e-ea21462c795c";
const revisionId = "375f2c3e-d5ad-4946-868f-4c701f34ec52";
const sasUserId = "gatedemo001";
const sasPassword = "lnxsas";
If you want you can also adapt the following lines:
const userId = "myUserId";
const userName = "myUserName";
const connectorName = "mySampleConnector";
Even though it is not mandatory, I would recommend to change at least the connectorName to more easily identify the records in the bot History tab in SAS Conversation Designer.
But wait, you might ask yourself how you can get the botId and the revisionId of your chatbot. I have to admit it is a bit tricky in the current release as there is currently no user interface to retrieve the information. The chatbots will be available in SAS Environment Manager in a future release which will make it easier to collect the needed information. For the time being, you should open up your chatbot in SAS Conversation Designer. When done, open the Developer Tools of your web browser and click on the Try it Now button.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
While the Try it Now window opens up, you should see the following information in the Developer Tools. At the top of the list, you will find a botID (see picture below). Click on the ID to open the request viewer.
In the request viewer, you see the ID and the publishedRevisionID.
You can copy these URIs and fill the botId and revisionId variables with the information.
When done, save the file.
Testing the custom client
Thanks to the code in the repository and the edits that we have done, we can now start the NodeJS server which hosts the custom client.
In the terminal or in the DOS prompt, navigate to the folder containing the application (if not yet in the folder). From that location, execute the following command:
npm start
The application will start and indicate that the server is running on http://localhost:3000
You can now test your chatbot.
Customizing the client
So far, the application is really simple but you can make it more appealing to the end-user eyes.
The first step will be to add a background image. In my case, I found a nice royalty-free picture.
After downloading the file, I created a folder named images under the project, copied the image to that location and renamed it to protection.jpg. It's now time to update the stylesheet to use that image as a background image for the site. Open the style.css located under stylesheet folder and edit the following section to reference the image:
html, body {
height: 100%;
margin: 0;
background-image: url("/images/protection.jpg");
background-size: cover;
}
After refreshing the browser, you should see the background image. While we are working on the css file, we can also tweak other elements.
For example, add a background color to the .mainContent:
.mainContent {
height: calc(100% - 3rem);
border: 1pxsolid#b0b8c3;
box-shadow: 00.25rem#b0b8c3;
max-width: 45rem;
margin: 0auto1.5remauto;
background-color: lightblue;
}
And change the color of the .mainTitle:
.mainTitle {
text-align: center;
color: white;
}
Refreshing the browser gives a more attractive layout to the application.
Securing the custom client
As mentioned earlier, the application uses hardcoded values for the user ID and the password. This is not ideal. With a few modifications to the chat.js file, it will be possible to prompt for user ID and password to enforce security.
The first step will be add some input fields to enter the user credentials and a Connect button to trigger the authentication. Open the index.html located in the views folder and add the following div right below the h1 marker.
<h1 class="mainTitle">Auto Insurance Company</h1>
<div class="authenticationInfo" id="authInfoDiv">
Please fill in your user and password:
<input class="userNameField" id="userNameField" placeholder="Your user ID">
<input class="userPasswordField" id="userPasswordField" type="password" placeholder="Your password">
<button id="connectButton">Connect</button>
</div>
Please note that while editing the file, you can also change the title to be more meaningful like in the code above. You can also adapt the content of the HTML head section and specify the same title. The title will then be displayed as the browser tab name.
Save the file.
So far, we have added the visual part, we need to now add the actions that will take place when the user will press the Connect button.
Open the chat.js file located under javascript folder. Within the chat.js file, change the variable definition for sasUserId and sasPassword. The code should be:
let sasUserId = "";
let sasPassword = "";
At the bottom of the file, the window.onload function needs to be adapted. Comment out the startSession() and add the following code:
// start a new chat session
//startNewSession();
let authInfoDiv = document.getElementById('authInfoDiv');
let connectButton = document.getElementById('connectButton');
let userNameField = document.getElementById("userNameField");
let userPasswordField = document.getElementById("userPasswordField");
connectButton.addEventListener('click', function (e) {
if (userNameField.value == "" || userPasswordField.value == "") {
alert("Please fill in the user ID and password field");
} else {
sasUserId = userNameField.value;
sasPassword = userPasswordField.value;
checkToken().then(() => {
if (authToken.length > 50) {
authInfoDiv.style.display = "none";
} else {
alert("The user could not be authenticated. Please enter valid user ID and password.");
window.location.reload(true)
}
startNewSession();
});
}
});
Save the file and refresh the browser. You should now see this:
After some interactions with the chatbot, your page might look like:
Conclusion
Using the application that is available on GitHub, you can quickly build and customize a client web application to interact with an existing chatbot.
With little web development knowledge, you can adapt the application's look and feel and also increase the security. The authentication is done through the SAS Logon Manager application. Which means that you can customize the authentication to the security needs.
What should you do next? The application can be deployed on the SAS Viya environment and be managed as any other SAS application. If you want to do this, I suggest you to look at my previous article.
