How to customize the time label color in the conversation message

[tezpark]

Versions

Summary

This guide explains how to customize the time label color in the Conversation message to use your own color.

Guide & Snippet

iOS

How to customize the time label color in the conversation message

You can customize the stateView of the conversation message by subclassing SBAMessageStateView and overriding the setupStyles() method.

Step 1: Create a Custom Class

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

import SendbirdAIAgentMessenger

class CustomMessageStateView: SBAMessageStateView {
    override func setupStyles() {
        super.setupStyles()
        
        let customColor = UIColor(hex: "#7A50F2")
        self.timeLabel?.textColor = customColor
    }
}

Step 2: Register the Custom class

Before presenting the conversation view, register your custom class:

SBAModuleSet.ConversationModule.List.Cell.StateView = CustomMessageStateView.self

Android

Steps to Customize “Sent At” Text Appearance in Other User Messages

The following steps show how to change only the sent-at (timestamp) text appearance of other users’ messages, while keeping the rest of the UI/behavior intact.

---

1. Create a Custom Theme with Modified OtherUserMessageStyle

Extend the default MessengerTheme and override only sentAtAppearance inside OtherUserMessageStyle.

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 {

                            // Text message style
                            override val otherUserMessageStyle: OtherUserMessageStyle =
                                object : OtherUserMessageStyle by default.conversation.messageList.messageStyles.otherUserMessageStyle {
                                    override val sentAtAppearance: TextAppearance
                                        get() = TextAppearance(FONT_STYLE_RES, COLOR_INT)
                                }

                            // File message style
                            override val otherFileMessageStyle: OtherFileMessageStyle =
                                object : OtherFileMessageStyle by default.conversation.messageList.messageStyles.otherFileMessageStyle {
                                    override val sentAtAppearance: TextAppearance
                                        get() = TextAppearance(FONT_STYLE_RES, COLOR_INT)
                                }

                            // Image message style
                            override val otherImageMessageStyle: OtherImageMessageStyle =
                                object : OtherImageMessageStyle by default.conversation.messageList.messageStyles.otherImageMessageStyle {
                                    override val sentAtAppearance: TextAppearance
                                        get() = TextAppearance(FONT_STYLE_RES, COLOR_INT)
                                }

                            // Unknown message style
                            override val otherUnknownMessageStyle: OtherUnknownMessageStyle =
                                object : OtherUnknownMessageStyle by default.conversation.messageList.messageStyles.otherUnknownMessageStyle {
                                    override val sentAtAppearance: TextAppearance
                                        get() = TextAppearance(FONT_STYLE_RES, COLOR_INT)
                                }
                        }
                }
        }
}

• 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