Skip to content

Commit b1827a2

Browse files
aanshisingh-cometchataanshisingh-cometchat
committed
improve the documentation
1 parent c130326 commit b1827a2

43 files changed

Lines changed: 1870 additions & 145 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 68 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,32 @@
11
---
22
title: "AI Assistant Chat"
3+
description: "A composite component that provides an AI agent chat experience with streaming responses, quick starter suggestions, and chat history."
34
---
45

6+
{/* TL;DR for Agents and Quick Reference */}
7+
<Info>
8+
**Quick Reference for AI Agents & Developers**
9+
10+
```tsx
11+
import { CometChat } from "@cometchat/chat-sdk-javascript";
12+
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
13+
14+
// Minimal usage - requires an AI agent user
15+
<CometChatAIAssistantChat user={agent} />
16+
17+
// With common props
18+
<CometChatAIAssistantChat
19+
user={agent}
20+
streamingSpeed={30}
21+
suggestedMessages={["Help me", "Summarize"]}
22+
showCloseButton={true}
23+
onCloseButtonClicked={() => console.log("Closed")}
24+
/>
25+
```
26+
27+
Related: [AI Features](/ui-kit/react/ai-features) | [Message List](/ui-kit/react/message-list)
28+
</Info>
29+
530
## Overview
631

732
`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"
1035
<img src="/images/react-uikit_ai-assistant-chat-overview.png" />
1136
</Frame>
1237

38+
<Note>
39+
**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
40+
</Note>
41+
1342
<Tabs>
14-
<Tab title="AIAssistantChatDemo.tsx">
43+
<Tab title="TypeScript">
1544
```tsx
1645
import React from "react";
1746
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -33,21 +62,31 @@ export function AIAssistantChatDemo() {
3362
</>
3463
);
3564
}
36-
3765
```
3866

3967
</Tab>
4068

41-
<Tab title="App.tsx">
42-
```tsx
43-
import { AIAssistantChatDemo } from "./AIAssistantChatDemo";
69+
<Tab title="JavaScript">
70+
```jsx
71+
import React from "react";
72+
import { CometChat } from "@cometchat/chat-sdk-javascript";
73+
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
4474

45-
export default function App() {
46-
return (
47-
<div className="App">
48-
<AIAssistantChatDemo />
49-
</div>
50-
);
75+
export function AIAssistantChatDemo() {
76+
const [agent, setAgent] = React.useState(null);
77+
78+
React.useEffect(() => {
79+
// Replace with your assistant UID
80+
CometChat.getUser("assistant_uid").then((u) => setAgent(u));
81+
}, []);
82+
83+
if (!agent) return null;
84+
85+
return(
86+
<>
87+
<CometChatAIAssistantChat user={agent} />
88+
</>
89+
);
5190
}
5291
```
5392

@@ -935,4 +974,21 @@ export function AIAssistantChatDemo() {
935974
936975
</Tabs>
937976
938-
***
977+
---
978+
979+
## Next Steps
980+
981+
<CardGroup cols={2}>
982+
<Card title="AI Features" icon="robot" href="/ui-kit/react/ai-features">
983+
Explore AI-powered features like Smart Replies and Conversation Summary
984+
</Card>
985+
<Card title="Message List" icon="messages" href="/ui-kit/react/message-list">
986+
Learn about the Message List component for displaying chat messages
987+
</Card>
988+
<Card title="Message Template" icon="file-code" href="/ui-kit/react/message-template">
989+
Customize message bubbles with templates
990+
</Card>
991+
<Card title="Theme" icon="palette" href="/ui-kit/react/theme">
992+
Apply custom themes to match your app's design
993+
</Card>
994+
</CardGroup>

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
---
22
title: "AI User Copilot"
3+
description: "AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary to enhance user engagement."
34
---
45

6+
{/* TL;DR for Agents and Quick Reference */}
7+
<Info>
8+
**Quick Reference for AI Agents & Developers**
9+
10+
Key AI features available in the UI Kit:
11+
- **Conversation Starters** → Auto-enabled in [CometChatMessageList](/ui-kit/react/message-list)
12+
- **Smart Replies** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer)
13+
- **Conversation Summary** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer)
14+
- **AI Assistant Chat** → [CometChatAIAssistantChat](/ui-kit/react/ai-assistant-chat)
15+
16+
Enable features from the [CometChat Dashboard](https://app.cometchat.com/) → AI section.
17+
</Info>
18+
519
## Overview
620

721
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
1024
<img src="/images/d480aacc-ai_overview_web_screens-2c95c0a2c06b4c84dcd515a18308acf2.png" />
1125
</Frame>
1226

27+
<Note>
28+
**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com/)
29+
</Note>
30+
1331
## Conversation Starters
1432

