Click here to Skip to main content
14,297,293 members

Automated Chat Agent in ASP.NET using SIML as the backend Chatbot Language

Rate this:
5.00 (9 votes)
Please Sign up or sign in to vote.
5.00 (9 votes)
1 Feb 2015CPOL
Exploring the semantics behind an Automated Customer Service Agent in an ASP.NET website.

Introduction

These days automation has found itself a place in every trend of Business and Development. And one such automation deals with automated online conversational entities. There are a lot of services providers that claim to have made automated live chat a snap. The only problem with the existing system of automated live chat is that they aren't backed up by any rock solid development tool or programming language that a developer (like you and/or me) can make use of to tweak the responses generated by these systems.

The idea behind this article is to test drive the possibility of having an Automated Chat Assistant in an ASP.NET website that uses an intelligent back-end Chatbot Language.

Before getting high

If you are to use the code or project associated with this article there are certain things you'll have to be aware of before taking a shot at this in your ASP.NET website.

  • Loading of a Chatbot knowledge base entails a bit of system memory.
  • Usage is recommended only if you have access to a personal Windows Server or Azure
  • I humbly encourage developers running their ASP.NET website via a shared-hosting environment to check with your service provider if you are allowed to use a Library that may consume 10 or more megs of system memory.
  • The hack-ish approach of this article may or may not be suitable for production use.

Throughout the tutorial I might use the terms like (agent, assistant, solution) and (virtual, automated) interchangeably.

Getting started

Steps that we are going to take to make things work.

  • Create a simple ASP.NET Empty Web Application.
  • Add a Default.aspx web form to it.
  • Import the required NuGet package.
  • Add all the essential resources (image files) to a separate folder in our project.
  • Create a Service URL that will act more or less like a REST API URL
  • Modify the code in Default.aspx.cs and Run the Project. 

So here it goes gentlemen. Launch Visual Studio and click on File->New->Project.. and under Templates select Web->ASP.NET Empty Web Application. Give your project a name. For this tutorial I've named my project "Automated-Live-Chat".

Next, we'll add a Web Form to the project. This Web Form will be our default web page. To which we'll later add our Automated Live Chat agent. To add a Web Form right click the Project name under Solution Explorer and select Add->New Item..->Web Form and name the file Default.aspx.

Now that we've added the Web Form. We'll import the required NuGet package, click on Tools->NuGet Package Manager->Package Manager Console and type

PM> Install-Package Syn.Chat

This will add a reference to the Syn.Chat library that we will be making extensive use of in this tutorial. The library we've just imported will provide us with the following crucial elements for our Automated Chat agent.

  • JavaScript for deployment and interaction with the SIML interpreter (back-end Chatbot Architecture)
  • Html elements that will automatically be inserted into the web page.
  • An emulated REST API URL for interacting with our Agent.
  • A ChatAgent class to customize the core (cosmetic) attributes of our Live Chat Agent.
  • A hassle-free means of connecting the internal Chatbot system to the Automated Live Chat Agent.

Importing the resource files

The chat panel that will be displayed on our web page is going to have 2 states.

  • Minimized

Image 1

  • Maximized

Image 2

Taking a look at the above states of the Chat Panel, it's apparent that we'll have to import a few image files into our Project. For this create a new folder by right clicking on the Project name under the Solution Explorer and selecting Add->New Folder. Name the folder "Assistant". In this folder we'll now add a number of image files required by the Chat Panel. 

Firstly download the Resource Files I've made available with this article and extract them to any desired folder in your machine. In Visual Studio right click the Assistant folder, we've just created, and click Add->Existing Item.. and select all the files you've extracted (except for the .psd Photoshop files that I've added just to give you an idea as to how to create custom avatars in Photoshop)

The Assistant folder now has all the required image files plus an SIML Package file.

Creating the Service URL - The Hack

Every time a Chat Request is sent to our Live Chat agent the message will be passed as parameters to a URL that will point to a Web Form in our Project. The Web Form will then process the message part and return a response with the proper headers. The same URL will also serve the purpose of sending the required JavaScripts, CSS and HTML elements to the browser whenever the Default.aspx page is loaded.

Right click on your Project name under the Solution Explorer and click Add->New Item..->Web Form. Name the file ChatService.aspx. Right click this newly created Web Form file and select View Code. Replace the code within this file with the following

using System;
using System.Web;
using Syn.Chat;

namespace Automated_Live_Chat
{
    public partial class ChatService : System.Web.UI.Page
    {

        private static readonly ChatAgent Agent;
        static ChatService()
        {
            //Change the "rootUrl" variable to your Website's domain name
            var rootUrl = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority);
            Agent = new ChatAgent
            {
                ServiceUrl = rootUrl + "/ChatService.aspx", 
                ResourceUrl = rootUrl + "/Assistant", 
                Name = "Judi",
                Title = "Automated Live Chat",
                Intro = "Hi I am Judi, I am here to help you with your questions.",
                InputText = "What can I help you with?",
                Footer = "Footer",
                FooterLink = "http://www.example.com",
                RestartId = "restart",
                PackageFileName = "Package.txt"
            };
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            Agent.Process(Request, Response);
        }
    }
}

Time to demystify the above code.

