Build a Realtime Chat with Laravel, Vue and Pinia
This episode is for members only

Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started
Already a member? Sign in to continue
Playing
09. Ordering messages with flexbox

Episodes

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

Transcript

00:00
Heading over to our chat messages component, where we are fetching our state here,
00:04
let's go ahead and just create our really basic wrapper for all these messages. And then we're going to see a problem with this. Remember, this is a chat interface where we want the latest message at the bottom, but we also want this to always stay at the bottom.
00:16
So as new messages roll in, it automatically scrolls. And we can handle all of this using Flexbox. OK, let's go ahead and create out a basic wrapper for this. First of all, I'm going to set a preset height to this,
00:28
which is pretty important because we need this scroll to happen. And let's just go ahead and add some other visual things in here as well. So set a back border of grey 200. We'll make this rounded large.
00:39
And we'll give this some padding on the x-axis of 4 and padding on the y-axis of 3. And that's just about it for now. We could also now set an overflow on the y-axis to auto, so it scrolls. OK, so in here is going to be each of our messages.
00:54
Let's go and iterate over these. So let's say v for message in. And remember, this is coming from our store. So messages store dot messages or all messages.
01:06
And let's go ahead and give this a key. So we know each of our messages has an ID. Let's use that. OK, so let's add some styles to this.
01:14
We'll set this to flex with space x of 3 and a margin bottom of 3. And then inside of here, we need the user's avatar. Let's go ahead and output that now by binding into the source the message user avatar.
01:28
We'll get rid of the alt for now, but probably a good idea to add that in as well. And then down here will be the actual message body. So let's again make this flex with items baseline. And we'll space this out with 2.
01:41
And then down here is going to be the body of the message. So let's just output message body. And this is going to be the user and the date and time. So let's make the user's name a font of bold.
01:55
We'll output message and user name. And then down here, we will create our span with the created at date. So message created at. And let's go ahead and make this a little bit smaller.
02:10
So let's set this to extra small. And we'll grade this out with text gray 600. OK, let's just wrap this so that sits nicely. And we should have these two things now next to each other.
02:25
Great. OK, let's just change up the avatar really quickly with a size of 12 and a rounded of large. And there we go. OK, so remember earlier when we created out all of our messages,
02:38
we set these to increment the message by the basically the index. So this is the last message that was inserted into the database. But this is at the top at the moment, which is a problem. If we scroll down, first of all, this isn't the latest message.
02:54
But also when we refresh the page, we aren't at the bottom of the text area. We want to be at the very bottom all the time. And we want the order of these to be flipped. What we can do with this is on the outer container, we can set this to flex.
03:09
But we can reverse the columns so we can say flex call reverse. Column is just going to position these rather than next to each other on a row. It's going to position them underneath each other. So by doing this, that's going to flip the order.
03:22
If we give this a refresh, you can see that a couple of things have happened. The order has been flipped, which is great. Now we get the latest message at the bottom. But also because of this, because we have this scrolling element,
03:36
it's going to go ahead and always push us to the bottom because that's the latest thing that we're seeing. So give that a refresh. We're already at the bottom.
03:44
We will always be at the bottom even as new messages roll in. But now they're in the correct order as well. And we can introduce a intersection observer just up here to push more messages in when we hit top of the scrollable div.

Episode summary

In this episode, we tackle the classic chat UI challenge—displaying messages so that the newest ones always show up at the bottom, and making sure the scroll position stays pinned there, even when new messages arrive.

We start by building a wrapper for our chat messages and styling it so it looks like a proper chat window. That includes setting the height, adding nice rounded corners, some subtle borders, and enabling vertical scrolling with overflow-y: auto. We then jump into rendering each chat message using a simple v-for loop, displaying the user avatar, their name, the message body, and when it was sent, all cleanly organized with a bit of Flexbox styling.

At this point, though, we notice a big problem: the latest message appears at the top, and when refreshing or when new messages arrive, our scroll position stays at the top as well. Not what we want! To fix this, we apply a Flexbox trick: we add flex-col-reverse to our message container. This flips the display order so the newest messages always appear at the bottom. Plus, because of how scrolling works in this setup, the chat view is kept pinned to the latest message unless the user scrolls up manually.

To wrap things up, there's a quick mention that you could introduce an Intersection Observer to load more messages as the user scrolls to the top—perfect for implementing infinite scroll later!

By the end of this video, you’ll understand how to use Flexbox to perfectly order and scroll chat messages in a modern chat interface.

Episode discussion

No comments, yet. Be the first!