If you're building a Bubble app that is a ChatGPT clone or has got any chat features where you need a chat layout, you need to check out this new plugin called Reversed Repeating Group.

I've been saying to my Bubble coaching clients now for many months that building a chat interface with Bubble is an uphill struggle because of the limitations on how you can display data in a repeating group.

Example of a bad chat layout in Bubble

Let me show you an example. Here is a ChatGPT clone that I built and demo the whole process of in an earlier video. But you can see that I've got an issue here with the fact that basically it spills too far down the page. This is not a nice chat interface. And even if I was to limit the height of the repeating group, there will be other issues. So let me demonstrate that. I'll say max height, let's say 500, and then refresh it. Try to refresh that again. My issue is that it loads in at the top, whereas actually, my chat should load in at the bottom. The design that we've all become accustomed to with chats is the opposite way around to how we expect any other content on the internet to load. We expect to start at the bottom and to scroll our way up. Like I said, it's the opposite. It's bizarre, but it's what we've come to expect.

Introducing Reverse Repeating Group

This plugin here, they've got a very impressive demo, and so I want to show you how you can add it into your own Bubble site. Let's go to Add plugin and search for reverse. There are a number of other plugins available, and I've tried some of them and I've never really got the result that I want or that I've been as impressed by compared to Reverse Repeating Group by Thimo.

Adding the plugin to your Bubble app's page

Then I just add in the element into my page. I'm going to add it in here. And I then need to set the ID attribute for my repeating group. And if you don't see ID attribute, you'll find that by going into settings in general and scrolling about halfway or all the way down, depending on which version of Bubble you're using, and you'll find a checkbox to enable this. And it's basically a way of putting a label into the code, which is going to help this plugin identify the bits it needs to manipulate it on the page to give us a really nice chat layout.

So I would just call this one the Repeating Group. I call it Repeating Group 1. Copy that. Paste into there. And then it is also asking for my group ID. So I think I can get a way of using this. This is my text Bubble. I've got a nice conditional on there for changing the colour depending on the role. I'm going to call this one Text one, just in case text is taken. And now let's preview it. Okay. So it's loaded in at the bottom first, which is what I wanted, but it's now actually put them in the wrong border. So let's change it up here. Rather than created dates descending, yes, I'm going to say no, I'm going to say created dates descending, yes. There we go.

I now get my most recent submission, or rather the most recent reply from OpenAI at the bottom, and I get the early ones up top.

Testing with new chat messages

So let's just test how well this works, because another issue that you may encounter is scrolling down. Now, I've not tested this. I'm literally trying out for the first time. So let's say, now write a blog post about WordPress and Bubble. I'm waiting for OpenAI to respond, but I'm already quite impressed because it shifted up automatically. I was building a chat interface in the app about a year ago, and I was having to add in all of these additional workflows or scroll and check to see if there's new content. But I'm getting the impression that this is actually a rather clever plugin. Yeah, there I have it.

So bit of a recap, how have I made this work? Well, I've installed the plugin. There we have it. I've also added a fixed height or sorry, a max height to the repeating group containing the chat. I think that's necessary to stop it still just spilling all the way down below the fold of the page. So yeah, there you have it. That is a very handy plugin. Basically the best one I've seen for reversing a repeating group, for giving your app a pure simple chat interface.

Discover more Bubble tutorials

If you found this video useful, we would really appreciate a subscribe and a like. It just helps the old YouTube algorithm. And if you're learning Bubble, there's no better place to do so than heading to planetnocode.com where you'll find other Bubble tutorials just like this one from beginner all the way through to advanced and you'll find tutorials that you cannot find on YouTube. They are exclusive to our membership community. So head over to planetnocode.com to find out more.