cometchat-android-v6-compose-components

Imported from cometchat/cometchat-skills (skills/cometchat-android-v6-compose-components/SKILL.md). Install upstream with npx skills add cometchat/cometchat-skills --skill cometchat-android-v6-compose-components. Copyright stays with the author (MIT).

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

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).

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

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:

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