Build ChatGPT In React JS Using OpenAI API | Create ChatGPT Clone Using React JS

hello developers welcome to Great stack and today I am back with my all new video on react.js this time we'll be creating a fully functional charge dipty clone where you won't be requiring sign in all the time like the real chart GPT however this is just because we are using the API though but still I hope you will be learning a lot of new things and have fun learning before starting make sure you hit the Subscribe button and click the Bell icon for more such amazing videos if you haven't done yet so now with all new energy let's get started but before that just let me demonstrate this website like write hello how are you and see it has responded I am doing well thank you how about you also with some basic questions like what is the square of 21 the square of 21 is 4 4 1. or something like right an article on democracy here it comes everything that a real charge GPD does so the Clone is working just fine and it's time to rest into the coding part so let's get started so since you are here and following us for this chat GPT I expect you to have a very basic knowledge of functional react that is the latest react and very basic knowledge about that react hooks you don't need to be an expert on that but if you don't know so you can just go to the reactive and search what are react hooks however will be not using so much of these but I suggest you to go to this website if you don't know and just search for these things like read more about use effect use ref and use date just these three things we are using however I will be explaining you what are these and why are we using these things but just to get a deep insight about these things you can go to the website and search for these so coming back to the coding part just go to your terminal and write npx create react app and what will be the name of our website will be just cloned Flume just wait for the setup to complete now the setup is complete and you can see here are some suggestions like you need to go to the folder which will be created that is the Clone this is the main react app and once oops CD clone once you get into this folder just type npm start again this will take some time with a very little bit of time foreign so just removing just we need to start removing the extra stuffs which are here like then the source folder we can just remove this app dot test.js the index.css and this logo this and these two things so just delete them and go to the public folder and find these things you can just remove this favicon dot Ico these two things Manifesto and robot text so just removing these two things but as you can see just deleting these things will get you errors so we need to make some more changes first we can remove this and in app.js you can clear this whole thing the whole header and this logo dot SVG which clears one of the error and then we need to go to index.js where we can remove this inductor CSS or every do the thing that is not necessary or deleted like these things then we need to go to our index.html in this public folder and we can just remove these things like from here to here or this comment part also changing the react app name to chat GPT so with this our web page is compiled successfully you can check if there is something missing like if you are clearing these things like I did so just make sure that you don't clear anything which is of use so everything is working fine and now we can start so the first thing that we can see is we have this the whole cleared page and the UI for our web page that I showed you was this in which if we observe what we have is this main body which contains the chat thing and this sidebar which contains a upper part and a lower part however this part is not functional in our website as we don't need it but everything else is functional and so the very first thing that we observed is the whole web page is divided into two parts that is the sidebar the side thing this thing here and the main body and this side thing has two parts the upper part the upper side and the Lower Side also the division between these two divs are not equal and just we'll check that what is the division using the flex box properties so let's try this uh the very first thing that we observe is that it has a division that is the sidebar we can call it the sidebar and we have a main division that is the main division also the sidebar which we created has two things that is the upper side we can call it just the upper side top or just the upper side and we have a lower side that is dot lower side so the side division was divided into two parts that is the upper side which is this thing and the Lower Side which was this thing and coming to the upper part we have this upper side top that is the image then we have a button that is used for the new chat and then we have this queries that we can call so the upper side top the mid button and the this we can call upper side bottom which contains two queries so in the upper side we have a upper side top which contains the image so this contains the image which we can name just the low which I we can name it like logo so we have this image that contains the logo and if we see we have this text chat GPT so we can just give it a span oops here I've just after the image we can give it a span s p a n and we can name it something like brand so which contains this text chat GPT and then we simply have a button so what we can name this button is mid button mid BTN yes this will be fine and this just contains the text and a simple plus symbol which says new chat so we'll be having an image and we can name it the add button the add button and after just after this add button we can just write new chat new chat and for the last part we have this upper side we can call it bottom the upper side bottom the upper sides bottom thing this query thing or you can name it queries but like I will prefer this nindu so in this we have those two queries which we can design like this can be a button which says this so we can just add a button and we can call it query which basically contains an image and a text so the exact same thing that we have an image which we can call all right let's right we can decide the name later and just we can write the text like what is programming the first question and let's just copy this text and move to The Styling part because if we save this and see how our page looks like it looks pretty ugly like we don't have anything in this page but before everything we have used these images but have not provide any source to it so for that I'll be providing you a folder which contains all the assets that we need so we can just add it here like you need to add it in your source file which you can paste right in your Source folder here like I did and as I said this will contain all the things that you will be needing so what you need to do is just import these things so what we need to import so let's find the very first thing was this the upper side top image so what was it it was the chat GPT logo so we can call it the GPT logo and we need to import it from assets and then where is the GPT SVG yes this is it I think and once this thing is imported you can just use it here using this curly braces and GPT logo so let's see actually the background for our logo is white so it is not visible but it is here but it will be better if like before starting everything we could make the basic overlay of this whole page but for that the basic styling the very basic styling is important so just for the basic styling what we can do is we can set the margin to zero the padding to zero oops the padding to zero and the Box sizing to border box for every element and for the HTML the whole HTML we can just set the font size to 62.5 percent this is important as I will be using rims in describing the size of anything so if you are using rims and if you know about rims so one REM is equal to 16 pixels so if we open the calculator and check or calculate that one Rim is equal to 16 pixels so I want to do one rep is equal to 10 pixels so for the whole sizing thing I can just divide 10 by 16 and what I will get just I need to multiply with 100 so I will get this 10 pixels is 62.5 percent of 16 pixels so that's why I used it here font size equal to 62.5 and then we can move to more of the steps like the body in which we can change the background to RGB what was this background I can just show you the code which is rgb3 0 31 and as it is a dark background so we need a light font just you can see in this page we have white fonts so for everything the body has this RGB blue and the color for everything will be white also if you have observed that this is not the normal font this is Poppins font so for that you need to go to your browser and find Google fonts and the first link you will get is this fonts.google.com and here you need to search Poppins just search for this swipe down and search for your desired fonts so I'll be using this light 300 and a regular 400 will be fine so once you have selected click here and here are the list of styles that you needed and here is the link so just copy it and go to your web page find this index HTML in your public folder and right here or above it it does not like matters so paste this and now this is your font family so for that save it go to your app.css and write font family and paste these pop-ins so if this Poppins does not load so just I will use the sand sellif and for now you can see that yes there is the logo which was white and we have the font which is not regular font and for this whole thing we need to design everything first so more of the basic things will be that dot app thing is we have to set the Min height to 100 v h the 100 viewing height also as you can see in this image that the sidebar and the main bar is in horizontal Direction so we need to display Flex here so that are the basic things that we are doing and once this app the whole app has display Flex so we can fix this width so for that what we can do is for the sidebar we can set the flex to 3 and for the main bar dot main we can set the flex to something like 9 so let's check but will not observe the difference because it does both have the same background so for that we can just add a border here the border right here the border right of we can add just a small border like one pixel a solid border which can be of color RGB 100 and 100. so let's see it didn't work why I don't know is the name correct okay the side part so let's save this and see yes we have this beautiful body over here then coming to here we have this logo which don't look great over here and the text is also very small so what was it it was this image which was called a logo I can just give the alternate name to logo and the brand was this band so let's save this and let's grab this logo dot logo and what we need to do is we can just add a margin right of something like one ram that is 10 pixels so if we see yes this has been separated a little and then the brand thing that we had the brand that we had we just need increase the font size to something like two rims so let's save and see yes this looks good in terms of size but not great in terms of position but as you can see in this image the whole upper side top has equal padding all around so what we can do is we can get here and grab the upper side top and add some padding so padding of I guess 2m will be good let's see yes this looks good but not great and these things are also not aligned so okay I can just remove this upper side top so that it can cover the whole upper side and just find this and increase a little bit of padding like 2.5 frame will be good I guess and yes it looks good now then as per our design we need to design this part first the lower side first so as we can observe we have a logo over here we have three list items here and we have a logo followed by a name so home saved and upgrade to Pros so we can go to our app.js and just create the diff call list items which contains an image which we can name like list items IMG list items image followed by a text like home oops here home and we can just copy this whole thing and paste paste so the second one was for saved and the third one was upgrade upgrade to Pro but what about this sources we have not used we are not using the sources for now but we need it so the second one was for the mid button and this contains the add button so we can just import it just like we did input the add BTN from the dot slash assets slash where is the add add 30 dot PNG and we can use it here add button which says new chat and then we have here the query so for the queries we have import we can name it message icon from the same destination where is the message icon message dot SVG and we can use it here like this a message icon similarly here message icon and we can name it query oops you can name it query also changing the text how to use an API then we have this list buttons or the list icons where we have for the first one we have home so we can just import the home that is home from the same destination and home.svg and for the saved we have this bookmark icon and then we have for the third one that is upgrade to probe we have something similar to Rocket so we can just name it rocket from the same destination rocket.svg which we can type here the first one was for whom the second one was force the saved thing and the third one was the rocket yes oops something went wrong the rocket thing also we can add this alternate names and see if everything is here or not yes everything is here but just they need a little bit of basic styling so for that get back to our app.css and for the upper side we can add a border bottom of one pixel the exact same thing that we used here just this part so now this looks good but the height of this is not like great as this so we can just set it like this height to 70 percent will be good I guess and save it yes this looks good now so first of all I want to just align this thing which was the upper side top so dot upper side top what we need to do is just display flex and align items Center uh AIC which will look like this as you can see this is well aligned now but I guess a little bit of margin is required so we can just write margin of 2.5 grams will be good and if we see oops it was needed just for the bottom part so margin bottom of 2.5 grams will be great and then for the sidebar we have to design these buttons so what are the changes that we are going to make is design this mid button and resize this image that is the add button image and for these queries we need to design these queries and also resizing these query images so we need to get back to our app.css and here first thing we are going to do is design the mid button let me check if it has the same name uh is it yes it's the mid button so first we'll grab the mid button and set its background to a color that is this one you can copy this 5 a 4 b f f also set the border to none and the color to white so if we see this looks like this so now what we need to do is just add some padding around 1.5 Rim will be great I guess and also we can increase the font size so the font size should be 1.5 Ram so let's see but the things that are needed is this the add button the add button we need to resize it first so what we can resize it to it is we can set the height to around 2 RAM will be good I guess and also if you see I can add some padding here so padding right padding right to one rim so if you save it and see yes this looks good but now we need some width of this whole button margin at the bottom side and a little bit of alignment so let's do this where is it here adding width of somewhere near 25 Ram then for the alignment we can display Flex and align items to Center also justify content to Center and let's see yes it's well aligned then we can just add some margin bottom of three Rams and just before this we can set the margin to zero and Auto for left and right and what move we can do is we can set the Border radius so border radius of 0.5 gram will look fine I guess so let's see yes this looks great what margin 0 Auto did was Zero for top and bottom and Auto for this side and this side so it got aligned by itself then coming here to the queries for that what we need to do is just grab the queries so what was the name it was just query and align them with the same technique or we don't need this justify content Center actually and just set the background to transparent and add some padding of 1.5 Ram again that will be good then the same width like the button will be fine 25 Ram and for the whole thing I can add margin of one REM have it Auto for left and right and some border radius of 0.5 rim and a little bit of border of one pixel solid of color RGB I guess 100 100 will be a little more so we can just add RGB a of 98 98 98 and one so let's see how it looks we need to set the color first and also some of the spacing is needed here so first we need to set the color so after the background we need to set the color so the color can be rgba you can copy this I have already tried these things comma 1. and now if we say we can see we have this color a little bit of Gray's color not simple white then we need a little bit of padding here so we need to grab the queries image so for that we need to write dot query and access the image inside and just add some margin right of 1 gram or 2 RAM will be good and what more we can do for this as it is an image so we can just add the object fit to cover and I think it is a little bit small in size so I can just add some height of one point I guess this will look good yes it looks good so with this the upper part is completed and let's move to the lower part so what this Lower Side actually needs is a little bit of padding first and for these list items we need to increase its font size add some spacing and grab these images and just give them some margin right like we did in this early part so the first thing the Lower Side the lower side window grab and add some padding that is of two rims then we need to grab the list items so list items we need to grab all the list items and add some margin to it so that you can see that all of them are sticked together so we can add some margin so margin of I guess one REM will be fine but before that we need to align them so we will be doing the same thing display Flex justify content Center or actually we need align items to Center also set some font size so font size to something near one point five Ram so let's save the font are a little bit big so we can fix it like changing the font size to 1.5 from 1.3 also we can decrease a little bit of margin like 0.75 frame so let's save it and see here's the whole list items are aligned but for every list item like for each element what we can do is we can just grab the list a short trick like list items and we can grab the image so list items image and we can add some margin to it like one rim and after that we can add some padding right of two Rams or just one REM let's see oops they didn't work I guess there was something mistake list items image here the items in this has a small eye so let's save this and see if it works yes it worked but as these images has different dimensions so you can see that this thing is not well aligned as this first home thing is not here and this upgrade is a little bit more far from these two so what we can do is we can grab each one so we can just do list items and we can grab the nth child that is the first child and for that we can grab that dot list items image this thing and for this thing what we can do is we can just reduce the margin right from one ram that was written here here to a little bit smaller than before so 0.5 frame will be great and let's see yes now this looks aligned but not this thing the third thing so we can grab the third item too so just copy this and paste it here and we can grab the third child and we can just use 0.8 so let's see if it works yes this looks good but I guess 0.75 will be fine and let's save this and see yes this looks amazing so the whole sidebar thing is completed and now we need to start with this part the main body that is the chat app for that what we can do is we can create the basic UI first with some static like inputs and static texts then when we will be using that API we will do it Dynamic so that whatever you type will be dynamically like arranged here and answered so let's move to the main body so for the main body what we'll be having is only this much of space which will have a chat box right here and attached with a chat footer over here which will contain a basic input and this paragraph so if we talk about the structure what it will be having is a basic chat box that is the charts and after this we'll be having a chat footer like this where the in the chat footer what we will be having is a basic input that we can call Dot inp which can contain a basic input and after this we can get a button so BTN with a class name of send which can contain an image which we can import from here so import s and BTN from the same location here send dot SVG uh oops send dot SVG which will be using right here in the source of this image send button and the alternate will be send also we can remove these things and just add a placeholder right here which can say send a message dot dot or we do no dots also we can talk about this charts so as per our design the chat this thing is basically a division which contains a single image and this text so if we Design This what it is basically is dot chart which contains an image followed by a basic paragraph which we can call it txt okay we can call it txt which we can fill with random things like Lauren 20 so yes this is it but for this image source file we can we need to import it again so import the user icon the user icon from the same location again and again which is this and also we need to import one more file that is the GPT image logo from the same location this thing which will be swapped by simple logic so for now as we are designing a static website for now what we can do is we can just write here the GPT or the user icon and for now we can just copy this paste it and replace it with the GPT icon so GPT image logo and the same thing so let's save this and see yes this is it but as you can see this is not aligned well and this image and its text is not like this in the horizontal direction also the size of these images are too big and this whole input thing looks bad so everything needs to be fixed so for that we need to get back to the app.css and start the main thing so dot main needs a Min height for the first thing so the Min height will be we can just use the calculate function and calculate 100 VH minus uh I gave this whatever size so we can just use a random thing like 14 Ram so this will be the Min height of the main division then for the alignment part we can just display Flex and align every item to Center also the very first thing we need to do is flex direction to column also add a little bit of margin like not little bit actually a huge margin like six Ram or 10 rims for the left and right so let's see how it looks yes this looks that it is taking its shape so now just fixing this chart footer for now we can get the chat footer dot chart footer and we can set the margin top to auto and give it some width of 100 percent and align it too so display Flex Flex direction should be column then align items to Center and justify content to Center if we see yes this is here then we can grab this whole thing dot i and P that we named so if in the chat photo like after the chat footer what we can do is we can grab the dot inp and add some padding like when REM will be good or something less like 0.5 Ram with a background of rgba of 28 30 58 and opacity of 1. so if we see yes this is the whole thing but we need to just remove these backgrounds so for that what we can do is we can grab the DOT inps input and the send button and remove the background so background to transparent also the Border to none so that it may look like this but still we have these things so we need to grab this Dot inps input and set some more of the thing like adding a width of we can again calculate it hundred percent minus uh whatever the send button will take like 3 RAM I can give to the send button then we can remove the outline so outline to none that blue outline that we were seeing this thing we can just remove this add a little bit of padding like one rim or more than one ram life 1.25 Ram oops 1.25 RAM and set the color to white which makes our input look like this but we need a little bit of alignment as you can see the send button is not at its position so what we can do is we can get here input and we can display Flex then align items to Center yes this looks amazing now but just two things are missing one is the Border radius and second is the width so the Border radius of 0.5 Ram again with a width of what we can do is we can give it 70 Ram let's see how it looks it is great but there is the text missing so what we can do is we can get here in the app.js just after this input just after this button or not here we can add that paragraph here like chat GPT May produce incorrect result or something like this so let's see there is a need of removing this margin however which we can do from this app.css where is it here we can just remove the margin of the bottom part to 0 and yes but a little bit of margin for this paragraph is needed which we can grab from here dot chart footer grab the P from it and add some margin like something like 2 RAM and 0 for left and right so let's see yes this looks amazing now then we are just left with this chart which is now the easiest part though so we can get here right above this chat footer and here I can grab the charts and to make it scrollable what I can do is just remove the Overflow like doing this overflow hidden and align the Overflow in y direction to scroll also setting the scroll Behavior to smooth and setting the width 200 percent so that we can set a limit the max width of 70 REM will be fine also the height should be calculated like 100 viewing height minus 14 Ram or a little bit of padding is also needed so I will write 70 REM you can just check by yourself whatever suits you and this is the output so we need to grab each chat now so grab each chat and add a little bit of margin first margin of one REM then a little bit of padding too like padding of two rims and three runs for left and right also we can search the font size to one point two M okay then display Flex and align item Center or no align items to the flex start so let's see yes this looks good but we need to resize the image first and we have to increase this lorem ipsum text first so just remove this and just try to lower M 100 and yes now this is a little big but we need to do one more thing is just write the text alignment to justify so that this looks like this or if you notice the spacing in this left part and right part are equal but now we need to resize these images so what are these images called actually I have not named it yet so yes I can name this I can just add a class name of chat image so for here and here I can just add chat IMG and grab it from here dot chat IMG grab it as it is an image object fit to cover then width should be a little less like 3 rim or 3.5 Ram I will set it then a little bit of margin right is needed like two rims like we usually do also to make it a little bit curve from the edges we can write the Border radius to 0.5 Ram so now this looks like this but how will we differentiate that which message is the user's message and which message is the generated AI generated message so what we can do is if the chat is created by the UI like the AI so like this one is generated by the AI so what I can do is it will contain this thing will contain another class of Bot so this means that it will contain chat and it will also contain bots so both thing will be affected on this division so right here we can grab the bot and said the background to rgba something near this 28 3058 one this will be good I guess and the width what can be the width will be fit content so let's see yes this looks good but a little bit of Border radius is also needed so border radius of 0.5 rim let's see this looks great but I guess this input is a little bit big according to me so I can find the dot inp thing where it is yes and just make it 68 or something like yes this is perfectly fine now so with all these our UI part is 100 completed and now it's time to jump into the API part so let's begin so now for the API thing what we'll be doing is we can create a function that will take us to the open AI API and get the response so for that what we can do is we have to create an account so go to your browser and search platform.openai.com and in this app what you need to do is you need to create an account then once you have created the account you can click here and search for this view API keys you need to generate an API key so for that you will find this here create new secret key you can name it anything like GPT clone so GPT clone and create the secret key so you will get this key and you need to copy this but in order to use this API key what you need to do is create a paid account however you don't need to pay you can get the free trial so for that you can go to this billing then you have to click here start the payment plan for individual or company whatever you want and then fill these details however you won't be deducted with any amount as the free trial cost only zero dollars but in order to use this feature the open AI you just need to set up a free trial account first so you just need to copy this as I have already copied and get back to here the coding part then you need to just create another folder right here or we can create just an file we can name it open AI dot Js and here we'll be creating that function that will help us to send the API requests so for more documentation link what you can do here that you can go to this website and find here the API reference and you just need to install this open API or open AI sorry so go to your vs code just find a terminal and install the open AI so for that we'll be using npmi open AI and once this open API is installed we can just check here yes the open AI is installed so once you are done with this installing part either you can follow me or you can go here for the documentation and find this guide part where we can click on this GPT and find that how is the current structure of the chat completion thing works and also we can get that what is the structure of the response that we are getting from the API also you can research about the models that what are the models that this open API offers and more about these things what we will be using is this text davinci03 so for that get back to our openai.js and then we need to import few of the things like configuration and open AI API these two things from to require open AI so what we installed was open Ai and we need to extract these two things from this open AI then we can also we have to do this is creating this configuration again with a small C that is the different thing not disk configuration so this configuration variable will be an instance of this configuration so configuration which will be taking the API key as a parameter to initialize so we can initialize it with the key that we copied then we can just create a new constant open AI which will be containing the instant of the other thing that we imported that was the open AI API and this will be taking the configuration as the parameter then we can just create the function so we can create like we can export it however so export directly the async function that we'll be creating the async function we can name it send message or send okay send message to open AI which will be taking the parameter message and what this function will do is create a response so const response or rest equals it will be using this open AI so await open AI dot create completion and this function takes the parameter as an object of all the data so we can Define the model here which will be using like text DaVinci the winchi zero zero three with a prompt of the message that we received and also a temperature of 0.7 we can use basically what this temperature is that how creative your answer should be so also the max tokens we can Define is this Max tokens should be 256 that we can define basically these are the max number of tokens and the top p to 1 then the frequency penalty I wish I can get it frequency penalty of 0 then the presence penalty of 0 and after this part what we'll be getting is the response which will be stored here in the rest variable so we can just return this stress but as you have seen here the structure of the response is different so we want just a text so for that we can extract the data that we are getting and we need to extract the choices and choices of 0 as choices in RN we just want the first thing in the array then we can just extract the text so this is what we need to extract so basically what this function will do is get this your message send the request to this open AI server and receiver response and that responds the main text that you want to get is here and it will be extracted and sent back to you using this function so let's save this and now go to your app.js and import that function import send message to open AI from this location now to trigger this function what we can do is create here a new function that is const handle send and this is an arrow function which can just get the response from this send message to open AI so this will take a message for which what we need to do is we need to create a variable that can be a used dead hook which is this input and set input and this is a use State hook which can contain a basic empty string for now and this input comes from here so the value of this is the input and whenever the input will be changed so on change what we can do is get the event and just set the input to e dot Target dot value and then we can set an event listener to this button which is on click on click it will trigger the handle send thing so handle send and where is the handle sent here handle send will just send the input to the API but as you know this is a asynchronous function so we can use the away tiers because we need to wait for the response to come and for that await we have to make this function an async function so for now we'll just console log out the response so let's see what we are getting so we can get here and type hi chat GPT how are you and first of all we need to get the console log where we can get the r message and now we can use the send button to send the message and wait for the response yes we are getting the response I am doing great thanks for asking how can I help you if you are getting any trouble you can ask in comment box or just you need to check for the latest practice in those documentation or you can just install these versions if you don't have any issues so for that like I want to install this open AI version 3.3.0 so I can just click here to the power cell and write npmi that is npm install open Ai and then we can use this add rate symbol and write the version 3.3.0 then by clicking enter it will install this version so these things you can keep in mind and let's see we are getting the response so now what we need to do is just set the response messages like creating the whole chat for that we'll be using the use date hook again if you don't know what use date is it basically creates a variable which can act as an instance so the value of input is initially this and if we are changing so with this function the set input function we can change the value of this variable like we did here here on change set input to this value so the value of input is updated similarly we have to create the messages one so constant messages and set messages set messages equals U state and this message how can we determine that which message belongs to the user and which message belongs to the bot as you can see we have designed this bot thing that whatever message can be yours like this message is yours and this message is bought but how can we determine that for that what we can do is a simple thing that we can create an object like every message can be an object in which for every object like every message is an object and for every object it will carry a text which is your message and then we can just make a variable like is bot which says that is it a bot or not like the message comes from a bot or not so is bot we can set true or false which is a Boolean value so with the help of this variable or this Boolean we can determine that is this message is of that came from a bot or not and the message the very initial message that we can get is a simple thing like hi I am charged GPT a state of art or whatever you want to write just write it and then whenever you will get a response what you can do is just set messages so setting these messages as okay I did a mistake actually these messages where a list of messages like this an array of messages like this and in this array of messages I have these messages so these messages that I have so I have a list of objects which contains two things the text and the identity and whenever you will be getting this what you need to do is set those messages again with the old messages this is a spread operator which says that spread all the elements that contains in this array or whatever variable you have so what I am gonna do foreign messages and then I need to append the new response so I can create a new object which says the text which is equal to the input and then the identity that is the S bot so is bot equals yes this is the response no actually the very first thing that we need to append in this messages after those messages is the input that we got like whatever I typed so is bot equals false that I am not a bot then the next thing that I want to do is again add text which which has the response that whatever my input was it is answer for that and the identity is is bought true yes because it comes from a bot it comes from the chat GPT server and hence the messages will be upgraded or set to a new value so this is how it will work but now this messages this charts that I had can no more be simply chats but what I can do is create I can access this messages like here and map for them which takes an arrow function and says for every messages and also we will be counting the index for every message what I need to do is just copy this div and paste it here and this div that I copied contains this text this text so this text needs to be replaced so this whole thing is replaced by this message dot text and also the class name for this chat bot can have a logic too so for this I have a message and for every message message dot is bought we'll be using a ternary operators so if it is a bot then you can add this and if this is not a bot you can just add this chat because this is necessary though also for the source file I can just add a logic here like message dot is bought so is if this message comes from a bot you can use this source file or else you can just use the user icon so now we can remove these and let's check what we are getting a warning okay for every map element we need to add a key so the key is this I the index that we took here because the key needs to be unique for every element of the map still there is a warning let me see this says that array.putative.map accepts a return value okay okay this accepts a return value and this is not a return thing so two things that you can do is one is just type return here that you can return this div but we are using an arrow function so we can just remove these so as you know that if we are using an arrow function so this can return in three ways like whatever you type it will return this or if you use these braces it will also return whatever is inside this and also if you can just do the old school stuff that you can write return keyword and write whatever you want to return so these are the three ways so that's why I just return this whole div by removing these and now if we run yes it is compiled successfully and now let's check yes we have this thing and if we type something and send this then here it comes but one thing that is the issue is whenever I am typing something like this how ah you until the response is generated I can see no activity here so for a sort hand thing what we can do is where we will creating this the first thing we can do is we can just create a copy of text like this text we can name it text equals input and then the problem that before sending this this don't gets cleared so now we can clear so set input to an empty thing then as the input is cleared we can just replace it with text like this or this writing text colon text or directly text is the same thing and before this before sending the response or before getting stuck here in this await function what we can do is we can just set the messages to an array of the same object like array of those messages along with this input so text and is bought to true actually is bought to false so now let's test this and I am writing Hi how are you so yes the response is getting generated and yes this looks good if I'm writing something and sending it just the problem is that we need to add a auto scroll for which what we can do is where we have these messages I can add one more thing is creating a div of nothing like it can be an empty div which can just have a reference to something like MSG and which just signifies that is is the end of those messages like after every message this is the last thing that we have and for that now we can use the use ref so const the reference was message end so MSG and equals use ref this is use the reference of this so use ref which is null for now and now if we want to check that when these messages will be changed like if we are appending something so the value of these messages will change so for that what we can do is here we can use a use effect so use effect basically this notices what you are focusing on changes so this basically takes a function and after this it takes an array that is the area of dependencies so the first thing in this use ref is this which is a function that targets the message end accesses at current point and Scrolls to it so scroll into view this function but this target or this reference will be only triggered when these messages will be changed so if these messages are changed so for every effect where these messages will be changed these dependency will be changed this whole function will work so let's try this again hi how are you chat GPT send and let's see I am great yes this seems it has scrolled what makes you feels great absolute Lee nothing with the E here and let's send this yes this the auto scroll is working great but this is not a great experience that you have to type everything and navigate here to enter send so I can set handle Enter key like if we press enter the message will be sent so it's on you that you want to do is or not so you can just make a handle and which will handle the enter key which is basically an arrow function that returns nothing actually just as checks that if the Target that we are getting I will be sending a Target that event and if that Target key that is e dot key equals equals the enter key so the enter key so just you what we can do is handle send and in the handle send function we can just call it so as this is an asynchronous function as it returns a promise so we need to write a weight here and as we have used a weight you have to make this function an async function so this is done but we have to use this handle enter so for that we can get to this input and after this on change what we can do we can add a key down listener on key down just call this handle enter so whenever you will press a key on key down when you will press the key this function will be called the handle enter and this handle enter function will just call this handle send but after checking that if the Pressed key is enter like not for every key only for this Enter key it will just call this function so let's see if it works well enter yes it worked great and now we are left with nothing but just these three things so what about the new chat uh what I can do is when you click this button where the queries yes this mid button when you click this button on click I can just call a function which can just refresh the page so window dot location Dot reload so saving this and let's see if I click this everything is reloaded so let me type hi and wait for the response so after I am getting whatever response it I'm getting then just click here and it replaces the page and now I'm left with only these things the queries so if you can recall what we did was what is programming for this button what we can do is we can create a value which is the same thing as the question so what is programming and we can just paste it here and the same thing for this the value equals how to use an API and for everything like if we click on this button so here and here on click or we can just create a handle um query thing or okay this thing I have missed so a handle query and we can just create this right here constant handle query which is an asynchronous function receiving an event and can do the same thing like this handle send I will just copy this and paste it here and it will not take the input it will take the E dot Target dot value and we don't need to set the input and the text is yes this this and since everything is fine so let's save this but again we have a warning which says expected triple equals where here in line number 46 so now let's save this and yes it has compiled successfully so let's check how to use an API yes how to use an API and the response is getting generated here in the app.css like txt and just set a line height of 2 Ram or 2.5 Ram it will look good I guess and set the color and the white looks so Punchy in this background and whatever theme I have made so we can just make it to the rgb221 which we use instead of white so let's save this yes and now this looks great really great but I think it is it has a little bit more of the line spacing so just slightly less than 2.5 Ram uh yes this looks great actually you can just change this according to you and with this we are done with the whole website the whole chart GPT clone I wish you have learned something new and I hope you liked it so give this video a like And subscribe to the channel if you have not done yet so with this I am an rag signing off and you guys have a great future ahead and stay with us for more contents like this thank you

Channel: GreatStack

Views: 43,204

Keywords: chatgpt clone, chatgpt clone react, chatgpt clone project, chatgpt clone website, chatgpt clone using react js, create chatgpt clone, clone chatgpt, build your own chatgpt, build chatgpt, how to build chatgpt, chatgpt react project, greatstack, react js project, react project, web development project, project web development, coding projects, programming

Id: EzkWAviyYgg

Length: 86min 52sec (5212 seconds)

Published: Tue Aug 29 2023