{"id":"dd407fdc-5049-4a25-ba5d-f57d96f564e7","shortId":"B3YExK","kind":"skill","title":"cometchat-flutter-v5-messages","tagline":"Use when working with CometChat Flutter UIKit v5 message components. Triggers on CometChatMessageList, CometChatMessageComposer, CometChatCompactMessageComposer, CometChatMessageHeader, threads.","description":"# CometChat Flutter UIKit v5 — Messages\n\nComponents for displaying, sending, and managing messages.\n\n## CometChatMessageList\n\nDisplays messages in a conversation.\n\n### Key Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `user` | `User?` | — | User for 1-on-1 chat (one of user/group required) |\n| `group` | `Group?` | — | Group for group chat |\n| `messagesRequestBuilder` | `MessagesRequestBuilder?` | — | Custom message fetch builder |\n| `style` | `CometChatMessageListStyle?` | — | Visual styling |\n| `alignment` | `ChatAlignment` | `standard` | `standard` or `leftAligned` |\n| `onThreadRepliesClick` | `ThreadRepliesClick?` | — | Thread reply tap callback |\n| `templates` | `List<CometChatMessageTemplate>?` | — | Custom message templates |\n| `textFormatters` | `List<CometChatTextFormatter>?` | — | Custom text formatters |\n| `receiptsVisibility` | `bool` | `true` | Show read receipts |\n| `avatarVisibility` | `bool` | `true` | Show avatars |\n| `disableReactions` | `bool` | `false` | Disable reactions |\n| `disableMentions` | `bool?` | — | Disable @mentions |\n| `messageId` | `int?` | — | Scroll to specific message |\n| `startFromUnreadMessages` | `bool` | `false` | Start from unread |\n| `showMarkAsUnreadOption` | `bool` | `false` | Show mark-as-unread option |\n| `enableSmartReplies` | `bool` | `false` | Enable AI smart replies |\n| `enableConversationStarters` | `bool` | `false` | Enable conversation starters |\n| `generateConversationSummary` | `bool` | `false` | Generate AI summary |\n| `hideEditMessageOption` | `bool` | `false` | Hide edit option |\n| `hideDeleteMessageOption` | `bool` | `false` | Hide delete option |\n| `hideReplyInThreadOption` | `bool` | `false` | Hide reply-in-thread |\n| `hideThreadView` | `bool?` | — | Hide thread view entirely |\n| `hideReactionOption` | `bool` | `false` | Hide reaction option |\n| `hideTranslateMessageOption` | `bool` | `false` | Hide translate option |\n| `hideMessagePrivatelyOption` | `bool` | `false` | Hide private message option |\n| `hideMessageInfoOption` | `bool` | `false` | Hide message info |\n| `hideFlagOption` | `bool` | `false` | Hide flag/report option |\n| `loadingStateView` | `WidgetBuilder?` | — | Custom loading state |\n| `emptyStateView` | `WidgetBuilder?` | — | Custom empty state |\n| `errorStateView` | `WidgetBuilder?` | — | Custom error state |\n\n### Usage\n\n```dart\nCometChatMessageList(\n  user: user,\n  textFormatters: [\n    CometChatEmailFormatter(),\n    CometChatPhoneNumberFormatter(),\n    CometChatUrlFormatter(),\n    CometChatMentionsFormatter(user: user),\n  ],\n  receiptsVisibility: true,\n  hideReplyInThreadOption: false,\n  hideEditMessageOption: false,\n  hideDeleteMessageOption: false,\n)\n```\n\n## CometChatMessageComposer\n\nFull-featured message input with attachments, voice recording, mentions, and AI features.\n\n### Key Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `user` | `User?` | — | Target user (one of user/group required) |\n| `group` | `Group?` | — | Target group |\n| `messageComposerStyle` | `CometChatMessageComposerStyle?` | — | Visual styling |\n| `parentMessageId` | `int` | `0` | Thread parent message ID |\n| `placeholderText` | `String?` | — | Input placeholder |\n| `textFormatters` | `List<CometChatTextFormatter>?` | — | Text formatters |\n| `disableTypingEvents` | `bool` | `false` | Disable typing indicators |\n| `disableMentions` | `bool?` | — | Disable @mentions |\n| `disableMentionAll` | `bool` | `false` | Disable @all mentions |\n| `hideVoiceRecordingButton` | `bool?` | — | Hide voice recording |\n| `hideAttachmentButton` | `bool?` | — | Hide attachment button |\n| `hideSendButton` | `bool?` | — | Hide send button |\n| `hideStickersButton` | `bool?` | — | Hide stickers |\n| `hideImageAttachmentOption` | `bool?` | — | Hide image attachment |\n| `hideVideoAttachmentOption` | `bool?` | — | Hide video attachment |\n| `hideAudioAttachmentOption` | `bool?` | — | Hide audio attachment |\n| `hideFileAttachmentOption` | `bool?` | — | Hide file attachment |\n| `hidePollsOption` | `bool?` | — | Hide polls |\n| `hideCollaborativeDocumentOption` | `bool?` | — | Hide collaborative doc |\n| `hideCollaborativeWhiteboardOption` | `bool?` | — | Hide whiteboard |\n| `hideTakePhotoOption` | `bool?` | — | Hide take photo |\n| `onSendButtonTap` | `Function?` | — | Custom send handler |\n| `onError` | `OnError?` | — | Error callback |\n\n## CometChatCompactMessageComposer\n\nCompact variant with rounded pill-shaped input, inline rich text toolbar, and modern minimal aesthetic. Use it explicitly in your widget tree when you want this look — there is no global `Layout` toggle that swaps composers automatically.\n\n### Props unique to Compact (not in regular composer)\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `compactMessageComposerStyle` | `CometChatCompactMessageComposerStyle?` | — | Visual styling |\n| `enableRichTextFormatting` | `bool` | `true` | Enable rich text (master switch) |\n| `showRichTextFormattingOptions` | `bool` | `true` | Show toolbar above composer |\n| `showTextSelectionMenuItems` | `bool` | `true` | Formatting in text selection menu |\n| `hideRichTextFormattingOptions` | `Set<FormatType>?` | — | Hide specific format types |\n| `richTextToolbarStyle` | `CometChatRichTextToolbarStyle?` | — | Toolbar styling |\n| `enterKeyBehavior` | `EnterKeyBehavior` | `newLine` | Enter key: `sendMessage` or `newLine` |\n\nAll other props (user, group, parentMessageId, hide* options, textFormatters, etc.) are the same as `CometChatMessageComposer`.\n\n### Usage\n\n```dart\n// ✅ CORRECT — compact composer with thread support\nCometChatCompactMessageComposer(\n  user: user,\n  parentMessageId: parentMessage.id,\n  disableTypingEvents: false,\n  disableMentions: false,\n  hideVoiceRecordingButton: false,\n)\n```\n\n## CometChatMessageHeader\n\nDisplays user/group info. Implements `PreferredSizeWidget` for use as `appBar`.\n\n### Key Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `user` | `User?` | User to display |\n| `group` | `Group?` | Group to display |\n| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | Visual styling |\n| `subtitleView` | `Widget? Function(Group?, User?, BuildContext)?` | Custom subtitle |\n| `listItemView` | `Widget Function(Group?, User?, BuildContext)?` | Custom list item |\n| `showBackButton` | `bool?` | Show back button (default: true) |\n| `onBack` | `VoidCallback?` | Back button callback |\n| `hideVideoCallButton` | `bool?` | Hide video call button |\n| `hideVoiceCallButton` | `bool?` | Hide voice call button |\n| `usersStatusVisibility` | `bool` | Show online status (default: true) |\n| `options` | `Function(User?, Group?, BuildContext)?` | Custom header options menu |\n\n## CometChatThreadedHeader\n\nDisplays the parent message for threaded conversations.\n\n### Key Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `parentMessage` | `BaseMessage` | The parent message (required) |\n| `loggedInUser` | `User` | Current logged-in user (NON-nullable; pass `CometChatUIKit.loggedInUser!`) |\n| `template` | `CometChatMessageTemplate?` | Message template |\n| `receiptsVisibility` | `bool?` | Show receipts |\n| `height` | `double?` | Header height |\n| `width` | `double?` | Header width |\n| `messageActionView` | `Function(BaseMessage, BuildContext)?` | Builder for a custom action view in the header |\n| `style` | `CometChatThreadedHeaderStyle?` | Visual style |\n| `textFormatters` | `List<CometChatTextFormatter>?` | Custom text formatters |\n\n### Threaded Messages Pattern\n\n```dart\nScaffold(\n  body: Column(\n    children: [\n      CometChatThreadedHeader(\n        parentMessage: parentMessage,\n        loggedInUser: CometChatUIKit.loggedInUser!,\n      ),\n      Expanded(\n        child: CometChatMessageList(\n          user: user,\n          messagesRequestBuilder: MessagesRequestBuilder()\n            ..parentMessageId = parentMessage.id,\n        ),\n      ),\n      CometChatMessageComposer(\n        user: user,\n        parentMessageId: parentMessage.id,\n      ),\n    ],\n  ),\n)\n```\n\n## Sending Messages Programmatically\n\nUse `CometChatUIKit` static methods (not `CometChat` directly) to ensure UIKit events fire:\n\n```dart\n// ✅ CORRECT\nCometChatUIKit.sendTextMessage(message, onSuccess: ..., onError: ...);\n\n// ❌ WRONG — bypasses UIKit events (ccMessageSent won't fire)\nCometChat.sendMessage(message, onSuccess: ...);\n```\n\n## Golden Path — Messages Screen\n\n```dart\nclass MessagesScreen extends StatelessWidget {\n  final User? user;\n  final Group? group;\n  const MessagesScreen({super.key, this.user, this.group});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: CometChatMessageHeader(\n        user: user,\n        group: group,\n        onBack: () => Navigator.pop(context),\n      ),\n      body: Column(\n        children: [\n          Expanded(child: CometChatMessageList(user: user, group: group)),\n          CometChatMessageComposer(user: user, group: group),\n        ],\n      ),\n    );\n  }\n}\n```\n\n## Anti-Patterns\n\n```dart\n// ❌ WRONG — passing two NON-null targets at the same time\nCometChatMessageList(user: aUser, group: aGroup) // ambiguous — kit ignores group\n// ✅ At any moment, exactly one of user/group must be non-null.\n// Passing both fields with one null (e.g. `user: user, group: null`) is fine\n// and is what the chat-builder sample app does to switch between contexts.\n\n// ❌ WRONG — using CometChat.sendMessage instead of CometChatUIKit\nCometChat.sendMessage(message, onSuccess: ...);\n```\n\n## Checklist — Messages Screen\n\n- [ ] Only one of `user` or `group` passed to each component\n- [ ] Same `user`/`group` passed to Header, List, and Composer\n- [ ] Thread replies use `parentMessageId` on both List and Composer\n- [ ] Messages sent via `CometChatUIKit.sendTextMessage()`","tags":["cometchat","flutter","messages","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-flutter-v5-messages","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-flutter-v5-messages","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 (9,812 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:50.197Z","embedding":null,"createdAt":"2026-05-07T13:05:09.681Z","updatedAt":"2026-05-18T19:04:50.197Z","lastSeenAt":"2026-05-18T19:04:50.197Z","tsv":"'-1':53 '0':287 '1':51 'action':653 'aesthet':398 'agroup':796 'ai':142,155,261 'align':75 'ambigu':797 'anti':778 'anti-pattern':777 'app':834 'appbar':521,753 'attach':256,324,339,344,349,354 'audio':348 'auser':794 'automat':420 'avatar':107 'avatarvis':103 'back':561,567 'basemessag':612,647 'bodi':672,762 'bool':98,104,109,114,124,130,139,146,152,158,164,170,178,184,190,196,203,209,301,307,311,317,322,327,332,336,341,346,351,356,360,365,369,438,446,453,559,571,577,583,634 'build':748 'buildcontext':546,554,593,648,749 'builder':70,649,832 'button':325,330,562,568,575,581 'bypass':716 'call':574,580 'callback':86,381,569 'ccmessages':719 'chat':54,64,831 'chat-build':830 'chatalign':76 'checklist':849 'child':681,766 'children':674,764 'class':731 'collabor':362 'column':673,763 'cometchat':2,10,23,702 'cometchat-flutter-v5-messages':1 'cometchat.sendmessage':723,842,846 'cometchatcompactmessagecompos':20,382,501 'cometchatcompactmessagecomposerstyl':434 'cometchatemailformatt':235 'cometchatmentionsformatt':238 'cometchatmessagecompos':19,249,492,689,772 'cometchatmessagecomposerstyl':282 'cometchatmessagehead':21,512,754 'cometchatmessageheaderstyl':538 'cometchatmessagelist':18,35,231,682,767,792 'cometchatmessageliststyl':72 'cometchatmessagetempl':630 'cometchatphonenumberformatt':236 'cometchatrichtexttoolbarstyl':467 'cometchatthreadedhead':598,675 'cometchatthreadedheaderstyl':659 'cometchatuikit':698,845 'cometchatuikit.loggedinuser':628,679 'cometchatuikit.sendtextmessage':711,883 'cometchaturlformatt':237 'compact':383,424,496 'compactmessagecomposerstyl':433 'compon':15,28,861 'compos':419,428,451,497,870,879 'const':741 'context':750,761,839 'convers':40,149,605 'correct':495,710 'current':619 'custom':67,89,94,216,221,226,375,547,555,594,652,664 'dart':230,494,670,709,730,780 'default':45,267,431,563,587 'delet':167 'descript':46,268,432,526,610 'direct':703 'disabl':111,115,303,308,313 'disablement':113,306,508 'disablementional':310 'disablereact':108 'disabletypingev':300,506 'display':30,36,513,531,536,599 'doc':363 'doubl':638,642 'e.g':819 'edit':161 'empti':222 'emptystateview':219 'enabl':141,148,440 'enableconversationstart':145 'enablerichtextformat':437 'enablesmartrepli':138 'ensur':705 'enter':473 'enterkeybehavior':470,471 'entir':182 'error':227,380 'errorstateview':224 'etc':487 'event':707,718 'exact':804 'expand':680,765 'explicit':401 'extend':733 'fals':110,125,131,140,147,153,159,165,171,185,191,197,204,210,244,246,248,302,312,507,509,511 'featur':252,262 'fetch':69 'field':815 'file':353 'final':735,738 'fine':825 'fire':708,722 'flag/report':212 'flutter':3,11,24 'format':455,464 'formatt':96,299,666 'full':251 'full-featur':250 'function':374,543,551,590,646 'generat':154 'generateconversationsummari':151 'global':414 'golden':726 'group':59,60,61,63,277,278,280,482,532,533,534,544,552,592,739,740,757,758,770,771,775,776,795,800,822,857,864 'handler':377 'header':595,639,643,657,867 'height':637,640 'hide':160,166,172,179,186,192,198,205,211,318,323,328,333,337,342,347,352,357,361,366,370,462,484,572,578 'hideattachmentbutton':321 'hideaudioattachmentopt':345 'hidecollaborativedocumentopt':359 'hidecollaborativewhiteboardopt':364 'hidedeletemessageopt':163,247 'hideeditmessageopt':157,245 'hidefileattachmentopt':350 'hideflagopt':208 'hideimageattachmentopt':335 'hidemessageinfoopt':202 'hidemessageprivatelyopt':195 'hidepollsopt':355 'hidereactionopt':183 'hidereplyinthreadopt':169,243 'hiderichtextformattingopt':460 'hidesendbutton':326 'hidestickersbutton':331 'hidetakephotoopt':368 'hidethreadview':177 'hidetranslatemessageopt':189 'hidevideoattachmentopt':340 'hidevideocallbutton':570 'hidevoicecallbutton':576 'hidevoicerecordingbutton':316,510 'id':291 'ignor':799 'imag':338 'implement':516 'indic':305 'info':207,515 'inlin':391 'input':254,294,390 'instead':843 'int':118,286 'item':557 'key':41,263,474,522,606 'kit':798 'layout':415 'leftalign':80 'list':88,93,297,556,663,868,877 'listitemview':549 'load':217 'loadingstateview':214 'log':621 'logged-in':620 'loggedinus':617,678 'look':410 'manag':33 'mark':134 'mark-as-unread':133 'master':443 'mention':116,259,309,315 'menu':459,597 'messag':5,14,27,34,37,68,90,122,200,206,253,290,602,615,631,668,695,712,724,728,847,850,880 'messageactionview':645 'messagecomposerstyl':281 'messageheaderstyl':537 'messageid':117 'messagesrequestbuild':65,66,685,686 'messagesscreen':732,742 'method':700 'minim':397 'modern':396 'moment':803 'must':808 'navigator.pop':760 'newlin':472,477 'non':625,785,811 'non-nul':624,784,810 'null':786,812,818,823 'nullabl':626 'onback':565,759 'one':55,273,805,817,853 'onerror':378,379,714 'onlin':585 'onsendbuttontap':373 'onsuccess':713,725,848 'onthreadrepliesclick':81 'option':137,162,168,188,194,201,213,485,589,596 'overrid':746 'parent':289,601,614 'parentmessag':611,676,677 'parentmessage.id':505,688,693 'parentmessageid':285,483,504,687,692,874 'pass':627,782,813,858,865 'path':727 'pattern':669,779 'photo':372 'pill':388 'pill-shap':387 'placehold':295 'placeholdertext':292 'poll':358 'preferredsizewidget':517 'privat':199 'programmat':696 'prop':42,43,264,265,421,429,480,523,524,607,608 'reaction':112,187 'read':101 'receipt':102,636 'receiptsvis':97,241,633 'record':258,320 'regular':427 'repli':84,144,174,872 'reply-in-thread':173 'requir':58,276,616 'return':751 'rich':392,441 'richtexttoolbarstyl':466 'round':386 'sampl':833 'scaffold':671,752 'screen':729,851 'scroll':119 'select':458 'send':31,329,376,694 'sendmessag':475 'sent':881 'set':461 'shape':389 'show':100,106,132,448,560,584,635 'showbackbutton':558 'showmarkasunreadopt':129 'showrichtextformattingopt':445 'showtextselectionmenuitem':452 'skill' 'skill-cometchat-flutter-v5-messages' 'smart':143 'source-cometchat' 'specif':121,463 'standard':77,78 'start':126 'starter':150 'startfromunreadmessag':123 'state':218,223,228 'statelesswidget':734 'static':699 'status':586 'sticker':334 'string':293 'style':71,74,284,436,469,540,658,661 'subtitl':548 'subtitleview':541 'summari':156 'super.key':743 'support':500 'swap':418 'switch':444,837 'take':371 'tap':85 'target':271,279,787 'templat':87,91,629,632 'text':95,298,393,442,457,665 'textformatt':92,234,296,486,662 'this.group':745 'this.user':744 'thread':22,83,176,180,288,499,604,667,871 'threadrepliesclick':82 'time':791 'toggl':416 'toolbar':394,449,468 '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' 'translat':193 'tree':405 'trigger':16 'true':99,105,242,439,447,454,564,588 'two':783 'type':44,266,304,430,465,525,609 'uikit':12,25,706,717 'uniqu':422 'unread':128,136 'usag':229,493 'use':6,399,519,697,841,873 'user':47,48,49,232,233,239,240,269,270,272,481,502,503,527,528,529,545,553,591,618,623,683,684,690,691,736,737,755,756,768,769,773,774,793,820,821,855,863 'user/group':57,275,514,807 'usersstatusvis':582 'v5':4,13,26 'variant':384 'via':882 'video':343,573 'view':181,654 'visual':73,283,435,539,660 'voic':257,319,579 'voidcallback':566 'want':408 'whiteboard':367 'widget':404,542,550,747 'widgetbuild':215,220,225 'width':641,644 'won':720 'work':8 'wrong':715,781,840","prices":[{"id":"7847bb67-03f3-43a9-8347-1853af6c47e9","listingId":"dd407fdc-5049-4a25-ba5d-f57d96f564e7","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:09.681Z"}],"sources":[{"listingId":"dd407fdc-5049-4a25-ba5d-f57d96f564e7","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-flutter-v5-messages","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v5-messages","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:09.681Z","lastSeenAt":"2026-05-18T19:04:50.197Z"}],"details":{"listingId":"dd407fdc-5049-4a25-ba5d-f57d96f564e7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-flutter-v5-messages","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":"359e041abb85e974c0c6f76dc09b885ee2d5a983","skill_md_path":"skills/cometchat-flutter-v5-messages/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v5-messages"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-flutter-v5-messages","license":"MIT","description":"Use when working with CometChat Flutter UIKit v5 message components. Triggers on CometChatMessageList, CometChatMessageComposer, CometChatCompactMessageComposer, CometChatMessageHeader, threads.","compatibility":"cometchat_chat_uikit ^5.2.14; cometchat_uikit_shared ^5.2.3"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-flutter-v5-messages"},"updatedAt":"2026-05-18T19:04:50.197Z"}}