Chat Message List
Display a conversation thread with message bubbles that automatically align sent messages to the right and received messages to the left. Supports images, timestamps, avatars, and a built-in input bar — everything you need for a polished chat experience.
Before You Begin
You need a Messages collection with fields for message text, sender ID, sender name, sender avatar URL, and a timestamp.
Your conversation screen should know which conversation is active so you can filter the Messages collection to only show that conversation's messages.
Getting Started
Map your fields
Open Item Template and map your fields:
Message Text Field → the field containing the message body
Sender ID Field → the field identifying who sent the message (e.g., user ID)
Sender Name Field → the sender's display name
Sender Avatar → the sender's avatar URL
Timestamp Field → the message timestamp
Image Field → the URL of any inline image (optional)
Settings
Item Template
Maps your collection data to the chat display.
Message Text Field — The text content of the message.
Sender ID Field — Used to determine which side of the conversation the message appears on.
Sender Name Field — Displayed above or alongside received messages.
Sender Avatar — The URL of the sender's profile photo.
Timestamp Field — The date/time the message was sent.
Image Field — The URL of an attached image (optional).
Message Settings
Empty State Message — Text shown when there are no messages yet. Defaults to "No messages yet."
Logged In User ID — Set to Logged In User > ID using Magic Text. Messages whose Sender ID matches this value appear as sent (right side). All others appear as received (left side).
Logged In User Messages — Which side to place the logged-in user's messages: Right (default) or Left.
Message Type — What content messages can include: Text Only or Text + Image.
Show Avatars — Toggle on to display sender avatars next to received messages.
Avatar Size — The diameter of sender avatars in pixels (default: 32).
Image Max Width — Maximum width of inline images in pixels (100–400, default: 200).
Bubble Style — The shape of message bubbles: Rounded, Soft, or Square.
Max Bubble Width (%) — How wide bubbles can get relative to the chat area (50–90%, default: 75%).
Show Timestamps — Toggle timestamp display below messages.
Timestamp Format — Relative ("2 min ago") or Absolute ("3:42 PM").
Messages Per Page — How many messages to load at a time (default: 20).
Input Bar
Show Input Bar — Toggle off to hide the input bar entirely (useful for read-only views).
Placeholder Text — The placeholder shown in the input field when empty.
Show Formatting Toggle — Toggle on to display a formatting toolbar button.
Toggle Icon — The icon used for the formatting toggle button.
Input Area Height — The height of the input area in pixels.
Input Background Color — Background color of the input field.
Send Button Color — Color of the send button.
Send Button Icon — The icon inside the send button.
Toolbar Icon Color — Color of the formatting toolbar icons.
Colors
Background Color — The chat area background.
Sent Bubble Color — The color of the current user's message bubbles. Uses your app's primary color by default.
Sent Text Color — Text color in sent message bubbles.
Received Bubble Color — The color of other users' message bubbles.
Received Text Color — Text color in received message bubbles.
Timestamp Color — Color of timestamp text.
Date Separator Color — Color of the horizontal date dividers.
Actions
On Send Message — Fires when the user taps the send button with text in the input field. Use this to create a new message record in your database. *Make sure to leave the image field blank
On Send Image Message — Fires when the user sends an image. Use this to create a new message record with the image URL.
On Message Tap — Fires when a message bubble is tapped.
On Image Tap — Fires when an inline image is tapped. Use this to open a full-screen image viewer.
Links added in a message are automatically detected and clickable within the message thread.
Tips
Always set Logged In User ID using Magic Text so the component correctly identifies sent vs. received messages.
Filter your Messages collection by conversation ID before binding — never load all messages from all conversations.
Use On Send Message to both create the message record and update a "Last Message At" timestamp on the conversation record so your Conversation List stays sorted correctly.
Toggle Show Input Bar off if you're building a read-only view (e.g., a moderation or support screen).
Set Messages Per Page to 20–30 for most use cases. Lower values load faster on first open; higher values reduce the need to paginate.
Links added are automatically detected and clickable within the message.
Need Help?
Visit forum.adalo.com to ask questions or share what you've built.
Last updated
Was this helpful?