Integrating JavaScript for Interactive Web Chat Features

Hi, welcome back to another lesson of Python for AI apps. My name is Brian McLean. We are now moving on to lesson six.

Remember in the last lesson we did the HTML and CSS for that green leaf tree nursery. We've got a little input where the user can type a message and click send, and there's a chat window underneath where we would like chat messages to appear, but of course so far there's no functionality, which brings us to the next major topic, which is JavaScript, which provides the interactivity. If you want to have a button that works when you click it, it's beyond HTML and CSS at that point.

That's where JavaScript gets involved, and let's check it out. So lesson six, JavaScript for making the send button work. So here we have file, this is 05, and of course you can type stuff and nothing happens, right? Because we don't have any, we don't, the button has not been told to do anything, it hasn't been given any instructions to call functions or execute any code.

That is what JavaScript is for. We're going to write a JS function that runs when the user clicks send. The JS function will get the user's chat message from the input box.

It's then going to make a chat bubble to hold the user's message, and it will then append or add the chat bubble to the chat window and repeat. If you type another message, hit send again, you'll get another message, but the result will be a one-sided conversation. There's no server involved, much less any OpenAI API.

So it's only going to be the user basically talking to himself, but that's an important step. We need that to get to the next step, which would be sending our message to the server. So just real quickly, this is not a JS course.

I could barely get into explaining any of the JS. There is some explanation of JavaScript written here that you can absolutely look at on your own. I'll say a few words here and there about what the JS is doing, but in general, we're not going to be able to get too deep into that part.

So HTML is your structure of a web page, CSS is your styling, and JS is your behavior. So you don't want a car to just sit there and look pretty, right? You want it to be able to turn, speed up, slow down, stop, go in reverse, windows roll up and down, all that stuff, behaviors of the vehicle. So JavaScript is the behavior of the web page.

So you want that button to do something when you click it, JavaScript. We're going to have the JavaScript tell the send button to call a function. If you don't know JS, this might be a little hard to follow.

And again, not a JavaScript course, but hang tough. So from index five, we're going to do a save as and call the file index six. Five is the one you're looking at in the browser with the cute little bunny.

File, save as, index six. We don't really need to change the CSS, but maybe the HTML, but just look, we have this chat window. That's where we want our chat bubbles to go.

And we have a button. That's what we want to be able to click to call a function in JavaScript. And we have the input.

We want our JavaScript function to be able to go to this input and take out the text that the user typed in there. We're going to launch the page in the browser, or we can simply change five to six here. And of course the send button doesn't work, right? We already tested that.

Hello. Nothing happens. That's for JavaScript.

So in the JS folder, we're going to make a new file called script06.js. We'll say script06.js. And then we have to import that script into the index page so that when you click the button, it'll know it'll have the script available to know what to do. You can write your JavaScript directly in HTML pages inside script tags, just like you can write your CSS directly inside style tags in HTML. But the better practice is, especially if the script has any length at all, is to write it as an external file, which you then import.

And this is the syntax for that. Script tags with a source set equal to the path to the file. So in our index, and you do that at the bottom, not at the top like you do with CSS.

And the reason for that is we import our JavaScript at the bottom because the JavaScript needs to reference elements on the page, buttons and so on. And it can only do that if they've already loaded. So you let everything load, and then you import the JS.

So the JS goes at the bottom. There you go. So right at the very bottom, last thing before the close of the body, we have imported the JavaScript file, which is inside the JS folder, which is inside the static folder.

So in script06, we're going to get the so-called DOM elements from the chat interface. DOM stands for document object model. That is a JavaScript concept, meaning that JavaScript thinks of all the tags, all the elements on the page as these objects that you can grab and manipulate, which is what we're going to do.

We don't need every single tag, but we do need the chat window because we're going to put chat bubbles there. We need the input box because we have to go get the value of that after the user types in there. And we need the send button because we need the send button to call a function.

So the chat window, input box, and send button are the three so-called DOM elements which we need to grab. Input, button, chat window. These three guys right here.

So in script06, we're going to say const chat window equals document query selector is the command. It means go and find the thing called whatever, and the thing is a class of chat window. Any element with a class of chat window will answer to this, the first one, and there's only the one.

Then we're going to say input box equals document. Again, query selector. Go to the document and find the first input.

There's only the one, so it'll find that one. And then send button, there's only the one button. If we say go find a button, it'll find that one button.

Get the DOM elements for the chat. Then we're going to say tell button to call function. We're going to say send button dot add event listener, click, and then the name of the function will be send user chat message.

We're not really sending it anywhere, but we are getting it. Getting it and making a box out of it. That's fine.

Send. It's going to be sending. Later we're going to be sending it out of the file, but right now it's not really going too far, but still.

So this syntax means the button is being told to listen, listener, for a click, a click upon itself, and then when the click is detected to call a function, which is a pre-written chunk of code that waits around to run when it is called by name. Define the function that runs on button click. Function send user, whoops, yeah.

And then it's going to do stuff when the function runs. Here's a bunch of JS. Read.

Absolutely read that. Step two, define the JS function that runs on button click. Clicking the send button calls a function, which is going to do the following.

It's going to get the chat message out of the box, make a bubble to hold it in, put the message in the bubble, and then output the bubble to the chat window. No Python server yet, right? This is all just happening right here on this page. So in script seven, or script six, define the function we just did that.

Now in the function, get the value of the input box. The value being whatever the user typed into the box. And we're going to save that as a variable using the let keyword to declare a variable of string data type in this case.

So it's just text. User chat message is a variable that's just going to hold the text of whatever the user typed into the box. And then we're going to log that to the console, which is a developer output window that we'll go look at after we click the button, make sure that this will tell us that the function is working and that the correct data is being saved to this variable.

In other words, whatever the user typed in the box. We're going to say, let user chat message equal input box dot value. And then we're going to console log that.

Let's try it out. I should run. Click save.

Do we have our message? There it is. It's working. Now the next step will be to get that to show up on the screen in the chat window in its own little bubble.

So step three, make a chat bubble div to hold each chat message. So every time the function runs, that is every time send is clicked, we're going to make a chat bubble to hold the new message. Now, if the user clicked send without first typing a message, then we would not want to make a bubble for an empty message.

So an empty message would be an empty string, just quotes with nothing in it. We're going to do an if statement where we look to see if the message is an empty string. In other words, did the user click send to call the function without first typing anything inside the input box, which resulted in the value of the input box being an empty string.

If that's the case, we don't want to make a bubble for this thing. We just want to exit the function, which is done by the return keyword. Exit function if user clicks send without first inputting a message.

We'll say if user chat message equals nothing empty string, return is exit. Return will escape out of the function. Then nothing else will run.

If we make it farther than that, down to here, then it was not an empty string. And that if statement did not run and the function is still going. We're down to here.

If we made it this far, because there was actually a message typed in the box, we're going to make a chat bubble div to hold that message. And the syntax for that is document create element div, the name of the element. Make a div to hold the chat message.

It's a chat bubble div, actually. Chat bubble div. Hold the chat message text.

We'll say const user chat bubble. I want to be distinct from user because there's also AI later, the other party chatting. That'll be document.create element div.

Assign the chat bubble. It's CSS. There's a pre-written class.

You can check it out in the CSS file if you like. It just makes it look nice, rounds the borders a little bit, sets some padding. User chat bubble dot class name equals the name of the class's chat bubble.

You can just take a quick peek at that. There it is. Then give user chat bubble its own color.

So the user chat bubble will have its own color background. We say style dot background color. And the color we want to use is a very pale aqua.

We'll say EFF. That's as pale of blue, as pale an aqua as you can get. Then we're going to output the user chat bubble to the chat window.

We'll say chat window dot append child. That is the syntax for adding a child element to a parent element. So the chat bubbles are the children of the window, chat window.

So that's finishing these steps. It puts the message in the bubble and appends. Oh, we skipped a step.

It puts the lotion in the basket, a message in the bubble. User chat bubble dot text content equals user chat message. And then output.

JS explain. Go have a look at that. Give it a good read.

Test the chat in the browser. So what happens is when you type, it's just going to give you your own messages. There's no answer.

There's no server. There's no AI. It's just you talking to yourself, basically.

But that's fine. Important stepping stone. We'll say hello.

How is it going? What is your name? And so on. So it's working. Great.

All right. There's the final code for Lesson 6, the JS. The HTML is the same as for Lesson 5. And again, it's not a JS course, but I would encourage you to go read through some of these JS notes that I included.

All right. That's it for Lesson 6. Very good job. We're going to be moving right on in a moment to Lesson 7.