How to inject and render custom data in the Conversation List

[elliot-choic]

Versions

Summary

This guide explains how to inject a custom data at the conversation list and customize its appearance by creating a custom repository, adapter, and view.

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Steps to Customize the Header

This guide demonstrates how to insert custom data at the top of the conversation list.

1. Extend the Repository to Add Custom Items

To include custom data (e.g., a system notice, a pinned info card, or a static banner), override the DefaultConversationListRepository and manually prepend the item to the list before rendering.

class CustomConversationListRepository(
    aiAgentId: String
) : DefaultConversationListRepository(aiAgentId) {

    private val customItem: Any // Insert your desired custom data type here

    override suspend fun loadInitial() {
        // If you need to load any data, do so before calling super.loadInitial()
        super.loadInitial()
    }

    override val currentList: List<ConversationListItem>
        get() {
            val list = super.currentList.toMutableList()
           // In this sample, the custom data is inserted at index 0 (top of the list).
           // If you want to customize the list (e.g., insert at a different position, filter, or sort),
           // this is the place to do it.
            list.add(0, customHeaderItem)
            return list
        }
}

Then, register the repository:

AIAgentRepositoryProviders.conversationList =
ConversationListRepositoryProvider { aiAgentId ->
CustomConversationListRepository(aiAgentId)
}

2. Customize the Adapter to Handle Custom Items

To render your custom item, override getItemViewType() and onCreateViewHolder() in your adapter:

class CustomConversationListAdapter(...) : ConversationListAdapter(...) {

    override fun getItemViewType(position: Int): Int {
        return when (val item = getItem(position)) {
            is CustomHeaderItem -> CustomConversationListRepository.VIEW_TYPE_CUSTOM_HEADER
            is ConversationListItem.ConversationItem -> VIEW_TYPE_CONVERSATION
            else -> super.getItemViewType(position)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ConversationViewHolder {
        when (viewType) {
            VIEW_TYPE_CONVERSATION -> {
                return super.onCreateViewHolder(parent, viewType)
            }
            VIEW_TYPE_BROADCAST -> {
                // Create and return a custom ViewHolder for rendering broadcast or custom-type items
                return CustomConversationViewHolder(...)
            }
        }
    }

    companion object {
        const val VIEW_TYPE_CONVERSATION_DATA = 0
        const val VIEW_TYPE_CUSTOM_DATA = 1
    }
}

Register your adapter:

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

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response