Chatbot with Angular 5 & DialogFlow

I have seen many posts on how to build a chatbot for a wide variety of collaboration platforms such as Slack, Facebook Messenger, HipChat … So I decided to build a chatbot from scratch to production using Angular latest release v5.0.0, DialogFlow, and AWS.

Here is how our chatbot will look like at the end of this post:

Note: This project is open source and can be found on my Github.

To get started, create a brand new Angular project using the Angular CLI:

1 – Chatbot Architecture

We will split out chat app in different components and each component will be able to communicate with others using attribute directives:

2 – Message Entity

Create an empty class by issuing the following command:

The message entity has 3 fields:

3 – Message List Component

Generate a new component:

Now we can display the messages by iterating over them:

The code of this component should look like this:

Note the usage of @app/models instead of the relative path, its called alias. To be able to use aliases we have to add the paths properties to our tsconfig.json file like this:

Note: I also added @env alias to be able to access environment variables from anywhere in our application.

4 – Message Item Component

Let’s build a component that will simply display a message in our message list:

In message-item.component.html, add the following content:

The code of the component should look like this:

5 – Message Form Component

Let’s build the form that will be responsible for sending the messages:

In the message-form.component.html, add the following content:

And it’s corresponding typescript code in message-form.component.ts:

The sendMessage() method will be called each time a user click on send button.

That’s it! Try it by yourself and you will see that it’s working.

At this moment, you wont get any response, that’s where NLP comes to play.

6 – NLP Backend

I choose to go with DialogFlow.  Sign up to DialogFlow and create a new agent:

Then, enable the Small Talk feature to have a simple chitchat:

Note: You can easily change the responses to the questions if you don’t like them. To go further you can create your own Intents & Entities as described in my previous tutorial.

Copy the DialogFlow Client Access Token. It will be used for making queries.

Past the token into your environments/environment.ts file:

7 – DialogFlow Service

Generate a DialogFlow Service which will make calls the DialogFlow API to retreive the corresponding response:

It uses the DialogFlow API to process natural language in the form of text. Each API request, include the Authorization field in the HTTP header.

Update the sendMessage() method in MessageFormComponent as follows:

Finally, in app.component.html, copy and past the following code to include the message-list and the message-form directives:

8 – Deployment to AWS

Generate production grade artifacts:

The build artifacts will be stored in the dist/ directory

Next, create an S3 bucket with AWS CLI:

Upload the build artifacts to the bucket:

Finally, turns website hosting on for your bucket:

If you point your browser to the S3 Bucket URL, you should see the chatbox: