How to customize the suggested replies message UI

[sendbird-sdk-deployment]

Versions

Summary

This guide explains how to replace the default suggested replies UI in the conversation message with your own layout, while keeping the rest of the message UI intact.

Guide & Snippet

Android

How to customize the Suggested Replies UI in the conversation message

By default, the SDK renders suggested replies as right-aligned rounded chips outlined with the primary color. You can replace them with your own layout by subclassing OtherMessageContainer and overriding only drawSuggestedReplies(...), then registering a custom MessageContainerGenerator.

The example below renders suggested replies as full-width, left-aligned "menu rows" with a trailing chevron. Everything else (profile, nickname, timestamp, template, feedback) keeps the default behavior inherited from OtherMessageContainer.

Step 1: Subclass OtherMessageContainer and override drawSuggestedReplies

OtherMessageContainer is open and so is drawSuggestedReplies, so you can override just the suggested replies rendering.

The parent keeps onSuggestedRepliesClickListener in a private field, so capture your own reference from eventListeners inside initialize(...) to forward clicks. The SDK hands you a SuggestedRepliesView (a FrameLayout); you can reuse it as a plain container by clearing its default content and adding your own views.

class CustomOtherMessageContainer(context: Context) : OtherMessageContainer(context) {

    // The parent keeps onSuggestedRepliesClickListener private, so capture our own
    // reference here in order to forward clicks from the custom rows.
    private var suggestedRepliesClickListener: OnMessageClickListener<String>? = null

    override fun initialize(
        contentView: View,
        eventListeners: MessageEventListeners,
        messageListUIParams: ConversationMessageListUIParams,
        messageType: MessageType
    ) {
        super.initialize(contentView, eventListeners, messageListUIParams, messageType)
        suggestedRepliesClickListener = eventListeners.onSuggestedRepliesClickListener
    }

    override fun drawSuggestedReplies(
        suggestedRepliesView: SuggestedRepliesView,
        message: BaseMessage,
        messageListUIParams: ConversationMessageListUIParams
    ) {
        val replies = message.suggestedReplies
        if (replies.isEmpty()) {
            suggestedRepliesView.visibility = GONE
            return
        }

        val context = suggestedRepliesView.context
        suggestedRepliesView.visibility = VISIBLE
        // Reuse the SDK-provided host view as a plain container: drop its default
        // RecyclerView content and render our own rows instead.
        suggestedRepliesView.removeAllViews()

        val list = LinearLayout(context).apply {
            orientation = LinearLayout.VERTICAL
            layoutParams = FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            ).apply {
                topMargin = dp(context, 12)
                marginEnd = dp(context, 12)
            }
            setPaddingRelative(dp(context, 12), 0, dp(context, 12), dp(context, 12))
        }

        replies.forEachIndexed { index, reply ->
            val row = createReplyRow(context, reply).apply {
                setOnClickListener { view ->
                    suggestedRepliesView.visibility = GONE
                    suggestedRepliesClickListener?.onItemClickWithPosition(
                        view,
                        reply,
                        index,
                        MessageClickTarget.SUGGESTED_REPLIES
                    )
                }
            }
            (row.layoutParams as LinearLayout.LayoutParams).topMargin =
                if (index == 0) 0 else dp(context, 8)
            list.addView(row)
        }

        suggestedRepliesView.addView(list)
    }

    private fun createReplyRow(context: Context, reply: String): View {
        val row = LinearLayout(context).apply {
            orientation = LinearLayout.HORIZONTAL
            gravity = Gravity.CENTER_VERTICAL
            background = createRowBackground(context)
            val padH = dp(context, 20)
            val padV = dp(context, 16)
            setPaddingRelative(padH, padV, padH, padV)
            isClickable = true
            isFocusable = true
            contentDescription = reply
            layoutParams = LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )
        }

        val label = TextView(context).apply {
            text = reply
            setTextColor(TEXT_COLOR)
            textSize = 15f
            layoutParams = LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f)
        }

        val chevron = ImageView(context).apply {
            setImageResource(R.drawable.sample_ic_chevron_right)
            layoutParams = LinearLayout.LayoutParams(
                dp(context, 20),
                dp(context, 20)
            ).apply { marginStart = dp(context, 8) }
        }

        row.addView(label)
        row.addView(chevron)
        return row
    }

    private fun createRowBackground(context: Context): Drawable {
        val radius = dp(context, 16).toFloat()
        val content = GradientDrawable().apply {
            cornerRadius = radius
            setColor(ROW_BACKGROUND_COLOR)
        }
        val mask = GradientDrawable().apply {
            cornerRadius = radius
            setColor(Color.WHITE)
        }
        return RippleDrawable(ColorStateList.valueOf(RIPPLE_COLOR), content, mask)
    }

    private fun dp(context: Context, value: Int): Int =
        (value * context.resources.displayMetrics.density).toInt()

    private companion object {
        const val ROW_BACKGROUND_COLOR = 0xFFF2F3F5.toInt()
        const val TEXT_COLOR = 0xFF1F1F1F.toInt()
        const val RIPPLE_COLOR = 0x33000000
    }
}

