Introducing the Reverse Repeating Group Plugin
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 reverse 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. Let me show you an example.
Demonstrating the Chat Interface Issue
Here is a ChatGPT clone that I built and demoed 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 refreshing that again. My issue is that it loads in at the top whereas actually my chat should load in at the bottom.
The Reverse Chat Design Expectation
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. It's the opposite, it's bizarre but it's what we've come to expect and yeah 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.
Adding the Reverse Repeating Group Plugin
Let's go to add plugin and search for reverse and 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 Thimmo. So then I just add in the element into my page 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 and general and scrolling about halfway or all the way down depending on which version of Bubble you're using and you'll find the 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 on the page to give us a really nice chat layout.
Configuring the Plugin
So I would just call this one the repeating group, I call it repeating group one, 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 color depending on the role so I'm going to call this one text. Text one just in case text is taken and now let's preview it.
Testing the Reversed Chat Layout
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 order so let's change it up here rather than create a date descending yes I'm going to say no I'm going to say creating date 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 earlier ones up top 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.
Observing the Automatic Scrolling
So I'm waiting for OpenAI to respond but I'm already quite impressed because it's 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 of scroll and check to see if there's new content but I'm getting the impression that this is actually rather clever plugin. Yeah there I have it.
Recap and Final Thoughts
Bit of a recap how have I made this work well I've installed the plugin there we have it and 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 plug-in basically the best one I've seen for reversing a repeating group for giving up your app a pure simple chat interface.