{"id":"b2845b4e-5914-40af-98c9-085b86fc3df7","shortId":"yX8Gre","kind":"skill","title":"cometchat-android-v6-compose-placement","tagline":"CometChat Android UIKit v6 Compose placement — setContent, Compose Navigation, Dialog, BottomSheet, and Tab patterns","description":"> **Companion skills:** cometchat-android-v6-kotlin-placement (Views equivalent), cometchat-android-v6-compose-components, cometchat-android-v6-compose-theming\n\n## Purpose\n\nPlace CometChat Compose components into app screens using Compose Navigation, Dialogs, BottomSheets, and Tab layouts. Patterns derived from `master-app-jetpack`.\n\n## Use this skill when\n\n- Setting up Compose Navigation with CometChat screens\n- Placing CometChat components in a NavHost\n- Showing CometChat components in Dialogs or BottomSheets\n- Building a tabbed layout with Conversations, Users, Groups, Calls tabs\n\n## Do not use this skill when\n\n- Working with Kotlin Views placement (use `cometchat-android-v6-kotlin-placement`)\n- Looking up component APIs (use `cometchat-android-v6-compose-components`)\n\n## 1. Basic setContent Placement\n\n```kotlin\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            CometChatTheme {\n                CometChatConversations(\n                    onItemClick = { conversation -> /* navigate */ }\n                )\n            }\n        }\n    }\n}\n```\n\n## 2. Compose Navigation\n\nPattern from `master-app-jetpack/navigation/NavGraph.kt`:\n\n```kotlin\nimport androidx.navigation.compose.NavHost\nimport androidx.navigation.compose.composable\nimport androidx.navigation.compose.rememberNavController\n\n@Composable\nfun AppNavigation() {\n    val navController = rememberNavController()\n\n    CometChatTheme {\n        NavHost(navController = navController, startDestination = \"conversations\") {\n\n            composable(\"conversations\") {\n                CometChatConversations(\n                    onItemClick = { conversation ->\n                        // Pass conversation ID or user/group via route\n                        navController.navigate(\"chat/${conversation.conversationId}\")\n                    }\n                )\n            }\n\n            composable(\"chat/{conversationId}\") { backStackEntry ->\n                val conversationId = backStackEntry.arguments?.getString(\"conversationId\")\n                // Resolve user or group from conversationId, then:\n                Column {\n                    CometChatMessageHeader(user = resolvedUser)\n                    CometChatMessageList(\n                        user = resolvedUser,\n                        modifier = Modifier.weight(1f)\n                    )\n                    CometChatMessageComposer(user = resolvedUser)\n                }\n            }\n\n            composable(\"users\") {\n                CometChatUsers(\n                    onItemClick = { user ->\n                        navController.navigate(\"chat/user_${user.uid}\")\n                    }\n                )\n            }\n\n            composable(\"groups\") {\n                CometChatGroups(\n                    onItemClick = { group ->\n                        navController.navigate(\"chat/group_${group.guid}\")\n                    }\n                )\n            }\n        }\n    }\n}\n```\n\n## 3. Tabbed Layout\n\n```kotlin\n@Composable\nfun HomeScreen() {\n    var selectedTab by remember { mutableIntStateOf(0) }\n    val tabs = listOf(\"Chats\", \"Users\", \"Groups\", \"Calls\")\n\n    CometChatTheme {\n        Column {\n            TabRow(selectedTabIndex = selectedTab) {\n                tabs.forEachIndexed { index, title ->\n                    Tab(\n                        selected = selectedTab == index,\n                        onClick = { selectedTab = index },\n                        text = { Text(title) }\n                    )\n                }\n            }\n\n            when (selectedTab) {\n                0 -> CometChatConversations(onItemClick = { /* navigate */ })\n                1 -> CometChatUsers(onItemClick = { /* navigate */ })\n                2 -> CometChatGroups(onItemClick = { /* navigate */ })\n                3 -> CometChatCallLogs(onItemClick = { /* navigate */ })\n            }\n        }\n    }\n}\n```\n\n## 4. Dialog Placement\n\n```kotlin\n@Composable\nfun ChatScreenWithInfo(message: BaseMessage) {\n    var showInfo by remember { mutableStateOf(false) }\n\n    if (showInfo) {\n        Dialog(onDismissRequest = { showInfo = false }) {\n            CometChatMessageInformation(message = message)\n        }\n    }\n}\n```\n\n## 5. BottomSheet Placement\n\n```kotlin\n@OptIn(ExperimentalMaterial3Api::class)\n@Composable\nfun ChatScreenWithReactions(message: BaseMessage) {\n    var showReactions by remember { mutableStateOf(false) }\n    val sheetState = rememberModalBottomSheetState()\n\n    if (showReactions) {\n        ModalBottomSheet(\n            onDismissRequest = { showReactions = false },\n            sheetState = sheetState\n        ) {\n            CometChatReactionList(baseMessage = message)\n        }\n    }\n}\n```\n\n## 6. Call Activity Launch\n\nOngoing calls use a dedicated Activity (not a composable screen):\n\n```kotlin\nimport com.cometchat.uikit.compose.presentation.ongoingcall.ui.CometChatOngoingCallActivity\nimport com.cometchat.uikit.core.constants.UIKitConstants.CallWorkFlow\n\n// Launch ongoing call\nCometChatOngoingCallActivity.launchOngoingCallActivity(\n    activity,           // Current Activity\n    call.sessionId,     // Call session ID\n    call.type,          // \"audio\" or \"video\"\n    CallWorkFlow.DEFAULT,\n    null,               // Custom CallSettingsBuilder (optional)\n    null                // CometChatOngoingCallStyle (optional)\n)\n```\n\n## 7. Incoming Call Overlay\n\nFrom `master-app-jetpack/Application.kt` — incoming calls are shown as an overlay using StateFlow:\n\n```kotlin\n// In Application class\nprivate val _incomingCall = MutableStateFlow<Call?>(null)\nval incomingCall: StateFlow<Call?> = _incomingCall.asStateFlow()\n\n// In your root composable\nval incomingCall by application.incomingCall.collectAsStateWithLifecycle()\n\nincomingCall?.let { call ->\n    CometChatIncomingCall(call = call)\n}\n```\n\n## Hard rules\n\n- ALWAYS wrap CometChat components in `CometChatTheme {}` at the top level — do not nest multiple `CometChatTheme` wrappers\n- Place `CometChatTheme {}` OUTSIDE the `NavHost` so all screens share the same theme\n- Ongoing calls MUST use `CometChatOngoingCallActivity` — they cannot be a composable screen (they need a separate Activity for PiP and lifecycle)\n- 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","tags":["cometchat","android","compose","placement","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs"],"capabilities":["skill","source-cometchat","skill-cometchat-android-v6-compose-placement","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-android-v6-compose-placement","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (6,443 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:46.154Z","embedding":null,"createdAt":"2026-05-07T13:05:05.289Z","updatedAt":"2026-05-18T19:04:46.154Z","lastSeenAt":"2026-05-18T19:04:46.154Z","tsv":"'/application.kt':402 '/navigation/entitycache.kt':508 '/navigation/navgraph.kt':159 '0':251,279 '1':129,283 '1f':219 '2':150,287 '3':239,291 '4':295 '5':319 '6':351 '7':393 'activ':353,360,374,376,486 'alway':443 'android':3,8,25,33,39,114,125 'androidx.navigation.compose.composable':164 'androidx.navigation.compose.navhost':162 'androidx.navigation.compose.remembernavcontroller':166 'api':121 'app':49,64,157,400,506 'applic':414 'application.incomingcall.collectasstatewithlifecycle':434 'appnavig':169 'audio':382 'backstackentri':197 'backstackentry.arguments':200 'basemessag':303,330,349 'basic':130 'bottomsheet':17,55,89,320 'build':90 'bundl':141 'cach':499 'call':98,258,352,356,372,378,395,404,420,425,437,439,440,472 'call.sessionid':377 'call.type':381 'callsettingsbuild':388 'callworkflow.default':385 'cannot':477 'chat':192,195,255 'chat/group_':237 'chat/user_':229 'chatscreenwithinfo':301 'chatscreenwithreact':328 'class':134,325,415 'column':210,260 'com.cometchat.uikit.compose.presentation.ongoingcall.ui.cometchatongoingcallactivity':367 'com.cometchat.uikit.core.constants.uikitconstants.callworkflow':369 'cometchat':2,7,24,32,38,45,75,78,84,113,124,445 'cometchat-android-v6-compose-components':31,123 'cometchat-android-v6-compose-placement':1 'cometchat-android-v6-compose-theming':37 'cometchat-android-v6-kotlin-placement':23,112 'cometchatcalllog':292 'cometchatconvers':146,181,280 'cometchatgroup':233,288 'cometchatincomingcal':438 'cometchatmessagecompos':220 'cometchatmessagehead':211 'cometchatmessageinform':316 'cometchatmessagelist':214 'cometchatongoingcallact':475 'cometchatongoingcallactivity.launchongoingcallactivity':373 'cometchatongoingcallstyl':391 'cometchatreactionlist':348 'cometchatthem':145,173,259,448,457,460 'cometchatus':225,284 'companion':21 'compon':36,47,79,85,120,128,446 'componentact':136 'compos':5,11,14,35,41,46,52,72,127,151,167,179,194,223,231,243,299,326,363,430,480 'convers':95,148,178,180,183,185 'conversation.conversationid':193 'conversationid':196,199,202,208 'current':375 'custom':387 'dedic':359 'deriv':60 'dialog':16,54,87,296,312 'equival':30 'experimentalmaterial3api':324 'fals':309,315,336,345 'full':512 'fun':138,168,244,300,327 'getstr':201 'group':97,206,232,235,257 'group.guid':238 'hard':441 'homescreen':245 'id':186,380 'import':161,163,165,366,368 'incom':394,403 'incomingcal':418,423,432,435 'incomingcall.asstateflow':426 'index':265,270,273 'jetpack':65,158,401,507 'kotlin':27,108,116,133,160,242,298,322,365,412 'launch':354,370 'layout':58,93,241 'let':436 'level':452 'lifecycl':490 'like':503 'listof':254 'look':118 'mainact':135 'master':63,156,399,505 'master-app-jetpack':62,155,398,504 'messag':302,317,318,329,350 'modalbottomsheet':342 'modifi':217 'modifier.weight':218 'multipl':456 'must':473 'mutableintstateof':250 'mutablestateflow':419 'mutablestateof':308,335 'navcontrol':171,175,176 'navcontroller.navigate':191,228,236 'navhost':82,174,463 'navig':15,53,73,149,152,282,286,290,294,515 'need':483 'nest':455 'null':386,390,421 'object':494,513 'onclick':271 'oncreat':139 'ondismissrequest':313,343 'ongo':355,371,471 'onitemclick':147,182,226,234,281,285,289,293 'optin':323 'option':389,392 'outsid':461 'overlay':396,409 'overrid':137 'pass':184,492 'pattern':20,59,153,502 'pip':488 'place':44,77,459 'placement':6,12,28,110,117,132,297,321 'privat':416 'purpos':43 'rememb':249,307,334 'remembermodalbottomsheetst':339 'remembernavcontrol':172 'resolv':203,501 'resolvedus':213,216,222 'root':429 'rout':190,516 'rule':442 'savedinstancest':140,143 'screen':50,76,364,466,481,496 'select':268 'selectedtab':247,263,269,272,278 'selectedtabindex':262 'separ':485 'serial':511 'session':379 'set':70 'setcont':13,131,144 'share':467 'sheetstat':338,346,347 'show':83 'showinfo':305,311,314 'shown':406 'showreact':332,341,344 'skill':22,68,104 'skill-cometchat-android-v6-compose-placement' 'source-cometchat' 'startdestin':177 'stateflow':411,424 'super.oncreate':142 'tab':19,57,92,99,240,253,267 'tabrow':261 'tabs.foreachindexed':264 'text':274,275 'theme':42,470 'titl':266,276 'top':451 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'uikit':9 'use':51,66,102,111,122,357,410,474,497 'user':96,204,212,215,221,224,227,256 'user.uid':230 'user/group':188,493 'v6':4,10,26,34,40,115,126 'val':170,198,252,337,417,422,431 'var':246,304,331 'via':189 'video':384 'view':29,109 'work':106 'wrap':444 'wrapper':458","prices":[{"id":"ee180247-1288-4064-9e0d-75a28fd5f50b","listingId":"b2845b4e-5914-40af-98c9-085b86fc3df7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:05.289Z"}],"sources":[{"listingId":"b2845b4e-5914-40af-98c9-085b86fc3df7","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-android-v6-compose-placement","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v6-compose-placement","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:05.289Z","lastSeenAt":"2026-05-18T19:04:46.154Z"}],"details":{"listingId":"b2845b4e-5914-40af-98c9-085b86fc3df7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-android-v6-compose-placement","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"68ea6c47ac9c5b99b495b195bdb57feebb398b67","skill_md_path":"skills/cometchat-android-v6-compose-placement/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v6-compose-placement"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-android-v6-compose-placement","license":"MIT","description":"CometChat Android UIKit v6 Compose placement — setContent, Compose Navigation, Dialog, BottomSheet, and Tab patterns","compatibility":"Android 9.0+ (API 28); Kotlin 1.9+; com.cometchat:chatuikit-compose-android:6.x"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-android-v6-compose-placement"},"updatedAt":"2026-05-18T19:04:46.154Z"}}