1533
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
4563
<Frame>
4664
<img src="/images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png" />
4765
</Frame>
66+
67+
---
68+
69+
## Next Steps
70+
71+
<CardGroup cols={2}>
72+
<Card title="AI Assistant Chat" icon="robot" href="/ui-kit/react/ai-assistant-chat">
73+
Build a dedicated AI agent chat experience
74+
</Card>
75+
<Card title="Message List" icon="messages" href="/ui-kit/react/message-list">
76+
Learn about the Message List component with AI features
77+
</Card>
78+
<Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/message-composer">
79+
Explore the Message Composer with Smart Replies
80+
</Card>
81+
<Card title="Extensions" icon="puzzle-piece" href="/ui-kit/react/extensions">
82+
Discover additional extensions and integrations
83+
</Card>
84+
</CardGroup>

‎ui-kit/react/astro-conversation.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
---
22
title: "Building a Conversation List + Message View in Astro"
33
sidebarTitle: "Conversation List + Message View"
4+
description: "Build a two-panel chat layout with conversation list and message view using CometChat React UI Kit in Astro."
45
---
56

7+
{/* TL;DR for Agents and Quick Reference */}
8+
<Info>
9+
**Quick Reference for AI Agents & Developers**
10+
11+
```tsx
12+
import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
13+
14+
// Two-panel layout
15+
<div className="conversations-with-messages">
16+
<CometChatConversations onItemClick={handleConversationClick} />
17+
<div className="messages-wrapper">
18+
<CometChatMessageHeader user={selectedUser} group={selectedGroup} />
19+
<CometChatMessageList user={selectedUser} group={selectedGroup} />
20+
<CometChatMessageComposer user={selectedUser} group={selectedGroup} />
21+
</div>
22+
</div>
23+
```
24+
25+
- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration)
26+
- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat)
27+
</Info>
28+
629
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.
730

831
***
@@ -279,4 +302,21 @@ The sample uses `ensureLogin(uid)` to switch users by logging out if the active
279302
To build other experiences (One‑to‑One or Tab‑based), reuse `src/lib/cometchat-init.js` and switch the React island component.
280303
</Tip>
281304
305+
---
306+
307+
## Next Steps
282308
309+
<CardGroup cols={2}>
310+
<Card title="One-to-One Chat" icon="user" href="/ui-kit/react/astro-one-to-one-chat">
311+
Build a focused single conversation chat experience
312+
</Card>
313+
<Card title="Tab-Based Chat" icon="table-columns" href="/ui-kit/react/astro-tab-based-chat">
314+
Create a multi-tab chat interface with navigation
315+
</Card>
316+
<Card title="Theme" icon="palette" href="/ui-kit/react/theme">
317+
Customize the look and feel of your chat UI
318+
</Card>
319+
<Card title="Components Overview" icon="cubes" href="/ui-kit/react/components-overview">
320+
Explore all available UI Kit components
321+
</Card>
322+
</CardGroup>

‎ui-kit/react/astro-integration.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,38 @@
11
---
22
title: "Getting Started With CometChat React UI Kit in Astro"
33
sidebarTitle: "Integration"
4+
description: "Integrate CometChat React UI Kit in your Astro application for real-time chat functionality."
45
---
56

7+
{/* TL;DR for Agents and Quick Reference */}
8+
<Info>
9+
**Quick Reference for AI Agents & Developers**
10+
11+
```bash
12+
# Install
13+
npm i @cometchat/chat-uikit-react
14+
npx astro add react
15+
```
16+
17+
```tsx
18+
// Initialize (src/lib/cometchat-init.js)
19+
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
20+
21+
const settings = new UIKitSettingsBuilder()
22+
.setAppId("APP_ID")
23+
.setRegion("REGION")
24+
.setAuthKey("AUTH_KEY")
25+
.build();
26+
27+
await CometChatUIKit.init(settings);
28+
await CometChatUIKit.login("UID");
29+
```
30+
31+
- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation)
32+
- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat)
33+
- **Tab-Based Chat** → [Tab-Based Guide](/ui-kit/react/astro-tab-based-chat)
34+
</Info>
35+
636
The CometChat platform lets you add in‑app chat with minimal effort. In Astro, you can integrate CometChat in two primary ways:
737

838
- Using the CometChat JavaScript SDK directly for framework-agnostic control
@@ -341,3 +371,22 @@ Proceed with your chosen experience:
341371
</Check>
342372

343373

374+
375+
---
376+
377+
## Next Steps
378+
379+
<CardGroup cols={2}>
380+
<Card title="Conversation Layout" icon="comments" href="/ui-kit/react/astro-conversation">
381+
Build a two-panel conversation list with message view
382+
</Card>
383+
<Card title="One-to-One Chat" icon="user" href="/ui-kit/react/astro-one-to-one-chat">
384+
Create a focused single conversation experience
385+
</Card>
386+
<Card title="Tab-Based Chat" icon="table-columns" href="/ui-kit/react/astro-tab-based-chat">
387+
Build a multi-tab chat interface
388+
</Card>
389+
<Card title="Components Overview" icon="cubes" href="/ui-kit/react/components-overview">
390+
Explore all available UI Kit components
391+
</Card>
392+
</CardGroup>

