So we're going to go ahead and make out a counter component. Let's go over to our routes and let's register this out as counter. Swap this over to our counter and we should be good. OK, so let's go over to this in the browser and.

Obviously, we don't see anything just yet. So what are we going to do here? Well, we want to create out. We'll start with our counter template, a counter in here that maybe starts at five or ten and then a button to start this counter.

Now, what we want to do is see this decrement and tiller. It's going to be a countdown, but what we want to do is do this in a single network request. So if you think back to our chat bot, we're going to get this content streamed in in pieces. It will be a few words at a time.

And we want to display this on the page as that content actually rolls in. What we don't want to do is continue to send network requests over in here to LiveWire. To get these back, it's not great practice to just constantly pull this if you don't need to. And that's where wire stream comes in.

OK, so let's go ahead and build out this full example. So let's create this button to click and we'll just say start. Let's go over to our counter and we'll create out this start here and let's create a counter up here, which starts at five and then a button to start this counter. Starts at a specific value.

This is going to start the countdown. And then, of course, over here we can grab out that counter value. So at the moment looks like that when we click that invokes that method. So here's what we typically do.

Let's create out a while loop in here. And the condition of this is going to be that these counter here is greater than or equal to zero. What do we want to do? Well, we want to go ahead and sleep for a second, and then we want to set the counter to the current counter value minus one or just do minus minus and see what happens.

So let's go over, hit start. And yeah, sure enough, nothing is happening. This is happening behind the scenes. And of course, it's not updating.

So what we want to do is stream the value of counter directly to an element on the page. So to do this inside of here, we're going to say this stream. And this takes a couple of options. The first one is the element that this goes to.

So let's bring in named arguments here to make it a little bit easier. The second one is going to be the content, which is going to be the counter itself, of course, because that's what we want to see. And then we have a second option, which I think by default is true, which is replaced. Do we want to replace this or add onto it?

And actually, no, the default of this is false because we do want to append. This will append the value and this will replace the value. So let's start with replaces false because that's what we're going to be using for our chat. OK, so is this going to make any difference?

The answer is not really because we are not outputting the streamed content to the page. So let's go over to our counter component. And in here, we're going to change this over to wire stream. Now, what do we call that?

If we have a look, we call this count. So let's go and reference count here. And then we just want to output the current value of the counter. All right, let's try this out.

I'm going to hit start. And yeah, sure enough, what's happening now is that's counting down because I said replace the false. It is just appending onto this. But of course, once we change this back over, it will work.

So you can see that it's working now and we end up at minus one. But who cares? We are just looking at a simple example here. So let's go ahead and say true.

And let's actually switch this over to just greater than. And let's try this out. I'm going to hit start. And yeah, it starts counting down.

Obviously, because we've chosen a lower number, let's just wait for it to get all the way down to zero. And. There we go, perfect. So if we open up our network tab here, what you'll notice if we just look at all here, when I do click on this, you'll see that we do send a single request to live wire.

But then live wire is going to use that stream API to continue to stream this request down. So we're not making a bunch of network requests over and over again. It's also a lot more convenient to use wire stream because we don't need to set up any kind of mechanism to constantly reload this component. And if we did reload the component and there was other data in there that was being fetched, maybe from the database or even an API request that would continue to, of course, go ahead and make

requests and it would slow everything down. Okay. So now that we have looked at a really simple counter example, let's go ahead and apply this to our chat response component, because we want to take the response that we get back here. And we want to create a streamed response and then append all of them pieces of data to the chat bubble.