Skip to content

Enhance documentation for Mentions and add Report Message feature det… #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
swayam-cometchat wants to merge 1 commit into from
Closed

Enhance documentation for Mentions and add Report Message feature det… #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions ui-kit/react-native/core-features.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,7 @@ CometChat's Reactions feature adds a layer of expressiveness to your chat applic

## Mentions

Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.

Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MDX: the blank line before <Frame> was removed. Without it, MDX treats <Frame> as a lazy continuation of the paragraph and nests a block <div> inside a <p>. That is invalid HTML and can cause hydration warnings and layout glitches. Every other section on this page keeps the blank line.

Suggested change
Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.
Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.

<Frame>
<img src="/images/3baa8c0d-Mentions-d49539d8def32f2c894fc16c51fcf89e.png" />
</Frame>
Expand All @@ -118,6 +117,19 @@ The Threaded Conversations feature enables users to respond directly to a specif
| [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) component enables users to compose and send various types of messages. |
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component displays a chronological list of sent and received messages. It also supports Mentions, making conversations more interactive and easier to follow by highlighting direct references to users. |


## Report Message

The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing visibility conditions. The Report option only appears on other users' messages: MessageDataSource.tsx:1138 gates it on !isSentByMe. The list also force-hides it for agentic (AI) users. Without a note, developers testing on their own messages will think the feature is missing.


<Frame>
<img src="/images/android-flag-message.png" />

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong-platform screenshot. /images/android-flag-message.png is the Android UI Kit screenshot (copied from ui-kit/android/core-features.mdx:143). React Native renders CometChatReportDialog, which looks different. Please swap in an RN capture.

</Frame>

| Components | Functionality |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react-native/message-list) | [Message List](/ui-kit/react-native/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: this table uses 'Message List' (with a space), while every other table on this page uses MessageList. The column padding also doesn't line up with the header.


## Group Chat

CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
Expand Down
2 changes: 2 additions & 0 deletions ui-kit/react-native/message-composer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,8 @@ Below is a list of customizations along with corresponding code snippets
| **hideSendButton** | toggle visibility of send button option. | `hideSendButton={true}` |
| **hideAuxiliaryButtons** | toggle visibility of Auxiliary button option. | `hideAuxiliaryButtons={true}` |
| **disableMentions** | Sets whether mentions in text should be disabled. Processes the text formatters If there are text formatters available and the disableMentions flag is set to true, it removes any formatters that are instances of CometChatMentionsFormatter. | `disableMentions={true}` |
| **disableMentionAll** | Controls whether group mentions like @all appear in suggestions. | `disableMentionAll={true}` |

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing caveats. The @ALL suggestion only appears in group conversations: buildGroupMentionItem returns null without a group. It also has no effect when disableMentions={true}. Consider noting both here.

| **mentionAllLabel** | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.). | `mentionAllLabel="all"` |

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example uses the default value. "all" is already the default (CometChatMessageComposer.tsx:518), so this snippet shows no customization. Use a label like "channel", which also makes clear the label goes in without a leading @.

Suggested change
| **mentionAllLabel** | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.). | `mentionAllLabel="all"` |
| **mentionAllLabel** | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.). Defaults to `all`. | `mentionAllLabel="channel"` |


***

Expand Down
2 changes: 2 additions & 0 deletions ui-kit/react-native/message-list.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,8 @@ Below is a list of customizations along with corresponding code snippets
| **hideMessageInfoOption** | used to toggle visibility of hide message info option in MessageList | `hideMessageInfoOption={true}` |
| **hideGroupActionMessages** | used to toggle visibility of hide group action info option in MessageList | `hideGroupActionMessages={true}` |
| **hideTimestamp** | used to toggle visibility of hide timestamp in MessageList | `hideTimestamp={true}` |
| **hideFlagMessageOption** | Hides the "Report Message" option from message actions menu. | `hideFlagMessageOption={true}` |

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: the prop is hideFlag* and the source calls the option "Flag Message", but the docs call it "Report Message". Consider saying "Report (flag) Message" once, so readers searching for either name land here.

| **hideFlagMessageOption** | Hides the remark text area in the flag message dialog. | `hideFlagRemarkField={true}` |

@suraj-chauhan-cometchat suraj-chauhan-cometchat Oct 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: duplicate prop name. This row is named hideFlagMessageOption again, but it describes the remark field and its example uses hideFlagRemarkField, which is the real prop (CometChatMessageList.tsx:538). A reader who copies the bold name will hide the whole Report option instead of just the remark field.

Suggested change
| **hideFlagMessageOption** | Hides the remark text area in the flag message dialog. | `hideFlagRemarkField={true}` |
| **hideFlagRemarkField** | Hides the remark text area in the flag message dialog. | `hideFlagRemarkField={true}` |


***

Expand Down