# 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 {% stepper %} {% step %} ### Add the component Add the **Chat Message List** to your conversation screen. {% endstep %} {% step %} ### 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). {% endstep %} {% step %} ### 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) {% endstep %} {% step %} ### 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). {% endstep %} {% step %} ### 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. {% endstep %} {% endstepper %} *** ## 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](https://forum.adalo.com/) to ask questions or share what you've built. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/chat-suite/chat-message-list.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.