Let's chat with our agent. Now admittedly we could do this in a variety of different ways and probably the best thing that we could have done is instead of implement this all inside of the ticket chat controller, we should put this inside of a service so that we could reuse it because it makes sense to have it in a controller for API purposes. But you know, we could also use this inside of a live wire component because what we're going to do is add a little section here for

inside of a live wire component because what we're going to do is add a little section here for chatting with our agent. And if we put that inside of a live wire component, then we would have easily gotten a lot of stuff for free as far as the UI is concerned should have thought about that. But I didn't. So instead, what we're going to do is just do it really easy and quick. But really, the main thing about this was setting up the agent to begin with. So we have our agent. Great. We just

main thing about this was setting up the agent to begin with. So we have our agent. Great. We just need to go from there. So the first thing is adding the CSRF token to the page so that we can grab that and send that with our post request to the controller with JavaScript. The other thing that we are going to do is, well, I guess we could do it at the end here, we are going to write some JavaScript. Again, if I thought about it, we could have done this with a live wire component. But

JavaScript. Again, if I thought about it, we could have done this with a live wire component. But the first thing we are going to do is add an event listener for the Alpine init event, because we want to set up a component. And we'll call it just ticket chat demo for the lack of a better term. And we need the ticket ID because in order to make a request, we need to know what ID that we need. It could be useful to also have an initial response, because we're going to have two

we need. It could be useful to also have an initial response, because we're going to have two text boxes. One is going to have the response from the agent. And then there's going to be another that, you know, the person will type into. So we could have an initial response, which will just initialize as an empty string. But if we wanted to supply, you know, some pre existing response, then, you know, we would have that ability there. So then we just need to, you know,

response, then, you know, we would have that ability there. So then we just need to, you know, define our component properties. So we'll have the ticket ID, then we will have the prompt, which will be, you know, the prompt that we type in, then we will have the response response. I miss type response a lot. And this will be the response from the agent. So this is where we could set the initial response. And that would be that. Let's be sure those two match, they do so we can go on.

initial response. And that would be that. Let's be sure those two match, they do so we can go on. So the next thing we need is, you know, actually sending the request to the controller. So the first thing we want to do is get our message that we want to send that is essentially going to be the prompt. Let's go ahead and let's trim it up and let's check if the message length is less than, I don 't know, three, really, it should be more than that because if we're just going to type three

't know, three, really, it should be more than that because if we're just going to type three characters, there's not a lot of chatting going on there. But if it's less than three, we're just going to return. But if it's not, then let's set the prompt, not the message. We want to clear out the prompt, which is, you know, typical behavior, you type something into the chat box, you press enter, and then it sends your message, but then it clears that box. So this is exactly

press enter, and then it sends your message, but then it clears that box. So this is exactly what we want. And then from there, it's just a matter of making our request. So we will get the response by awaiting fetch, our request is going to go to tickets. And then the ticket ID AI chat, that is our end point. Then this is going to be a post request. And we need some headers. First of all , let's set the content type header, that is, of course, going to be application slash Jason,

, let's set the content type header, that is, of course, going to be application slash Jason, then we want the accept header, which is once again, application Jason. And then finally, we need the X CSRF token header, and we're going to get that from the meta tag that has a name of CSRF token, we're going to get that content. And then finally, we need the body for the request, which we will stringify, simply the message. Now, if an error occurs, you know, ideally, we would, you

we will stringify, simply the message. Now, if an error occurs, you know, ideally, we would, you know, display something, but we will write the error to the console. And that's what we'll have. Of course, this error will actually come from us attempting to get the data from the response. And checking if the response is not okay, then we will throw a new error from the message from the data. That way we throw out there, we catch it there, and then we write it to the console.

from the data. That way we throw out there, we catch it there, and then we write it to the console. But if everything's okay, then we set the response equal to data message. But I guess we should have a fallback, just in case, so that if we actually don't have a message, we'll have an empty string there. And that's our component, or at least that's the JavaScript side of it. Very straightforward. We make a request using our prompt, we get the data, if there's an error, we throw

straightforward. We make a request using our prompt, we get the data, if there's an error, we throw it and catch it. Otherwise, we show the response that we received. So now, it's just a matter of putting our markup. And if we take a look at the browser, I want this before we add a message. So if we look for add a message, which is right there, I'm just going to paste this in because it 's a lot of markup. And really, we can just go over this. So our x data, this is our components for

's a lot of markup. And really, we can just go over this. So our x data, this is our components for this ticket ID. If we had an initial response, we could include that, but we'll just leave it as is the heading here will be AI chat demo. But the things of import are this div elements, because the text is the response, the model for this text area is the prompt. And of course, we have our form that we will call the send method when we submit it. So inside of the browser,

have our form that we will call the send method when we submit it. So inside of the browser, we now see our chat demo. And hopefully, this is gonna work. So what do we do? We of course want to chat about this particular ticket. So let's ask what the priority is, what is the priority of this ticket? We will send to agent. And there we get to the response. Now, there's something that I want to point out here, and that the response was just right there. It was output. There was no

want to point out here, and that the response was just right there. It was output. There was no streaming or anything like that. It was just did. Ah, here it is. Well, we can see that the ticket priority is one. It's high. If you'd like, I can check status updates or escalate for faster handling . So our chat agent works just fine. That's fantastic. The only thing that I want to do, though, is make it a little more streamline isn't the right word. But streaming is I don't want this text to

make it a little more streamline isn't the right word. But streaming is I don't want this text to just appear. I want it to stream in because that is the experience that we typically have whenever we, you know, chat with AI, the response is streamed to us. And we can actually do that. And we will in the next episode.