An approach to SAS Portal in Viya: Adding a chatbot to your portal page

In the previous articles in this series, you have seen how you could add components using SAS Visual Analytics SDK and SAS Content SDK. There is another SDK provided by SAS that you can use in your portal page: SAS Conversation Designer SDK.

In this article, you will see how you can add a chatbot to the custom portal we have created throughout the different articles. Other articles in the series are:

An approach to SAS Portal in Viya: Introduction
An approach to SAS Portal in Viya: Adding SAS Visual Analytics content
An approach to SAS Portal in Viya: Adding SAS Content navigation
An approach to SAS Portal in Viya: Navigating and displaying report
An approach to SAS Portal in Viya: Adding an application bar and authenticating
An approach to SAS Portal in Viya: Adding a chatbot to your portal page (this article)
An approach to SAS Portal in Viya: A landing page for everyone
An approach to SAS Portal in Viya: Implementing a backend server

What is SAS Conversation Designer?

SAS Conversation Designer provides the necessary components to build custom chat bots using SAS Viya. Using SAS Conversation Designer, you can create dialogues, intents, utterances, and entities. When grouping these together, the chat bot can identify a topic using Natural Language Understanding techniques and provide an answer using Natural Language Generation and Machine Learning. In a few hours, you can build a powerful bot which can then be consumed by a web application. How it can be done is the topic of this article.

If you want to know more about SAS Conversation Designer, please refer to the following articles:

How to install SAS Conversation Designer SDK?

When using SAS Conversation Designer SDK, you have two installation options:

Using npm package
Using Content Delivery Network (CDN)

Both techniques are described in the documentation. For the portal-like application we are building through the articles, we will use the npm package. This is the exact same technique that I described when using the SAS Content SDK or SAS Visual Analytics SDK. We will start from the stage we left the project at the end of the last article. If you have not followed along with the series, and you want to start from here, you can find the latest snapshot of the code here.

Open the project in Visual Studio Code and open a new terminal inside Visual Studio Code.

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

In the new terminal, type the following command to install the SDK package in the project:

npm install @sassoftware/conversation-designer-components

When done, create a new folder under public/assets folder and name it: conversation-sdk.

When the folder is created, you can execute the following command to copy the content of the package in the assets folder. This is required because Conversation Designer SDK doesn't support ES6 imports.

cp -r ./node_modules/@sassoftware/conversation-designer-components ./public/assets/conversation-sdk

You can now edit the index.html file located under public folder and add the following script tag below the ones for SAS Visual Analytics SDK and SAS Conversation Designer SDK.

<script async src="assets/conversation-sdk/conversation-designer-components/conversation-designer-components.js"></script>

You are done with the setup. The SAS Conversation Designer SDK is now available to the portal application and can be used.

How to add a chatbot to the portal page?

It is now time to add the chatbot to our portal page. Since the beginning of the series of articles, you may have noticed there was some empty space left in the bottom right corner of the page.

This location is handled in the right drawer component. So, open the RightDrawer.js located under /src/components.

When done, add the following code as a placeholder for the chatbot:

<Box sx={{ minHeight: "30vh", maxHeight:"30vh", overflow:"auto"}}>

<sas-chat
url={vaInfo.url}
botUri=""
authenticationType="credentials"
connectorName="ChatBot_Portal">
</sas-chat>
</Box>

Let me explain the code:

The Box tag is a wrapper tag which defines the space available for the chatbot. The overflow is set to auto to allow scroll bars to appear when needed.
The sas-chat is provided by SAS Conversation Designer and requires a few parameters:
- url: defines the URL of the SAS Viya environment. In our case, the URL information is stored in the constants.js file which is already imported at the top of the file.
- botUri: defines the internal reference of the conversation designer project. You will see in the next section where you can find the information.
- authenticationType: can be set to credentials or guest. As the other elements in the portal are using credentials, we will use the same.
- connectorName: is the name which will be stored in the logs to identify the application. You should ideally define a specific connector name for each application to ease the log analysis.

Where can you find the botUri?

Identifying the botUri can be done easily using a browser and Visual Studio Code.

Open your browser of choice, for example Chrome
In the URL, type the same url as the one defined for vaInfo.url parameter followed by this endpoint: /naturalLanguageConversations/bots
Press Enter
When prompted, enter your username and password for SAS Viya
You should get a JSON response from the REST API endpoint
Copy the complete content of the browser window
Open a new file in Visual Studio Code
Paste the JSON response in that new file
Make sure that the language mode is set to JSON in Visual Studio Code
You can then auto format the page as described here
Look for the name of your bot in the JSON file

In the example below, I've been looking for a bot named: Retail Insights Sample Bot

As depicted above the bot uri can be found in the GET link for self.

You can copy the full uri and paste it into the sas-chat element.

Your code should look like this:

You can now save the file and check the result on the portal page.

Demonstration

(view in My Videos)

Make the component more dynamic

At this point the application is working nicely, you can nevertheless refactor the RightDrawer component. As you may have noticed, the component has some hardcoded values for the three components included in it.

We will transform the code to use different states for each component.

Refactoring was not crucial at this point of the project, but it will be easier in the future to pass extra information to the pane or to populate object information from another source of information like user preferences.

Conclusion

Adding a chatbot is made easy thanks to the SAS Conversation Designer SDK. You can define directly the sas-chat tag in the HTML code, or you can use JavaScript to define dynamically the chatbot. You have the choice between the two options. While in a vanilla JavaScript application, I would recommend using the JavaScript approach over the HTML tags. In a React application, I would opt for the HTML tag version. As you can see after refactoring, we have a component which uses information from a state, which means that each subcomponent can be updated independently from the others.

For the next article in the series, I will show how you can store user preferences as the portal will be used by multiple users. Check back for the additional articles in the series. The code at the end of this blog is available here.

An approach to SAS Portal in Viya: Introduction
An approach to SAS Portal in Viya: Adding SAS Visual Analytics content
An approach to SAS Portal in Viya: Adding SAS Content navigation
An approach to SAS Portal in Viya: Navigating and displaying report
An approach to SAS Portal in Viya: Adding an application bar and authenticating
An approach to SAS Portal in Viya: Adding a chatbot to your portal page (this article)
An approach to SAS Portal in Viya: A landing page for everyone
An approach to SAS Portal in Viya: Implementing a backend server

Find more articles from SAS Global Enablement and Learning here.