Docs/react UI kit v6

fundamentals/extensions-overview.mdx

@@ -11,32 +11,32 @@ Extensions pickup where our core leaves. They help extend the functionality of C
 
 Extensions that help improve the user messaging experience. *Recommended for most apps.*
 
-[Pin message](/fundamentals/pin-message)\
 [Bitly](/fundamentals/bitly)\
-[Avatars](/fundamentals/avatars)\
-[Message shortcuts](/fundamentals/message-shortcuts)\
 [Link Preview](/fundamentals/link-preview)\
+[Message shortcuts](/fundamentals/message-shortcuts)\
+[Pin message](/fundamentals/pin-message)\
 [Rich Media Preview](/fundamentals/rich-media-preview)\
 [Save message](/fundamentals/save-message)\
 [Thumbnail Generation](/fundamentals/thumbnail-generation)\
 [TinyURL](/fundamentals/tinyurl)\
-[Voice Transcription](/fundamentals/voice-transcription)
+[Voice Transcription](/fundamentals/voice-transcription)\
+[Avatars](/fundamentals/avatars)
 
 ### User Engagement
 
 Extensions that help increase user engagement. *Recommended for advanced apps.*
 
-[Email replies](/fundamentals/email-replies)\
-[Polls](/fundamentals/polls)\
 [Giphy](/fundamentals/giphy)\
-[Mentions](/fundamentals/mentions)\
 [Message Translation](/fundamentals/message-translation)\
-[Reactions](/fundamentals/reactions)\
-[Smart Reply](/fundamentals/smart-replies)\
+[Polls](/fundamentals/polls)\
+[Reminders](/fundamentals/reminders)\
 [Stickers](/fundamentals/stickers)\
 [Stipop](/fundamentals/stickers-stipop)\
 [Tenor](/fundamentals/tenor)\
-[Reminders](/fundamentals/reminders)\
+[Email replies](/fundamentals/email-replies)\
+[Mentions](/fundamentals/mentions)\
+[Reactions](/fundamentals/reactions)\
+[Smart Reply](/fundamentals/smart-replies)\
 [Live Streaming by api.video](/fundamentals/video-broadcasting)
 
 ### Collaboration
@@ -46,12 +46,19 @@ Extensions that help with collaboration. *Recommended for advanced apps.*
 [Collaborative Whiteboard](/fundamentals/collaborative-whiteboard)\
 [Collaborative Document](/fundamentals/collaborative-document)
 
+### Security
+
+*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.*
+
+[Disappearing messages](/fundamentals/disappearing-messages)\
+[End to End Encryption](/fundamentals/end-to-end-encryption)
+
 ### Customer Support
 
 Extensions that help you add support to your app. *Recommended for advanced apps.*
 
-[Intercom](/fundamentals/intercom)\
-[Chatwoot](/fundamentals/chatwoot)
+[Chatwoot](/fundamentals/chatwoot)\
+[Intercom](/fundamentals/intercom)
 
 ### Notifications
 
@@ -66,10 +73,3 @@ Extensions that help alert users of new messages. *Recommended for all apps.*
 *Extensions that help you to build a safe messaging environment.* *Recommended for live streaming and event apps.*
 
 [Legacy Moderation Extensions](/moderation/legacy-extensions)
-
-### Security
-
-*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.*
-
-[Disappearing messages](/fundamentals/disappearing-messages)\
-[End to End Encryption](/fundamentals/end-to-end-encryption)

ui-kit/react/ai-assistant-chat.mdx

@@ -1,7 +1,32 @@
 ---
 title: "AI Assistant Chat"
+description: "A composite component that provides an AI agent chat experience with streaming responses, quick starter suggestions, and chat history."
 ---
 
