How to build a chatbot with React

good evening ladies and gentlemen welcome to my channel my name is Frederic strong osburgh and today we are going to have a look at how you can build a chatbot with react chat pod kit now this is a package that I made as a part of a cloud computing course I kind of want to merge my front-end expertise with learning about back-end and service functions and I ended up building a chat bot and extrapolating that into an NPM package we're going to look at that today and see how we can make some pretty interesting interfaces so I think we're just going to jump right in and I've done a little bit of setup here so I have here a blank create react app project and I've deleted almost everything inside of app guess we just have the container with a class name of app and a container for the chat bot that I've just lazily styled with the max-width we also done a few changes to the CSS so that the background of the app container just now spans the entire height of the browser window and that gives us just this blank canvas that we can start painting on so if you haven't set it up and you want to do that you can post a video and we'll get started with building chat bot up next so let's go to app jeaious and if you haven't got yarn you can use NPM but open up your terminal built in envious cold or I term if you use that and use the command yarn add react chat box kit now I already have this installed it's already in no modules in this project so I don't need to run the command but you do and once it's installed you can go to the top of a bas and import the chat pod components and once we have that we'll put it in this container all right so just heading back to the browser for a second this is the first view that we get when we put the chat bot in just like we did just now so this screen just lets us know that we are missing some vital props in order to get the chat bot to work and it also gives us a link to the documentation so we are going to just go and click the link and we'll have a look at the documentation as well so right off the bat we have an overview here on the page with a gist that gives us a clue to what we need to do in order to get the chat bot to work we also have a working instance of the chat bot here on the right hand side that we can use to kind of if we were curious about any other pieces of the chat bot we can navigate through this one and get some answers here as well so it works as kind of an introduction and overview to how the data flows through the chat button and information about the different parts and you can also scroll down there's more information that goes more in-depth in the documentation but for now we are going to follow this link that gives us kind of what some boilerplate that we can use so under Quick Start there is a link to adjust go ahead and open that and we should have all we need to get started so let's go back to the editor and we'll just create a config a message parser and an action provider so let's go ahead and create create those files I'm going to put them in a chatbot folder so I created a conflict j/s and I want a message parser Jes and I want an action provider jeaious and I can go ahead and go back to my browser window and I want to grab let's grab the message parser first make sure to get all of it and I want to delete this because that's just a placeholder for the parsed logic instead we can put console.log message share so next I want to grab the conflict go ahead and paste that in and finally I want to grab the action provider and go ahead and paste that into so now we should have all the pieces that we need to get started so let's head over to app Jess and start importing all of these things and I'm just using my plugin err that helps me locate and import modules and let's put them up here and we will feed them into the chat pod oops all right so if we head back to our browser now we should be able to see the chat bot working and it does so now we have it up and running and we kind of have just a basic hello world message from the chat bot so if we try to write in the input field here that will work and we can render it to the screen but obviously there's no response because we haven't configured any actions in the India chat pod yet but it's up and running so that's good so let's just take a brief look at the different pieces and then we'll go ahead and do some something more interesting so in the config basically it's just a JavaScript file with a list of configurable properties for the chat bot so another thing we could give it here is bot name so let's call it learning box and it has a initial initial messages array and it uses a helper function from react react chat bot kit that kind of creates a message object you can create it from scratch but it's much easier just to use this this helper function so that's basically the comfy you can do lots more with it you can inject state you can register widgets you can swap out components you can add change the color of different components it's all documented in the documentation so you can go ahead and have a look there every configurable property but let's look at the message parser the action provider so all right so the message partial is kind of the component that handles actually parsing user input so whenever a user typed something into the input field and hit send the message is picked up and run through this message parser and that kind of means that you are free to implement a very complex message parser or a very simple message parsing completely dependent on your needs but every message is run through this parse message so all the logic needs to be implemented there but you're free to kind of structure it and them any way you want inside of that parameter inside those kind of frames and as we can see in the constructor it also receives the action provider and the action provider is what we'll use to update the internal state of the chatbot so inside of the action provider we have creates a pom message and we have set state we're set state is a function that is passed from the chat pod component and injected into the action provider that you provide so when you give this class to the chat bot this class is initially initialized inside the chat pod and given injected these two things so we'll take a look at now how we can actually make this work just a simple hello world example at first so let's go to the message parser and we'll take the message and we'll lowercase it to lower case and we'll just do a simple check if lower case includes hello then we want to do this action provider wait all right so this won't work right now because we haven't implemented greet the greet function because we need to do that in our action provider so let's go over to the action provider and we'll create a greet method and we'll also create a and chat pod to states alright let's show them out a little bit which will take a message all right so what do we want to do and greet well we want to create a message and we want to use this create chat bot message and let's say hello friends and now this will create the message object for us and we want to take that message object and we want to update the chat bot state and to do that we need to use the set state function but we also need to be mindful of the fact that we have access to the entire chat pod state through this function so we always need to make sure that we are preserving the previous state when we are updating so let's go ahead and do this set states we'll take the previous state which is a react something that react gives us will spread that so we're copying the previous state over and now we want to do messages and we want to copy the previous state messages over and we'll add the new message at the end all right so now we have a way to update the chat box State and we'll go ahead and use this helper method here and we'll pass in the message all right so hopefully now if we've done everything correctly we'll be able to get a response in the chat pod once we type in hello it was a low right yeah all right so let's have a look hello and we can see we get a response from chat bot perfect so that works but it's not particularly interesting and I do have something more interesting that we are going to be looking at next and I've actually achieved a little bit I made these components yesterday and I actually film doing it but it became very long and I did the raw footage kind of like figuring it out on the fly so it's wasn't it it didn't turn out as well as I wanted it be but I have the components now and I just to keep this as short as possible I wanted to just show you how we can implement them and not actually build out the components in this video if you think that's interesting then that's certainly something that we can do in another video but for now I think I'm just going to show how we can get the finished components on the screen so I have two things here so on the left hand side we have two components one is a options component which is something that I like to do in my chat BOTS that I built i I just render some options with the first message so that I kind of guide the user to what's possible to do within the within the chat box if you want you can skip that and you can build as complex message parsing logic as you like but for me it's worked pretty well just to give some basic options and build out the necessary functionality to get that to work so basically what these these options do is that they render some buttons to the screen and they they get a handler from the action provider so we can actually trigger actions from inside the options now this leads me into another concept then I need to explain in the config and in the chat pod in general because the chat pod works by updating the messages array in the chat pod with a chatbot message object and you can actually render custom components with a chatbot message so you can build a react component and you can say when you when you create the chat pod message that you want to display a component with this message and that opens up basically anything you want to do with in the chat box you can because you can build custom components you can retrieve data you can you can build custom widgets that that you just inject into the chat bot window so we were going to do that now we're going to register the options component as a widget and we are going to render it with our first message so we are going to head over to the documentation again so over here and we are going to go down to widgets here and we're just gonna grab this first object and we'll go back to the config and we'll add widgets and it's going to be an array and we're going to add this object will remove this because we don't need it right now and we are going to import the options component and we need of course to have reacts in scope all right and let's call this options so all right what do we do now because it I can understand that it can be confusing but basically we're just registering components inside of the chat bot and we're giving it a name that we can refer to it by and we're giving it a function to render it and the reason that we're giving it as a function is because we are injecting our widgets with props that's how we get access to the action provider so you know the action provider when you pass it to the chat bot it's a class so it's not initialized yet and it doesn't have it's not an instance it's just a class so we need to instantiate it inside of the chat bot and then pass it to our widgets through there so that's why we give this widgets as functions because we can inject them with with more functionality that we need so we've called this options and we basically registered it now so react chat pod kit will take this and it will register it inside a internal widget registry and that means that we can now refer to it through create chat pod message so basically this options components is rendering out a list of programming languages and we want to when we click on them we want something to happen and in this case we are going to be displaying a kind of a flashcard component and the flashcard component will just show some questions about the programming language and you'll have the ability to jump to the next question until the flashcard until the questions run out so we have a method here and we'll get back to that and what that means but first let's go back to the config and we'll say hello what do you to learn and then we'll give a options object to the create chat pot function create chat pod message excuse me and we'll say widget options and if we go back to our browser now we can see that we have a new message initial message from the chat bot and we have different options that we can interact with so they're not doing anything right now because we haven't implemented anything but that's the next step so I mentioned that we wanted to have kind of like a quiz that that shows up would be either when we click on these buttons or maybe when we write in JavaScript or Python or goal-line we want to display the quiz component and we want to have different questions for for each component so that's kind of the next step and it's similar in what we need to do let's head back to the editor and we'll have a look so let's have a look at the quiz component all right so the quiz component basically it takes some props where we supply the question and the answers as an array and then once we display the flash card you can click on that flash card and it will switch this state to a show answer state and if it's in the show answer state then you can click next next question until you run out of questions so we're going to display that next so we'll head over to our conflict Jas and we'll add another widget and we'll call this one JavaScript quiz and we call the widget fine and we want to get the quiz and we want to spread out the props otherwise we won't be able to get the injected properties now we want to pass props to this component so we'll add a props object and here we are going to put our questions and I have the questions already on my clipboard so I'm gonna paste them in so let's take a minute just look at what's going on here we registered a new widget called JavaScript quiz and we give it it a function that is going to render the quiz component and inject it with some props and we've given it a props object that has a questions array where each item has a question and answer and ID perfect so the next step now is to go back to the browser and just take a look at what we want to have happen all right so our chat bot initially renders a message that says hello what you want to learn and some options and what we want to have happen here is when we write in JavaScript in the input field or we click on the JavaScript button we want to have something happen we want to render the JavaScript quiz that we just registered and in the config so let's go ahead and implement that and we will go back to our editor and we have to go to our action provider and implement this method so in our action provider let's create a new method called handle JavaScript quiz and we want to create a new message that says we're gonna and we're going to use the create chat pub message and we're going to say and we will pass a options object that has the property of widget and JavaScript quiz and finally and we will pass the message and update the chat bot State all right so let's just go back to the browser and see if this works well first we should go to the options file and see why it's going to work so I mentioned I made this from before and here we have hard-coded our options inside of the options component so if you look at the handler we are giving it a handler that's coming from props action provider handle JavaScript quiz now options is one of the components that we registered as a widget in our config and if you remember in the config we're giving a function that allows us to inject these widget with props and one of the props that we inject into the widget components is the action provider so inside of the options widget here we have access to the action provider which means that we can use this handle to JavaScript quiz method that we just implemented in our action provider to trigger an action in the chat bar so if you go back to our action provider this function right here handle JavaScript quiz that is the same function that we're giving us a handler in our options so if we go back to our browser just for a second and we try to trigger an action by clicking the JavaScript icon that works and we get the chat bot message and we get the quiz component perfect but we also want to have it trigger when we write something in because it's a chat pod and we want the users to be able to interact with it so we're not quite done yet let's head back to our IDE and we will go into our message parser and inside of here we are going to add a new class and we're going to say if lowercase includes Java scripts or lowercase includes again I'm making this very simple for the case of this tutorial video but you can go as complex as you want with this parsing and we also have access to the action provider inside of the message parser so we can do the same thing here trigger this action let's see if we go back to our browser and instead of clicking now we write Java scripts all right what if we write j/s perfect still works all right now we've only implemented one of these quizzes but it would be the same method you would use to implement the rest of them you just would register them as different components and then pass in obviously different props and you can do more complex things you can create widgets that maybe you wanted to filter down to a product in a web store or something like that there's lots of use cases that you could use for this you create a custom checkout process you could probably make an entire web store in a chat pod which would be quite interesting to see but it's I'm having a lot of fun with this and there's lots of cool little things that you can do with this so if you enjoyed this please let me know if there's anything you can see that should be done to improve this project you can always file an issue on github or send a pull request and I hope you enjoyed this and thanks for tuning in

Channel: Fredrik Oseberg Coding Lessons

Views: 22,452

Keywords: react, chat app, javascript

Id: vTpk-PKZwTs

Length: 33min 7sec (1987 seconds)

Published: Thu Jul 09 2020