Build a JavaScript chat bot with us

Key Takeaways

hey everyone wow happy Thursday to you all yeah we all love it Thursday today best day after Saturday Friday Sunday so fourth birthday and it's actually fourth in general so there we are yeah something's happening yeah so it was always happy Joseph Lottie was the first person to comment her is back wow hello from Vision two three seven zero how are you doing pretty good I would say sun shining yeah I've got an interesting project today so oh look he's sitting here yes pumpkin is in the room behind the camera I was looking out the window he'll probably come soon yes let me know how your home bearing and where you're tuning on him from yes hello from Iran hello to you hello zetto hi for the UK we're up in the UK hello so much pondering happening in the thumbnail yes and probably an hour of pondering now Gina Russo is back past Grandpa super cool thank you all hello amazing um a few of you have already gottened on to this a weekly poll here which is um it's very official and scientific if you're new here please put a bunny rabbit into the chat hit me with that tiger yeah tiger this one be before that one or the full body tiger or either is acceptable and this one yes yeah and there is also the regular attendee lion [Laughter] which hasn't been added to the official Banner but yes people like to use and also elephant for people from Colchester but that's a long story yes um putting a chat yes goodbye have you ever built a chat book before Michael uh no because I remember well it used to be like you right like you can integrate ah you know what like when you go to a website or car dealership or something like that usually there's like a person popping up going like hi can I help you so with anything and then you just go I don't know and usually you just say yes and then it's like very quickly just checks includes you know keywords and stuff like oh yeah I'm looking for BMW or something and it's like yeah I have these BMWs and then they basically just patch you into the slack window also some salesperson um so it's like I've never actually use sucker incoming yeah so I know I actually acted buildings and like that but it's like I know there are some really Advanced apis that you can actually build something with but now with chem GPT I feel like probably a lot of those people are kind of out of the business yeah possibly yeah must interrupt whatever we build is definitely nowhere near GPT yes yeah so temper expectations um hello all of you bunnies and all of you guys welcome slash welcome back oh a camel and a black cat anyway you've heard of chat Bots this is chat bat right so it's uh evening flavored Halloween maybe yeah so let's run through what we already have this um code is in the description so if you want to code along and build your own thing with it yeah I guess um okay so far we just have this form with this um input what can chatbat help you with today and so far you can select see a bat pick and I have a back question when you do that and submit so far we get either fire away for the back question or right on bat pick coming up okay or if you select the bat you get bats right absolutely true actually if you select anything else you would get the bats but you can't select things we help select anything else right um so this is all done in the JS with this function process first question gotta have the old event prevent default actually haven't actually cried up without let's see what happens yeah yeah it refresh the same page what that does is it stops the form from refreshing before it can actually use the values which is built in for a reason which I can't remember now and is sometimes useful but um more often than not you're end up disabling it with event prevent default yeah well the original meaning of the form was that you fill in the form and you submitted there's a request to the server so the form is reset once it's like you know you send the letter and you get a new page that kind of thing uh but obviously because now all the pages are very Dynamic that I have to react to clicks and stuff like that because you're not really sending anything you're probably just calculating something uh so yeah people want to prevent the default to just keep the contacts on the page makes sense Ferris says build a JavaScript chatbot we will we'll attempt I'm not sure if Harris is just um reiterating the title or saying we should do that but either way that's the plan Anna says Oh I thought this would be made in react I mean that probably wouldn't make sense but we don't need to use react on here because we like to keep it at HTML CSS and JS yes but in the real world yes you probably will see that correct afternoon from Dave this is talking about not Dave the elephant Emoji yes welcome to you um so anyway that's how chat that works it's just a little conditional up in there changing the text content of this um paragraph depending on what people have selected and I've made some to-do's of course so what we want to do next for this chatbot is write the show pick function if they select see about pick they already get right on bat pick coming up but what I want to happen is after a second show a random bat pick okay point two the bat picks already in here right if the user has a back question um we want to display buttons with three bad questions I've actually got four down there um and I'll write a function to answer the clicked question here are the questions and answers and if the user selects the bat option I want to make these bats and move across the screen what I mean that's the easy part I think really which is animations I think it's easy but maybe not so yeah off we go right the shape it function oh okay so I have to do it okay um right so right show pick function wait one second what do we have to wait for one second is that because yeah you've got bat picks coming up you know you wanna get some excitement going for the back picks do you yes what kind of backpack though the picks are in the file ah the pigs are all in the but there's no preview so you can only see them by rendering right okay okay okay okay so let's let's try that uh do you want to zoom in a little bit probably yeah I have to zoom out to do some stuff so now I think we need to make the font size bigger yeah can I get a recording of this session indeed you can no all of the sessions are stored here on our YouTube channel for you to watch later yes they are very suspenseful animals why do I always they also suspend don't they you know whenever I hear Pat I hear bad so it's like build bad suspense build Batman chat I have a bad question I don't ask uh let's go right should be function wait one second so that's why is it set timeout yes [Laughter] for one second uh yes I'll do so this one thousand is one thousand milliseconds correct Ed sounds good cool uh Anna says that is a very bad joke yeah indeed yeah descendants oh that sentence yeah right then let's give that a go okay but but then I need to display the pick right yes so I need to say bad response text content oh do I just remove that uh we could put Tara bat pick why don't I just you know what's what's in the Dom uh there is you also need to add the HTML for the image because it's not there at the moment yeah so do I want to remove this yeah that's what I mean we can put Tada bat pick okay okay tada yeah I think Batman called yourself explanatory you probably will yeah and then what is it like how do you actually attach it into the exact spot that you want it's like oh you just attached to the body at the end because script is like the split thing okay fair enough that is a good point I guess we'd have to have an element in there yeah so energy equals uh create elements um right the image door Source equals pics yeah oh so now we've got various bats but we want to display a random one you should put an outpag in oh yes image dot hold yeah equals that pick we can't really do better than that at the moment because they are later on we could yeah element by what are you trying to do tag name I want to get body yeah attack name then okay what's tag name NS interesting question yeah okay yeah element by tag the name NS belonging to the given namespace the complete document is searched including the root note I'm not sure I really understand what the difference is there oh so you like give it a link and then actually never heard of this before oh um why don't you use the set attribute Source picks Etc uh you can is that actually gonna work what you've done I think so let's find out yeah haven't tried again Elizabeth tag the name body uh a friend no no um You probably have to save it in a variable it retrieves a collection of objects based on specific Elements by body so I think I'll need to like pick first one and then you'd hope they're the only one with this one yeah but you can you can check by time right yeah but can't you just to get element by tag name I think you can yes element s on the element by tag them okay uh potential no you can just document dot body yeah okay oh wow you actually can look at that rumbia said it's just document dot body dot append yeah see that thick good cool okay something didn't work I think that's something because I haven't actually I'm not actually calling it okay yes and that tropic Dave Collison I want to know my secret identity I'm a bad man with a D well what do you say bad response what that response is not defined bad response does not define bad response I'm pretty sure it is oh because that's not a global variable ah you have it in there so we should move it up so at the moment it can only be accessed within that function I don't know I think that's all right you can probably you can keep this well how to use it I see that's not very dry though isn't it but then people always say that Global variables are bad but I don't really know why yeah well people can come up with any three letter acronym to justify their behavior you know the best practice is the one that I do you know oh okay you've heard it here first that's actually I didn't say that somebody else said it uh I mean Phil Collins kind of said that right in in that song all right yeah Don where's that don't do what I said the topic please what do you mean Phil Collins is always on topic okay so um uh it didn't wait I don't think yeah because I think you need to do that inside of set timer oh yeah I think you're right and it can't read the The Source path why can't I read Source path book I think you might need another thingy in front of it yeah all right all right so it's like local folder going to picks oh yeah because uh I think you can also do this like I mean root or the whole thing but you know anyway see you backpack what an anti-climber okay well I mean without the I mean the Out Tag works well that's good is it bad oh maybe it's because you have spelled his Capital maybe it's case sensitive you've spelled that wrong here no that's I think oh maybe it is yeah all right okay yeah it looks like it there is a bat there is a bat why why actually like normally we do cats but you've decided to like you you thought that people are sick of pumpkin it's chat bot chat bat and we could be Chad's cat I did think that but then I was like maybe people are getting tired hey come on shut up you're like it's right there you know we are where we are so now as in the UK Batman actually we can deal with the image in CSS uh yes we I think can well definitely but I think that's way beyond my skill level I'll actually give it a Max width or just a width Max with 200 okay 100. okay cool ah it could have been called shot shot Dave says can we have hats next time hatch chat hat oh man I'm confused anyway um so we can come back to well it won't take too long to randomize the that images with it uh no I don't think so it's why is it actually I mean let me just quickly hack this what are you hacking all right make a zero yeah so we can yeah cool uh that spring compilation rampant yeah what's it ranting about okay Brandon yeah it seems to be the flavor after that right uh misspelling DNT okay uh and now runs into equals ah where is the you know GitHub called pilot in here random integer between zero and five and it's like boom do you do it with voice chat no no no no I just quickly type it up but ah who is it uh like JavaScript which you know you don't have to remember these like stuck overflow things that never gets stuck in your head yeah cool so um random times [Music] because there's six of them Michael okay so I know actually maybe you do need five yeah between zero and five right so I'm 10 plus one gives you one to ten so that's inclusive and you plus to give the lower number yeah so that should do that all right let's see what happens now um yeah okay see you back okay ta-da it's another one it's not a bug it's a feature that's how do you fix that because we're yeah yeah you have to uh query if there is an image remove it like replace it but for now let's move on to our second to do I haven't seen all the picks it's just why don't you just it's just like three of them now are they all the same one okay cool there's a different one okay so it does work it's just this is generates them all of a sudden and it really likes that one yeah it's spread it swinging and it's flying Dave says that'll only select from the first five so we do need six because we haven't seen six different ones have we bat Five Dot jpg will not show says Secret all right then level six yeah yeah that was the one we hadn't seen I think but there's six of them okay I mean we can actually like if we have some time left over we can actually write out like how to filter out and show the ones that you haven't shown yet yeah anyway so that's uh that's number one yeah [Music] if user has a bad question display buttons with four bad questions a right function to answer the click question okay um I'm wondering if we should probably just create a div for instead of showing it in the body you can probably create some kind of div with like quiz results or chat chat results although that's already says bat response in-depth response I mean we could call that one bat text and then yeah you're probably right we should have a bit of a container for whatever happens yeah because then we can just remove that container and reset the stuff at results that won't confuse anyone no okay yeah uh so we'll just very quickly instead of getting it you know where where's the body that way our document body so we just need yeah we can't use that nippy bit of code now oh yeah we have to say uh get can I buy the I really forgot what I called it that result that results yeah very good okay child image super pick that nice okay now you can remove that can't sound like I have to wait because Leanne on line 26. yeah uh and I suppose we can just actually we can clear out the image right so that results clear no remove children remove child and then I think you have to do image inside of it I want to remove all remove children yes I think that's such a brutal name yeah horrible I think it is removed children remove Childs clear um yeah remove all children creative before a pen JavaScript how came to this before perfect okay so lots of people have explained the mechanics of clear which it sounds like oh geez just just tell me uh jQuery you can use the inner HTML with an empty string but as we're only going to add one at a time anyway I don't think we need to worry jQuery jQuery has empty we're not going to use jQuery oh I know jQuery is so nice isn't it is it clearly let us know what you think it's Jake oh jQuery is Ace look it just says remove or clear you know it's just so nice yes they've removed child because we're only gonna have one well no we can have more look there is like there's now two yes but if we run remove child at the start of the function there wouldn't be two oh that's actually a good point that's actually a very good point I think you need to tell it what to remove though but that's like if that's remove the results anyway in that case you can do in our HTML with it yeah all right see that pair okay so that pig I play child is not a function yes correct is it well because it's just oh right okay uh so a const results equals results inner HTML and then results also we use that yeah okay cool we have a bat we have another bat oh like we only keep one image code got it hope to see you again soon agrees yeah looks like that's probably like the best way forward I suppose Dave says jQuery is probably great but it's not really used anymore yeah that's a shame I love how Michael is so stubborn well yeah I wish the answer was said the same oh I just love her stuff anyway are we yeah I think so yeah yeah maybe the whole one second thing is let's do 200 no 200 milliseconds okay okay that's actually quite Snappy yes it is shortening our built-in latency there yeah there you go we have improved it five times stuff the website that's what you need to do like just just litter your code was set timeouts everywhere and then if somebody asks you to speed up new release with 10x to our speed yeah exactly there you go like and you can then go and get a promotion hey I have improved the website five times okay so if user has a back question display buttons with four bad questions so now we know how to actually reset this thing we do Graves made a good point that an image hard-coded into the HTML and just changing the source attribute would be a lot more efficient and it would be wouldn't it but I think we should move on for now to our um back questions yes yes that would be more efficient because at the moment we're adding a whole new image onto the Dom every single time yes but anyway back questions back questions yeah buy questions uh uh bad questions then if user has a bad question display buttons with four I have a bad question so we run here we run back questions function yes what so now we want to render do you know what what they've just said that that's just made me think it would be so much better to have the image in the HTML and the buttons that we need for the back question I just have them on display none and then when they select from the drop down we can have display that's awful it's not awful it is awful because you have like uh stuff in the dorm literally without actually any use no I think you you should redraw for the whole thing from scratch which is why I was like yeah changing changing the source kind of makes sense but it's uh it's like not super reused like yeah if you have to redraw it oh well okay so it's like maybe from Dom perspective it is more expensive to delete element than to replace source but then you know the the app that we have has only one image so you know yeah and anyone who came with a screen reader would see absolutely everything already wouldn't they I mean you could work around that I guess with like White there is no there is no requirement like it's not slow it's just a one image it works so I would at this point we're talking about efficiency yeah it's just one image so okay and I feel like we redrawing this whole thing it's just much easier because whoever needs to make changes to this code it will be easier to like quite frankly it will be easier for myself to make these changes because I'm sure by in another half an hour I'm not going to remember what this function does all right you've convinced me we will continue with well it's the first with rendering an odd button thingy um wow Paris is six months into his crimber yes that's all right good luck thanks for the great content that's a huge compliment thank you for coming back I got no idea I think so oh yeah that's how I do it okay cool but we need four buttons four questions no well this is where I think we need to make an object what was it supposed to be actually the user has a bank question display buttons with four bad questions and the right functions and then answer the collect question Michael we need to make an object with the back questions okay don't we and then we can add other back questions later okay let's just create one button and see what we actually where we go from there okay there's not a glass I know I forgot mine foreign how long do bats live okay 20 years roughly really no one more days maternity so if you see a bat next time you can think oh that might remember the turn of the millennium [Laughter] I mean 20 years that 20 2003 probably doesn't yeah but some bats can lift to 30. well so why is the answer to this 20 years fine you can write average 20 years up to 30. there's a zoologists over there I prefer that that's news to me I did not know about to live that long I thought that I live like hamsters or something I mean I can see why because they're so small but no so yeah let's see what this does uh yeah but then I need to results got a pen child button how often do you guys do lives uh usually if you're one or two weeks yeah time I'm late hello hello well you can watch it in the replay yeah how long do I sleep okay there we go so that works okay we have a question button yeah so and then presumably you can go button Dot add event personally click oh yeah yeah actually I'm not sure we should do all this question um what because we're going to want to use get Elements by tag name button so we can add an event listener to all of the buttons yeah we have added an well listener to all the buttons well yeah at the moment there's only one but we're gonna yeah is this how you operate at work like well he's working at the moment so yeah but like just just add a loop you know okay that looks I is less than four five plus class yep except not by far because we're not in 2008. it's fine come on this again um uh VA Police uh so let could that be a const uh probably not actually no I don't think it isn't normally is it yeah uh but in a text add event listener a pen chart so these so I'll need to Loop through these right eventually yeah well right now so you look people already kicking off about that I didn't know that much triggers people that much come on it's just a bit of simple hoisting that's not Dave says it can't be a concert I'd say yeah hello from the Philippines okay in the loop virus fine especially if it's an eye like bats can live as long as the last time VAR was used [Music] people get really strong business about but like such a small thing but um make an array with questions and reiterate through it yes but then to be an object though yeah but then you have to exactly have to answer it so there are all those questions so oh actually oh yeah yeah yeah I suppose so where's it I think it's an interesting point though you get triggered by being told not to use that cliche that's q a we did this last time reiterating foreign why why do you need the mouse look um nice grams uh JavaScript cat timeline we did this last time so we could probably borrow some code from here uh no but these these were arrays of objects but we don't I don't think we want to raise up objects no I don't think we need a rare object because it's um yeah so what I'm gonna do is I'm just gonna create these keys and then they have values I suppose okay will that work I mean it should work right let's just Jason can be keys I think thank you again if you know how that impacts performance feel free to unlike me because I have no idea if a long string key is any good but would it make a difference I suppose anything in large enough quantity can become slow well I guess if you have like a billion characters yeah yeah but for this I suppose it won't matter so yeah and what I was wondering is you can then go for it's like but so you can go back to q a but entries that was that like um object dots what you got keys probably the case ah okay so object keys and that gives you an array of the keys cool so I think that's what I'll need so I will need that old one so okay okay dots keys q a dots for each yeah and then for each of those so I'll just paste that back in for each question yeah yeah HQ uh do this Q can I do that can you answer question how's it going to know which one's the queue though well it's it's possible argument okay all right this is a little bit mythical but let's try it so so I take grab this object I mean because I kind of have to lift it to the top but see if if it was a wire it wasn't that I wouldn't have to do that I think that's a benefit like maybe we're missing a trick here uh uh Q yeah okay let's I have a bad question okay answer questions uh okay okay we have the Buns cool we have the buttons we have the bird how do we style this I think my question was though um how does it know that this side is the cue and not this side uh because when you so object is well a global object and with the function keys takes an object and returns you an array of keys on the left are the keys yeah so all all of these on the left it will basically return an array of whatever's on the left wow snazzy uh and I think objects object dot entries will return you whatever's on the right no so these are the keys and this will be the entries so how are we gonna get their answers out then ah so I suspect with us entrance business uh actually no answer no I I think answer questions will be fetishly forward because you'll just have a queue and then you'll just say hmm anyway I'll just cancel a lot because I don't know how to display that I don't know how to explain the answer for now uh I'll just say you know console log q a and then you just access that one cute though do you yeah but it's like the key will be the question and whatever's return will be that I answered all right let's give it a go uh so I have a better question how long do your bands live undefined okay so yeah but that's what I mean I you know okay pointer event what ah right of course of course I've got because Q Dot uh so that that's the event what is the event says I always forget about your friends Target value K Dot dot Q Dot Target value what is that so basically you when you click the button that's the event even gets passed in but now you're getting the value depending on which one you pressed except it does not work maybe my calendar fine but uh I'll just do that and I'll pass in did not give parameter in events says Ashraf I'll just do that so uh our function and pass the keyword too there we go yay I thought that Q would get passed in ah because that's the first the first argument is the event anyway okay uh a question up to 30 years okay it's working people how what are baby bats called pups yeah what is group of a colony interesting how fast the bus fly up to 60 miles an hour wow one more word that's faster than I drive much faster it's like double the speed I mean and before you know you jump to an exclusion I remember that once down had to go to Bristol and it took her like dub all the time that I thought fee would take double the Google Maps time yeah exactly it's not like I think that she's like it's like Google Maps has to adjust editing asks good day uh what's the name of the streaming software you are using today I am using streamyard yes highly recommend um anyway so how would I display these answers oh yeah so what I was thinking what I was thinking that why does it not content why does it not find anywhere but maybe it's the second argument no no but anyway to render a paragraph about that console log then yeah I think so I think so but we will need sounds okay as long as const antly see why I'm thinking right now every time you click this button you just render a paragraph every time you delete any of these buttons you will be getting uh new paragraph answers oh okay so in the top of back questions I think you can render the paragraph there and then in the answer questions function you can start off by giving it actually you can just change the text content with equals and then you won't be rendering a new one every time so at the end of this you're saying that I can ah but then how are you going to access it because it's going to be scoped into that function isn't it it will be an adult will it it should be okay hopefully actually yeah I think you're right so you're going to give it an idea at this stage yeah yes sounds good um do you have a link to the streaming software streaming.com I think if I open it and get the link I will break the internet I guess extreme yard like a backyard um but QA right oh well yeah also release event I don't want that it's almost called a child okay now constant equals document God element by B but q a p Dot in a text equals stuff online 64 yeah okay I have a bad question boom add to 30 years magic anyway if he selects a bat option make the bats move across the screen oh actually this might be one of those streams we actually managed to feel to finish this in before okay all right let's try this one uh function move bats look function fly my pretties okay okay so how do you do that [Music] um rat response we just need to move that don't we yes just remember that half a cup of your head no I just read it because that response is when you do if you click this you get this right oh this is a bad response yeah although to optimize this we would remove the previous that is not defined yes it's in here okay so now we just need to move this move this is bat response isn't it yeah oh oh I see so I reckon we can set up the animation in the CSS and then just add a class that response dot um classless dot add foreign [Music] this is a really good resource for pre-built um animations um slide rotate okay that's not what we're about to do swing neither is that oh no look exits slide out elliptic work swing out no no roll out okay no let's go with slide out well yeah that'll do so now we can copy this from copy class in here and call this fly and then these are the key frames with a little credit which I will leave in and then we just need to re-name this to try I think why are there two of them webkit and not webkit once was Safari another one as well all right yeah yeah maybe that's it that is not defined still I'm over in the saver okay class list dot add fly yeah but I think you need to okay hmm I mean why did we um we don't really console log what it's getting with that response then uh I think we can just add it here right is that how your class list dot add yeah I think so craft how do I have a class name yeah it's class let's start add animation JavaScript oh you have a hand because this is still the old name right yes yeah I think they actually can just keep that in like that and then we haven't changed anything huh there you go I mean that's quite an underwhelming fly but you know it kind of does what it says on the Tim uh but that removes the thing yeah like the paragraph is not there anymore that's fine we're allowed to reset button yeah we'll add a reset button um this will be in in the description chat back did you enjoy this yeah it was fun it was fun but it GPT is hard you've only had a couple more hours is this using chat GPT API that would be good but we actually we actually might maybe the next stream we will try to get attention to the API key and see how to actually work with API look at this SJ belly says ironic face and I've been afraid to get a developer job yeah there you go see if I can do you can do it too I think this is inspiration yes chat back API index Champions uh we will be back in a couple of weeks let us know in the comments if you've got some ideas of what we can build next oh I think Pharaoh says wait why I think that's the question about the say if you have see backpack you have this paragraph yeah because we have that paragraph right here as a separate thing and then in JavaScript once you enter into the text content when it becomes like that response class list ad so we yeah so we add that class to the paragraph and that kind of mutates the whole thing and because the Dom is not reloaded that class is always attached on it so once you once you click it it disappears and uh it's gone so you have to actually you can just do that with CSS yeah I suppose if you do that animation end mode or something I need to fix for it it's probably remove that response oh no yeah I want to yeah so remove it hmm yeah that's actually a better way submit that removes nice all right okay okay cool do you want to get a pumpkin is saying Michael that we should do something with chat GPT next time oh of course everyone everyone loves trading but we should do something with pumpkin chipity [Music] closing thoughts campaign I'm off okay bye everyone thanks for coming see you later everyone um oh no wait no don't do it we can't just hear this Friday but you know if that's your last day to this week then enjoy your weekend well for some people the weekend is Friday yeah exactly so enjoy hi everyone [Music] my neck