Skip to main content
Components provide long-press context menus (e.g., on conversations or messages) and the message composer provides attachment options. You can customize all of these at the component level or via message templates.

​
Message Bubble Options

​
Via Message Templates

Each CometChatMessageTemplate has an options callback that controls what appears when a message is long-pressed: 
CometChatMessageTemplate(
  type: MessageTypeConstants.text,
  category: MessageCategoryConstants.message,
  options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
    // Get the default options
    final defaults = MessageTemplateUtils.getTextMessageOptions(
      loggedInUser, messageObject, context, group, additionalConfigurations,
    );
    // Add a custom option at the beginning
    return [
      CometChatMessageOption(
        id: 'translate',
        title: 'Translate',
        icon: Icon(Icons.translate, size: 24),
        onClick: () => translateMessage(messageObject),
      ),
      ...defaults,
    ];
  },
)

​
Replacing All Options

Return only your custom options to completely replace the defaults: 
CometChatMessageTemplate(
  type: MessageTypeConstants.text,
  category: MessageCategoryConstants.message,
  options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
    return [
      CometChatMessageOption(
        id: 'bookmark',
        title: 'Bookmark',
        icon: Icon(Icons.bookmark_border, size: 24),
        onClick: () => bookmarkMessage(messageObject),
      ),
      CometChatMessageOption(
        id: 'share',
        title: 'Share',
        icon: Icon(Icons.share, size: 24),
        onClick: () => shareMessage(messageObject),
      ),
    ];
  },
)

​
Message Option Visibility

The CometChatMessageList provides boolean properties to hide specific default options without needing to override templates: 
CometChatMessageList(
  user: user,
  hideCopyMessageOption: true,
  hideDeleteMessageOption: false,
  hideEditMessageOption: false,
  hideReactionOption: false,
  hideReplyInThreadOption: true,
  hideTranslateMessageOption: true,
  hideShareMessageOption: true,
  hideMessageInfoOption: false,
  hideMessagePrivatelyOption: true,
)

​
Composer Attachment Options

The CometChatMessageComposer provides boolean properties to control which attachment options appear: 
CometChatMessageComposer(
  user: user,
  hideImageAttachmentOption: false,
  hideVideoAttachmentOption: false,
  hideAudioAttachmentOption: true,
  hideFileAttachmentOption: false,
  hidePollsOption: true,
  hideCollaborativeDocumentOption: true,
  hideCollaborativeWhiteboardOption: true,
  hideTakePhotoOption: false,
  hideStickersButton: false,
  hideAttachmentButton: false,
)

​
Conversation Options

For conversations, use setOptions and addOptions on the CometChatConversations component: 
// Add custom options to existing defaults
CometChatConversations(
  addOptions: (context, conversation) {
    return [
      CometChatPopupMenu.MenuItem(
        id: 'pin',
        title: 'Pin Conversation',
        icon: Icon(Icons.push_pin),
        onTap: () => pinConversation(conversation),
      ),
    ];
  },
)

// Replace all options
CometChatConversations(
  setOptions: (context, conversation) {
    return [
      CometChatPopupMenu.MenuItem(
        id: 'archive',
        title: 'Archive',
        icon: Icon(Icons.archive),
        onTap: () => archiveConversation(conversation),
      ),
    ];
  },
)