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 — ⚠️ broken at 6.0.0, captures first-rendered user globally; see cometchat-android-v6-calls §W4 for workaround
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