+{/* TL;DR for Agents and Quick Reference */}
+<Info>
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
+
+// Minimal usage - requires an AI agent user
+<CometChatAIAssistantChat user={agent} />
+
+// With common props
+<CometChatAIAssistantChat
+  user={agent}
+  streamingSpeed={30}
+  suggestedMessages={["Help me", "Summarize"]}
+  showCloseButton={true}
+  onCloseButtonClicked={() => console.log("Closed")}
+/>
+```
+
+Related: [AI Features](/ui-kit/react/ai-features) | [Message List](/ui-kit/react/message-list)
+</Info>
+
 ## Overview
 
 `CometChatAIAssistantChat` is a composite component that assembles the message header, message list, and message composer to provide an AI agent chat experience. It supports streaming responses, quick starter suggestions, "New Chat" to reset context, and a chat history sidebar.
@@ -10,8 +35,12 @@ title: "AI Assistant Chat"
   <img src="/images/react-uikit_ai-assistant-chat-overview.png" />
 </Frame>
 
+<Note>
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
+</Note>
+
 <Tabs>
-<Tab title="AIAssistantChatDemo.tsx">
+<Tab title="TypeScript">
 ```tsx
 import React from "react";
 import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -33,21 +62,31 @@ export function AIAssistantChatDemo() {
         </>
     ); 
 }
-
 ```
 
 </Tab>
 
-<Tab title="App.tsx">
-```tsx
-import { AIAssistantChatDemo } from "./AIAssistantChatDemo";
+<Tab title="JavaScript">
+```jsx
+import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
 
-export default function App() {
-    return (
-        <div className="App">
-            <AIAssistantChatDemo />
-        </div>
-    );
+export function AIAssistantChatDemo() {
+    const [agent, setAgent] = React.useState(null);
+
+    React.useEffect(() => {
+        // Replace with your assistant UID
+        CometChat.getUser("assistant_uid").then((u) => setAgent(u));
+    }, []);
+
+    if (!agent) return null;
+
+    return(
+        <>
+            <CometChatAIAssistantChat user={agent} />
+        </>
+    ); 
 }
 ```
 
@@ -935,4 +974,21 @@ export function AIAssistantChatDemo() {
 
 </Tabs>
 
-***
+---
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="AI Features" icon="robot" href="/ui-kit/react/ai-features">
+    Explore AI-powered features like Smart Replies and Conversation Summary
+  </Card>
+  <Card title="Message List" icon="messages" href="/ui-kit/react/message-list">
+    Learn about the Message List component for displaying chat messages
+  </Card>
+  <Card title="Message Template" icon="file-code" href="/ui-kit/react/message-template">
+    Customize message bubbles with templates
+  </Card>
+  <Card title="Theme" icon="palette" href="/ui-kit/react/theme">
+    Apply custom themes to match your app's design
+  </Card>
+</CardGroup>

ui-kit/react/ai-features.mdx

@@ -1,7 +1,21 @@
 ---
 title: "AI User Copilot"
+description: "AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary to enhance user engagement."
 ---
 
+{/* TL;DR for Agents and Quick Reference */}
+<Info>
+**Quick Reference for AI Agents & Developers**
+
+Key AI features available in the UI Kit:
+- **Conversation Starters** → Auto-enabled in [CometChatMessageList](/ui-kit/react/message-list)
+- **Smart Replies** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer)
+- **Conversation Summary** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer)
+- **AI Assistant Chat** → [CometChatAIAssistantChat](/ui-kit/react/ai-assistant-chat)
+
+Enable features from the [CometChat Dashboard](https://app.cometchat.com/) → AI section.
+</Info>
+
 ## Overview
 
 CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features.
@@ -10,6 +24,10 @@ CometChat's AI capabilities greatly enhance user interaction and engagement in y
   <img src="/images/d480aacc-ai_overview_web_screens-2c95c0a2c06b4c84dcd515a18308acf2.png" />
 </Frame>
 
+<Note>
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com/)
+</Note>
+
 ## Conversation Starters
 
 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 starters.
@@ -45,3 +63,22 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
 <Frame>
   <img src="/images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png" />
 </Frame>
+
+---
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="AI Assistant Chat" icon="robot" href="/ui-kit/react/ai-assistant-chat">
+    Build a dedicated AI agent chat experience
+  </Card>
+  <Card title="Message List" icon="messages" href="/ui-kit/react/message-list">
+    Learn about the Message List component with AI features
+  </Card>
+  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/message-composer">
+    Explore the Message Composer with Smart Replies
+  </Card>
+  <Card title="Extensions" icon="puzzle-piece" href="/ui-kit/react/extensions">
+    Discover additional extensions and integrations
+  </Card>
+</CardGroup>

