Building a Chat Interface That Anchors Messages to the Bottom
The fundamental behaviour of a chat UI, where new messages appear at the bottom and older ones scroll upward, requires a repeating group that loads in reverse order. Bubble now supports this natively with the Reverse scroll direction toggle, and the key that makes it work responsively is setting the repeating group's height to 100% rather than a fixed pixel value. This tutorial covers the complete layout structure needed to achieve a polished, responsive chat interface.
The Page Layout Structure
The layout is built in layers, each one necessary for the responsive behaviour to work end to end.
At the outermost level, the page is arranged in columns. This allows the main body area to stretch from top to bottom of the viewport automatically. The body section has a left padding offset to account for a floating sidebar, and the sidebar itself has no fixed height, so it automatically fills the full page height.
Inside the body, the chat container does not have a fixed height either. It fills the available space based on its parent's dimensions.
Within the chat container sits the stream container, which handles streaming AI responses. Its layout is set to align to parent, so it fills the chat container completely.
Finally, the repeating group inside the stream container is set to height 100%, with Reverse scroll direction enabled. This combination, height 100% plus reverse scroll, is what makes messages anchor to the bottom while keeping the layout genuinely responsive.
The Gradient Fade Overlay
To achieve the visual effect where the top of the chat fades out as messages scroll up, a gradient overlay group sits on top of the repeating group in the element hierarchy. Being lower in the element list gives it a higher z-index, so it renders over the message content.
The gradient is configured with three colour stops: the background colour at full opacity at the top, the background colour at 90% opacity in the middle, and the background colour at 0% opacity at the bottom. This produces a smooth fade that obscures content near the top without creating a hard edge.
The overlay height, 72 pixels in this implementation, determines how far down the page the fade extends.
Handling the First Message's Position
When the chat has few or no messages, the first message the user sends should appear at the bottom of the chat area with some padding above it, so it does not sit directly under the gradient overlay without any visual separation.
This is handled through a conditional on the user message cell within the repeating group. The conditional adds a 72-pixel top margin, matching the height of the gradient overlay, but only when the cell is the last item in the repeating group. With reverse scroll enabled, the last index in the data source corresponds to what visually appears as the first message at the bottom of the screen. Setting the condition to check whether the cell's index equals the total count of messages targets only that bottom message.
The Streaming Response Pattern
The stream container element is specifically designed to hold streaming content from AI APIs. You cannot save a streaming response directly to the Bubble database as it arrives. Instead, the stream element captures it on the front end, and once the full response is complete, a workflow saves the final text to the database.
This means the chat interface is reading from two sources simultaneously: completed messages from the database displayed in the main repeating group, and the in-progress streaming response displayed in the stream container. Structuring the layout to accommodate both is part of what makes Bubble chat interfaces slightly more complex to build than they initially appear.
The Result
When configured correctly, the chat interface loads with all existing messages anchored to the bottom, new messages appear at the bottom as they arrive, the layout adapts smoothly to any viewport size, and the gradient fade gives the UI a polished Raycast-style visual quality. Third-party CSS inversion plugins are no longer needed for this pattern, and nested repeating groups within chat cells behave correctly because the layout does not rely on the CSS hacks those plugins introduced.