How to Build a Chat System in Bubble

Go to the Data tab and create two Data Types. First, 'Conversation' with fields: 'participants' (list of Users), 'last_message' (text — preview of the most recent message), 'last_message_time' (date), and 'name' (text — for group chats, optional). Second, 'Message' with fields: 'conversation' (Conversation), 'sender' (User), 'body' (text), 'is_read' (yes/no, default no), and the auto-generated Created Date serves as the timestamp. This two-table structure keeps conversation metadata separate from individual messages for efficient querying.

In the Design tab, create a two-column layout: a sidebar on the left (300px wide) and a main chat area on the right. In the sidebar, add a Repeating Group with type Conversation. Set the data source to Do a Search for Conversation where participants contains Current User, sorted by last_message_time descending. Inside each cell, display the other participant's name, the last message preview, and the time. Add a conditional badge showing the count of unread messages: Do a Search for Message where conversation = current cell's Conversation and is_read = no and sender is not Current User, then display the count.

In the main chat area, add a Repeating Group with type Message. Set the data source to Do a Search for Message where conversation = the selected conversation from the sidebar, sorted by Created Date ascending. Inside each cell, create a Row group. Use conditionals to align messages: When current cell's Message's sender is Current User → align right with a blue background. When sender is not Current User → align left with a gray background. Display the message body, sender name, and timestamp. Below the Repeating Group, add an Input element for typing new messages and a Send button.

Add a workflow: When Send button is clicked (or when the user presses Enter in the input). Add these actions in order: Create a new Message with body = Input's value, sender = Current User, conversation = the selected conversation. Then Make changes to the Conversation: set last_message = Input's value and last_message_time = Current date/time. Finally, clear the input by resetting it. Bubble's auto-updating search on the message Repeating Group will automatically display the new message for all conversation participants without any additional real-time setup.

For typing indicators, add a field to Conversation called 'typing_users' (list of Users). When the message Input's value changes, add Current User to the typing_users list. Use a 'Do when condition is true' event to remove the user after 3 seconds of inactivity. Display a '... is typing' text below the message list that shows when typing_users is not empty and does not contain only Current User. For auto-scrolling, use the Scroll to entry action on the Repeating Group after a new message is created, targeting the last entry. Add this as a step in the send message workflow.

When a user opens a conversation or the conversation's message list loads, mark all unread messages as read. Create a workflow on the conversation list click event: after setting the selected conversation, add an action to Make changes to a list of things. Target Do a Search for Message where conversation = selected conversation, is_read = no, and sender is not Current User. Set is_read to yes. This updates the unread count badge in the sidebar. Also trigger this workflow when the page loads if a conversation is already selected.