{"id":"b2fb806c-3701-4b00-ba63-7eae21d4806c","shortId":"WLm67K","kind":"skill","title":"cometchat-android-v6-compose-components","tagline":"CometChat Android UIKit v6 Jetpack Compose component catalog — all @Composable chat UI components, their parameters, styles, and usage","description":"> **Companion skills:** cometchat-android-v6-kotlin-components (Views equivalent), cometchat-android-v6-compose-theming, cometchat-android-v6-compose-customization, cometchat-android-v6-compose-placement\n\n## Purpose\n\nComplete catalog of all Jetpack Compose components in CometChat UIKit v6. Each component is a `@Composable` function in `com.cometchat.uikit.compose.presentation`.\n\n## Use this skill when\n\n- Adding a CometChat Compose component to a screen\n- Looking up component parameters and their types\n- Understanding which component to use for a specific chat feature\n- Finding the style class for a component\n\n## Do not use this skill when\n\n- Working with Kotlin Views components (use `cometchat-android-v6-kotlin-components`)\n- Customizing bubble rendering (use `cometchat-android-v6-compose-customization`)\n- Placing components in navigation (use `cometchat-android-v6-compose-placement`)\n\n## 1. Component Catalog\n\n\n### 1.1 List Components\n\n| Component | Package | Purpose |\n|---|---|---|\n| `CometChatConversations` | `presentation.conversations.ui` | Recent conversations list |\n| `CometChatUsers` | `presentation.users.ui` | User list |\n| `CometChatGroups` | `presentation.groups.ui` | Group list |\n| `CometChatGroupMembers` | `presentation.groupmembers.ui` | Members of a group |\n| `CometChatCallLogs` | `presentation.calllogs.ui` | Call history |\n\n### 1.2 Messaging Components\n\n| Component | Package | Purpose |\n|---|---|---|\n| `CometChatMessageList` | `presentation.messagelist.ui` | Message list with bubbles |\n| `CometChatMessageComposer` | `presentation.messagecomposer.ui` | Message input with attachments |\n| `CometChatMessageHeader` | `presentation.messageheader.ui` | Chat header (name, status, actions) |\n| `CometChatMessageInformation` | `presentation.messageinformation.ui` | Message delivery/read info |\n| `CometChatThreadHeader` | `presentation.threadheader.ui` | Thread parent message header |\n\n### 1.3 Call Components\n\n| Component | Package | Purpose |\n|---|---|---|\n| `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 |\n| `CometChatIncomingCall` | `presentation.incomingcall.ui` | Incoming call screen |\n| `CometChatOutgoingCall` | `presentation.outgoingcall.ui` | Outgoing call screen |\n| `CometChatOngoingCall` | `presentation.ongoingcall.ui` | Active call screen |\n| `CometChatCallActivity` | `calls` | Activity wrapper for calls |\n\n### 1.4 Utility Components\n\n| Component | Package | Purpose |\n|---|---|---|\n| `CometChatSearch` | `presentation.search.ui` | Global search |\n| `CometChatReactionList` | `presentation.reactionlist.ui` | Reaction details |\n| `CometChatEmojiKeyboard` | `presentation.emojikeyboard.ui` | Emoji picker |\n| `CometChatStickerKeyboard` | `presentation.stickerkeyboard.ui` | Sticker picker |\n| `CometChatCreatePoll` | `presentation.createpoll.ui` | Poll creation |\n| `CometChatImageViewerScreen` | `presentation.imageviewer.ui` | Full-screen image viewer |\n| `CometChatFlagMessageDialog` | `presentation.report` | Report/flag message |\n| `CometChatAIAssistantChatHistory` | `presentation.aiassistantchathistory.ui` | AI chat history |\n\n### 1.5 Shared Elements\n\nLocated in `presentation.shared/`:\n\n- AI features: `aiconversationstarter/`, `aiconversationsummary/`, `aismartreplies/`\n- Message bubble: `messagebubble/` (BubbleFactory, InternalContentRenderer, CometChatMessageBubble)\n- Mentions: `mentions/`\n- Formatters: `formatters/` (CometChatTextFormatter, CometChatMentionsFormatter)\n- Default states: `defaultstates/` (empty, error, loading state composables)\n- Dialog: `dialog/`\n- Popup menu: `popupmenu/`\n\n### 1.6 Preview Support\n\nThe `preview/` package provides preview data, domain models, and presentation helpers for `@Preview` composables during development.\n\n## 2. Basic Usage Examples\n\n### 2.1 Conversations List\n\n```kotlin\nimport com.cometchat.uikit.compose.presentation.conversations.ui.CometChatConversations\nimport com.cometchat.uikit.compose.theme.CometChatTheme\n\n@Composable\nfun ConversationsScreen(onConversationClick: (Conversation) -> Unit) {\n    CometChatTheme {\n        CometChatConversations(\n            onItemClick = { conversation ->\n                onConversationClick(conversation)\n            }\n        )\n    }\n}\n```\n\n### 2.2 Message List\n\n```kotlin\nimport com.cometchat.uikit.compose.presentation.messagelist.ui.CometChatMessageList\nimport com.cometchat.chat.models.User\n\n@Composable\nfun ChatScreen(user: User) {\n    CometChatTheme {\n        Column {\n            CometChatMessageHeader(user = user)\n            CometChatMessageList(\n                user = user,\n                modifier = Modifier.weight(1f)\n            )\n            CometChatMessageComposer(user = user)\n        }\n    }\n}\n```\n\n### 2.3 Users List\n\n```kotlin\n@Composable\nfun UsersScreen() {\n    CometChatTheme {\n        CometChatUsers(\n            onItemClick = { user ->\n                // Navigate to chat with user\n            }\n        )\n    }\n}\n```\n\n### 2.4 Groups List\n\n```kotlin\n@Composable\nfun GroupsScreen() {\n    CometChatTheme {\n        CometChatGroups(\n            onItemClick = { group ->\n                // Navigate to group chat\n            }\n        )\n    }\n}\n```\n\n## 3. Style Classes\n\nEvery component has a corresponding `@Immutable data class` style in its `style/` subpackage:\n\n| Component | Style Class | Factory |\n|---|---|---|\n| `CometChatConversations` | `CometChatConversationsStyle` | `.default()` |\n| `CometChatUsers` | `CometChatUsersStyle` | `.default()` |\n| `CometChatGroups` | `CometChatGroupsStyle` | `.default()` |\n| `CometChatGroupMembers` | `CometChatGroupMembersStyle` | `.default()` |\n| `CometChatMessageList` | `CometChatMessageListStyle` | `.default()` |\n| `CometChatMessageComposer` | `CometChatMessageComposerStyle` | `.default()` |\n| `CometChatMessageHeader` | `CometChatMessageHeaderStyle` | `.default()` |\n| `CometChatCallLogs` | `CometChatCallLogsStyle` | `.default()` |\n| `CometChatThreadHeader` | `CometChatThreadHeaderStyle` | `.default()` |\n\nUsage:\n\n```kotlin\nCometChatConversations(\n    style = CometChatConversationsStyle.default(\n        backgroundColor = Color.White,\n        titleTextColor = Color.Black,\n        titleTextStyle = CometChatTheme.typography.heading1Bold\n    )\n)\n```\n\n## 4. ViewModel Integration\n\nEach 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.\n\n## Hard rules\n\n- ALWAYS wrap CometChat Compose components in `CometChatTheme {}` — they depend on `CompositionLocal` theme values\n- Components create their own ViewModels internally — do NOT try to create or inject ViewModels manually\n- Style classes use `Companion.default()` factory functions — do NOT use the data class constructor directly (it requires all parameters)\n- All style defaults source from `CometChatTheme` tokens — override only what you need via named parameters","tags":["cometchat","android","compose","components","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs"],"capabilities":["skill","source-cometchat","skill-cometchat-android-v6-compose-components","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-components","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 (7,094 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:45.980Z","embedding":null,"createdAt":"2026-05-07T13:05:05.021Z","updatedAt":"2026-05-18T19:04:45.980Z","lastSeenAt":"2026-05-18T19:04:45.980Z","tsv":"'1':148 '1.1':151 '1.2':180 '1.3':216 '1.4':266 '1.5':308 '1.6':344 '1f':410 '2':363 '2.1':367 '2.2':387 '2.3':414 '2.4':430 '3':445 '4':504 '6.0.0':229 'action':204 'activ':257,262 'ad':77 'ai':305,314 'aiconversationstart':316 'aiconversationsummari':317 'aismartrepli':318 'alway':545 'android':3,8,29,37,43,49,123,133,144,239 'attach':197 'audio/video':224 'backgroundcolor':497 'basic':364 'broken':227 'bubbl':128,191,320 'bubblefactori':322 'button':226 'call':178,217,225,241,248,253,258,261,265 'captur':230 'catalog':14,55,150 'chat':17,100,200,306,427,444 'chatscreen':397 'chatuikit':518 'chatuikit-cor':517 'class':105,447,455,463,528,574,584 'color.black':500 'color.white':498 'column':401 'com.cometchat.chat.models.user':394 'com.cometchat.uikit.compose.presentation':72 'com.cometchat.uikit.compose.presentation.conversations.ui.cometchatconversations':372 'com.cometchat.uikit.compose.presentation.messagelist.ui.cometchatmessagelist':392 'com.cometchat.uikit.compose.theme.cometchattheme':374 'cometchat':2,7,28,36,42,48,62,79,122,132,143,238,547 'cometchat-android-v6-calls':237 'cometchat-android-v6-compose-components':1 'cometchat-android-v6-compose-customization':41,131 'cometchat-android-v6-compose-placement':47,142 'cometchat-android-v6-compose-theming':35 'cometchat-android-v6-kotlin-components':27,121 'cometchataiassistantchathistori':303 'cometchatcallact':260 'cometchatcallbutton':222 'cometchatcalllog':176,486 'cometchatcalllogsstyl':487 'cometchatconvers':157,382,465,494 'cometchatconversationsstyl':466 'cometchatconversationsstyle.default':496 'cometchatcreatepol':288 'cometchatemojikeyboard':280 'cometchatflagmessagedialog':299 'cometchatgroup':166,438,471 'cometchatgroupmemb':170,474 'cometchatgroupmembersstyl':475 'cometchatgroupsstyl':472 'cometchatimageviewerscreen':292 'cometchatincomingcal':245 'cometchatmentionsformatt':330 'cometchatmessagebubbl':324 'cometchatmessagecompos':192,411,480 'cometchatmessagecomposerstyl':481 'cometchatmessagehead':198,402,483 'cometchatmessageheaderstyl':484 'cometchatmessageinform':205 'cometchatmessagelist':186,405,477 'cometchatmessageliststyl':478 'cometchatongoingcal':255 'cometchatoutgoingcal':250 'cometchatreactionlist':276 'cometchatsearch':272 'cometchatstickerkeyboard':284 'cometchattextformatt':329 'cometchatthem':381,400,421,437,551,596 'cometchattheme.typography':502 'cometchatthreadhead':210,489 'cometchatthreadheaderstyl':490 'cometchatus':162,422,468 'cometchatusersstyl':469 'companion':25 'companion.default':576 'complet':54 'compon':6,13,19,32,60,66,81,87,94,108,119,126,138,149,153,154,182,183,218,219,268,269,449,461,508,540,549,558 'compos':5,12,16,39,45,51,59,69,80,135,146,338,360,375,395,418,434,548 'compositionloc':555 'constructor':585 'convers':160,368,379,384,386 'conversationsscreen':377 'core':519 'correspond':452 'creat':509,559,568 'creation':291 'custom':46,127,136 'data':352,454,583 'default':331,467,470,473,476,479,482,485,488,491,593 'defaultst':333 'delivery/read':208 'depend':553 'detail':279 'develop':362 'dialog':339,340 'direct':538,586 'domain':353 'element':310 'emoji':282 'empti':334 'equival':34 'error':335 'everi':448 'everyth':542 'exampl':366 'expos':522 'factori':464,515,577 'featur':101,315 'find':102 'first':232 'first-rend':231 'formatt':327,328 'full':295 'full-screen':294 'fun':376,396,419,435 'function':70,578 'global':235,274 'group':168,175,431,440,443 'groupsscreen':436 'handl':541 'hard':543 'header':201,215 'heading1bold':503 'helper':357 'histori':179,307 'imag':297 'immut':453 'import':371,373,391,393 'incom':247 'info':209 'inject':570 'input':195 'integr':506 'interact':535 'intern':513,563 'internalcontentrender':323 'jetpack':11,58 'kotlin':31,117,125,370,390,417,433,493 'list':152,161,165,169,189,369,389,416,432 'load':336 'locat':311 'look':85 'manual':572 'member':172 'mention':325,326 'menu':342 'messag':181,188,194,207,214,302,319,388 'messagebubbl':321 'model':354 'modifi':408 'modifier.weight':409 'name':202,604 'navig':140,425,441 'need':533,602 'onconversationclick':378,385 'onitemclick':383,423,439 'outgo':252 'overrid':598 'packag':155,184,220,270,349 'paramet':21,88,590,605 'parent':213 'picker':283,287 'place':137 'placement':52,147 'poll':290 'popup':341 'popupmenu':343 'present':356 'presentation.aiassistantchathistory.ui':304 'presentation.callbuttons.ui':223 'presentation.calllogs.ui':177 'presentation.conversations.ui':158 'presentation.createpoll.ui':289 'presentation.emojikeyboard.ui':281 'presentation.groupmembers.ui':171 'presentation.groups.ui':167 'presentation.imageviewer.ui':293 'presentation.incomingcall.ui':246 'presentation.messagecomposer.ui':193 'presentation.messageheader.ui':199 'presentation.messageinformation.ui':206 'presentation.messagelist.ui':187 'presentation.ongoingcall.ui':256 'presentation.outgoingcall.ui':251 'presentation.reactionlist.ui':277 'presentation.report':300 'presentation.search.ui':273 'presentation.shared':313 'presentation.stickerkeyboard.ui':285 'presentation.threadheader.ui':211 'presentation.users.ui':163 'preview':345,348,351,359 'provid':350 'purpos':53,156,185,221,271 'reaction':278 'recent':159 'render':129,233 'report/flag':301 'requir':588 'rule':544 'screen':84,249,254,259,296 'seal':525 'search':275 'see':236 'share':309 'skill':26,75,113 'skill-cometchat-android-v6-compose-components' 'sourc':594 'source-cometchat' 'specif':99 'state':332,337,527 'stateflow':523 'status':203 'sticker':286 'style':22,104,446,456,459,462,495,573,592 'subpackag':460 'support':346 'theme':40,556 'thread':212 'titletextcolor':499 'titletextstyl':501 'token':597 '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' 'tri':566 'type':91 'typic':530 'ui':18,526 'uikit':9,63 'understand':92 'unit':380 'usag':24,365,492 'use':73,96,111,120,130,141,575,581 'user':164,234,398,399,403,404,406,407,412,413,415,424,429 'usersscreen':420 'util':267 'v6':4,10,30,38,44,50,64,124,134,145,240 'valu':557 'via':514,603 'view':33,118 'viewer':298 'viewmodel':505,512,521,537,562,571 'w4':242 'work':115 'workaround':244 'wrap':546 'wrapper':263","prices":[{"id":"184feede-cee0-436b-9418-fa8abd35570e","listingId":"b2fb806c-3701-4b00-ba63-7eae21d4806c","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.021Z"}],"sources":[{"listingId":"b2fb806c-3701-4b00-ba63-7eae21d4806c","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-android-v6-compose-components","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v6-compose-components","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:05.021Z","lastSeenAt":"2026-05-18T19:04:45.980Z"}],"details":{"listingId":"b2fb806c-3701-4b00-ba63-7eae21d4806c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-android-v6-compose-components","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":"696ac27fc3f2aefe5985c998ee26a3b899d51a85","skill_md_path":"skills/cometchat-android-v6-compose-components/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v6-compose-components"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-android-v6-compose-components","license":"MIT","description":"CometChat Android UIKit v6 Jetpack Compose component catalog — all @Composable chat UI components, their parameters, styles, and usage","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-components"},"updatedAt":"2026-05-18T19:04:45.980Z"}}