The chevron above uses a small vector drawable. Add it to your app resources (e.g. res/drawable/sample_ic_chevron_right.xml):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#8A8A8E"
        android:pathData="M8.59,16.59L13.17,12 8.59,7.41 10,6l6,6 -6,6z" />
</vector>

Step 2: Provide a custom MessageContainerGenerator

Extend DefaultMessageContainerGenerator and return your container for the LEFT (bot) side only, keeping the defaults for RIGHT (my) and PLAIN.

class CustomMessageContainerGenerator : DefaultMessageContainerGenerator() {
    override fun generate(context: Context, containerType: MessageContainerType): MessageContainerContract {
        return when (containerType) {
            MessageContainerType.LEFT -> CustomOtherMessageContainer(context)
            else -> super.generate(context, containerType)
        }
    }
}

Step 3: Register the generator with AIAgentAdapterProviders.conversation

Provide the conversation adapter yourself and pass your custom generator into ConversationMessageListAdapter. (The third parameter is the default generator supplied by the SDK; ignore it and pass your own.)

AIAgentAdapterProviders.conversation =
    ConversationAdapterProvider { channel, uiParams, _ ->
        ConversationMessageListAdapter(channel, uiParams, CustomMessageContainerGenerator())
    }

Important: This registration must be done before calling MessengerLauncher.attach() or launching MessengerActivity.
The provider must be ready before the screen is created in order for the custom container to take effect.

Notes:

• The click is forwarded through onSuggestedRepliesClickListener exactly like the default, so tapping a reply hides the list and sends the reply.
• Tune the look by editing the companion object colors and the paddings/corner radius/text size in createReplyRow / createRowBackground.
• The example uses fixed colors. If you support dark mode, derive the row background/text from the theme (for example messageListUIParams.messageListTheme.backgroundColor and messageListUIParams.aiAgentTheme.primaryColor) instead of hardcoded values.
• Suggested replies are populated only after the response completes, so checking for an empty list is enough to hide the view.

iOS

How to customize the Suggested Replies UI in the conversation message

By default the SDK renders suggested replies as right-aligned rounded chips. Subclass SBASuggestedReplyView, build your own layout from options, and register the subclass on SBAConversationModule.List.Cell.SuggestedReplyView.

The example renders them as full-width menu rows with a trailing chevron. Everything else — profile, nickname, timestamp, template, feedback — keeps the default behavior.

Step 1: Subclass SBASuggestedReplyView

import SendbirdAIAgentMessenger
import UIKit

final class MenuSuggestedReplyView: SBASuggestedReplyView {

    struct Constants {
        static let stackViewTop: CGFloat = 12
        static let stackViewSide: CGFloat = 12
        static let rowSpacing: CGFloat = 8
        static let rowCornerRadius: CGFloat = 16
        static let rowPaddingHorizontal: CGFloat = 20
        static let rowPaddingVertical: CGFloat = 16
        static let rowContentSpacing: CGFloat = 8
        static let chevronSize: CGFloat = 16
        static let titleFont: UIFont = .systemFont(ofSize: 15)
    }

