How to customize the date separator label color in the conversation

[tezpark]

Versions

Summary

This guide explains how to customize the date separator label color in the Conversation to use your own color.

Guide & Snippet

iOS

How to customize the date separator label color in the conversation

You can customize the date separator label of the conversation by subclassing SBAMessageDateView and overriding the setupStyles() method.

Step 1: Create a Custom Class

Create a subclass of SBAMessageDateView and override the setupStyles() method:

import SendbirdAIAgentMessenger

class CustomMessageDateView: SBAMessageDateView {
    override func setupStyles() {
        super.setupStyles()
        
        let customColor = UIColor(hex: "#7A50F2")
        self.dateLabel?.textColor = customColor
    }
}

Step 2: Register the Custom class

Before presenting the conversation view, register your custom class:

SBAModuleSet.ConversationModule.List.Cell.DateView = CustomMessageDateView.self

Android

Steps to Customize Timeline Message Text Color

The following steps show how to change only the Timeline message text color, while keeping the rest of the UI/behavior intact.

---

1. Create a Custom Theme with Modified Timeline Style

Extend the default theme and override only the timelineStyle.textAppearance.

class CustomLightTheme(val default: MessengerTheme) : MessengerTheme by default {
    override val conversation: ConversationTheme =
        object : ConversationTheme by default.conversation {

            override val messageList: MessageListTheme =
                object : MessageListTheme by default.conversation.messageList {

                    override val messageStyles: MessageStyles =
                        object : MessageStyles by default.conversation.messageList.messageStyles {

                            override val timelineStyle: TimelineMessageStyle =
                                object : TimelineMessageStyle by default.conversation.messageList.messageStyles.timelineStyle {
                                    override val textAppearance: TextAppearance
                                        get() = TextAppearance(
                                            FONT_STYLE_RES,   // e.g. R.style.Caption2OnLightMidEmphasis
                                            TEXT_COLOR_INT   // e.g. Color.RED
                                        )
                                }
                        }
                }
        }
}

• FONT_STYLE_RES: the text style resource (e.g., R.style.Caption2OnLightMidEmphasis).
• TEXT_COLOR_INT: the color integer (e.g., Color.RED).

2. Register the Custom Theme with AIAgentThemeProviders

Assign your theme to the light provider:

AIAgentThemeProviders.light = ThemeProvider {
    CustomLightTheme(LightTheme())
}

Note: Dark Theme

To apply the same customization for dark mode, register with the dark provider:

AIAgentThemeProviders.dark = ThemeProvider {
    CustomLightTheme(DarkTheme())
}

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 component to take effect.

JS

Header

• Description

   // code block

Reference

No response

Screenshots

As-is	To-be