How to insert a custom view into the Conversation List

[elliot-choic]

Versions

Summary

This guide demonstrates how to insert a custom view between the conversation list header and the list itself. As a basic example, we'll add a 100-pixel tall transparent space using a custom component. This approach is useful for injecting banners, padding, dividers, or other custom content above the channel list.

Guide & Snippet

iOS

How to Insert a Custom View into the Conversation List

You can insert a custom view (like a banner) between the header and list by subclassing SBAConversationListModule.Header and overriding layoutBody().

Step 1: Create a Custom Header with Banner View

import SendbirdAIAgentMessenger
import UIKit

class CustomConversationListHeader: SBAConversationListModule.Header {
    private lazy var customBannerView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.2)
        view.translatesAutoresizingMaskIntoConstraints = false

        let label = UILabel()
        label.text = "📢 Custom Banner View"
        label.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
        label.textColor = .systemOrange
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(label)

        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            view.heightAnchor.constraint(equalToConstant: 60)
        ])

        return view
    }()

    override func layoutBody() -> UIView {
        return SBALinearLayout.vStack {
            self.customBannerView  // Custom banner view
        }
    }
}

Step 2: Register the Custom Header

SBAModuleSet.ConversationListModule.HeaderComponent = CustomConversationListHeader.self

Notes:

• This approach replaces the default header with your custom view
• Use SBALinearLayout.vStack to stack multiple views vertically
• You can add multiple custom views in the layout

Android

Steps to insert a custom view into the Conversation List screen

Step 1: Create a Custom ViewComponent
Define a reusable ViewComponent that represents the custom content (in this case, an empty transparent view).

class CustomConversationListEmptyComponent : ViewComponent {
    override fun onCreateView(
        context: Context,
        inflater: LayoutInflater,
        parent: ViewGroup,
        args: Bundle?
    ): View {
        return View(context).apply {
            id = View.generateViewId()
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                100  // 100px height
            )
            setBackgroundResource(android.R.color.transparent) // Transparent background
        }
    }
}

Step 2: Override the ConversationListModule to Insert the View
Extend ConversationListModule and override onCreateContentView() to control how the conversation screen layout is composed.

class CustomConversationListModule(
    context: Context,
    currentTheme: MessengerTheme,
    currentThemeMode: MessengerThemeMode,
    settings: MessengerSettings?,
    args: Bundle,
) : ConversationListModule(context, currentTheme, currentThemeMode, settings, args) {

    override fun onCreateContentView(
        context: Context,
        inflater: LayoutInflater,
        args: Bundle?
    ): View {
        return LinearLayout(context).apply {
            orientation = LinearLayout.VERTICAL
            layoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT
            )

            addView(headerComponent.onCreateView(context, inflater, this, args))

            // Insert custom empty view here
            addView(CustomConversationListEmptyComponent().onCreateView(context, inflater, this, args))

            addView(FrameLayout(context).apply {
                layoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    0, 1f
                )
                addView(listComponent.onCreateView(context, inflater, this, args))
                addView(statusFrameComponent.onCreateView(context, inflater, this, args))
            })

            addView(footerComponent.onCreateView(context, inflater, this, args))
        }
    }
}

Step 3: Register the Custom Module
Finally, register your custom module so it will be used when launching the conversation list.

AIAgentModuleProviders.conversationList =
    ConversationListModuleProvider { context, currentTheme, currentThemeMode, settings, args ->
        CustomConversationListModule(context, currentTheme, currentThemeMode, settings, args)
    }

React

How to insert a custom view into the Conversation List

You can insert custom views (like banners, separators, or information cards) into the conversation list by wrapping the list with custom components or by customizing the list layout.

Method 1: Add Custom Views Around the List

Insert custom content before or after the conversation list:

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

function App() {
  return (
    <AgentProviderContainer
      applicationId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        {/* Custom banner above the list */}
        <div style={{ padding: '16px', backgroundColor: '#EEF2FF', textAlign: 'center' }}>
          <p>💬 Welcome to AI Support</p>
        </div>

        {/* Conversation List */}
        <ConversationList
          onOpenConversationView={(channelUrl, status) => {
            console.log('Opening conversation:', channelUrl);
          }}
        />

        {/* Custom footer info */}
        <div style={{ padding: '12px', backgroundColor: '#F9FAFB', textAlign: 'center' }}>
          Average response time: 2 minutes
        </div>
      </div>
    </AgentProviderContainer>
  );
}

Method 2: Custom Body with Injected Content

Step 1: Create a Custom Body Component

Create a custom body component that includes custom views:

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

const CustomListBody = (): ReactNode => {
  const { channels, onClickChannel } = useConversationListContext();

  return (
    <div style={{ flex: 1, overflowY: 'auto' }}>
      {/* Custom promotional banner */}
      <div style={{ margin: '16px', padding: '16px', backgroundColor: '#F0FDF4', borderRadius: '8px' }}>
        <h4>🎉 New Feature Available!</h4>
        <p>Try our new AI-powered quick replies feature.</p>
      </div>

      {/* Separator */}
      <div style={{ margin: '16px', textAlign: 'center', borderTop: '1px solid #E5E7EB' }}>
        <span style={{ padding: '0 12px', backgroundColor: 'white' }}>CONVERSATIONS</span>
      </div>

      {/* Render conversation list items */}
      {channels.map((channel) => (
        <div
          key={channel.url}
          onClick={() => onClickChannel(channel)}
          style={{ padding: '16px', borderBottom: '1px solid #E5E7EB', cursor: 'pointer' }}
        >
          <div>{channel.lastMessage?.message || 'No messages'}</div>
        </div>
      ))}

      {/* Custom empty state */}
      {channels.length === 0 && (
        <div style={{ padding: '48px 24px', textAlign: 'center' }}>
          <div style={{ fontSize: '48px' }}>💬</div>
          <h3>No conversations yet</h3>
          <p>Start a new conversation with our AI agent</p>
        </div>
      )}
    </div>
  );
};

Step 2: Register the Custom Body

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

function App() {
  return (
    <AgentProviderContainer
      applicationId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <ConversationListLayout.Template>
        <ConversationListLayout.Body component={CustomListBody} />
      </ConversationListLayout.Template>

      <ConversationList />
    </AgentProviderContainer>
  );
}

Notes:

• Custom views can include banners, promotions, separators, empty states, etc.
• You can conditionally render custom views based on application state

Reference

No response

Screenshots

No response