Improve your Bubble ChatGPT clone with this plugin
Finally you can create a true chat experience in Bubble with the Reverse Repeating Group plugin by Thimo. Design your Bubble ChatGPT clones or other chat apps to scroll to the bottom of the conversation just like iMessage and Slack.
Reverse your chat layout: Discover the game-changing plugin that solves Bubble's repeating group design limitations for chat interfaces!
Struggling with chat UI? Learn how to implement a professional ChatGPT-style interface using the reverse repeating group plugin in Bubble.
Elevate your Bubble app: Transform your chat experience with a simple plugin that loads messages from bottom to top, just like popular messaging apps.
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.
Master Bubble & Launch Your MVP
Embark on your Bubble.io journey with our Free Access, or accelerate your progress with the 90-Day Pass for just $99.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
- Free Plan: Enjoy unlimited access to the Beginner Essentials course.
- 90-Day Pass: Unlock all 500+ videos and full AI functionality for 90 days. Afterward, you can subscribe at a great rate to keep building and learning.
Our AI No-Code Coach is your first stop. If you need deeper help, consider optional 1:1 coaching for personalized guidance. We also host occasional community events to share tips and celebrate wins together.
After your pass ends, you’re free to continue with a cost-effective subscription that includes ongoing AI No-Code Coach access and any future content updates.
Absolutely. If you don’t see real progress within 30 days of your 90-Day Pass, let us know, and we’ll issue a full refund—no questions asked.