Y what is going on Papa fam welcome back to the channel today we have something special for you guys the intercom 2.0 clone now this is one of the biggest and I keep saying it gets bigger and bigger because this we just keep elevating on this channel I'm telling you today buckle up get your coffees ready because this is going to be one of the biggest builds I've done on this channel period and it's also one of the coolest builds I've done because you can take this idea and convert it straight into a SAS so it's crazy stuff guys crazy stuff we're working with three big companies today IBM you guys know about IBM clerk for authentication my favorite authentication provider and neon to handle our postgress yes I said postgress database so we're going to jump into a demo right now let me go let go let's go ahead and scream out where you're watching from right now on the channel guys we're going to dive into the demo of the intercom 2.0 clone right now buckle up let's check it out assistly now guys I'm so proud of this this is actually such a huge build it's insane here we have assistly your customizable AI chat agent we're going to go ahead and continue with Google but we also have email and password sign in I'm going to sign in the way that I like so in this case I'm going to log into my account oh look at this we' got South Africa we've got Canada Nigeria Finland Dubai United Kingdom there we go guys what is up let's go ahead and look at this guys your own dashboard and you know I don't do half measures this thing is fully responsive you're going to learn all the greatest Tech about TN CSS how to keep things you know perfectly nicely designed and also I love the design here right so welcome to assistly your customizable AI chat agent now what is intercom if you didn't know it's basically a chat bot that you're going to put on your site and you we're going to let you customize it but suddenly stop talking show us the actual demo let's go ahead and create our first chat bot and I'm going to go ahead and create a chat bot called the papa fam or let's call it the YouTube chatbot okay and then we can go ahead and create our chat bot and you can see like lovely UI boom it goes ahead and loads and we have our chatbot right now I'm going to go ahead and already show you a pre-filled chatbot that I done earlier so if we go to edit chat Bots you'll see I've got a couple we've got the YouTube chat bot Zara sales assistant and we've got the zero to full stack hereo support bar now the goal of this build is we're making an AI agent that means that we're going to tell this I agent here's the information you need to know and then we're going to basically build a custom chat bot that anyone can come to at any time and talk to and yes it works perfectly so all you have to do is go ahead and say Here's what your AI knows and you basically provide it a bunch of information so if we let's go ahead and add something here let's say the papa Farm is the best developer community in the damn world smash the thumbs up button in the world right I'm going to add that and you can see that we got lovely toast notifications here and now this is what the AI knows about me right knows about so when we essentially put this on the website all you have to do is go ahead and put this on the website right now obviously this is Local Host because I'm running it locally but I'm going to show you how to go and deploy it very shortly so let's say you copied this link now we went ahead and put the link on the website for someone to go to and they went ahead and went over to Local Host as in the we the link that we just provided they'll reach this page now let's goad and say I am Elon Musk and I'm visiting the papa F right I'm going to say elonmusk.com let's go ahead and load it up and look at this guys welcome how can I assist you today I want to buy zero to full stack hero right and this is where it gets insane guys all I've done is provide it with the information so it's a full stack build right now it's going to go full back end front end oh interesting I made one little mistake there actually let's go ahead and try one more time I think I've actually I think I messed something up when I deployed earlier so I'm going to try out my my full build here there we go let's go to this one uh refresh and let's go to I know so you can update it Al always nice I'm going to go ahead and go to this link right now so you can actually go and chat with that right now if you've got the time to go and check that one out let's do sunny sunny abc.com right now let's say hi and let's see what it says so hi there you go that's right that's perfect I changed one thing before I went live right so there we go hi and let's go and say I want to buy the course I want to buy the course and now watch it knows all about the course guys and this is fully responsive so if you want to join going through a full stack here boom you got this you got perfect chat but now if I want to go and say hm I'm not sure if I want diamond or platinum if I want diamond or platinum right so in this case look at this it already uses the context that we gave it and it's going to be a perfect chatbot think about how useful this is this is literally a very valuable SAS application right now it's already got the checkout links and everything say I want a table comparing gold as well as those two right see I can talk very openly very Loosely and watch this guys absolutely incredible like what insane it's giving me full contextual chat right this is insane and now I can go ahead and say okay is there any discounts and look at this wait for it so imagine this was actually up this is a very useful app right you can Market this and SAS like put on SAS there you go look great news since you see me really interest I can offer you a special coupon code for 10% off it's even using emojis Diamond checkout link Platinum checkout link these are perfect links they actually work and they take you over to the course so if you want to could join diamond for example click that boom now you've got a new customer from that chatbot right and you can even use podcast 10 for 10% off so absolutely crazy and what we we took it a step further guys so I'm going to show you if I go to the actual website now and we go to view sessions you can go ahead and see let me go ahead and refresh I've actually not oh I'm logged into a different account now sorry guys I messed something up let me go to sign out and go back into my account on this demo I was talking into a different account which is okay we can go ahead and do that I was testing a bunch before I started up but we're all good now we're going to go ahead and view sessions and look guys we've got the zero to full stack hero support bar and the Zara sales and look at this beautiful accordion very nice accordion here if that one's already open that one will close right and you can go ahead and check in chat look 2 minutes ago this was me click into the chat and now you can review the chats that are being had on the website to your AI chat agent now think about just think about for a second how useful this will be right you don't need customer support anymore all you need to do is go ahead and create yourself a chatbot we're going to do it one more time we're going to create ourselves a chat bot we're going to go ahead and say you are a Zara sales assistant right and if you nobody knows Zara is it's just a shop right let's just say uh let's call the clothing brand let's say papa Farm clothing assistant okay create chat bot okay then now all we need to say is you sell t-sh shirts and shorts um everything is £10 an item uh there is a 30% Black Friday sale okay uh if anyone asks where to buy send them to www.act.com right or whatever you can do right so in that case boom I've trained it up everything's good copy that link I send it off and then you go to the chat B and now I go and say okay so I'm Elon Musk I'm shopping on the website uh's see Elon sorry right let's go ahead and chat to this bot now say hi there I want to buy something and now look it's automatically going to come back to us boom look at that we have t-shirt shorts each item is £1 we have a 30% Friday you can reach our collection and make your purchase at pap.com boom crazy and now this would go ahead and chat with you and obviously I've did I've done a very simple example here so go back I've done a very simple example here but you can imagine now the power that you can have behind this guys like look aara sales assistant you can go ahead and say you know uh the website is zara.com you close 11:00 p.m. on Saturdays you open at 9: and close at 900 p.m. Black Friday is 30% off you're located in Dubai Mall absolutely crazy stuff right so much power in this simple simple I was about to say simple build but it's not a simple build it's going to be a massive build right so get ready guys buckle up already at 100 likes that is what I'm talking about absolutely insane stuff we're going to go ahead and dive into this one so let's break it down on what you're going to be building today I also want to show you there's so many cool things I look the way this sticks to the top the UI on the mobile everything is fully responsive we have active loaders all this good stuff working and look at that guys like absolutely amazing stuff and not only are we doing that we're doing so much behind the scenes we have a full stack build here we have the front end which looks absolutely beautiful then we have the back end the back end we're proxying our own Apollo client that way we don't expose any secret keys we're doing things at a production level and of course we're using SQL database to do so today right so I'm going to show you all about this kind of stuff we're using graphql a bunch of other stuff so let's dive into what is powering the authentication for today's build so the authentication powered by the guys over at clerk now clerk is absolutely is probably honestly my favorite favorite favorite favorite authentication provider they are sponsoring the video we've got three amazing sponsors today right that clerk is one of them uh guys you got you've got these amazing chat elements right so you can go ahead and log in with so many different social providers you've even got multiactor you've got Biometrics you've got email and SMS you even got magic links now magic links are one of my favorite things because honestly they're just so simple when you go to a website you just want to enter your email click the link to log into your session simple as that they handle the security and everything is done right you can then go ahead and tap into all of the good stuff like web hooks you know all that good stuff and it goes ahead and will detect for Bots as well so you know it's perfect if you want to handle authentication in a absolute Breeze you can go ahead and integrate with nextjs remix all the good Frameworks that you know about I was about say Ruby and ra I don't use them but here we are we're next yes right and then you of course you got your amazing databases that you love and go ahead and use and they also do a really nice seamless integration with neon which we're going to go ahead and cover today as well now our database what's covering the database now you guys scream at me all the time sunny all you do is Firebase all you do is no sequel so I listen to you guys I reached out to the boys over in neon they are amazing I'm telling you right now this is like just look at the bloody landing page right neon.pdf graph ql interface which I'm going to show you how we do very shortly but firstly is so fast and not only that guys they have a really cool cool feature I'm going trying to find a picture of it so I can show you is it here I don't know if it's here I'll show you inside when we're in okay I'll show you once we're inside but guys they have branches right and I absolutely loved this feature the minute I saw it I thought that is genius guys so you can go ahead and actually Branch your SQL database and act and your data with a single click or API call and what does this mean look so if we go ahead and check out the branching look at this you can ACC access isolated database copies for development this is so powerful because you can go ahead and have an copy of your production database for your developing purposes right so that way you can go ahead and just you know mess around with a a copy of the database in such a simple way and then you can easily go ahead and migrate that into your uh production database let's call it so it's so easy to set up so easy to spin up those different branches and I'm going to give you a full breakdown into the entire console and how we can do it and I've actually done something really cool today I've gone ahead and created something called a seed file so I've actually got it over here so if you go ahead and in the description we're going to send you a SQL seed file all you need to do is take that seed file go into the SQL editor and you'll simply go ahead and paste it and you'll get your entire database populated for the beginning starting point of this app okay so it's going to really really help you out in terms of getting started and all that good stuff and also obviously we' got all the nice beautiful things including the perfect table View so we can go ahead and mess around with it and look at this little preview of the branches amazing stuff right so telling you very very fast very slick and your boys hooked you up with a nice little uh link to go ahead and get signed up so that's how we're going to go ahead and set things up now how's the actual app going to work right so let's go ahead and break it down thank you so much amaj for the day uh for the donation I absolutely appreciate you so much dude this is huge already we got donations flying in I'm going to go ahead and draw on the homepage here okay so let's take our app for example example we've got the let's go ahead and show you so in this case let's uh let's look at the app so we've got our app over here we have our database over here okay so this is neon database one that we talked about so let's just put SQL over here right this is our SQL database over on this side here is our app on the left hand side now typically you can just go ahead and use something like a library or so forth but a lot of time you want to have a really nice interface between the two now this is where typically something called graphql can come into play right now graph Q is one of those LoveHate relationships because it's really awesome but setting it up is such a painful process right so in order to basically go ahead and get this link set up correctly you have to generate the correct schemas you have to make sure you've got everything down perfectly with your mutations with your queries and it can sometimes get a bit like to the point where I don't want to personally spend the time and do it right until I came across the guys over at step Zen now step Zen if you don't know them they're actually in a few of my builds before but they got bought out by ibbm yes the big boys actually realized how useful the tech was and now it's IBM API connect Essentials right so this is basically how we're going to go ahead and generate this graph ql connection so easily it's unreal okay so this is what we're going to be doing with IBM today so you can go ahead and see for yourself the link is in the description to go ahead and get started but it's called essentially step Zen is now called IBM API connect okay I'm giving you a little demo right now you can see for yourself this is the demo they have on their website we're going to essentially build out all of this schema but it's going to be done in automatic fashion and I'm going to show you how we do this all we're going to do is type in steps and import and then we're going to pass in postgress right and then we're going to basically give it a few parameters and this going to generate the entire graph ql schema by itself via something called introspection so that is so powerful and then we can query it and get all the benefits of graph ql so this is absolutely huge huge it massively simplifies the API creation allows us a ton of flexibility and of course is backed by the guys over IBM say a massive High Avail availability and scalability behind this platform so you can be sure that when you're using it ain't going to go down Okay so we've got a ton of things to go ahead and get started with so there is so much Tech to get started here I'm sorry guys if I'm taking a bit of time but I'm really excited about this if you can't tell you're going to need a coffee today because there's a ton of stuff to build right today we have nextjs right in fact this is going to be enfor 14 but if you are watching this when 15 is released don't worry about it 15 works it just essentially changes the way caching works right I'm going to make a video on that in the future as well so you're going to learn about caching in today's video you're going to about learn about client and server components and remember guys this is all free so all I ask is you destroy that thumbs up button to go ahead and support this channel right you're going to learn all of this good stuff then we're going to have postgress sequel right so postgress squel let I always forget two or not we got postgress sequel I know it's out already next year 15 but it's not it's not in it's the release candidate it's not the the main release right so we have postgress SQL which is going to be using the neon DB then we've got graph ql on top of that which is how we're going to talk from postgress and then we're going to talk to our app like so and then we're going to have a ton and ton of things like you know tell when CSS I've got you covered with typescript and just think guys this is all coming to you a week after I did a huge build just like this like what absolutely incredible incredible stuff from our team man honestly I've been working over time to get this out to you guys it's absolutely crazy right we have clerk to handle the authentication and honestly it's the fastest nicest authentication I've ever used in my life period they know how to do authentication and then we have the Shaden library for all of the design stuff right so Shaden and you probably may have heard of something called da UI we're also covering Daisy UI today so I think this is pretty cool I think it deserves a smash Thumbs Up Button we have over 200 people watching on different platforms right now it's absolutely awesome thank you so much for tuning in and we're going to jump into the build right now it's worth mentioning as well that all of the chat that's happening are is actually using the open AI completions API so we're going ahead and we're actually preparing this with all of the stuff being pulled from the database so essentially we are querying this database building out everything that needs to be go ahead and given to this has a system prompt so that way our AI agent is ready to go ahead and serve our customers and then boom we go ahead and return the response right so one more final little look at this guys these are the chats that are going to go ahead and do so if we go ahead and check out something like for example the Zara sales assistant we go ahead and we can even click this link right now I'm going to say sunny and I'm going to say Sunny abc.com and let's go ahead and click loading even this modal guys you're going to learn how to do models all that good stuff right it's just it's a huge app I'm not joking it's a huge app this is crazy right I I almost saw that it's a huge app so in this case if I go ahead and say hi there what time do you close look how easy it is guys like you've made a custom chatbot just like that and you can share that link out and give it to everyone look hi Sun we close at 9: but on Sundays we stay open until 11: oh awesome stuff look Black Friday is 30% off right now come visit us at the like like what crazy like and it was so quick to set up this chat B think about it build this put lemon squeeze in front of it or stripe SAS business done like that's literally it you have a SAS here a full SAS I'm giving it you for free right so crazy crazy stuff yeah I see you guys tuning in from around the world right now let me know again where you're watching from right now if you got into your oh yeah so we got Quantum Universe here saying if you're not already into full zero to fulls you're missing out a lot yes 100% I can't even agree more right before we jump in guys if any of this goes over your head or it's too confusing or it's too difficult I feel your pain you can check us out at0 full stack hero the link I'm just going to leave it in the description so you can feel free at any point if you get stuck dive over into there right and all the links to getting set up with every single service I mentioned today all in the description okay everything is in the description so you can go ahead and feel free to check them all out and if you do click through those links it helps the papa F because obviously we have an affiliate set up with them right so in that case I would recommend please click through those links it helps us out and allows me to do more things like this for free for you guys I can't believe that for free man when I was learning to code this this was never a possibility right so in this casee let's jump into we got I'm dam in the house whoa yo what's up let's go ah and do warp right so we're going to start off with the build right now I'm going to go ahead and download the music down I actually have a new playlist the link to that is in the description as well so everything that you're looking for links are all in the description okay now we're going to get into a flow State because this is a big app I'm telling you guys this is a big app right so we're going to get into a nice Flow State and start building out every little thing think about how many screens we're about to build okay so all I ask is you destroy not not just touch it you destroy that like button okay let's go so we're going to go ahead and go into our documents I like to put everything in my builds folder and then we're going to go ahead and do create next app right so create next app oops sorry create next app right so in this case I'm going to call this one YouTube let's call this the YouTube assistly AI app and let me know right now what do you think about the name assistly I think it's kind of a cool SAS kind of name right would you like to use typescript yes would you like to use ESN yeah all the defaults here I'm just hitting enter all the way through amazing stuff right so now we're already closing in on 200 likes this huge guys the videos are absolutely blowing up on the channel lately the positivity on the papa fam is insane marvelous thank you so much for that huge donation I appreciate you whoa he dropped 27 Canadian 28 Canadian dollars yo I appreciate that thank you so much okay assistly yo he goes it's a very cool name thank you let's go into our YouTube uh assistly app so YouTube assistly AI app and then we're going to do code dot okay and I'm going to get into a nice little Flow State check you guys through everything I'm doing today so at any point if you get a little bit stuck don't worry about it just drop a little comment in the chat and I'll try my best to accommodate as much as I can okay we're going to go ahead and pop this over here now now I already have a deployed version of this app so yes I am going to be oops I'm going to be deploying this app as well to Vel to show you everything how it works and there's so many steps so make sure you buckle up and get excited for this so we have a deployed URL here so I'm actually going to go ahead and copy this one this is going to be our reference sauna goes how are you I'm doing amazing bro thank you so much for asking all right we're going to cut the terminal and then here I'm going to do command J Comm on B and as you can see we've got our output now you want to prepare yourself by closing those you just got to ter on mpm runev now at this point it will go ahead and spin up on Local Host 3000 so I'm going to do Local Host 3000 and we should see a nextjs starter right so this is where we want to be this is everything looks perfect I think the text size is all good as well just let me know if I need to change that I'm going to go ahead and just reduce my screen sizes everywhere so I can go ahead and work a bit cleaner okay cool let's dive into it heading over to app page. TSX this is where we're seeing all of this being rendered out we're going to go ahead and grab everything inside the div and just go ahead and remove all of that okay hit save I'm going to show you as we do it now inside of that main tag we're just going to type in H1 let's build assistly assistly right the AI companion app the AI Agent app and basically it's the same thing as intercom right except it's AI doing the talking which is absolutely huge Kenya here we go # Papa amen man that's what we talking about okay so at this point we're going to go ahead and you see there's a bit of styling here and I don't want that right so we're going to head over to layout. TSX we're going to chop off this we're going to get rid of that you can modify the metad As You Wish I'm keeping things relatively simple just for because it's a demo somebody goes what's the difference between vs code standard and Insider Insider is essentially just the beta updates so I've got so far set up with this now so I'm not going to change it but inside of global. S I want you to delete everything inside except for the top three okay then we go back over to page and we're going to go ahead and remove that sign so now you should be in the top left Okay so we've essentially got a clean slate now this is going to help us out for getting started so first things first I want to do the authentication portion because the authentication portion essentially wraps the entire app okay so in order to do that introducing clerck right clerck is going to handle our authentication code size is too small okay I'm made it a bit bigger hopefully that helps you I think that's The Sweet Spot all right so in this case let's go into our clerk so we're going to head over to clerk.com now in the link in the description head over to the link in the description and you'll reach this page I want you to sign in and then head over to your dashboard okay now once you got your dashboard you're going to need a couple of things heading over to our code editor let's go over via code editor I don't know what I'm talking now but inside of here underneath at this level click on package Json new file and you want to create an inv environment file and in here we're basically just going to go ahead and put anything sensitive or even if it's not sensitive we're going to go ahead and keep our information in there right so at this point now oh look at this we got some new signin from H mail whoever that is so at this point we're going to go ahead and create a new app so I'm going to go ahead to the top create application you'll probably get a little popup because you won't have any apps and here I'm going to call it the assistly YouTube build assistly YouTube app okay assistly YouTube there you go and then we can select our providers now the nicest thing about them over a CL is you can just toggle everything you want if you want slack done slack if you want notion signing cool if you want metam mask as well for crypto cool very easy to go ahead and do that right now in this case I'm going to go ahead and disable these all I care about is Google right now we're going to go ahead and create and we've got an email okay now once we've done that Alger in the house as well bishes goes nice ha I appreciate you X go thank you for the B toat videos I've been working hard to give you guys oops what did I do oh okay I actually opened up my intercom I pressed the wrong button on my uh my little key there we go that's funny uh okay yeah I've been working back to back on getting these apps out so I appreciate the kind words okay now you'll get to this page and we want to click on nextjs now head over here we need to install the dependency inside of our code so simply copy this head over to your terminal command J Pull It Up Now what I like to do is create a second terminal over here so the left side I can see what's going on and then I can use the right side to install new dependencies cool the second bit these right these are the environment variables now whenever you're dealing with nextjs if you have nextjs next public in front of the environment key variable it means that it will be exposed to the client so you never ever ever ever ever want to put something important there now I do want to mention as well all of the code for today's video is in the GitHub repo so it's linked down below for absolutely free right the seed file is going to be what allows you to set up I'm giving you that for free but the GitHub repo is all in the uh the the link in the description so go ahead and check that one out to get started off right now you want to go ahead and copy this value and I'm going to go over here and now inside the environment. local file I'm just going to paste and I'm going to close this file so I'm going to paste I'm not showing you it because it's got sensitive values so I'm going to paste it I'm closing my environment file now okay so I've closed my environment file and what you'll see in your terminal is it say reloaded environment local so you should you should be seeing this as well cool uh we got India in the house yo what's up guys and now we want to set up our middleware now the middleware is essentially how we can go ahead and protect certain routes if we want to or do anything bespoke right so in this case to set a middleware next CH very simple at the top level at the package Json level we're going to go ahead and I'm just going to go ahead and make sure that I've got everything set up package Json level we're going to do middleware middleware dots right and then head back over and you should be able to see is now simply copy that example paste it in now clerk updated recently to something called core 2.0 now what they did when they updated was they actually fixed things up and uh oh a little delay on the screen yeah there we go threw me off they fixed things up and basically now everything is by default uh unprotected and you can protect certain routs if you wish in this case we're not actually going to protect anything but if you did for example you could do something like this right you can go ahead and have for example an is- board route so you can go ahead and import the correct dependencies and then you would just simply go ahead and do the following inside so I'm going to show you how you would go ahead and put this inside so here you can see boom right and then I'm going to go ahead and show that so there you go right so I just want to go ahead and say um code is still too small this is the same as as all the other builds guys so trust me just increase the resolution on your screen otherwise it gets a bit unbearable to code at that speed that that small that big sorry and also the G repo link yes it's paid guys because the video is free so all you have to do is code along with me for free and stop being lazy period or you can buy the GitHub repo but you see what I'm trying to do here learn and do it for free or you can pay for the repo which is like un real value you get like a ton of builds in there as well okay so period I think that's fair so at this point this will protect any dashboard route now we're not going to do this because I'm not protecting any dashboard routs right instead we're going to do a different way of handling our or but that's the we set up perfectly okay the next step is we have to wrap our entire app with the clerk provider so head over to your layout and we can see here we have the cler providers we've got a bunch of imports let's go ahead and pull these in actually we don't even need those the main one we need is just the cler provider okay so the CL provider is very simple and straightforward to get set up all we have to do is go outside of the HTML and type in clock provider like so boom and then we can go ahead and Surround everything and we have our clerk provider all set up right so in this case that was just a dashboard uh URL that we were essentially trying to protect if we were going to protect it that's how we would do it okay so now we've wrapped our up with the CL provider you can use any of these components underneath that point in the tree and the best thing is you all you need to do now is go ahead and save refresh perfect everything's working okay so what we're going to do now is build the header portion so can you guys see see over here how we have this beautiful header and look at this little button here it's absolutely beautiful we're going to build that first okay now in this app we're going to have essentially two sections we're going to have the admin backend section and then we're going to have the guest section the guest section is going to be towards the link that takes you to your intercom chat experience let's put it that way right so that's going to be where the chat Bo is ready that's the one that people are going to put on their website so that way people can come and chat to it then we have the admin panel and if you want two different layouts for everything in the guest side and everything over in the admin panel you can do the following approach now I forgot the name of the exact technique but I'll show you exactly how to implement it so where we have inside of our app folder it's the top level right so page. TSX represents the for/ homepage so what we can now do is we're going to create two sub folders okay so in this case if we have two like uh if we have parentheses it means that this won't actually count as a root if I didn't have this this would actually count as for/ admin but in this case this is like an invisible folder if you think about it right but it gives us some pretty good superpowers afterwards and I explain them afterwards right so in this case we've got the admin and we've got the guest right now in the admin what we're going to do inside of admin we're going to have a layout now this layout. TSX basically applies the layout that we're going to set up here only to Roots underneath admin and then we can do the same for guest right or in this case in guest we don't actually care about custom layout so we don't even need to modify that but inside of our admin now any route which is underneath this we can go ahead and do that right so in this case page. TSX I actually don't even want it outside I want the page. TSX to only exist in the admin right so if you ever go to the this website so if you ever go to this website for example like let's say this is on my URL and you hit it you're going to come to the dashboard because for nobody should really be coming to the homepage unless you're trying to set right and you can obviously customize this to actually sell it to someone right but right now if you weren't logged in you would see the this page you would go ahead and see this page right here okay so obviously this could be your sales page for whatever reason all right um so now for the layout over in our admin panel we're going to go ahead and simply do the following we're going to say RFC and if you're wondering how the hell did he do that right well in this case I'm just first I'm going to say root layout or this going to say admin layout layout like so and now in this instance where we got the admin layout that firstly that little extension I just showed you there I show you every time if you go into extensions type in es7 you'll see this one right here all you need to do is go ahead and install that okay and I'll give you little Snippets we can go ahead and get rid of this and in this instance for this layout we're going to go ahead and have a div and then we're going to have our header be shown on any page inside the admin panel we're going to have a div under here a sidebar panel right now the sidebar panel is responsible for this beautiful sidebar so let's quickly log in again so that way I can showcase it to you all somebody goes turn the music down a little bit I think the music is pretty good but I'll turn it down a tiny bit okay and uh there we go we got created it and this is this is the dashboard and the dashboard is responsive so it even comes over here afterwards right so we got the sidebar then we've got the div and inside of here we'll render the children and this essentially is any sub rout underneath this right so a little trick that I can show you is if you ever get confused as to how to set up a layout all you have to go ahead and do is take the children and here you can see for example if we you see the root layout here you can grab everything here copy it and you can go to the layout and paste it inside here right and now this is exactly the perfect way to get every time okay so it really really helps us out um Can this build be hosted live for free yes this one can be hosted live for free yep perfectly so and also uh someone built a Storyteller and they had an ER guys if you've got an error and you want to talk to me about it head up to zero to for.com that's what the weekly coaching calls are for I obviously can't help you debug right now on a live stream okay little uh water break guys we're about to destroy 200 likes keep smashing that Thumbs Up Button let's keep on going oy favorite coding artist yo what's up man good to see you okay now we've got the admin layout so for the admin layout now inside of this rout and by the way guys because we only have you see see the first layer so this is invisible folder so this is kind of a flat layer here the page. TSX if I was to have a page at this flat layer it would Clash so you can only have one page at the top layer right and after it has to be nested underneath a foldo so at this point we're going to create a header so inside of our com uh our files we're going to create a folder structure called components and then we're going to say header. TSX RFC to get inside of our header and uh now what we're going to do is we've got the header so here we're going to Simply put header for SEO purposes and then inside we're going to start styling this out now first thing we're going to build is this corner unit now this assistant assist Le kind of logo that we got going on over here that's actually from a really cool Library called dice bear okay so in fact I'm going to go ahead and install dice Bear right now so if you head over to dice bear core you'll see the setup right so if we actually go to dice.com it's better one documentation and now you can go ahead and see how to set up now JavaScript library this is what we need you need to mpm install the following head over to our code we're going to go ahead and pop it in like so boom that's great um some goes I was looking forward to coming along time watching with you don't worry you can go ahead and still uh check in with it right download people can start with that helps people scratch um I know I know but I think it's good for you to start from scratch uh trust me guys everyone wants a shortcut stop it don't worry about the shortcut right really really really just like like follow from the beginning up every think about I start from the beginning every time all right so it's a good learning curve for you to do that if I was to go ahead and do the same thing it's going to really really uh you know make a bit of a painful thing so uh so let's go ahead and jump through so I know what you're saying but yeah let's carry on so at this point we we're going to also create an avatar component so I've installed that Library so that's good now we can use all those good things but here let's go back uh if we keep linking people yeah we' keep link linking people away it's going to get so confusing you have to keep it very simple right so inside the header we're going to have a link tag boom right link tag over here and then we're going to have assistly right so an H1 saying assistly and the H2 is going to say your customizable AI agent and I'm actually going to start popping things in like so there you go the hre for this will take us to the for/ root which will take us home we're going to import next T link tag there we go we got sisly and then over here I'm going to surround this inside of a div and I'm going to have an avatar next to it now what is an avatar it's essentially this right here okay so it's actually um where is it this little kind of design and this is actually customizable because depending on what we pass in as's a seed value it creates a beautiful looking you know nice uh nice setup so we're going to create that component right now so we're going to say avatar. TSX right so avatar. TSX we're going to create that right now head over to our Avatar file and inside of here this is going to take two props right so the two props here are going to be seed and class name class name is for the styling of course and then here we're going to have the uh seed and props as well so in this case say seed and class name okay now inside there we're going to basically return an image so this going to be using the nextjs image tag next Chase image tag like so um yeah uh what am I doing yeah there we go next closing tag there we go uh and then inside of here we need the the the exact kind of you know what is the thing that's being generated so I'm going to show you how to do it essentially what we need to do is import two libraries okay so the Rings is a collection and you can see they've got a bunch of different styles here you can go ahead and choose but we're going to use the Rings which is essentially these custom rings which look awesome yeah we're going to take that and then inside of our code we're going to go ahead and actually create an avatar based off of it right so what we do is we say constant Avatar equals create Avatar we pass the Rings as the first argument and the second argument is the seed the seed is essentially the value that we passing which will generate a different picture each time then we need to go ahead and convert this Avatar to something known as an SVG and we do that by saying Avatar two string now we can't give the image tag this directly so what we have to to do is we essentially have to convert it into a uh data URL and the way we do that is with this nice little string here so we do back tis for string interpolation we say data colon image/ SVG plus XML and then colon Bas 64 then question mark and then we have this nice bit of JavaScript here right buffer from SVG to string B 64 essentially we're turning it to a b 64 string and that's essentially just what a picture looks like in code okay so very very straightforward and then what we do is simply pass the data URL here so we pass the uh data URL like so like this and then we can pass in the out width height and we're also going to pass in class name and the reason why we do that is we then allow them to pass in their own custom styling if they wish okay so now we can use that inside of our uh header right so at this point we've got the link tag uh yep we got the link tag over here we've got our div now we can go ahead and say Avatar pull in our Avatar and the seed now the seed I've just gone ahead and been lazy here the seed I've actually found a perfect seed that get that customized exactly as I like it so I'm going to go ahead and say po Farm support agent okay and we're going to import our Avatar like so okay now this is freaking out because it's saying oh you're missing class name class name is actually a optional variable so we want to put a question mark cuz we don't always have to pass it in right now now just like that what we're going to do is before I carry on I'm going to go to my there's a little fly and it's driving me crazy right now and it's like in my peripheral vision okay so in this case we go to layout let's go into our admin layout here we are and uh oh yeah I mean I just have to put in so we say header and we import our header like so and now what we can see is look the header comes into the admin panel right which is perfect that's exactly what we want cuz now we can start seeing it so let's start customizing the header and we're going to give it a background white we're going to say shadow small text should be gray 800 and we're going to say Flex justify between okay and padding of five okay so as you can see a little bit of sty in there goes a long way for the link we're going to go ahead and say the class name is going to be a flex items should be centrally aligned so boom like so that already looks a lot better um we're going to say the text should be 4XL and it should be the font should be thin okay so I want all of the font inside to be thin look at that already really really nice right now for the assistly area we're going to go ahead and say that should be I have a space y of one yeah I just want to space them out a little bit and then text should be small and all good okay so that's actually pretty perfect now for the authentication part you'd probably think it's pretty tricky but it's actually really easy we have the div and then we simply have the signed in component with cluck and this is essentially a wrapper so if we're signed in it'll render the contents here and we simply say user button and we pass in user button so now if I'm signed in it will show a user button and if I'm signed out we can have the signed out button so signed out uh Helper and then we can have the signin button right so it's very simple signin button like so cool now if we do that look at that guys sign in is there if I click it it will go ahead take me to what I need to but before we do that I want to change a few things use a button I want to firstly show the name so that I'll show the person's name in the user button once it's available then we say flex and items Center and there you go already look at that we've got a nice header right there okay now over here we click sign in and it will take us over to cluck now this already beautiful out of the box didn't have to do much to go ahead and get this up and running very simple that's why I love clar so much go ahead and click continue with Google and just like that we can sign into our account go ahead and click continue and now we're in it will redirect us back to the original URL and in the top right look at that guys we have a beautiful URL and the show name property allows us to have this and look out of the box we get everything that we kind of needed right so it's absolutely amazing the user button and it also automatically is responsive so it looks absolutely amazing across devices okay so perfect stuff we've got the header already done and completed so we can go ahead and check that off next up we've got the sidebar okay so the sidebar a little bit more to it right we've got a few links involved a few bit of customization this is what we're building right now okay so the side quick little water break before we carry on but absolutely killing guys almost at 200 likes yo we have in the house OG Papa fan member that's what I'm talking about Greg p as well yo what's up good to see you guys got some Papa fan members in the house I love that right so in this case we're going to go back to our layout and here right so here this is where we're going to firstly style up a few things so this is going to be a uh Flex Flex column okay so everything underneath is going to be Flex column and I'm going to give it Flex one you're probably wondering that doesn't make sense cuz the parent isn't styled up well if we go to the top layout file the root layout I'm actually going to always apply a certain style here now I always want this to be a the screen width right screen height sorry so I'm going say minimum height of screen and this is going to be a flex container okay now with that in mind what's it called eventually after we've done all of that we're going to put the toaster here okay so that's something we need to do at the end afterwards so heading back over to our admin layout now and we go into our sidebar and what I want you to do is basically go ahead and say Flex once that's already done now and then here we're going to have the uh the the flex boox rules here so we're going to say Flex Flex column and then on a medium screen screen and above we're going to say Flex row okay so basically if you think about it Flex column um sorry Flex column so everything by the way is mobile uh first so by default mobile first is going to be Flex column so if you look at this this is going to be um what's it called uh I've done it the other way sorry Flex column and then we do the opposite Flex row uh I've changed that a few times actually so oh sorry yeah okay that's right yeah so you see actually what we're getting confused with here is this is a column assuming cuz if I show you look this is one Element and this is the second element so that's a flex row okay now the minute I go over to a bigger screen now it's changed it's become a in in a row fashion so the first element and then the next one is stacked to get next to it so we've got a row okay so what we're saying is flex column by default on small screens but on a large screen and above turn to a flex row and we're going to in a background gray of 100 okay and there you go you can see it there nice okay cool and we're also going to say flexx one I want you to use up the maximum space and that's why you see the gray padded it down okay how do we get access to this repo for free you code it I'm going to scream it at you guys you code it right if you want to get the repo it's in the description But it includes like 60 other builds that I've spent a ridiculous amount of time building otherwise if you want it for free just code it period right R cost go thank you for the awesome Del delivering this for free to community J awesome to thank you I appreciate you guys so much all right so it's a simple as honestly I I that question drives me crazy right now for any of the content that goes inside of here we're going to go ahead and say that that will take up the majority of the room it's going to be a flex container we're going to justify the contents to be in the center and you can see this because it's Center this is centering the content right now on a small screen oh sorry on a small um mobile view it's going to be justify Center on a bigger screen it's going to say justify start so justify start and then the items are going to be at the start as well we're going to say it's going to have a Max width of 5xl notice how this has got a Max width constraint and it's centered we do that by saying Max width and we say MX Auto and that applies uh padding on each side and then we use the full width like to make sure you see that now perfect looks really nice and you see how on a um it does justify start and items are at the start for a bigger screen whereas on the phone It Centers a lot nicer okay now for the sidebar let's go ahead and build this so heading over to our components we're going to go into sidebar. TSX I'm actually going to try out Jay's playlist right now guys so I'm actually going mix up the music a bit so let's see what Jay's got in store for us let's see if he's updated his playlist at all right so uh oh it says unable to connect to his playlist that's a shame one second no no we got it we got it okay see what let's see what it's about see if if Jay's going to get a p on the back today all right coding guys only way to learn T say let's build not follow the repo exactly let's build exactly if I if I just gave you the repo guys how what learning you going to show right will you be showing how to add the chat Bo as a widget no that's the only one I haven't shown guys so I'm showing you how to actually have it in on a separate window but the embedding of it in a widget I think is a separate video this this in itself is going to take hours I'm telling it's going to take hours to build this right so can buckle up it's going to be a long one Marios yo what's up because hello pop you get any sleep man you're rocking this week shooting content all the time you're amazing I'm so proud to be a part of this community hell yeah we got a diamond member right there guys Mar absolutely killing it inside the papa F and yes I am getting sleep but I'm on fire the the momentum lately is absolutely insane and I'm keeping it hot for you guys so that way I can keep the content coming let's go into our sidebar let's build this out right now we are building this lovely little sidebar okay so let's go ahead and do that so the sidebar we're going to have an unordered list to basically structure everything we're going to have three lists right so we're going to have three lists so list times three and we got emit pulling it out and then inside of each one we've going to have a link tag so I'll show you how you can say link * three and inside each one we're going to have a link tag oh that was nice wasn't it yeah then we can say let's just say link right so easy as boom boom right and it's obviously going to fail now because we haven't got a hre right so for each one the first one is going to go to for/ create chatbot the second one is going to go towards H ref it's going to be View chatbots and the last one is going to be the HF is going to be review sessions and that's where you as an admin can see how people are talking to your chat bot right and guys really that's so power like just think about that for a second that is so powerful right father Dev goes wow something amazing again the highest level as always I'm happy to see you again so soon yo the energy today is insane thank you guys I appreciate you we're going to import the next link tag there we go boom and right now before I carry on I'm going to go here and I'm going to just pop in my sidebar so we can do this and guys I want to tell you this took a huge huge amount of work from my side so really really I really appreciate you guys that's what I'm going to say I really damn appreciate you guys being there BG white and you can see there you go at the top nice and white there we go and then we can say text white and padding of five so we give a little bit of breathing room okay but right now the text is gone so the text white is because of this eventually we're eventually going to make each thing inside of there have a blue background right um you're pushing all of us forward you're a true inspiration to us all and we all to understand only hard work can move us for thanks for that yeah 100% agree with you man thank you so much for being here all right for the unordered list let's go ahead and say a gap of five between each item it's going to be flex and by default it's a flex row in a in a phone right so in a phone is flex row on a large screen and above it's going to go flex column so we're going to say large screen Flex column Flex column boom okay now you obviously you can't see what the hell is going on but you can see there it is right link link right so at this point inside of there I'm actually just going to style out the link so you can actually see what's happening right now for each link I want to do Flex one so that way they're each taking up equally spacing now here you can go ahead and create custom tailn Styles which is going to help you know minimize the amount of code that we're essentially copy and pasting here um so you can feel free to do that again that's all down to you guys to improve on the code uh I'll leave that to you now for the styling here I'm going to pop in my styling and explain it so we've got the flex Flex column text centered right and I'm doing this uh uh Flex rolling because I'm going to have an icon in here text centered text should be left on the larger screen Flex row as well so that way basically on a small screen you see how it's on the left and then the minute we get to a bigger screen you see how it changes to a flex column and then on a tiny screen we even hide the text okay so in this case we've got our rules to set up here so I'm going to go ahead and pop these in to every single link tag like so so we're going to pop these into every single link tag and then boom that looks a lot nicer already so look we've got bit of an easy layout there and then inside of here we're going to have a few icons now to get those icons we're going to go ahead and have to log in to our Shad not login we're going to have to go ahead and install Shaden okay so head over to installation and you will see next JS right so we're going to go ahead and head over to shen.com ui. shen.com and we're going to run this command MPX Shaden so let go ahead and Pop That in right now so boom MPX shadan uh latest in it default yep all the defaults are good this will go ahead and add it into our project and to get it started off we can go down you can add in custom fonts if you wish I'm going to skip that step I don't really care too much we're going to add in a custom button so here we go so the way Shad CM works is you essentially are installing and copying and pasting uh code into your uh component Library so in this case we added a button so it's going to head into our components and added a button literally done that and then that way you get full visibility over the code it's adding to your project okay now with that done we can go ahead and get started so we actually also get out of the box with this something called lucd icons so you can go ahead and you actually get this entire library of icons when you install Shaden so let's carry on pretty strong guys EV Evans Morgan what's up man um so Joel uh if you have two different headers for different sections all you need to do is add in a separate layout file here inside a guest a separate layout inside admin and then it'll serve that layout to each individual route underneath it that's how you do it okay so um we need the logos so for the first one we're going to go ahead and use something called a bot message square and I'm going to go ahead and import that like following so we're going to going go ahead and do the following boom import it from shadan and we can go ahead and see look at that boom link right and then we've also got the uh here I'm going to have a little bit of text just underneath so rather than just saying link I'm going to have a div it's hidden by default on phone on medium screens it in lines itself and then that's awesome um you don't yeah you need to set up your Shaden before you set up your tailing config that's actually a good point otherwise uh you end up it overrides your Tailwind config so don't make that mistake cuz I've done the same thing actually so tail in config this actually gets overwritten by Shad xen so install Shad xen first and then do that all right otherwise Shan has like a very aggressive approach there okay so that's that bit done the second link we're going to go ahead and pop in like follows and it's also got a pencil icon so here where that is we've got a pencil line we're going to import that from the top and then we've got our div which is the exact same layout and the last one same thing we've got the div and the search icon okay so doing really well out here guys going to go and pop that in and we got the search icon just like so and just like that guys really nice stuff look at that create chat boo edit view perfect okay now I have been yeah I was going to say bit weird was logged out for a second really great okay so look at that awesome and if we click on these it will say 404 there we go cuz right now those pages don't exist but we set ourselves up to go ahead and get the rest of the app built out so essentially the layout is done now so the good thing about this is that because because you built the layout now you can just start building out each page and that's pretty much as simple as it get you can start building out the create chat bot and so forth so this exactly what we're going to do we're going to build the create chat bot page okay so first things first we're going to build out this page so I'm going to close that off I've shown you that I'm going to close out Shad or keep Shad open uh let's go over here yeah so we're going to create this page the chat create a new chat bot screen okay um how do I remember everything it's constant practice guys guys constant practice it's a a NeverEnding learning game and that is why mentorship is so important and that's why zero to full stack hero is the best developer course and community on the planet period cuz we know how to do mentorship so head over to pap.com course that's all I'm going to say diamond plan Diamond hands guys Diamond hands that's lit your mentorship on a plate if I was learning oh my God I would literally be hacking away at that every day and learning from the best right so in this case we're going to go to our app and inside admin we're going to create our first route called create chatbot and because the parent is in parentheses is kind of invisible right so this is actually just going to be our web page slre chatbot and then inside we're going to page. TSX to build out the page for that right Mario goes get there and you will never leave like all of us for so many years now yeah and that's the thing guys I want to stress like our students ain't about for like you know a week or two Marios and I have known each other for years right so at this point all of our students we're like a the papa F it's a family of devs that is literally it guys create chat bot let's go ahead and create this page okay now first things first in this page if we go now to create chatbot you will see that we have a create chatbot page and I can go ahead and click back I can navigate between these two pages and you see how the contents are served because we prepared our layout file so the layout file very important to get right okay it's going to help you out a ton now what we're going to do is first create this UI and then we're going to go forward and do the rest right so that's where we go ahead and set up our database we're going to do postgress and all that kind of stuff we're going to use neon and IBM's API connect to go ahead and do that so inside of this step we're going to have a avatar so an avatar and this Avatar is going to have a seed and the seed is going to be uh create chatbot right I've just obviously just you know going ahead and generate it there so that's a random ones you can see that's how we did it and then underneath here we've got a div and then we've got the H1 and H2 for these a little bit of minor styling and I'm just saying on a bigger screen increase the text size essentially you see look so bigger screen a little bit bigger let's change up some of the The Styling rules here um we actually not going to style that one we're going to start it up here it's going to be a flex column we're going to Center all the items so Center everything justify Center on a bigger screen or medium screen and above we change it to a row okay so that's because on a phone I want want it to stack up like this on a um whereas on a uh bigger screen I want it to go like that okay then we have um spacing on the xaxis for medium screens and I'm going to add in a bit of margins here so I'm just going to pop in these things so what I'm going to do here is because you've seen me type a bit of our Tailwind already these things are pretty self-explanatory background white padding of 10 round the corners right so this is rounding these Corners right here and margin of 10 if I was to remove that you'll see it reduces the spacing around it so margin of 10 gives us a bit of breathing room okay so now that I've shown you guys a couple of times I'm just going to pop in those Snippets to help us get through the entire build a bit quicker right obviously when you're watching this back you can go ahead and pause the video and come back do you have a full-time Dev job beside this or or I have several businesses I have a software agency I have YouTube lots of things happening but I work for myself yeah um it's always funny whenever I do sequel everyone's like you should be doing Firebase when I do fire base you should be doing sequel so so good guys we're just showing you as many different Technologies on the channel so you can be informed of all of them and come back to this channel to learn okay so at this point uh we're doing amazing for time so we've got H2 we've got the form okay so this is going to be the form where essentially we handle the uh the selecting everything that goes on so uh this part chat B name and create a chatbot Okay so we've already got the button from chadan installed I actually need the input field so let's go down to input on Shan's website and we're going to Simply copy this prompt go back over here command J pop it in and install it like so okay this will go ahead and pop it in oh this song sounds dark this is some J Vibe right now we're going to go ahead and put this in input I love how everyone knows who Jay is as well it's just that's what the pub fam's about it's funny right so at this point we got the placeholder for this one I'm just going to say you know chatbot name so it will go ahead and say like you know you could say chat name dot dot dot oh this is definitely a j Vibe guys all right we going to get in a bit of Flow State now so and then we're going to have the class name we're going to say Max width should be large cool and then we're going to say the type is already text so I'm think the type is pretty self-explanatory by default it is text but just to show you if you want to change like email or something for whatever reason and also this is going to be a required field okay so a required field cool now at this point you got the chat bot so underneath the input I'm going to have a button I'm going to import that from my component library and for this button I'm going to go ahead and actually have my own text in between I'm going to say exam um sorry uh create chatbot perfect and let's style it out so we're going to go and say Flex Flex column medium screens and above Flex row so in this case boom that looks great but over here it looks like that and if you want to solve the issue of spacing between everything you don't have to do space x 5 and blah blah blah blah blah in this case you can just go ah and do Gap five right so Gap five there are pros and cons to each uh database technology honestly there really is um migration SQL that kind of stuff uh we're going to get a margin top five here to space it away from the top yeah but things like you know migrations and SQL very handy um compared to no SQL a bit more gung-ho with what you're doing so um those different benefits and obviously SQL is a lot more relational structured whereas no SQL a lot more flexible if you're want to build something really quickly it's kind of a handy thing to go ahead and use um is there a demand for full Dev to buy yes everywhere guys period everywhere in the world demand for full start devs okay so this is awesome so uh you're rockar J you now proven it with your music choices 100% awesome all right so at this point that looks cool right so here's where we go ahead and we pause for a second and we're going to go ahead and actually have um our neon database set up so what I need you to do is go ahead and head over to Neon the link is in the description so one of the links in the description we've listed literally number them out you can't go wrong here right we've got each one the one of them says neon link it's fyi. ne. Techny so you want to go ahead and use that link go and log in I've already logged in right so once you go ahead and log in you'll get to this page where you get your projects I want you to create a project okay so in this case actually I'll start fresh with you guys I'm going to create a project where we've got the launch uh I've actually already created my one free plan so okay I'm going to carry on here so papa famam is my one I'm going to go ahead and keep because obviously I'm using that but once you've got yours you need to go ahead and set it up which is very simple once you've got it I'm going to go ahead and just drop all my tables you don't need to do this step I'm just showing you that I'm basically removing all of the tables and I'm going to show you how to set everything up and I've already got a seed file so you'll be able to start off with all the data already populated okay so at this point now I've got an empty database cool simple as very very simple okay so now what we do is we go over to the SQL editor and guys in the description of this video there is a link to a SQL seed file okay so the SQL seed file all you need to do is pop your name in and your email and we will email you the file for free okay so we email the file for free and all it looks like is something like this okay so essentially you're going to get this file what we I want you to do is download the file that we give to you on email go to your package Json level and just paste it in so this one seed. SQL okay now here you go thank you so much Abu I actually really appreciate that that's huge man he goes I express my deepest appreciation for sunny for sharing his expertise and web D with the community your support has been instrumental and I'm extremely grateful your true source of inspiration yo Jay screenshot that thank you I appreciate you so much man goes how are you able to visualize practice guys and this why I teach inside Zack hero coaching course all the time that's why like I'm teaching you more than just the coding but also the architecture side of things okay so at this point you've got all of this one of our members right now got it already awesome right yo another $20 donation let's go man thank you sushi tonight that's it man we're about to smash 200 likes as well boom all right this creates all the different tables and then we've actually got a little extra step here this is essentially just fixing a little issue that I ran into so this will just ensure that the time stamps are all correct and then we insert all of our test data like so so I need you to do a command a or control a copy everything copy it all head over to your database and what I want you to do is clear everything and you're simply going to go ahead and paste it in right I'm just going to disable grammarly it's so annoying sometimes guys I use it quite a bit but it's just annoying right now right so I want you to paste it in okay and then you want to click on run yeah and look it will go ahead and create everything boom just flawlessly right goes ahead and creates it all don't worry Alexandria it's going to be up afterwards so you can go ahead if you you should see create and to insert everything's good go to your tables and I really want to show you look you got time travel features here to go back in time you can go ahead and have your different branches so you could go ahead and actually Branch right now so say you were like you know you didn't want want to mess up your production environment you can create another Branch work on it and then merge it into main so s similar to how we do Dev work head over to your tables right now and inside I honestly really like neon this is pretty cool honestly and one thing I really appreciate with them is if I was to click into chat bot for example go here I can have a nice sub viw of the chatbot characteristics so essentially the way we've structured our database is we have the chatbot itself okay so let's go ahead and just draw this out okay so we have the chat B itself so this is the chat B right the chatbot can have many right so I'm not going to get too deep into postest and how it work sequels and how it works but it can have many essentially chatbot characteristics right so let's just call it characteristics and all this is is remember when I was saying I spelled that so bad but anyway uh that's basically saying like you know all the bits of information that we're giving to the chatbot to train it right so each one of those things is a characteristic so if we'll just look at the content here if we open in a sub view you can see each of the different contents right so look you're a helpful customer support assistant your support hours are 9 till 5: and Monday to Friday and so forth okay I'm this fly is driving me crazy uh so at this point yeah you can see that and if we head over so we got the chat box can have many characteristics and then we have guests right so separate to this this is one area then we have uh chatbot sessions okay so a chatbot session so oh this just call it uh yeah chat sessions the chat sessions essentially are linked to a chat boot so a chat session is linked to uh one chat Bo so you can one chat box can have many chat sessions and inside of a a chat session you're also going to have a link to a guest right so in this case I mean the drawing probably isn't helping you right now but I hope it just kind of somewhat visualizes it you have guests right so you have one guest so it's a one to one so one guest can be a part of many chat sessions okay so one guest can be a part of many different chat sessions in this case I think we've done one to one to be fair because we we create a new guest every time and then the messages so one chat session can have many messages okay so this is what we call a relational database okay so essentially that's what we built and then by using the seed file it automatically creates it all for you so if I was to look inside of like this chat boot right now and we go to the chat sessions for this chat Bo 041 you can see it's got three chat sessions available we open it in sub view you can see all right who's he chatting to at this point or what's the messages let's click that boom and you can see like is there any coaching including yes there are 250 hours of coaching included in the course so very nice layout right good stuff so there we have it our neon database is set up now what if I told you I was like okay now I want you to go ahead and create a graph ql interface with this entire database I want you to create the schemas all that stuff you're going to be like oh man sunny I just about understood like the the the relational Stu I don't really don't want to do that right so the guys over IBM hooked you up with API IBM API connect and essentially if you seen any of my older videos this is thank you mariio if you see any of my old videos this is actually step Zen but they got acquired by IBM and now the product is bigger and better and it's called IBM API connect right so the link to sign up to connect Essentials a IBM API connect Essentials mouthful uh is in the description and one thing I want to stress is it says free trial but you're getting essentially years of a free trial so just something to know about right you've got years of a free trial so don't worry about the free trial part you sign up you got years of it right so in this case if I want to click on the sign up link let's go ahead and sign up right now so I'm going to go ahead and actually I'm going to set up this one inside of a separate Google window for some reason my act's really weird when I use my main profile for this so I'm going to go ahead and actually just uh open this up perfect L for me right now so if you head over to the link in the description you'll see this okay and you'll head over to this uh right now so IBM API connect you want to go through the link in the description okay that make sure you get the trial right then click try it for free all right and then you'll get the sign up form at this point it says business email don't worry guys you can just put in your personal emails so I've gone ahead and done all of this you want to fill out all these details and then you want to click on next additional information you verify your email and then you're good once you've done that you simply will get over to something called the dashboard right so the dashboard looks something like this okay so once you're through to the dashboard you'll get through to here so at this point once you're through this is where we do all of the cool magic and this is where we essentially are going to connect our keys and so forth okay so once you're through to here you can go ahead and see you've got different endpoints you can go ahead and create different endpoints and what's really cool here guys if you click on add look you can connect to postgress databases no SQL databases and so forth and you can do this either through the CLI command that steps and provide us or you can do it through this uh interface right so we can do it both ways to be honest but I'm going to show you now how we can go ahead and take our database and what we're essentially going to do guys is you see all of these tables that we spoke about earlier all of these tables what if I told you that simple enough and surely enough I'm going to go ahead and do the following so I'm just trying to freeze it sorry guys all right is that freezing yeah so we're going to take all of these tables and essentially we're going to basically use this tool to introspect it so basically what it does is it takes a look at it it requests all the information from it and then it just like reverse Engineers the whole thing and pro and builds out all of the graph ql schemas that we need so once it had a look it essentially builds out all of the graphql schemas for us inside of our project right and it works so nicely and I'm going to show you how we can do that right now okay so first things first I'm going to go ahead and we're going to prepare a little bit of uh of our items that we need here so head over to the dashboard and what I would you to do is just for the sake of Simplicity we're going to go ahead and uh I'm not going to do it this way I'm going to show you how you can use the um the actual CLI command so if you head over to Step Zen or actually you've got the documentation here so I'll show you so if we go over to home and I want you to go here to getting started right getting started oh okay I've been kicked out no you getting started yeah and we're going to click on post Quest but I don't actually want to do it this way I want to do it the other way uh no so I don't want to do it this way this is one way you could do it but I'm trying to show you a different way there is a nice um bit of documentation here so red documentation here we are quick start there we are quick start install and set up here we are all right so you want to go to and do this command mpm install dasg so you're installing this onto your entire machine okay so head over to your console this is not installing it to your project this is installing it to your machine I've already done this but I'm going to do it again to demonstrate to you guys so mpm install - G steps n that make sure you got the latest thing then you want to sign up for your free steps and account but basically do the step that I told you about before once you're through to IBM API connect dashboard you are good you're good to go once you reach that page okay so in this case I'm just going to go back to my dashboard um where'd it go the dashboard is here once You' signed up this is the dashboard that we need okay and then what I need you to do is we need our admin key and API key okay so two things we're going to do a simple little prompt step in a second so head over to your terminal we're going to say step step Zen step Zen login okay now this is going to ask us for two things what is your account name head over to the back end over here the account name I believe is this okay so we're going to copy this I'm sure it's that yeah it is that yeah you copy that paste it in okay and admin key you're going to paste you copy your admin key and you're going to paste it in here so paste okay and then okay so I actually gave the wrong uh key the name is different it wasn't that one it was that's the environment oops I forgot is it this one I think it's this one cboard no it wasn't even that one it was oh my God how have I forgotten that one okay let's try it again let's do this SE login account name admin key if not I can show you another way to get it which is easy okay so request toost name doic okay so that's the wrong one so it's not these it's actually over at a separate area this BL blah blah okay let's go back so here I want you to go to oh sorry I've completely messed it up yeah so steps then log in and then you want to do the IBM okay so I forgot to do that step so my bad I shouldn't skip ahead copy this domain then we going to do step Zen log in to The Domain okay and now what is your account name now you take your account name you go here you paste it in now you take your admin key boom and we go ahead and paste it in boom and now he hey nice right using Theos steps inpection service so we we got there in the end it's so good okay so do you work s days a week yeah I honestly work 10 days a week 10 days a week I work I don't St it's this is no stop with this I love this stuff right so once we have this now we're going to do the introspection part before we do that inside of our folder structure I'm going to go ahead and do a new folder I'm going to type in Step Zen okay now this is going to be where I put my step Zen setup so I'm going to say CD into that directory before I carry on right and then what I'm going to go ahead and do somebody says how do you not burn out guys I'm telling you this is what mentorship is about you need a good Mentor to teach you a lot of these things right so head out to pap.com that's I'm just I'm going to leave it there right cuz things like burn out and stuff like don't believe it too much it's all like these Buzz words you're just hearing around but there is burnout a real thing but is a very good ways of figuring out how to get around it okay so once we're in Step Zen we're going to say step Zen init now once we've done that it will give you a random name you can go ahead and name it API for/ whatever you want I'm going to keep it with Ed pening whatever it's called there there you go just create a little bit of a folder inside there see little uh steps and come big far and then afterwards we're going to go ahead and say oh Jay this is a banger we're going to say step in import postgress SQL right so postgress SQL I'm sure it's that command yeah we're going to do that yep there you go and now you can see introspect a postest database okay so this is the this is the ultimate step this is where we make a connection to our neon postgress database and this is where all the magic happens guys so what is your host so the host name I'm going to take you over and I'm going to show you how you get each of these details so firstly the host name so you want to go over to your neon dashboard now so we're connecting to our database right the host name is actually this one right here it's EP us blah blah blah blah blah neon dote so it's that part right there okay so we head over back here we paste it in okay what is your username username here is uh neon owner okay I didn't want to show that but anyway neon d. owner there we go boom what is the password so password uh I'm actually going to okay I mean it's annoyingly showing me it but I'm going to copy my password I'm going to change it anyway afterwards boom and then what is your database name so neon DB is the database name okay and that's actually also showed here neon DB okay so neon DB and then what's your database schema we're going to leave the database schema blank and then here automatically link types based on foreign key relationships using materializer now here the default is no but I actually want to say yes because I really like the materializer right so you click materializer and then boom we just hit 200 likes as well oh my God so sick right look at this successfully import imported postrest data SE into your graph scheme like guys I kid you not okay I absolutely kid you not look what it just did postgress it just made an entire schema for us graph C schema look at that all of this automatically generated look insert messages delete messages oh all of that good stuff like all of it for us so now we've connected the two things we've connected neon database to our database over um uh to we've created a graphql interface to our neon DB postgress database and now we can basically from our app communicate to our database via graphql very very easily right so that's all good and well nicely set up smashed over 200 Li keep going guys got that 500 coming I can feel it all right so once that's done now we've got all this looking good we're going to start up our step Zen server okay so here I'm going to type in Step Zen start and what this will do is it actually deploy it and it will give me also a local version of it right and you can also get your API Key by doing steps in who am I so you copy this command we're going to use that key later on as well but now I want you to go ahead and you see this these are important URLs but the one that we're going to look at is we're going to go to Local Host 50001 Ed pan and what you'll see is we even got the this but I'm going to show you a nicer way of looking at it so we can close that one go back to your IBM dashboard and now if you go to m points you'll see Ed P and hit so I want you to use this one okay so inside of Explorer Ed P and hit there you go and now we've got a perfect connection to our database so let's say I want a query for all of my chatbots I can click chat Bots um let's say I query the one with get away grammarly right we're going to say chatbots I'm going to say I want the chatbot with id1 and I want the name of that chatbot I want the clerk user ID and I want the chat sessions alongside all of the messages I want the sender the contents of that message I want the idea that also want the ID of the chat session so you can see I basically build out my query I hit run and just like that guys boom I can make queries to the backend database so you see what we've essentially done here like how powerful is that by using IBM API connect centrals we ran one command on our CLI and now we've got a a very instantaneous connection to our database and we can interact with our SQL database without any other the fluff right we just simply go ahead and do these nice queries and we've also got mutations so here here we've got mutations coming in so if I click in uh mutation there look you've also got all your nice mutations and so forth right uh is the API connect communicating with your DB so API connect essentially use something called introspect ction to go ahead and generate the schema for us it's hosted on IBM's platform and then it went ahead and created a graph ql schema for us to go ahead and interact with our DB yeah all right quick little water break right we're doing sick guys let's carry on so this is basically a playground we can go ahead and you know build things out you know you can check everything you want and also you can it's very handy for seeing through your different queries and your different mutations yeah if you click on Builder I don't know why that makes me laugh but yeah you can go ahead and do that so now let's go back into this next section here so drop this down now what I would say to you guys is create a third one right create a third one uh in fact what we'll do actually is we'll create a separate entire one so the first one is our split between step Zen running and our server running and the last one is like an extra one in case we want to install something okay so that's going to help us out a little bit now now we can go to build again okay so heading back over to um our app what we need to do now is we need to basically it's all good and well that we've created this API interface with graphql however we're going to use something called Apollo client right now Apollo client is essentially how we're going to go ahead and connect to our application right so if you click get started you can go ahead and install the dependencies and so forth so we're going to do this this allows us to basically make requests on uh on on our app right so we're going to basically make the request from our app into our graph QR database okay now you can't just simply wrap the component like they show you I'm going to show you a bit of a nicer way to do it so in this case they sh you can simply just wrap your entire application or you know you can do it like so forth yeah I'm going to show you how we actually do cuz we're using server components in next S14 we have to Define carefully what is a client component so I'm going to show you how we can do that very easily go to components make a new component at this level and call it Apollo provider. TSX okay now we're going to carry on in there in just a second but before we carry on with that even I'm going to go ahead and create a folder outside of all of that called graph ql so outside at the top level called graph ql and inside of here we're going to say Apollo client. TS okay now the Apollo client is where we basically are going to go ahead and do some important things so first up we're going to import our dependencies uh second up we're going to have a base URL now the base URL essentially is really important because if we're in production if we're not in uh development we should be pushing to our next public Vel URL cuz we we're going to be deploying to Vel um if we go on to uh whereas if we're in development we're going to do Local Host 3,000 Okay so that's the first step second step is we need to do we need to create something called an HTTP link okay so at this point we go down here we create an HTTP link and this is essentially how we connect to our graph ql now you might be wondering Sunny that's not the graph ql URL that you saw inside of here what the hell is that right so typically you would connect to your graph ql URL like so but if you do this from a client what you will risk doing is you will expose your secret key so what I'm going to do is I'm going to show you how to create a proxy API endpoint and what this means essentially is rather than exposing our key we're going to basically go ahead and create an endpoint so that way the server can make authenticated requests on the client's Apollo client's behalf so this way we never actually we just essentially send an instruction and the server also has an Apollo client this is going to be called we're going to call it a server Apollo client um and that one is going to be have authenticated power to make this request it's going to to return the data to the UN unauthenticated one okay so that way we never risk exposing that key okay now the next step is I want to actually disable all the caching mechanisms on on uh the Apollo client for many reasons next JS 15 will help us out a t with this because it automatically opts us out of caching but for now we're just going to opt out of all the caching mechanisms by doing the following argument and we're going to pass this in when we prepare our Apollo client so to get the client what we say is we say con client equals new Apollo client we pass in the link we pass in cash which is New Me In memory cach which we imported earlier and then please turn music down a little bit got you and then the default options we pass in here and that will stop the the annoying caching issue okay so then what I do is I export default client so at the end so we say export default client now we have a Apollo client ready now don't get it mixed up okay this is going to be different to the client that we end up using for the server okay so this one is going to be the client side uh Apollo client but we're also going to have a server one as well yo Mr Frank member for 22 months and a Pap zero to full stack here member in the house this is a massive project to put in a portfolio let's go dude it's a huge project to put in a portfolio you're absolutely going to love this one I promise you that all right so now we've got our Apollo client ready we need to create a wrapper around our entire application so heading back over to app head over to layout we need a wrapper here which essentially surrounds the app uh and so forth right so in this case I've been a member for 48 months that's true oh my God you sick dude that amazing right so we're going to go ahead and wrap our entire app so before we do that we're going to create a custom Apollo provider and the way we do that is inside of our Apollo provider we say equals use client oh my neck's hurting again right use client and then we're going to go ahead and import our client that we talked about earlier we can do that afterwards I'll show you how but essentially we've got the same layout as like you see this one we got children read only and so forth it's the same thing right well essentially the same thing and then what we do is we say return and now we're going to return the actual Apollo provider above right so we're going to say a Apollo provider and actually what have I not returned this one from I haven't installed Apollo client it seems let me just check if I've installed a client so run this command you should see a yeah we have got Apollo provider yeah oh okay ah I've named it the name Clash Apollo provider is actually oh no it's fine okay and we pass in the children there we go and then we export default okay and then here we pass in the client right so here we say client equals client and then we can import that from our client so now this is how we go ahead and set on the children here shouldn't be like that it should be like that so this is a rapper component so a higher order component Tino in the the house what is up I get good massage yeah honestly I do man jeez after this I do my neck's cracking um Apollo provid a video we're going to take provider rapper take that go to layout and then we're going to go to our the the big layout so outside of everything yeah and we're going to basically pop it around the entire thing so around the entire thing so and also the reason why I had to do that guys is because notice how this is by default this file is a server component but the Apollo provider rapper that we have is actually a client component now just because the the higher order component is a client component internals are maybe not uh it's okay it doesn't mean that automatically everything inside is a child component or yeah a client component it doesn't work that way as long as you separate into a higher order component next CH is smart enough to separate the two so that used to bother me and no one answered that question for me for the longest time and then I had to figure out so yeah okay so uh back into the build Apollo clients let's see refresh your app is it broken or is it working it's working great we can go ahead and use our client stuff now so that's the first step done now we also actually need to create that back end that we're essentially you know uh proxying off so this one API graph ql that way it knows where the hell to actually make the request otherwise right now it's hitting our own backend it doesn't exist okay so the way we do that is inside of our app folder I'm just going to go ahead and prepare this for us inside of our app folder we're going to have a new folder called API it doesn't have to be called API but we're just going to make it easier API for/ graphql and inside of here we're going to have a route. TS file okay now this route. TS file is going to be responsible for that proxied route okay so in nextjs 14 13 onwards we basically create our end points like so and this means it only accepts post function okay now this is going to be a dynamic function by default all post are or if you pass in request so you don't actually need that um but so just a heads up if it's a get request you typically put that in uh and xjs 15 is opt out by default as well so there you go all right makes things easier and then we actually need to get the query and the variables that are passed in from the front end okay so these are two things which are naturally passed in from our Apollo client so we're going to do that now the next step is we have a try catch block here so a TR catch block and typically inside of graphql we can either expect one of two things right we can either expect a um a query coming in right which means get me this data or we can say a mutation a mutation would be like insert a message into the database for example so we need to check against those two and basically handle or mutation or query accordingly so here we're going to say if query do trim I'm going to trim it first I'm going to say it starts with mutation so starts with mutation we're going to handle the mutation okay else we're going to go ahead and handle the query all right so in order to do that we need a client now you might be wondering yeah Sunny we created a client but no that was a that's actually one that we're going to use on the client side we need a server client okay so I'm actually going to create a server client instance so inside of our lib folder I'm going to call it server right just to keep things separate I could put it inside of my graph QR folder but I'm just making it massively separate to demonstrate something right then we're going to say server client so server client. TS right now here we're doing a server client instantiation so this one is only running on the server okay so here we import all of our stuff we have the same no fetching rules because honestly all these things cash so hard it's crazy right and then we've got our server client so in this case we've got Apollo a new Apollo client this is going to be SSR mode because we're basically rendering on the server for this instance we're going to say link equals a new HTTP link and the URI is going to be whatever we Define inside of our environment variable Okay so we've got a URI here and this is going to be our end point that we end up giving it and then we're going to have to pass in some authorization headers now for the headers what we need to do is we actually have to give ourselves a environment VAR variable called graphql token and notice how that one doesn't say next public because this is only going to be allowed on the server so if it doesn't say next public it means it's always going to be undefined on a client okay the next step is you pass in so you need to close that off um actually no but still while we're inside of there we're going to do a comma and we're going to pass in Fetch okay and then that is good okay and why is this freaking out um okay so that's freaking out because uh let me see I've got my new HTTP link I'm just going to go ahead and take this out that's yeah so I did do it right okay so just cuz I haven't filled out yeah so the next step is we're going to pass in Cache we say new in memory cache and then we're going to say default options right so if it's the same key you don't have to do that cool and then we close it off so that is our server client right there okay so that is the total code for Server client now we need our next public graph QR endpoint and we also need the graph QR token so you want to open up your environment file and I'm going to hide my screen now you thought I'd slip I don't slip like that um and then we're going to go ahead and actually do the following so I'm just going to go ahead and remove my secret keys for now so give me one second so I'm just going to do it in a way that I can uh uh pop somewhere so one second guys so I've completely removed my CL secret key so you can't see that for now um we're going to go ahead and create the following so we need to have a graph ql endpoint so here and we also need a graph ql token okay now the graph K token obviously secret next public graph C endpoint is not so the end point is this one here so that's the one inside of our URL so that will be the one that will either be in your uh IBM portal so if you go into your dashboard it'll be this one right there or inside but typically it's underscore uncore graphql the actual endpoint and then the graph C token is going to be if you run the command this one here in Who Am my API key or if you go over to the home you'll see API key here so you're going to copy your API key and paste it now I'm going to go ahead and paste it and hide my screen so I'm pasting it I'm hiding my screen and then I'm putting back those environment variables that I did that I threw away before okay so now I've got four environment variables inside of my app there you go so I've closed it and now you can see it's reloaded my environment variables okay so reloaded environment variables cool hide that now so now we've got this set up the way we need it okay so heading back over to our route we can now use our server client uh server yeah Apollo client to go ahead and do what we need to do cool so what we're going to do is inside of our Tri block we're going to have a let result okay and then who's coding along with me by the way I'm kind of curious who's coding along with me who's listening intently right and here we're going to say result equals await uh server client and you see we're importing our server CLI now do mutate and then we basically pop in the following and we say mutation right so mutation and then we're going to say gql right now gql is actually from Apollo client for some reason my Apollo client is not importing the way I want it to but there you go we import that and we're going to pass through our query and then the second argument is going to be variables okay and then we're going to do the same thing for this except is only one very small change which is rather than saying mutate we're going to say query okay and the reason why is because then now we've got a proxy we've got a proxy Endo that does everything that we need in the way we need it okay now the data always way will always come out of this as result. data so we're going to unwrap that essentially and then for debugging purposes you can go ahead and do the following you can go ahead and put like just data output data I would recommend you do that I'm not going to do that cuz I know this one works um Frank goes Sunny just switch my main ID to Cur amazing import your vs code easily but as mass helper has help my Dev speed that's awesome dude I'm not going to lie I'm such a huge fan of vs code so I don't know if I'm switching but I will check it out yeah thank you man and uh after this we're going to go ahead and return the nextjs um response okay so we're going to say return and we're going to say next response um do Json and what we need to do is actually import this from next server and we're going to go ahead and pop it in like so now the data is going to get passed in like so and then I'm actually going to pass in some headers now when you're working with uh cross origin request for now I'm going to keep it very simple but I'm going to add in a cause pause headers here and this will essentially allow it to get past and do cross origin requests so you can go ahead and look into that if you really want but for now we're just doing a bit of a generic cause fix and then if if for any reason anything went wrong we catch the error here here and we log it out like so we say 500 and we simply eror it out so this is essentially What's Happening Now guys from our Apollo client on the server on on the client sorry you see it makes a request to the API graph QR backend in our APL API graph QR back end we have a post request it hits when it hits it it sends the query and variables it kind of you know whatever it was expecting from the client and then it runs the server client actions against it and Returns the data the server client is the one that's correctly authenticated and it should be exactly like this API key with the key okay so now we've got Apollo client and everything's up and running we can start building the rest of the app awesome stuff let's go to our create chat bot now okay so heading back over to create chat bot boom so back at create chatbot now quick little water break as well [Music] now inside of here now this is where it gets really fun because this is where we start building it all out right so underneath the form we got a P tag which would just simply say an example for it'll say like example customer support chat bot and so forth right so boom like so okay I'm actually going to put the music a little bit on a higher energy way right now I feel like we're going a bit too chill and I get it music can be distracting for some but don't worry I think it works I'm going to go back to my like some my OG tracks there we go there we go a bit more upbeat okay so in this case example yeah we need more energy it's like way too like everyone's complaining about music but I'm like screw that I'm the one coding for like 4 hours here so so deal with it okay we're going back to our the the genuine side okay so in this case we got the chat board here uh I'm going to go ahead and use something called a use mutation hook okay so the way we do it is let's say I want to go ahead and create a chat bot right so we need to create something called a mutation which allows us to handle that create chat bot now we did all of that when we actually had the connection to IBM right so when we did this IBM MPI connect if we go to the Explorer there was a mutation here we go to mutation and we go add there is already one here for like inserting Chat bar inserting all sorts right so inserting chat B already works and you can already do it now we need to create a connection to that now how do we do that well we use something called the use mutation so if I Tye in use mutation I think we actually need to install that I don't think we've installed that one yet or yeah we haven't installed it for some reason my vs code sucks right now right but in this case we'll say use mutation and then we pass in the query and then we pass in some variables okay so the query we haven't created yet so I'm going to show you how we can create our queries mutations so heading over to our Explorer close all of this up and at the top level so click on package Jon so you make sure you're top type in uh sorry inside of our graph ql so inside the graph ql create a new folder one of the folders is going to be called queries and one of the folders going to be called mutations so inside of here we're going to have queries and then another folder it's going to be called mutations you could have just had the file to be fair cuz now I have mutations. TS uh yeah you can do however you want I'm just going to carry on with that now queries I just realized now queries at TS really don't make a difference right I've inside of mutations we're going to start putting in some mutation examples right so firstly we're going to do our first one which is going to say import gql which is you know graphql query language essentially so why can't [Music] I okay yeah that's good and then we're going to go ahead and pop in our first query so it's called gql and essentially it's this you see how we have create chat bot where is it um oh yeah sorry insert chat bots so the name at the top doesn't really matter insert chat Bots is what we want so this will connect to this you see and then there's three arguments three arguments come in Click user ID and name uh created out is not actually a required argument it does not actually is it's not needed so in this case that's all good okay so first up we've got that we can do ID name and then we can go ahead and close that one off like so okay and now we've got the create chatbot we've exported it so heading back over to our page we can go ahead and pass that in so we can say create chatbot and then we pass in our variables right now the variables are the ID and name that we spoke about so for the ID and name for the the name firstly for the ID it's going to be the user that we're trying to fetch or or create the user the chatbot for so to get the user state with clerk this is why I I love this stuff guys because clerk makes it so easy to just Next Step IBM just made the graph QR part easy Neon made the data oh my God database part easy right I'm tripping over my words I say const user equals use user hook right so use user hook like so so now we get the user out of here so at this point we can go ahead and say variables and then the argument here we can say clck oops sorry clar user ID so clar user ID uh is this and this could be optional so in this case cuz they might not be existing so we can say user ID actually you know what it is actually there because at the end we do a protective statement but it's fine and then the name is not going to be name here it's going to be whatever uh variable we typed in here right so I'm going to create a piece of State called name and then we're going to have set name equals okay my my GPT is actually messing up now because they use State okay and that's going to be a blank name to begin with and now this name we can pass in like so this means that because we're using State now we need to make it a client component okay and from here we actually get a few things we get create chatbot which is our mutation function and then we get a second argument which has the data inside of it as well as the loading State as well as an error State okay which is awesome so now what we're going to do is I love this look at the community chat away this is awesome helping each other out right so once that's done I'm going to go ahead and map my as I type in here I want the name to change so what we do is we say value equals name and we say on change equals e do set name e. target. value which means essentially what you're typing in is updating our state so heading back up now when we run this we just we need to when we submit the form so here on submit we need to go ahead and say handle submit create a handle submit function so here going to say const handle submit and this is going to be a function this takes an argument and this is going to be a form submit right now if you're wondering how the hell does he know that that's a form event well what you can do is firstly I'll show you we just pop it in import it from react uh but here if you do e like so Arrow function you see look form event so that's how you get a perfect type definitions we say e do prevent default Behavior perfect and then we're going to say try catch okay now it's simple as this guys we say const data equals await create chat Bo okay and then we're going to make this an asynchronous function after we've done that we're going to set the name field to be blank and then we're going to redirect the user to the next screen right so we need the router now so the router is in inside the nextjs allows us to move around okay so in this case we're going to say uh router equals use router and then you got two options here next r or next navigation you want to do next navigation okay so grabbing the router what you want to do now is you want to go underneath set name and do router. push okay and then we're going to do back ticks for interpolation we're going to say edit chatbot and then what we'll do is we'll go to data dot uh what's it called Data do data Dot uh insert chat Bots and I'll show you how we can actually type protect that afterwards but for now we've got this is what will come back from this call and you can see it's actually wrapped in the insert chat Bots call okay and what we care about is the ID that comes back if anything goes wrong we're simply going to error out okay cool and now uh the final thing that I'm missing here is we're going to go ahead and say um I think that's cool to be honest yeah I mean you're not going to reach the screen if there is no user we're going to return nothing here for the beginning so you see nothing and then when the user loads in that's cool and yeah I think we're good so let's try that out guys what we're going to do is just to prove we're going to go into our database so let's head over to our neon go to chat Bots right now we have three chat Bots we're going to add a fourth right we're going to call it uh sales assistant okay insert create chat B I just hit enter and nothing happened yet okay so nothing happened yet if I go to refresh did it do anything okay so nothing happened and I believe it's because I didn't do the form correctly uh so let's have a look so yeah failed Apollo error okay so we got 403 so let's uh dive into why that happened so have a look at our stuff we need to debug it so new Apollo error so this could be a number of reasons why this happened well firstly while it's loading I actually want to change the text on the button as well so and it's a little bit of a small point but I'm going to go ahead and say that this is going to be creating chatboard if it's loading now the button is going to be disabled if it's either loading or there is no name in the name field okay so that's the first thing and then this is going to be a type submit button just to enforce that it's the correct button okay now if I was to go ahead and refresh you see how it's disabled now I have an ABC you see how it's creating jackbot but then it fails okay so at some for some reason now this is failing and this is probably the most debugging part that you're going to have to deal with okay so this is where we're going to debug a little bit figure out the problem and then get past it so what's going on here and what is the problem so one thing I want you to do is I've already got my keys and check but I'm just going to double check my keys now so I'm heading into my environment variable and I'm checking that my keys are correct so yep I have my first key correct which I've already shown you guys and the second key is actually correct as well okay and then have my clock key I have everything set up the way I need it cool so the keys are correct so make sure your keys are all good and then we're actually going to just do a little debug which means we go into our router uh API route sorry and then here we can actually just do a couple of simple debugging steps so all all I do is honestly I say debug one debug one and then we can go here and we can just simply pass in the query as well okay so is it reaching now let's have a look I want you to open this up have a look in here puse this to the side let's type in ABC enter and you see it gets there mutation is sent with cler ID and so forth the name is followed in cool let's also check if we say debug two and let's see what variables are passed through okay so pass that in we got the clerk user ID and we got name ABC okay now this time I mean it did say a 200 so that's interesting but I don't think it was a 200 now we got an error definitely got an error okay so at this point we're going to conso log the error which we've already done I believe we're getting a 403 which is a forbidden um and I'm just curious to see why that is happening so heading back over to to our Apollo client let's double check a few things on the Apollo client side so right now on this side what we can do is we can do the following we can say would actually you know what I would say we need to we should definitely cancel and run this again because I changed a couple of things yeah so restart your server it's always a safe bet when you done a couple of changes like that let's give us another try ABC boom okay did we get redirected no okay so live debugging as finest thank you world for giving me the the demo gods of hell today um so Apollo error I need to dive in so it's happening on the client so it's very clear it's happening on the client so what we can do here is actually where the error occurs so in create chat B it's happening here and the create chat bot is freaking out for what reason it's not cause related yet uh later on it would be however right now it shouldn't be I want to check as well that it's not the I'm going to pop in a my other environment variables I just want to double I want to be 100% sure that I am not made a mistake with my environment variables so I'm popping in my old environment variables I'm refreshing okay and then I'm going to sign in again so now I'm doing a first sign in obviously I've got different SAS of different clerk logins and stuff so firstly I want to rule this out so let's Ty in test okay so that one worked interesting so I believe I made a mistake with my environment variable so let's let's go through that actually so I'm going to go back and retrace my steps now so the cler is not the problem here clerk is not the issue at all uh in fact what I'm going to do is I'm just going to cut out my clerk and give them to J so you guys can see my environment variables uh and then my token I believe is the actual problem here guys so I believe what I've done wrong is I'm just going to go ahead and show you so here we have the next public graph ql endpoint now this one right here let's go ahead and just double check so if I was to restart this so this is the one so let's just double check that paste and then what I want you to do is you see this command here steps in here on my API key cut your terminal and just run that okay I'm going to hide my screen now but run that and what it will do is it actually give you a full key I want you to paste that as your graph ql token okay I have a feeling I just made a silly mistake here with that and then I'm going to pay take my CL key put it back okay now I'm saving everything and closing it all and let's give this a try again so uh I did put my key though so interesting enough I think I have to restart my server again okay now restart the server okay now head over to Local Host uh just for slash go to create and we should see our chat B well we don't see anything right now oh I didn't need sign in yeah let's continue with Google it's going to be a long build I'm telling you right now s there we go let's log in this is the this the real value where you get see this now we type in test okay so it's it's it's definitely forbidden for some reason okay so let's have a look so it's just because my different Endo now I have a feeling I only have quota for one end point that's what I have a feeling so I believe this new one that I've created I cannot change to so the keys are out BR in the terminal are they oh yeah there you go says there good good shout so at this point what I'm going to do is I've already created uh the first one right so what I would do with you guys is I think you get free one free and then the second one forbidden sounds like I'm getting blocked for the free trial so I'm going to use this one here right so you guys will only have one so you won't have two so all you need to do is just follow every step that I did but just use the one that it gives you I've got two now and I believe the free trial only gives me one that's the only reason I can imagine why I'm getting a forbidden which makes a perfect sense because if I try and then do yeah that that does actually make perfect sense okay so what I'm going to do now is I'm going to change my environment variables to my previous build with the one and then we're good to go and don't worry guys nothing actually changed at all besides just being the first one I created so to make your life a bit easier so everything is back on track let's give it a try now so test 1 2 3 creating the chat B There we go right edit chatbot five cool so yeah I've just I think I've exhausted the trial I think the trial is only for one that's why okay so which is fine you guys ain't going to exceed that so now if we go to chat bot and we do this we should have some new ones here yeah look test one two 3 and you can see it's associated with my user there we go nice good stuff now what I want you to do is when you insert your first record take the user ID and paste it into these ones here and the reason why I'm doing this and click save three changes is because now we're populating three test ones that I've already given you as part of the seed data okay very important because you can then go ahead and test with all the example messages and stuff cool okay we're good now what I want to do is carry on building so edit chatbot we need to actually build that page so let's go fast forward so admin panel we're going to create a edit chatbot screen okay edit chatboard screen we're going to do a new page. TSX RFC boom and then smash the Thumbs Up Button if you like a bit of live debugging guys that is really like the pivot all like kind of moment of value I would say in a live stream and it's not easy definitely tricky now here we've done edit chatbot generic I actually need to do an internal page with a wild card which means it's edit chatbot for SL1 edit uh chatbot 4/2 and so forth grab the page put inside so now it's actually going to be edit chat B 4/ ID 4/ page that's where the far was okay now inside of this page if I was to refresh this now you can see we get the edit chat B page now inside of here guys what you'll notice is I'm just going to go ahead and we don't actually need that to be running cuz it's already deployed the unless I make changes to the schema right now I don't need that open okay so I'm just going to use this to make it easier for you so if we were to log out our props here I want to show you that that wild card meaning this for sl5 which is the ID comes through as a prop so typically if I do props you'll see look prams ID okay so what we're going to do is we're going to destructure we're going to say the prams destructure we're going to get the ID out and then we're going to do a uh C the types and then we're going to say the ID so you can say edit chatbot for uh chatbot and then you can pass in the ID and then bam edit chatboard for chat five okay create a new chatboard let's just say test enter boom chap board six all right so there you go fast debug for sure yeah man that's what it's about it's about this you know staying calm debugging it out and I'm also going to go ahead and remove my console logs that we've made previously so get rid of these two get rid of the last one as well guys this one oh that one's fine actually cool now heading back over to our edit chat boot okay so we're here now in case I moved really quick though cool so now we've got the edit chat board for chat ID okay so inside of here lots of work to do guys okay so here what we're doing is we're building out so if we go to edit Chat bar you see oh look at this POA F clothing assistant YouTube chat bot and so forth so we're building this up this is the first section well first this is the view chat Bots we're actually going to build this page first before we can see them all right so this is the page we're actually going to build first including the characteristics so be extra friendly right it sounds weird but yeah that's a characteristic right so these are all characteristics of the database so for this one let's go ahead and build that entire page up okay so buckle up because I'm telling you it's quite big okay so at this point we've got the div it's going to have the following inside it's going to have another div inside of it um and then we're going to have H2 saying link to the chat so the first thing I'm building is this link to the chat okay which is going to be our custom link didn't realize it had that much that functional yeah yeah dude I've completely forgot to show it so you can actually go ahead and build out sort of train the model as you wish and then when you go to the actual chat you'll see so if we go to Sunny abc.com now the chat B that we're talking to is fully trained on everything I've told you about so I'm say hi what's the prices and now you could even be like is there a discount so here the a discount boom and then look at this guys yo sick and then like compare all of the prices in a table with features this did wait for it wait for it wait for it wait for it wait for it and look at that boom amazing right so it shows you all the different good stuff even gives you the links to the courses I'm going say links I say I want to buy it give me a link boom click here to purchase Platinum click here to purchase PL and I haven't trained it with a gold link so that's probably my fault right but in that case then I could go back and be like gold link is so you say gold link is blah blah blah ww do yeah something and then that way it knows and then the next person chat but you'll be able to know that because you can go to the view sessions afterwards view what people are saying to the chat but and be like okay look I saw that when it chatted to this guy it replied that so we should go ahead and probably train that now so you can go ahead and see different you know different chat Bots hello I need help with my order and so forth and you can see here like another one all right so these are just example chats right how much do course cost blah blah blah so really really cool it's actually insane bro and we're coding all this today like I'm not joking it's actually not yeah so here what we done uh edit chat B um what the hell did I do go back go back yep there we are so let's do it so we got the div now first things first is we're going to build out this little link to chat part so I just want to style out this top div so it Mak life easier padding a of zero but on a bigger screen padding of 10 okay so that's going to help us out a little bit a little bit of spacing now inside this div we're going to have a few things we're going to have a H2 and a P tag which has share the link to the chat so you can see it's white at the moment um but I'm going to go ahead and style the div that it's inside of and this styling I really just want you to go ahead and uh pause and just take a look at it please because for the sake of time we got a lot to do so I'm say on a medium screen it sticks so notice how on a medium screen it sticks right so look at that it sticks on a medium screen but on a small screen it doesn't need to stick because it should just stick at the top when you're on a phone it's a bit different okay so now medium screen sticks Z50 so it Mak sure it goes over everything and then these are the styling rules I got it to make it look like this right so it looks really cool actually and then you see how like on the on that screen looks pretty good there so nice then we got the div and inside this div we're going to have a link with the input field so boom link with an input field we're going to import everything we need for the input field as well we're going to import it now the URL the URL we're actually going to custom build it and I'm going to do it very very simply by just having a piece of State at the top this means it's going to be a client component so we're going to convert it to a client component go ahead and pull this like so which means we have to also install oh this is a banger I love this song okay and then we're going to go ahead and have use effect which is going to prepare the URL as soon as the component mounts so use effect it's going to be dependent on the ID that gets passed through and then we're going to have a set URL function which takes the base URL that we used and we're setting up the Apollo client and then we just set the URL so that's how we get that essentially now the reason why this is cool is even on a deployed URL you see how it works it automatically uses the deployment URL as well so it automatically always get the correct link and then we're going to make that clickable link so if you click it it will take you to that page okay now obviously once we've built that the whole point of this by the way is that guys I should be able to just go ahead and send that link to you so say if I went ahead and sent that to you I'm not going to actually put that in the chat um actually you know what screw it there you go all right so there you go I don't care right so that case now if you went to that link you'll be able to chat with the bot right but don't don't spam that please yeah because it's going to screw up the API quot andu I might delete that message to be fair right uh so grab it it's going in 5 4 3 2 one that message is gone okay all right so there you go um unless you're going to copy it out there you go right so we're going to carry on building out the edit chatbot screen so let's go into one of the chat bot right now boom here we go I think Tina Taylor is in there you go we'll be able to see the chat right so you got the link there now underneath that link we're actually going to have a button which is going to have the copy button okay and I'll show you what this does so this button is essentially just going to be a normal button and notice how here we've got the size is small so uh copy is not defined yeah because copy is a lucid react icon so some icon so we Simply Save and toast. success we're going to add a toaster here after okay now you see this this actually copies to the clipboard right now it's not working cuz toast is not defined yeah that's fine yeah so we're going to add that in afterwards but this essentially will allow us to you see how when I click it it's got these nice toast notifications I'm going to show you how we can do those afterwards as well okay so at this point now with that div I'm going to go ahead and say Flex items in the center space x sub two cool and this one's taking up the full width that's why it takes up more space and you see how when we click this one it takes us to the link or you can go ahead and copy the link and basically now it's on my clipboard and you see there it's on the clipboard so that works perfect right and that means I can send it to someone or I can put on my website or I can do whatever I want with it okay now obviously the whole point is is that if you could put a SAS Black pay wall in front of this you charge a recurring monthly subscription you have a full SAS here honestly assistly I'm probably going to launch this as a sass no like I'm actually going to do that um I said no chips right there go so he's got button here boom uh there we go nice um in fact you know I I'm going to add the toast in now because I'm going to forget later and I know I'm going to forget so let's go ahead and add toast notifications so we go to Sona inside of you see this is actually the one we're looking at Sona go ahead and do MPX add Sona go back over here command J pop this open pop in a new terminal add it into our W go back to the top that's installed go to your layout file so I think it was a top layout and then here we had toaster so you want to get rid of that and say Toaster components son and then here you can put the position so I'm going to say position and I'm doing bottom center now with that in mind we can just use it wherever we need so if we go back here and we do toast toast. success copy the clipboard cool let's give it a try boom oops no save there we go look copy to clipboard and if you go ahead and add a few really clean okay sh UI change way I code without Library such a nice way yeah really nice guys we're almost at 300 likes destroy that like button this video is just taking off honestly we've got so much ahead of us it's so cool okay so underneath this div we got button div div okay button div div then we got section inside this section we have all of the main juicy stuff okay this juicy stuff that I'm talking about is of course this part okay so this part right here so this button we're actually going to have a delete button so this is going to be the delete functionality to delete this chatbot um the variant for this one is going to be destructive and that'll give us a red button we'll start that up afterwards the main Crux of what's going on here is that this is going to be a relative container because we're going to have the x button uh put inside of it so we say margin top five background is going to be white see what pce now pading a five margin is going to be pading a 10 and then we're going to say round the corners cool now for the button we're going to say class name absolute top zero top two right two height of eight width of two cool now obviously there's not nothing inside of here at the moment that's why it doesn't look that nice but we'll get that done we're going to have a onclick function to handle the delete so onclick it's going to be handle delete we'll handle that one afterwards and that's actually going to be an arrow with an ID of the the thing that we're going through so that's fine the chat by the way in cool now inside do you truly the react goat love from Kenya I appreciate you so much right inside of here we got the Avatar so Avatar Boom the seed is going to be the chatbot name chatbot name now we don't have chatbot name right so I'll show you how we get chatbot name so how do we get chatboard name even though I forgot okay I'll show you how to do it so go up to the top say const chatbot name set chatbot name and basically what we're doing here is we're going to have a use effect which will go ahead and actually get the data from but in order to do any of that we actually need to make a call to get chatbot by ID which is a query and we haven't made this query so I'm going to show you how we actually do that so this is the query gql it's essentially like I showed you before it's part of our graphql syntax we this were automatically generated so we' going ahead and generate we simply pass in an ID and it will give us the chat Bots based on the ID okay get chatbot by ID so at this point there's also a little additional step I want to do here so so I actually want to go ahead and create a type so I'm going to create types well we could do it two ways we can have a types folder you have types folder and we have a types. TS file inside and then inside of here we're also going to start putting type definitions to where we can protect what we're going to do now the first example of that is going to be this so I'm going to pop in the five base types for the the database so we got the chat B this is just essentially mimicking the database so I'm going to slowly scroll down you can pause the video and kind of see for yourself each ones but these are essentially each of the data structures for each of the five tables okay now when we fetch the data from get chatbot by ID we're going to get this as a data response just going to have chat Bots with the chat bot inside simple as okay heading back over to our data now what we can do is we can do a query on our database so what we can do is we can go to the um we need to do a cued query so we need to say const uh I need to import use Query for some reason my thing is being stupid so let's go and pop it in ourselves we're going to say const something equals use Query and then we're going to go ahead and pass in uh get chatbot by ID so get chatbot by ID and then the second argument is the variables right the variables are going to be ID now in this case you don't know what you're getting back okay so what you can do is you can actually cast it here and say you can actually pass in those types so here we can say get chat B by ID response you can even pass in another type here for the variable so if I was to go ahead and do this let's go ahead and say I did another one so export interface get chap Point by the variables yeah and this one will be the ID right so now what I can do is I can do a double cost and say get ch Bor by the variables and now guys what you'll see is this is actually a string now what you'll see is if I try to do like Ida it doesn't let me so we're fully type checking to make sure that we're getting the right thing and also now when you pull out the data you can actually go ahead and expand it afterwards right so know in the beginning you can't but in this case we go again and get the loading State we get the error State and so forth okay so we got the following from this dat will give us back the ID the actual data from this chat bot so what we can do is we can create a user effect on this data so that way when this data is populated Let's Go ahe and show you so user fact so when this data changes or when it gets populated we can go and say if right uh if there is data then I'm simply going to go ahead and set the chatbot name to and you see how it's it's knows that to type because if we do this data do chatbox do name nice right type uh type um basically strictly typed right so there you go perfect stuff now we got the chatboard name aome stuff so at this point now when we do seed chatbot name you see how boom is actually giving us a value okay so it works just as we wanted it just as we expected okay so that looks pretty cool already now I do want to say the chatbot name I did put elsewhere as well so just to prove a point to you guys uh oh yeah that's it yeah I see okay um uh right now we haven't implemented that functionality but you could I guess yeah Avatar so let's just carry on we'll break it down so we got a form here next step the form is going to be for this next button here so if I wanted to update this to 1 two 3 click on update and you see how you can just type in and change it and then obviously that's generated based on the value so that's what we're building now so we got the form and this is going to have input and then we've got a button which says update which says update my back oh my God my back is hurting all right so toit and then we're going to go ahead and do is to say board if there is no chatboard name so that's like if you're typing in there's no chatboard name it's going to disabled now for this one we're going to say the value is actually going to be the chatboard name okay so by default this one's called test okay now if I was to go ahead and say onchange we're going to do e. target. set value and then the type name is going to be chatboard name uh for the class name here for the styling we're actually not going to have that we're going to have this instead it's going to be required uh and actually you know what the placeholder is not going to be this it's going to be the existing value so it's going to be a chatbot name itself okay so in this case look at that the test and you can see 1 2 3 you see how the top one changes and shows you the logo based on the update cool so we're going to have an unsubmit function which we're going to attach to a function which doesn't exist yet which is going to be called handle update chatbot okay that's going to handle the updating the name and we're also going to have a class name and we're going to have Flex rules on that okay so it's going to have a flex one associated with it because the outside is going to have a class name with flex Space X of4 okay cool now if we were to unsub show that now you can see there you go that's kind of a lot more along than is what we wanted yeah really nice cool okay so at this point the let's do the onsubmit afterwards we'll implement the functionality I want to get the UI kind of down first and then we can get that next bit done so after the button form div so form div out here here's what your AI knows okay so you want to have your chat Bo is equipped with the following instructions to basically do the following right so your chat is equi following information to assist you in your conversations with your customers and users so underneath that we have a div and this is what we're going to essentially map through all the different characteristics of the chat bot and we actually got this back already so we can actually do all of this right now okay so we're going to have an input field so this is going to be for the input field here so we can type in and click add so I'm going to have an input field and a button so I'm going to just pop those straight into a form so form input field and the button now here we don't have these two values yet so I'm going to go ahead and hide that and also so actually you know what we're going to build it right now so new characteristic is when we type in so in that case why waste time let's just go ahead and build that at the top of our file we need a new piece of state to keep track of that value so we add it in here now we're heading back down to our code as we type in it will get stored in some State very simple updates the state based on what we type in disable the button if there is nothing inside of there so if in this case let nothing inside disabled as soon as I type it's undisabled great and then here we say onsubmit and uh and that's that's also a nice way of stopping a submit if you do it uh if you have it disabled the submit button okay so actually automatically buy default stop them from submitting which saves a bit of a hustle cool um next up we have the unordered list so underneath this form we have an unordered list and then we're going to map through every single characteristic of the user right so in this case we're going to actually go ahead and do data Dot chatbots do chatbot characteristics map and for every single characteristic we're going to go ahead and do the following we're going to do something something like so and then here we could map through like a list or something but in this case if I just click that for now okay what you'll see is we get uh an extra bit an error right now because I've screwed something up don't do what I just did let's just type in div for now I just type in the characteristic I just want to test something guys characteristic do content and then let's go ahead and refresh and what's screwing up here so I've forgotten to put a div or something no here now yeah so what I want to prove to you is if we were to go to for example one of the test chat bots so in your database remember I told you to actually change for example zero full stack her chatbot 3 so if you go to three now you should be able to see not 37 sorry three you should be able to see zero four stack hero with all of the test stuff okay so that should help out a lot when you're building this next section so instead of this now and obviously you should always have a key so it's good so we're going to actually build a little component to help us out with this it's going to be called characteristic so characteristic so characteristic. TSX RFC and this essentially is just going to be a component which takes a prop which is the characteristic this is going to be a chatbot characteristic type so we already filled that out earlier remember it's part of the table definitions and then here we have a list item so list item and inside of here we're going to have a the character content and next to that we're going to have an octagon X octagon X like so okay and I'm styled it out to make life a little bit easier uh like so um don't do what I just [Music] did Y and then we will continue to carry on with that in a second but going back over here I want to actually go ahead and somebody goes I've never heard of it actually either oh okay so maybe I I change a name to be something like AI assistant would that be better let me know okay so here if we went ahead and said hi Sunny yo what's up con yo what's good oh loads of people are saying what is intercom okay interesting good good for me and Jay to know actually so the characteristic we can put the key as characteristic ID and we pass through the characteristic and now you can see if we were to jump through here yeah probably clear KN it's a chat but Jay I think that's something very important that we should do after actually we should change that you see these are all like not relative okay so this needs to be [Music] relative and then there that's it then they're stuck to that um I will definitely change that guys thank you for bringing that to my attention right now over here also for the unordered list we're going to do Flex Flex wrap reverse is a nice little trick where it brings all of the brand new things to the top okay this will bring all the latest things up to the top characteristic let's carry on styling this one out so a couple of things padding 10 and a few extra style editions here and there you go you get a few nicer things there um and then I'm going to have an onclick okay now the on click for this one is going to be responsible for removing a characteristic from the the action so here we have on click and then we can just do this in Arrow function or we could have it outside completely up to you I'm going be a little bit lazy I ain't going to lie and we're going to have a handle characteristic function here so show say const handle characteristic equals an asynchronous function so it's going to be asynchronous function and we're going to have a mutation here guys for removing the characteristic okay so in order to have a mutation firstly we're going to have a use client so it's going to be a client component we are going to use a mutation like follows now ignore this line for now I explain that afterwards we're going to import use uh mutation we need to create a mutation called remove characteristic so inside of our mutations folder what we're going to do is we're going to have remove characteristic which we're going to create and I've already done the shortcut of helping you guys out with this this is what we need essentially just takes this again a query that goes into our database very simple it's going to be part of our you know our mutations here those was automatically generated see like delete chat delete chat Bots delete characteristics and so forth delete chat B characteristics passing the ID it gives us back an ID of the one it deleted okay oh my neck okay so at this point let's carry on guys we're going strong all right so we're going to import this remove characteristic and then afterwards this is the key part this refetch queries ER anywhere in the app where we did get chatbot by ID so where did we do that guys we actually did that here get chatbot by ID cuz if you think about it look get chat Bo ID right that's the query that got called so what we're doing is we're essentially telling it you could also pass in the query name which probably more smart as then you can pass in like um uh query get chat bot so forth but I'm just going to keep the example the same for now right but for now you could also just do that right so refresh scen now this will make it update anywhere else so if by doing this is very important the reason being guys is because by doing that it will update the UI because it will refetch that value and then it will update the UI right very very important to do that okay now we've got the remove characteristic so handle remove characteristic we can go ahead and say a triy block and then we pass in the characteristic we can basically error out if anything went wrong and then down here we can go ahead and say okay cool we going to say const promise equals and I'm going actually going to say handle remove characteristic I'm going to pass in the characteristic. ID okay well in this case actually you don't need to because it already actually gets used here because that's what passes in here so what's cool now is you notice I'm not doing in a wait because I actually want to capture the promise itself and then what I do is I say toast. promise and the cool thing about this guys is you can go ahead and pass the promise in and then you've got like three different states here for look removing while it's loading characteristic removed or error failed to remove the characteristic so if I was to go ahead and do this bro thank God you exist I'm able to my dreams come true cuz your tutorials yo Jay that's huge bro check that out look at this TN Tech this it great looks like I got a new core activity for the we yes sir let's go now if I was to go ahead and delete be extra friendly removing characteristic removed it ref fetched and there was a problem okay so if we were to refresh now you can see it didn't actually remove as far as I'm aware because let's have a look so characteristic ID one thing I do want to just make consistent with my example I know it's a bit of a small issue but I just want to do this characteristic ID and I'm going to pass in the characteristic ID that doesn't change anything it should be fine um but get chatbot by ID is our refetch example here and then back over here when we do are get create chat B let let's try one more time I want to see something be extra friendly characteristic removed okay but it's not actually deleting that which is interesting okay so that's fine we debug that yes it's not deleting it okay cool um create chat Bo let's do our fetch so edit chat Bo sorry get chat B by ideas make sure it's either doing a refetch on that let's go back to our characteristic interesting okay [Music] so I believe I'm doing something stupid here all The Code by the way is in the get description get up repo so there's a lot of like edge cases here so I really want you to pay attention to those as well but I forgot to mention as well that this page should be um one minute so uh page let's go back up here and this is a cent page yeah that's fine all right we'll we'll we'll figure this one afterwards but let me uh change song as well okay so okay so let's uh try one more time here I think it could be cuz it's the one I create in maybe maybe there's Edge case let's just type in testing oh we actually can't create one yet so I guess that's silly uh ABC okay let's do that first as well okay so we're going to we're going to come full circle on this okay so Focus time little bit down the music we're going to have a delete chatbot Button as well so let's go ahead and do that one first so delete chatbot it's going to be a use mutation and we need to create a delete chatbot uh okay actually oh that's fine yeah so the delete chat bot fairly straightforward mutation yeah delete chat bot go back over pull this back in now we have the delete chat bot we have the refetch queries and then you can have await refetch queries as well which basically stops it you have to wait for that to kind of be done that could be something we could look into after to maybe get that working um let's go to where I call it so I'm going to create a handle delete function and I'll show you you what this does so it's basically a function takes the ID it simply prompts the window saying are you sure you want to delete this account if you don't click yes then it will stop otherwise it has a try catch error simply errors out with something it didn't go right otherwise it just calls our mutation function with the variable the ID right of the chat bar and then it'll say the toast will be deleting and so forth if it's deleting okay so with that in mind now let's give it a try so on the delete button I want to go ahead and actually use this so let's go to adic Arts yo what's good we're going to do the button on delete where's my button delete here let's do handle delete now let's see if I click it look are you sure you want to delete the chat bar yes okay now I tried to throw me after to ID chatbots okay because technically I'm actually supposed to redirect the user afterwards um which is fine so edit chat bot 137 is failing so we can actually safely access these things but to be fair after this um it's actually going to be okay so you should always be protecting to be honest at this point but I to be fair after I do a delete I actually do redirect I believe I don't know why I'm not doing it here uh the delete should have deleted and then thrown me out where did I do that I didn't handle that somewhere oh yeah there we go sorry I forgot so we actually don't ever want to reach down here if we ever get down here so I actually need to do two things one before we do the main return I'm first I'm going to say if it's loading I'm going to do a little spinning Avatar okay so you're going to see me do this pattern a lot if it's loading I'm going to render an avatar but I'm going to make animate spin so it just spins around if there's an error it's going to say there's narrow message and then if there's no chat Bots it's going to redirect the user to view chat Bots okay so in this case next navigation is what we need to import from now what you'll see is if I refresh you see how it threw me to view chat Bots which doesn't exist yet okay which obviously we'll create so if we go to create a chatbot let's type in ABC creating chatbot and then we go ahead and delete the chat bot delete the chat bot and uh I think it's deleting so we go deleting chatbot successfully deleted and it threw me to view chatbots okay so let's just double check something firstly if we type in ABC ABC so 4/9 let's check the database is a 4/9 present let's go ahead and say ID we have a 9 ABC ABC yes and let's check if a delete works so you see just one thing at a time doing a delete delete works so let's go ahead and refresh nine is gone perfect and also when I set the database up I did add delete Cascade which means it's going to Cascade the deleting if there's any links to any other sort of table it's going to delete those as well okay okay so at this point now that's pretty cool we got that down cool okay so um let's uh keep going so I need to do the test let's do test and then I need to firstly I want to do adding so adding to the adding a characteristic so let's finish off the UI for that part so adding the characteristic so we need to actually do and do update chatbot we'll do that afterwards here okay so the form on submit we're going to have a uh e we're going to do an arrow function here and then here what I'm going to do is I'm going to say e run default set new characteristic afterwards we do want that to go blank but in the meantime we're going to say handle add characteristic and I'm simply going to pass the characteristic through okay and that's what we typed in in this box now we need to create create this function now this function is going to be a asynchronous function so let's go ahead and pop it upstairs yeah handle press the Bell icon YouTube notify me about saying I know honestly guys I don't know what's going on with it sometimes it's a bit stupid you but and I'm glad you're here now and then here we have a try catch block The Catch catches the eror the try simply goes ahead and uses the ad characteristic with a mutation which we're going to create um and then basically we passing the chatbot ID and the content so we're going to create this this mutation right now let's go ahead and do that the add chatbot uh add characteristics sorry is going to go up here so boom so we got this we need to create an ad characteristic so inside of our mutations photo I've helped you out I've created the ad characteristic for us so again takes chatbot content let's go back import it inside right and again this one we'll refresh get chatbot by ID cool so let's go back to where that's used and now if we go ahead and do that it should go ahead and actually render out so if I type in hello add information added oh yes there we go guys look you see the refetch worked nice that's what I'm talking about look refetch is the query which causes the ref fetching to work so now have to type in hello world yes okay now we do delete delete the characteristic removing is not working okay but the other one is working so we'll figure out why that's how that's not working I'll figure it out but um the adding is working okay it just looks like trash so we need to make it look better so for right now the form where we have set characteristic I do not like the way that starred so where do we use that we use it over at the form that form has not been starled this way so the form very simple bit of styling here we're going to hide in a flex space two so that way it gets stuck next to it and the div surrounding it is way too packed in so I'm going to go ahead and make that have a gray background with a bit of spacing around it so boom pop that in and you see look at that o little bit of styling so they can say you are a test robot boom adding information at cool okay now let's bug and see firstly we'll do the update as well afterwards but the test does work look the test works the adding Works let's go back to create let go and say sales robot so that boom sales robot the nice little loader came in hello little examples of how we can add the delete works we already so we need to do the update and the deletion and then we've actually prepared the robot um hack backers can I just say you're in incred be time man I simply comprehend how you can do this in real time thank you dude I really appreciate you honestly I just hope it inspires you guys to keep doing what you're doing and like I said I am your Mentor online and if you want to take that mentorship further that's what we've done with Zero to fullstack Hero at pat.com course so you can go check out but I appreciate all of you guys all right let's carry on we're almost at 300 likes keep smashing that like button guys if you're here just destroy that like button subscribe if you haven't already we're going to keep this Channel Growing to Crazy levels okay okay let's fix the the deletion button so we map through we pass in the characteristic okay so that's all easy done um cool that's that's this one actually should get mapped correctly yeah it does and then once we're inside of here I've made a slight slip somewhere where let's just have a look at my remove characteristic yep that's all the same my handle remove characteristic I mean there we just simply say failed to remove characteristic which is fine the list item oh we haven't pass a key here but I don't think the key should matter because we're not looping through however still let's give it a key see M just too high hello oh okay so it was the key oh my God it was the key yes of course it's the key oh my God yeah because here guys oh God okay so yeah it wasn't the key wasn't getting registered here for whatever reason yeah but there you go it's the key yeah otherwise it doesn't it doesn't know how the hell to okay anyway it's fine it is it is it's good we done it we got it yeah okay so he's got sales sales robot boom hit enter all delete it boom out of here yes nice react 101 is it sometimes I need a reminder of that let's go um let's do the update thank you Tina I appreciate you man uh edit chatbot let's go to our update button handle update chatbot boom okay so edit chatbot let's go to you okay so this one handle update chat boo we need to create this function so we're going to go up and same principle same same principle so I'm going to pop it in here so let me show you so if we were to just we can put above the delete right same thing it's a react form element again you don't even need to write it like that you can just do that and import it prevent the default Behavior the try catch block same thing catch if there an error toast is just like showing the promise State we need to have a update chatbot mutation okay update chat B mutation is the magic here that's going to make it come together so go up to the top let's pop it in here we got our mutations all neatly put here at the top update chatbot we need to create that so update chatbot let's go into add characteristics so where we put that because remember it's a mutation which means it's modifying the database so we pop it down here update chatbot that's the command that's perfect for us this one right here will return ID name and create app which is fine I don't think we need it to be fair but if we do that the main thing here is it refetch the query so after we've updated the chat Bo it will refetch all the information I mean do you need to do that not necessarily but I'm just doing it for safekeeping okay now in this case if I was to show you if we go on sales robot 123 and I hit update you see it says update name but if I refresh now it should say sales robot 123 and if I deleted that and clicked enter even and I refresh sales robot one two three nice so guys we've actually done it for that part right we've got this and I want to mention as well right now obviously for demo purposes I've done a simple ID here yeah you want to essentially make that a uu ID so it's essentially a random string of characters that'll be like a much more sharable way however I've just done that to uh that's to revalidate yes it is to revalidate it so in this case boom okay cool that's awesome guys it works perfectly right nice now with that said when we click edit chat bot here I want to view my chat bot so if we look at the live one if I go to edit chat Bots I actually have this right I want to go ahead and build this out now so edit chat Bots then we're going to go ahead and probably do the chat section then we're going to do the view sessions and then we're going to do the log out State okay it's just me or sun becoming got to react day by day I appreciate you all right so we got a lot of stuff to do guys but your boy is not slowing down right so we're going to do the view chatbots section next okay so this section here okay the let's do that so uh let's go to here uh someone once said to me does Sunny even code I was like are you crazy dude of course I go I I live and breathe this right I cann't believe I I already I was like yes I bloody code I code way too much for my own good RFC and then here will say view chat Bots yeah I know we can't we can't give into that right we can't give into that hatred so at this point now The View chat was I'm going to keep this a server component okay so I'm going to try and not touch the client component side here so this is all going to be server ended this area so first things first I always wanted to show me the most up toate information so I want to do Force Dynamic which means I'm not going to cash because in case I see a change of value or something like that I want to make life a little bit easier for us next up I'm going to do a bunch of imports to save us a little bit of time at the top right so firstly actually you know what I won't do that because I want to create them as we do it which will probably help you guys understand what we're doing okay first up I need the users authenticated state so I'm going to make sure that there obviously you can already have this but I just think it's just safe to say that you want to be prepared so going to say await now because we are in a uh server component I can do a top level as snle weight so I can use or which is an awesome method by the guys over a CL and then I can say if there is no user then we're simply going to return don't show anything dirt okay but afterwards by the way guys in the layout out I'm actually going to be throwing them to the front screen so all of these things are just merely defensive programming things that we're doing all right now next up I want to get the chatbots for the user okay so I need a query called get chatbots by user so I'm going to go to my queries and I'm going to create a get chatbots by user function which takes the user's ID so we got get chat Bots by ID but we ain't got get chat Bots by user so I'm going to yeah chat it takes the cler user ID and then again it populates the following for us and this are all the information I want right so let's go ahead and do that right now the way we do that fairly straightforward because we're on the server now we can do a server client call instead of a use effect right looks like the use effect has was that has no effect um yeah so I mean it wouldn't really have an effect uh at that point there um but cuz it would throw them out after us but we're going to use it in the next anyway so here we use it so we would say const uh so don't do that say const and we'll say data uh equals server uh BR thinks he is him and he's trying to be trying to what's it say be I can't I can't understand what was person saying right I'm say await um server client Dot and then we say query yep so here server client do query and now what you do is you pass in your query and your variables okay so uh right so um no idea what that guy just wrote shut up here we say get chat B by user right and then we have the variables and then here we have the clerk user ID right so in this case I pass in the CL user ID but ah here you could put in anything right so we want to protect that um so at this point I want to do um await server St query so at this point we're going to go ahead and Pops in get so I need I need to basically protect it right so long story short what I'm going to do is I'm going to add in two types to protect ourselves right so down at the bottom we're going to have get chat Bots by user data and get chat Bots by oops save that file yes and use data variable so we pass that in and we pass in the variables and now if I import these we are type checking to make sure we're all good and we basically go ahead and say cler user ID user ID okay so now this is all happening on the server and if that's gone correctly we can pass straight out you see chatbot by user and you get all the information out okay now after that we get the chatbots But I want to actually sort them based on the most recent chatbot that was created and because we're already on the server it makes sense to do that at this point so I've created a little helpful sorting function very straightforward all we do is we import our chat and we simply making a copy sort is a mutating function so we're going to make a copy of our array by spreading out the current array and then modify that array returning it into this if you do if you don't do this you'll get an assignment error so if we did this for example you'll get an assignment error uh when it comes down to that point I mean right now you're going to see that but yeah you would get an assignment error and it wouldn't work okay now now here actually let's go to the page cuz we should be able to see it so here let view chat boot yeah so if I was to go ahead and do this watch this um watch this you'll get an assignment error well you should get an assignment error mean it's bad well yeah okay you do I mean when we try and use it you will I'm pretty sure you will I ran into it a couple of times um so at this point we've got to return the div right so here we're going to have H1 active chat Bots there we go boom active chat Bots now here I want to have a and then the class name we'll style it out a little bit we'll say Flex one there we go cool and that gives us the style that we wanted yeah so check this out um guys we're our own Community it's all good like we're our own community no hate no no nothing we love everyone else in the space we're our own Community right um so I'm going to go ahead and have a little drink but what's it called um I love it when we get hit I love just fueling it I'm like bring it let's go so at this point if we don't have any chatbot I'm actually going to go ahead and pass in the following I'm going to say sorted chatbot length if equals zero and then we're going to conditionally render out a link tag with a button and it's essentially just going to say a create chat bot right so if you didn't have a chat bot we do have chat bots so because obviously this is not being rendered so now I going to list out the chat bot so underneath here unordered list and inside of there we're going to say sorted chat Bots map each of the chat Bots and then inside we're going to have the link tag for every single one for each one we're going to basically have a key which is a chat B ID you should always have a key when you're mapping through it's going to be for/ edit chatboard that will take us to that link now obviously for the actual structure inside we're going to have a link itself and then I'm going to have a div and right now what am I building I'm building this guys right this this little section here okay we're going to have a div and then we're going to have a div with an avatar and a P tag with created inside of it right so here pull this Avatar in from our components the date we're passing from these you see sales robot test test one two 3 nice uh for the link I'm going to style it out a bit so right now this these are all getting thrown in the top corner cuz they're relative to everything so we need to make this relative all right that's relative and we need to give it a padding background white and a bit of styling so padding border border rounded background white there you go little bit of very simple things but makes a big difference here we'll say Flex Flex column space it out y value of five and this will give it a bit of breathing room there you go okay um someone goes why am I not able to build logic while coding guys it's really not a case about building logic it's about practicing and break and breaking problems down at different levels and getting better and better at that that's like me saying how do I practice how to walk right like the more you walk the more you're going to get better at walking there's no real way to read a book and be able to walk you have to practically do it right so uh no one was born being able to code um so it just takes time don't worry about it mentorship is a accelerated way to do it uh hence why zero full St C is the best damn course out there period all right uh how do you how wre Sun how do you handle unexpected bugs and managing client deadline expectations uh I can't handle um I can't I can't handle I can handle it I can't reply to that properly in the Stream but um unexpected bugs right now you just have to stay calm that's the main thing right so right we've got a div inside of here uh we've got H3 same characteristics let's go ahead and Pop That in right now douch DCH we're already halfway there guys we're getting there right characteristics then we've got an unordered list inside of my uned list I'm going to say if there is no characteristics we're going to say yep you don't have any characteristics yet so some of these let no characteristics um I love I do answer those kind of questions in the course by the way yeah so here we're going to have chatbot chatbot characteristics map map through everything every single characteristic and drop a a list item obviously when you're mapping through anything pass the key in and list disc gives it a little dot for the bullet point characteristic do content will list out so you can see sales robot nice now for the uh unloaded list we are going to make it small text because I don't really need that to be very big um extra sex I would love to have your energy in the cost uh hack pack definitely check it out got grid here so I want to make this way more easier to read so grid columns two oh dude look like that J screenshot that I love that I absolutely love that Tino goes it will change your life it did for me 100% like I appreciate you guys so much when I see stuff like that it makes me really just want to work forever honestly I I'll keep doing this forever to keep giving them back cuz it absolutely makes everything worth it little bit of minor styling here guys bit of padding oh padding five there you go and that look at that just changes the whole look look how good that is if I click into it now takes me to the edit chat B for that screen let test take me to that one and so forth absolutely beautiful okay cool cool cool now the overall div above the Avatar um this one has Flex justify between items centrally aligned douch okay so that was the last little bit okay cool so we now need the number of sessions right so I don't actually think I have that so we're going to have to have a little fetch that will handle that so link so underneath the unordered list here we're going to say number of sessions with a P tag and because we're in Grid layout it will nicely stack up with the next two elements being perfectly aligned you see that perfect good all right chat B chat sessions oh yeah of course guys this is the best part about graphql because we've automatically pulled in you see like when we do graphql queries right we can just go ahead and say give me the chat sessions as well as well as the messages I don't need to do a second query I've already got the information popped in right love you guys man so talented love your energy dude uh absolutely awesome um do you have best tools for job slowly slowly best tools for the for the job now even like Hardware right so that's awesome guys look sales robot let's add a couple characteristics here let's go ahead and say something like uh this is a test you are the best robot there is there uh you pray to the gods of Robot World right something like that I don't know right then we click on edit let's do a little refresh I'm sorry Ed it you click in hello tells robot this is a test you are the best robot there you pray to the gods of the Robot World cool awesome stuff all right works all right next up that means we' got that down guys look at that we got this working we can train our robot up now we got the view sessions which we haven't yet created but before we do that let's go ahead and actually uh jump into this section here so right now uh I'm going to actually add in Sunny's robot which is uh let's go to chatbots zero to full stack hero chatbot if we pop my ID in there save that change I've given that robot now to Sunny I believe so if I refresh my page we should have the zero to full stack herot yes I highly recommend you do that by the way so you get your user ID and you just copy it into the one of the seed ones that I gave you and that way you'll have like all this kind of perfect example stuff and look at that look at that sticky head so nice right uh guys almost at 300 lik destroy that like button there's so much value in this video it's crazy right so at this point now what we're going to do is we're going to build out the chat portion of it so we're going to do the really cool part which is here so if I go into this bit this part right here so the modal and even if you try and type in and you haven't put your name in it will always make you do the modal and we even got validations we've got Zod for form validations I didn't even mention at the beginning you're now you're going to learn Zod right so crazy stuff we're going to build this part which is the actual chatbot experience okay so let's do all of that right now so and then after that we will have the messages which we can go ahead and view in here actually you know what let's do the view first yeah because we have got test messages here already so we can actually test it with the seed data perfect that was why I did that in the first place right I thought about that um now it makes perfect sense why I did that okay so we're going to go ahead and do view sessions so we're going to do while we're in the admin panel let's finish the admin panel so we've got inside the admin panel we're going to have the view chat uh no it's going to be review session sorry review sessions and this one is going to have uh not only a top page so it's going to have a page. TSX but it's also going to have a embedded like you know a wild card page so for/ review sessions for SL1 SL 4/2 and so forth so page. TSX here as well let's get this one prepared review session page so review session that one can be and then this one can be RFC review sessions plural Okay cool so let's do the homepage of review sessions first guys we're going to go ahead and firstly this is a server component which actually simplifies things quite heavily so first up we're going to do our little authentication check to see if the user is authenticated this is a top level a snle weight which because we're in a server component we can do that we can go ahead and check that next up we're going to make a uh a query to the database so we're going to get our server client the query that we're doing is get user chat boot okay so we don't actually have this yet so inside of our queries we're going to create a get user chat boot right so it looks something like this so we're going to go ahead and do this hit save this is what we need we simply need to pass in the cler user ID so we now have the user ID great we can import our get user chat Bots and then these type definitions are going to help protect us from making a mistake when we go ahead and uh you know pop in our variables here like so so head over to types go down to the bottom pop in the following two types the first one Returns the chatbot the second one is simply what variables we expect to pass in simply import them like so boom and boom and don't do that that one is not getting imported why not let's do variables okay that's been variables interesting okay um oh oh oh oh oh oh I done something stupid sorry I messed up that's for later there you go that's the one right okay use a chat B variables nice okay now who's coding with me still I want you guys to keep your energy high right so this one user ID um get user chat board variables user ID user ID now this is freaking out because oh no I messed that up so this is not this this is actually this is the wrong thing that is what I want yeah user ID see that's why typescript is so effective because it actually it makes sure that you stick to what you're supposed to do right next up we're going to sort the chat Bots by the user now what I'm actually doing here is I'm doing uh the following I'm making sure that we show the most ascending we're basically setting up in ascending order right and really what's Happening Here is we're actually making it so it puts all the ones with the sunny what energy you want in a good way I hope a good way I know I'm crazy right now let's see we're building building building right so at this point now I'm going to go ahead and do a sort so this a sort it returns back a chatbot array and then this is mapping through and we're basically mapping through copying all the chat bots in we got the chat sessions we're sorting through and really what's Happening Here guys is we're actually going ahead and returning uh we're sorting it in a way so it shows all the the chats with chats all the chat Bots with chats at the top and then the ones that don't have chats are at the bottom that's actually what we're do done right as well as make it in ascending order okay so next up we got this pop p energ is crazy that's B right so next up we're going to have H1 and H2 so here boom H1 and H2 so let's go ahead and pop this in so let's go over to our review sessions chat sessions review all the chat sessions you've had there you go we actually have all the chat Bots here but what I'm actually going to do is firstly style up the div so it'll be Flex one and then it'll be a padding EX 10 like so and then what I want to do is I'm going to say chatbot chatbot sessions I'm going to pass in the chat bot so we need to create this component okay so we're going to create this component now so heading over to our components heading over to components we're going to go ahead and create a chatbox sessions. TSX right so this component now is going to to be a react functional component we're going to go ahead and it's going to be a client component like so we're going to go into our review session and we're going to import it like so okay now we're going to go over here and this is going to accept um chat Bots okay we import the chat Bots great cool so we got the chat bots in next up what we're doing is we're sorting I think we already sorted the to be fair so we don't need to sort them I think I messed that one up um but if you do want to have an additional sorting step I'm going to pop it in anyway so you can have it essentially all I did here was took the took the state took an empty bit of state right you could even initialize it with the chat box to be first you could go ahead and do that really uh and then we basically go ahead and when it mounts when we pass in the chat bot it simply sort them based on the sessions. l oh no so sorry this one so first first thing by the way guys uh um Jay let me know do you have any DMB step tracks um the first one behind so uh in the beginning review sessions this one sorts the sessions by ascending order so look the created that ones right so it shows the most created recent ones and then the chat bot sessions here is where I actually do the chat sessions length so the ones with zero go to the bottom that's really what it's about right so I'm going to actually pull up Jay's playlist I think now so I think his playlist might do better for me this is it this did okay this gets me this gets me kind of higher up oh my neck man I've been like spending way too long in this chair and it's a hum Miller so still it just goes to show doesn't matter how long you sit sometimes it's crazy all right so we're going to go ahead and have an accordion now so if you don't know what an accordion is head over to Shaden an accordion looks like so boom this this is what we're going to have and essentially what it looks like is this we're trying to build this SL okay so let's do that so chatbot sessions is what we're trying to build out now so the accordion yeah so that's what I was doing so accordion head down here MPN Chad add accordian so install that boom and we're going to have a little bit of War new plac is giving me South London Vibes yeah we mix it up here okay this is Jay's playlist actually believe it or not right Jay's in some South London Vibe Ro man all right so we're going to import this the accordian so essentially J done right so in this case we've got everything uh looking pretty cool so this is how we're essentially going to break it down all the code examples by the way they have really good examples inside of here see that so you can kind of see for yourself how to build it out and then you can reverse and gener it as you need it or you can follow along tutorial but it's always good to know yourself how you do it so we got the accordion which is the outside yeah and then inside of here we're going to basically map through each of the sorted chat Bots okay so first up the accordion type is called single and it's going to be a collapsible accordion secondly we're going to map through all of the chat Bots like so okay so we're mapping through all of the chat Bots and then we're having we're not doing a direct return we're actually checking to see does it have sessions if it does have sessions we're going to style it accordingly right we're going to style it a little bit different so we're going to return um this freaking out because I a got yes yes yes yes I always hate this sometimes there we go it's like a game sometimes of finding where the hell it is um okay so we got the div uh so here it's not going to be a div it's going to be an accordion item accordion item each one has got a key and it's going to be the chat bar ID uh as well as a key it's going to have a value and a class name okay so the value is is important you need that here that's going to tell it which one essentially is open so we're going to say I chat ID chat Bo ID and then firstly we're going to render out two different uis okay so firstly we're going to render out if it has got sessions that's the first one so has sessions and then we're going to render out the following else we're going to render out something else now if we don't have sessions I'm going to render out just no sessions okay so simple as if we do have sessions then I'm going to render out uh a fragment and inside the fragment we're going to have an accordion trigger so C and Trigger this allows us to actually click into it because I don't actually want it to be clickable if you don't have any clickable elements so you see this this shouldn't be clickable whereas this one should be a trigger so that's what we're doing um ran goes hi there I'm really trying to get to web development learn JavaScript and react where should I start how to tr progress builds just like this zero to full stack hero amazing place for you to learn you got all the modules to start from the beginning and you've got coaching calls every week check out Link in the description po.com or you can watch out my free YouTube stuff depend what level you speed you want to go at okay so we got the accordion trigger first and then in here we've simply got a div and I'm just going to pop this in and show you what I'm actually popping in so accordion trigger essentially has the Avatar that we're all familiar with bit of styling another div with the chatbot name and the number of sessions right so pretty simple what's going on there sta goes send your great man I pet project post next yeah I got you man I got you right and then after the trigger is basically what the content is right so once it opens up so trigger H the top when you click it this is the content this is the content so the content is going to be in its own right a separate section and inside of here this one first is going to be styled so we can have some kind of you know styling here so if I was to go ahead and do a refresh now look you can see look no sessions no sessions but this one has seven sessions so the accordion content now is empty so we're going to go ahead and populate this and what I'm doing is I'm essentially mapping through the chat sessions so I'll show you so here firstly import next link tag and here so we have the chat sessions we map through it then we have the link tag so essentially all of this is inside of a link tag react time ago we'll handle in a second I'll show you how it works we have the session's name so the guest name in this case it will always be there but I've just got to fall back to say Anonymous if they didn't but you wouldn't actually be able to get to that point it's just a bit of uh bit of a sort of step right right uh a defensive call and then we've got react time going to say this chat was like 3 minutes ago I goes this is on fire live C coding plus dbug 100% that's it honestly that's what it's about all right react time ago is next so react time ago very cool Library it actually just takes the time stamp and gives us back what we essentially will have like if it a relative time scale so 5 seconds ago 6 seconds ago and it updates accordingly so I introduce that by saying mpmi react time ago and we're going to import that into our library once we've done that it won't actually work it'll say mpmi save devs you have to actually install the type definition separately so you can do it just like I showed you and then once that's done boom in 3 2 one it's gone right that was smooth all right so at this point we can uncomment this pass in a date object from the session created at and then just like that how look 1 Hour 1 hour ago 2 hours ago 3 hours ago and so forth cuz that's a lot more readable right now the only thing I'm missing with this is the back background colors don't look good this there's not very clear the separation between each item so I want to get the separation a little bit nicer I think the accordion where have I not done that correctly the accordion item perhaps so padding X of 10 padding y of five background white should have been at the top that's where I messed up background white there we go so now if you compare it look at that boom and look at that Tino Taylor yo Tino oh nice look you guys went on there let's have a 8 music oh okay so I can't obviously see that one but if I check it oh I was curious to see that one actually let me see would it show on this one okay it won't show on that one cuz I'm looked into a separate thing but yeah look Tino was on it repon was on it test user few other people on it nice Reon some I see you uh so now we're going to go ahead and actually have the click-throughs right so at this point no session if it's there but otherwise if it is we're going to click it and you should be able to see the chat so example should have like this chat view so that way obviously it's really important as an admin to basically be able to come in and be like okay actually um this is what's going on here so uh I can improve my chat but and so forth so this is where we have the individual chats okay so let's do the individual chats so all right we're drinking electrolytes today keep extra sharp okay so inside of review sessions uh review sessions ID page. TSX this is where we basically carry on now remember I told you the trick earlier we can get the pams out of here so pams and then the ID is the Wild Card okay so once you've got that we can go ahead and do a little bit of type checkin and that's how we get the ID for the page that we're on now this is going to be I'm going to make sure it's forc Dynamic so it's not I don't want it to catch this page cuz I always want to see the most up toate value because think about if someone's chatting with it dynamically every time I refresh I want to see that latest bit of uh chat okay now we need to make a get chat session messages query call okay big little mouthful there but let's go ahead and do that so here is what we're essentially doing now don't get freaked out I'll break it down it makes sense it's no different what we did before except this part we're just destructuring a load of it right so if you look at that now that's a lot less scary right so what we're doing is we're destructuring the chat session out of it to make the rendering easier after we import our server client we need our types here so we need to make a query called get chat session messages okay so we head over to our queries and get chat session messages just like any other you can put it at the bottom boom get chat say messages it takes an ID which is an INT okay so we need to make make sure we pass pass it in the int and then we got get uh chat session message response and get chat session message variable so let's go ahead and add those types in so we got these two types here okay in fact just to keep it super consistent I don't like how that's at the bottom there should there you go yeah that's how it should be nice right so you got the response and then the variables pull those in so we can go ahead and type check what's going on pull in our query pass in the ID that we get from our Dynamic wild card and then we we basically are saying the ID is a string and we're passing it right as an in we don't even need to do as string it's already a string so we pass it right so there we go boom now with this in mind you got the chat sessions down uh this comes through on graphql and I'm just basically pulling the pieces of information that I want out because I'm going to use this when I build out the page okay so next up we have a H1 and a P tag in the beginning to start things off so we have the session review let's go ahead and show it so that you can see now obviously if I show you back to this right it's cool to see here one hour ago but when you're in the session you should be seeing the actual time itself because that's more helpful for an admin now next up we have the flex one to make sure it's using the full width they can padding of 10 to give it a bit of breathing room and Pad the bottom out so you can scroll down past the white space right once we fill it out next up we have a H2 to say underneath all of this between you know whether it's zero to full stack hero and Tino Taylor right so Tino's getting free advertising there right so this case you got the H2 there so this is between the zero toot and Tino so Tino your messages are going to come out very soon whatever you said be prepared warn me so in this case we got a little subdivider there and then we're going to have the messages and this is actually going to be a reusable component that we end up reusing for the actual chatbot itself right so we're going to build this out right now and then when we actually come to build the chatbot it's going to be a lot easier than you think so in this case we got the messages and we've got the chatbot name that I passed through not these we don't need that we've just got the messages is a component that we need to go ahead and create so let's go ahead and create a component called messages. messages. TSX right boom RFC and now over here we've got our messages messages accepts two things it accepts the messages and the chatbot name so over here we get the props we can destructure the props like so get rid of that get the messages and chatbot name and then from here we can go ahead and type check them so uh do not do that right you do not want to do that instead you want to do message type so array of messages and do string chat but name cool now with this this is going to be a client component so this is going to be a client component um and we're also reason being is because as the user types in like typically this is going to be scrolling down with them so I I need a window to be able to check and attach a reference to to do that little trick when they scroll down now before we carry on this is using Daisy UI okay so head over to Daisy ui.com once you're read Daisy UI head over to install now we're going to go ahead and do the following we're going to say mpmi developer dependency da UI at latest so we're going to go ahead and pop that in like so so boom pop that in then you can see add Daisy UI to Towing config you can simply do it this way as well so import esm so let's go to our tailing config boom go to top import Daisy UI from da UI go to the plugins simply throw it in so in this case go to the plugins Dash it in like so and then come down here next yes you got example repos if you do get stuck we don't get stuck here we're good now so we got past that point uh now if you go back I'm going to show you if we go to our terminal you'll now see if we restart the terminal we'll see Daisy UI actually shows up look I love I love that J um we should see Daisy UI pop up now in a second let's give it a go in let's just pop in actually let see I believe it may be because yeah there you go look Daisy UI ignore the errors look Daisy UI two teams added start there you go so now we're going to import our messages component chatbot name is not getting passed in Happily chatbot name chatbot name name oh they do capital B what the hell all right let's go ahead and do this chat name no we don't want we want lower case there you go the messages boom so now we got Daisy UI Daisy UI is awesome because we've got stuff like messaging so where is it message chat bubble chat bubble is it chat bubble yeah I like this look this is what I used it's actually it saves you such an annoying little thing that you just think should be simple but it's kind of weirdly not so boom we use it for that so if you're wondering how I got my styling that's one way of doing it right so cool next up we've got the div outside and then we're messaging we're mapping through all the messages here very simply so we're saying messages do map for every single message we're going to do a implicit return right and then we render out the message itself now the message is going to be encapsulated in a div first things first we give it a key so message. ID is going to be each individual message right now you can see the nice thing about SQL database is every single thing is structured which means ID s all that stuff very simple to go ahead and have now in this case we've done an implicit return I don't want to do that fully because I need to have a little check before so what I'm going to do is I'm going to do explicit return so I can have a coding line here and say is sender and I can go and say message do sender equal to user so in this case sender is either going to be one of the two AI or user always and we set that up when we set up our database and we had type checks to make sure this was the case okay so if I'm going to say if it's the user if it's not the user then it's the sender right now I don't even know if I got that right to be fair I got a bit confused is it's either sender receiver or whatever the case you just I just need to know if it's one of them you know so that way I can style it accordingly Okay cool so at this point now I can firstly do my little bit of conditional styling straight off the bat I can go ahead and say class name chat if it's the sender it's the chat start otherwise it's the chat end and it's going to be relative because we're going to have a bit of text maybe floating around in it yeah Sam and Ian watching from Kenya M Sam what's up man I see you okay so in this case now I also want to do a little bit of a different thing so if I'm on the review page then we should see time stamps if I'm not on the review page so if I'm actually chatting to the bot I don't want to see time stamps so how can we do that well we simply say constant is reviews page and we simply say uh PA we need to actually use uh use path names so here we can go ahead and do use path name and then here we can say path do includes review sessions and now we can go ahead and see if it's in the reviews page or not uh reviews page in this case now first up we can go ahead and say if it's a review if reviews page exists uh what have I done here is his reviews page sorry his reviews page then sent basically it will show the the the message right and that one is going to be absolute bottom zero bottom five sorry text small text great and that will be next to the bubble like so okay next up we've got the actual div now inside this div I've simply got two things I've either got the Avatar or the user Circle user Circle or the Avatar okay uh Avatar we can import from our things use a circle we import as well this chatbot name have we got the chat name yeah sorry I have got the chat but name so my one is actually just lowercase in the build that I did before it was just uppercase it's fine go a and do that now you can see we got message nice okay and if I go to I want to see actually go to view sessions we should have one example here guest three where look there's a chat going on one chat one chat one chat and so forth yeah so we're already starting to see a bit of a chat being built out underneath that div all coaching advice all inside zero full stack Hero guys I can't answer the coaching kind of stuff right now especially when I'm coding live it just just I can't do that I can't do that much all right I can but it's going to take away from the experience all right next up we're going to style out a P tag right this P tag is going to be inside here like so and if I just typed in like hello for example you'll now see look so that's just going to be help us set things up but before we can carry on what I actually want to do is this div for the Ascender part I actually want to have string interpolation and I'm going to style it accordingly so here it's going to basically be chat image Avatar right Avatar is actually all built in today's UI with the 10 and if it's not the sender then a margin right at four so that it gets pulled to side a bit already you can see it's starting to look a bit better okay now if I want to be a bit lazy here you could just go ahead and just kind of be happy with this message. content and already like you kind of get the chat okay so that's cool and all but I want to have like markdown remember in the beginning what I showed you it was showing me tables and all sorts and different things like that that's called react markdown that allows us to do that so I'm going to show you how you can really get beautiful looking uh stuff comb back to you in that sense so right now firstly I need to have a bit of styling around this also this div I'm going to make it easier I'm going say firstly Flex one so it use up the full space it's going to be a flex Flex column uh overflow y Auto so overflow Y is going to be Auto space between each y component of 10 so that way it's got Breathing Room way too cramped padding y of 10 so it's got a bit more room from the top padding X of five so we got padding from the sides background white and I want to round the corners off so rounded LG boom okay so look at that I was actually wondering how yeah so honestly I'm going to be using R markdown today I'm not 100% sure how they probably do it but look at that I mean already nice yeah cool so at this point looking sick we now we need react markdown so I'll show you essentially I'm actually going to show you the web page for this so react markdown markdown component for react so here you can see R component to random markdown right so you can go ahead and check it out yourself down here they got a live demo I believe let's see our demo and look you've actually got some pretty cool like look how cool this is guys like all this kind of stuff right so I noticed that it was returning the responses in open AI has markdown so I was like okay I have an idea here why don't we just Implement react markdown so that's exactly what I did so in this case I'm going to go ahead pop in my second terminal mpmi react markdown quick little water break while that [Music] happens cool guys almost at 300 likes just keep smashing that like button that's it this videos are free they're growing they're literally free free free value Jay we need to change the title Afters because people are getting confused what intercom is I think an AI chat assistant is going to help everyone out way more um like a full stack like give me title suggestions in the comments right now yeah that's there you go give me title suggestions Jay save some of the title suggestions cuz you guys are watching right now what would you like this video to be TI that makes sense okay so first things first we're going to pull in react markdown and also there's one called react gfm I can't even remember what that was for that one was for plug-in that was a plugin yeah for like tables and stuff like that okay yeah that's for the table plugin so we're going to also install that command J oops come onj mpmi and this one's going to be react remark gfm so you feel free to Google it but Remar gfm is for essentially tables so I'll just show you screw it uh it's like adds in a couple of extra additional things right so in this case I mean you can check out demo for yourself I going to show you in action always fun just to see it in action so now we've got the two things that we need go up to the top we can go ahead and import it like so boom W mark down remark there you go um so instead of the simple message content I am being super extra and I'm wrapping it in react markdown okay so first things first pop it inside there second thing we're going to be doing is passing in the plugins and also a class name to say remark plugins there you go right break words and that means that if it gets a huge response and so forth and then you can customize all the components now I've done the hard job for you and I've gone ahead and actually customized a ton of them for you okay so what I'm going to do now is put them on the screen and show you each one that I've done so component I've customized unordered unordered lists so they look the following way ordered lists I've gone through and I honestly was playing around with this for age as you can imagine H1 I've changed H2 H3 I've changed tables I've gone ahead and actually built out a table for it table header I've gone ahead and designed P tags I've said they should look a certain way a tags as well I've showed them in a certain color so this is where you can really go ahead and customize as much as you want right so that's how we get that magic of it looking really really nice right right now you can't see it but once we go ahead and drop some links and stuff you'll actually be able to see the full breakdown of it okay now the next step is is a little trick okay now the trick is if every time the user types right in this message box you want to basically scroll them to the bottom so you've got that nice kind of open AI chat F right so the way you do this is you have a div at the bottom of the the file underneath the chat so it's still part of the container but it's it's it's own little div div right and then what you do is you have a reference at the top like so and all you have to do is create a use effect which basically says every time the messages change which means that someone basically just went ahead and added a message then what you're going to do is you're going to say ref. current if there's a reference connected which is in this case it will be cuz we connected it down at the bottom when the ref Cur scroll into view with smooth Behavior okay and that's how it now Scrolls down this will happen because there's a little mismatch between the timings and stuff like that don't worry about it this will go away once you come back so now if I do this you see that boom look at that guys absolutely awesome oh look at this so repon was having a course I want to talk with sunny Sunny's always around for amazing Community look at that look oh this is cool give me link guys that's cool look one of our students actually had it I had a chat with him you know this is sick all right test user test a test some people aren't chatting with him fully and obviously at this point you can really go ahead and eradicate the um the the chats without with zero you could have a cloud function or Cron job which runs every interval to clean up the database and so forth you can really take it as far as you want yo what's up it's man so look at this we've got the chat down looking awesome so we've got two things now to really do okay I think now cuz this reviewing section is done um I think now what we should do is go ahead and basically have the logged out State first and then I'm going to show you the juiciest part of all which is the actual chat bot right so you got stick around for the chat bot right so in this case this that's the part where you click this and you see the actual chat bot right so a little demo of that before we jump into it we're going to go ahead and do this section soon so boom when you click this this when you put go ahead and pop in your name Sunny at abc.com oh this is such a Beat and then look at this uh and then look so now if we chat to it you can say hi and so forth right and it'll go and chat so this is what we still have to build but trust me this is a breeze compared to what we've done this is already using the message component so we done already the hard stuff guys it's just this UI and then boom we're good okay um this car definitely beat definitely Elevate the yeah it was sick right these beats are sick this is Jay's playlist I've been stuck in the job where we work with app script there a lot of scripting work I'm having the hard time switch job prop Dev by sorry for that don't don't worry dude I always recommend if you want advice for that zero full stack hero Link in the description join us I promise you advice is all there right so we help a lot of time with these kind of questions let's carry on guys so we're going to have the logged out state so if I log out now look it kicks us to this point look so firstly who likes that I mean that looks so nice right no worries emmanu I appreciate you look at that look so nice and this is using Clerk's sign up elements right so absolutely beautiful stuff from clerk cuz cuz honestly that's the beauty here I've just kind of added this few stuff here but we're going to go ahead and build this screen right and then we're going to go ahead and build the chat boo screen so I'm going to do that right now and I'm going to show you how we do it boom layout here so over at the layout section here I'm actually going to do it at the layout admin yeah so we'll do it at the layout admin because I'm only protecting the admin part so there's a few ways you can do this now you can even do it in the Middle where so other you know a few areas like that but I'm actually going to do it here simply and it's not going to be that's pretty simple actually put it here so what do we do we say const user ID equals await or right and obviously when we're doing a wait we need an asynchronous matching and then we need to import our or object so we've got the user ID now if there is no user ID we're not going to just return we're going to actually go ahead and return a redirect right return a redirect remember because this is server side rendered they'll never get through so they won't even see a little glitch or anything they just won't get through to this so boom redirect login do you think Clerk's pricing is reasonable yes I'm not even just joking not just because we're sponsored by them guys it's like if you it's like it's payable it's free up until your 10,000 active monthly monthly active users it's around that kind of amount like that's so good that is actually so good right so if you're if you got 10,000 monthly active users and you're not making enough to pay for a subscription then there's a problem with your model that's what I would say um do you have a full-time job or do you run a business uh both I I I don't have a full-time job I I work for myself but it's fulltime like I'm flat out working more than anyone that I know who has a full-time job so that's just the heads up but in this case look at this guys so if we go ahead and log out now so if I try and come to any of these Pages it will throw me to for/ login so if I go to edit chatbot see how it throws me to for/ login cool so now what we do is very simply we just put a for/ login screen screen so so we go to app admin guest actually it should be a guest screen because we don't have any styling there so really and this really makes sense right it should be in the guest one so for/ login for/ page. TSX RFC boom this is going to be a breeze for you guys now youve done like some hard stuff right login page so at this point the login page okay so um yes so why have I got recruited how to build a confidence become a master manack develop firstly don't get obsessed with M Stack secondly mentorship period I've got mentors they make me way more confident because they teach me the hacks to shortcuts to become an awesome developer I can be a mentor period that's it that's honestly the key to it all and then practice practice practice uh login page so and I'm not just spitting out for random reasons like it's truth I do it myself like I have mentors in every area that I want to level up in okay so we got a div surrounding our login page now and the first thing is I'm going to actually just pop in The Styling now or if you really break it down it's just simple centering right this is just simply centering a div right um with a nice blue background so you see centering the div in the background blue background um next up the div inside is a grid a grid of two on a uh big screen otherwise it's essentially just a uh a div of uh I'll pop it in I'll show you all right so the first one is the div so this is a grid a grid of two so one two on a single screen one okay so look grid grid columns one small screens mediums goes up to two screens a gap of five simple the next one is this right so firstly the the First with centering all the items so Flex column item Center justify Center we've got the div which is the avatar on the left so pop oh so sorry so firstly we're tackling this one here yeah so if I was to go ahead and minimize this you'll see inside of this these grid Columns of two one element is this side and one element is a sign inside now the sign inside is simply a signing component from cluck and all we have to do is say fullback redirect URLs to the homepage and the rooting is Hash rooting is Hash because it's like a a fullback Catal for what I'm doing right now so in this case right now uh the sign in is one side so this is the sign in and honestly like look how beautiful that is and you can customize that as well right you can do themes and stuff and the left side is the styling of that so what we're going to do is we've got the div for the Avatar surrounding the corners and all that good stuff and then we've got the text saying assist Le your customizable agent so I'm going to hit save and boom just like that like look how nice that is right you only mind that makes this type of project on streams thanks you sir proving lots of knowledge you're absolutely welcome dude if you like this imagine what the course and Community is like that's what the coaching course in person are like like I can't even stress it like I wish I wish I was part of like another coing Community where they did that like cuz I try and show the bit where I get stuck and that's the bit that I don't see Exposed on YouTube like when I get stuck you guys see me get stuck right like guys look at that that boom looks absolutely beautiful and that's it that's the login screen so now if I do a continue with Google let's log in and then we first also we need to do this screen as well so few extra screens to do right so we got the create let's just go through it let test create a test you can see yes hello I update this to 1 two 3 one two 3 you can update that as well remove that delete the test like when you guys ask me for crud CR applications I mean how much more crud can you get right like look at this like we not just done that we done so much more if we go to a chat that one of us oh look it scrolled me down to the bottom you notice that they did the scroll down at the bottom awesome stuff right so now if I was to log out it will throw me back to that page so just to demonstrate it look log out boom if I try to go to the edit chat any admin screen it throws me straight back so we're going to log back in now do the first page and then the finale is going to be to go ahead and do the chat bot which is actually the the golden gem part obviously if you're watching the replay of this it's all going to be in the time stamp so enjoy everything and that side but this is going to be the homepage so if we go ahead and do app admin page this one let's quickly start this one this one's easy this one's just like a straight up like very simple page I've done you can really customize this to be you know as good looking as you want in this case all we've done is we've gone ahead and put a simple button and Link we got an H1 and H H2 so I want to pop those in so rather than these two this looks like trash we're going to put H1 and H2 just says welcome to a sisly uh for the styling padding of 10 let's see BG white margin 10 so I'll save it as I go so you guys can see it round the corners off and width of four right in future if I get a chance to meet you I definitely meet you sir also gift to Japan honestly all I care about is you guys have the gift of succeeding that makes my absolute day you have no idea right and then we're going to have a link to say get started with your first build right or get started by creating the first chat Bo there you go so when you come on to the app now boom look at that it just looks so good guys like it's so clean and you click that it takes you to the chat bar boom anytime there's a bit of a loading thing going on also you notice that there's a little bit of a loader there like a little a loading situation you can actually go ahead and fix that by having a little bit of a loader for any server so because some of these are server rendered routes so what we can do is where we have page here at the top level in admin where we have page and layout I'm going to add a loading. TSX file and inside of here all you need to do is put a loading functional component so in this case just change it to loading and I've just got an avatar spinning around in circles right so now look at that anytime we're being blocked on a server component we get a little spinner now so if I was to refresh look at that so nice so nice look at that cool so now you got that loaders everywhere if you need it awesome stuff to stop your user from wondering is it working I'm clicking this nothing's happening all right so homepage done now guys we just have the chat bot to do and you're probably wondering Sunny just the chat bot yes it's the fun part guys that's why I left it here so we've got the guest chat boot to do so admin panel essentially done right I think it's actually done yeah so admin panel next we have the chatbot page so chatbot and then the chatbot page has a for slash so in this case it has another page inside of it with the id id and that has the page inside of it okay so inside of the chatbot we have the page and now this is where this one's a big one all right so RFC so this is the chatbot page now if you're wondering quick little recap guys of what we're building right now log into my account to show you [Music] e Michael what's up I see you whereas in this case we go to edit chat bar say for this one for example say if I click into a build we're building this entire thing right now okay this entire flow with the mod modules and everything look how smooth it is oh my God you're going to learn how to build all that all right so firstly it is a client component of course we have so much interactivity on this page it's going to be a big one I'm warning you now this is a big one okay so first things first we're going to have a dialogue okay so we need a dialogue to pop up so let's go to chatbot 4/11 right now why is it not detecting that as well 4/ chatbot okay so it's put chatbot inside of login which is wrong you want to make sure it's outside of login see that and you want to test it to make sure at this point you should be seeing 4/ chbo 4/11 working okay so that's the first thing the second thing is we need the query progam from the uh the the page so the dynamic dynamic wild cards you can go ahead and get the prems like so like we've been doing so you can go ah and say this prams ID string like so okay um so awesome stuff a I love that thank you so much I appreciate that um so we got the chatbot page and if I was to just prove to you we go colon ID boom just like that chatbot page for 11 right so this is where essentially we're going to turn that into that fully interactive right you're probably wondering how is he going to do that I'll show you right go to dialogue like can I just stress as well do you see how big these builds are like cre like crazy crazy levels right levels to this like I do this because I'm like I you how how can you beat this level of value on YouTube like I don't care I'm going to keep doing it it's a level of Pride buing this right want the pop F to be the best damn coding community on the floody planet period all right that's why we're working with people like IBM neon step Zen all these cool guys Microsoft light everyone this is so cool right we want to as your all of them oh my God is crazy we just got with Google Now All right so we got this the chatboard page okay so yeah so go to dialog install the dialogue which we did already import the following the dialogue's pretty big so here now this is the dialogue section so we actually need a few pieces of State here I'm going to just prepare ourselves initially yo thank you so much Emanuel I appreciate that $2 donation hey Sunny my dad watches you I love your vids yo that's so cool man my dad watches you I love your vid I love that Jay that's so sick we're going to have a couple of pieces of State here now we're going to use these pieces of State throughout okay so here we've got the message array a couple of things right now all of these things we're going to go ahead and use like you know we actually made like already like $40 £40 I think in just donation that's crazy yo thank you so much guys all right so these are a couple of State pieces that we're going to need for you know getting this ready getting things set up but now let's get the dialogue set up first right so here first things first we're going to put the dialogue firstly we start off with the dialogue right so let's do a dialogue itself and this is obviously going to have is open or on dismiss or open on open change on open change set is open you don't need that you just do this and then here you just say it open not is open y so there you go so that's the first see the dialogue itself then you have the dialogue content okay this is where the rest of it lies so dialogue content is essentially just going to be the content inside the dialog right which is essentially this right now so right now starts off as open so this is a cool little tutorial showing you how it's going to come together then we have the form itself inside so we have the form cool and now inside the form we have the dialog header so header is pretty straightforward fairly simple thing pop it in Let's help you out just need a few details to get started then we have a div inside which is going to represent the body now the first bit of the div is going to be a label and an input field okay so the first bit is going to be a label and input field so firstly label I need to install the input field I've already installed so label is inside of here label is this one so onj boom install that and then once that's done control space SP and from don't do it from Rix yeah you do it from components okay now look at that you can see name John do cool um that's fine for now and then we've got another div underneath which is going to say email so this is underneath here it's going to be for the email so you see here why is it back to front interesting uh I think I fix it afterwards anyway so do witth four Flex background gray [Music] 100 and then we have the oh I know why outside the entire div should have a grid gap of four adding y of four I forgot to do that yeah there we go name email we have a look at my one yeah it's that one yeah so that's it I I thought it didn't look the same I don't know why it does yeah so the div is there div is there and then afterwards we have outside the div we're going to have a dialogue footer now this one's just going to ENT you going to have a button and if the button Buton is loading so import these if the button is loading it's going to say continue otherwise it's loading cool now this button should be smaller I think it does the same one here okay so it actually does the same though that's fine I mean U really like it this one could be Flex one I think [Music] [Music] so we could actually say width four on small medium so it's getting limited somewhere that's not a very big deal to be fair you can dive into it afterwards yeah I think I might have been here then with four FX one on the flex one if we make this one Flex it's all right it's fine I don't want to dive too far I'm a bit froggy anyway but anyway yeah so the point is there you go like as in there we have it so if we go let's help you out Sunny s so sunny and you notice how we disable that button based on it abc.com and then you see how the submit function is not working so submit function is here form on submit and we're going to have handle information submit okay and then this is the function we need to create so this one is going to be as follows so we've got handle information submit first thing we do is e. prevent default PR the default behavior and then we're simply going to do set loading to true we're going to start a new chat right and then we're going to set the chat ID to whatever it comes back as set the loading and set is open open to F okay now start new chat let's do that so start new chat is actually going to be a API endpoint I believe it was send message was it that or let's have a look start new chat was uh I think it might just be an end point to be fair but let's have a look where I did it oh no it was actually a big function I forgot about this yeah oh wow it's a big one yeah so this is where we essentially start a new chat session for a given guest okay so what we need to do is go to a lib folder create a start new chat. TS okay now this is going to be a bit of a function okay so first things first we have a function which takes three things it takes the guest name the guest email and chatbot ID because it's creating a chat between this guest and this chat bot okay so it's creating a new chat session think of it that way okay so we've got three steps here okay and I've done it very nicely and I broke it down for you so we got a try catch block okay now of course if anything happens we just simply error out we say okay something went wrong step one we're going to create an entry into let me go ahead and get the client ready so we can go ahead and get this ready so we need to create an insert message mutation let's go ahead and prepare ourselves for that already so insert message insert message very straightforward let's go into our mutations pop it in so this is going to be the inside messages takes again the same three things now first off uh I appreciate you guys so much ni thank you for the lovely messages all right step one we're going to create a new guest entry okay so this one boom we do it by saying await client. mutate right so we're doing a client mutation okay in this case because we're in a function we're doing it like this right but this is a don't get twisted this is a client side mutation so client don't mutate mutation gql insert guest right now in fact this one I've actually put it in line but you could you should even I would say you should put this in your mutations foldo but I haven't done that this time and I don't want to do it right now if I'm want is cuz then basically you would just go ahead and you see how we've done it here you essentially would go ahead and do the same thing so here this mutation You' go ahead and pop it here like so insert guest so the insert guest would be the gql point from here so essentially we just need to do export we should do it I'm sorry I'm going to fix it insert guest gql there we go insert guest I won't be lazy yeah so in this case boom mutation is going to be insert guest like so the variable is guest name and guest email guest name guest email Done Right guest ID gets res uh returned as a result of that because the guest ID comes from the guest result. dat. insert guest. ID so it comes back now step two initialize a new chat session okay so this The Next Step so initializing a new chat session okay I did I did the same thing for this one all right it's fine okay so what we'll do is we got client. mutate gql insert chat session so again mutations head over here we're going to do the same thing we going to say uh export insert chat session but instead of this I'm going to just paste mine so I know it's correct insert chat session I moved it over here get rid of that we can say insert chat session import it that's a lot neater you see that guys super clean and we passing chatbot ID and guest ID so let's just double check chat ID and guest ID done right that gives us back the chat session result we enter those values and then we basically get back and obviously at this point you could do like we said before the type definitions to protect yourself right uh at this point I'm just keeping it very neat but I'm just explaining to my best what we can do here not to the best but time wise as well next up insert an initial message so imagine you create a new guest then we create a new guest session with that guest entry then we go ahead and insert the first message into the chat which is welcome sunny how can I assist you today okay and that one is fairly straightforward it just looks like this so we say await mutate so it's this await client. mutate uh insert message variables chat session ID sender is AI remember it's AI or user and then this one changes to a dynamic to oh yeah so I was going to actually do this you can see I left my own to-do right so this is what I actually do uh I I either leave a to-do or a fix me um so handy little plugin if you didn't know but I was going to change it to be a dynamic value so you change it but I'll be honest build so big that I thought this is enough so now it just says welcome sunny or whatever you put as your name how can I assist you today I think that's an awesome natural greeting but you could obviously if you assassin this out you can go ahead and customize it as far as you want okay now after that we're going to say in the console new chat Su oh God successfully created boom and then we return the chat session ID so three actions are happening here to create a chat session hence why I've import exported into a separate file and then all of that goodness happens if I go to sorry start new chat we have to export this function so we're going to export default export default start new chat go back here import boom now when we submit the information it will start a new chat and then it goes ahead and sets all the appropriate variables now now that we've set these variables we can actually go ahead and render out the front end to respond accordingly so the popup dialogue is done okay po up dialogue looks great one second I'm just moving the chat a little bit okay so let's have a look at this now so it's just say like Sunny abc abc.com and this would have created a chat session and you see that boom you see how it says loading and it was loading on the front screen that's because we had loading over here and we disabled based on the loading State as well okay so now we have the caller part right we have the next bit we have the div so let's carry on so we got the div inside this div we got another div right and first off you see we've got this which is the top section here so this is the top section for the chat bot itself right so in order to get this looking nice I'm going to pop in the chatbot itself so this div will look like follows it's going to have the Avatar the chatbot data we need to fetch the chatbot data okay right now we don't have access to the chatbot data and then we have a bit of styling The Styling relatively straightforward guys it's just sticking the top to the thing so when I actually scroll down this will stick to the top and this bottom it will stick to the bottom so a couple of different things I've done here like that and then the overall the overall uh styling for the outside I've just gone ahead and done the following so you can feel free to pause the video again Flex column few different simple things Max width 3XL which gives it this look as well that's how we're essentially going ah and get that but chatbot data let's fix that because right now without the chatbot data you really can't do much so we're going to use get chat by ID which we we actually set up earlier so we've done the hard work here of actually making our life a little bit easier let's go ahead I keep moving my window okay so in this case um [Music] here use Query we've already got get chatbot by ID we've already got get chat bot by ID here and we got the variables ourselves so now this is the nice thing guys once you've done it once look at that chatbot ID comes through sales robot pulls through right there just like that we have the top part starting to populate okay next up we have the messages now who thinks the messages is going to be really tricky tell me I'm curious all right so one thing that I want to say here is we basically firstly need to do a get messages by chat session ID all right so that's what's the first thing we need to do so let's pull this in and I believe we did this already no we didn't do this already so we need to do a get messages chat ID right so in this case we haven't got a a query function to do this so if we go into our types no not types our queries we actually need to create one called get message by chat right so in this case if I go ahead and do this right so so get messages by chat session ID and we're also going to protect ourselves guys by having here so I've only done the response here but again remember the same principle applies I showed you guys before if we go into our types in this case boom we've got the messages by chat ID response you can also put in the variables variables being the chat session ID so if I went over here now you can go ahead and do a second one which is going to be the variables which is chat session ID go back over here boom and then we can say messages by chat session variables there you go boom it does it have you ever used push for M yes I've done it in a couple of builds as well guys um so in this case we have the data now so the data has the messages inside of it okay so what I want to do is I want to take the messages that come through and I'm basically going to create us fact which just basically sets my messages locally okay so all I'm going to say is this a user fact the dependency is the data that is loaded above okay and all I'm going to do is I'm going to go ahead and say and also guys by the way chat ID says skip if there's no chat ID just basically as a protective measure if you didn't pass the charity you wouldn't really get to this page but still protect defensive programming for the win it's going to help you in case you get stuck with it right now here we say if chat. messages uh and this is freaking out because messages is not being appended the correct message type interesting so I want to double check something message okay so my message type here is not okay that's wrong don't do that this is the wrong I imported the wrong message I was wondering so it's always good to kind of get a reminder every now and then that you're not doing it 100% so there we go now we set the me so every time we fetch we basically set the messages okay now when we set the messages we can go ahead and do the next part so who thinks it's going to be tricky to render out the messages okay so let's go ahead and say Sunny uh Sunny yeah Sunny uh abc.com enter and now after all that yeah you might be wondering oh man rendering out the message is going to be a really hard task you know it's going to be pretty tricky what if I told you it's insanely easy because we've already done it we've already done the reusable programming technique look what we do is we pull in our messages component we already have the messages over here the chatbot data came in the chatbot name itself was there the only problem here is the chatbot name is lowercase I think no is it that no chat bot oh yeah oops Yeah and one was chat bot datail yeah so now as soon as I hit save guys look wait for it wait for it wait Did it pop in okay let's see um is it creating that chat as well so Sunny s a.com oh look yay there you go now we just need to wait to go ahead and uh how many years has it been since Sun became a developer I've been coding for like 13 13 years or so now I think yeah 13 uh messages just don't worry guys it's not about your time it's just take your time enjoy the process right the next step is a form a a Zod validation step okay so we need to have a Zord form for the chat here so you also want the chat to be fresh every time someone comes in unless you start implementing state for that and all sorts but right now I think it's good enough just to do focus on the form part so what we're doing here is we're actually using the form here guys so you see this one we got react hook form now react hook form very powerful okay so we're going to go ahead and do the import install here and I'm going to break it down so step one we need to have import we need to import Zod okay so Zod is basically a validation library and then what we're going to do is we're going to have a form schema basically determine what's going to be inside so on the chat so at the bottom here we just have a message and a send button and the message is if I have for example less than two characters it will go ahead and say no no no your message is too short okay so that's the first step you just simply go ahead and have that now the second step is you need to go ahead and have your uh you need to use something called use form to create a form instance right so let's go ahead and do that right now so we can do it over here for example so in this case we say use form pull that in from components UI form which we just installed Zod resova we need to install so Zod resova uh is actually to do with hook form so I think I need to install that I don't think I installed that no we did install that yeah and then Z INF for type our form schema expected one argument got two what have I done here use form okay so I haven't even got use form uh I haven't installed react hook form okay what the hell I did install re did the in installation fail react H form okay I mean that should have installed everything weird I think it's just my vs code playing up today honestly while I'm live yeah look there you go it has installed my intellisense is not working the way it should be working but anyway use the form this is the way they recommend it in further types the reason being is the resol basically connects your schema to your form object and then you can set your default values now how do we use this or how do we use this even well it's actually fairly straightforward you just connect it to their form component and we just use it their way so in this case if we go down to the form over here outside of the messages we basically just pop in a form which is their form we have a self uh so it's a parent component and then basically we're spreading um no we're not making the script to embed the website I could do that in a follow-up video or inside of zero to full stack curo um but yeah that that's awesome that's what I'm actually thinking to sort of leave on the Cliffhanger side but yes right now it just takes you to a separate page but you can even embed that page in another widget or something right so here we have a form inside and the form inside acts like a normal form except we have a form filled okay so the form filled has a few things so first thing I'm going to do is pop in the first fi so form field you have something called control so let's go ahead and import what we need so form item form label form control and form message control space by the end of these brings up that little popup the name is message and if you see here if I go ahead and get rid of this you see it autocompletes because that is based on the initial schema that we gave it here okay so heading back down we have the control form control that's how you connect it to the above control that we spoke about then you have the Rend which is how the form basically the element gets rendered out so in this case we can style it out right we've got the message form control is the input and then we have the form message itself now form message is essentially just going to be also if it's too short or any of that stuff like it will come out there now and underneath this we're going to have a button right simple as just going to be a normal button it's going to say send okay now this send is going to be a type submit just like to be clear with it and class name is going to be height of four okay now with that in mind let's go ahead and check it out so as you can see now at the bottom it doesn't look that good because the form hasn't been styled out so the form I want to go ahead and say it should be Flex now pay attention to the bottom you see that right there say Flex items should be start uh sticky to the bottom okay I want it to be sticky on the bottom zero uh Z50 so that way nothing ever goes over it space X of four drop shadow do a drop shadow uh large and then we're going to do a padding of four with a background gray and round the corners so boom okay and just like that now if I show you look at that awesome I try and type submit nothing happens right now okay uh what's an intercom okay so intercom is like a chat a assistant right so in this case that's actually Crazy Jay we actually really need to go ahead and uh and change that yeah so I'm going to change that basically it's an AI chat assistant I didn't realize people didn't know what intercom was I thought it was a really typical thing okay's cool um so in this case now we going need to handle the submit of the message function right that's actually the core part of how this all works and then we have a send message Api route so just when you thought we were done there's more all right so in this case boom told you I wasn't messing around that onsubmit form. handle submit you have to wrap the submit Handler in what they give us and we have to create a unsubmit function so the unsubmit function let's go so the unsubmit function at the top let's go up here we're going to create it here we're going to say con oh no sorry asynchronous function onsubmit and this is going to have the following it's going to say values and it's going to infer from the same schema that we set up earlier so notice how Zed infer type of schema is the same as Zed infer type of schema for our form so we're basically ensuring that the values are coherent and consistent we set the loading to true and we destructure the form values 4our live is wild got to love your perseverance I appreciate you guys so much so we destructure it there we go first thing I want to do is I'm going to copy the message from the form State into a separate variable so that way you get like an optimistic feeling when you hit send it's like oh my message disappeared from my input field that's always nice way to do it right the second one is if the name or email hasn't been filled out we want to reopen this box so if I went it like this and I try typing say enter it's going to prompt you again you'll be like oh no look hit prompt boom right so you kind of won't let them get past or send a message if they don't get to that stage next thing we're going to do is we're going to handle the message flow here uh we're going to submit so if the message is empty we're not going to submit okay so we can also disable the button down below if there is no input okay so you can also go ahead and do that uh you can do that by form. values I believe as well so let's just try that out here I think it would be form you could do it that way as well to be fair form is submitting um so in this case ABC see form state is valid yeah so you could do that as well that form state is valid that's pretty cool so if it's submitting or form state is valid that's cool um go back down unsubmit message Tri boom here so optimistically update the UI with the ui's message so so basically what we're doing now is I'm going to fake two of the messages right so this is called optimistic UI update it's a good programming practice what we're essentially doing is we're going to set the local state and this is why we set State over here in case you wondering right we have we moved it into our own States we could do this so what I'm doing here is I'm optimistically creating a user message which is the one that I just typed in and sent in addition to that I'm going to for add another one which says that he's thinking so the AI he she is thinking right and basically that's going to go ahead and give me the illusion that oh my God it's so fast right and in the background while it's doing the API request when it returns it will replace the thinking ID with the one that we want to go ahead and put instead which is going to help us massively right so what we do is we go ahead and do the followings we say we've got the loading message which is going to be the ai's loading message where it says I'm thinking we set the messages to the previous message as well as those two so this is called an optimistic update okay now what we need to do is the actual API call so we do a try catch block oops don't do that we do a try catch block try catch block and then if any error kicks off we're going to throw the error so firstly this handle the negative we boom we throw that cool and then inside the try this is where the magic is really happening the first thing we're going to do is make an API request a post request to an endpoint the endpoint is going to be the API send message endpoint which we're going to create on our side it's going to be a post request we're going to pass in application Json body we're going to stringify the body we're going to pass in the name chat session chat B ID and content okay when it comes back we're going to get the result of the text that comes back like so so you don't have to console loog the result I just did that for a bit of a debugging step and then we're going to update the ai's response okay so the way I've done this is fairly straightforward right so I basically gone ahead and just spliced out whatever he had so what we've done here if the ID of the message was loading so in this case look previous messages. map so it's basically setting the state to previous messages map messages If the message ID equals the loading message ID so look at that loading message ID so if it if it matched this one then it would go ahead and replace it with the contents of the message that came back from the AI so essentially if I go ahead and explain this this one essentially updates the loading message for the AI with the actual response okay that by the way if you didn't know that that's a little trick that you can do with BS um get up copal kind of handy little trick son I can't send another Super Chat but can you shout me out when my dad watches this video yeah bro 100% I can Emanuel I appreciate you yes right guys absolutely killing it oh my God the viewership is insane today right absolutely so close to the end right let's keep going so we're going to do the API send message Api right now so this is where we have open AI integration so yes we have open AI today there we go right so we're going to go to our API and now inside the API we're going to have a send message endpoint right so send message endpoint over here let's go to send message we're going to create a route. TS file so route. TS file and now inside it here so I've properly laid this one out for you guys so it helps you out so we have our post endpoint now this is where we do all the nextjs like goodness right so we got a couple of queries we got a server client we need to get a few things ready and so forth but we're going to step by step get it ready okay so first things first we need open AI so in this case I'm going to go over to my code over here bu bum bum okay so was we're going to do uh mpm install open AI cool now next thing you need is your open AI key okay so you are going to need an open AI key so in this case open AI keys I always forget the keys where they are open AI platform da da da da da go to platform. open.com you want to log into your account so in this case I'm just going to log into my account on openai I'll show you where you can get your keys now open a is one of those things guys yes you do have to pay in the beginning you get a free trial but afterwards you're going to have to pay is it worth it well hell yeah I use the thing like all the time I think it's completely worth it uh in this case you would go ahead and click on create new secret key and then you want to go ahead and create your key and it will give you the key it would look something like this SK something something you want to go ahead and copy that key okay once you've done that I'm going to go ahead and show you where to put it inside of your code so I need you to go over to your environment variable I'm going to hide mine for a second I'm just going to go ahead and remove all of the sensitive stuff for now so give me a second so I'm going to remove the sensitive stuff for now so in this case boom we have it like so so environment. local so MV local so I'm going to put my open AI key in here so open AI key and then I'm going to paste my key in here okay so I'm going to put my graph k key my col secret ke and the open AR key that we got just generated in here do that and come back to the file so I'm going to put mine in right now uh I'm popping them in one second guys I'm doing it I'm doing it I'm doing it and boom I'm in so I'm saved now we have our open AI key so next step we have to prepare open AI so so what we do is we create an instance of open AI like so we go ahead and we're going to int import it like so right we get const open we say const open a equals new open AI with the API key from open AI API key and this is on the server so it's safe to go ahead and expose that otherwise it just wouldn't expose it's by default it does that right next up we the values that we pulled through we basically sent here inside the chat so these ones name chat B sessions four values we need to go ahead and pass those values so boom we get them like so next up we can go ahead and put a little bit of a debugging message if you want I did this when I was working just to make sure that I was getting the right sort of step and all that kind of stuff then we have a TR catch block okay so this is where we start doing a bit of the magic so let's do a try catch block and I'll broken it down into steps first things first if there was an error at any point we're going to handle the Negative Edge case we're going to go ahead and say console log next response. Json error with error state of 500 okay look at that guys that's awesome um so now we've got the TR catch block so here I broken down the steps first step we need to fetch the chatbot characteristics now think about it what we're doing here is essentially you're chatting to a chatbot so I need to know a couple of things here I need to know the chatbot characteristics so I can basically prepare the completions API from open AI to go ahead and basically say you know this and this and this and this and this about about this topic so when I ask you the next question I'm about to ask you you should be well informed right so that's essentially what we're doing is we need to fetch that from the database so I'm going to show you how we do it right now so first things first we're going to basically go ahead and do we've done this before as well we're going to do we're going to get our server client our Apollo server client we're going to go ahead and import all of these now these are no different from the ones we've used before except we're doing it from the server now so we go ahead and we get the chat bot like so okay now if there was no chat bot we return an extra response error code of 500 or 404 saying chat bot was not found step two we have to fetch the users's previous messages from the chat okay so we're going to fetch the user previous messages from the chat and you could probably pass this in every time but the chat could get pretty big so I've offloaded this to the back end okay so let's go ahead and do that right now so we got get messages by chat ID and we go ahead and pass it and so for and just for safeguarding I found it kept cashing sometimes so I added in a no cash fetch policy okay now what we're going to do is we're going to get the previous messages so I'm going to go ahead and get the previous messages like so boom now what I need to do is a uh open AI so AI open ai's completion API expects data in a certain format so the M the data in my database is not the same data that it expects for previous messages so we're going to do a map function to make sure that it's in the correct data let's check it out so in this case we've got the formatted messages I'm going to map through each one so these these are the original messages and then here we have the message pram uh messages that we're going to go ahead and do right now so if I go ahead and pop this in this is actually from open a itself so we can actually go ahe and make sure that it's in the correct format right so what we're doing is we're mapping through the previous messages and the rle If the message was um the If the message sender was AI we turn it to a system message otherwise it becomes a user if the name was AI we turn it to a system message otherwise it becomes a name AKA for example if I'm chatting and the content simply becomes message. content so that's okay right now the next step we combine the characteristics into a sing system prompt so what we do is we basically are going to go ahead and what I would do here is I'm just basically saying all of the previous messages are just concatenated with each other and right now it's a very simple example a high Lev simple example but you can see it works okay and then what we're going to do is we're going to go ahead and prepare the messages to send so essentially let's just say we had loads of information about the user let's go ahead and check over here for example let's go to one of the chat Bots it will go ahead and say you can track the orders on the website plus our support hours on 9 9:00 a.m. Monday to Friday plus you're a helpful customer support assistant okay now what I'm doing is this is where really the sign of source comes into it right so we're going to go ahead and actually have an array of messages okay sorry guys one second we're going to have an array of messages now the array of messages that we pass in has the first message which is the system message this message tells a open AI what the hell is going on right like gives it a bit of context beforehand so your helpful assistant talking to sunny right if a generic question is asked which is not relevant or in the same domain do not ask ask the user they're only allowed to search for specific content so you can really dial this one in use emojis where possible gives it more personality right so here is some key information that you need to be aware of these are elements you may be asked about and then we basically combined all the system prompts that we basically concatenated and we prepared them in the correct format accordingly okay now once we've done that we pass in all the previous messages so it knows what's what the chat is so that way sometimes you can be like what did I ask you 5 minutes ago and it'll say you just asked me this this this okay we do that and then we take the uh the users message as the final message and then what we do is we create a chat completion so step three is the final step for this we go ahead and we use the completions API and we're going to use GPT 4.0 I've got something in my eye oh God one second I've got some something in my eye and it's crazy distracting and we also just smashed 300 likes let's go um I'm crying because it's so beautiful all right so we're going to go out of this and we're going to say con opening ey response equals open eye chat completions create okay so at this point s goes myish probably is oh my God it's driving me crazy I feel like I'm getting allergies in this room what the hell it's crazy okay so in this case opening ey chat completions do create and then we pass the messages now GPT 40 now I have got a paid uh version of GPT maybe that's why some of you guys have uh got the issue where basically you say model 40 not found in which case you could just use model 3.5 so in this case if you did have that you go ahead and do this and let 3.5 turbo that's how you do that by the way in case you're wondering I got a couple of those questions last time so there you go that's the answer oh my God my eye is driving me crazy okay now to get the response of the AI what we do is we pass it in like so we say open response choices the first one back messages. content and we trim any ending white space from it okay once that's done if there was no response or whatever we're going to basically return a error saying failed to generate AI response step four okay now step four we're going to push it into the database okay so step four we're going to push into the database so once it's come back we're going to go ahead and insert the message into the database so it goes into the database and then step five we're going to save the ai's response in the database so first things first we're going to save the users once we know we've got the ai's message back then we save the user's message then we save the ai's message and uh and yeah you could do that you could probably concatenate those together if you wanted as well and then you want to return the content back to the user so all of this is basically to allow us to send the message over to Ai and this is where the real brain of the system is happening right so in this case this is where we go ahead and return the ai's response to the client so now let's head back over to the chatbot itself okay so this is where we sent the message afterwards we get the result back okay and we simply update the messages with the result of content replacing the loading message on the front end and just like I believe we did it right so let's go ahe and see if we did this right so Sunny Elon at mk.com boom let's see if it works hi there okay is it going to have a chat with me let's see hello Sunny how what do you know I don't know what I gave this sales robot but let's see I know a few things being the oh look this being a testing being the best robot in the robot World Gods remember I kind of took the mick with that one so let's go back now and actually test this out but I think it does work guys let's go to our edit chat Bo we should see Zero to full stack Careo support bar okay that's cool let's test this out let's go to the URL let's go ahead and say Sunny s well just do sunny sunny abc.com okay let's see if this works guys this is the cool side right now right let's go and say hi hey imagine a user came on to the website they're going to buy zero to full stack hero why is this the best course right I'm going to let AI tell you for itself right why is zero to full stack hero the best course on the damn planet right oh nice we got 250 hours of coaching course all this cool stuff cool show me the membership options now this is where react markdown comes in uh I want to see it in a table view cool see what it does and right now it's just using all that context the previous messages all that stuff going ahead storing it in the database all that goodness and then it goes ahead and replies me a perfect URL and he even gave a coupon code for that and it didn't I didn't have to train it much guys right that the cool part I even said to it at one point tell me a joke watch this this one's kind of cool look tell me a joke and then I've made it so that basically you unlock a secret coupon code if you want if you go ahead and get a joke so it's pretty cool right so in that case absolutely awesome stuff and then you can say thanks byy I'm buying right so this guy's got the right idea he wants to buy diamond there you go boom it's going to come back and say wait for it and it even gave me the links to send me off look use coupon code joke 15 platinum and Diamond membership have an amazing day sunny that's absolutely mind-bogglingly good right now if we go back to the view messages and we can go ahead and check now let's say I'm inspecting the website and I want to go ahead and see all right someone just came to the website cool they had a chat with the chat bar oh cool cool cool nice oh they went ahead and bought after they got the joke 15 oh nice I'm going to use that more right that's absolutely awesome right so someone goes why don't you monetize your project so I'm going to make this a SAS I'm telling you right now I'm going to make this a damn good SAS and get bought out by intercom like I'm telling you right now that's what's going to happen with this one but guys look how incredible that is look and it even shows the time stamps only on this view which is exactly what we wanted everything working flawlessly really really beautiful stuff all of the interactions work great Z to for St C support B if we wanted to go ahead and add something just look test just just go ahead and say high remove High perfect works great we've got the ability to go ahead and copy to clipboard I can go ahead and paste into clipboard boom I get this works effortlessly well right just like that we've gone ahead and finished it off so now what we're going to do guys is we are going to go ahead and deploy it's time we deploy this project I'm going to go ahead and get the beat up a bit more cuz now we don't need to really focus on the coding side now we have a bit of fun with the deployment right and the deployment has a little bit of caveat to you OB be a bit careful on this step to make sure you don't make a couple of those sillier mistakes right so first up let's dive into it so what we're going to do now is I've built this out to should be dynamic in the sense of it should be dynamic in in in understanding uh in in sorry the base URLs so in this case Apollo client if we go here the base URL and so forth right now the problem is that can be a problem is that Vel sometimes especially when you deploy to production will give you a URL but then it will alias it to another URL and that can cause issues because sometimes you have a cause issue or something like that so you can apply tons of different cause problems but I'm going to show you a simple way to basically make your production branches very easy to deploy so you can go ahead and install the Vel CLI very simply by going over to the Vel CLI on Google and then basically you'll get the CLI you want to go ahead and install it globally I've already done this I'm using mpm boom do that all right so once you've done that you're going to log into your Vel uh uh there you go so in this case I've already done it but you you don't I don't need to do it but you will have to do it set up and deploy yes let's do it sunny s yep let's do it link to existing project nope and I can just hit enter on all of these this is all good the defaults are all good now this will probably this will definitely fail the first time because I haven't set up the environment variables but I'm showing you a quick way of setting up so click yes cool now click on inspect go ahead and open it up what I want you to do now is go into click click this part go into settings go into environment variables go down here now what I want you to do is go ahead into your files go into your EMV file and copy everything so do a control a command C so I'm command cing the hell out of it so every all of my environment variables are selected and copied into my clipboard head back over to your code and here and literally I'm going to do command V so I'm pasting now okay so paste right and all I'm going to show you now is that when I pasted it look at this one second so look at this I pasted it now so you guys can see it goes ahead and puts it in then I want you to click on the save button down here right so I'm going to go ahead and just hide my screen a little bit so I'm going to go ahead and click on Save and now boom what you'll see is they get added in okay so next up what we can do is we can go and actually we can cut that one we can say Vell Das dasr so I'm going to push to production boom and while that's also happening guys I'm also going to go over to deployment protection and I don't want to protect everything I'm just going to protect my preview deployments right the standard protection is a bit aggressive right now we're going to make it a bit easier only preview deployments this is going to be on a portfolio right it doesn't really matter that much so in this case boom and then we can see we've got this let's go ahead and inspect the build check it out we've got our build dependencies everything's working the way it needs to work and we are doing absolutely amazing on timing guys let me know in the comments right now what you guys think of this build I think it's been one of the craziest builds full stack to another level we're 4 and a half hours in crazy stuff okay let's see 40 seconds I'm not sure if I'm lugging something out that's why I'm to be a bit careful here okay no I'm not looking out cool let's give it a bit a second bit more more time bit more time to go ahead and see what he's [Music] doing I'm going to go ahead and bring the music up a little bit this is a bit more I think it's too much so gu be like cool s go very cool nice thank you very cool build I love that generating static Pages collecting build traces awesome stuff there you go you can see everything's loading up the way it needs to load something that helped me a lot is the logs here when you're actually debugging this part so make sure you go ahead and check that one out and then you guys can see here look at this YouTube assistly AI verell app now there's a chance this may have a cause issue okay so I haven't done a few steps that I did previously so let's have a look this is all part of the debugging process right we come to our assistly page boom this is live awesome stuff continue with Google let's go ahead and log in all right so so far so good let's see deployment typically is not always smooth we're going to see how we can get on so let's get started right now let's type in test bot test bot and did it do it oh okay so we hit a little hiccup now I believe we hit a cause issue so Apollo error Okay cool so yeah blocked by a cause issue so this is the issue that I was talking about with Vel so typically if we go back here this one will not have an issue watch this because basically it's hopping between the two different um URLs but I'll show you what we can do to fix that afterwards so let's see if this one works now test bot and now you can see it works right so the reason why this happening remember I said it was aliasing so essentially what was happening on this side is you see how it's it's using the original URL here let me try and make that bigger it's using the original URL here but it's Alias to this one so it's got a cause issue okay so you can either Implement a cause there's a lot of ways you can actually Implement cause fixes but just to show you right now if you want to go Ahad and check the actual link you can see that right now we just go ahe and do a edit chat B let's see right now do I have my yes so I already have my0 support bot let's go ahead and see like this is live right now so if I go over here look at this look Sunny ABC atd.com let's see if it works yo look at this wait for it wait for [Applause] it hey there oh what's the membership this is sick what do use for pop up notification Su notification oh my goodness and you guys are listening to the AI B right now look at it show me a table and the AI is fully trained to do it all the way look at that buy Platinum any discounts you know I'm helping you guys out here if you're going to join podcast 10 oh that one it failed on okay interesting I think there is where I caught you up so we can say uh any cheeky discount let's try another one maybe I maybe it's my input from previous okay yeah it was just while I there in case you're making a special offer his discount podcast 10 any B discount this is this is how the chat goes typically when people asking oh I see your Savvy shop how about fun it's exclusive though for unlocking my humor there you go and then you can say boom I want to buy wait for it and there you go guys boom buy diamond and next thing you know you're inside the papa Farm getting coaching course by Sunny inside of the coaching program this is how you do it and then you get mentorship looks like some of our awesome shs out there that was smooth as hell right but there you go guys how crazy is that like we went ahead and built out a full full application like this is not even a minor app guys assistly is a customizable AI chat agent honestly we use intercom on our own website which is essentially a little chat bot in the corner pops up and can talk to you this is doing it all guys it's incredibly powerful I'm going to show you a little trick as well if you run into that cause issue that we spoke about earlier there's a couple of ways that you can go ahead and fix it from happening in uh like from from happening to you right you can add a vessel. Json file this is a very generic cause right this is like a catch all if anything you should make it a bit more bespoke and really change this to be only your domain here so in this case you wouldn't change it to your own domain but I'm just trying to show you guys for Simplicity sake you can go ahead and deploy that you can also go ahead and do it at the route Handler levels for example at the uh um at this level we've done some C headers and so forth but theel here Json this one is the one that typically saved it for me when you're going ahead and deploying so the Alias thing was actually working after this so there you have it guys a live deployment of the application inside the chat right now you guys can go ahead and play with it yourself see it for yourself there you go no no fake stuff here this is our full build guys we got edit chat board functionality all this good stuff you can go ahead and add in your own chat functionality let's go ahead and do a little test right now right so I'm going to go ahead and say create chat bot I'm going to go ahead and say this is a let's just say this is a LG sales assistant okay so imagine you're working at a shop and it's an LG sales assistant okay cool um you sell TVs and high-end products high-end consumer products um you have a deal on the latest LG C3 85 in 8 3in T TV all right uh your shop is in Dubai Mall uh you open at 5 a.m. and close at 900 p.m. Sundays you are open at uh let's just say 11:00 p.m. open until 11:00 p.m. now the point is guys this takes like minimal amount of time right if someone if someone wants to buy um you could go ahead and say someone wants to buy send them to www.lg.com all right cool all right so that's it so say in about you know to took not even 10 seconds right go over to the chat now let's say I want to buy I'm at the website chatbot popped up I'm like oh okay let me see let's go ahead and do a little chat with you hi any deals on TVs at the moment let's see what happens right yes we currently have a fantastic deal on LG c383 and if you're interested in purchasing feel free to visit we're open from 5:00 a.m. to 9:00 p.m. on Sundays until 11:00 p.m. like like what and now it's serving everyone like that took me like like what 15 seconds to train that thing and now and the thing is if it come on a website it goes typically rep replies instantly that's so good like think about the value that's giving company so SAS coming inbound very shortly I'm going to literally launch that as a full on SAS and add a ton of features to it but how do you price T like this honestly monthly subscription you do a recurring subscription on it remember in the end of the day you need to go ahead and actually cover your cost of your AI usage and also make sure that you're in the higher tiers so you want to actually be funding your open AI account to make sure that works and you don't get rate limited so you going have to contact them if you're really scaled really high so you've got a Enterprise plan but otherwise yeah it's crazy that's it I'll just charge monthly for that bu a pay wall you can even have it so you can create one chat B for free maybe or you can have it so you can only add like five characteristics for free and then you can add unlimited perhaps you know on the or add up to 100 or if you need more you can pay an extra add-on so forth crazy like crazy stuff you can do with this and that's a sass right there so next time someone tells you this channel a enough like I'm telling you right now that that was crazy guys and we went ahead and used so much Cool Tech right well firstly we went ahead and created a entire postgress SQL database where we had I'm going to turn the music up a bit more as well that's it let's go let's get energy up as we finish on out yeah we got a postest database all this good stuff I even gave you the seed file the link is in the description you can get the seed file for free go over there put in your email we'll send it to you right then all you have to do pop that in the seq edit up boom you get an entire starting table where all the tables are fully populated with everything you need now the question after that was ah it was kind of hard to go ahead and get you know the the database all set up and how do I get a graphql schema is all written and that's pretty tricky you know so then we introduce you to API de let me introduce to IBM API connect and that's where we really took it to our next level we went ahead and automatically built out an entire API in seconds with the CLI commands right absolutely crazy stuff in seconds and then this went ahead and was deployed so we actually were able to go ahead and query our database get all the information we needed and then we went ahead and used Apollo client to go ahead and set everything up you learned about client components server components you learned about proxying your API routes to don't proxying your Apollo client so that way you don't leak your credentials which a lot of people do bad habit right so in that case very bad habit right we went ahead and did that and you had clerk for all the beautiful authentication purposes so all the goodness of like authentication secure back end crazy crazy absolutely crazy build all of this is included in the papa GitHub repo so you can either pay for it or you can work for it for free in the video so I've made it fair either way pay to win or you can go ahead and win even more by doing this build yourself and remember guys all the links are in the description I would appreciate if you use them because it lets these companies know that we the papa f are absolutely loving and enjoying their use of their products and we actually want to go ahead and support them so make sure you do because that allows us to go ahead and keep on making these videos for absolutely free so you guys get to learn more and more and more and with that said guys it's been your boy papaa I just want to mention as well if you are at all at any point stuck in your journey and you want to level up your skill set you don't know where you fit in in this developer role or this developer world you're scared of AI you're scared of being left behind this is the place to go zero full stack hero not just another course world's best developer Community period right I would highly recommend you just jump straight to Diamond I'm telling you straight every week calls with me our Diamond members are absolutely crushing it right now four times a month you're getting calls with me like straight up you can ask me as many questions as you want it's all good go ahead and check it out yourself our students are absolutely loving it all the content is constantly getting updated and coaching calls every week ensure that you are up to date one thing I'll say right now is a lot of courses out there will be amazing for a short period then they're outdated so all we try and do is try and go ahead and absolutely escalate you guys to that next Next Level so go to papa.com check it out for yourself right and if you really want to see for yourself what we're about head over to the original website poet.com go to the top and click on reviews that will take you to pap.com testimonials guys that's the page where honestly it's like my whole heart is is open on this page because this is absolutely incredible it's where all of our students have had immense success in fact if you follow me on Instagram Brian a Papa Diamond member just bought a Tesla yesterday messag me on Instagram just bought a brand new Tesla he's now talking at AWS events and everything we're going to update this page to show that but honestly he says I owe my coding career to Euro talk you showed us methodologies on how to build fullstack app and taught us six skills personally benefited me and I have a track now because of you that's it honestly guys we have nothing but results over here like see for yourself like honestly all I want to do is just bring unlimited value to you guys so I'm always just going and showing you guys the entire I I spent 4 and 1 half hours for free on a live stream showing you this guys inside out for free absolutely for free so if you want to go ahead and escalate yourself that little bit not even a little bit if you want to go ahead and take your developer Journey that much more and look at this this goes on forever guys if you want to escalate your developer Journey that much more and absolutely crush it to the levels that the papa fam is doing right now I can keep scrolling for days guys AB abolutely crazy stuff I'm telling you I can't make this up yeah we've even got more that we need to go ahead and do look guys they're absolutely loving it people are joining left right and Center I've got over a thousand students right now zero to full stacko place to be period in this build I'm going to wrap it up with our ultimate theme song the only way we know how to do it where is it right there you go boom I want to say a massive shout out firstly to the companies that made this possible IBM clerk neon you guys are awesome like honestly amazing company the teams every single one absolutely phenomenal really help me out with a lot of the stuff that I was stuck on and guys make sure you please just benefit from this like this is the this is like the gold standard free content on the internet latest upto-date stuff tech there for you to learn take absorb make a living for yourself so absolutely check it out somebody says is there installment plan for the course yes 100% we want our course to be accessible to everyone so you simply go into the bottom and you have an installment plan when you click on the Buy button if you go to the actual checkout page over at the bottom you'll see a 3mon payment plan so there's lots of installment plans on the course feel free to check it out we we offering 3 Monon Emi on Platinum and diamond gold is already fairly priced right you guys can feel free to join us right now guys it's been your boy Papa rat you've learned a ton in this build enjoy the replay the time STS are going to be down below I'll see you in the next video peace that ended in some Papa F fashion [Music] [Music] [Music] guys all the time away from you [Music] so good so crazy peace out guys see you in the next one in a bit doing what we need to