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

Component	Package	Purpose
`CometChatConversations`	`presentation.conversations.ui`	Recent conversations list
`CometChatUsers`	`presentation.users.ui`	User list
`CometChatGroups`	`presentation.groups.ui`	Group list
`CometChatGroupMembers`	`presentation.groupmembers.ui`	Members of a group
`CometChatCallLogs`	`presentation.calllogs.ui`	Call history

1.2 Messaging Components

Component	Package	Purpose
`CometChatMessageList`	`presentation.messagelist.ui`	Message list with bubbles
`CometChatMessageComposer`	`presentation.messagecomposer.ui`	Message input with attachments
`CometChatMessageHeader`	`presentation.messageheader.ui`	Chat header (name, status, actions)
`CometChatMessageInformation`	`presentation.messageinformation.ui`	Message delivery/read info
`CometChatThreadHeader`	`presentation.threadheader.ui`	Thread parent message header

1.3 Call Components

Component	Package	Purpose
`CometChatCallButtons`	`presentation.callbuttons.ui`	Audio/video call buttons
`CometChatIncomingCall`	`presentation.incomingcall.ui`	Incoming call screen
`CometChatOutgoingCall`	`presentation.outgoingcall.ui`	Outgoing call screen
`CometChatOngoingCall`	`presentation.ongoingcall.ui`	Active call screen
`CometChatCallActivity`	`calls`	Activity wrapper for calls

1.4 Utility Components

Component	Package	Purpose
`CometChatSearch`	`presentation.search.ui`	Global search
`CometChatReactionList`	`presentation.reactionlist.ui`	Reaction details
`CometChatEmojiKeyboard`	`presentation.emojikeyboard.ui`	Emoji picker
`CometChatStickerKeyboard`	`presentation.stickerkeyboard.ui`	Sticker picker
`CometChatCreatePoll`	`presentation.createpoll.ui`	Poll creation
`CometChatImageViewerScreen`	`presentation.imageviewer.ui`	Full-screen image viewer
`CometChatFlagMessageDialog`	`presentation.report`	Report/flag message
`CometChatAIAssistantChatHistory`	`presentation.aiassistantchathistory.ui`	AI chat history

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:

Component	Style Class	Factory
`CometChatConversations`	`CometChatConversationsStyle`	`.default()`
`CometChatUsers`	`CometChatUsersStyle`	`.default()`
`CometChatGroups`	`CometChatGroupsStyle`	`.default()`
`CometChatGroupMembers`	`CometChatGroupMembersStyle`	`.default()`
`CometChatMessageList`	`CometChatMessageListStyle`	`.default()`
`CometChatMessageComposer`	`CometChatMessageComposerStyle`	`.default()`
`CometChatMessageHeader`	`CometChatMessageHeaderStyle`	`.default()`
`CometChatCallLogs`	`CometChatCallLogsStyle`	`.default()`
`CometChatThreadHeader`	`CometChatThreadHeaderStyle`	`.default()`

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