How to build chat in Bubble

The simplest valid way to build chat in Bubble is to create a Conversation data type that stores the list of Users, and a Message data type that stores the text, sender, and the conversation it belongs to. Then on the page, you display a repeating group of Messages filtered by the selected Conversation, and you create new Messages through a workflow when the user sends text. This structure works for 1‑to‑1 and group chat, supports privacy rules, and scales much better than trying to store messages inside a list field.

Data structure

You need two main data types:

• Conversation: fields
  • Participants (List of Users)
  • Last message (Message, optional, for speed)
• Message: fields
  • Text (text)
  • Sender (User)
  • Conversation (Conversation)
  • Created Date (built‑in, used for sorting)

This keeps Messages as separate things so Bubble can load them progressively, which is important for chat performance.

Page UI

• A repeating group with Type = Message.
• Data source = Search for Messages with constraint Conversation = Parent group's Conversation, sorted by Created Date ascending.
• Inside the RG cell, show Current cell's Message's Text and Sender.
• An input box for typing messages and a Send button.

Send message workflow

When the user clicks Send:

• Create a new Message:
  • Text = Input's value
  • Sender = Current User
  • Conversation = Current page's Conversation
• Clear the input value.
• (Optional) Make changes to Conversation → Last message = Result of step 1.

Privacy rules

On Message and Conversation, create a rule:

• When This Conversation's Participants contains Current User → allow view.
• Same condition on Message (via This Message's Conversation's Participants).

This ensures only participants can load each other’s messages.

Auto-scroll

Use the repeating group property Scroll to bottom (with a workflow action Scroll to entry: last item) after a message is created so the user always sees the newest messages.

// Example workflow comment (not code executed in Bubble):
// After creating a Message → Scroll to repeating group's last item