cometchat-flutter-features

CometChat Flutter UIKit v6 — Features

How to enable, configure, and disable features in cometchat_chat_uikit.

1. Feature Categories

Every feature falls into one of three categories:

2. Auto-Enabled Features

These work immediately when you render the standard message components:

3. UIKitSettings Features

Set these on UIKitSettingsBuilder before calling CometChatUIKit.init():

Calls

final settings = (UIKitSettingsBuilder()
      ..appId = 'YOUR_APP_ID'
      ..region = 'us'
      ..authKey = 'YOUR_AUTH_KEY'
      ..subscriptionType = CometChatSubscriptionType.allUsers
      ..enableCalls = true  // ← enables voice & video calls
      ..callingConfiguration = CallingConfiguration(
           outgoingCallConfiguration: CometChatOutgoingCallConfiguration(...),
           incomingCallConfiguration: CometChatIncomingCallConfiguration(...),
           callButtonsConfiguration: CallButtonsConfiguration(...),
           groupSessionSettingsBuilder: sessionSettingsBuilder,
         ))
    .build();

When enableCalls is true, the UIKit:

1. Initializes CometChatUIKitCalls after chat SDK init
2. Registers call message templates (call bubbles in message list)
3. Shows voice/video call buttons in CometChatMessageHeader

For detailed call implementation, see the cometchat-flutter-calls skill.

Presence & Typing

..subscriptionType = CometChatSubscriptionType.allUsers

Options: allUsers, roles, friends. Controls which users' presence and typing events you receive.

Date/Time Formatting

..dateTimeFormatterCallback = (DateTime dateTime) => 'custom format'

4. Dashboard-Toggle Features

These are extensions enabled in the CometChat dashboard (app.cometchat.com → Extensions). Once enabled, the UIKit auto-wires the UI.

5. Calls

Voice and video calling for 1:1 and group conversations. Built into cometchat_chat_uikit — no separate package.

// Enable in UIKitSettings
..enableCalls = true

// Call buttons appear automatically in CometChatMessageHeader
CometChatMessageHeader(
  user: user,
  group: group,
  hideVoiceCallButton: false,  // default
  hideVideoCallButton: false,  // default
)

CallingConfiguration bundles all call component configs:

CallingConfiguration(
  outgoingCallConfiguration: CometChatOutgoingCallConfiguration(...),
  incomingCallConfiguration: CometChatIncomingCallConfiguration(...),
  callButtonsConfiguration: CallButtonsConfiguration(...),
  groupSessionSettingsBuilder: sessionSettingsBuilder,
)

For the full call flow, init sequence, and gotchas, see the cometchat-flutter-calls skill.

6. AI Features

AI features require enabling the corresponding extension in the CometChat dashboard. The UIKit provides built-in views for each.

Smart Replies

Suggested reply chips shown above the composer after receiving a message.

CometChatMessageList(
  user: user,
  group: group,
  enableSmartReplies: true,
  smartRepliesDelayDuration: 10000,  // ms before showing suggestions
  smartRepliesKeywords: ['what', 'when', 'why', 'who', 'where', 'how', '?'],
)

Conversation Starters

Suggested messages shown when the chat is empty to help start a conversation.

CometChatMessageList(
  user: user,
  group: group,
  enableConversationStarters: true,
)

Conversation Summary

A summary of the conversation shown in a panel. Available via the AI option sheet in the message header.

AI Assistant

Full AI chat assistant with chat history. Uses Clean Architecture + BLoC at chat_ui/src/ai_assistant_chat_history/. The chat history button appears in CometChatMessageHeader for AI-type users.

Related props on CometChatMessageHeader:

• hideChatHistoryButton — hide the AI chat history button
• hideNewChatButton — hide the new AI chat button
• chatHistoryButtonClick — custom callback for chat history tap
• newChatButtonClick — custom callback for new chat tap

7. Rich Text & Formatters

The composer supports rich text formatting via the WYSIWYG toolbar (bold, italic, strikethrough, inline code, ordered/bullet lists, blockquote, links, code blocks).

