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

1

Add the component

Add the Chat Message List to your conversation screen.

2

Choose your collection

In the Choose Collection field, select your Messages collection. Filter it to show only messages for the current conversation (e.g., where Conversation ID = the current conversation's ID or Current Conversation>Messages).

3

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)

4

Set the logged-in user ID

Open Message Settings and set Logged In User ID to Logged In User > ID using Magic Text — this tells the component which messages are "sent" (right-aligned, colored bubble) vs. "received" (left-aligned, gray bubble).

5

Configure sending

Set up On Send Message — this fires when the user taps Send. Use it to create a new message record in your database.

---

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.