How to Customize the List Item View in the Conversation List

[elliot-choic]

Versions

Summary

This guide explains how to customize the item view inside the ConversationList, allowing you to apply your own layout and data

Guide & Snippet

iOS

How to Customize the List Item View

You can customize the layout of conversation list items by subclassing SBAConversationCell and overriding layoutBody().

Step 1: Create a Custom Cell

import SendbirdAIAgentMessenger
import UIKit

class CustomConversationCell: SBAConversationCell {
    // Override layout to rearrange elements
    // Default: [Profile] [Title/Date/Status] [Badge]
    // Custom: [Badge] [Profile] [Title/Date/Status]
    override func layoutBody(with configuration: SBABaseConversationCellParams) -> UIView {
        SBALinearLayout.zStack { container in
            // Main content layout
            container.add(SBALinearLayout.hStack(alignment: .center) {
                // Move badge to left
                self.layoutRightItems(with: configuration)
                // Profile image
                self.layoutLeftItems(with: configuration)
                // Text content
                self.layoutContents(with: configuration)
            }, offset: .init(top: 12, left: 16, bottom: 12, right: 16))

            // Divider
            container.add(
                self.divideView,
                vertical: .bottom,
                offset: .init(top: 0, left: 76, bottom: 0, right: 0)
            )
        }
    }
}

Step 2: Register the Custom Cell

SBAModuleSet.ConversationListModule.ListItemView = CustomConversationCell.self

Notes:

• Use layoutLeftItems(), layoutRightItems(), layoutContents() to reorder elements
• SBALinearLayout.zStack allows layering views (e.g., divider at bottom)
• Adjust offsets and padding as needed

Android

Steps to Customize Conversation List Items

Step 1: Create a Custom Layout for the List Item

Define your desired UI layout in an XML file (e.g., view_custom_conversation_list_item.xml).
This layout will replace the default conversation list item.

Step 2: Create a Custom ViewHolder

Extend ConversationViewHolder and bind your custom layout using ViewBinding.
Handle UI rendering and click events within this ViewHolder.

class CustomConversationViewHolder(...) : ConversationViewHolder(...) {
    override fun bind(conversationListItem: ConversationListItem) {
        // Bind your data here
    }
}

Step 3: Extend ConversationListAdapter and Use the Custom ViewHolder

Override onCreateViewHolder to return your custom ViewHolder.

class CustomConversationListAdapter(
    private val conversationListUIParams: ConversationListUIParams,
    private val onItemClickListener: OnItemClickListener<ConversationListItem>
) : ConversationListAdapter(conversationListUIParams, onItemClickListener) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ConversationViewHolder {
        return  CustomConversationViewHolder(...)
    }
}

Step 4: Register the Custom Adapter with AIAgentAdapterProviders

Finally, register your adapter before rendering the Conversation screen:

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

React

How to customize the List Item View in the Conversation List

You can customize the conversation list item appearance by creating a custom template for ConversationListItemLayout.

Step 1: Create a Custom List Item Component

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

const CustomListItem = (props: ConversationListItemProps) => {
  const { channel, onClick } = props;
  const lastMessage = channel.lastMessage?.message || 'No messages yet';
  const unreadCount = channel.unreadMessageCount;

  return (
    <div
      style={{
        display: 'flex',
        padding: '16px',
        borderBottom: '1px solid #E5E7EB',
        cursor: 'pointer',
        backgroundColor: 'white',
      }}
      onClick={() => onClick?.()}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = '#F9FAFB';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = 'white';
      }}
    >

      {/* Content */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          color: '#111827',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap'
        }}>
          {lastMessage}
        </div>

        <div style={{
          fontSize: '13px',
          color: '#6B7280',
          marginTop: '4px'
        }}>
          {new Date(channel.createdAt).toLocaleDateString()}
        </div>
      </div>

      {/* Badge */}
      {unreadCount > 0 && (
        <div style={{
          height: '20px',
          borderRadius: '10px',
          backgroundColor: '#EF4444',
          color: 'white',
        }}>
          {unreadCount > 99 ? '99+' : unreadCount}
        </div>
      )}
    </div>
  );
};

Step 2: Register the Custom Component

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

function App() {
  return (
    <AgentProviderContainer
      applicationId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <ConversationListItemLayout.Template template={CustomListItem} />

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

Notes:

• The default list item height is 72px
• List items display: channel cover, last message, timestamp, and unread badge
• You can customize layout, colors, fonts, and add additional information
• Consider accessibility when customizing (focus states, keyboard navigation, etc.)

Reference

No response

Screenshots

No response