Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce ChatComponentFactory #5565

Closed
wants to merge 9 commits into from

Conversation

andremion
Copy link
Contributor

@andremion andremion commented Jan 17, 2025

🎯 Goal

Make it easier to customize UI elements used by stateless components. Initially supporting channel stateless components.

🛠 Implementation details

ChatComponentFactory is introduced to create stateless components used by default throughout the Chat UI.

Example of a custom ChatComponentFactory implementation that changes the default UI of the trailing content of the channel list header element:

ChatTheme(
    componentFactory = ComponentFactory(
        channelListHeader = object : ChannelListHeader() {
            @Composable
            override fun RowScope.TrailingContent(
                onHeaderActionClick: () -> Unit,
            ) {
                IconButton(onClick = onHeaderActionClick) {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = "Add",
                    )
                }
            }
        }
    )
) {
    // Your Chat screens
}

ChatComponentFactory can also be extended in a separate class and passed to the ChatTheme as shown:

class MyComponentFactory : ComponentFactory(
    channelListHeader = object : ChannelListHeader() {
        @Composable
        override fun RowScope.TrailingContent(
            onHeaderActionClick: () -> Unit,
        ) {
            IconButton(onClick = onHeaderActionClick) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add",
                )
            }
        }
    }
)
ChatTheme(
    componentFactory = MyComponentFactory()
) {
    // Your Chat screens
}

🧪 Testing

Update the ChannelsActivity of the Compose sample app, and set a new ChatComponentFactory to the ChatTheme with some customizations.

🎉 GIF

gif

Copy link
Contributor

github-actions bot commented Jan 17, 2025

SDK Size Comparison 📏

SDK Before After Difference Status
stream-chat-android-client 3.04 MB 3.04 MB 0.00 MB 🟢
stream-chat-android-offline 3.25 MB 3.25 MB 0.00 MB 🟢
stream-chat-android-ui-components 7.91 MB 7.91 MB 0.00 MB 🟢
stream-chat-android-compose 9.14 MB 9.15 MB 0.00 MB 🟢

@andremion andremion added the compose Jetpack Compose label Jan 20, 2025
@andremion andremion force-pushed the AND-249-channels-component-factory branch from 734482e to e74cc02 Compare January 21, 2025 09:29
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
52.0% Coverage on New Code (required ≥ 80%)
6.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@andremion andremion closed this Jan 21, 2025
@andremion andremion deleted the AND-249-channels-component-factory branch January 21, 2025 11:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
compose Jetpack Compose
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant