Cometchat Android V6 Compose Components

Companion skills: cometchat-android-v6-kotlin-components (Views equivalent), cometchat-android-v6-compose-theming, cometchat-android-v6-compose-customization, cometchat-android-v6-compose-placement

Purpose

Complete catalog of all Jetpack Compose components in CometChat UIKit v6. Each component is a @Composable function in com.cometchat.uikit.compose.presentation.

Use this skill when

• Adding a CometChat Compose component to a screen
• Looking up component parameters and their types
• Understanding which component to use for a specific chat feature
• Finding the style class for a component

Do not use this skill when

• Working with Kotlin Views components (use cometchat-android-v6-kotlin-components)
• Customizing bubble rendering (use cometchat-android-v6-compose-customization)
• Placing components in navigation (use cometchat-android-v6-compose-placement)

1. Component Catalog

1.1 List Components

1.2 Messaging Components

1.3 Call Components

1.4 Utility Components

1.5 Shared Elements

Located in presentation.shared/:

• AI features: aiconversationstarter/, aiconversationsummary/, aismartreplies/
• Message bubble: messagebubble/ (BubbleFactory, InternalContentRenderer, CometChatMessageBubble)
• Mentions: mentions/
• Formatters: formatters/ (CometChatTextFormatter, CometChatMentionsFormatter)
• Default states: defaultstates/ (empty, error, loading state composables)
• Dialog: dialog/
• Popup menu: popupmenu/

1.6 Preview Support

The preview/ package provides preview data, domain models, and presentation helpers for @Preview composables during development.

2. Basic Usage Examples

2.1 Conversations List

import com.cometchat.uikit.compose.presentation.conversations.ui.CometChatConversations
import com.cometchat.uikit.compose.theme.CometChatTheme

@Composable
fun ConversationsScreen(onConversationClick: (Conversation) -> Unit) {
    CometChatTheme {
        CometChatConversations(
            onItemClick = { conversation ->
                onConversationClick(conversation)
            }
        )
    }
}

2.2 Message List

import com.cometchat.uikit.compose.presentation.messagelist.ui.CometChatMessageList
import com.cometchat.chat.models.User

@Composable
fun ChatScreen(user: User) {
    CometChatTheme {
        Column {
            CometChatMessageHeader(user = user)
            CometChatMessageList(
                user = user,
                modifier = Modifier.weight(1f)
            )
            CometChatMessageComposer(user = user)
        }
    }
}

2.3 Users List

@Composable
fun UsersScreen() {
    CometChatTheme {
        CometChatUsers(
            onItemClick = { user ->
                // Navigate to chat with user
            }
        )
    }
}

2.4 Groups List

@Composable
fun GroupsScreen() {
    CometChatTheme {
        CometChatGroups(
            onItemClick = { group ->
                // Navigate to group chat
            }
        )
    }
}

3. Style Classes

Every component has a corresponding @Immutable data class style in its style/ subpackage:

Usage:

CometChatConversations(
    style = CometChatConversationsStyle.default(
        backgroundColor = Color.White,
        titleTextColor = Color.Black,
        titleTextStyle = CometChatTheme.typography.heading1Bold
    )
)

4. ViewModel Integration

Each component creates its own ViewModel internally via factories from chatuikit-core. The ViewModels expose StateFlow of sealed UI state classes. You typically don't need to interact with ViewModels directly — the components handle everything.

Hard rules

• ALWAYS wrap CometChat Compose components in CometChatTheme {} — they depend on CompositionLocal theme values
• Components create their own ViewModels internally — do NOT try to create or inject ViewModels manually
• Style classes use Companion.default() factory functions — do NOT use the data class constructor directly (it requires all parameters)
• All style defaults source from CometChatTheme tokens — override only what you need via named parameters