Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 11 additions & 9 deletions ui-kit/react/ai-features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,16 @@
| Package | `@cometchat/chat-uikit-react` |
| Required setup | Wrap app in `CometChatProvider` with valid credentials + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) |
| AI features | Conversation Starter, Smart Replies, Conversation Summary |
| Key components | `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer) (Smart Replies, Summary), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) |
| Activation | Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
| Key components | `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Conversation Starter, Smart Replies, Summary panel), `CometChatMessageHeader` → [Message Header](/ui-kit/react/components/message-header) (Summary button), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) |
| Activation | Enable each AI feature from the CometChat Dashboard **and** opt in with the component prop listed below — each prop defaults to `false`, so Dashboard activation alone renders nothing |

</Accordion>

## Overview

CometChat AI features enhance user interaction by providing contextual suggestions and summaries. Each feature is activated from the Dashboard and auto-integrates into UI Kit components.
CometChat AI features enhance user interaction by providing contextual suggestions and summaries. Each feature requires two steps: activate it from the Dashboard, and enable it on the component with the prop noted in its section below. Unlike most extensions, AI features are opt-in — they render nothing until you pass the prop.

All three suggestion panels render in the footer of [MessageList](/ui-kit/react/components/message-list), not in the Message Composer.


## Smart Chat Features
Expand All @@ -26,7 +28,7 @@

Displays AI-generated opening lines when a user starts a new chat. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).

Auto-integrates into [MessageList](/ui-kit/react/components/message-list) when activated.
Set `showConversationStarters` on [MessageList](/ui-kit/react/components/message-list) (default `false`) to enable it. Starters appear in the message list footer when the conversation has no messages.

<Frame>
<img src="/images/1cad4411-ai_conversation_starter_web_screens-e086f83ee4ee395ce75328ecc6e7d45b.png" />
Expand All @@ -36,7 +38,7 @@

AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).

Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/components/message-composer) when activated.
Set `showSmartReplies` on [MessageList](/ui-kit/react/components/message-list) (default `false`) to enable it. Replies appear in the message list footer after a received text message matches `smartRepliesKeywords`, following a `smartRepliesDelayDuration` debounce.

Check warning on line 41 in ui-kit/react/ai-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/ai-features.mdx#L41

Did you really mean 'debounce'?

<Frame>
<img src="/images/52f05152-ai_smart_replies_web_screens-8ac3840804809fd9402814764093c6fc.png" />
Expand All @@ -46,7 +48,7 @@

AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).

Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/components/message-composer) when activated.
Set `showConversationSummaryButton` on [MessageHeader](/ui-kit/react/components/message-header) (default `false`) to enable it. Clicking the button opens the summary panel in the message list footer. Add `enableAutoSummaryGeneration` to trigger it automatically once unread messages reach 15.

<Frame>
<img src="/images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png" />
Expand All @@ -59,10 +61,10 @@
AI-powered assistant component
</Card>
<Card title="Message List" icon="messages" href="/ui-kit/react/components/message-list">
Customize the message list where AI features appear
Enable Conversation Starters and Smart Replies
</Card>
<Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/components/message-composer">
Customize the composer with Smart Replies and Summary
<Card title="Message Header" icon="pen-to-square" href="/ui-kit/react/components/message-header">
Enable the Conversation Summary button
</Card>
<Card title="Core Features" icon="comments" href="/ui-kit/react/core-features">
Core chat features like messaging and reactions
Expand Down
19 changes: 12 additions & 7 deletions ui-kit/react/extensions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,18 @@
| Required setup | Wrap app in `CometChatProvider` with valid credentials + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) |
| Extension categories | User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features |
| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Translation, Link Preview, Thumbnails) |
| Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
| Activation | Enable each extension from the CometChat Dashboard — no additional code required. Note that the Stickers, Polls, Collaborative Document, Collaborative Whiteboard, and Translate entry points render in the UI regardless of activation; activation is what makes them work |

</Accordion>

## Overview

CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the [CometChat Dashboard](https://app.cometchat.com/) and auto-integrate into UI Kit components.
CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the [CometChat Dashboard](https://app.cometchat.com/) and integrate into UI Kit components without additional code.

Extensions fall into two groups, which behave differently when an extension is *not* activated:

- **Entry-point extensions** — Stickers, Polls, Collaborative Document, Collaborative Whiteboard, and Message Translation. Their buttons and menu options render unconditionally. Activation determines whether the underlying action succeeds, not whether the control appears. Hide the ones you don't offer using the Message Composer and Message List props noted in each section below.
- **Data-driven extensions** — Link Preview and Thumbnail Generation. These render only when the extension has attached data to a message, so they appear on their own once activated and are invisible until then.

<Note>
Ensure your app is wrapped in `CometChatProvider` with valid credentials. Extensions must be activated from the [CometChat Dashboard](/fundamentals/extensions-overview).
Expand All @@ -29,9 +34,9 @@

### User Experience

#### Bitly

Check warning on line 37 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L37

Did you really mean 'Bitly'?

Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).

Check warning on line 39 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L39

Did you really mean 'Bitly'?

#### Link Preview

Expand All @@ -53,7 +58,7 @@

#### Rich Media Preview

Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).

Check warning on line 61 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L61

Did you really mean 'iFramely'?

#### Save Message

Expand All @@ -79,15 +84,15 @@

### User Engagement

#### Giphy

Check warning on line 87 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L87

Did you really mean 'Giphy'?

Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).

Check warning on line 89 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L89

Did you really mean 'Giphy'?

#### Message Translation

Translates messages into the local locale. See [Message Translation Extension](/fundamentals/message-translation).

Auto-integrates into the message options menu of [MessageList](/ui-kit/react/components/message-list) when activated.
The Translate option is always present in the message options menu of [MessageList](/ui-kit/react/components/message-list) for text messages, regardless of whether the extension is activated — activation is what makes the translation request succeed. Use `hideTranslateMessageOption` on the Message List to remove it.

<Frame>
<img src="/images/0baa8eed-extension_message_translation_web_screens-4e96a6b7bc989197532d49ca83f77977.png" />
Expand All @@ -97,7 +102,7 @@

Creates polls in group discussions with predefined answer options. See [Polls Extension](/fundamentals/polls).

Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/components/message-composer) when activated.
The Polls option is always present in the attachment menu of [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated — activation is what makes poll creation succeed. Use `hideAttachmentOptions={{ polls: true }}` on the Message Composer to remove it.

<Frame>
<img src="/images/cc12b78b-extension_poll_web_screens-d48dc40c1a77ad81b6382607d7721b19.png" />
Expand All @@ -111,15 +116,15 @@

Sends pre-designed stickers in chat. See [Sticker Extension](/fundamentals/stickers).

Auto-integrates into [Message Composer](/ui-kit/react/components/message-composer) when activated.
The sticker button is always rendered in [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated. Use `hideStickersButton` on the Message Composer to remove the button entirely.

<Frame>
<img src="/images/f3262629-extension_sticker_web_screens-6e10335c8a82dea2b11cc875c44b606e.png" />
</Frame>

#### Stipop

Check warning on line 125 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L125

Did you really mean 'Stipop'?

Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).

Check warning on line 127 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L127

Did you really mean 'Stipop's'?

#### Tenor

Expand All @@ -131,7 +136,7 @@

Shared document editing for real-time collaboration. See [Collaborative Document Extension](/fundamentals/collaborative-document).

Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/components/message-composer) when activated.
The Collaborative Document option is always present in the attachment menu of [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated — activation is what makes document creation succeed. Use `hideAttachmentOptions={{ collaborativeDocument: true }}` on the Message Composer to remove it.

<Frame>
<img src="/images/ed4f9ead-extension_collaborative_document_web_screens-b636764a036d286a66cf81bf43cadf19.png" />
Expand All @@ -141,7 +146,7 @@

Real-time shared whiteboard for drawing and brainstorming. See [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).

Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/components/message-composer) when activated.
The Collaborative Whiteboard option is always present in the attachment menu of [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated — activation is what makes whiteboard creation succeed. Use `hideAttachmentOptions={{ collaborativeWhiteboard: true }}` on the Message Composer to remove it.

<Frame>
<img src="/images/6baee6d6-extension_whiteboard_web_screens-5ab03b904a0a2f6550d86c701c5fcda2.png" />
Expand All @@ -155,9 +160,9 @@

### Customer Support

#### Chatwoot

Check warning on line 163 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L163

Did you really mean 'Chatwoot'?

Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).

Check warning on line 165 in ui-kit/react/extensions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react/extensions.mdx#L165

Did you really mean 'Chatwoot'?

#### Intercom

Expand Down
Loading