Custom Message Link Style

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

By default, the link style is set to look like a regular link, with the ChatTheme.colors.primaryAccent color and 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:

Blocking Users

State Overview