Creating ChatBot using Dialogflow and React Redux…

Hi Guys!! Hope everything is going fine,Today I am going to discuss how to create chatBot using DialogFlow and React Redux,

So, to start our discussion we should know the following things:

1. What is ChatBot ?
2. What is DialogFlow ?
3. What is React Redux ?
4. How to create an intent in DialogFlow ?

1.What is ChatBot ?

A Chatbot is an artificial intelligence (AI) software that can simulate a conversation (or a chat) with a user in natural language through messaging applications, websites, mobile apps or through the telephone. A chatbot is often described as one of the most advanced and promising expressions of interaction between humans and machines.

2. What is DialogFlow ?

Dialogflow (Previously known as API.AI) is where the magic happens. It works on natural language processing and backed by Machine Learning . At Dialogflow the whole ‘conversation’ take place. Dialogflow is backed by Google and runs on Google infrastructure, which means you can scale to millions of users.

3. What is React Redux?

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently. React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

4. How to create an intent in DialogFlow?

To start with DialogFlow first we have to google DialogFlow and open the first link then the DialogFlow page opens.

DialogFlow Front Page

After that click on SignUp for free after that click on Signin with google.Signin with your google account:

DialogFlow SignUp Page

After that you will see the Homepage ,on the left corner click on create new agent. Give a name to the new agent after that click on create.The following screen appears:

DialogFlow Dashboard

After that click on Intents ,Now you can teach the chatbot at what question what will be the answer of the chatbot, you have to specify the question in training phase input field .For setting the answer of the corresponding question we have click on add response button after that select text response and finally have to type the answer in text response input field.When you are complete with all the question and answer setting give a name to the intent at top and click on save .

Intent Creation in DialogFlow

When it is saved you can test your chatbot at the ‘try it now’ on the right side,when you get the message from the bot click on Diagnostic Info button ,you will see the json format of the request and response of that conversation ,This will be the response structure we are going to get when we are using api-ai-javascript package to communicate with DialogFlow. So now our agent configuration is complete ,Now to use that agent inside our code we have to click on the setting button at the left top ,scroll down and we will see the Client Access Token,this is the token we are going to use to communicate with the our agent inside our code.

Detail of the agent created

So,let’s together start creating our first chatbot using Dialogflow and React Redux

So inside your visual studio code type npm create-react-app <Project name> then a project folder gets created, first we will clear the files namely App.js and Index.js inside src folder, and create another file named chat.js inside src. So before starting coding we have to install several dependencies like redux, react-redux, api-ai-javascript and milligram.api-ai-javascript is a npm package that interact with dialogflow to get the chatbot response , intents etc. Milligram is the styling package which gives very simple styles to our component without any extra class, actually I want to keep our application simple and small.To install those dependencies we will write :

npm i redux react-redux api-ai-javascript milligram

in the terminal ,Now,As all the dependencies required is installed ,Let’s start coding so our first file will be index.js:

Index.js

In Index.js we require React,ReactDOM,App from App.js ,Provider from react-redux ,store from chat.js and milligram . Provider from react-redux allows the states, which are stored in store to be accessible by all other components present in the root component of the application(App.js),and milligram is used for styling our application.Now let’ focus on chat.js:

Chat.js

In Chat.js, we have imported ApiAiClient from ‘api-ai-javascript’, applyMiddleware & createStore from redux. ApiAiClient actually communicate with the DialogFlow using the client access token and applyMiddleware is used to apply middleware and createStore is used in the creation of store.Now let understand the code line by line,const accessToken is the const that is storing the client access token of our agent created by us. We are creating a instance of ApiAiClient called client inside which we are passing the accessToken.Now I hope you people know the basics of redux ,we have a dispatcher,an action,store,reducers etc in redux,So sendMessage( ) is the dispatcher which dispatches action type and action payload , action type=ON_MESSAGE and action.payload is the object having two values text and sender.So where from this text is coming it is actually coming from a middleware called messageMiddleware , middleware actually works between the dispatcher and reducer when dispatcher is dispatching an action, reducer is getting the dispatched action , So when messageMiddleware get the dispatched action from dispatcher it is checking the action-type.If action_type is ON_MESSAGE ,the dispatcher takes the text parameter from action-payload and send it to the client,client then communicate with the dialogflow using TextRequest ( ).When the client is getting response it again dispatch the sendMessage dispatcher where the text parameter is the (response .result.fulfillment.speech)according to the json response structure and sender parameter is bot. Now reducer takes two parameter the initial state and action so reducer checks the action type,if the action type is ON-MESSAGE it will add the action payload in the state and will update the state. Finally a store named store is created by using createStore( ) function:

store=

createStore (messageReducer,applyMiddleware(messageMiddleware))

So Now if we see that sendMessage function is an action dispatcher means a action must have to be performed for calling the dispatcher ,so to create a action we have to create a input field where on type text on that field the sendMessage function will be called , So let’s see the App.js file :

App.js

So in App.js file we imported connect from react-redux to connect react with redux and sendMessage function from chat.js. As App.js is wrapped by Context Provider ,App component can access the state present inside the store. MapStateToProps takes the state and store it as a props with name feed,now inside render method we are destructuring feed and sendMessage from props .Finally we are mapping through feed and rendering text in the unordered list tag. Below the unordered list there will be input field onKeyDown of which sendMessage will be called with (e.target.value) as the text parameter of the function, after that text parameter will go to middleware. Middleware will take the text and will send it to the client which will communicate with the dialogFlow to get the corresponding answer of that text and will return a response to the middleware.Then middleware will again call the sendMessage function and will send the response as the text parameter and bot as sender parameter of the function to the reducer.Finally it will be received by reducer and updated.Thus Hurry our chatbot is ready to communicate with us:

Our Chat Bot

So our chatBot is ready , I am leaving my github link down below as a reference of codebase

CODE:

Yudhajitadhikary/ChatBot_Blog

these are really cool stuff .I always encourage you people to try new things out using React and DialogFlow .

Happy Coding…..:)