We start by using the static constructor for the ChatService page object. Inside the static constructor we create and initialize a new ChatAgent instance. The static constructor is opted to ensure that our ChatAgent object will be initialized only once per session.

  • ServiceUrl - Main URL that the ChatAgent will use to interact with the underlying Chatbot.
  • ResourceUrl - Location to the directory where we've kept the required resource files (images and SIML package)
  • Name - Name of your Live Chat agent.
  • Title - Text displayed immediately below the name of the Agent.
  • Intro - Initial message from the Chat Agent to the user.
  • InputText - Default watermark-text that is displayed within the Input box.
  • Footer - Footer Text
  • FooterLink - Link the browser will navigate to when the Footer text is clicked.
  • RestartId - Get URL variable's parameter value used to restart the Chat Agent. (Useful when a new Knowledge Base is uploaded). To restart you Virtual Chat Agent all you'll need to do is call the ServiceUrl and pass the RestartId as a value for the Get Parameter. Example www.example.com/ChatService.aspx?Get=RestartId
  • PackageFileName - Name (with extension) of the SIML package file within the specified ResourceUrl directory.

 

protected void Page_Load(object sender, EventArgs e)
{
    Agent.Process(Request, Response);
}

This is where the magic happens. Every time the ChatService.aspx page is about to load the page Request and Response objects are passed to the ChatAgent as arguments. The agent then processes the Request and returns a Response with a proper header. These responses include (but is not limited to):

  • JavaScripts
  • Cascading Style Sheets
  • HTML elements

Adding a Knowledge Base (KB) to your Chat Agent

So we've finally hit the million dollar question.

As the NuGet package we've imported into our Project is centered around SIML. We'll have to make use of the Chatbot Studio for development of the Knowledge Base and later export the Package into our project's Assistant folder.

For this I've painstakingly put together a separate article on SIML Chatbot development. You'll have to go through the article and create a simple knowledge base using Chatbot Studio. Once you've created your Knowledge Base theres 1 nifty little trick you'll have to do.

Every knowledge base package file you export using Chatbot Studio gets suffixed with the .simlpk extension. Since access to unknown extensions is forbidden in an ASP.NET environment you'll have to rename the extension to .txt. To do so (while exporting your Knowledge Base) enclose the name of your Package (with the .txt extenion) within double quotes and click Save.

Image 3

Once you've exported the SIML package. Right click the Assistant folder (in Visual Studio) Add->Existing Item.. and select the exported file.

The final touch

Now that our project is ready theres this 1 last thing that we'll have to do to breathe life into the web page. Double click the Default.aspx and replace the code with the following.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Automated_Live_Chat.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Automated Chat [SIML]</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <script type="text/javascript">
            (function () {
                var scriptElement = document.createElement('script');
                scriptElement.type = 'text/javascript';
                scriptElement.async = true;
                scriptElement.src = '/ChatService.aspx?Get=Script';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(scriptElement);
            })();
        </script>
    </form>
</body>
</html>

The above code pretty much explains it all. The JavaScript calls the ServiceUrl and passes "Script" as a value for the Get parameter. The Web Form ChatService.aspx upon receiving the aforementioned parameter will return the JavaScript to the browser that will automatically add a Style Sheet along with the HTML elements that make up the cosmetics of your Live Chat agent.

Running the project

Interestingly, we are done with our coding, copying, extracting and what not. We'll go ahead and run the project. To do so, press F5 and you should see the Automated Chat Agent. If for some reason you don't then refresh the page.

Screenshot 1

Image 4

Screenshot 2

Image 5

External Resources

  • NuGet Package - The Class Library used in this article.
  • GitHub Respository - Useful if you plan to use a large SIML Knowledge Base in your Project.
  • Live Demo - An Automated Chat Agent in the official SIML website.

Points of Interest

While trying to disect the cosmetics behind the Chat Panel, in an attempt to check if any external resources were being used by the Virtual Chat Agent, I learnt that the Chat Agent indeed uses Google APIs jQuery and Google APIs jQuery UI.

The knowledge base I've used in this article is an empty knowledge base. It just echoes back the user input. On a side note, I ain't an ASP.NET pro and I firmly believe that theres gotta be a better hack than using a Web Form as the service URL. WCF would prolly be a better way to go about? either way I'd rather stick with a simpler approach instead of introducing a complex WCF service that might not work as expected for many readers.

History

Initial Release - Saturday, 31st of January 2015

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DaveMathews
United States United States
No Biography provided

Comments and Discussions

 
QuestionWhat is the resource url here and root url Pin
Member 141550612-Apr-19 0:36
memberMember 141550612-Apr-19 0:36 
QuestionGetting error while running Default.aspx Pin
Member 134978557-Mar-19 23:12
memberMember 134978557-Mar-19 23:12 
Questiongetting java script error Pin
veerendraj1124-Jan-18 23:22
memberveerendraj1124-Jan-18 23:22 
QuestionNot able to get responce back Pin
veerendraj1128-Dec-17 1:53
memberveerendraj1128-Dec-17 1:53 
AnswerRe: Not able to get responce back Pin
DaveMathews2-Jan-18 22:30
memberDaveMathews2-Jan-18 22:30 
QuestionItem Element within pattern is not working (multiple questions with single response) when SIML package is referred in ChatService.cs page Pin
Member 1077958612-May-17 2:26
memberMember 1077958612-May-17 2:26 
Questioncan't install syn.chat Pin
Member 1295002114-Jan-17 8:41
memberMember 1295002114-Jan-17 8:41 
AnswerRe: can't install syn.chat Pin
DaveMathews16-Jan-17 12:58
memberDaveMathews16-Jan-17 12:58 
Questioncant install syn.chat and syn.bot from nuget Pin
atulonweb@gmail.com21-Jul-16 0:21
memberatulonweb@gmail.com21-Jul-16 0:21 
AnswerRe: cant install syn.chat and syn.bot from nuget Pin
DaveMathews3-Aug-16 6:05
memberDaveMathews3-Aug-16 6:05 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun1-Feb-15 18:46
memberHumayun Kabir Mamun1-Feb-15 18:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 1 Feb 2015

Stats

35.8K views
4.2K downloads
19 bookmarked