From 97e87ca09e03ae61bb7df2bd00448ef54d8e942e Mon Sep 17 00:00:00 2001 From: Suraj Chauhan Date: Thu, 25 Jun 2026 18:45:49 +0530 Subject: [PATCH 1/2] docs(ui-kit/react-native): add AI smart chat features page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add ai-features.mdx covering Conversation Starter, Smart Replies, and Conversation Summary — synced with Android/iOS structure. Wires the page into docs.json nav under Features → Chat. Co-Authored-By: Claude Sonnet 4.6 --- docs.json | 3 +- ui-kit/react-native/ai-features.mdx | 79 +++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 ui-kit/react-native/ai-features.mdx diff --git a/docs.json b/docs.json index f2ad5f2c5..ba15fbe19 100644 --- a/docs.json +++ b/docs.json @@ -1122,7 +1122,8 @@ "group": "Chat", "pages": [ "ui-kit/react-native/core-features", - "ui-kit/react-native/extensions" + "ui-kit/react-native/extensions", + "ui-kit/react-native/ai-features" ] }, "ui-kit/react-native/call-features", diff --git a/ui-kit/react-native/ai-features.mdx b/ui-kit/react-native/ai-features.mdx new file mode 100644 index 000000000..d022f4386 --- /dev/null +++ b/ui-kit/react-native/ai-features.mdx @@ -0,0 +1,79 @@ +--- +title: "Smart Chat Features" +description: "Integrate AI-powered conversation starters, smart replies, and conversation summaries into your React Native chat app." +--- + + + +| Field | Value | +| --- | --- | +| Package | `@cometchat/chat-uikit-react-native` | +| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) | +| AI features | Conversation Starter, Smart Replies, Conversation Summary | +| Key components | `CometChatMessageList` (Conversation Starter, Smart Replies), `CometChatMessageHeader` (Conversation Summary) | +| Activation | Enable each AI feature from the CometChat Dashboard, then pass the corresponding prop to the component | + + + +CometChat AI features enhance user interaction and engagement in your application. Here's how the React Native UI Kit integrates these features. + + + + + +## Conversation Starter + +When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starter options. + +For a comprehensive understanding and guide on implementing and using the Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). + +Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, pass `showConversationStarters` to the [MessageList](/ui-kit/react-native/message-list) component to display the starters in an empty chat. + +```tsx + +``` + + + + + +## Smart Replies + +Smart Replies are AI-generated responses to messages. They predict what a user might want to say next by analyzing the context of the conversation, allowing for quicker and more convenient responses on mobile devices. + +For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). + +Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, pass `showSmartReplies` to the [MessageList](/ui-kit/react-native/message-list) component. Smart reply chips appear above the composer after a message is received. + +```tsx + +``` + + + + + +## Conversation Summary + +The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation. + +For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). + +Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, pass `showConversationSummaryButton` to the [MessageHeader](/ui-kit/react-native/message-header) component. A summary button appears in the header's overflow menu (⋮), and tapping it slides a summary panel in above the composer. + +```tsx + +``` + + + + From f5f81466150e58e8db9cefd35b8c5e149f68f092 Mon Sep 17 00:00:00 2001 From: Suraj Chauhan Date: Wed, 29 Jul 2026 10:27:52 +0530 Subject: [PATCH 2/2] docs(ui-kit/react-native): correct Conversation Summary wiring in AI features - showConversationSummaryButton alone is a dead prop: CometChatMessageHeader adds the overflow-menu item only when onConversationSummaryPress is also passed (CometChatMessageHeader.tsx:195) - The header ships no summary panel; it only invokes the callback. Example now renders CometChatConversationSummary with getConversationSummary backed by CometChat.getConversationSummary(), mirroring the sample app - Add CometChatConversationSummary to the Quick Reference key components row Co-Authored-By: Claude Opus 5 (1M context) --- ui-kit/react-native/ai-features.mdx | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/ui-kit/react-native/ai-features.mdx b/ui-kit/react-native/ai-features.mdx index d022f4386..f033a6ee6 100644 --- a/ui-kit/react-native/ai-features.mdx +++ b/ui-kit/react-native/ai-features.mdx @@ -10,8 +10,8 @@ description: "Integrate AI-powered conversation starters, smart replies, and con | Package | `@cometchat/chat-uikit-react-native` | | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) | | AI features | Conversation Starter, Smart Replies, Conversation Summary | -| Key components | `CometChatMessageList` (Conversation Starter, Smart Replies), `CometChatMessageHeader` (Conversation Summary) | -| Activation | Enable each AI feature from the CometChat Dashboard, then pass the corresponding prop to the component | +| Key components | `CometChatMessageList` (Conversation Starter, Smart Replies), `CometChatMessageHeader` + `CometChatConversationSummary` (Conversation Summary) | +| Activation | Enable each AI feature from the CometChat Dashboard, then pass the corresponding prop(s) to the component — Conversation Summary also needs `onConversationSummaryPress` and your own `CometChatConversationSummary` | @@ -65,15 +65,34 @@ The Conversation Summary feature provides concise summaries of long conversation For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). -Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, pass `showConversationSummaryButton` to the [MessageHeader](/ui-kit/react-native/message-header) component. A summary button appears in the header's overflow menu (⋮), and tapping it slides a summary panel in above the composer. +Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, wire it up in two parts: + +1. Pass **both** `showConversationSummaryButton` and `onConversationSummaryPress` to the [MessageHeader](/ui-kit/react-native/message-header). The summary item is added to the header's overflow menu (⋮) only when both props are present — the boolean on its own does nothing. +2. Render `CometChatConversationSummary` yourself and toggle it from that callback. The header does not ship a built-in summary panel; it only invokes your handler. ```tsx +import { useState } from 'react'; +import { CometChat } from '@cometchat/chat-sdk-react-native'; +import { CometChatMessageHeader, CometChatConversationSummary } from '@cometchat/chat-uikit-react-native'; + +const [showSummaryPanel, setShowSummaryPanel] = useState(false); + +const fetchConversationSummary = () => + CometChat.getConversationSummary(receiverId, receiverType, { lastNMessages: 1000 }); + setShowSummaryPanel((prev) => !prev)} /> + +{showSummaryPanel && ( + +)} ``` +Place `CometChatConversationSummary` between the message list and the composer so the panel appears above the composer. +