Skip to content

Commit 1d52633

Browse files
anshuman-cometchatanshuman-cometchat
committed
docs: added code snippets and made Flutter UI Kit v5 docs agentic friendly
1 parent 5e4976d commit 1d52633

18 files changed

Lines changed: 2813 additions & 522 deletions

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

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,43 @@
11
---
2-
title: "AI"
2+
title: "AI Features"
3+
description: "Enhance user interaction with AI-powered conversation starters, smart replies, and conversation summaries in your Flutter app"
34
---
45

6+
{/* TL;DR for Agents and Quick Reference */}
7+
<Info>
8+
**Quick Reference for AI Agents & Developers**
9+
10+
```dart
11+
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
12+
13+
// Enable AI features in UIKitSettings
14+
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
15+
..aiFeature = [
16+
AISmartRepliesExtension(),
17+
AIConversationStarterExtension(),
18+
AIAssistBotExtension(),
19+
AIConversationSummaryExtension()
20+
]
21+
).build();
22+
23+
// Initialize with AI features
24+
CometChatUIKit.init(uiKitSettings: uiKitSettings);
25+
```
26+
27+
**Key AI Extensions:**
28+
- `AISmartRepliesExtension` → Smart reply suggestions
29+
- `AIConversationStarterExtension` → Conversation starters
30+
- `AIAssistBotExtension` → AI assistant bot
31+
- `AIConversationSummaryExtension` → Conversation summaries
32+
33+
**Components:**
34+
- Conversation Starters → Auto-displayed in `CometChatMessageList` ([Docs](/ui-kit/flutter/message-list))
35+
- Smart Replies → Available in `CometChatMessageComposer` action sheet ([Docs](/ui-kit/flutter/message-composer))
36+
- Conversation Summary → Available in `CometChatMessageComposer` action sheet ([Docs](/ui-kit/flutter/message-composer))
37+
38+
Activate features from [CometChat Dashboard](https://app.cometchat.com) → Extensions → AI
39+
</Info>
40+
541
## Overview
642

743
CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the Flutter UI Kit achieves these features.
@@ -10,6 +46,10 @@ CometChat's AI capabilities greatly enhance user interaction and engagement in y
1046
<img src="/images/5b57feb3-ai_overview-e181192385baa430f73f90e7a24690e8.png" />
1147
</Frame>
1248

49+
<Note>
50+
**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [Dashboard](https://app.cometchat.com)
51+
</Note>
52+
1353
***
1454

1555
## Usage
@@ -67,8 +107,27 @@ The Conversation Summary feature provides concise summaries of long conversation
67107

68108
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).
69109

70-
Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits.
110+
Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits.
71111

72112
<Frame>
73113
<img src="/images/d9a79e08-conversation_summary-3263d5620276113b3301c76d9ea170d8.png" />
74114
</Frame>
115+
116+
---
117+
118+
## Next Steps
119+
120+
<CardGroup cols={2}>
121+
<Card title="Message List" icon="list" href="/ui-kit/flutter/message-list">
122+
Display and manage conversation messages with AI-powered starters
123+
</Card>
124+
<Card title="Message Composer" icon="pen" href="/ui-kit/flutter/message-composer">
125+
Compose messages with smart replies and AI assistance
126+
</Card>
127+
<Card title="AI User Copilot" icon="robot" href="/fundamentals/ai-user-copilot/overview">
128+
Learn more about AI features and configuration
129+
</Card>
130+
<Card title="Extensions" icon="puzzle-piece" href="/ui-kit/flutter/extensions">
131+
Explore other extensions to enhance your chat experience
132+
</Card>
133+
</CardGroup>

‎ui-kit/flutter/call-features.mdx‎

Lines changed: 87 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,53 @@
11
---
2-
title: "Call"
2+
title: "Call Features"
3+
description: "Integrate one-on-one and group audio/video calling capabilities into your Flutter app with CometChat UI Kit"
34
---
45

6+
{/* TL;DR for Agents and Quick Reference */}
7+
<Info>
8+
**Quick Reference for AI Agents & Developers**
9+
10+
```dart
11+
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
12+
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
13+
14+
// Enable calling features in UIKitSettings
15+
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
16+
..appId = "APP_ID"
17+
..authKey = "AUTH_KEY"
18+
..region = "REGION"
19+
..callingExtension = CometChatCallingExtension()
20+
).build();
21+
22+
// Initialize with calling support
23+
CometChatUIKit.init(uiKitSettings: uiKitSettings);
24+
25+
// Set navigation key for incoming calls
26+
CometChatUsersWithMessages(key: CallNavigationContext.navigatorKey)
27+
28+
// Add call listener
29+
CometChat.addCallListener(listenerId, this);
30+
```
31+
32+
**Key Calling Components:**
33+
- `CometChatCallButtons` → [Docs](/ui-kit/flutter/call-buttons)
34+
- `CometChatIncomingCall` → [Docs](/ui-kit/flutter/incoming-call)
35+
- `CometChatOutgoingCall` → [Docs](/ui-kit/flutter/outgoing-call)
36+
- `CometChatCallLogs` → [Docs](/ui-kit/flutter/call-logs)
37+
- `CometChatCallingExtension` → Calling extension
38+
- `CallNavigationContext` → Navigation context for calls
39+
40+
**Requirements:** `cometchat_calls_uikit` package, minSdkVersion 24 (Android), iOS 12+
41+
</Info>
42+
543
## Overview
644

745
CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Flutter UI Kit.
846

47+
<Note>
48+
**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview)
49+
</Note>
50+
951
## Integration
1052

