Starter Code

[00:00] Let's take a look at the code we've already got. We've got a form component right here and a button, which inside a form component will act as a submit button. Now, this div up here, this is where the conversation unfolds and in it, we've got this one hard-coded message, how can I help you,

[00:18] and that is the message that we can see right here. Now, over in index.js, we've got exactly the same setup as before. These lines of code right here are the OpenAI setup, just like they were in the previous project. And remember, in terms of the API key

[00:37] that we're bringing in from this .env file, we will be looking at deploying projects with API keys hidden towards the end of the course, and always be sure not to expose your API key when you're deploying projects, sharing them, or publishing them to public repositories. Now here, we've taken control

[00:55] of the chatbot conversation div, and we can see that right here in the HTML. This is the ID right here, so it's referring to this div, and that is the div where the conversation takes place. Now, we've got that stored in this const, and I've declared that globally as we'll need to use it in multiple functions.

[01:15] Now, moving on down, we've got this event listener, and it is listening out for any submit event, and that will be triggered by a user clicking on the button or pressing enter to submit the form. When a submit event is detected, we build a new element with create element, we then add the necessary CSS classes

[01:32] and append it to the chatbot conversation div. Then we populate it with whatever the user has inputted, and at that point, we can go ahead and clear the input field. Now, this line of code right here just moves the dialogue down so the latest messages are always in view,

[01:51] else, as the conversation grows, you'd keep having to scroll down manually. Now, this is quite a neat way of doing it, but you could also use scroll into view, but I found when you're running a mini browser in a big browser, that can sometimes fail, so I went for this approach. Finally, we have this render typewriter text function.

[02:11] As the name suggests, it will give a typewriter effect to the AI's text as it is rendered. Now, there are loads of ways to do typewriter text, some you can do just with CSS, but I've gone for a JavaScript approach. And what happens in this function is, again, we create a new element, we add the necessary CSS classes.

[02:30] This one includes a blinking cursor class, which would just give a nice blinking cursor effect to the text as it's rendered, and in fact, you can see the CSS for that right at the end of the CSS file. We've got the animation right there. The speed at which each individual character is rendered is controlled by this set interval,

[02:49] and at the moment, I've got it set to 50 milliseconds. And you can, of course, change that if you would prefer a different speed. Now, we won't be working much with the rest of the CSS in this file, but do pause and check it out if you'd like to. There's nothing particularly special going on, but we have got a bit of CSS grid up here

[03:09] where we deal with the chatbot header. So the CSS grid is just used for this layout up here. Okay, so that is what we have so far. Let's move on and take an overview of how the AI is going to work in this project. It's a little bit different to what we've done so far, so let's look at that next.