cometchat-android-v6-compose-components

Ground truth: com.cometchat:chatuikit-compose-android:6.x component catalog (javap the AAR) + docs/ui-kit/android/v6. Official docs: https://www.cometchat.com/docs/ui-kit/android/v6/components-overview · Docs MCP: claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.

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

⛔ Only the @Composables in THIS catalog exist — do not invent or recall names from v4/older memory. Before emitting any CometChat* composable, confirm it's listed below; if it's not here, it doesn't exist (→ "unresolved reference" compile error). There is no all-in-one composable: the v4-era composites CometChatConversationsWithMessages / CometChatUsersWithMessages / CometChatGroupsWithMessages / CometChatMessages and the CometChatUI god-component do not exist in v6 Android (verified against the v6 Kotlin-Views kit, which the Compose stack mirrors). Compose a two-pane experience yourself: CometChatConversations() (list) → on item-click, host CometChatMessageHeader() + CometChatMessageList() + CometChatMessageComposer() for the selected User/Group.

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

⚠️ There is NO combined CometChatMessages composable on Android Compose. Unlike React / Flutter / Android V5 (Views), the V6 Compose surface ships the three pieces separately and you compose the chat screen manually as CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer in a Column (see §2.2). Do not import com.cometchat.uikit.compose.presentation.cometchatmessages.CometChatMessages — that package does not exist (ENG-35698 fix).

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
CometChatNotificationFeed	presentation.notificationfeed.ui	Full-screen notification feed (category filter chips, timestamp grouping, rich cards, real-time updates)

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

CometChatTheme {} is applied ONCE at the app root, outside the NavHost — not per screen. The examples below assume that root wrapper is already in place (see cometchat-android-v6-compose-placement §1), so individual screens do NOT re-wrap in CometChatTheme {}. Nesting multiple CometChatTheme {} wrappers is an anti-pattern.

2.1 Conversations List

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

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

2.2 Message List

The chat screen composes the three pieces in a Column. Match the kit sample app (sample-app-compose/.../messages/MessagesScreen.kt): wrap in a Scaffold(contentWindowInsets = WindowInsets.statusBars) and give the Column .navigationBarsPadding().imePadding() so the soft keyboard pushes the composer up instead of covering it. Header and Composer take Modifier.fillMaxWidth(); the List takes weight(1f).

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.material3.Scaffold
import androidx.compose.ui.Modifier
import com.cometchat.uikit.compose.presentation.messagelist.ui.CometChatMessageList
import com.cometchat.chat.models.User

@Composable
fun ChatScreen(user: User) {
    Scaffold(contentWindowInsets = WindowInsets.statusBars) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .consumeWindowInsets(paddingValues)
                .navigationBarsPadding()
                .imePadding()
        ) {
            CometChatMessageHeader(modifier = Modifier.fillMaxWidth(), user = user)
            CometChatMessageList(
                user = user,
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
            )
            CometChatMessageComposer(modifier = Modifier.fillMaxWidth(), user = user)
        }
    }
}

2.3 Users List

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

2.4 Groups List

@Composable
fun GroupsScreen() {
    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()
CometChatNotificationFeed	CometChatNotificationFeedStyle	constructor (Color.Unspecified defaults) + .fromTheme(overrides)

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

• CometChat Compose components depend on CometChatTheme {} CompositionLocal values — apply CometChatTheme {} ONCE at the app root (outside the NavHost), NOT per screen; never nest multiple CometChatTheme {} wrappers
• 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