‎ui-kit/react/astro-one-to-one-chat.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
---
22
title: "Building a One-to-One/Group Chat in Astro"
33
sidebarTitle: "One To One/Group Chat"
4+
description: "Build a focused one-to-one or group chat experience using CometChat React UI Kit in Astro."
45
---
56

7+
{/* TL;DR for Agents and Quick Reference */}
8+
<Info>
9+
**Quick Reference for AI Agents & Developers**
10+
11+
```tsx
12+
import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
13+
14+
// One-to-one chat with a user
15+
<CometChatMessageHeader user={peer} />
16+
<CometChatMessageList user={peer} />
17+
<CometChatMessageComposer user={peer} />
18+
19+
// Group chat (use group prop instead)
20+
<CometChatMessageHeader group={group} />
21+
<CometChatMessageList group={group} />
22+
<CometChatMessageComposer group={group} />
23+
```
24+
25+
- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration)
26+
- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation)
27+
</Info>
28+
629
The One‑to‑One/Group chat layout focuses on a single conversation, ideal for support chats and private messaging. This guide uses Astro with React islands and the CometChat React UI Kit.
730

831
***
@@ -267,4 +290,21 @@ The island logs out if a different user session is active, then logs in with `PU
267290
You can reuse `src/lib/cometchat-init.js` across different chat experiences and swap the island component.
268291
</Tip>
269292
293+
---
294+
295+
## Next Steps
270296
297+
<CardGroup cols={2}>
298+
<Card title="Conversation Layout" icon="comments" href="/ui-kit/react/astro-conversation">
299+
Build a two-panel conversation list with message view
300+
</Card>
301+
<Card title="Tab-Based Chat" icon="table-columns" href="/ui-kit/react/astro-tab-based-chat">
302+
Create a multi-tab chat interface with navigation
303+
</Card>
304+
<Card title="Theme" icon="palette" href="/ui-kit/react/theme">
305+
Customize the look and feel of your chat UI
306+
</Card>
307+
<Card title="Message List" icon="messages" href="/ui-kit/react/message-list">
308+
Learn about Message List customization options
309+
</Card>
310+
</CardGroup>

‎ui-kit/react/astro-tab-based-chat.mdx‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
11
---
22
title: "Building a Messaging UI with Tabs, Sidebar, and Message View in Astro"
33
sidebarTitle: "Tab Based Chat Experience"
4+
description: "Build a tab-based messaging UI in Astro with CometChat React UI Kit featuring Chats, Calls, Users, and Groups sections."
45
---
56

7+
{/* TL;DR for Agents and Quick Reference */}
8+
<Info>
9+
**Quick Reference for AI Agents & Developers**
10+
11+
```tsx
12+
import TabbedChat from "../components/TabbedChat.jsx";
13+
14+
// Astro page with client-only hydration
15+
<TabbedChat client:only="react" />
16+
```
17+
18+
Key components used:
19+
- **CometChatConversations** → Chats tab
20+
- **CometChatCallLogs** → Calls tab
21+
- **CometChatUsers** → Users tab
22+
- **CometChatGroups** → Groups tab
23+
- **CometChatMessageHeader/List/Composer** → Message panel
24+
</Info>
25+
626
This guide shows how to build a tab‑based messaging UI in Astro using the CometChat React UI Kit. The interface includes sections for Chats, Calls, Users, and Groups with a message panel.
727

828
***
@@ -357,9 +377,20 @@ The message panel shows only for Chats, Users, or Groups. Calls tab does not ope
357377
358378
## Next Steps
359379
360-
- Add call handling with CometChat Calls SDK
361-
- Apply theming and component overrides
362-
- Extend with unread badges and notifications
380+
<CardGroup cols={2}>
381+
<Card title="Call Features" icon="video" href="/ui-kit/react/call-features">
382+
Add voice and video calling capabilities
383+
</Card>
384+
<Card title="Theme Customization" icon="palette" href="/ui-kit/react/theme">
385+
Customize colors, fonts, and styling
386+
</Card>
387+
<Card title="Astro Integration" icon="rocket" href="/ui-kit/react/astro-integration">
388+
Review the Astro setup guide
389+
</Card>
390+
<Card title="Components Overview" icon="grid-2" href="/ui-kit/react/components-overview">
391+
Explore all available components
392+
</Card>
393+
</CardGroup>
363394
364395
<Tip>
365396
You can reuse `src/lib/cometchat-init.js` and swap the island component to build other experiences.

0 commit comments

Comments
 (0)