Transform any Bubble Repeating Group into a real-time chat-style interface like WhatsApp, Telegram, Discord, or Messenger. Reverse message order, auto-scroll intelligently, detect manual scrolling, animate new messages, and create smooth mobile-friendly chat experiences — all using only your RG’s Attribute ID.
# Reverse Repeating Group & More


This plugin gives Bubble developers a production-grade chat experience without complex workflows, reversed data sources, or custom CSS hacks.

Simply provide your Repeating Group’s Attribute ID and the plugin handles everything automatically.

---

## ✨ Core Features

### 🔄 Reverse Repeating Group Layout

Display newest messages at the bottom automatically for true chat-style UX.

### 📩 Smart Auto Scroll

Automatically scrolls only when appropriate:

* New message arrives
* User is already near the bottom

Prevents annoying forced scrolling when users are reading older messages.

### 👆 Manual Scroll Detection

Detects when users scroll upward and temporarily pauses auto-scroll.

### 🎬 Smooth Message Animations

Animate newly added messages with smooth fade and slide effects.

### ⚡ MutationObserver Powered

Automatically detects:

* New messages
* RG refreshes
* Bubble rerenders
* Infinite scrolling updates

### 📱 Mobile Optimized

Built for smooth mobile experiences:

* Momentum scrolling
* iOS optimized
* Android optimized
* Reduced layout thrashing
* Touch-friendly performance

### 🧠 Performance Optimized

Production-grade architecture with:

* Debounced observers
* requestAnimationFrame optimization
* Passive scroll listeners
* Memory leak prevention
* Efficient DOM handling

---

# ✅ Bubble Compatibility

Works with:

* Vertical Scrolling RG
* Full List RG
* Infinite Scrolling RG

No external libraries.
No jQuery.
Pure modern vanilla JavaScript.

---

# 🚀 Perfect For

* Chat apps
* AI assistants
* Customer support systems
* Messaging platforms
* Live notifications
* Activity feeds
* Comment systems
* Discord-style communities
* WhatsApp clones
* Telegram clones

---

# ⚙️ Plugin Features

* Reverse vertical scrolling
* Smart scroll positioning
* Smooth scrolling
* Scroll position preservation
* Auto-scroll pause/resume
* New message detection
* Mobile optimization
* Bubble events
* Exposed states
* Dynamic DOM monitoring
* RG reattachment logic

---

# 🎯 Bubble Events Included

* New Message Detected
* Auto Scrolled
* Manual Scroll Detected
* Reached Bottom

---

# 📦 Exposed States

* is_at_bottom
* is_user_scrolling
* total_messages
* last_scroll_position
* last_message_detected

---

# 🔧 Easy Setup

1. Enable “Expose the option to add an ID attribute”
2. Add an Attribute ID to your Repeating Group
3. Add the plugin element to the page
4. Enter the RG Attribute ID
5. Done ✅

---

# 💡 Why Use This Plugin?

Most Bubble chat implementations require:

* Reversed data sources
* Complex workflows
* Scroll hacks
* Custom JavaScript
* CSS workarounds

This plugin eliminates all of that and provides a professional messaging experience out of the box.

Build modern real-time messaging interfaces inside Bubble with minimal setup.