cometchat-android-v6-compose-placement

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

Purpose

Place CometChat Compose components into app screens using Compose Navigation, Dialogs, BottomSheets, and Tab layouts. Patterns derived from master-app-jetpack.

Use this skill when

• Setting up Compose Navigation with CometChat screens
• Placing CometChat components in a NavHost
• Showing CometChat components in Dialogs or BottomSheets
• Building a tabbed layout with Conversations, Users, Groups, Calls tabs

Do not use this skill when

• Working with Kotlin Views placement (use cometchat-android-v6-kotlin-placement)
• Looking up component APIs (use cometchat-android-v6-compose-components)

1. Basic setContent Placement

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CometChatTheme {
                CometChatConversations(
                    onItemClick = { conversation -> /* navigate */ }
                )
            }
        }
    }
}

2. Compose Navigation

Pattern from master-app-jetpack/navigation/NavGraph.kt:

import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    CometChatTheme {
        NavHost(navController = navController, startDestination = "conversations") {

            composable("conversations") {
                CometChatConversations(
                    onItemClick = { conversation ->
                        // Pass conversation ID or user/group via route
                        navController.navigate("chat/${conversation.conversationId}")
                    }
                )
            }

            composable("chat/{conversationId}") { backStackEntry ->
                val conversationId = backStackEntry.arguments?.getString("conversationId")
                // Resolve user or group from conversationId, then:
                Column {
                    CometChatMessageHeader(user = resolvedUser)
                    CometChatMessageList(
                        user = resolvedUser,
                        modifier = Modifier.weight(1f)
                    )
                    CometChatMessageComposer(user = resolvedUser)
                }
            }

            composable("users") {
                CometChatUsers(
                    onItemClick = { user ->
                        navController.navigate("chat/user_${user.uid}")
                    }
                )
            }

            composable("groups") {
                CometChatGroups(
                    onItemClick = { group ->
                        navController.navigate("chat/group_${group.guid}")
                    }
                )
            }
        }
    }
}

3. Tabbed Layout

@Composable
fun HomeScreen() {
    var selectedTab by remember { mutableIntStateOf(0) }
    val tabs = listOf("Chats", "Users", "Groups", "Calls")

    CometChatTheme {
        Column {
            TabRow(selectedTabIndex = selectedTab) {
                tabs.forEachIndexed { index, title ->
                    Tab(
                        selected = selectedTab == index,
                        onClick = { selectedTab = index },
                        text = { Text(title) }
                    )
                }
            }

            when (selectedTab) {
                0 -> CometChatConversations(onItemClick = { /* navigate */ })
                1 -> CometChatUsers(onItemClick = { /* navigate */ })
                2 -> CometChatGroups(onItemClick = { /* navigate */ })
                3 -> CometChatCallLogs(onItemClick = { /* navigate */ })
            }
        }
    }
}

4. Dialog Placement

@Composable
fun ChatScreenWithInfo(message: BaseMessage) {
    var showInfo by remember { mutableStateOf(false) }

    if (showInfo) {
        Dialog(onDismissRequest = { showInfo = false }) {
            CometChatMessageInformation(message = message)
        }
    }
}

5. BottomSheet Placement

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ChatScreenWithReactions(message: BaseMessage) {
    var showReactions by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState()

    if (showReactions) {
        ModalBottomSheet(
            onDismissRequest = { showReactions = false },
            sheetState = sheetState
        ) {
            CometChatReactionList(baseMessage = message)
        }
    }
}

6. Call Activity Launch

Ongoing calls use a dedicated Activity (not a composable screen):

import com.cometchat.uikit.compose.presentation.ongoingcall.ui.CometChatOngoingCallActivity
import com.cometchat.uikit.core.constants.UIKitConstants.CallWorkFlow

// Launch ongoing call
CometChatOngoingCallActivity.launchOngoingCallActivity(
    activity,           // Current Activity
    call.sessionId,     // Call session ID
    call.type,          // "audio" or "video"
    CallWorkFlow.DEFAULT,
    null,               // Custom CallSettingsBuilder (optional)
    null                // CometChatOngoingCallStyle (optional)
)

7. Incoming Call Overlay

From master-app-jetpack/Application.kt — incoming calls are shown as an overlay using StateFlow:

// In Application class
private val _incomingCall = MutableStateFlow<Call?>(null)
val incomingCall: StateFlow<Call?> = _incomingCall.asStateFlow()

// In your root composable
val incomingCall by application.incomingCall.collectAsStateWithLifecycle()

incomingCall?.let { call ->
    CometChatIncomingCall(call = call)
}

Hard rules

• ALWAYS wrap CometChat components in CometChatTheme {} at the top level — do not nest multiple CometChatTheme wrappers
• Place CometChatTheme {} OUTSIDE the NavHost so all screens share the same theme
• Ongoing calls MUST use CometChatOngoingCallActivity — they cannot be a composable screen (they need a separate Activity for PiP and lifecycle)
• When passing User/Group objects between screens, use a cache or resolver pattern (like master-app-jetpack/navigation/EntityCache.kt) — do NOT serialize full objects in navigation routes