How to add a left button to the conversation list header

[elliot-choic]

Versions

Summary

This guide explains how to customize the conversation list header to add a left-side button by creating a custom view

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Steps to Customize the Header

1. Create a Custom View

Create a view class (e.g., CustomConversationListHeaderView) that:

• Displays a title and a left button.
• Applies theme values via applyTheme(...).
• Renders text via draw(...).
• Provides an interface like setLeftButtonClickListener(...).

2. Create a Custom Component

Create a component class that extends ConversationListHeaderComponent (e.g., CustomConversationListHeaderComponent) and override onCreateView(...) to return your custom view.

class CustomConversationListHeaderComponent(
    context: Context,
    private val theme: MessengerTheme,
    private val themeMode: MessengerThemeMode,
    settings: MessengerSettings?,
    args: Bundle
) : ConversationListHeaderComponent(
    context,
    theme,
    themeMode,
    settings,
    args
) {
    override fun onCreateView(context: Context, inflater: LayoutInflater, parent: ViewGroup, args: Bundle?): View {
        // return the custom header view here
        return CustomConversationListHeaderView(context).apply {
            applyTheme(theme.conversationList.header)
            draw(context.getString(params.titleResId))
            setLeftButtonClickListener {
                  // Handle click (e.g., pop backstack)
            }
        }
    }
}

2. Register the Component via AIAgentModuleProviders

AIAgentModuleProviders.conversationList =
    ConversationListModuleProvider { context, theme, themeMode, settings, args ->
        ConversationListModule(
            context,
            theme,
            themeMode,
            settings,
            args
            headerComponent = CustomConversationListHeaderComponent(
                context,
                theme,
                themeMode,
                settings,
                args
            )
        )
    }

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response