1153
First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/flutter/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Flutter project.
@@ -24,9 +66,7 @@ Add the following dependency to your `pubspec.yaml` file:
2466
dependencies:
2567
cometchat_calls_uikit: ^5.0.12
2668
```
27-
2869
</Tab>
29-
3070
</Tabs>
3171

3272
***
@@ -47,17 +87,11 @@ defaultConfig {
4787
versionName flutterVersionName
4888
}
4989
```
50-
5190
</Tab>
52-
5391
</Tabs>
5492

5593
<Note>
56-
57-
If you want to use the Flutter UI Kit or enable calling support within it, you'll need to:
58-
59-
1. Set the `minSdkVersion` to 24 in your `android/app/build.gradle` file.
60-
94+
If you want to use the Flutter UI Kit or enable calling support within it, you'll need to set the `minSdkVersion` to 24 in your `android/app/build.gradle` file.
6195
</Note>
6296

6397
***
@@ -73,9 +107,7 @@ In your Podfile located at `ios/Podfile`, update the minimum iOS version that yo
73107
```xml
74108
platform :ios, '12.0'
75109
```
76-
77110
</Tab>
78-
79111
</Tabs>
80112

81113
***
@@ -94,22 +126,24 @@ Example
94126
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
95127
..subscriptionType = CometChatSubscriptionType.allUsers
96128
..autoEstablishSocketConnection = true
97-
..region = "REGION"//Replace with your App Region
98-
..appId = "APP_ID" //Replace with your App ID
99-
..authKey = "AUTH_KEY" //Replace with your app Auth Key
100-
..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array you want to disable all extensions
101-
..callingExtension = CometChatCallingExtension() //Added this to Enable calling feature in the UI Kit
129+
..region = "REGION" // Replace with your App Region
130+
..appId = "APP_ID" // Replace with your App ID
131+
..authKey = "AUTH_KEY" // Replace with your app Auth Key
132+
..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
133+
..callingExtension = CometChatCallingExtension() // Enable calling feature
102134
).build();
103135
104-
CometChatUIKit.init(uiKitSettings: uiKitSettings,onSuccess: (successMessage) {
105-
// TODO("Not yet implemented")
106-
}, onError: (e) {
107-
// TODO("Not yet implemented")
108-
});
136+
CometChatUIKit.init(
137+
uiKitSettings: uiKitSettings,
138+
onSuccess: (successMessage) {
139+
// TODO("Not yet implemented")
140+
},
141+
onError: (e) {
142+
// TODO("Not yet implemented")
143+
}
144+
);
109145
```
110-
111146
</Tab>
112-
113147
</Tabs>
114148

115149
To allow launching of Incoming Call screen from any widget whenever a call is received provide set key: CallNavigationContext.navigatorKey in the top most widget of your project (the widget that appears first of your app launch).
@@ -118,14 +152,19 @@ To allow launching of Incoming Call screen from any widget whenever a call is re
118152
<Tab title="Dart">
119153
```dart
120154
CometChatUIKit.login(uid, onSuccess: (s) {
121-
Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatUsersWithMessages(key: CallNavigationContext.navigatorKey)));
155+
Navigator.push(
156+
context,
157+
MaterialPageRoute(
158+
builder: (context) => CometChatUsersWithMessages(
159+
key: CallNavigationContext.navigatorKey
160+
)
161+
)
162+
);
122163
}, onError: (e) {
123164
// TODO("Not yet implemented")
124165
});
125166
```
126-
127167
</Tab>
128-
129168
</Tabs>
130169

131170
After adding this dependency, the Flutter UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/flutter/call-buttons) widget rendered in [MessageHeader](/ui-kit/flutter/message-header) Widget.
@@ -147,13 +186,13 @@ class _YourClassNameState extends State<YourClassName> with CallListener {
147186
@override
148187
void initState() {
149188
super.initState();
150-
CometChat.addCallListener(listenerId, this); //Add listener
189+
CometChat.addCallListener(listenerId, this); // Add listener
151190
}
152191
153192
@override
154193
void dispose() {
155194
super.dispose();
156-
CometChat.removeCallListener(listenerId); //Remove listener
195+
CometChat.removeCallListener(listenerId); // Remove listener
157196
}
158197
159198
@override
@@ -193,9 +232,7 @@ class _YourClassNameState extends State<YourClassName> with CallListener {
193232
}
194233
}
195234
```
196-
197235
</Tab>
198-
199236
</Tabs>
200237

201238
***
@@ -229,3 +266,22 @@ Importantly, the Outgoing Call widget is smartly designed to transition automati
229266
<Frame>
230267
<img src="/images/d8dd671f-call_logs-d2071cb31b8a455b4a01c03a0f573b94.png" />
231268
</Frame>
269+
270+
---
271+
272+
## Next Steps
273+
274+
<CardGroup cols={2}>
275+
<Card title="Call Buttons" icon="phone" href="/ui-kit/flutter/call-buttons">
276+
Add audio and video call buttons to your chat interface
277+
</Card>
278+
<Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/flutter/incoming-call">
279+
Handle and display incoming call screens
280+
</Card>
281+
<Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/flutter/outgoing-call">
282+
Manage outgoing call screens and transitions
283+
</Card>
284+
<Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/flutter/call-logs">
285+
Display call history and records
286+
</Card>
287+
</CardGroup>

0 commit comments

Comments
 (0)