ui-kit/react/astro-conversation.mdx

@@ -1,8 +1,31 @@
 ---
 title: "Building a Conversation List + Message View in Astro"
 sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel chat layout with conversation list and message view using CometChat React UI Kit in Astro."
 ---
 
+{/* TL;DR for Agents and Quick Reference */}
+<Info>
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+// Two-panel layout
+<div className="conversations-with-messages">
+  <CometChatConversations onItemClick={handleConversationClick} />
+  <div className="messages-wrapper">
+    <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
+    <CometChatMessageList user={selectedUser} group={selectedGroup} />
+    <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
+  </div>
+</div>
+```
+
+- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration)
+- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat)
+</Info>
+
 The Conversation List + Message View layout provides a familiar two‑panel experience, similar to WhatsApp Web or Slack. Users browse conversations on the left and chat in real time on the right.
 
 ***
@@ -279,4 +302,21 @@ The sample uses `ensureLogin(uid)` to switch users by logging out if the active
 To build other experiences (One‑to‑One or Tab‑based), reuse `src/lib/cometchat-init.js` and switch the React island component.
 </Tip>
 
+---
+
+## Next Steps
 
+<CardGroup cols={2}>
+  <Card title="One-to-One Chat" icon="user" href="/ui-kit/react/astro-one-to-one-chat">
+    Build a focused single conversation chat experience
+  </Card>
+  <Card title="Tab-Based Chat" icon="table-columns" href="/ui-kit/react/astro-tab-based-chat">
+    Create a multi-tab chat interface with navigation
+  </Card>
+  <Card title="Theme" icon="palette" href="/ui-kit/react/theme">
+    Customize the look and feel of your chat UI
+  </Card>
+  <Card title="Components Overview" icon="cubes" href="/ui-kit/react/components-overview">
+    Explore all available UI Kit components
+  </Card>
+</CardGroup>

ui-kit/react/astro-integration.mdx

@@ -1,8 +1,38 @@
 ---
 title: "Getting Started With CometChat React UI Kit in Astro"
 sidebarTitle: "Integration"
+description: "Integrate CometChat React UI Kit in your Astro application for real-time chat functionality."
 ---
 
+{/* TL;DR for Agents and Quick Reference */}
+<Info>
+**Quick Reference for AI Agents & Developers**
+
+```bash
+# Install
+npm i @cometchat/chat-uikit-react
+npx astro add react
+```
+
+```tsx
+// Initialize (src/lib/cometchat-init.js)
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+
+const settings = new UIKitSettingsBuilder()
+  .setAppId("APP_ID")
+  .setRegion("REGION")
+  .setAuthKey("AUTH_KEY")
+  .build();
+
+await CometChatUIKit.init(settings);
+await CometChatUIKit.login("UID");
+```
+
+- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation)
+- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat)
+- **Tab-Based Chat** → [Tab-Based Guide](/ui-kit/react/astro-tab-based-chat)
+</Info>
+
 The CometChat platform lets you add in‑app chat with minimal effort. In Astro, you can integrate CometChat in two primary ways:
 
 - Using the CometChat JavaScript SDK directly for framework-agnostic control
@@ -341,3 +371,22 @@ Proceed with your chosen experience:
 </Check>
 
 
+
+---
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Conversation Layout" icon="comments" href="/ui-kit/react/astro-conversation">
+    Build a two-panel conversation list with message view
+  </Card>
+  <Card title="One-to-One Chat" icon="user" href="/ui-kit/react/astro-one-to-one-chat">
+    Create a focused single conversation experience
+  </Card>
+  <Card title="Tab-Based Chat" icon="table-columns" href="/ui-kit/react/astro-tab-based-chat">
+    Build a multi-tab chat interface
+  </Card>
+  <Card title="Components Overview" icon="cubes" href="/ui-kit/react/components-overview">
+    Explore all available UI Kit components
+  </Card>
+</CardGroup>