git clone https://github.com/cometchat/ai-agent-ag2-examples.git then cd ai-agent-ag2-examples/ag2-knowledge-agent. Create a virtualenv and run pip install -r requirements.txt.
+ .env file, set OPENAI_API_KEY, and override other knobs as needed (model, temperature, namespace).
+ python server.py once (or uvicorn server:app) to initialize folders. Use the ingest endpoint or the provided knowledge samples as a starting point.
+ uvicorn server:app --reload --host 0.0.0.0 --port 8000. Verify GET /health returns `{"status": "healthy"}`.
+ /agent publicly with ngrok, Cloudflare Tunnel, or Render so CometChat can reach it.
+ docs or choose a sanitized string (alphanumeric, -, _).
+ knowledge/<namespace> contains generated .md copies and an updated index.json.
+ [DONE].
+ matches payload returned by the retrieval tool.
+ /agent, /tools/ingest, and /tools/search over HTTPS.
+- Keep KNOWLEDGE_AGENT_STORAGE_PATH on a persistent volume so ingested docs survive restarts.
+- Harden CORS, rate limiting, and authentication before opening the endpoints to the public internet.
+
+***
+
+## Step 4 - Configure CometChat
+
+knowledge, Deployment URL=public /agent endpoint.
+
+
+***
+
+## Step 6 - Integrate
+
+Once configured, embed the agent in your product using the exported configuration.
+
+/agent returns cited answers./tools/search returns ranked snippets.+ Step 1 +
*/} + +## Step 1 - Create your CometChat app + ++ Step 2 +
*/} + +## Step 2 - Connect your AG2 Agent + +Navigate to **AI Agent → Get Started** and then **AI Agents → Add Agent**. + +-
+
- Name and optional Icon +
- (Optional) Greeting and Introductory Message +
- (Optional) Suggested messages such as “What’s the weather in Austin?” +
-
+
- Agent ID — for the sample project, use
weather.
+ - Deployment URL — the HTTPS endpoint that proxies to
/agenton your server.
+
+ Step 3 (Optional) +
*/} + +## Step 3 - Define Frontend Actions (Optional) + +-
+
- Display Name — Shown to users (e.g., “Open Product Page”). +
- Execution Text — How the agent describes running it. +
- Name — A unique, code-friendly key (e.g.,
open_product).
+ - Description — What the tool does and when to use it. +
- Parameters — JSON Schema describing inputs (the agent will fill these). +
+ Step 4 +
*/} + +## Step 4 - Customize in UI Kit Builder + +
+
+
+---
+
+{/* + Step 5 +
*/} + +## Step 5 - Export & Integrate + +Choose how you’ll ship the experience (Widget or React UI Kit export). + ++ Step 6 +
*/} + +## Step 6 - Run Your AG2 Agent (Reference) + +-
+
git clone https://github.com/cometchat/ai-agent-ag2-examples.git
+ cd ai-agent-ag2-examples/ag2-cometchat-agent
+ python -m venv .venv && source .venv/bin/activate(or.venv\\Scripts\\activateon Windows)
+ pip install -r requirements.txt
+
Create a .env file:
Without WEATHER_API_KEY, the tool still returns stubbed error messages that the agent can surface gracefully.
The agent streams Server-Sent Events (SSE) with tool call telemetry and message chunks so CometChat can render partial replies in real time.
+-
+
uvicorn server:app --reload --host 0.0.0.0 --port 8000
+ - Verify health:
curl http://localhost:8000/health
+ - Trigger a message (SSE response): +
Use a tunneling tool (ngrok, Cloudflare Tunnel, etc.) to create the public Deployment URL CometChat needs.
+-
+
- Configure logging, rate limiting, and auth (API key/JWT) on the `/agent` route. +
- Store secrets in server-side env vars only; never expose them in client code. +
- Namespace tool calls and sanitize user input before hitting external APIs. +
- Scale the FastAPI app behind your preferred hosting (Render, Fly.io, Vercel functions, etc.). +
-
+
- Verify your Deployment URL is publicly reachable (no VPN/firewall). +
- Check server logs for 4xx/5xx errors or missing API keys. +
-
+
- Confirm the Action’s Name matches the tool name emitted by AG2. +
- Ensure your agent registers tools via
register_for_llmand proxies execution.
+
-
+
- Use
authKeyonly for development. For production, implement a secure token flow for user login.
+
git clone https://github.com/cometchat/ai-agent-agno-examples.git, then inside the repo run:python3 -m venv .venv && source .venv/bin/activate && pip install -e .
+ .env (or export env vars) with at least OPENAI_API_KEY. Optional overrides: OPENAI_BASE_URL, KNOWLEDGE_OPENAI_MODEL, KNOWLEDGE_STORAGE_PATH, KNOWLEDGE_CHROMA_PATH.
+ uvicorn knowledge_agent.main:app --host 0.0.0.0 --port 8000 --reload. The app exposes health, ingestion, search, generate, and `/stream` endpoints (newline-delimited JSON).
+ git clone https://github.com/cometchat/ai-agent-agno-examples.git. Inside the repo: python3 -m venv .venv && source .venv/bin/activate && pip install -e .
+ .env with OPENAI_API_KEY. Add PRODUCTHUNT_API_TOKEN for GraphQL access. Optional knobs: PRODUCTHUNT_DEFAULT_TIMEZONE, OPENAI_BASE_URL, PRODUCT_OPENAI_MODEL.
+ uvicorn product_hunt_agent.main:app --host 0.0.0.0 --port 8001 --reload. Health check: GET /healthz; streaming lives at POST /stream.
+ -
+
- Name and optional Icon +
- (Optional) Greeting and Introductory Message +
- (Optional) Suggested messages +
-
+
- Agent ID — a unique handle that matches how you route traffic (e.g.,
support).
+ - Deployment URL — the public HTTPS endpoint exposed by your Agno service. +
- (Optional) Headers — JSON auth headers that your FastAPI deployment expects. +
-
+
- Display Name — Shown to users (e.g., “Open Product Page”). +
- Execution Text — How the agent describes running it (e.g., “Opening product details for the user.”). +
- Name — A unique, code-friendly key (e.g.,
open_product).
+ - Description — What the tool does and when to use it. +
- Parameters — JSON Schema describing inputs (the agent will fill these). +
+
+
+---
+
+## Step 5 - Export & Integrate
+
+Choose how you’ll ship the experience (Widget or React UI Kit export).
+
+npm install inside vercel-knowledge-agent/agent.
+ .env with OPENAI_API_KEY. Optional knobs: PORT (default 3000), OPENAI_MODEL, TEMPERATURE, and KNOWLEDGE_DIR.
+ npm start. The Express app loads environment variables via bin/www and exposes APIs at http://localhost:3000.
+ POST /api/tools/ingest with a namespace, sources array, and/or multipart uploads. Responses report saved, skipped, and per-source errors.
+ POST /api/tools/searchDocs to verify retrieval scoring before enabling the agent.
+ POST /api/agents/knowledge/generate. Include toolParams.namespace to target a specific knowledge folder.
+ /agent endpoint for SSE streaming once you are ready to integrate.
+ npm install inside agent/ (already covered in Setup if you completed it once).
+ npm start. Logs appear on stdout; bin/www loads .env before binding the port.
+ /api/tools/ingest using JSON or multipart examples from the README.
+ /api/tools/searchDocs and confirm excerpts plus filenames look correct.
+ /api/agents/knowledge/generate with a messages array. Include toolParams.namespace to target non-default folders.
+ /agent and consume the SSE stream (curl example is in the README under APIs).
+ knowledge), and paste the public /agent URL.
+
+
+---
+
+## Step 7 - Integrate
+
+Once your agent is connected, embed it wherever users need doc answers:
+
+/api/agents/knowledge/generate and confirm the response ends with Sources:./agent; events should include threadId, runId, and partial deltas.toolParams.namespace and verify documents load from the matching folder.support).
+ - **Deployment URL** — the public HTTPS endpoint that receives CometChat requests.
+ - (Optional) **Headers** — JSON auth headers that your endpoint expects.
+ vercel-cometchat-adaptor handles conversion between CometChat events and the Vercel AI SDK. Keep the **Agent ID** and **Deployment URL** stable so you don’t need to reconnect.
+
+---
+
+## Step 3 - Define Frontend Actions (Optional)
+
+-
+
- Display Name — Shown to users (e.g., “Open Product Page”). +
- Execution Text — How the agent describes running it (e.g., “Opening product details for the user.”). +
- Name — A unique, code-friendly key (e.g.,
open_product).
+ - Description — What the tool does and when to use it. +
- Parameters — JSON Schema describing inputs (the agent will fill these). +
+
+
+---
+
+## Step 5 - Export & Integrate
+
+Choose how you’ll ship the experience (Widget or React UI Kit export).
+
+Local Development
+-
+
npm installto pull dependencies (includingvercel-cometchat-adaptor).
+ npm run dev(orvercel dev) to start the local server.
+
Quick test against the Express route:
+```bash +curl -N -X POST http://localhost:4000/agent/vercel \ + -H "Content-Type: application/json" \ + -d '{"messages":[{"role":"user","content":"Say hi"}]}' +``` +Temporary Public Tunnel
+```bash +ngrok http 4000 +cloudflared tunnel --url http://localhost:4000 +loca.lt --port 4000 +``` +Append route (e.g. /agent/vercel) to the forwarded HTTPS URL.
Production Patterns
+-
+
- Serverless: Convert the route to a Vercel /api handler or edge function. +
- Container: Run the Express app in Docker; add health checks. +
- Edge: Use
@vercel/edgeruntime and keep tools stateless.
+
Security
+-
+
- Rate limit by IP + user. +
- Add auth (Bearer / JWT) for private agents. +
- Log tool calls (id, latency) for observability. +
CometChat Mapping
+Use the final HTTPS URL + path for Deployment URL. Reuse the same string you configured in code as the Agent ID.
++
+ Docs: https://sdk.vercel.ai/docs +
-
+
- Verify your Deployment URL is publicly reachable and returns
text/event-stream.
+ - Check server logs for runtime errors or missing environment variables. +
-
+
- Confirm the Action’s Name in CometChat exactly matches the tool name your UI listens for. +
- Validate the Parameters JSON Schema; the agent uses this to fill inputs. +
-
+
- Use
authKeyonly for development. For production, implement a secure token flow for user login.
+
vercel-cometchat-adaptor library simplifies message and event translation, creating a reliable bridge between CometChat and Vercel-powered AI systems.
+
+{/* ## Next Steps
+
+
@@ -11,7 +11,7 @@ Chat Builder streamlines integrating CometChat’s Android UI Kit into your app.
## Complete Integration Workflow
-1. Design your chat experience in Chat Builder.
+1. Design your chat experience in UI Kit Builder.
2. Export your code and settings package.
3. Enable extra features in the CometChat Dashboard if needed.
4. Optionally preview the experience in a sample app.
@@ -20,11 +20,11 @@ Chat Builder streamlines integrating CometChat’s Android UI Kit into your app.
***
-## Launch the Chat Builder
+## Launch the UI Kit Builder
1. Log in to your CometChat Dashboard: https://app.cometchat.com
2. Select your application.
-3. Go to Integrate → Android → Launch Chat Builder.
+3. Go to Integrate → Android → Launch UI Kit Builder.
***
@@ -52,7 +52,7 @@ How to enable:
***
-## Integration with CometChat Chat Builder (Android)
+## Integration with CometChat UI Kit Builder (Android)
Follow these steps in your existing Android app (from README):
diff --git a/chat-builder/android/overview.mdx b/chat-builder/android/overview.mdx
index 966faf75..828ac788 100644
--- a/chat-builder/android/overview.mdx
+++ b/chat-builder/android/overview.mdx
@@ -59,7 +59,7 @@ Choose one of the following paths to integrate:
## Try Live Demo
-Experience the CometChat Builder in action:
+Experience the CometChat UI Kit Builder in action:
+
+
+## Complete Integration Workflow
+
+1. Design your chat experience in UI Kit Builder.
+2. Export your Flutter package with configuration JSON, assets, and helper files.
+3. Enable advanced features in the CometChat Dashboard if your experience requires them.
+4. Optionally explore the sample module to preview the UI Kit Builder experience.
+5. Integrate the UI Kit Builder module into your Flutter project.
+6. Customize the UI further with the Flutter UI Kit components and styling APIs.
+
+***
+
+## Launch the UI Kit Builder
+
+1. Log in to your CometChat Dashboard: https://app.cometchat.com
+2. Select your application.
+3. Go to Integrate → Flutter → Launch UI Kit Builder.
+
+***
+
+## Enable Features in CometChat Dashboard
+
+If your app needs any of these, enable them from your Dashboard: https://app.cometchat.com
+
+- Stickers
+- Polls
+- Collaborative whiteboard
+- Collaborative document
+- Message translation
+- AI User Copilot: Conversation starter, Conversation summary, Smart reply
+
+How to enable:
+
+
+ 
+
+
+1. Log in to the Dashboard.
+2. Select your app.
+3. Navigate to Chat → Features.
+4. Toggle ON the required features and Save.
+
+***
+
+## Integration with CometChat UI Kit Builder
+
+Follow these steps to wire the Builder output into your existing Flutter app.
+
+### Step 1: Download the Builder package
+
+From the Dashboard export, download the Flutter Builder bundle. Inside you will find a `chat_builder` module, assets, and helper utilities.
+
+### Step 2: Add the Builder module to your project
+
+Copy the `chat_builder` directory into the root of your Flutter project (for example, next to your `lib`, `ios`, and `android` folders).
+
+### Step 3: Copy Builder assets
+
+Move the contents of `chat_builder/assets/` into your app’s `assets/` directory. Keep the folder structure intact so fonts, JSON files, and images resolve correctly.
+
+### Step 4: Update `pubspec.yaml`
+
+Point to the local Builder module and register the assets and fonts supplied by the export:
+
+```yaml
+dependencies:
+ # other dependencies
+ chat_builder:
+ path: ./chat_builder
+
+flutter:
+ uses-material-design: true
+ assets:
+ - assets/
+ - assets/sample_app/
+ fonts:
+ - family: arial
+ fonts:
+ - asset: assets/fonts/arial_regular.ttf
+ - asset: assets/fonts/arial_medium.ttf
+ - asset: assets/fonts/arial_bold.ttf
+ - family: inter
+ fonts:
+ - asset: assets/fonts/inter_regular.otf
+ - asset: assets/fonts/inter_medium.otf
+ - asset: assets/fonts/inter_bold.otf
+ - family: roboto
+ fonts:
+ - asset: assets/fonts/roboto_regular.ttf
+ - asset: assets/fonts/roboto_medium.ttf
+ - asset: assets/fonts/roboto_bold.ttf
+ - family: times New Roman
+ fonts:
+ - asset: assets/fonts/times_new_roman_regular.ttf
+ - asset: assets/fonts/times_new_roman_medium.otf
+ - asset: assets/fonts/times_new_roman_bold.otf
+```
+
+Ensure indentation is consistent—Flutter’s asset and font declarations are whitespace sensitive.
+
+### Step 5: Install dependencies
+
+Run the following commands at the root of your project:
+
+```bash
+flutter pub get
+cd ios && pod install
+```
+
+If your project uses scripting for iOS installs, adapt the second command accordingly.
+
+### Step 6: Initialize Builder settings before `runApp`
+
+Import the helper from the Builder module and load settings during app startup:
+
+```dart
+import 'package:flutter/widgets.dart';
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+Future
+
+
+***
+
+## Try Live Demo
+
+Experience the CometChat UI Kit Builder in action:
+
+
@@ -11,7 +11,7 @@ Chat Builder simplifies integrating CometChat’s iOS UI Kit using Visual Chat B
## Complete Integration Workflow
-1. Design your chat experience in Chat Builder.
+1. Design your chat experience in UI Kit Builder.
2. Export your code/settings or connect via QR.
3. Enable extra features in the CometChat Dashboard if needed.
4. Optionally preview on device/simulator.
@@ -20,11 +20,11 @@ Chat Builder simplifies integrating CometChat’s iOS UI Kit using Visual Chat B
***
-## Launch the Chat Builder
+## Launch the UI Kit Builder
1. Log in to your CometChat Dashboard: https://app.cometchat.com
2. Select your application.
-3. Go to Integrate → iOS → Launch Chat Builder.
+3. Go to Integrate → iOS → Launch UI Kit Builder.
***
@@ -52,7 +52,7 @@ How to enable:
***
-## Integration with CometChat Chat Builder (iOS)
+## Integration with CometChat UI Kit Builder (iOS)
Installation and configuration options from README‑iOS:
@@ -103,7 +103,7 @@ import CometChatBuilder
CometChatBuilder.startScanning(from: self) { appliedStyle in
// Apply theme or reload UI if needed
- print("Chat Builder Style Applied:", appliedStyle.theme)
+ print("UI Kit Builder Style Applied:", appliedStyle.theme)
}
```
diff --git a/chat-builder/ios/overview.mdx b/chat-builder/ios/overview.mdx
index b0d984aa..4eeca9a8 100644
--- a/chat-builder/ios/overview.mdx
+++ b/chat-builder/ios/overview.mdx
@@ -102,7 +102,7 @@ Ship a ready‑to‑use chat experience configured in the Builder and powered by
## Next Steps for Developers
1. Learn the basics — Key Concepts: [Key Concepts](/fundamentals/key-concepts)
-2. Follow the setup guide — Chat Builder (iOS): [Chat Builder (iOS)](/chat-builder/ios/integration)
+2. Follow the setup guide — UI Kit Builder (iOS): [UI Kit Builder (iOS)](/chat-builder/ios/integration)
3. Customize UI — Theme and components: [Theme introduction](/ui-kit/ios/theme-introduction), [Components overview](/ui-kit/ios/overview)
4. Test & ship — Run on device/simulator and deploy.
diff --git a/chat-builder/nextjs/builder-customisations.mdx b/chat-builder/nextjs/builder-customisations.mdx
index 016cfa87..c0aab063 100644
--- a/chat-builder/nextjs/builder-customisations.mdx
+++ b/chat-builder/nextjs/builder-customisations.mdx
@@ -1,9 +1,9 @@
---
-title: "Customizing Your Chat Builder Integration"
+title: "Customizing Your UI Kit Builder Integration"
sidebarTitle: "Overview"
---
-While the `CometChatSettings.ts` file allows basic toggling of features in the Chat Builder, **deeper customizations** require a more hands-on approach. Follow the steps below to tailor the UI Kit to your exact needs.
+While the `CometChatSettings.ts` file allows basic toggling of features in the UI Kit Builder, **deeper customizations** require a more hands-on approach. Follow the steps below to tailor the UI Kit to your exact needs.
***
@@ -25,8 +25,8 @@ While the `CometChatSettings.ts` file allows basic toggling of features in the C
@@ -13,7 +13,7 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
## **Complete Integration Workflow**
-1. **Design Your Chat Experience** - Use the Chat Builder to customize layouts, features, and styling.
+1. **Design Your Chat Experience** - Use the **UI Kit Builder** to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
@@ -22,11 +22,11 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
***
-## **Launch the Chat Builder**
+## **Launch the UI Kit Builder**
1. Log in to your [**CometChat Dashboard**](https://app.cometchat.com).
2. Select your application from the list.
-3. Navigate to **Integrate** > **React** > **Launch Chat Builder**.
+3. Navigate to **Integrate** > **React** > **Launch UI Kit Builder**.
***
@@ -60,7 +60,7 @@ If your app requires any of the following features, make sure to enable them fro
## **Preview Customizations (Optional)**
-Before integrating the Chat Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the Chat Builder into your project.
+Before integrating the **UI Kit Builder** into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the **UI Kit Builder** into your project.
> You can preview the experience:
>
@@ -89,12 +89,12 @@ Before integrating the Chat Builder into your project, you can preview the chat
***
-## **Integration with CometChat Chat Builder (Next.js)**
+## **Integration with CometChat UI Kit Builder (Next.js)**
### **Step 1: Install Dependencies**
```ruby
-npm install @cometchat/chat-uikit-react@6.0.7 @cometchat/calls-sdk-javascript
+npm install @cometchat/chat-uikit-react@6.2.3 @cometchat/calls-sdk-javascript
```
### **Step 2: Copy CometChat Folder**
@@ -295,7 +295,7 @@ export default CometChatNoSSR;
### **Step 5: Disable SSR & Render CometChat Component**
-In this step, we’ll render the `CometChatApp` component and specifically disable **Server-Side Rendering (SSR)** for `CometChatNoSSR.tsx`. This targeted approach ensures the CometChat Chat Builder components load only on the client side, while the rest of your application remains fully compatible with SSR.
+In this step, we’ll render the `CometChatApp` component and specifically disable **Server-Side Rendering (SSR)** for `CometChatNoSSR.tsx`. This targeted approach ensures the CometChat UI Kit Builder components load only on the client side, while the rest of your application remains fully compatible with SSR.
1. **Create a Wrapper File**: Add a new file that houses the `CometChatApp` component.
2. **Dynamically Import `CometChatNoSSR.tsx`**: In this file, use dynamic imports with `{ ssr: false }` to disable SSR only for the CometChat component, preventing SSR-related issues but preserving SSR for the rest of your code.
@@ -339,7 +339,7 @@ export default function Home() {
@@ -13,7 +13,7 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
## **Complete Integration Workflow**
-1. **Design Your Chat Experience** - Use the Chat Builder to customize layouts, features, and styling.
+1. **Design Your Chat Experience** - Use the **UI Kit Builder** to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
@@ -22,11 +22,11 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
***
-## **Launch the Chat Builder**
+## **Launch the UI Kit Builder**
1. Log in to your [**CometChat Dashboard**](https://app.cometchat.com).
2. Select your application from the list.
-3. Navigate to **Integrate** > **React** > **Launch Chat Builder**.
+3. Navigate to **Integrate** > **React** > **Launch UI Kit Builder**.
***
@@ -60,7 +60,7 @@ If your app requires any of the following features, make sure to enable them fro
## **Preview Customizations (Optional)**
-Before integrating the Chat Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the Chat Builder into your project.
+Before integrating the UI Kit Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the UI Kit Builder into your project.
> You can preview the experience:
>
@@ -89,12 +89,12 @@ Before integrating the Chat Builder into your project, you can preview the chat
***
-## **Integration with CometChat Chat Builder (React Router)**
+## **Integration with CometChat UI Kit Builder (React Router)**
### **Step 1: Install Dependencies**
```ruby
-npm install @cometchat/chat-uikit-react@6.0.7 @cometchat/calls-sdk-javascript
+npm install @cometchat/chat-uikit-react@6.3.2 @cometchat/calls-sdk-javascript
```
### **Step 2: Copy CometChat Folder**
@@ -354,7 +354,7 @@ export default [
@@ -13,7 +13,7 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
## **Complete Integration Workflow**
-1. **Design Your Chat Experience** - Use the Chat Builder to customize layouts, features, and styling.
+1. **Design Your Chat Experience** - Use the **UI Kit Builder** to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
@@ -26,11 +26,11 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
***
-## **Launch the Chat Builder**
+## **Launch the UI Kit Builder**
1. Log in to your [**CometChat Dashboard**](https://app.cometchat.com).
2. Select your application from the list.
-3. Navigate to **Integrate** > **React** > **Launch Chat Builder**.
+3. Navigate to **Integrate** > **React** > **Launch UI Kit Builder**.
***
@@ -70,7 +70,7 @@ If your app requires any of the following features, make sure to enable them fro
## **Preview Customizations (Optional)**
-Before integrating the Chat Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the Chat Builder into your project.
+Before integrating the **UI Kit Builder** into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the **UI Kit Builder** into your project.
> You can preview the experience:
>
@@ -99,16 +99,16 @@ Before integrating the Chat Builder into your project, you can preview the chat
***
-## **Integration with CometChat Chat Builder (React.js)**
+## **Integration with CometChat UI Kit Builder (React.js)**
-Follow these steps to integrate CometChat Chat Builder into your existing React project:
+Follow these steps to integrate CometChat UI Kit Builder into your existing React project:
### **Step 1: Install Dependencies**
Run the following command to install the required dependencies:
```ruby
-npm install @cometchat/chat-uikit-react@6.0.7 @cometchat/calls-sdk-javascript
+npm install @cometchat/chat-uikit-react@6.3.2 @cometchat/calls-sdk-javascript
```
### **Step 2: Copy CometChat Folder**
@@ -330,6 +330,20 @@ CometChatUIKit.init(uiKitSettings)?.then(() => {
+**Group Action Messages**
+
+You can control the visibility of group action messages using the showGroupActionMessages prop:
+
+```
+Use our pre-built UI kits or SDKs to add chat to your website or mobile app instantly.
-{/* Chat Builder Section */} +{/* UI Kit Builder Section */}- UI Kits - Chat Builder + UI Kit Builder
RECOMMENDED- Get a fully functional chat interface in minutes. Configure via our chat builder—no complex setup required. + Get a fully functional chat interface in minutes. Configure via our ui kit builder — no complex setup required.
-{/*Use our pre-built UI kits or SDKs to add chat to your website or mobile app instantly.
-{/* Chat Builder Section */} +{/* UI Kit Builder Section */}- UI Kits - Chat Builder + UI Kit Builder
RECOMMENDED- Get a fully functional chat interface in minutes. Configure via our chat builder—no complex setup required. + Get a fully functional chat interface in minutes. Configure via our ui kit builder — no complex setup required.
- {/*
-3. Once the pop-up appears, enter the github repository address in the search bar [`https://github.com/cometchat/chat-sdk-ios.git`](https://github.com/cometchat/chat-sdk-ios.git) and set dependency rule to `Up to Next Major Version` and set version as `4.0.67` . Then click on the **Add Package** button.
+3. Once the pop-up appears, enter the github repository address in the search bar [`https://github.com/cometchat/chat-sdk-ios.git`](https://github.com/cometchat/chat-sdk-ios.git) and set dependency rule to `Up to Next Major Version` and set version as `4.0.69` . Then click on the **Add Package** button.
diff --git a/sdk/javascript/additional-message-filtering.mdx b/sdk/javascript/additional-message-filtering.mdx
index c1412178..6648ba35 100644
--- a/sdk/javascript/additional-message-filtering.mdx
+++ b/sdk/javascript/additional-message-filtering.mdx
@@ -868,6 +868,69 @@ let GUID: string = "GUID",
+
+
+***
+
+## Usage
+
+### Integration
+
+`AIAssistantChatHistory`, as a Composite Component, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action.
+
+The following code snippet exemplifies how you can seamlessly integrate the GroupMembers component into your application.
+
+
+
+
+```xml themes.xml
+
+
+
+```
+
+
+
+
+```xml themes.xml
+
+
+
+```
+
+```xml themes.xml
+
+```
+
+To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml).
+
## Base Component
### Avatar
diff --git a/ui-kit/android/getting-started.mdx b/ui-kit/android/getting-started.mdx
index 340c0b61..dd3f96be 100644
--- a/ui-kit/android/getting-started.mdx
+++ b/ui-kit/android/getting-started.mdx
@@ -141,7 +141,7 @@ Inside `libs.versions.toml`, add the CometChat Chat UI Kit version under the `[v
```toml libs.versions.toml
[versions]
cometchat-ui-kit = "5.1.0"
-cometchat-calls-sdk = "4.1.0"
+cometchat-calls-sdk = "4.3.1"
```
Under the `[libraries]` section, define the library and reference the version:
diff --git a/ui-kit/android/guide-ai-agent.mdx b/ui-kit/android/guide-ai-agent.mdx
new file mode 100644
index 00000000..5c3e55c8
--- /dev/null
+++ b/ui-kit/android/guide-ai-agent.mdx
@@ -0,0 +1,332 @@
+---
+title: "AI Agent Integration"
+sidebarTitle: "AI Agent Integration"
+---
+
+Enable intelligent conversational AI capabilities in your Android app using CometChat UIKit v5 with AI Agent integration:
+
+- **AI Assistant Chat History**
+- **Chat History Management**
+- **Contextual Responses**
+- **Agent Detection**
+- **Seamless Handoffs**
+
+Transform your chat experience with AI-powered assistance that provides intelligent responses and offers seamless integration with your existing chat infrastructure.
+
+## Overview
+
+Users can interact with AI agents through a dedicated chat interface that:
+
+- Provides intelligent responses based on conversation context.
+- Maintains chat history for continuity.
+- Seamlessly integrates with your existing user chat system.
+
+The AI Agent chat interface provides a familiar messaging experience enhanced with AI capabilities, accessible through your main chat flow or as a standalone feature.
+
+
+ 
+
+
+## Prerequisites
+
+- Android Studio project with **cometchat/cometchat-uikit-android** and **cometchat/chat-sdk-android** in `build.gradle`.
+- Internet permission in `AndroidManifest.xml`.
+- Valid CometChat **App ID**, **Region**, and **Auth Key** configured via `UIKitSettings`.
+- User logged in with `CometChatUIKit.login()`.
+- AI Agent configured in your CometChat dashboard.
+
+## Components
+
+| Component / Class | Role |
+|:----------------------------------|:----------------------------------------------------------|
+| `AIAssistantChatActivity` | Main activity for AI agent chat. |
+| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history. |
+| `CometChatMessageList` | Shows AI messages with threading support. |
+| `CometChatMessageComposer` | Input interface for AI conversations. |
+| `CometChatMessageHeader` | Header with AI agent info and controls. |
+
+## Integration Steps
+
+### Step 1 - Activity Setup
+
+Create the AI Assistant chat activity with proper theme and layout configuration.
+
+```kotlin
+class AIAssistantChatActivity : AppCompatActivity() {
+ private lateinit var binding: ActivityAiAssistantChatBinding
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+ binding = ActivityAiAssistantChatBinding.inflate(layoutInflater)
+ setContentView(binding.root)
+
+ val messageJson = intent.getStringExtra(getString(R.string.app_base_message))
+ val userJson = intent.getStringExtra(getString(R.string.app_user))
+
+ if (userJson != null && !userJson.isEmpty())
+ val user = User.fromJson(userJson)
+ if (messageJson != null && !messageJson.isEmpty())
+ val parentMessage = BaseMessage.processMessage(JSONObject(messageJson))
+
+ initializeComponents(user, parentMessage)
+ initClickListeners()
+ }
+
+ private fun initializeComponents(user: User, parentMessage: BaseMessage) {
+ binding.messageHeader.user = user // Set user for header
+ binding.messageList.user = user // Set user for message list
+ binding.messageComposer.user = user // Set user for composer
+
+ if (parentMessage != null) {
+ // Set message id of parent message to fetch messages with parent.
+ // Here we are setting parent message id to message list to fetch messages and message composer to send reply to that message.
+ // Here this is being used for AIAssistantChatHistory
+ binding.messageList.setParentMessage(parentMessage!!.getId())
+ binding.messageComposer.setParentMessageId(parentMessage!!.getId())
+ }
+
+ binding.messageList.setStyle(R.style.CustomCometChatMessageListStyle) // Custom style for AI chat
+ binding.messageComposer.style = R.style.CustomMessageComposerStyle // Custom style for AI chat
+ }
+}
+```
+
+**File reference:**
+[`AIAssistantChatActivity.kt`](ai-builder/src/main/java/com/cometchat/ai/builder/ui/activity/AIAssistantChatActivity.kt)
+
+### Step - 2 AIAssistantChatActivity layout:
+
+Add `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to your layout to enable a complete AI chat interface. Use the sample XML below as a reference for correct integration.
+
+```xml
+
+
+
+
+**Customization**
+
+
+ 
+
+
+**Customizing Bubble**
+
+```html
+
+
+
+
+
+
+
+
+```
+
+```html
+
+
+```
+
+To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml).
diff --git a/ui-kit/android/message-header.mdx b/ui-kit/android/message-header.mdx
index 67e47314..8dccd047 100644
--- a/ui-kit/android/message-header.mdx
+++ b/ui-kit/android/message-header.mdx
@@ -85,6 +85,60 @@ cometchatMessageHeader.onBackPressListener = OnBackPress {
***
+##### setNewChatButtonClick
+
+`setOnNewChatButtonClick` is triggered when you press the new chat button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.
+
+
-| Property | Description | Code |
-| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| **setUser** | Used to pass user object of which header specific details will be shown | `.setUser(user);` |
-| **setGroup** | Used to pass group object of which header specific details will be shown | `.setGroup(Group);` |
-| **setAlignment** | used to set the alignmet of messages in CometChatMessageList. It can be either **leftAligned** or **standard** | `.setAlignment(UIKitConstants.MessageListAlignment);` |
-| **setErrorStateVisibility** | used to toggle visibility of error state in MessageList | `.setErrorStateVisibility(View.GONE);` |
-| **disableSoundForMessages** | used to enable/disable sound for incoming/outgoing messages , default false | `.disableSoundForMessages(false);` |
-| **setCustomSoundForMessages** | used to set custom sound for outgoing message | `.setCustomSoundForMessages(@RawRes resource);` |
-| **setAvatarVisibility** | used to toggle visibility for avatar | `.setAvatarVisibility(View.GONE);` |
-| **scrollToBottomOnNewMessage** | should scroll to bottom on new message? , by default false | `.scrollToBottomOnNewMessage(true);` |
-| **setReceiptsVisibility** | Used to control visibility of read receipts without disabling the functionality of marking messages as read and delivered. | `.setReceiptsVisibility(View.GONE);` |
-| **setQuickReactions** | The list of quick reactions to be set.This list will replace the predefined set of reactions | `.setQuickReactions(Arrays.asList("👻","😈","🙀","🤡","❤️");` |
-| **setStickyDateVisibility** | used to toggle visibility for sticky header | `.setStickyDateVisibility(View.GONE);` |
-| **replyInThreadOptionVisibility** | used to toggle visibility for thread option | `.replyInThreadOptionVisibility(View.GONE);` |
-| **translateMessageOptionVisibility** | used to toggle visibility for translate option | `.translateMessageOptionVisibility(View.GONE);` |
-| **editMessageOptionVisibility** | used to toggle visibility for edit option | `.editMessageOptionVisibility(View.GONE);` |
-| **deleteMessageOptionVisibility** | used to toggle visibility for delete option | `.deleteMessageOptionVisibility(View.GONE);` |
-| **setMessageReactionOptionVisibility** | used to toggle visibility for reaction option | `.setMessageReactionOptionVisibility(View.GONE);` |
-| **messagePrivatelyOptionVisibility** | used to toggle visibility for private option | `.messagePrivatelyOptionVisibility(View.GONE);` |
-| **copyMessageOptionVisibility** | used to toggle visibility for copy option | `.copyMessageOptionVisibility(View.GONE);` |
-| **messageInfoOptionVisibility** | used to toggle visibility for info option | `.messageInfoOptionVisibility(View.GONE);` |
-| **groupActionMessageVisibility** | used to toggle visibility for action message option | `.groupActionMessageVisibility(View.GONE);` |
-| **enableConversationStarters** | Controls whether conversation starters are generated in new conversations | `.enableConversationStarters(true);` |
-| **enableSmartReplies** | Enables smart replies for quick responses | `.enableSmartReplies(true);` |
-| **smartRepliesKeywords** | Defines specific keywords in an incoming message that will trigger Smart Replies. | `.setAISmartRepliesKeywords(Arrays.asList("hello", "hi", "how are you", "good morning", "good evening", "good night"));` |
-| **smartRepliesDelayDuration** | Sets the delay time before Smart Replies are fetched and displayed after a message is received. | `.smartRepliesDelayDuration(5000);` |
+| Property | Description | Code |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| **setUser** | Used to pass user object of which header specific details will be shown | `.setUser(user);` |
+| **setGroup** | Used to pass group object of which header specific details will be shown | `.setGroup(Group);` |
+| **setAlignment** | used to set the alignmet of messages in CometChatMessageList. It can be either **leftAligned** or **standard** | `.setAlignment(UIKitConstants.MessageListAlignment);` |
+| **setErrorStateVisibility** | used to toggle visibility of error state in MessageList | `.setErrorStateVisibility(View.GONE);` |
+| **disableSoundForMessages** | used to enable/disable sound for incoming/outgoing messages , default false | `.disableSoundForMessages(false);` |
+| **setCustomSoundForMessages** | used to set custom sound for outgoing message | `.setCustomSoundForMessages(@RawRes resource);` |
+| **setAvatarVisibility** | used to toggle visibility for avatar | `.setAvatarVisibility(View.GONE);` |
+| **scrollToBottomOnNewMessage** | should scroll to bottom on new message? , by default false | `.scrollToBottomOnNewMessage(true);` |
+| **setReceiptsVisibility** | Used to control visibility of read receipts without disabling the functionality of marking messages as read and delivered. | `.setReceiptsVisibility(View.GONE);` |
+| **setQuickReactions** | The list of quick reactions to be set.This list will replace the predefined set of reactions | `.setQuickReactions(Arrays.asList("👻","😈","🙀","🤡","❤️");` |
+| **setStickyDateVisibility** | used to toggle visibility for sticky header | `.setStickyDateVisibility(View.GONE);` |
+| **replyInThreadOptionVisibility** | used to toggle visibility for thread option | `.replyInThreadOptionVisibility(View.GONE);` |
+| **translateMessageOptionVisibility** | used to toggle visibility for translate option | `.translateMessageOptionVisibility(View.GONE);` |
+| **editMessageOptionVisibility** | used to toggle visibility for edit option | `.editMessageOptionVisibility(View.GONE);` |
+| **deleteMessageOptionVisibility** | used to toggle visibility for delete option | `.deleteMessageOptionVisibility(View.GONE);` |
+| **setMessageReactionOptionVisibility** | used to toggle visibility for reaction option | `.setMessageReactionOptionVisibility(View.GONE);` |
+| **messagePrivatelyOptionVisibility** | used to toggle visibility for private option | `.messagePrivatelyOptionVisibility(View.GONE);` |
+| **copyMessageOptionVisibility** | used to toggle visibility for copy option | `.copyMessageOptionVisibility(View.GONE);` |
+| **messageInfoOptionVisibility** | used to toggle visibility for info option | `.messageInfoOptionVisibility(View.GONE);` |
+| **groupActionMessageVisibility** | used to toggle visibility for action message option | `.groupActionMessageVisibility(View.GONE);` |
+| **enableConversationStarters** | Controls whether conversation starters are generated in new conversations | `.enableConversationStarters(true);` |
+| **enableSmartReplies** | Enables smart replies for quick responses | `.enableSmartReplies(true);` |
+| **smartRepliesKeywords** | Defines specific keywords in an incoming message that will trigger Smart Replies. | `.setAISmartRepliesKeywords(Arrays.asList("hello", "hi", "how are you", "good morning", "good evening", "good night"));` |
+| **smartRepliesDelayDuration** | Sets the delay time before Smart Replies are fetched and displayed after a message is received. | `.smartRepliesDelayDuration(5000);` |
+| **setAiAssistantSuggestedMessagesVisibility** | used to toggle visibility for suggested messages in case of chats with AI Assistants | `.setAiAssistantSuggestedMessagesVisibility(View.GONE);` |
+| **setAIAssistantEmptyStateVisibility** | used to toggle visibility for empty chat greeting view in case of chats with AI Assistants | `.setAIAssistantEmptyStateVisibility(View.GONE);` |
+| **refreshStyle** | used to refresh the style of message list | `.refreshStyle();` |
***
@@ -688,6 +719,146 @@ cometchatMessageList.errorView = R.layout.your_error_view
***
+#### setAIAssistantEmptyChatGreetingView
+
+Custom empty state view displayed in case of chats with AI Assistants.
+
+Use Cases:
+
+* Show an empty state view for chats with AI Assistants.
+* Display a friendly message like "Hey, I am your AI Assistant".
+
+
+
+
+## Integration
+
+In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes.
+
+
+ 
+
+
+With **v5**, composite components have been replaced with smaller, modular components, such as `Conversations`, `Message Header`, `Message List`, and `Message Composer`. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via props. Styling has been significantly simplified, with every component carefully assigned, enabling developers to customize styles globally or at the component level effortlessly.
+
+To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-android) that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.
+
+
+
+
+
+
+
+
+## Usage
+
+### Integration
+
+You can launch `CometChatAIAssistantChatHistory` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatAIAssistantChatHistory`
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+
+
+
+
+
+
+## Prerequisites
+
+- **CometChat UIKit for Flutter** installed via `pubspec.yaml`
+- CometChat initialized with `App ID`, `Region`, and `Auth Key`
+- Message chat enabled in your CometChat app
+- Navigation set up between message and user/group screens
+- Internet permissions
+
+## Components
+
+| Component/Class | Role |
+|------------------------------ |------------------------------------------------------|
+| `CometChatMessageHeader` | Manages message interactions and state |
+| `CometChatMessageList` | Displays a list of messages |
+| `CometChatMessageComposer` | Composes and sends new messages |
+| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history. |
+
+
+## Integration Steps
+
+### Step 1 - Screen Setup
+
+Create a screen for AI Assistant chat using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
+
+
+
+### AI Assistant Bubble
+
+AI Assistant bubbles display messages and interactions from an AI assistant within the chat interface.
+
+**Default**
+
+
+ 
+
+
+**Customization**
+
+
+ 
+
+
+**Customizing Bubble**
+
+
-Learn more about [CometChatMessageListStyle](#1-messagelist-style).
-
***
##### 2. Avatar Style
@@ -436,6 +434,15 @@ Below is a list of customizations along with corresponding code snippets:
| `smartRepliesDelayDuration` | `int?` | Delay in milliseconds before triggering Smart Replies. |
| `smartRepliesKeywords` | `List
+
+
+## Integration
+
+In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes.
+
+
+ 
+
+
+With **v5**, composite components have been replaced with smaller, modular components, such as `Conversations`, `Message Header`, `Message List`, and `Message Composer`. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via props. Styling has been significantly simplified, with every component carefully assigned, enabling developers to customize styles globally or at the component level effortlessly.
+
+To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.
+
+
+
+
+
+[`MessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) | + +
+
+
+***
+
+## Usage
+
+### Integration
+
+`CometChatAIAssistantChatHistory`, as a Composite Component, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action.
+
+The following code snippet exemplifies how you can seamlessly integrate the AI Assistant Chat History component into your application.
+
+
+
+
+```javascript
+import {
+ CometChatAIAssistantChatHistory,
+ CometChatThemeProvider,
+} from "@cometchat/chat-uikit-react-native";
+//code
+return (
+
+
+
+## Prerequisites
+
+- React Native project with **@cometchat/chat-uikit-react-native** and **@cometchat/chat-sdk-react-native** installed.
+- Valid CometChat **App ID**, **Region**, and **Auth Key** configured via `CometChatUIKit.init()`.
+- User logged in with `CometChatUIKit.login()`.
+- AI Agent configured in your CometChat dashboard.
+
+## Components
+
+| Component / Class | Role |
+|:----------------------------------|:----------------------------------------------------------|
+| `AIAssistantChatScreen` | Main screen for AI agent chat. |
+| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history. |
+| `CometChatMessageList` | Shows AI messages with threading support. |
+| `CometChatMessageComposer` | Input interface for AI conversations. |
+| `CometChatMessageHeader` | Header with AI agent info and controls. |
+
+## Integration Steps
+
+### Step 1 - Screen Setup
+
+Create the AI Assistant chat screen with proper navigation and component configuration.
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { SafeAreaView, View } from 'react-native';
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+ CometChatThemeProvider,
+} from '@cometchat/chat-uikit-react-native';
+import { CometChat } from '@cometchat/chat-sdk-react-native';
+
+interface AIAssistantChatScreenProps {
+ route: {
+ params: {
+ user: CometChat.User;
+ parentMessage?: CometChat.BaseMessage;
+ };
+ };
+ navigation: any;
+}
+
+const AIAssistantChatScreen: React.FC
+
+
+**Customization**
+
+
+
+
+
+**Customizing Bubble**
+
+```tsx
+import {
+ CometChatThemeProvider,
+} from "@cometchat/chat-uikit-react-native";
+//other code
+return (
+
+
+
+## Integration
+
+In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes.
+
+
+
+
+
+With **v5**, composite components have been replaced with smaller, modular components, such as `Conversations`, `Message Header`, `Message List`, and `Message Composer`. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via props and theme provider. Styling has been significantly simplified, with every component carefully assigned, enabling developers to customize styles globally or at the component level effortlessly.
+
+To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/examples/SampleApp) that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.
+
+
+
+
+
+
+
+ ) : null;
+}
+```
+
+
+
+ ) : null;
+}
+```
+
+
+
+
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+
+## Conversation and Advanced Search
+
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+
+
+ 
+
+
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
## Threaded Conversations
The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx
index 0c380288..efddf667 100644
--- a/ui-kit/react/events.mdx
+++ b/ui-kit/react/events.mdx
@@ -56,6 +56,7 @@ It consists of the following events:
| -------------------------- | --------------------------------------------------------------------------------------------------------- |
| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
| ccMessageEdited | This event is triggered when the user successfully edits the message. |
+| ccReplyToMessage | This event is triggered when the user successfully replies to a message. |
| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
| ccLiveReaction | This event is triggered when the user sends a live reaction. |
diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx
new file mode 100644
index 00000000..f758f45b
--- /dev/null
+++ b/ui-kit/react/guide-block-unblock-user.mdx
@@ -0,0 +1,289 @@
+---
+title: "Block/Unblock Users"
+sidebarTitle: "Block/Unblock Users"
+---
+
+Implement user blocking functionality to prevent unwanted communication in your React chat app.
+
+## Overview
+
+The Block Users feature allows users to prevent specific users from sending them messages, effectively cutting off communication from unwanted contacts.
+
+- Block Users feature allows users to prevent specific users from sending them messages.
+- Provides privacy control, prevents harassment, and allows users to manage their communication preferences.
+- Your app will allow users to block/unblock other users, hide message composers for blocked users, and provide appropriate UI feedback for blocked states.
+
+---
+
+## Prerequisites
+
+- React v18.2.0+
+- CometChat React UI Kit v6.1.0+
+- CometChat Chat SDK JavaScript v4.0.13+
+- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
+- TypeScript support (recommended)
+- User authentication and chat functionality already implemented
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:-----------------------------------|:-----|
+| **CometChat.blockUsers()** | SDK method to block specific users |
+| **CometChat.unblockUsers()** | SDK method to unblock previously blocked users |
+| **CometChatUserEvents.ccUserBlocked** | Event listener for when a user is blocked |
+| **CometChatUserEvents.ccUserUnblocked** | Event listener for when a user is unblocked |
+| **CometChatConfirmDialog** | Confirmation dialog for block/unblock actions |
+| **CometChatToast** | Toast notifications for action feedback |
+
+---
+
+## Integration Steps
+
+### 1. Block User Function Implementation
+
+_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
+
+```tsx
+const onBlockUserClicked: () => Promise
+ {
+ setShowBlockUserDialog(!showBlockUserDialog);
+ }}
+ onSubmitClick={onBlockUserClicked} />
+
+
+}
+```
+
+---
+
+### 4. Message Composer Blocked State
+
+_File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)_
+
+```tsx
+{showComposerState ? (
+
+
+) : (
+ {
+ if (user) {
+ CometChat.unblockUsers([user?.getUid()]).then(() => {
+ user.setBlockedByMe(false);
+ CometChatUserEvents.ccUserUnblocked.next(user);
+ })
+ }
+ }}>
+
+)}
+```
+
+---
+
+## Implementation Flow
+
+- **Fetch Data / User State**
+
+_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
+
+```tsx
+if (user?.getBlockedByMe?.()) {
+ setShowComposerState(false);
+}
+```
+
+- **Load Blocked Status / Associated Data**
+
+_File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)_
+
+```tsx
+useEffect(() => {
+ if (messageUser?.getBlockedByMe()) {
+ setShowComposer(false);
+ }
+ const unsubscribeFromEvents = subscribeToEvents();
+ return () => {
+ unsubscribeFromEvents();
+ };
+}, [subscribeToEvents, selectedItem]);
+```
+
+- **Send Block/Unblock Action Handler**
+
+_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
+
+```tsx
+const onUserActionClick = (item: { name: string; icon: string; }) => {
+ if (item.name == getLocalizedString("user_details_block")) {
+ setShowBlockUserDialog(true);
+ } else if (item.name == getLocalizedString("user_details_unblock")) {
+ onUnblockUserClicked();
+ }
+}
+```
+
+- **Live Updates / Observers**
+
+_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
+
+```tsx
+const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe(user => {
+ if (user.getBlockedByMe()) {
+ setShowComposer(false);
+ }
+ updateUserAfterBlockUnblock(user);
+});
+
+const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => {
+ if (!user.getBlockedByMe()) {
+ setShowComposer(true);
+ }
+ updateUserAfterBlockUnblock(user);
+});
+```
+
+---
+
+## Customization Options
+
+- Styling overrides for blocked states and confirmation dialogs
+- Custom block/unblock confirmation messages
+- Toast notification customization
+- Custom action items for different user states
+- Custom blocked state UI
+
+---
+
+## Filtering / Edge Cases
+
+- Detect when blocking status changes mid-chat
+- Prevent duplicate block actions
+- Handle blocked users in search results
+- Respect group chat rules when blocking
+- Keep old messages visible from blocked users
+
+---
+
+## Error Handling
+
+```tsx
+CometChat.blockUsers([UID]).then(
+ list => {
+ user.setBlockedByMe(true);
+ CometChatUserEvents.ccUserBlocked.next(user);
+ toastTextRef.current = getLocalizedString("blocked_successfully");
+ setShowToast(true);
+ }, error => {
+ console.log("Blocking user fails with error", error);
+ }
+)
+```
+
+- Handle block/unblock network errors
+- Provide retry options
+- Maintain UI consistency on errors
+
+---
+
+## Context-Specific Notes
+
+- Blocking applies only to private chats, not groups
+- Blocked users may still appear in lists but with indicators
+- Existing messages remain visible
+- Updates are reflected in real-time
+
+---
+
+## Summary / Feature Matrix
+
+| Feature | Component / Method | File Reference |
+|:-----------------------|:------------------------------------|:---------------|
+| Block user | `CometChat.blockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Unblock user | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Check blocked status | `user.getBlockedByMe()` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Block confirmation dlg | `CometChatConfirmDialog` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Blocked composer state | `message-composer-blocked` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Block user events | `ccUserBlocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Unblock user events | `ccUserUnblocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Update user state | `user.setBlockedByMe(boolean)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+
+---
+
+## Next Steps & Further Reading
+
+- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
+- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- User Management Features
+- Advanced Customization Guide
+- Event Handling Documentation
+
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
new file mode 100644
index 00000000..a029b601
--- /dev/null
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -0,0 +1,305 @@
+---
+title: "Call Log Details"
+sidebarTitle: "Call Log Details"
+---
+
+Display comprehensive call information and history when users select calls from the calls tab in your React chat app.
+
+## Overview
+
+The Calls Log Details feature provides users with detailed information about specific calls, including call status, participants, duration, recordings, and call history.
+
+- Provides detailed information about specific calls when selected from the calls tab.
+- Enables users to review call details, understand outcomes, view participants, and access recordings for reference.
+- Users can view call details with tabbed navigation showing participants, recordings, and call history.
+
+---
+
+## Prerequisites
+
+- React v18.2.0+
+- CometChat React UI Kit v6.1.0+
+- CometChat Chat SDK JavaScript v4.0.13+
+- CometChat Calls SDK JavaScript v4.0.11+
+- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
+- TypeScript support (recommended)
+- Call functionality implemented
+- Calls tab navigation configured
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:--------------------------------|:-----|
+| **CometChatCallDetails** | Main container for call details display |
+| **CometChatCallDetailsInfo** | Shows call status, duration, and info |
+| **CometChatCallDetailsParticipants** | Displays call participants |
+| **CometChatCallDetailsRecording** | Shows call recordings if available |
+| **CometChatCallDetailsHistory** | Displays call history |
+| **CometChatCallLogs** | Calls list component in the calls tab |
+
+---
+
+## Integration Steps
+
+### 1. Calls Tab Integration Setup
+
+_File: [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx)_
+
+```tsx
+{activeTab == "calls" ? (
+
+ {getLocalizedString("cannot_send_to_blocked_user")}
+ {getLocalizedString("click_to_unblock")}
+
+
+
+ );
+}
+```
+
+---
+
+### 4. Call Information Display Component
+
+_File: [CometChatCallLogInfo.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx)_
+
+```tsx
+export const CometChatCallDetailsInfo = (props: { call: any }) => {
+ const { call } = props;
+ const [loggedInUser, setLoggedInUser] = useState
+
+ {getLocalizedString("call_details")}
+
+
+
+
+ {callDetailTabItems.map((tabItem) => (
+
+ {activeTab === "Participants" ? setActiveTab(tabItem)}
+ className={activeTab === tabItem ? "cometchat-call-log-details__tabs-tab-item-active" : "cometchat-call-log-details__tabs-tab-item"}
+ >
+ {tabItem}
+
+ ))}
+
+
+ );
+}
+```
+
+---
+
+## Implementation Flow
+
+- **Fetch Data / Call Selection**
+
+```tsx
+const onSelectorItemClicked = (e: CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call, type: string) => {
+ if (type === "updateSelectedItemCall") {
+ setSelectedItem(e as CometChat.Call);
+ setAppState({ type: "updateSelectedItemCall", payload: e as CometChat.Call });
+ }
+}
+```
+
+- **Load Call Data / Associated Information**
+
+```tsx
+useEffect(() => {
+ const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
+ const callUser = verifyCallUser(selectedItem, loggedInUser!);
+
+ if (selectedItem.receiverType === CometChatUIKitConstants.MessageReceiverType.user) {
+ CometChat.getUser(callUser.uid).then((response: CometChat.User) => {
+ setUser(response);
+ });
+ }
+}, [selectedItem]);
+```
+
+- **Display Call Details / Tab Navigation**
+
+```tsx
+const [activeTab, setActiveTab] = useState("Participants");
+
+const renderTabContent = () => {
+ switch (activeTab) {
+ case "Participants":
+ return
+ {
+ console.log("Selected member:", member);
+ }}
+ options={[
+ {
+ id: "view_profile",
+ title: getLocalizedString("view_profile"),
+ iconURL: profileIcon,
+ onClick: (member) => viewMemberProfile(member)
+ }
+ ]}
+ />
+
+ );
+};
+```
+
+---
+
+### 4. Add Members to Group Implementation
+
+_File: [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx)_
+
+```tsx
+export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
+ const [selectedUsers, setSelectedUsers] = useState
+ {}} />
+
+ );
+}
+```
+
+---
+
+### 4. State Management for Group-to-Private Transition
+
+_File: [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)_
+
+```tsx
+interface AppState {
+ previousGroup?: CometChat.Group;
+ showPrivateChat?: boolean;
+ privateChatUser?: CometChat.User;
+}
+
+case "updatePreviousGroup": {
+ return { ...state, ["previousGroup"]: action.payload };
+}
+case "updateShowPrivateChat": {
+ return { ...state, ["showPrivateChat"]: action.payload };
+}
+case "updatePrivateChatUser": {
+ return { ...state, ["privateChatUser"]: action.payload };
+}
+```
+
+---
+
+## Implementation Flow
+
+- **Fetch Data / Group Members**
+
+_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
+
+```tsx
+
+ {/* Header */}
+
+ );
+};
+```
+
+---
+
+### 4. User Selection and Chat Creation
+
+_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
+
+```tsx
+const TabContent: React.FC
+ {
+ setShowNewChat(false);
+ }} />
+
+
+ {/* Tabs */}
+ New Chat
+
+
+
+ {/* Content */}
+ handleTabClick('user')}> {getLocalizedString("user_title")}
+ handleTabClick('group')}> {getLocalizedString("group_title")}
+
+
+
+
+)}
+```
+
+---
+
+## Context Notes
+
+- Works specifically in group chats
+- Member roles affect permissions
+- Mobile responsive
+- Scales well for large groups
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:--------------------|:------------------------|:---------------------------|
+| Show thread option | `onThreadRepliesClick` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Display thread msgs | `ThreadedMessageList` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Compose reply | `MessageComposer` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Thread header | `ThreadHeader` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Search in threads | `TextHighlightFormatter`| [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Navigate to message | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Thread state | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| App context | `appReducer.ts` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
+
+---
+
+## Next Steps
+
+- Explore [CometChat React UI Kit Docs](https://www.cometchat.com/docs/ui-kit/react/overview)
+- Check the [Sample App Repo](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx
index 91971e87..37816a87 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -194,6 +194,7 @@ The list of events emitted by the Messages component is as follows.
| Event | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **ccMessageEdited** | Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error. |
+| **ccReplyToMessage** | Triggers whenever a loggedIn user replies to any message from the list of messages .it will have three states such as: inProgress, success and error. |
| **ccMessageSent** | Triggers whenever a loggedIn user sends any message, it will have three states such as: inProgress, success and error. |
Adding `CometChatMessageEvents` Listener's
@@ -207,6 +208,10 @@ const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
// Your Code
});
+const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
+ // Your Code
+});
+
const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
// Your Code
});
@@ -224,6 +229,7 @@ Removing `CometChatMessageEvents` Listener's
+ {getLocalizedString("cannot_send_to_group")}
+ {getLocalizedString("check_permissions")}
+
+ Default Reply View
+ +
+
+
+Custom Reply View
+ +
+
+
+
+
+ {chatGroup && (
+
+ );
+};
+
+export { CustomMessageTemplate };
+```
+
+
+ {chatGroup &&
+ );
+};
+
+export { CustomMessageTemplate };
+```
+
+
@@ -13,7 +13,7 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
## **Complete Integration Workflow**
-1. **Design Your Chat Experience** - Use the Chat Builder to customize layouts, features, and styling.
+1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
@@ -22,11 +22,11 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
***
-## **Launch the Chat Builder**
+## **Launch the UI Kit Builder**
1. Log in to your [**CometChat Dashboard**](https://app.cometchat.com).
2. Select your application from the list.
-3. Navigate to **Integrate** > **React** > **Launch Chat Builder**.
+3. Navigate to **Integrate** > **React** > **Launch UI Kit Builder**.
***
@@ -60,7 +60,7 @@ If your app requires any of the following features, make sure to enable them fro
## **Preview Customizations (Optional)**
-Before integrating the Chat Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the Chat Builder into your project.
+Before integrating the UI Kit Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the UI Kit Builder into your project.
> You can preview the experience:
>
@@ -89,12 +89,12 @@ Before integrating the Chat Builder into your project, you can preview the chat
***
-## **Integration with CometChat Chat Builder (Next.js)**
+## **Integration with CometChat UI Kit Builder (Next.js)**
### **Step 1: Install Dependencies**
```ruby
-npm install @cometchat/chat-uikit-react@6.2.0 @cometchat/calls-sdk-javascript
+npm install @cometchat/chat-uikit-react@6.3.2 @cometchat/calls-sdk-javascript
```
### **Step 2: Copy CometChat Folder**
@@ -295,7 +295,7 @@ export default CometChatNoSSR;
### **Step 5: Disable SSR & Render CometChat Component**
-In this step, we’ll render the `CometChatApp` component and specifically disable **Server-Side Rendering (SSR)** for `CometChatNoSSR.tsx`. This targeted approach ensures the CometChat Chat Builder components load only on the client side, while the rest of your application remains fully compatible with SSR.
+In this step, we’ll render the `CometChatApp` component and specifically disable **Server-Side Rendering (SSR)** for `CometChatNoSSR.tsx`. This targeted approach ensures the CometChat UI Kit Builder components load only on the client side, while the rest of your application remains fully compatible with SSR.
1. **Create a Wrapper File**: Add a new file that houses the `CometChatApp` component.
2. **Dynamically Import `CometChatNoSSR.tsx`**: In this file, use dynamic imports with `{ ssr: false }` to disable SSR only for the CometChat component, preventing SSR-related issues but preserving SSR for the rest of your code.
@@ -339,7 +339,7 @@ export default function Home() {
@@ -13,7 +13,7 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
## **Complete Integration Workflow**
-1. **Design Your Chat Experience** - Use the Chat Builder to customize layouts, features, and styling.
+1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
@@ -22,11 +22,11 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
***
-## **Launch the Chat Builder**
+## **Launch the UI Kit Builder**
1. Log in to your [**CometChat Dashboard**](https://app.cometchat.com).
2. Select your application from the list.
-3. Navigate to **Integrate** > **React** > **Launch Chat Builder**.
+3. Navigate to **Integrate** > **React** > **Launch UI Kit Builder**.
***
@@ -60,7 +60,7 @@ If your app requires any of the following features, make sure to enable them fro
## **Preview Customizations (Optional)**
-Before integrating the Chat Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the Chat Builder into your project.
+Before integrating the UI Kit Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the UI Kit Builder into your project.
> You can preview the experience:
>
@@ -89,12 +89,12 @@ Before integrating the Chat Builder into your project, you can preview the chat
***
-## **Integration with CometChat Chat Builder (React Router)**
+## **Integration with CometChat UI Kit Builder (React Router)**
### **Step 1: Install Dependencies**
```ruby
-npm install @cometchat/chat-uikit-react@6.2.0 @cometchat/calls-sdk-javascript
+npm install @cometchat/chat-uikit-react@6.3.2 @cometchat/calls-sdk-javascript
```
### **Step 2: Copy CometChat Folder**
@@ -354,7 +354,7 @@ export default [
@@ -13,7 +13,7 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
## **Complete Integration Workflow**
-1. **Design Your Chat Experience** - Use the Chat Builder to customize layouts, features, and styling.
+1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
@@ -26,11 +26,11 @@ With the **Chat Builder**, you can quickly set up chat functionalities, customiz
***
-## **Launch the Chat Builder**
+## **Launch the UI Kit Builder**
1. Log in to your [**CometChat Dashboard**](https://app.cometchat.com).
2. Select your application from the list.
-3. Navigate to **Integrate** > **React** > **Launch Chat Builder**.
+3. Navigate to **Integrate** > **React** > **Launch UI Kit Builder**.
***
@@ -70,7 +70,7 @@ If your app requires any of the following features, make sure to enable them fro
## **Preview Customizations (Optional)**
-Before integrating the Chat Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the Chat Builder into your project.
+Before integrating the UI Kit Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the UI Kit Builder into your project.
> You can preview the experience:
>
@@ -99,16 +99,16 @@ Before integrating the Chat Builder into your project, you can preview the chat
***
-## **Integration with CometChat Chat Builder (React.js)**
+## **Integration with CometChat UI Kit Builder (React.js)**
-Follow these steps to integrate CometChat Chat Builder into your existing React project:
+Follow these steps to integrate CometChat UI Kit Builder into your existing React project:
### **Step 1: Install Dependencies**
Run the following command to install the required dependencies:
```ruby
-npm install @cometchat/chat-uikit-react@6.2.0 @cometchat/calls-sdk-javascript
+npm install @cometchat/chat-uikit-react@6.3.2 @cometchat/calls-sdk-javascript
```
### **Step 2: Copy CometChat Folder**
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index 64827984..e3a972a4 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -55,9 +55,9 @@ href="https://link.cometchat.com/react-conversation-list-message"
## **Integration**
-{/* ### **Option 1: Chat Builder (Pre-Assembled UI)**
+{/* ### **Option 1: UI Kit Builder (Pre-Assembled UI)**
-A ready-to-use chat interface—configured via a Chat Builder—built on top of our UI Kits.
+A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.
@@ -157,7 +157,7 @@ A collection of individual components—like conversation lists, message lists,
3. **Follow the Setup Guide** –
- {/* * **Chat Builder** – [React.js](/ui-kit/react/builder-integration) or [Next.js](/ui-kit/react/builder-integration-nextjs) or [React Router](/ui-kit/react/builder-integration-react-router). */}
+ {/* * **UI Kit Builder** – [React.js](/ui-kit/react/builder-integration) or [Next.js](/ui-kit/react/builder-integration-nextjs) or [React Router](/ui-kit/react/builder-integration-react-router). */}
* **UI Components** – [React.js](/ui-kit/react/react-js-integration) or [Next.js](/ui-kit/react/next-js-integration) or [React Router](/ui-kit/react/react-router-integration).
4. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview).
diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx
index 92b52ff0..8b90fa5f 100644
--- a/ui-kit/react/react-router-conversation.mdx
+++ b/ui-kit/react/react-router-conversation.mdx
@@ -387,7 +387,7 @@ export default [