# Chat Conversation Info Show a scrollable list of everyone in a conversation — with inline group editing for admins, a real-time search bar, and swipe-to-remove or leave actions for each member. *** ## Before You Begin * You need a **Conversations** collection and a **Members** (or equivalent join) collection that links users to conversations. * Your Conversations collection should have fields for **Group Name** and **Group Image URL** (text field, not image type). * Your Members collection should include the user's ID, name, avatar URL, and any subtitle fields you want to display. *** ## Getting Started {% stepper %} {% step %} ### Add the component Add the **Chat Group Info** component to a screen — typically a "Conversation Info" or "Group Details" screen. {% endstep %} {% step %} ### Choose the members collection In the **Members** section, choose the collection that holds your conversation participants. {% endstep %} {% step %} ### Map the member template fields Open the **Member Template** section and map your data fields: * **Member Name** → the user's name field * **Subtitle** → any secondary line (e.g., email, role, or username) * **Avatar Image** → the user's profile photo * **Member ID** → the user's ID — this is passed to remove/leave actions as an argument {% endstep %} {% endstepper %} *** ## Settings ### Conversation Settings These fields tell the component about the current conversation and who is logged in. * **Logged In User ID** — Set this to **Logged In User > ID** using Magic Text. The component uses this to determine whether the current user is the admin. * **Admin / Owner User ID** — Bind to the conversation's owner or admin ID field. When this matches the logged-in user's ID, admin controls appear. * **Group Name** — Bind to the conversation's name field. Shown as the group title when there are more than 2 members. * **Group Image** — Bind to the conversation's image URL field. Use a **text** field here, not an image field — Adalo can crash when an image-type field is null. ### Header * **Section Title** — The label shown above the member list. Defaults to "Members." * **Show Member Count** — Toggle on to display the number of members next to the section title. * **Show Dividers** — Toggle on to show hairline separators between member rows. * **Show Search Bar** — Toggle on to add a real-time search field that filters members by name. * **Search Placeholder** — The placeholder text shown in the search bar when empty. ### Member Style * **Show Avatars** — Show or hide the avatar image on each row. * **Avatar Size** — The diameter of each avatar in pixels (28–64, default: 44). * **Show Subtitle** — Show or hide the secondary line of text on each row. * **Show Line 3** — Toggle on a third line of text per row if your data supports it. * **Row Height** — The height of each member row in pixels (48–96, default: 64). * **Remove Button Label** — The label on the remove button shown to admins. Defaults to "Remove." * **Leave Button Label** — The label on the leave button shown to non-admin members. Defaults to "Leave." ### Colors Customize the background, text, avatar fallback, dividers, remove/leave buttons, and search bar to match your app's style. *** ## Actions Set these up in the **Actions** section. * **Row Click Actions** — Fires when a member row is tapped. Use this to navigate to the user's profile. * **On Remove Member** — Fires when an admin taps Remove on a member row. Passes **Removed Member ID** and **Removed Member Name** as Magic Text — use these to delete the membership record in your database. * **On Leave Group** — Fires when a non-admin taps their own Leave button. Use this to delete the current user's membership record. * **On Group Image Tap** — Fires when the group image is tapped (read-only, non-admin). Passes the current **Group Image URL** as Magic Text. * **On Save Group Name** — Fires when an admin saves a new group name inline. Passes **New Group Name** as Magic Text — update your conversation's name field with this value. * **On Save Group Image** — Fires when an admin picks a new group image. Passes the selected **Group Image** — use this to update the conversation's image field. *** ## Admin vs. Member View The component automatically shows different UI based on whether the logged-in user is the admin. **Admin view (logged-in user ID matches Admin/Owner User ID):** * A large group image and editable group name appear at the top (when there are more than 2 members) * Tapping the group image opens the device photo library to pick a new image * Tapping the pencil icon next to the group name opens an inline text editor with Save and Cancel * Each member row shows a **Remove** button **Member view (everyone else):** * The group header is read-only * Each member row shows a **Leave** button *** ## Tips * For 1-on-1 conversations (2 members), the group header is hidden automatically — only the member list shows. * The search bar filters locally in real time — no extra database calls needed. * Always use a **text** field (not image type) for Group Image — binding an image-type field that can be null will cause an error in Adalo. * Connect **On Save Group Name** to an **Update** action that writes the Magic Text argument to your conversation's name field. * Connect **On Save Group Image** to an **Update** action that writes the image argument to your conversation's image field. *** ## 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-conversation-info.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.