Render the Output, Update the Array
We delve into a challenge related to updating the DOM and ConversationArray in a chatbot application. The goal is to pass data from the FetchReply function to the RenderTypeWriterText function to update the DOM. Additionally, we need to push an object to the ConversationArray with the role set as "assistant" and the content as the completion obtained from the API response.
Tom provides hints to guide us through the challenge, highlighting that we don't need to build a new object since the response already contains the desired format. After implementing the required changes, the ConversationArray is logged to verify the updates.
The lesson concludes with testing the chatbot's memory by asking it questions to check if it retains context. The potential issue of repetitive interactions in chatbots and hints at upcoming improvements to tackle this problem.
[00:00] we need to update the DOM and we need to update ConversationArray. So we're going to go straight into a challenge, and I've got the challenge right here. We're working inside the FetchReply function. So I want you to pass the completion to the RenderTypeWriterText function so it updates the DOM,
[00:17] and we've got the RenderTypeWriterText function right here, and it takes in a parameter. Now once you've done that, push an object to ConversationArray. This object should have a similar format to the object we pushed in line 21, but the role should hold the string assistant, and the content should hold the completion we get back from the API.
[00:38] Let's just have a quick look at line 21. Here it is. It's actually line 22. We're pushing this object. It's got the role of user and the content is the userInput.value. So the object that we pushed to ConversationArray is going to have a very similar format. Now once you've done that, you can log out ConversationArray to check it's working,
[00:58] and of course, you should see the DOM updated by the RenderTypeWriterText function. Now I've given you a big hint here. To save yourself some time and work, have a close look at the response before tackling number two, and I've actually left the response that we logged out in the last scrim right here because that will help you.
[01:18] Okay, pause now, get this challenge sorted, and I'll see you back here in just a moment. Okay, hopefully you got that working just fine. So I'm going to come in here and I'll call the RenderTypeWriterText function, and what do we need to pass it? Well, if we come down to this response, we can see that we've got the actual completion right here,
[01:39] and we can access that by saying response.data, and we want what we've got at the zero index of that array, and then we want to access the content So quite a convoluted line of code, but let's just write all of that in here. So it's response.data.choices, then we want the element at position zero,
[02:00] then we want to access the message property, and then the content. Okay, next, let's push an object to conversation array. Now, luckily, and it's what I was getting at with this hint, I don't have to do anything. I can just say, and it's what I was getting at with this hint, I don't actually need to build an object.
[02:23] If we have a look again down at the response, let's see what we've got right here. Well, we've got an object and it's got two key value pairs, role and content. The role is assistant and the content is the completion. So that is exactly what we want already formatted. So I hope you noticed that and you didn't extract the text
[02:44] and then write the code to build a new object. Okay, so back up here, we're taking almost everything that we've got here, but because we want the whole object, we'll take away the dot content. And now let's just log out conversation array. I'll hit save and let's ask a question. What is the currency of Peru? And we've got an answer.
[03:09] The currency of Peru is the Peruvian Sol. That's great, fantastic answer. If we open up the console and have a look, we can see conversation array and it's got three objects in it, the instruction, the user inputted text, and now the object with the completion we've just got back from the API.
[03:28] Okay, so our chatbot is essentially working. Now, I just want to ask it a couple of questions. What I'm keen to see is, is it keeping the context of the conversation? Does it have a memory that it's getting from our conversation array? So I'm going to ask it for Pi.
[03:44] Okay, and it's given me a very long answer. All I really wanted was the number 3.14159, but that's good because now I can check its memory. I'm going to say, give it to me to three decimal places. And what's interesting to see here is,
[04:05] does it understand it to be Pi, which we were just talking about? If it does, it's got a memory and it's keeping the context of the conversation. Let's find out. And there we are, Pi to three decimal places is 3.142. So it has a memory and that is exactly what we want from a chatbot.
[04:25] Okay, so we've pretty much nailed the chatbot or at least its basics. So let's take a look at a few more tweaks we can make to really level up our chatbot skills. Now, one danger you can run into with chatbots is that they can get repetitive. No one likes a conversation with someone that just says the same thing over and over.
[04:43] So let's take a look at how we can deal with that next.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!