Create an AI chat bot with Livewire and ChatGPT
Playing
03. Pushing message history to a stack

Episodes

0%
Your progress
  • Total: 29m
  • Played: 0m
  • Remaining: 29m
Join or sign in to track your progress

Transcript

00:00
Let's start out with creating our chat interface and have our messages pushed to an array so they can be displayed.
00:06
And then we'll look at how we trigger open AI to give us back a response when that happens. Okay. So the first thing that we're going to do is go ahead and
00:13
create out a live wire component. So let's go ahead and call this chat. And because we're going to be registering this as a full page component, let's also go ahead and generate out a default layout here.
00:26
Okay. Let's go ahead and swap this over for that chat component that we've just created. And let's open up our layout and just make sure that we have Vite pulled in, pulling in our CSS so we can get tailwind in.
00:40
So we're going to go into resources app and app.css. And while we're here, let's just go ahead and change this page title over to pull this from our app's name. Okay.
00:50
So we should now have a layout and we can just start to put this onto the page. So if we head over to our chat.blade.php file, I have some pre-made markup here for the entire chat, which you can grab from the GitHub repo. So if we go over to that and have a look, you can see it looks like this.
01:08
Sure enough, exactly what we saw from the introduction. So we can type something in here. We see each of the messages as they come through. Okay.
01:16
So now that we've done that, let's head over to the actual chat component class. That's to find out some of the things that we know we're going to need here. The first thing is going to be the body that we want to send, which will be validated, of course.
01:28
So just while we're here, let's go ahead and add in the validation rules for the body. Of course, this is going to be required. We'll make this a string and we'll set a max here of a thousand.
01:37
Although string, we don't really necessarily need. Okay. The next thing is going to be the stack of messages that we are keeping track of. We're not storing these in a database, although you could, we're just having
01:50
a, an array, a simple array of messages just inside of here. So let's define that out as well. Okay. Now let's go and create a send method in here, which is going to be triggered
01:59
when that form gets submitted. We want to validate everything, and then we want to start to push everything to those messages. So if we go over to chat.blade.php, let's go down to the form section just here.
02:13
And let's hook up this input with wire model to that body proxy that we created. And then when this form gets submitted, we can go ahead and invoke send. So let's say wire submit and we'll invoke send. Okay.
02:28
That should be enough now to start to push that to our stack of messages. So what we're going to do here is add these messages as we would send the response through to open AI, as we saw from the last episode. So we're going to do something like this.
02:43
We'll say this messages and we'll push on another array into here and we'll set the role, so the role here is going to be the user, which we've already seen. And we'll set the content here to, of course, the body directly within this component.
02:59
What we're then going to do is down here, push the role as assistant to an empty bit of content, and that will eventually trigger an open AI response. Now I'm not going to do that just yet. Let's go ahead and sort of ignore this for now.
03:15
We'll in fact, get rid of the entire thing. We'll cover that when we get to the point of actually going ahead and sending the request through. So I'm going to go ahead and reset the body, of course, because we don't
03:26
want that to hang around in the form. And we now have a bunch of messages. So over in our chat template, let's go ahead and start to iterate through here. So this is the bot message.
03:36
Again, I'm going to go ahead and comment that out for now. And this is what we want to start to iterate over. So let's do a for each here on each of our messages as message. And we want to check the role type here and we want to respond accordingly.
03:51
This is eventually going to be a sub component, which will trigger a response to open AI. And that will allow us to stream the content within its own live wire component. So in here, we're going to say, if the message role is user, then we
04:08
want to go ahead and show this one. So let's end the if statement there, and then we'll add an else a little bit later when we get round to it. So here, of course, we just want to output the message content.
04:19
Okay. Let's see if this works. And then I'll give you a little bit more context around why we're doing this. So let's go ahead and just type.
04:25
Hey, and yeah, we just need to fix that up and let's type again. And yeah, there we go. So we can just type as many messages as we want. And of course they're all going to come through.
04:36
So the reason that we're doing this is because when we use wire stream, it's going to work within its own component. We can stream to a single component, but we can't keep streaming within a loop here. We'll see that a little bit later.
04:49
And the reason that over in chat, we're pushing these messages is because eventually we want the context to be sent through to open AI as we add more messages. So now that we've done this and we've got a working chat just over here, let's go ahead and look at triggering a response back from open AI.

Episode summary

In this episode, we're getting the basic chat interface up and running! We start by setting up a new Livewire component called Chat that'll be responsible for displaying our chat UI. There's also a bit of layout housekeeping to get Tailwind CSS working and set the page title from our app's config.

Next, we dive into displaying chat messages. We set up an array to hold the message history (like a stack), and wire up the form input using Livewire's data binding and validation—so when you submit a message, it's validated, pushed onto the array, and then displayed right away in the chat window.

We also look at a bit of Blade templating to loop through these messages and display them by role (for now, just the user's messages show up). While the OpenAI assistant's response logic isn't hooked up yet, we're laying the groundwork so it can be slotted in later.

By the end of the episode, you've got a working chat input where user messages are tracked in memory and immediately shown on the page—perfect for iterating toward a full-featured, AI-assisted chat experience in next episodes!

Episode discussion

No comments, yet. Be the first!