Javascript Chatbot From Scratch with React.Js [Part 2]

Key Takeaways

everyone wanted to build your very own chat bot from scratch but weren't quite sure where to start in part two of this series we're gonna go through exactly how to build your very own chat bot using react.js in reader now we're going to be covering a lot of stuff in this tutorial but specifically we're going to be covering three key things so first up we're going to be covering how to create a react.js app that allows us to showcase a chat bot - we're going to be connecting that react.js to our express back-end that we built in part 1 of this tutorial and last but not least we're going to improve a usability and the look and feel of this chat bot using CSS and some dynamic scrolling let's get to it in part 1 of this series we went through building an entire back-end API using nodejs and Express to handle our what's an assisstant API calls now in this part we're going to be going through how to create our front-end now because we're going to be working with react the first thing that we're going to do is create a reactor now we can do that by running the command NP X create react app and we're going to store all of our react components specifically all of our front-end components inside of a folder called client so we just type in client and hit run so this is going to create a new folder within our application and you should see it pop up here so you can see that that's done successfully once that's done we're going to install all of our dependencies they've min Italy tail all right so that's done now as I mentioned we're going to install our dependencies so there's a couple that we need to install now we can do that using the NPM I command and the first one that we're going to install is Axios so that's going to allow us to make requests to our back-end API then we also want to install redux this is going to help us working with our state or an application state we're going to install redux dev tools extension that's going to allow it more easily see our application state using the Chrome extension and then we're also going to install redux thunk and react read so these are just two additional libraries that help us work with redux when we're building react apps and we'll hit enter a little longer than a few minutes later okay so we can test out whether or not our react up is running successfully so we can just see they into client folder and then from here we can start our react up by just running NPM start now all things going well our react app should start on port 3000 and we should get a template react up showing up and you can see our react app has run successfully now at the moment our react app is just running by itself so we don't actually have a our back-end running now what we're gonna do is we're going to make a few changes to our package JSON file in our back-end API so that we can have both our front-end and our back-end running at the same time so we're just going to stop our react server by pressing command C and then we're going to step back into our back-end API folder so into our react chat folder and we're going to make a few changes here so the first thing that we're going to install is a library called concurrently as a dev dependency so this is going to allow us to looks like it's already in sod so because we've already got concurrently installed we're going to be able to use that particular library to run both our back-end and our front-end at the same time now what we do need to do however is make a few changes to our scripts up here so at the moment we've just got start and we've got server we're going to add two additional ones so one to run our client from here and want to run both of them at the same time so the first one that we're going to set up is our client so we can do that by just adding in a new script and in this case our client is going to be run using NPM start as per usual but we can access our client by using the prefix flag and typing in client so that should allow us to run our client so if we try that you can see that we're running our react up you know if we cancel that we're going to set up another script to allow us to run both of these at the same time so if we add in another script just call this one dev and we're going to use the concurrently command and then escape out of that then we're going to use NPM run server this is going to run this particular server command here so that's going to run node 1 so that we've got hot refreshing installed and then let's escape out of that and we're also going to run NPM run client perfect so this command is going to run the server and the client at the same time so this command and this script now we can test that out by just running NPM run dev up we need to save and all things going well we should have our react up running so that looks like it's all well and good you can see that fully refreshed and then we can go back over to the API calls that we had before and test those out as well so remember we had two API routes we had the one for our sessions and we also had the one for our specific messages so if we run the one for our sessions you can see that we've got a session ID we can take that over paste it back into here and you can see that both of our API and our react front-end running successfully now the next thing that we're going to do is clean up our react app so whenever we set up a new react up using the create react app command there's a lot of extra stuff that comes pre prepackaged or pre-installed so we're going to strip that back to really the essential components that we need for this particular application that we're going to be building so let's stop our servers and step into a client folder now within our client folder there's nothing there that we really need to remove but within source there's a bunch of stuff that we can potentially take out now the first thing that we're going to delete is our set up tests file we don't need that for now we also don't need our server work out of service worker J's file we can remove that as well we can remove this logo file we step into index j s there's a bunch of stuff we from here we can remove as well so we're going to remove our index dot CSS file a service worker import and last but not least this bit of code here and say that we're also going to delete our index dot CSS file our apt SAS file and from fjs file we're going to remove our logo import we're going to leave our app dot CSS file and then within this particular section here we're going to remove everything but our main div and we're just going to add in hello well there just to make sure it runs successfully when we do rerun it and from abcess that's why we're going to take all that out so I'm going to replace that with some custom CSS later on so now what we want to do is we want to make sure that our app still runs now that we've removed all of those components so let's try that two NPM run dev so our absolute running will script out a bunch of stuff now we can get on to the good bit and start building up our app the first thing that we're going to do is set up our folder structure so there's going to be three additional folders that we add to our source folder and this is going to contain all the stuff that we need for our front-end chatbot app so the first folder that we're going to create is one called reducers and let's create a folder there reducers basically tell us how to update our application state or the data within our application so all of those are going to be within there then we're also going to have a folder for our actions and actions are really our triggers and they can be triggered from our front-end and basically they go off and do something and then last but not least we're going to have our components so our components are really just the parts or the building blocks for our front-end app so might be a chatbot window in our case we're going to have a bunch of stuff within our chat component we're going to have our chat bot history we're going to have our input box and maybe some headings or we'll see when we get there so let's create our components folder perfect now before we go any further we should probably lay out exactly what it is that we're going to be doing now there's a bunch of stuff but let's write down a small to-do list and we'll go through that call it to do dot txt so the first thing that we're going to get done is we'll set up redux so this is basically going to help us manage our application state then we'll also set up our reducers and our actions so again our actions are really triggers that are initiated from a front-end and then our action will make a call to our reducer and our Reduce will basically determine how to update our application state then the third thing that we're going to do is we're going to set up our front-end so basically how our user interacts with our chat application now that we've done that we'll probably going to need to display the messages to the user we should also what else are we going to need to do so well as part of our chat we're also going to set up a chat queue and a queue is going to serve as basically a repository of all the different components of our chat so it's going to store add user chat components but also the responses that we get back from our chat bot so basically all then we need to do is really just display our chat queue to our front-end user so we're going to display our message we're also so we haven't actually dealt with our back-end API yet so remember there's two parts of our back-end API we need to get a session ID and then we need to make a call to the API to actually get that information or send our user message so we're going to need to get and handle session IDs then we'll also need to handle sending users message to the API then we're also going to need so if we've already added our users users message to the queue we're also going to need to handle adding our bots message to the queue so it's that what responses to the queue and last but not least we should probably do a little bit of formatting because right now stripped out all our CSS so it's going to look a little bit bland but we can probably Impa we not probably we can improve that really really easily just by adding a bit of CSS okay so the first thing that we're going to do is step into our app J's file and start laying this out so app.js file is going to be our main application file and from here we're going to basically import all of our components and potentially trigger some of our actions so it's good practice to add in a bit of documentation so I'm going to do that so up here we're importing add dependents so importing react and our CSS we also need to import Redux components eventually we're also going to import our chat component and we also need to connect application to redux so right now Redux isn't actually hooked up obviously we haven't set it up that we're going to eventually do that right inside of this div we've only got hello world so once we set up our chat component we're going to want to put our chat component inside that so let's just make a comment there so we remember to do that as well insert chat component here and while we're at it so this is not es6 syntax so let's just change this make it a little bit cleaner so constant up equals perfect right so reformatted that that's all looking good we can say that app just make sure it still works perfect no issues as of yet now what we're going to do is start setting up redux so redux has this concept of a store and basically our entire application state is managed through this store so you only need to do this once and then we're not really going to revisit this particular section again so let's create a store so store j/s and there's a few bits to this so the first thing that we're going to do is import our dependencies we'll also connect the application to redux dev tools so that's going to just make it a whole lot easier later on when we're working in chrome there's an extension that basically allows you to see that application state at any time makes it a whole lot easier we're also going to set up our initial State import the middleware that we need so that's where funk comes in it just helps build action creators we're also going to finally set up our store and export it so that we can use it everywhere we need it all right so the dependencies that we're going to import so there's a couple that we're going to install but don't fret again you're only doing this once so in this case we're going to import create store and apply middleware from redux then we're going to import funk from redux dunk and we're going to import combine reducers from reduces so combined reducers isn't actually defined yet but eventually we're going to declare that inside of our reducers index Tijs file it's basically going to take all of our reducers and put them into one state that we can manage cool so then we're going to connect our app to redux dev tools so we're going to import that dependencies well perfect well set up our initial state so in this case our initial state is just going to be a blank object and let's import our middleware for this we're going to use thunks oh if func just helps us build action creators and then we'll set up our store now to our create store function we need to import a bunch of stuff or just pass through a bunch of parameters let's just delete this sorry we don't need that we're going to pass through our reducers so in this case this is our combined set of reducers let's change the name for that combined reducers then we're also going to pass through our initial state and then we're going to use the composer with dev tools function and pass through our middleware and a last but not least we're going to export that store perfect that's looking all good for now alright then the next thing that we're going to do is set up an index J's file within our reducers and here we're going to import again we're going to import our dependencies we're going to import our reducers we're only going to have one in this case but if you wanted to extend this later on it's going to make it life a whole bunch easier and then we're going to export those cool so we're going to import our dependencies here so from here we're going to import our combine reduces function from redux so again this is going to allow us to condense all of our reducers together and pass it through as one component to our store so we're going to import that and we're going to import that from redux so now we're going to leave a blank and we're going to export it and we actually need to go back into our store and changes from combined reducers to combine reducers that's better alright so that's done now what we're going to do is actually hook this up to a app so in this case we're going to import our Redux components so here we're going to import a provider and our provider sort of acts like a wrapper around our application that allows us to hook into a store and we're going to import that from react redux we're also going to import our store which we defined in storage is we have an error there nope so we're going to import store store and then as I said we're going to wrap our entire application inside that provider so if we go to within our return function we're going to wrap it there and we just need to pass your our store perfect now all things holding equal we should be able to check out whether or not our application state has initialized hope we do have an error there let's just go back now we can check our application state so if when you refresh now now we can check out application state so if we scroll over okay it looks like we've got a bit of an error there and we haven't applied our middleware so if we go back into this function here and just type in apply middleware let's check that up perfect all right cool so our apps running it looks like we've got our state running that looks like a state is there we're all good cool so the next thing that we're going to start doing is let's actually take this off our list so we've set up Redux so if that's done now before we set up our reducers and actions let's actually set up at chat so let's move that up so this is just going to be a lightweight chat component to begin with and then we're going to fill it out so let's do that so inside of our components folder which is going to create a new folder and we're going to call it chat and then within that folder we're going to create a new file and again we're going to call that chat so now we're going to create a react component so we've got shortcuts inside of es code so we can just type in our AFC with an e and we've automatically got a lightweight component built up now what we want to do is we just want to start adding a few components of this or a few bits of text to this and we'll test it out within a front-end app so again we'll type in this is a chart component perfect and then what we can do is take this same component and bring it into our main app so remember how we had this placeholder here to import our chat component let's do that now so we can use the import chat or well write not import so we're going to write import chat from our components so we add in a dot and then we're going to grab it from components slash chat and slash chat again then what we can do is bring in our chat component here let's test it out ok cool so you can see that our chat component is now rendering in our application good start we're starting to get there so let's go back and let's start fleshing this out now so rather than just having a line that says this is a chat component we can start building up application so if we go back to chato Jay s let's actually start laying this out as we would in a real app for our app so there's a bunch of components that we're going to or that's going to comprise our main front-end so let's delete that the first thing is let's create a bit of a container so in this case let's call it class name equals chat and then what we're going to do is create a let's create a header so h1 chaddy we'll call it charity of the chat bot then a worker need to handle our messages we'll do that in a sec and we're going to just import a dummy placeholder message here and we're also going to create an input so an input box so we need somewhere for our users to actually type in information right so we're going to just create an input give that an ID of chat box and I think that's it for now let's test that out let's see what that looks like alrighty cool we can probably remove that hello world so let's go back to this app and remove that say that again alrighty cool so we've got the beginnings of our chat box yes we can type in stuff nothing's really happening but we're going to fix that in a second so we've got the beginnings of our full chat application so let's scroll back to our chat now and let's start fleshing this out so at the moment we're not really doing too much with our messages so we want to start handling our user messages so in order to do that we're going to use the react use state lifecycle function so this is going to be allow us to temporarily hold our message so we'll call bring in use state and then what do we need to do so we should probably create a state function so we'll go so we're gonna create a variable that allows us to hold our users message so in this case we'll call it message and then we'll create a function that allows us to update that message and we'll call that set message and then we'll call the used state function so now what we can do is we're going to have a variable that allows us to access the users message now what we actually want to do is be able to grab that value so we can do that by updating our input component here all right so before we do that let's add some comments so it handle he uses message and then we're going to start handling that down here so what we want to do is we want to update our message variable every time the user changes the information within that input box so we can do that using the unchanged method so every time the message within our input box changes we're going to update our message variable okay so every time there's an event we want to basically set our message to so we can grab the value from that input box using a target value and effectively what that should allow us to do is grab our message now right now we don't really have any way to visualize that so let's create another function that allows us to see that value as soon as the user hits enter so this function is going to be enabled on key press and let's create a fit let's create a function that handles that so we'll call it a handle rule click and we need to close this over here I read that awesome talk alright let's so let's sell function that handles user submission and this is going to be called a handle quick and we're going to make this async because eventually this is going to be the same function that submits our users message to our API so we want to be able to handle that cool now what we want to do is we want to check or we only really want the function to execute and do stuff if the users hit enter now what we can do is we can check whether or not the users hit enter based on the code that's coming from the key press or the key down the code that we're looking for is code 13 so we can actually grab that out so we can grab let's just create a variable called code Y key code or a dot which now what we want to do is if the code is equal to 13 then let's just log out a message so remember our message is stored within this message variable here so in this particular case if a user hits enter then we should see a message logged to the console so let's just double check that and then what we also want to do is we want to set our message to nothing so we want to clear the message if there's hidden so we'll go set message equals blank so remember this this function here allows us to update a temporary message so if they hit enter what should happen is our users message gets logged to the console and then the message goes back to nothing actually we need to change this over here as well so we want users message to be dynamically set and we can do that by setting the value equal to a temporary message variable perfect so let's hit save there doesn't look like we've got any compile issues so if we go back here let's go to our console now if we type in a message and hit enter you can see our message is successfully logged to our console so that seems to be working fine and now what we need to do is be able to display those messages cool so let's go back just check out to-do list so it looks like we've set up our chat so let's say that's done jump back over to our chat up now what we want to do is start setting up our actions and reducers so effectively we're going to be adding a user's message to a message queue so let's get that done so if you cast your mind back to the first part of when we were setting up our application folders we had three key folders so we add reducers components and actions now if you think of your actions as your application triggers so every time you user clicks a button you effectively go and trigger off an action that action then goes and updates or sends a message to our reducers and tells us how to update our application state now what we want to do is have some effectively some status flags that tell us whether or not our actions were successful or not so what we're going to do is we're going to set those up and we're going to call them tight so if we have different types of action results we're going to be able to display those within our redux dev tools so we'll actually be able to see whether or not our actions are successful or not so let's head on over to our actions and create a file called types and within our types the first type that we're going to create the types that allow us to handle adding our user actions to a message queue so in this case we're going to call it will just call it input success this type is going to be called if our user action is successful so in this case we're going to just call it input success it's going to be the same as this and let's create another one for if this fails so we're going to say input underscore fail perfect now what we want to do is create some actions so we're going to create a new file here and we're going to call it Watson je s and within here we're actually going to store all of our different types of actions so what we're going to do is we're going to import types then we're going to have a function that adds the user message to the queue actually just handles they use the message our reducer is actually going to add it to the queue and also the user's message and while we're at it let's just create some notes so we're also going to eventually have an action that creates a session so this is going to be an API call to the backend and we're also going to have another action that triggers doesn't trigger it sends a message to the bot again that's going to be an API call all right so first up importing our type so we can import input success and input fail from types cool now we need to create our action so in this case our action is just going to be called user message so let's export that and then we are going to make it an asynchronous function and we're going to dispatch it out to a reducer and so what we want to do is we want to have a try-catch block and if we receive that message which is going to dispatch type which is going to be input success and our payload which is going to be I users message then if there's an error we just want to dispatch the type input fail all right cool now that we've defined that function what we want to do is define how it updates our application state so this is where we need to define our reducer so let's get on and do that so for our reducer we're just going to also create a file called Watson jeaious and again we are going to import that types and then we're basically going to have a huge switch statement that tells us how to update State and we're also going to set our initial state in here as well cool so the types that we want right now we just want our input success input fail input fail from actions types and then we're going to set our initial state so in this case we're going to this is where we're going to define a message queue really so initial state is going to equal messages and we're just going to declare a blank array at the moment then what we want to do is basically define a big switch statement that defines how we respond to our different types so here we're going to export that and to that we're going to pass our state which is initial state and our action now depending on what happens we want to do different things depending on what action types we get back so let's export or let's extract those so to begin with we're going to get our type and we're going to get our payload so if you might cast your mind back we had our type and our payload we'll extract that out so we can work with it a little bit easier and that's all going to come from our action then what we're going to want to do is get our messages so because we're going to consistently update our messages so let's grab messages from our state and then we're going to create a switch now a switch is basically going to define what we do depending on the action status or action type that we get back so our first switch is going to be if we have a case of input success so all things holding equal if we're successful what we want to do is we want to get our messages we're going to grab our existing message payload and we're going to add in our new message which is going to come from our payload and we want to set a type of message so in this case it's going to be a user message so if we get our input or if we get an action type which is input success then we're basically saying that we've successfully submitted a user message to the queue so we're going to add that message q and then we're going to return our state if there's a fail then we're just going to return I'll stick perfect so that looks fine right now now what we want to be able to do is trigger this particular action over here which is a user message if our user hit enter so let's go and do that so what we're going to do is go into our chat component and we're going to impress up import our action so what we need to do is grab our action so we're going to import user message from actions Watson and we also need to hook this up to redux so right now we haven't actually connected it so we can do that by importing connect from react redux perfect cool alright then if we want to connect up our component we just need to export default and then connect and we are going to need to map our state to props define this in a second and we're going to pass through a user message function and that's hooked up so what we want to do is we want to be able to pass our current redux state into our chat component as a prop so once it's at once it's passed as a prop we can now start working with it inside of our chat component so we can do that let's define that function there so we're going to pass through the current state and we are going to return props so props going to call chat and then we're going to access our state Watson messages so this is effectively going to allow us to access our message queue inside of our chat component we then want to pass throughout that particular prop so we're grabbing a chat prop and we'll also go into pass through I use a message so this is going to allow us to call I use a message function every time a user submits or hits enter now right now we need to call that function so we're going to call user message and pass through the message that we've accessed all right that looks good hold on message module not found actions Watson let's check that we need to go out to folders Watson alright let's just do a quick scan before we go and try that again so if we go into our types hold on I need to export those we go to actions so we're exporting that importing that that's fine chat where did that so when now combining our reducers it's fine loaded there okay we're importing our action types initial state is fine we actually need to have a default state here as well cool alright let's try that now so what should effectively happen is if we hit a message or load our message that's console.log there as well but now because we've got Redux dev tools installed I'll drop a link in the comments below but because Redux dev tools allows us to visualize our state a lot more easily we can actually see each and every time one of our actions is triggered so you can see here that we're receiving our action type which is input success and if we go to our state we can actually see our user message and in this case we actually sent message and the type user that that's at least displaying that we want to say at hello world we can see that loaded there as well now so we're successfully loading our user messages to the queue so let's jump back over to our to-do list and we can say that we've set up some reducers and actions and we've set up our chat queue now what we need to do is display some of these messages to the user so right now we're only sort of seeing them in the state and we're seeing them in when we're console logging them but we actually want to be able to display those to the user that's pretty easy because we've set up Redux so we can actually display that to the user by accessing that state so if we go back to our shared application what we want now want to do is look through each of the messages within a message queue and display those to the user so we're going to replace this div here actually we're going to keep and we're going to replace that div so let's remove this and what we're going to do is we're going to first check if we have any messages in our queue if we've got no messages in our queue then we're going to use a ternary operator here so we want to display nothing if we've got nothing in that queue and if we do have stuff in our queue then what we're going to do is we're going to loop through it and display that so we can use the map function there or the map method so chat map and then for each message we are going to return a div so we're going to turn a div and we're going to set the class name this we'll use this for CSS later as message don't type so this is really going to either be user or bot so right now it's user because we've only got users user messages in our queue but eventually we're going to have BOTS as well and we actually want to display our message so we can access that using our by accessing the message property and we'll close our div and how does that look so we've got so we're checking whether or not we've got any messages in our chat queue if we do then we're going to display that cool all right so you can see that that original sort of template string that we had is gone so now if we type in hello world perfect and you can see that that's displaying so if we wanted to add in a bunch more this is Nick hi hello yo perfect cool so our messages are successfully submitting to our queue and we're now successfully displaying them on the screen as well so let's take that off our to-do list and set those to done so we're on the final stretch now we've got really what is it four things left to do so we need to handle our session IDs handles getting our messages from our bot and adding those to the queue and then just a bunch of formatting so let's start setting up and getting the our session IDs again the first thing that we're going to do is set up some new types so let's do them for both the session ID and the chat bot response so we're going to type in export Const so we're going to need four states here and the first is going to be what are we going to call these so we're going to call the ease session success and a session that was a few too many asses in their session fail and we'll have message success and message fail cool then we're going to import those into our actions so let's bring them all in and we'll bring in the message ones as well we're at it perfect cool now what we're going to do is create a function that allows us to get and create a session so this is where Axios is going to come in so we're going to need to import Axios to help us create an call to our back-end API so before we do that though we need to step over to our package file and set up a proxy so our proxy is basically going to state that if we get a request to our app and we don't actually have a route for it then it's going to by default go to our back-end API so we can just type in proxy and we are going to go to what is it HTTP localhost 5,000 because that's where our API is then if we go back into our actions we're going to import Axios and we're going to import Axios from xeo cool and then we're going to make our API call so in this court case we're going to create a function called create session so that we can create our session and we're going to make this asynchronous as well dispatch the call and then again we're going to have a try-catch block and then we are going to make a call to our API so we're gonna store our response in a variable called re s and then we'll make the call to our back-end so we're gonna call axial stop get and then remember this is just coming from postman so we're really just going to be calling this now because we've got the proxy we don't actually need to specify HTTP by default it's going to go to API Watson by default it's going to go to a local host 5,000 and then whatever session or whatever wrap we tell it to go to so here we are going to type in slash API slash Watson and then a slash session perfect and then we want to return that if it's successful so we're going to dispatch and our type so assuming out we've successfully got a session token' we are going to dispatch the type session success and we're gonna send back our response so our payload is going to equal the data from our response and if we've got an error we're going to send back an error and that's going to be type equals session fail so let's save this now what we're going to do is head all our reduces so let's go to our reducers and so right now we've just got input success in the input fail so let's import our types first up what is that session success and session fail and then let's set up some cases for that and what we're going to do if our if we've successfully got a token what we want to do is store that token inside of local storage so that's just going to make it easier for us to check if there's a valid session token available so we can do that using a local storage dot set item and we're just going to call it session and the value is going to be the session ID from our response and then what we want to do is just return our state back and if we have any errors we're just going to say we're just going to return state vanilla perfect but right now we don't actually have anything to create a session so we should probably create a session initially when our application loads so we're going to put this inside of our app.js file so let's go ahead and do that so let's go to our app.js file and let's import a bunch of stuff so remember we need to bring in our action so let's do that so I'm going to import create session from actions and we're going to do this every time we refresh our tap so we're going to use the use effect function for this so what we're going to do is use user factor this so we'll call use effect and let's think this logic through so first up we want to check if there's a session already and if not then create a session all right so we're going to go if local storage dot session doesn't exist then create a session so we are going to call store dispatch dot that's stored up so we're going to call store dispatch create session perfect and then so our life is a little bit easier we're going to store this as an Axios default so that's going to mean that we don't need to grab that session ID each time we make an API call to our back-end so let's import Axios and what we can do is we can check if local storage so whether or not there's a session so we're checking if there is a session then what we want to do is set our access defaults so so we're just going to store that session within a header perfect and if there's none that then we're going to remove it so I delete so let's review that that looks fine for now let's save it no errors so let's refresh our app now and we can see that we've got a session token successfully called so that's now going to allow us to make API calls to our back-end so let's tag that off our to-do lists so we're successfully getting our session IDs now what we need to do is send the users message to our back-end API so we've managed to get a session token now what we need to do is actually go and send off a message to our back-end API so let's again step back into our actions and let's create this last function now so we're going to export it and we'll call it send message again we'll have a try-catch block and now what we want to do is grab the users message and let's create a request so we're going to have users message stored within the body and then we'll create a request and so this request is going to go off to our message API so let's do that body there that looks fun and assuming that's successful what we want to do just to begin with is console log that out and if there's an error then actually we should dispatch something as well we won't attach any data just yet let's check out what our response looks like all right so that looks fine let's update I'll reduce Oh let's not do anything just yet let's test that our response let's just return back state for now and we want to call that function or that action every time I user submits our message through the chat so let's bring that in as well so we need to import function there add it to Redux connection and then we also going to pass it through as a prop perfect then we should be able to trigger it here and let's quickly review so we're bringing a message up here we've got a connected down there we're passing it through as a prop and we're calling it off too they use a message let's just go to app so we bring in Axios library we're creating the action here calling it down that let's just clear that'll just make sure if there's anything stored previously that's gone okay let's test that out cool all right so let's refresh this so if we check redux state all right so we've successfully got a session so now if we type in a message so that's successfully written the message to no air is there yet so that's working fine we've got a message success status if we check a console we can see that remember we're logging out our output from our API call and we can see that we've got our data got our entities generic and so this is actually our response here so it's sitting in data output generic 0 and text so rather than grabbing that whole response we can just send that back from our action so let's do that and let's add it to the queue as well because right now we don't actually have it added to this message queue so let's do that so to add it to our message queue which is going to go back into our actions and rather than returning nothing here we're actually going to remove that and we're going to go payload so that's going to equal res dot data output dot generic zero and text cool and then we just need to make sure we update our reducer as well so in message success we want to return messages so let's extract our existing messages and then we want to add a new one so that's going to be message gonna equal we're just gonna grab the text from the payload and remember we're going to specify our type as but in this case and then we want to return messages as well perfect that looks fine for now all right cool let's check our state so we've got our or no messages because we haven't submitter one so if we do that now alright so we had input success we had message success and because of the way that we set up our queue we're already displaying our bot messages that's the so that's the crux of our application done now what we can do is it'll apply a little bit of CSS to make this look a whole lot better so we're going to change a few class names or this one inside of our app.js file we're going to rename our main div container and save that and then within our chat component we're going to rename a few additional divs as well so the first div we're going his named chat that's fine then we're going to store everything within our chat history inside of another div and we're going to call that history container and throw that here and we're also going to we'll come back to that next bit so we'll take a look that's looking fine we've got our input ID that's chat box alright so we'll save that now I've already prepared a bunch of CSS so we're not going to go through this from scratch I'll make this available in the github library we can just paste in our CSS and already our chat bot is looking way better so if we start typing in a message now we get a response from our bot so if we wanted to order icecream we get a response for what flavor so let's say chocolate how much should we want to order five hundred mils and then we can also handle contexts as well perfect so we can say that our chat bots are all fully functional and working now there is one last formatting change that we can input to make this a whole lot better so if we start adding in lots more messages you can see that it sort of gets lost we can implement a function that easily allows us to automatically scroll down to the bottom of our chart so that we're always seeing the last couple of messages so we can do that if we just go back into our chart component and we're going to import a few additional things so inside of react we're also going to import use effect and use ref then if we create a reference so we'll call create a variable for that and what we'll do is we'll create a function that Scrolls to the bottom and then what we want to do is make sure that we've got a reference to that particular dip so if we add in that and we just need to make sure we trigger it using these effect so every time our chat is updated our chat bot is automatically going to scroll down to the bottom so now when we type in order ice cream we flow on as per usual how much we want to order five hundred mils perfect so that all still works but now if we type in hello multiple times you can see that our bot automatically Scrolls to the bottom so it gives a much nicer user experience and feel and that about wraps up this tutorial on how to build a chat bot using react jeaious and read up alrighty guys and that about wraps up today's tutorial so just to recap we did those three key things so we built our chat bot app using react and redux we connected our chat bot up to our express back-end and last but not least we improved our look and feel using some CSS and some dynamic scrolling thanks very much for tuning in if you liked this video be sure to like share and subscribe it until then peace you [Music] you