Custom Message Link Style

In this cookbook recipe, you'll learn how to customize how links appear in chat messages. This allows you to match your app's branding or improve link visibility for your users.

Links in chat messages are automatically detected and styled by the SDK. You might want to customize link styles to:

Match your app's color scheme and branding
Differentiate links in your own messages vs. messages from others
Improve accessibility with larger fonts or different decorations

The MessageTheme allows you to customize the link style of messages. You can set the color, font size, text decoration, and any property of a TextStyle for both your own and other users' messages.

By default, the link style uses the ChatTheme.colors.primaryAccent color with an underline:

To customize the link style, you can use the linkStyle property of the MessageTheme class.

The following example shows how to set a custom link style for both own and other messages:

@Composable
private fun CustomMessageLinkStyle() {
    val currentUser = User()
    val ownMessageTheme = MessageTheme.defaultOwnTheme().copy(
        linkStyle = TextStyle(
            color = Color.Red,
            fontSize = 12.sp,
            textDecoration = TextDecoration.Underline
        )
    )
    val otherMessageTheme = MessageTheme.defaultOtherTheme().copy(
        linkStyle = TextStyle(
            color = Color.Green,
            fontSize = 16.sp,
            textDecoration = TextDecoration.Underline
        )
    )
    ChatTheme(
        ownMessageTheme = ownMessageTheme,
        otherMessageTheme = otherMessageTheme,
    ) {
        MessageList(
            currentState = MessageListState(
                messageItems = listOf(
                    MessageItemState(
                        currentUser = currentUser,
                        message = Message(
                            user = currentUser,
                            id = "message-1",
                            text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. www.google.com",
                        ),
                        isMine = true,
                        ownCapabilities = emptySet(),
                    ),
                    MessageItemState(
                        message = Message(
                            id = "message-2",
                            text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. getstream.io",
                        ),
                        isMine = false,
                        ownCapabilities = emptySet(),
                    ),
                ),
            ),
            reactionSorting = ReactionSortingByCount,
        )
    }
}

After applying the above code, the message links will look like this:

Message List Alignment

Custom Composer