The "Start Over" Button

[00:00] Okay, so at the moment when the page loads, the conversation as it exists in the database renders automatically. What we want to do now is wire up this start over button so we can clear the conversation. So I'm going to come in here just above the last function we wrote, although it doesn't really matter where we write this code.

[00:19] And I'm going to say document.getElementById. And I want to take control of this button. So if we just check in the HTML quickly, we've got that button right here, and it's got clear-btn. Now I'll add an event listener to listen out for clicks.

[00:37] Now when a click is detected, we've got a very easy way of clearing the database. And to do that, we use the remove method. Now of course, before we can use the remove method, we need to import it. So let's add it to the list right here. And all we need to do with remove, and you can probably guess this by now, is pass it

[00:56] the database reference. Now that is going to clear the database, but obviously it's not going to update the HTML. So let's add one more line. And I'll say chatbotConversation.innerHTML is equals to, and then we just need our hardcoded

[01:13] message that goes right at the beginning of any conversation. And we can get that from the HTML. Here it is right here. So let's copy it, and then we'll paste it here in inverted commas. And I'm just going to bring it all onto one line. And this is a safe use of innerHTML because this is hardcoded HTML.

[01:32] The user has no way to access that or update it in any way. Okay, let's give it a try. So I'm going to come over here, and I'll just click the start over button. And look, everything disappears. We're back to our single hardcoded message. Now let's check the database. I've just taken a screenshot of it.

[01:51] So that is how it looked before, and now it's empty. So this is working. And if I come in here and I'll actually ask the chatbot, is this a new conversation? And it says yes. I'm going to ask it a couple of questions. Now let's refresh.

[02:09] The conversation is there. It seems to be working. Let's ask it if I've already asked it some questions. And it replies yes. What did I ask you? New Convo, how are you questions? Well, yeah, that's a fair summary. I did ask it, is this a new conversation and how are you?

[02:28] And remember, it's giving us very short answers because we did leave the instruction right up here as you're an assistant that gives very short answers. Maybe let's just change that back to you are a helpful assistant. What have I asked you today? And there we are. It knows everything.

[02:47] I'm going to click start over to clear the conversation. I'll try again. What have I asked you today? And look, it's telling us that it cannot recall any past interactions with us from separate sessions and that proves that this is working. The start over button is doing exactly what we want it to.

[03:05] OK, so that is a really good job. Congratulations on getting to the end of this project. Let's just take one last scrim to recap what we've done and talk about where we go from here.