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 my Github.

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

ng new smartbot — style=scss

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:

ng generate class models/message

The message entity has 3 fields:

3 — Message List Component

Generate a new component:

ng generate component components/message-list

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:

ng generate component components/message-item

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:

ng generate component components/message-item

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.

ng serve

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:

ng generate service services/dialogflow

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:

ng build — env=prod

The build artifacts will be stored in the dist/ directory

Next, create an S3 bucket with AWS CLI:

aws s3 mb s3://smartbot-mlabouardy

Upload the build artifacts to the bucket:

aws s3 cp dist/ s3://smartbot-mlabouardy — recursive — grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

Finally, turns website hosting on for your bucket:

aws s3 website s3://smartbot-mlabouardy — index-document index.html

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