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

How to Add a Left Button to the Conversation List Header

You can add a custom button to the left side of the header by subclassing SBAConversationListModule.Header and overriding layoutLeftItems(). To handle button taps in the ViewController, use the delegate event system.

Step 1: Create a Custom Header with Left Button

import SendbirdAIAgentMessenger
import UIKit

class CustomConversationListHeader: SBAConversationListModule.Header {
    // Create left menu button
    lazy var leftMenuButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("☰", for: .normal)
        button.addTarget(self, action: #selector(onMenuButtonTapped), for: .touchUpInside)
        return button
    }()

    // Override to add button to left area
    override func layoutLeftItems() -> UIView? {
        return SBALinearLayout.hStack(spacing: 8, alignment: .center) {
            self.leftMenuButton
        }
    }

    // Send custom event to ViewController
    @objc func onMenuButtonTapped() {
        self.delegate(with: .custom(name: "custom_close_action", data: nil))
    }
}

Step 2: Create a ViewController to Handle the Event

class CustomConversationListViewController: SBAConversationListViewController {
    override func conversationListModule(
        _ headerComponent: SBAConversationListModule.Header,
        didReceiveEvent event: SBAConversationListModule.Header.DelegateEvent
    ) {
        switch event {
        case .custom(let name, let data):
            if name == "custom_close_action" {
                // Handle the button tap
                print("Menu button tapped")
            }
        default:
            super.conversationListModule(headerComponent, didReceiveEvent: event)
        }
    }
}

Step 3: Register Both Custom Components

// In AppDelegate or before presenting the UI
SBAModuleSet.ConversationListModule.HeaderComponent = CustomConversationListHeader.self
SBAViewControllerSet.ConversationListViewController = CustomConversationListViewController.self

Notes:

• Use layoutLeftItems() for left-side buttons, layoutRightItems() for right-side buttons
• Custom events can pass data: .custom(name: "event_name", data: yourData)
• Always call super.conversationListModule(...) for unhandled events

Android

Steps to Customize the Header

Step 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(...).

Step 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)
            }
        }
    }
}

Step 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
            )
        )
    }

React

How to Add a Left Button to the Conversation List Header

• Description

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

You can add a custom button to the left side of the header by using ConversationListHeaderLayout and overriding the StartArea component.

Step 1: Create a Custom Start Area Component

Create a custom component for the left side of the header:

import { ConversationListHeaderLayout } from '@sendbird/ai-agent-messenger-react';

const CustomStartArea = () => {
  const handleMenuClick = () => {
    console.log('Menu button clicked');
    // Handle menu button click
  };

  return (
    <button onClick={handleMenuClick} style={{ padding: '8px' }}>
      {'☰'}
    </button>
  );
};

Step 2: Apply Customization

Wrap your customizations within AgentProviderContainer:

import {
  AgentProviderContainer,
  ConversationList,
  ConversationListHeaderLayout,
} from '@sendbird/ai-agent-messenger-react';

export const App = () => {
  return (
    <AgentProviderContainer
      appId={'YOUR_APP_ID'}
      aiAgentId={'YOUR_AI_AGENT_ID'}
      entryStyle={{ width: '100%', height: '100%' }}
    >
      <ConversationListHeaderLayout.StartArea component={CustomStartArea} />

      <ConversationList />
    </AgentProviderContainer>
  );
};

Available Default Components:

• StartArea - Left section (empty by default)
• TitleArea - Center section (contains Title by default)
• EndArea - Right section (contains CloseButton by default)
• Title - Conversation list title
• CloseButton - Close widget button

Notes:

• entryStyle makes the AgentProviderContainer entry element fill the host layout instead of using its default fit-content size.
• If the list is rendered inside your own flex container, keep the container height explicit so the list body can scroll.

Reference

No response

Screenshots

No response