    var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.spacing = Constants.rowSpacing
        return stackView
    }()

    var rowViews: [UIView] = []

    // Runs on init with `options` still empty, and again on every configure.
    override func setupViews() {
        super.setupViews()

        if self.stackView.superview == nil {
            self.addSubview(self.stackView)
        }

        self.updateRowViews()
    }

    // Also re-runs on every configure, so activate each constraint only once.
    override func setupLayouts() {
        super.setupLayouts()

        // Child-to-parent constraints are owned by the parent, so the guard looks there.
        guard self.constraints.contains(where: { $0.firstItem === self.stackView }) == false else {
            return
        }

        self.stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.stackView.leadingAnchor.constraint(
                equalTo: self.leadingAnchor,
                constant: Constants.stackViewSide
            ),
            self.stackView.trailingAnchor.constraint(
                equalTo: self.trailingAnchor,
                constant: -Constants.stackViewSide
            ),
            self.stackView.topAnchor.constraint(
                equalTo: self.topAnchor,
                constant: Constants.stackViewTop
            ),
            self.stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
        ])
    }

    private func updateRowViews() {
        self.rowViews.forEach { $0.removeFromSuperview() }
        self.rowViews = self.options.map { self.createRowView(with: $0) }
        self.rowViews.forEach { self.stackView.addArrangedSubview($0) }

        // The message cell fixes its VoiceOver element list and reads this for the replies part.
        // `nil` falls back to this view; an empty array would make the rows unreachable.
        self.accessibilityElements = self.rowViews.isEmpty ? nil : self.rowViews
    }

    private func createRowView(with option: String) -> UIView {
        let titleLabel = UILabel()
        titleLabel.text = option
        titleLabel.font = Constants.titleFont
        titleLabel.textColor = .label
        titleLabel.numberOfLines = 0

        let chevronView = UIImageView(image: UIImage(systemName: "chevron.right"))
        chevronView.tintColor = .tertiaryLabel
        chevronView.contentMode = .scaleAspectFit

        let contentView = UIStackView(arrangedSubviews: [titleLabel, chevronView])
        contentView.axis = .horizontal
        contentView.alignment = .center
        contentView.spacing = Constants.rowContentSpacing
        contentView.isUserInteractionEnabled = false

        let rowView = UIControl()
        rowView.accessibilityTraits = .button
        rowView.accessibilityLabel = option
        rowView.backgroundColor = .secondarySystemBackground
        rowView.layer.cornerRadius = Constants.rowCornerRadius
        // `selectOption(_:)` is the whole event path: the cell hides this view and the SDK
        // sends the option as a user message. No view controller code needed.
        rowView.addAction(
            UIAction { [weak self] _ in self?.selectOption(option) },
            for: .touchUpInside
        )

        rowView.addSubview(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        chevronView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            contentView.leadingAnchor.constraint(
                equalTo: rowView.leadingAnchor,
                constant: Constants.rowPaddingHorizontal
            ),
            contentView.trailingAnchor.constraint(
                equalTo: rowView.trailingAnchor,
                constant: -Constants.rowPaddingHorizontal
            ),
            contentView.topAnchor.constraint(
                equalTo: rowView.topAnchor,
                constant: Constants.rowPaddingVertical
            ),
            contentView.bottomAnchor.constraint(
                equalTo: rowView.bottomAnchor,
                constant: -Constants.rowPaddingVertical
            ),
            chevronView.widthAnchor.constraint(equalToConstant: Constants.chevronSize),
            chevronView.heightAnchor.constraint(equalToConstant: Constants.chevronSize)
        ])

        return rowView
    }
}

Step 2: Register the subclass

// Before `AIAgentMessenger.presentConversation(...)` or `attachLauncher(...)`.
// `nil` returns to the default chips.
SBAConversationModule.List.Cell.SuggestedReplyView = MenuSuggestedReplyView.self

Notes:

• Only the last message shows suggested replies. That rule stays SDK-side.
• For colors and fonts alone, the theme is enough and no subclass is needed: SBATheme.conversation.list.cell.userMessage.suggestedReply. Alignment and width are not themeable.
• To check the layout before an agent sends any options, drive the view yourself:

let menuView = MenuSuggestedReplyView()
menuView.optionSelectHandler = { option in print("picked: \(option)") }
menuView.update(options: ["첫 번째 항목", "두 번째 항목"])

React

This guide is coming soon. Stay tuned for updates!

React Native

This guide is coming soon. Stay tuned for updates!

Reference

No response

Screenshots

As-is	To-be