How to Customize the List Item View in the Conversation List

[elliot-choic]

Versions

Summary

This guide explains how to customize the item view inside the ConversationList, allowing you to apply your own layout and data

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Steps to Customize Conversation List Items

1. Create a Custom Layout for the List Item

Define your desired UI layout in an XML file (e.g., view_custom_conversation_list_item.xml).
This layout will replace the default conversation list item.

2. Create a Custom ViewHolder

Extend ConversationViewHolder and bind your custom layout using ViewBinding.
Handle UI rendering and click events within this ViewHolder.

class CustomConversationViewHolder(...) : ConversationViewHolder(...) {
    override fun bind(conversationListItem: ConversationListItem) {
        // Bind your data here
    }
}

3. Extend ConversationListAdapter and Use the Custom ViewHolder

Override onCreateViewHolder to return your custom ViewHolder.

class CustomConversationListAdapter(
    private val conversationListUIParams: ConversationListUIParams,
    private val onItemClickListener: OnItemClickListener<ConversationListItem>
) : ConversationListAdapter(conversationListUIParams, onItemClickListener) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ConversationViewHolder {
        return  CustomConversationViewHolder(...)
    }
}

4. Register the Custom Adapter with AIAgentAdapterProviders

Finally, register your adapter before rendering the Conversation screen:

AIAgentAdapterProviders.conversationList =
    ConversationListAdapterProvider { uiParams, onItemClickListener ->
        CustomConversationListAdapter(uiParams, onItemClickListener)
    }

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response