Component Factory

The ChatComponentFactory is a factory which defines most of the stateless low-level composable components, which are used as building blocks for the high-level screen components and the bound components (see Component Architecture).

The screen components, the bound components, and even the low-level components which depend on different low-level components, use the ChatComponentFactory to render specific components of the UI in a stateless manner.

By overriding the ChatComponentFactory, developers can easily customize or override specific parts of the Chat UI, without the need to build their own implementations from scratch. This enables a high degree of customization and flexibility, allowing the Chat UI to be tailored to specific design requirements.

For the complete API reference, see the ChatComponentFactory source on GitHub.

Usage

To apply a custom component factory to your Chat UI, implement the ChatComponentFactory interface:

class CustomChatComponentFactory : ChatComponentFactory {

    // Override the specific composable methods which you like to customize
}

And pass the custom ChatComponentFactory to the ChatTheme wrapping your Chat UI:

ChatTheme(
    componentFactory = CustomChatComponentFactory(),
) {
    MessagesScreen(
        viewModelFactory = viewModelFactory,
    )
}

The custom components provided by the custom ChatComponentFactory will now override all the default components used by the wrapped MessagesScreen.

Customization options

The ChatComponentFactory allows customization of most low-level components used in different Chat screens. It provides the ability to customize common components globally, as well as specific components in particular locations.

Available Components

Avatars

The ChatComponentFactory provides a way to customize the avatars which are used in the Chat screens.

To customize avatars, override the corresponding ChatComponentFactory method:

class CustomChatComponentFactory : ChatComponentFactory {

    @Composable
    override fun ChannelAvatar(params: ChannelAvatarParams) {
        // Your implementation of the channel avatar
        // Access params.modifier, params.channel, params.currentUser, params.onClick
    }
}

Channel List Header

Channel List Items

Message List Header

Message List Items

Message Composer

Message composer

Commands popup

Attachment Picker

Menus

Channel menu

Channel menu

Message menu

Message menu

Shared menu item

MenuOptionItem is shared by both the channel and message menus. Override it once to apply the same change to both menus — for example, to remove leading icons from all option rows.

Reactions menu

Reactions menu

Thread List

Thread list

Pinned Message List

Pinned messages list

Compound factory

You can compose multiple factories together. This is useful when you want to customize a specific UI component deep in a composable hierarchy, without overriding an entire factory:

ChatTheme(
    componentFactory = MyCustomChatComponentFactory()
) {
    val currentComponentFactory = LocalComponentFactory.current

    val myCustomMessageFooterStatusIndicator = remember {
        object : ChatComponentFactory by currentComponentFactory {
            @Composable
            override fun MessageFooterStatusIndicator(params: MessageFooterStatusIndicatorParams) {
                MyAwesomeMessageReadStatusIndicator()
            }
        }
    }
    CompositionLocalProvider(LocalComponentFactory provides myCustomMessageFooterStatusIndicator) {
        MessageList()
    }
}

Scoped components

Some factory methods are extensions of a scope (e.g. LazyItemScope). Calling super directly does not compile in that case. Use a delegate and the with operator to forward the call:

class CompoundComponentFactory(
    private val delegate: ChatComponentFactory = object : ChatComponentFactory {},
) : ChatComponentFactory by delegate {
    @Composable
    override fun LazyItemScope.ChannelListItemContent(params: ChannelListItemContentParams) {
        with(delegate) {
            Box(
                modifier = Modifier
                    .background(color = Color.Blue)
                    .padding(5.dp)
                    .background(color = ChatTheme.colors.backgroundCoreApp)
            ) {
                ChannelListItemContent(params)
            }
        }
    }
}