{"id":"51a43890-2e58-4edb-aaf2-0d74f1673635","shortId":"7H8efz","kind":"skill","title":"cometchat-flutter-v5-customization","tagline":"Use when customizing CometChat Flutter UIKit v5 beyond props — custom bubbles, templates, DataSource decorators, slot views, formatters.","description":"# CometChat Flutter UIKit v5 — Customization\n\nFour tiers of customization, from simple to deep.\n\n## Tier 1: Props\n\nPass props directly to components:\n\n```dart\nCometChatMessageList(\n  user: user,\n  hideEditMessageOption: true,\n  hideReactionOption: true,\n  receiptsVisibility: false,\n)\n```\n\n## Tier 2: Slot Views\n\nReplace specific UI sections via callback props:\n\n```dart\nCometChatConversations(\n  subtitleView: (context, conversation) {\n    final lastMessage = conversation.lastMessage;\n    if (lastMessage is TextMessage) {\n      return Text(lastMessage.text, maxLines: 1, overflow: TextOverflow.ellipsis);\n    }\n    return null; // Falls back to default\n  },\n  trailingView: (conversation) {\n    return Badge(count: conversation.unreadMessageCount);\n  },\n)\n\nCometChatMessageHeader(\n  listItemView: (group, user, context) {\n    return Column(\n      crossAxisAlignment: CrossAxisAlignment.start,\n      children: [\n        Text(\"Thread\", style: TextStyle(fontWeight: FontWeight.bold)),\n        Text(user?.name ?? group?.name ?? \"\"),\n      ],\n    );\n  },\n)\n```\n\nAvailable slot views per component:\n- `CometChatConversations`: `subtitleView`, `listItemView`, `trailingView`, `leadingView`, `titleView`\n- `CometChatMessageHeader`: `subtitleView`, `listItemView`, `trailingView`\n- `CometChatMessageList`: `headerView`, `footerView`, `loadingStateView`, `emptyStateView`, `errorStateView`\n- `CometChatUsers`: `subtitleView`, `listItemView`, `leadingView`, `titleView`, `trailingView`\n- `CometChatGroups`: `subtitleView`, `listItemView`, `leadingView`, `titleView`, `trailingView`\n\n## Tier 3: Text Formatters\n\nCustom text formatters transform how message text is displayed:\n\n```dart\nCometChatMessageList(\n  textFormatters: [\n    CometChatEmailFormatter(),\n    CometChatPhoneNumberFormatter(),\n    CometChatUrlFormatter(),\n    CometChatMentionsFormatter(\n      user: user,\n      group: group,\n      onMentionTap: (mention, mentionedUser, {message}) {\n        // Navigate to user's chat\n      },\n    ),\n  ],\n)\n```\n\nBuilt-in formatters:\n- `CometChatEmailFormatter` — makes emails tappable\n- `CometChatPhoneNumberFormatter` — makes phone numbers tappable\n- `CometChatUrlFormatter` — makes URLs tappable\n- `CometChatMentionsFormatter` — handles @mentions with tap callbacks\n\nPass the same formatters to both `CometChatMessageList` and `CometChatMessageComposer` for consistency.\n\n## Tier 4: DataSource Decorator Pattern\n\nThe deepest customization level. `ChatConfigurator` uses a decorator pattern with `MessagesDataSource` as the base:\n\n```\nChatConfigurator\n  └── DataSource (interface)\n      └── MessagesDataSource (default implementation)\n          └── ExtensionDecorator (wraps and overrides)\n```\n\n### How extensions use it\n\nEach extension (polls, stickers, link preview, etc.) has a decorator:\n\n```dart\n// Example: PollsExtensionDecorator wraps the DataSource\nclass PollsExtensionDecorator extends DataSourceDecorator {\n  PollsExtensionDecorator(DataSource dataSource) : super(dataSource);\n\n  @override\n  List<CometChatMessageTemplate> getAllMessageTemplates() {\n    // Add poll template to existing templates\n    return [...super.getAllMessageTemplates(), _getPollTemplate()];\n  }\n}\n```\n\nExtensions are registered via `UIKitSettingsBuilder`:\n\n```dart\nfinal settings = (UIKitSettingsBuilder()\n  ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()\n  ..aiFeature = CometChatUIKitChatAIFeatures.getDefaultAiFeatures()\n).build();\n```\n\n### Available extensions\n\n| Extension | Decorator | What it adds |\n|-----------|-----------|-------------|\n| Polls | `PollsExtensionDecorator` | Poll creation + voting bubble |\n| Stickers | `StickersExtensionDecorator` | Sticker keyboard + bubble |\n| Link Preview | `LinkPreviewExtensionDecorator` | URL preview cards |\n| Message Translation | `MessageTranslationExtensionDecorator` | Translate option |\n| Image Moderation | `ImageModerationExtensionDecorator` | NSFW filter |\n| Collaborative Document | `CollaborativeDocumentExtensionDecorator` | Shared doc |\n| Collaborative Whiteboard | `CollaborativeWhiteboardExtensionDecorator` | Shared whiteboard |\n| Thumbnail Generation | `ThumbnailGenerationExtensionDecorator` | Image thumbnails |\n\n### CometChatCallingExtension\n\nThe calling extension also uses this pattern:\n\n```dart\nclass CometChatCallingExtension extends ExtensionsDataSource {\n  @override\n  void addExtension() {\n    ChatConfigurator.enable((dataSource) =>\n        CallingExtensionDecorator(dataSource, configuration: configuration));\n  }\n}\n```\n\n## Message Templates\n\n`CometChatMessageTemplate` defines how a message type is rendered:\n\n```dart\nCometChatMessageList(\n  templates: [\n    CometChatMessageTemplate(\n      type: 'custom_type',\n      category: 'custom',\n      contentView: (message, context, alignment) {\n        return Container(\n          child: Text('Custom bubble: ${message.id}'),\n        );\n      },\n    ),\n  ],\n)\n```\n\n## Options Menu Customization\n\nAdd or replace long-press options on conversations, users, groups:\n\n```dart\nCometChatConversations(\n  // Replace all options\n  setOptions: (conversation, controller, context) {\n    return [CometChatOption(id: 'pin', title: 'Pin', onClick: () { ... })];\n  },\n  // Add to existing options\n  addOptions: (conversation, controller, context) {\n    return [CometChatOption(id: 'archive', title: 'Archive', onClick: () { ... })];\n  },\n)\n```\n\n## Header Options (Messages)\n\n```dart\nCometChatMessageHeader(\n  options: (user, group, context) {\n    return [\n      CometChatOption(\n        id: 'user-info',\n        title: 'User Info',\n        iconWidget: Icon(Icons.info_outline),\n        onClick: () { ... },\n      ),\n      CometChatOption(\n        id: 'search',\n        title: 'Search',\n        iconWidget: Icon(Icons.search),\n        onClick: () { ... },\n      ),\n    ];\n  },\n)\n```\n\n## Checklist — Customization\n\n- [ ] Start with props (Tier 1) before going deeper\n- [ ] Slot views return `null` to fall back to default rendering\n- [ ] Text formatters consistent between MessageList and Composer\n- [ ] Extensions registered via `UIKitSettingsBuilder.extensions`\n- [ ] Custom templates specify `type` and `category`","tags":["cometchat","flutter","customization","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-flutter-v5-customization","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-customization","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,124 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.016Z","embedding":null,"createdAt":"2026-05-07T13:05:09.348Z","updatedAt":"2026-05-18T19:04:50.016Z","lastSeenAt":"2026-05-18T19:04:50.016Z","tsv":"'1':37,81,485 '2':55 '3':151 '4':218 'add':278,307,405,432 'addextens':365 'addopt':436 'aifeatur':298 'align':394 'also':354 'archiv':443,445 'avail':117,301 'back':87,495 'badg':93 'base':235 'beyond':13 'bubbl':16,313,318,400 'build':300 'built':184 'built-in':183 'call':352 'callback':63,205 'callingextensiondecor':368 'card':324 'categori':389,515 'chat':182 'chatconfigur':226,236 'chatconfigurator.enable':366 'checklist':479 'child':397 'children':105 'class':266,359 'collabor':335,340 'collaborativedocumentextensiondecor':337 'collaborativewhiteboardextensiondecor':342 'column':102 'cometchat':2,9,23 'cometchat-flutter-v5-customization':1 'cometchatcallingextens':350,360 'cometchatconvers':66,122,417 'cometchatemailformatt':166,187 'cometchatgroup':144 'cometchatmentionsformatt':169,200 'cometchatmessagecompos':214 'cometchatmessagehead':96,128,451 'cometchatmessagelist':45,132,164,212,383 'cometchatmessagetempl':374,385 'cometchatopt':426,441,457,470 'cometchatphonenumberformatt':167,191 'cometchatuikitchataifeatures.getdefaultaifeatures':299 'cometchatuikitchatextensions.getdefaultextensions':297 'cometchaturlformatt':168,196 'cometchatus':138 'compon':43,121 'compos':505 'configur':370,371 'consist':216,501 'contain':396 'contentview':391 'context':68,100,393,424,439,455 'control':423,438 'convers':69,91,413,422,437 'conversation.lastmessage':72 'conversation.unreadmessagecount':95 'count':94 'creation':311 'crossaxisalign':103 'crossaxisalignment.start':104 'custom':5,8,15,27,31,154,224,387,390,399,404,480,510 'dart':44,65,163,260,292,358,382,416,450 'datasourc':18,219,237,265,271,272,274,367,369 'datasourcedecor':269 'decor':19,220,229,259,304 'deep':35 'deeper':488 'deepest':223 'default':89,240,497 'defin':375 'direct':41 'display':162 'doc':339 'document':336 'email':189 'emptystateview':136 'errorstateview':137 'etc':256 'exampl':261 'exist':282,434 'extend':268,361 'extens':247,251,287,296,302,303,353,506 'extensiondecor':242 'extensionsdatasourc':362 'fall':86,494 'fals':53 'filter':334 'final':70,293 'flutter':3,10,24 'fontweight':110 'fontweight.bold':111 'footerview':134 'formatt':22,153,156,186,209,500 'four':28 'generat':346 'getallmessagetempl':277 'getpolltempl':286 'go':487 'group':98,115,172,173,415,454 'handl':201 'header':447 'headerview':133 'hideeditmessageopt':48 'hidereactionopt':50 'icon':466,476 'icons.info':467 'icons.search':477 'iconwidget':465,475 'id':427,442,458,471 'imag':330,348 'imagemoderationextensiondecor':332 'implement':241 'info':461,464 'interfac':238 'keyboard':317 'lastmessag':71,74 'lastmessage.text':79 'leadingview':126,141,147 'level':225 'link':254,319 'linkpreviewextensiondecor':321 'list':276 'listitemview':97,124,130,140,146 'loadingstateview':135 'long':409 'long-press':408 'make':188,192,197 'maxlin':80 'mention':175,202 'mentionedus':176 'menu':403 'messag':159,177,325,372,378,392,449 'message.id':401 'messagelist':503 'messagesdatasourc':232,239 'messagetranslationextensiondecor':327 'moder':331 'name':114,116 'navig':178 'nsfw':333 'null':85,492 'number':194 'onclick':431,446,469,478 'onmentiontap':174 'option':329,402,411,420,435,448,452 'outlin':468 'overflow':82 'overrid':245,275,363 'pass':39,206 'pattern':221,230,357 'per':120 'phone':193 'pin':428,430 'poll':252,279,308,310 'pollsextensiondecor':262,267,270,309 'press':410 'preview':255,320,323 'prop':14,38,40,64,483 'receiptsvis':52 'regist':289,507 'render':381,498 'replac':58,407,418 'return':77,84,92,101,284,395,425,440,456,491 'search':472,474 'section':61 'set':294 'setopt':421 'share':338,343 'simpl':33 'skill' 'skill-cometchat-flutter-v5-customization' 'slot':20,56,118,489 'source-cometchat' 'specif':59 'specifi':512 'start':481 'sticker':253,314,316 'stickersextensiondecor':315 'style':108 'subtitleview':67,123,129,139,145 'super':273 'super.getallmessagetemplates':285 'tap':204 'tappabl':190,195,199 'templat':17,280,283,373,384,511 'text':78,106,112,152,155,160,398,499 'textformatt':165 'textmessag':76 'textoverflow.ellipsis':83 'textstyl':109 'thread':107 'thumbnail':345,349 'thumbnailgenerationextensiondecor':347 'tier':29,36,54,150,217,484 'titl':429,444,462,473 'titleview':127,142,148 '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' 'trailingview':90,125,131,143,149 'transform':157 'translat':326,328 'true':49,51 'type':379,386,388,513 'ui':60 'uikit':11,25 'uikitsettingsbuild':291,295 'uikitsettingsbuilder.extensions':509 'url':198,322 'use':6,227,248,355 'user':46,47,99,113,170,171,180,414,453,460,463 'user-info':459 'v5':4,12,26 'via':62,290,508 'view':21,57,119,490 'void':364 'vote':312 'whiteboard':341,344 'wrap':243,263","prices":[{"id":"e035df18-7d22-44f4-a6d7-40c8c26ee285","listingId":"51a43890-2e58-4edb-aaf2-0d74f1673635","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.348Z"}],"sources":[{"listingId":"51a43890-2e58-4edb-aaf2-0d74f1673635","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-flutter-v5-customization","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v5-customization","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:09.348Z","lastSeenAt":"2026-05-18T19:04:50.016Z"}],"details":{"listingId":"51a43890-2e58-4edb-aaf2-0d74f1673635","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-flutter-v5-customization","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":"8ce720e353285e40212a1176d0498bd05d795570","skill_md_path":"skills/cometchat-flutter-v5-customization/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v5-customization"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-flutter-v5-customization","license":"MIT","description":"Use when customizing CometChat Flutter UIKit v5 beyond props — custom bubbles, templates, DataSource decorators, slot views, formatters.","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-customization"},"updatedAt":"2026-05-18T19:04:50.016Z"}}