How to customize the typing indicator in the conversation

[elliot-choic]

Versions

Summary

This guide explains how to customize the appearance and behavior of the typing indicator shown at the bottom of the conversation screen.

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Steps to Customize the Typing Indicator

1. Create a custom view that represents the typing indicator

You should create a view (CustomTyingIndicator) that visually represents the typing state.
This view will be used in your custom ViewHolder.

val customTypingView = CustomTyingIndicator(context)

2. Create a ViewHolder that wraps the custom view

Extend MessageViewHolder and bind your custom view for the typing indicator.

class CustomTypingIndicatorViewHolder(
    layout: View,
    messageListUIParams: ConversationMessageListUIParams
) : MessageViewHolder(layout, messageListUIParams) {
    override fun bind(channel: GroupChannel, message: BaseMessage, messageUIParams: MessageUIParams) {
        // Optional: implement custom binding logic if needed
    }
}

3. Extend ConversationMessageListAdapter and return your custom ViewHolder

Override onCreateViewHolder to detect VIEW_TYPE_TYPING_INDICATOR and return the custom ViewHolder.

class CustomConversationAdapter(
    channel: GroupChannel,
    private val messageListUIParams: ConversationMessageListUIParams,
    containerGenerator: MessageContainerGenerator
) : ConversationMessageListAdapter(channel, messageListUIParams, containerGenerator) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MessageViewHolder {
        if (viewType == MessageType.VIEW_TYPE_TYPING_INDICATOR.value) {
            return CustomTypingIndicatorViewHolder(
                CustomTyingIndicator(parent.context),
                messageListUIParams
            )
        }
        return super.onCreateViewHolder(parent, viewType)
    }
}

4. Register your custom adapter using AIAgentAdapterProviders

Finally, inject the adapter into your AI Agent configuration:

AIAgentAdapterProviders.conversation =
    ConversationAdapterProvider { channel, uiParams, containerGenerator ->
        CustomConversationAdapter(channel, uiParams, containerGenerator)
    }

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response