Text Formatters

Pass textFormatters to both CometChatMessageList and CometChatMessageComposer for consistent rendering:

// Available formatters (in shared_ui/src/formatter/)
// - CometChatMentionsFormatter  — @mention users
// - CometChatUrlFormatter       — auto-link URLs
// - CometChatPhoneNumberFormatter — auto-link phone numbers
// - CometChatEmailFormatter     — auto-link emails
// - MarkdownTextFormatter       — render markdown in bubbles

CometChatMessageList(
  user: user,
  group: group,
  textFormatters: [
    CometChatMentionsFormatter(),
    CometChatUrlFormatter(),
  ],
)

CometChatMessageComposer(
  user: user,
  group: group,
  textFormatters: [
    CometChatMentionsFormatter(),
  ],
)

Mentions

CometChatMentionsFormatter is the primary formatter for @mentions. Type @ in the composer to trigger the user suggestion list.

Related props:

• disableMentions — disable @mention suggestions on both list and composer
• disableMentionAll — disable the @all mention option (composer)
• mentionAllLabel / mentionAllLabelId — customize the @all label

Rich Text Toolbar

The composer's WYSIWYG toolbar is the active formatting system. Configure via:

CometChatMessageComposer(
  user: user,
  group: group,
  richTextConfiguration: RichTextConfiguration(...),
  richTextToolbarView: (context) => CustomToolbar(),
  onRichTextFormatApplied: (formatType) { },
)

8. Reactions

Reactions are auto-enabled. Users long-press a message to add emoji reactions.

Disabling Reactions

CometChatMessageList(
  user: user,
  group: group,
  disableReactions: true,  // hides reaction UI entirely
)

Customizing Reactions

CometChatMessageList(
  user: user,
  group: group,
  favoriteReactions: ['👍', '❤️', '😂', '😮', '😢', '🙏'],
  addReactionIcon: Icon(Icons.add_reaction),
  onReactionClick: (reaction) { },
  onReactionLongPress: (reaction) { },
  onReactionListItemClick: (reaction) { },
  reactionsRequestBuilder: ReactionsRequestBuilder()..limit = 10,
  hideReactionOption: true,  // hide "React" from long-press menu
)

9. Disabling Features

Most features can be hidden or disabled via component props.

CometChatMessageHeader

CometChatMessageList

CometChatMessageComposer

Extensions Directory

All extension implementations live under chat_ui/src/extensions/:

extensions/
├── collaborative/                  # Shared collaborative bubble
├── collaborative_document/         # Document extension
├── collaborative_whiteboard/       # Whiteboard extension
├── image_moderation/               # Image moderation filter
├── link_preview/                   # Link preview bubble
├── message_translation/            # Translation bubble + option
├── polls/                          # Poll creation + bubble
├── stickers/                       # Sticker keyboard + bubble
├── thumbnail_generation/           # Thumbnail config
├── extension_constants.dart        # Extension ID constants
├── extension_moderator.dart        # Extension moderator
└── extension.dart                  # Base extension class

Quick Reference — Enabling Everything

final settings = (UIKitSettingsBuilder()
      ..appId = 'YOUR_APP_ID'
      ..region = 'us'
      ..authKey = 'YOUR_AUTH_KEY'
      ..subscriptionType = CometChatSubscriptionType.allUsers
      ..enableCalls = true)
    .build();

await CometChatUIKit.init(uiKitSettings: settings);

// Then in your messages screen:
CometChatMessageList(
  user: user,
  group: group,
  enableSmartReplies: true,
  enableConversationStarters: true,
  enableSwipeToReply: true,
  textFormatters: [CometChatMentionsFormatter()],
)

CometChatMessageComposer(
  user: user,
  group: group,
  textFormatters: [CometChatMentionsFormatter()],
)

CometChatMessageHeader(
  user: user,
  group: group,
  // Call buttons shown automatically when enableCalls = true
)

Dashboard extensions (polls, stickers, translation, link preview, collaborative doc/whiteboard) are auto-wired once enabled in the CometChat dashboard — no code changes needed.