docs(react-native): add Smart Chat Features (AI) page

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",

ui-kit/react-native/ai-features.mdx

@@ -0,0 +1,98 @@
+---
+title: "Smart Chat Features"
+description: "Integrate AI-powered conversation starters, smart replies, and conversation summaries into your React Native chat app."
+---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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` + `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` |
+
+</Accordion>
+
+CometChat AI features enhance user interaction and engagement in your application. Here's how the React Native UI Kit integrates these features.
+
+<Frame>
+  <img src="/images/dc468902-AI_Overview-0c7eccf3adcb1327d6a428bb2201419e.png" />
+</Frame>
+
+## 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
+<CometChatMessageList
+  user={user}
+  showConversationStarters={true}
+/>
+```
+
+<Frame>
+  <img src="/images/5e5dd82e-cometchat-ai-features-conversation-starter-3a48939de0ec4d575fb5c788552da0a2.png" />
+</Frame>
+
+## 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
+<CometChatMessageList
+  user={user}
+  showSmartReplies={true}
+/>
+```
+
+<Frame>
+  <img src="/images/0500cc9d-cometchat-ai-features-smart-replies-9f1d86259a49e7ae41c175cad349442f.png" />
+</Frame>
+
+## 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, 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 });
+
+<CometChatMessageHeader
+  user={user}
+  showConversationSummaryButton={true}
+  onConversationSummaryPress={() => setShowSummaryPanel((prev) => !prev)}
+/>
+
+{showSummaryPanel && (
+  <CometChatConversationSummary getConversationSummary={fetchConversationSummary} />
+)}
+```
+
+Place `CometChatConversationSummary` between the message list and the composer so the panel appears above the composer.
+
+<Frame>
+  <img src="/images/9b8957a8-cometchat-ai-features-conversation-summary-e03289a4865ac61bfa870fc60b5e40ef.png" />
+</Frame>