# Conversation List

An Apple Messages-style inbox that lists all of a user's conversations. It automatically detects which participant is the "other person" based on who's logged in, and shows their name and avatar without any conditional logic on your end.

***

## Before You Begin

* You need a **Conversations** collection with fields for User 1 ID, User 1 Name, User 1 Image URL, User 2 ID, User 2 Name, and User 2 Image URL.
* For group conversations, your collection should also have a **Group Name** and **Group Image Property** field.
* Each conversation row can show two lines of text below the participant name — map these to any fields you like (e.g., last message preview and timestamp).

***

## Getting Started

{% stepper %}
{% step %}

### Add the Conversation List

Add the **Conversation List** to your conversations screen.
{% endstep %}

{% step %}

### Choose your Conversations collection

In the **Conversations** section, choose your Conversations collection. Filter it to show only conversations the logged-in user is part of (e.g., where User 1 ID = Logged In User > ID **or** User 2 ID = Logged In User > ID or Conversation > Users).
{% endstep %}

{% step %}

### Set the Logged In User ID

Set **Logged In User ID** to **Logged In User > ID** using Magic Text — the component uses this to figure out who the "other person" is on each row.
{% endstep %}

{% step %}

### Map your Conversation Fields

Open **Conversation Fields** and map your data:

* **User1 ID, User1 Name, User1 Image URL** → your User 1 fields
* **User2 ID, User2 Name, User2 Image URL** → your User 2 fields
* **Text Line 1** → typically a last message preview
* **Text Line 2** → typically a timestamp or other metadata
* **Group Name / Group Image URL** → for group conversations (when set, these override the user name logic)
* **Read By User IDs** → a comma-separated text field of user IDs who have read the conversation — if the logged-in user's ID is **not** in this string, an unread badge appears on the row
  {% endstep %}

{% step %}

### Set up Click Actions

Set up **Click Actions** on the conversation row to navigate to the conversation screen — pass the conversation ID so the next screen knows which conversation to load.
{% endstep %}
{% endstepper %}

***

## Settings

### Name Style

Controls the font size, weight, and color of the participant's name on each row.

### Line 1 Style / Line 2 Style

Independently control the font size and color of each text line below the name. Line 1 is typically used for a message preview; Line 2 for a timestamp or other detail.

### Avatar Style

* **Avatar Size** — The diameter of the participant avatar (28–80, default: 48).
* **Avatar Fallback Color** — Background color shown when no avatar image is available.
* **Avatar Initials Color** — Color of the initials shown as a fallback.

### Row Style

* **Row Background Color** — Background of each conversation row.
* **Selected Row Color** — Tint applied when a row is pressed (brief tap feedback).
* **Divider Color / Show Divider** — Hairline separators between rows.
* **Row Height** — Height of each conversation row (50–100, default: 72).
* **Unread Badge Color** — The dot color for unread conversations.

***

## How Participant Detection Works

The component compares **User 1 ID** to **Logged In User ID**. If they match, it shows User 2's name and avatar. If they don't match, it shows User 1's name and avatar. For group conversations, if **Group Name** is set, it always shows that instead.

***

## Tips

* Sort your Conversations collection by a **Last Message At** timestamp field (descending) so the most recent conversations appear at the top — just like a real inbox.
* Store a **participant\_key** field on each conversation (a sorted, comma-separated string of participant IDs). Filter on this with the [**Conversation Action Button**](/component-basics/marketplace-components/chat-suite/start-conversation/conversation-action-button.md) to prevent duplicate conversations.
* The **Read By User IDs** field is a simple text field — when you send a message, append the sender's ID to this string. When other users open the conversation, append their ID too. Clear it when a new message arrives.
* Use the **Display Name** and **Display Image URL** Magic Text outputs to pre-populate the **Chat Header Bar** on the conversation screen.

***

## 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/conversation-list.md?ask=<question>
```

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.