diff --git a/chat-builder/nextjs/builder-customisations.mdx b/chat-builder/nextjs/builder-customisations.mdx index c0aab0638..8723b0a85 100644 --- a/chat-builder/nextjs/builder-customisations.mdx +++ b/chat-builder/nextjs/builder-customisations.mdx @@ -1,101 +1,143 @@ --- -title: "Customizing Your UI Kit Builder Integration" -sidebarTitle: "Overview" +title: "Customizing Your UI Kit Builder" +sidebarTitle: "Customizations" +description: "Customize CometChat UI Kit Builder components β€” modify props, styling, and behavior." --- -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. +The `CometChatSettings.ts` file handles basic feature toggles. For deeper customizations, modify component props or source code directly. -*** - -## **How to Customize Components** - -1. **Refer to the UI Kit Documentation**\ - Browse the [**UI Kit components overview**](/ui-kit/react/components-overview) to find the component you'd like to customize.\ - *Example*: [**Message List**](/ui-kit/react/message-list) - -2. **Locate Customization Options**\ - Once you've identified the component, explore its props and features within the documentation.\ - *Example*: [**Sticky DateTime Format**](/ui-kit/react/message-list#sticky-datetime-format) - -3. **Update Props or Modify Code**\ - Use supported props to tweak behavior or look. For advanced changes, navigate through the folder structure and directly edit component logic or styling. - -*** - - -Applying Customizations - -Changes made to the UI Kit Builder settings or components **will not reflect automatically** in your app.\ -If you make additional modifications in the UI Kit Builder after initial setup: - -* Re-download the updated code package -* Reintegrate it into your application - -This ensures all customizations are applied correctly. - - - -*** +--- -## **Example: Customizing Date & Time Format in Message List** +## **Customization Workflow** -### Goal +1. Find the component in the [UI Kit Components Overview](/ui-kit/react/components-overview) +2. Check available props and customization options +3. Update props or edit the component source code -Update how the sticky date headers appear in the chat message list. + + After modifying the UI Kit Builder, re-download and reintegrate the code + package to apply changes. + -### Step-by-Step +--- -1. **Component to Customize**:\ - [Message List](/ui-kit/react/message-list) +## **Example: Custom Date Format** -2. **Customization Option**:\ - [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) +Customize how sticky date headers appear in the message list. -3. **Apply the Prop**: +**Component**: [Message List](/ui-kit/react/message-list) β†’ [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) -```javascript +```jsx import { CometChatMessageList, - CalendarObject + CalendarObject, } from "@cometchat/chat-uikit-react"; -function getDateFormat() { - return new CalendarObject({ - today: `hh:mm A`, // e.g., "10:30 AM" - yesterday: `[Yesterday]`, // Displays literally as "Yesterday" - otherDays: `DD/MM/YYYY`, // e.g., "25/05/2025" - }); -} +const dateFormat = new CalendarObject({ + today: "hh:mm A", // "10:30 AM" + yesterday: "[Yesterday]", + otherDays: "DD/MM/YYYY", // "25/05/2025" +}); - +; ``` -*** - -### Default Format Used +**Default format** (for reference): ```javascript new CalendarObject({ today: "today", yesterday: "yesterday", - otherDays: "DD MMM, YYYY", // e.g., "25 Jan, 2025" + otherDays: "DD MMM, YYYY", // "25 Jan, 2025" }); ``` -*** +--- + +## **Example: Custom Conversation Subtitle** + +Show online status or member count instead of the default last message preview. + +**Component**: [Conversations](/ui-kit/react/conversations) β†’ [`subtitleView`](/ui-kit/react/conversations#subtitleview) + +```jsx +"use client"; + +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +const customSubtitleView = (conversation) => { + if (conversation.getConversationType() === "user") { + const user = conversation.getConversationWith(); + return {user.getStatus() === "online" ? "🟒 Online" : "⚫ Offline"}; + } else { + const group = conversation.getConversationWith(); + return {group.getMembersCount()} members; + } +}; + + +``` + +--- + +## **Example: Custom Send Button** + +Replace the default send button with your brand's icon. - -Why Customize This? +**Component**: [Message Composer](/ui-kit/react/message-composer) β†’ [`sendButtonView`](/ui-kit/react/message-composer#sendbuttonview) -Sticky date headers enhance the chat experience by improving message navigation and giving users better temporal context. Adjust the format based on your target locale, tone of voice, or branding needs. +```jsx +"use client"; - +import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react"; + +const brandedSendButton = ( + { + // Your custom send logic + }} + /> +); + + +``` + +```css +/* Style the custom send button */ +.cometchat-message-composer .cometchat-button { + background: #6852D6; + border-radius: 50%; +} + +.cometchat-message-composer .cometchat-button__icon { + background: #ffffff; +} +``` + +--- -*** +## **Next Steps** + + + + Configure feature toggles and behavior + + + Explore all available UI components + + + Customize colors, typography, and styling + + + Add multi-language support + + diff --git a/chat-builder/nextjs/builder-dir-structure.mdx b/chat-builder/nextjs/builder-dir-structure.mdx index 9ec131b6d..00a616e79 100644 --- a/chat-builder/nextjs/builder-dir-structure.mdx +++ b/chat-builder/nextjs/builder-dir-structure.mdx @@ -1,213 +1,120 @@ --- -title: "CometChat UI Kit Builder Directory Structure" +title: "Directory Structure" sidebarTitle: "Directory Structure" +description: "Overview of the CometChat UI Kit Builder directory layout for Next.js β€” understand where to find and customize components, settings, and styles." --- -This document provides an overview of the CometChat UI Kit Builder directory structure, helping you understand the organization of the project and where to find specific files when you need to customize or extend functionality. - -## Overview - -The CometChat UI Kit Builder follows a modular structure organized by feature and functionality. All UI Kit Builder files are contained within the `src/CometChat/` directory. +The exported UI Kit Builder code lives in `src/CometChat/`. This guide helps you navigate the structure so you know exactly where to make changes. ``` src/ β”œβ”€β”€ CometChat/ -β”‚ β”œβ”€β”€ assets/ -β”‚ β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ context/ -β”‚ β”œβ”€β”€ locales/ -β”‚ β”œβ”€β”€ styles/ -β”‚ β”œβ”€β”€ utils/ +β”‚ β”œβ”€β”€ assets/ # Icons, images, audio files +β”‚ β”œβ”€β”€ components/ # React components (UI elements) +β”‚ β”œβ”€β”€ context/ # React Context providers (state management) +β”‚ β”œβ”€β”€ locales/ # Translation files (en, fr, de, etc.) +β”‚ β”œβ”€β”€ styles/ # CSS files (mirrors components structure) +β”‚ β”œβ”€β”€ utils/ # Utility functions and helpers β”‚ β”œβ”€β”€ CometChatApp.tsx β”‚ β”œβ”€β”€ CometChatSettings.ts β”‚ β”œβ”€β”€ customHooks.ts β”‚ β”œβ”€β”€ decl.d.ts β”‚ └── styleConfig.ts -β”œβ”€β”€ App.css β”œβ”€β”€ App.tsx └── index.tsx ``` -## Directory Details - -### Root Files - -| File | Description | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `CometChatApp.tsx` | The main entry point for the UI Kit Builder application. This is the component you import in your project to render the chat experience. | -| `CometChatSettings.ts` | Contains configuration settings for the UI Kit Builder, including UI elements, features, and theming options. | -| `customHooks.ts` | Custom React hooks used throughout the application. | -| `decl.d.ts` | TypeScript declaration file for type definitions. | -| `styleConfig.ts` | Configuration file for styling across the application. | +--- -### Key Directories +## Root Files -#### `assets/` +| File | Purpose | +| ---------------------- | ------------------------------------------------------------ | +| `CometChatApp.tsx` | Main entry point β€” import this to render the chat experience | +| `CometChatSettings.ts` | Toggle features on/off (messaging, calls, AI copilot, etc.) | +| `customHooks.ts` | Custom React hooks used throughout the application | +| `styleConfig.ts` | Global styling configuration (colors, fonts, spacing) | -Contains UI resources like icons, images, and audio files used throughout the application. +--- -``` -assets/ -β”‚ β”œβ”€β”€ chats.svg -β”‚ β”œβ”€β”€ calls.svg -β”‚ β”œβ”€β”€ users.svg -β”‚ β”œβ”€β”€ groups.svg -β”‚ └── (Other UI icons and images) -``` +## Key Folders -#### `components/` +### `components/` -Contains all React components that make up the UI of the UI Kit Builder. +Each component folder contains the main `.tsx` file and associated hooks (`use*.ts`). These are the building blocks of your chat UI. ``` components/ -β”œβ”€β”€ CometChatAddMembers/ -β”‚ β”œβ”€β”€ CometChatAddMembers.tsx -β”‚ └── useCometChatAddMembers.ts -β”œβ”€β”€ CometChatAlertPopup/ -β”‚ └── CometChatAlertPopup.tsx -β”œβ”€β”€ CometChatBannedMembers/ -β”‚ └── CometChatBannedMembers.tsx -β”œβ”€β”€ CometChatCallLog/ -β”‚ β”œβ”€β”€ CometChatCallLogDetails.tsx -β”‚ β”œβ”€β”€ CometChatCallLogHistory.tsx -β”‚ β”œβ”€β”€ CometChatCallLogInfo.tsx -β”‚ β”œβ”€β”€ CometChatCallLogParticipants.tsx -β”‚ └── CometChatCallLogRecordings.tsx -β”œβ”€β”€ CometChatCreateGroup/ -β”‚ └── CometChatCreateGroup.tsx -β”œβ”€β”€ CometChatDetails/ -β”‚ β”œβ”€β”€ CometChatThreadedMessages.tsx -β”‚ └── CometChatUserDetails.tsx -β”œβ”€β”€ CometChatHome/ -β”‚ └── CometChatHome.tsx -β”œβ”€β”€ CometChatJoinGroup/ -β”‚ └── CometChatJoinGroup.tsx -β”œβ”€β”€ CometChatLogin/ -β”‚ β”œβ”€β”€ CometChatAppCredentials.tsx -β”‚ β”œβ”€β”€ CometChatLogin.tsx -β”‚ └── sampledata.ts -β”œβ”€β”€ CometChatMessages/ -β”‚ β”œβ”€β”€ CometChatEmptyStateView.tsx -β”‚ └── CometChatMessages.tsx -β”œβ”€β”€ CometChatSelector/ -β”‚ β”œβ”€β”€ CometChatSelector.tsx -β”‚ └── CometChatTabs.tsx -└── CometChatTransferOwnership/ - β”œβ”€β”€ CometChatTransferOwnership.tsx - └── useCometChatTransferOwnership.ts -``` - -Each component folder typically contains: - -* The main component file (`.tsx`) -* Associated hook files (`use*.ts`) for component logic -* Subcomponents specific to that feature area - -#### `context/` - -Contains React Context providers used for state management across the application. - -```python -context/ -β”œβ”€β”€ AppContext.tsx # Main application context -β”œβ”€β”€ CometChatContext.tsx # Context for builder settings -└── appReducer.ts # Reducer functions for AppContext +β”œβ”€β”€ CometChatAddMembers/ # Add members to groups +β”œβ”€β”€ CometChatBannedMembers/ # Manage banned users +β”œβ”€β”€ CometChatCallLog/ # Call history display +β”œβ”€β”€ CometChatCreateGroup/ # Group creation flow +β”œβ”€β”€ CometChatDetails/ # User/group details panel +β”œβ”€β”€ CometChatHome/ # Main chat home screen +β”œβ”€β”€ CometChatJoinGroup/ # Join group flow +β”œβ”€β”€ CometChatLogin/ # Login screen +β”œβ”€β”€ CometChatMessages/ # Message list and composer +β”œβ”€β”€ CometChatSelector/ # Conversation/user selector +└── CometChatTransferOwnership/ # Transfer group ownership ``` -#### `locales/` +### `context/` -Contains translations for different languages, enabling localization of the UI. +State management for the chat application. -```bash -locales/ (Contains translations for different languages) -β”œβ”€β”€ en/en.json -β”œβ”€β”€ fr/fr.json -β”œβ”€β”€ de/de.json -└── (Other language JSON files) ``` - -#### `styles/` - -Contains CSS files for styling components, organized to mirror the components directory structure. - -``` -styles/ -β”œβ”€β”€ CometChatAddMembers/ -β”‚ └── CometChatAddMembers.css -β”œβ”€β”€ CometChatAlertPopup/ -β”‚ └── CometChatAlertPopup.css -β”œβ”€β”€ CometChatBannedMembers/ -β”‚ └── CometChatBannedMembers.css -β”œβ”€β”€ CometChatCallLog/ -β”‚ β”œβ”€β”€ CometChatCallLogDetails.css -β”‚ β”œβ”€β”€ CometChatCallLogHistory.css -β”‚ β”œβ”€β”€ CometChatCallLogInfo.css -β”‚ β”œβ”€β”€ CometChatCallLogParticipants.css -β”‚ └── CometChatCallLogRecordings.css -β”œβ”€β”€ CometChatCreateGroup/ -β”‚ └── CometChatCreateGroup.css -β”œβ”€β”€ CometChatDetails/ -β”‚ β”œβ”€β”€ CometChatDetails.css -β”‚ β”œβ”€β”€ CometChatThreadedMessages.css -β”‚ └── CometChatUserDetails.css -β”œβ”€β”€ CometChatLogin/ -β”‚ β”œβ”€β”€ CometChatAppCredentials.css -β”‚ └── CometChatLogin.css -β”œβ”€β”€ CometChatMessages/ -β”‚ β”œβ”€β”€ CometChatEmptyStateView.css -β”‚ └── CometChatMessages.css -β”œβ”€β”€ CometChatNewChat/ -β”‚ └── CometChatNewChatView.css -β”œβ”€β”€ CometChatSelector/ -β”‚ β”œβ”€β”€ CometChatSelector.css -β”‚ └── CometChatTabs.css -β”œβ”€β”€ CometChatTransferOwnership/ -β”‚ └── CometChatTransferOwnership.css -└── CometChatApp.css -``` - -#### `utils/` - -Contains utility functions and helpers used across the application. - -```python -utils/ -└── utils.ts # General utility functions +context/ +β”œβ”€β”€ AppContext.tsx # Main application state +β”œβ”€β”€ CometChatContext.tsx # Builder settings and configuration +└── appReducer.ts # State reducer functions ``` -## Key Components Overview - -* **CometChatHome**: Main dashboard component that serves as the entry point for the chat experience -* **CometChatMessages**: Core component for displaying and managing chat messages -* **CometChatCallLog**: Components for call history and details -* **CometChatDetails**: User and group details and settings -* **CometChatLogin**: Authentication-related components -* **CometChatSelector/CometChatTabs**: Navigation and tab-based interface components +### `styles/` -## Customization Points +CSS files organized to mirror the components structure. Each component has a corresponding style folder. -When customizing the UI Kit Builder, you'll typically work with: +### `locales/` -1. **`CometChatSettings.ts`**: To modify high-level configuration -2. **`styleConfig.ts`**: To change theme colors, fonts, and other styling variables -3. **Component styles**: To make specific UI adjustments to individual components -4. **Locale files**: To modify text strings or add new language support +Translation files for multi-language support. Add or modify JSON files here to customize text. -## Recommendations for Modifications - -* Avoid direct modification of core components when possible -* Use the settings files for configuration changes -* Use CSS overrides for styling customizations -* For extensive customizations, consider creating wrapper components that use the UI Kit Builder components as children +--- -*** +## Quick Reference: Where to Customize -## **Conclusion** +| What you want to change | Where to look | +| ----------------------- | ----------------------------- | +| Enable/disable features | `CometChatSettings.ts` | +| Theme colors & fonts | `styleConfig.ts` | +| Component-specific CSS | `styles//` | +| Text & translations | `locales//.json` | +| Component behavior | `components//` | -This structured breakdown of the **CometChat UI Kit Builder directory** helps developers understand the project layout, making it easier to navigate, extend, and customize as needed. + + Prefer using settings and CSS overrides. For extensive changes, create wrapper + components instead of modifying core files directly. + -For further customization and integration details, refer to: +--- -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. +## Next Steps + + + + Configure feature toggles and behavior + + + Modify component props, styling, and behavior + + + Customize colors, typography, and styling + + + Add multi-language support + + diff --git a/chat-builder/nextjs/builder-settings.mdx b/chat-builder/nextjs/builder-settings.mdx index 4aa787523..c768dba2f 100644 --- a/chat-builder/nextjs/builder-settings.mdx +++ b/chat-builder/nextjs/builder-settings.mdx @@ -1,9 +1,15 @@ --- -title: "CometChat Settings Guide" +title: "UI Kit Builder Settings" description: "Comprehensive reference for all CometChatSettings options." --- -The `CometChatSettings` object controls everything the Next.js Builder rendersβ€”messaging, AI helpers, calls, layout and theming. Use this page as a definitive map of every toggle with recommended defaults. +The `CometChatSettings` object controls everything the Next.js UI Kit Builder rendersβ€”messaging, AI helpers, calls, layout, theming, and agent tools. + + + **For developers customizing their chat UI**: Edit `CometChatSettings.ts` to + enable/disable features like messaging, calls, AI copilot, and theming. See + [Integration Guide](/chat-builder/nextjs/integration) for setup. + ## Top-level structure @@ -12,92 +18,142 @@ export interface CometChatSettings { chatFeatures: { ... } callFeatures: { ... } layout: { ... } - style: { ... } + style: { ... } } ``` --- + +All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely. + + ## 1. Chat Features (`chatFeatures`) ### 1.1 Core Messaging Experience (`coreMessagingExperience`) -Controls the essentials of chat. - -| Property | Type | Description | -| --- | --- | --- | -| typingIndicator | boolean | Show β€œuser is typing” state. | -| threadConversationAndReplies | boolean | Enable threaded conversations and replies. | -| photosSharing | boolean | Allow sharing images. | -| videoSharing | boolean | Allow sharing videos. | -| audioSharing | boolean | Allow sharing audio clips. | -| fileSharing | boolean | Allow generic file uploads. | -| editMessage | boolean | Let users edit their sent messages. | -| deleteMessage | boolean | Let users delete their sent messages. | -| messageDeliveryAndReadReceipts | boolean | Show delivery/read receipts. | -| userAndFriendsPresence | boolean | Display online/offline presence. | -| conversationAndAdvancedSearch | boolean (optional) | Enable conversation + advanced search. | -| moderation | boolean (optional) | Turn on content moderation tools. | -| quotedReplies | boolean (optional) | Allow quoting messages. | -| markAsUnread | boolean (optional) | Let users mark messages as unread. | + +Essential messaging features: typing indicators, media sharing, message actions, and presence. + +| Setting | Type | What It Does | +| ---------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Typing indicator (`typingIndicator`) | boolean | Shows "typing..." indicator when someone is composing a message | +| Thread conversation & replies (`threadConversationAndReplies`) | boolean | Enables threaded replies to specific messages, creating nested conversation threads | +| Photos sharing (`photosSharing`) | boolean | Allows users to share images from device or camera | +| Video sharing (`videoSharing`) | boolean | Allows users to share video files | +| Audio sharing (`audioSharing`) | boolean | Allows users to share audio files (mp3, wav, etc.) | +| File sharing (`fileSharing`) | boolean | Allows users to share documents (PDF, DOC, etc.) | +| Edit messages (`editMessage`) | boolean | Lets users modify their sent messages; edited messages show "(edited)" label | +| Delete messages (`deleteMessage`) | boolean | Lets users remove their sent messages | +| Message delivery and read receipts (`messageDeliveryAndReadReceipts`) | boolean | Shows delivery (βœ“) and read (βœ“βœ“) status indicators on messages | +| User & friends presence (`userAndFriendsPresence`) | boolean | Shows online/offline status dot next to user avatars | +| Conversation and Advanced Search (`conversationAndAdvancedSearch`) | boolean | Enables search across messages, users, and conversations | +| Quoted Replies (`quotedReplies`) | boolean | Lets users quote a message when replying, showing the original above their response | +| Mark as Unread (`markAsUnread`) | boolean | Lets users mark a conversation as unread to revisit later | + + + Empower users with a seamless chat experienceβ€”reply to specific messages with + quoted replies, mark conversations as unread for later, and search across all + chats instantly. Learn more about [Core + Features](/ui-kit/react/core-features). + ### 1.2 Deeper User Engagement (`deeperUserEngagement`) -Richer ways to participate. - -| Property | Type | Description | -| --- | --- | --- | -| mentions | boolean | Enable @mentions. | -| mentionAll | boolean (optional) | Allow @all to notify everyone in the group. | -| reactions | boolean | Emoji/label reactions on messages. | -| messageTranslation | boolean | Inline message translation. | -| polls | boolean | Create and vote on polls. | -| collaborativeWhiteboard | boolean | Real-time whiteboard. | -| collaborativeDocument | boolean | Collaborative docs. | -| voiceNotes | boolean | Voice-note capture and send. | -| emojis | boolean | Emoji keyboard support. | -| stickers | boolean | Sticker sending. | -| userInfo | boolean | View user profile info. | -| groupInfo | boolean | View group details. | -| reportMessage | boolean (optional) | Allow reporting a message. | + +Interactive features: mentions, reactions, polls, voice notes, and collaborative tools. + +| Setting | Type | What It Does | +| ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Mentions (`mentions`) | boolean | Lets users @mention specific people in a message to notify them | +| Mention All (`mentionAll`) | boolean | Lets users type @all to notify every member in a group chat | +| Reactions (`reactions`) | boolean | Lets users add emoji reactions (πŸ‘ ❀️ πŸ˜‚ etc.) to messages | +| Message Translation (`messageTranslation`) | boolean | Translates messages to user's preferred language. Requires Dashboard setup | +| Polls (`polls`) | boolean | Lets users create polls with multiple options for group voting. Requires Dashboard setup | +| Collaborative Whiteboard (`collaborativeWhiteboard`) | boolean | Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup | +| Collaborative Document (`collaborativeDocument`) | boolean | Creates shared documents for real-time collaborative editing. Requires Dashboard setup | +| Voice Notes (`voiceNotes`) | boolean | Lets users record and send voice messages | +| Emojis (`emojis`) | boolean | Shows emoji picker in composer for browsing and inserting emojis | +| Stickers (`stickers`) | boolean | Lets users send sticker images from available packs. Requires Dashboard setup | +| User Info (`userInfo`) | boolean | Lets users tap on another user's avatar to view their profile | +| Group Info (`groupInfo`) | boolean | Lets users tap on group header to view group details and member list | +| Report Message (`reportMessage`) | boolean | Lets users flag inappropriate messages for review. Requires moderation setup | + + + Configure these features based on your app's requirements. Learn more about + [Extensions](/ui-kit/react/extensions). + ### 1.3 AI User Copilot (`aiUserCopilot`) -AI assistance inside chat. -| Property | Type | Description | -| --- | --- | --- | -| conversationStarter | boolean | Suggest AI-generated conversation openers. | -| conversationSummary | boolean | Summaries of chat threads. | -| smartReply | boolean | Quick replies suggested by AI. | +AI-powered features to help users start and navigate conversations. + +| Setting | Type | What It Does | +| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Conversation Starter (`conversationStarter`) | boolean | Shows AI-suggested opening messages when starting a new chat. Requires OpenAI API key | +| Conversation Summary (`conversationSummary`) | boolean | Generates an AI-powered summary of the conversation. Requires OpenAI API key | +| Smart Reply (`smartReply`) | boolean | Shows AI-suggested quick reply options based on conversation context. Requires OpenAI API key | -### 1.4 User Management (`userManagement`) β€” Optional + +AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **Chat & Messaging > Settings**. Learn more about [AI Features](/ui-kit/react/ai-features). + -| Property | Type | Description | -| --- | --- | --- | -| friendsOnly | boolean (optional) | Restrict chat to friends-only mode. | +### 1.4 User Management (`userManagement`) + +| Setting | Type | What It Does | +| ------------------------------ | ------- | ------------------------------------------------------------------------------------- | +| Friends Only (`friendsOnly`) | boolean | Restricts chat to friends list only; Users tab shows only friends | ### 1.5 Group Management (`groupManagement`) -| Property | Type | Description | -| --- | --- | --- | -| createGroup | boolean | Allow users to create groups. | -| addMembersToGroups | boolean | Add members to groups. | -| joinLeaveGroup | boolean | Join or leave groups. | -| deleteGroup | boolean | Allow admins to delete groups. | -| viewGroupMembers | boolean | Show group member list. | +Control what users can do with groups. + +| Setting | Type | What It Does | +| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Create Group (`createGroup`) | boolean | Lets users create new public or private groups | +| Add Members to Groups (`addMembersToGroups`) | boolean | Lets group admins/owners invite users to join the group | +| Join/Leave Group (`joinLeaveGroup`) | boolean | Lets users join public groups and leave groups they're in | +| Delete Group (`deleteGroup`) | boolean | Lets group owners permanently delete a group and all its messages | +| View Group Members (`viewGroupMembers`) | boolean | Shows member list in group info | + +### 1.6 Moderation (`moderatorControls`) + +Admin tools for managing group members and content. -### 1.6 Moderator Controls (`moderatorControls`) +| Setting | Type | What It Does | +| -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Blocked message feedback (`moderation`) | boolean | Enables blocked message feedback for blocked messages as per configured moderation rules. Requires Dashboard setup | +| Report Message (`reportMessage`) | boolean | Lets users flag messages for moderator review in Dashboard | +| Kick Users (`kickUsers`) | boolean | Lets admins/moderators remove a user from a group (they can rejoin) | +| Ban Users (`banUsers`) | boolean | Lets admins/moderators permanently remove a user and prevent rejoining | +| Promote/Demote Members (`promoteDemoteMembers`) | boolean | Lets group owners change member roles (member, moderator, admin) | -| Property | Type | Description | -| --- | --- | --- | -| kickUsers | boolean | Kick users from groups. | -| banUsers | boolean | Ban users from groups. | -| promoteDemoteMembers | boolean | Change a member’s scope. | -| reportMessage | boolean (optional) | Enable message reporting. | + + To enable content moderation, set `moderation` and `reportMessage` to `true`, + then configure your moderation rules in the [CometChat + Dashboard](https://app.cometchat.com). See [Rules + Management](/moderation/getting-started#setting-up-moderation-rules) for setup + details. + ### 1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`) -| Property | Type | Description | -| --- | --- | --- | -| sendPrivateMessageToGroupMembers | boolean | DM group members from the group context. | +Allow direct messages between group members. + +| Setting | Type | What It Does | +| -------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Send Private Message to Group Members (`sendPrivateMessageToGroupMembers`) | boolean | Lets users start a 1:1 chat with a group member from their profile | + +### 1.8 In-App Sounds (`inAppSounds`) + +Control sound notifications for incoming and outgoing messages. + +| Setting | Type | What It Does | +| -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Incoming Message Sound (`incomingMessageSound`) | boolean | Plays a sound when a new message is received | +| Outgoing Message Sound (`outgoingMessageSound`) | boolean | Plays a sound when a message is sent | + + +These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the [Sound Manager](/ui-kit/react/sound-manager). + --- @@ -105,62 +161,84 @@ AI assistance inside chat. ### 2.1 Voice and Video Calling (`voiceAndVideoCalling`) -| Property | Type | Description | -| --- | --- | --- | -| oneOnOneVoiceCalling | boolean | One-to-one voice calls. | -| oneOnOneVideoCalling | boolean | One-to-one video calls. | -| groupVideoConference | boolean | Group video calls. | -| groupVoiceConference | boolean | Group voice-only calls. | +Enable voice and video calling capabilities. + +| Setting | Type | What It Does | +| ------------------------------------------------ | ------- | ------------------------------------------------------------------------------------- | +| 1:1 Voice Calling (`oneOnOneVoiceCalling`) | boolean | Shows phone icon in 1:1 chat header for starting voice calls | +| 1:1 Video Calling (`oneOnOneVideoCalling`) | boolean | Shows video camera icon in 1:1 chat header for starting video calls | +| Group Video Conference (`groupVideoConference`) | boolean | Shows video camera icon in group chat header for starting group video calls | +| Group Voice Conference (`groupVoiceConference`) | boolean | Shows phone icon in group chat header for starting group voice calls | + + + Learn more about [Call Features](/ui-kit/react/call-features#features). + --- ## 3. Layout (`layout`) -| Property | Type | Description | -| --- | --- | --- | -| withSideBar | boolean | Show/hide the sidebar. | -| tabs | string[] | Tabs to expose, e.g. `['chats','calls','users','groups']`. | -| chatType | string | Default chat type: `'user'` or `'group'`. | +Control the overall UI structure and navigation. + +| Setting | Type | What It Does | +| ---------------------------- | -------- | ------------------------------------------------------------------------------------- | +| With Sidebar (`withSideBar`) | boolean | Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) on the left side | +| Tabs (`tabs`) | string[] | Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'` | +| Chat Type (`chatType`) | string | Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats | + + + Set `withSideBar: false` for embedded chat widgets or single-conversation + views where navigation isn't needed. + --- ## 4. Style (`style`) +Customize colors, fonts, and theme appearance. + ### 4.1 Theme -| Property | Type | Description | -| --- | --- | --- | -| theme | string | `'light'`, `'dark'`, or `'system'`. | - -### 4.2 Color -| Property | Type | Description | -| --- | --- | --- | -| brandColor | string | Primary UI color (hex). | -| primaryTextLight | string | Text color in light mode. | -| primaryTextDark | string | Text color in dark mode. | -| secondaryTextLight | string | Secondary text color in light mode. | -| secondaryTextDark | string | Secondary text color in dark mode. | -### 4.3 Typography -| Property | Type | Description | -| --- | --- | --- | -| font | string | Font family (e.g., `'roboto'`). | -| size | string | Font size preset (e.g., `'default'`). | +| Setting | Type | What It Does | +| ---------------------------------------- | ------ | ------------------------------------------------------------------------------------- | +| Theme (`theme`) | string | Controls light/dark mode: `'light'`, `'dark'`, or `'system'` (matches device preference) | ---- + + Use `theme: "system"` to automatically match the user's device preference. + Preview your `brandColor` in both light and dark modes for contrast. + +[Learn more about UI Kit Theming](/ui-kit/react/theme) for additional customizations. -{/* ## 5. Agent (`agent`) β€” Optional -Agent-facing options for support scenarios. + -| Property | Type | Description | -| --- | --- | --- | -| chatHistory | boolean | Allow viewing previous chats. | -| newChat | boolean | Start new chat threads. | -| agentIcon | string | URL/path for the agent’s avatar. | -| showAgentIcon | boolean | Display the agent icon in UI. | +### 4.2 Colors ---- */} +| Setting | Type | What It Does | +| ------------------------------------------ | ------ | ------------------------------------------------------------------------------------- | +| Brand Color (`brandColor`) | string | Primary accent color (hex) for buttons, links, active states. Example: `"#6852D6"` | +| Primary Text Light (`primaryTextLight`) | string | Main text color in light mode (hex). Example: `"#2B2B2B"` | +| Primary Text Dark (`primaryTextDark`) | string | Main text color in dark mode (hex). Example: `"#FFFFFF"` | +| Secondary Text Light (`secondaryTextLight`)| string | Secondary text color in light mode (hex) for timestamps, subtitles. Example: `"#727272"` | +| Secondary Text Dark (`secondaryTextDark`) | string | Secondary text color in dark mode (hex) for timestamps, subtitles. Example: `"#989898"` | -## Example configuration + + Match `brandColor` to your website's primary accent color. Use your site's + existing text colors for `primaryTextLight` and `primaryTextDark` to maintain + brand consistency. + + +### 4.3 Typography + +| Setting | Type | What It Does | +| -------------------- | ------ | ------------------------------------------------------------------------------------- | +| Font (`font`) | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'` | +| Size (`size`) | string | Text size and spacing: `'default'`, `'compact'`, or `'comfortable'` | + +--- + +## Settings Overview + +Below is the complete settings structure with default values. Update these in `CometChatSettings.ts` to customize your chat experience. ```json { @@ -176,17 +254,19 @@ Agent-facing options for support scenarios. "deleteMessage": true, "messageDeliveryAndReadReceipts": true, "userAndFriendsPresence": true, - "quotedReplies": true, - "markAsUnread": true + "conversationAndAdvancedSearch": true, + "moderation": true, + "quotedReplies": false, + "markAsUnread": false }, "deeperUserEngagement": { "mentions": true, - "mentionAll": false, + "mentionAll": true, "reactions": true, "messageTranslation": true, "polls": true, - "collaborativeWhiteboard": false, - "collaborativeDocument": false, + "collaborativeWhiteboard": true, + "collaborativeDocument": true, "voiceNotes": true, "emojis": true, "stickers": true, @@ -194,11 +274,13 @@ Agent-facing options for support scenarios. "groupInfo": true }, "aiUserCopilot": { - "conversationStarter": true, - "conversationSummary": true, - "smartReply": true + "conversationStarter": false, + "conversationSummary": false, + "smartReply": false + }, + "userManagement": { + "friendsOnly": false }, - "userManagement": { "friendsOnly": false }, "groupManagement": { "createGroup": true, "addMembersToGroups": true, @@ -209,10 +291,15 @@ Agent-facing options for support scenarios. "moderatorControls": { "kickUsers": true, "banUsers": true, - "promoteDemoteMembers": true + "promoteDemoteMembers": true, + "reportMessage": true }, "privateMessagingWithinGroups": { "sendPrivateMessageToGroupMembers": true + }, + "inAppSounds": { + "incomingMessageSound": true, + "outgoingMessageSound": true } }, "callFeatures": { @@ -232,7 +319,7 @@ Agent-facing options for support scenarios. "theme": "system", "color": { "brandColor": "#6852D6", - "primaryTextLight": "#2B2B2B", + "primaryTextLight": "#141414", "primaryTextDark": "#FFFFFF", "secondaryTextLight": "#727272", "secondaryTextDark": "#989898" @@ -241,31 +328,25 @@ Agent-facing options for support scenarios. "font": "roboto", "size": "default" } - }, - "noCode": { - "docked": true, - "styles": { - "buttonBackGround": "#6852D6", - "buttonShape": "rounded", - "openIcon": "https://example.com/open.svg", - "closeIcon": "https://example.com/close.svg", - "customJs": "console.log('hello from no-code')", - "customCss": ".cc-chat { border-radius: 16px; }", - "dockedAlignment": "right" - } - }, - "agent": { - "chatHistory": true, - "newChat": true, - "agentIcon": "https://example.com/agent.png", - "showAgentIcon": true } } ``` --- -## Tips -- Enable `conversationAndAdvancedSearch` when you need global search across conversations; keep it off for lighter builds. -- For enterprise moderation, pair `moderation` + `reportMessage` with your backend review queues. -- Keep `noCode.styles.customJs` minimal and sanitized; avoid long-running scripts to maintain widget performance. +## Next Steps + + + + Understand the organization of the builder components and generated code. + + + Modify component props, styling, and behavior for deeper customization. + + diff --git a/chat-builder/nextjs/integration.mdx b/chat-builder/nextjs/integration.mdx index 0db49c575..9aed5dbf7 100644 --- a/chat-builder/nextjs/integration.mdx +++ b/chat-builder/nextjs/integration.mdx @@ -1,107 +1,108 @@ --- title: "Getting Started With UI Kit Builder" sidebarTitle: "Integration" +description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your Next.js application, including initialization, user login, SSR handling, and rendering the CometChatApp component." --- -**UI Kit Builder** is a powerful tool designed to simplify the integration of CometChat's UI Kit into your existing React application. - -With the **UI Kit Builder**, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding. +The **UI Kit Builder** simplifies integrating CometChat's UI Kit into your Next.js application β€” quickly set up chat, customize UI elements, and add features without extensive coding. - + + + **For developers integrating chat into Next.js apps**: This guide covers + installing dependencies, initializing CometChat, and rendering the chat UI. + **Prerequisites**: CometChat account with App ID, Region, and Auth Key from + the [CometChat Dashboard](https://app.cometchat.com), plus an existing Next.js + project. + + ## **Complete Integration Workflow** 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. -5. **Integration** - Integrate into your existing application. -6. **Customize Further** - Explore advanced customization options to tailor the chat experience. +2. **Review and Export** - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package. +3. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project. +4. **Integration** - Integrate into your existing application. +5. **Customize Further** - Explore advanced customization options to tailor the chat experience. -*** + + + + +--- ## **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 UI Kit Builder**. - -*** +3. Navigate to **Chat & Messaging** β†’ **Get Started**. +4. Choose your platform and click **Launch UI Kit Builder**. -## **Enable Features in CometChat Dashboard** +--- -If your app requires any of the following features, make sure to enable them from the **[CometChat Dashboard](https://app.cometchat.com/)** +## **Review Your Export** -* **Stickers** – Allow users to send expressive stickers. -* **Polls** – Enable in-chat polls for user engagement. -* **Collaborative Whiteboard** – Let users draw and collaborate in real time. -* **Collaborative Document** – Allow multiple users to edit documents together. -* **Message Translation** – Translate messages between different languages. -* **AI User Copilot** - * Conversation Starter – Suggests conversation openers. - * Conversation Summary – Generates AI-powered chat summaries. - * Smart Reply – Provides quick reply suggestions. +When you click **Export**, a "Review Your Export" modal appears (Step 1 of 3). This lets you: -### **How to Enable These Features?** +- **Review features** β€” See which features will be enabled in your CometChat Dashboard based on your UI Kit configuration +- **Toggle features** β€” Turn individual features on/off before export +- **AI User Copilot** β€” Requires an OpenAI API key (you'll configure this in the next step) - + -1. Log in to your **[CometChat Dashboard](https://app.cometchat.com)** -2. Select your application. -3. Navigate to **Chat > Features**. -4. Toggle **ON** the required features. -5. Click **Save Changes**. + + Only checked features will be enabled in your Dashboard. You can always modify + these settings later in the [CometChat Dashboard](https://app.cometchat.com). + -*** +--- ## **Preview Customizations (Optional)** 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: -> +> > 1. Open the `cometchat-app-react` folder. -> 2. Add credentials for your app in `src/index.tsx`: -> -> ```javascript -> export const COMETCHAT_CONSTANTS = { -> APP_ID: "", // Replace with your App ID -> REGION: "", // Replace with your App Region -> AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token -> }; -> ``` -> -> 3. Install dependencies: -> +> 2. Install dependencies: +> > ``` > npm i > ``` -> -> 4. Run the app: -> +> +> 3. Run the app: +> > ```powershell > npm start > ``` +> +> Your app credentials are already prepopulated in the exported code. -*** +--- ## **Integration with CometChat UI Kit Builder (Next.js)** ### **Step 1: Install Dependencies** ```ruby -npm install @cometchat/chat-uikit-react@6.2.3 @cometchat/calls-sdk-javascript +npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript ``` ### **Step 2: Copy CometChat Folder** Copy the `cometchat-app-react/src/CometChat` folder inside your `src/app` directory. -*** +--- ### **Step 3: Create & Initialize `CometChatNoSSR.tsx`** @@ -116,7 +117,7 @@ src/app/ src/app/CometChatNoSSR/CometChatNoSSR.tsx -```javascript +```javascript {11-13} import React, { useEffect } from "react"; import { CometChatUIKit, @@ -127,9 +128,9 @@ import { CometChatProvider } from "../CometChat/context/CometChatContext"; import { setupLocalization } from "../CometChat/utils/utils"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; const CometChatNoSSR: React.FC = () => { @@ -161,45 +162,36 @@ const CometChatNoSSR: React.FC = () => { export default CometChatNoSSR; ``` -*** - -### **Step 4: User Login** - -To authenticate a user, you need a **`UID`**. You can either: + -1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**. +Your app credentials (`APP_ID`, `AUTH_KEY`, `REGION`) are prepopulated in the exported code. If you need to use different credentials, you can find them in the Credentials block of your app's [Overview section](https://app.cometchat.com) on the CometChat Dashboard. -2. **Use pre-generated test users**: + - * `cometchat-uid-1` - * `cometchat-uid-2` - * `cometchat-uid-3` - * `cometchat-uid-4` - * `cometchat-uid-5` +--- -The **Login** method returns a **User object** containing all relevant details of the logged-in user. +### **Step 4: User Authentication** -*** +CometChat uses a UID (User ID) to identify each user. After initialization, authenticate users to enable chat functionality. - +You can either: -**Security Best Practices** +1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://www.cometchat.com/docs/rest-api/users/create)**. -* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing. -* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. +2. **Use pre-generated test users**: `cometchat-uid-1` through `cometchat-uid-5` - +The **Login** method returns a **User object** containing all relevant details of the logged-in user. -**User Login After Initialization** +**Login After Initialization** -Once the CometChat UI Kit is initialized, you can log in the user **whenever it fits your app’s workflow.** +Log in the user after initialization β€” useful when login happens later in your app flow (e.g., after a login form). ```ts import { CometChatUIKit } from "@cometchat/chat-uikit-react"; -const UID = "UID"; // Replace with your actual UID +const UID = "YOUR_UID"; // Replace with your actual UID CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { if (!user) { @@ -218,13 +210,38 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { + +```js +import { CometChatUIKit } from "@cometchat/chat-uikit-react"; + +const UID = "YOUR_UID"; // Replace with your actual UID + +CometChatUIKit.getLoggedinUser().then((user) => { + if (!user) { + // If no user is logged in, proceed with login + CometChatUIKit.login(UID) + .then((user) => { + console.log("Login Successful:", { user }); + // Mount your app + }) + .catch(console.log); + } else { + // If user is already logged in, mount your app + } +}); +``` + + + -However, **if you prefer to log in the user immediately after initialization,** you can do so within the then block of CometChatUIKit.init(). +**Login During Initialization** + +Alternatively, log in the user immediately inside `CometChatUIKit.init()` β€” ideal for apps that authenticate on startup. -```ts +```ts {11-13} import React, { useEffect } from "react"; import { CometChatUIKit, @@ -235,9 +252,9 @@ import { CometChatProvider } from "../CometChat/context/CometChatContext"; import { setupLocalization } from "../CometChat/utils/utils"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; const CometChatNoSSR: React.FC = () => { @@ -254,7 +271,7 @@ const CometChatNoSSR: React.FC = () => { setupLocalization(); console.log("Initialization completed successfully"); - const UID = "UID"; // Replace with your actual UID + const UID = "YOUR_UID"; // Replace with your actual UID CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { if (!user) { @@ -289,9 +306,83 @@ export default CometChatNoSSR; + +```js {11-13} +import React, { useEffect } from "react"; +import { + CometChatUIKit, + UIKitSettingsBuilder, +} from "@cometchat/chat-uikit-react"; +import CometChatApp from "../CometChat/CometChatApp"; +import { CometChatProvider } from "../CometChat/context/CometChatContext"; +import { setupLocalization } from "../CometChat/utils/utils"; + +export const COMETCHAT_CONSTANTS = { + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token +}; + +const CometChatNoSSR = () => { + useEffect(() => { + const UIKitSettings = new UIKitSettingsBuilder() + .setAppId(COMETCHAT_CONSTANTS.APP_ID) + .setRegion(COMETCHAT_CONSTANTS.REGION) + .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(UIKitSettings) + ?.then(() => { + setupLocalization(); + console.log("Initialization completed successfully"); + + const UID = "YOUR_UID"; // Replace with your actual UID + + CometChatUIKit.getLoggedinUser().then((user) => { + if (!user) { + // If no user is logged in, proceed with login + CometChatUIKit.login(UID) + .then((loggedInUser) => { + console.log("Login Successful:", loggedInUser); + // Mount your app or perform post-login actions if needed + }) + .catch((error) => { + console.error("Login failed:", error); + }); + } else { + console.log("User already logged in:", user); + } + }); + }) + .catch((error) => console.error("Initialization failed", error)); + }, []); + + return ( +
+ + + +
+ ); +}; + +export default CometChatNoSSR; +``` + + + -*** + + +**Auth Key vs Auth Token** + +Auth Key is perfect for prototyping. For production apps, switch to [Auth Token](/ui-kit/react/methods#login-using-auth-token) for secure authentication. [Learn more](/fundamentals/user-auth). + + + +--- ### **Step 5: Disable SSR & Render CometChat Component** @@ -309,7 +400,7 @@ const CometChatComponent = dynamic( () => import("../app/CometChatNoSSR/CometChatNoSSR"), { ssr: false, - } + }, ); export default function CometChatAppWrapper() { @@ -347,7 +438,7 @@ CometChat UI Kit Builder relies on browser APIs like `window`, `document`, and W You can also render the component with default user and group selection: -```javascript +```javascript {12-14} import React, { useEffect, useState } from "react"; import { CometChatUIKit, @@ -359,9 +450,9 @@ import { setupLocalization } from "../CometChat/utils/utils"; import { CometChat } from "@cometchat/chat-sdk-javascript"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; // Functional Component @@ -434,7 +525,7 @@ const CometChatNoSSR: React.FC = () => { return ( /* The CometChatApp component requires a parent element with an explicit height and width - to render properly. Ensure the container has defined dimensions, and adjust them as needed + to render properly. Ensure the container has defined dimensions, and adjust them as needed based on your layout requirements. */
@@ -449,50 +540,56 @@ const CometChatNoSSR: React.FC = () => { export default CometChatNoSSR; ``` -When you enable the **Without Sidebar** option for the Sidebar, the following behavior applies: +#### Without Sidebar Mode -* **User Chats (`chatType = "user"`)**: Displays one-on-one chats only, either for a currently selected user or the default user. -* **Group Chats (`chatType = "group"`)**: Displays group chats exclusively, either for a currently selected group or the default group. +When the sidebar is hidden via the **Without Sidebar** option in UI Kit Builder, the component renders a single chat type based on the `chatType` prop: +| `chatType` | Behavior | +|------------|----------| +| `"user"` | Displays one-on-one conversations with the selected or default user | +| `"group"` | Displays group conversations with the selected or default group | -**Group Action Messages** +Pass the `user` or `group` prop to specify which conversation opens by default. -You can control the visibility of group action messages using the showGroupActionMessages prop: +--- + +### **Step 6: Run Your App** + +Start your development server: ``` - +npm run dev ``` -- If `showGroupActionMessages` is `true (default)`, group action messages will be **visible**. - -- If `showGroupActionMessages` is `false`, group action messages will be **hidden**. +--- -*** +## **Advanced Customizations** -### **Step 6: Run Your App** +### **Group Action Messages** -Start your development server: +Control the visibility of group action messages using the `showGroupActionMessages` prop: +```jsx + ``` -npm run dev -``` -*** +- `true` (default) β€” Group action messages are **visible** +- `false` β€” Group action messages are **hidden** + +### **Auto Open First Item** + +Control whether the first item in lists automatically opens on render using the `autoOpenFirstItem` prop: -## **Additional Configuration Notes** +```jsx + +``` + +- `true` (default) β€” The first item in conversation list, user list, or group list opens automatically on first render +- `false` β€” No item opens until the user clicks on one -Ensure the following features are also turned on in your app > Chat > Features for full functionality: +--- -* Message translation -* Polls -* Stickers -* Collaborative whiteboard -* Collaborative document -* Conversation starter -* Conversation summary -* Smart reply +## **Troubleshooting** If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your `tsConfig.json`: @@ -507,37 +604,41 @@ If you face any issues while integrating the builder in your app project, please If your development server is running, restart it to ensure the new TypeScript configuration is picked up. -*** - -## **Understanding Your Generated Code** + +Stuck on something? Our [Developer Community](http://community.cometchat.com/) and [Support team](https://help.cometchat.com/hc/en-us/requests/new) are happy to help. + -The exported package includes several important elements to help you further customize your chat experience: - -### **Directory Structure** - -The `CometChat` folder contains: - -* **Components** - Individual UI elements (message bubbles, input fields, etc.) -* **Layouts** - Pre-configured arrangement of components -* **Context** - State management for your chat application -* **Hooks** - Custom React hooks for chat functionality -* **Utils** - Helper functions and configuration - -### **Configuration Files** - -* **CometChat Settings File** - Controls the appearance and behavior of your chat UI -* **Theme Configuration** - Customize colors, typography, and spacing -* **Localization Files** - Add support for different languages - -*** +--- ## **Next Steps** Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want. + + + Learn how to customize your integration through the UI Kit Builder settings + file. + + + Understand the organization of the UI Kit Builder components and generated + code. + + + Modify themes and UI elements to match your brand. + + + Customise the UI the way you want with advanced options. + + -*** +--- +```` diff --git a/chat-builder/nextjs/overview.mdx b/chat-builder/nextjs/overview.mdx index 94349fecf..076234e41 100644 --- a/chat-builder/nextjs/overview.mdx +++ b/chat-builder/nextjs/overview.mdx @@ -1,120 +1,141 @@ --- title: "CometChat UI Kit Builder For Next.js" sidebarTitle: "Overview" +description: "CometChat UI Kit Builder for Next.js is a visual development tool that helps you design and configure chat experiences for Next.js applications without building the interface from scratch." --- -The **CometChat UI Kit Builder** for Next.js is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. +It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure. -*** +With CometChat UI Kit Builder, you can: -## **Why Choose CometChat UI Kit Builder?** +- Configure chat and calling features +- Apply theming and layout options +- Export Next.js-ready code -* **Rapid Integration** – Prebuilt UI components for faster deployment. -* **Customizable & Flexible** – Modify the UI to align with your brand’s identity. -* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks. -* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance. +The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling. -*** + + Go to the Integration Guide + -## **User Interface Preview** +--- - - - +## UI Kit Builder Features -*** +**Visual Configuration** β€” UI Kit Builder provides a visual configuration environment for designing your chat interface before integration. -## **Try Live Demo** +**Toggle-Based Feature Control** β€” Messaging and calling features can be controlled through configuration settings in the UI Kit Builder. -**Experience the CometChat UI Kit Builder in action:** +**Ready-to-Export Code** β€” After configuration, UI Kit Builder generates a ready-to-integrate Next.js codebase. - - - +--- - +## How to Use UI Kit Builder -*** +### 1. Design -## **Integration Options** +Customize your chat experience using the visual UI Kit Builder: -A ready-to-use chat interfaceβ€”configured via a UI Kit Builderβ€”built on top of our UI Kits. +- **Configure layout** β€” Toggle all the required features in the dashboard. Choose whether you want a sidebar or not. +- **Themes** β€” Select between system, light, and dark themes. Choose custom colors and typography. +- Customize component behavior directly from the builder interface. - + -**How It Works** - -* Toggle features like @mentions, reactions, media uploads, and more in a visual interface. -* Drag-and-drop or point-and-click to enable or disable components. -* Customize layouts and stylesβ€”no deep coding required. - -**Why It’s Great** - -* **Fastest Setup** – Minimal component wiring. -* **Continuous Customization** – Only turn on the features you want. -* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain. - -*** - -## **Next Steps for Developers** - -1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts). - -2. **Pick a Framework** – React.js or Next.js or React Router. - -3. **Follow the Setup Guide** – - - * **UI Kit Builder** – [Next.js](/ui-kit/react/builder-integration-nextjs). - -4. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview). - -5. **Test & Deploy** – Run tests and launch your chat app. +### 2. Export -*** +Once configured, export production-ready Next.js code tailored to your selected setup. -## **Helpful Resources** +1. Click on **Export Code** +2. Review your export +3. Your code will be successfully exported -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. +### 3. Integrate - - - - - Fully functional sample applications to accelerate your development. +Add the exported code into your Next.js application and connect using your CometChat App ID, Region, and Auth Key. - View on GitHub +1. **Install dependencies** +2. **Copy CometChat folder** into your project's `src` directory +3. **Initialize CometChat** in your app's entry file +4. **User Authentication** β€” CometChat uses a UID (User ID) to identify each user. After initialization, authenticate users to enable chat functionality. +5. **Render the CometChatApp component** β€” Render the chat UI by adding `CometChatApp` to your component +6. **Run the app** β€” Start your application with the appropriate command based on your setup + + Step-by-step instructions for integrating the UI Kit Builder into your Next.js app - - - Access the complete UI Kit source code on GitHub. - - View on GitHub +--- - +## Try Live Demo - +Experience the CometChat UI Kit Builder in action: - UI design resources for customization and prototyping. + + + - View on Figma + + + - +--- +## Need Help? + + + + Connect with other developers and get answers + + + Contact our support team for assistance + -*** - -## **Need Help?** - -If you need assistance, check out: +--- -* [Developer Community](http://community.cometchat.com/) -* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new) +## Related Resources + + + + Learn more about the CometChat JavaScript SDK + + + Explore the React UI Kit components + + + UI Kit Builder for React applications + + + UI Kit Builder for React Router applications + + diff --git a/chat-builder/react-router/builder-customisations.mdx b/chat-builder/react-router/builder-customisations.mdx index 983d43e8f..d22035ce7 100644 --- a/chat-builder/react-router/builder-customisations.mdx +++ b/chat-builder/react-router/builder-customisations.mdx @@ -1,101 +1,139 @@ --- -title: "Customizing Your UI Kit Builder Integration" -sidebarTitle: "Overview" +title: "Customizing Your UI Kit Builder" +sidebarTitle: "Customizations" +description: "Customize CometChat UI Kit Builder components β€” modify props, styling, and behavior." --- -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. +The `CometChatSettings.ts` file handles basic feature toggles. For deeper customizations, modify component props or source code directly. -*** - -## **How to Customize Components** - -1. **Refer to the UI Kit Documentation**\ - Browse the [**UI Kit components overview**](/ui-kit/react/components-overview) to find the component you'd like to customize.\ - *Example*: [**Message List**](/ui-kit/react/message-list) - -2. **Locate Customization Options**\ - Once you've identified the component, explore its props and features within the documentation.\ - *Example*: [**Sticky DateTime Format**](/ui-kit/react/message-list#sticky-datetime-format) - -3. **Update Props or Modify Code**\ - Use supported props to tweak behavior or look. For advanced changes, navigate through the folder structure and directly edit component logic or styling. - -*** - - -Applying Customizations - -Changes made to the UI Kit Builder settings or components **will not reflect automatically** in your app.\ -If you make additional modifications in the UI Kit Builder after initial setup: - -* Re-download the updated code package -* Reintegrate it into your application - -This ensures all customizations are applied correctly. - - - -*** +--- -## **Example: Customizing Date & Time Format in Message List** +## **Customization Workflow** -### Goal +1. Find the component in the [UI Kit Components Overview](/ui-kit/react/components-overview) +2. Check available props and customization options +3. Update props or edit the component source code -Update how the sticky date headers appear in the chat message list. + + After modifying the UI Kit Builder, re-download and reintegrate the code + package to apply changes. + -### Step-by-Step +--- -1. **Component to Customize**:\ - [Message List](/ui-kit/react/message-list) +## **Example: Custom Date Format** -2. **Customization Option**:\ - [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) +Customize how sticky date headers appear in the message list. -3. **Apply the Prop**: +**Component**: [Message List](/ui-kit/react/message-list) β†’ [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) -```javascript +```jsx import { CometChatMessageList, - CalendarObject + CalendarObject, } from "@cometchat/chat-uikit-react"; -function getDateFormat() { - return new CalendarObject({ - today: `hh:mm A`, // e.g., "10:30 AM" - yesterday: `[Yesterday]`, // Displays literally as "Yesterday" - otherDays: `DD/MM/YYYY`, // e.g., "25/05/2025" - }); -} +const dateFormat = new CalendarObject({ + today: "hh:mm A", // "10:30 AM" + yesterday: "[Yesterday]", + otherDays: "DD/MM/YYYY", // "25/05/2025" +}); - +; ``` -*** - -### Default Format Used +**Default format** (for reference): ```javascript new CalendarObject({ today: "today", yesterday: "yesterday", - otherDays: "DD MMM, YYYY", // e.g., "25 Jan, 2025" + otherDays: "DD MMM, YYYY", // "25 Jan, 2025" }); ``` -*** +--- + +## **Example: Custom Conversation Subtitle** + +Show online status or member count instead of the default last message preview. + +**Component**: [Conversations](/ui-kit/react/conversations) β†’ [`subtitleView`](/ui-kit/react/conversations#subtitleview) + +```jsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +const customSubtitleView = (conversation) => { + if (conversation.getConversationType() === "user") { + const user = conversation.getConversationWith(); + return {user.getStatus() === "online" ? "🟒 Online" : "⚫ Offline"}; + } else { + const group = conversation.getConversationWith(); + return {group.getMembersCount()} members; + } +}; + + +``` + +--- + +## **Example: Custom Send Button** + +Replace the default send button with your brand's icon. - -Why Customize This? +**Component**: [Message Composer](/ui-kit/react/message-composer) β†’ [`sendButtonView`](/ui-kit/react/message-composer#sendbuttonview) -Sticky date headers enhance the chat experience by improving message navigation and giving users better temporal context. Adjust the format based on your target locale, tone of voice, or branding needs. +```jsx +import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react"; - +const brandedSendButton = ( + { + // Your custom send logic + }} + /> +); + + +``` + +```css +/* Style the custom send button */ +.cometchat-message-composer .cometchat-button { + background: #6852D6; + border-radius: 50%; +} + +.cometchat-message-composer .cometchat-button__icon { + background: #ffffff; +} +``` + +--- -*** +## **Next Steps** + + + + Configure feature toggles and behavior + + + Explore all available UI components + + + Customize colors, typography, and styling + + + Add multi-language support + + diff --git a/chat-builder/react-router/builder-dir-structure.mdx b/chat-builder/react-router/builder-dir-structure.mdx index 9ec131b6d..a58e39825 100644 --- a/chat-builder/react-router/builder-dir-structure.mdx +++ b/chat-builder/react-router/builder-dir-structure.mdx @@ -1,213 +1,120 @@ --- -title: "CometChat UI Kit Builder Directory Structure" +title: "Directory Structure" sidebarTitle: "Directory Structure" +description: "Overview of the CometChat UI Kit Builder directory layout for React Router β€” understand where to find and customize components, settings, and styles." --- -This document provides an overview of the CometChat UI Kit Builder directory structure, helping you understand the organization of the project and where to find specific files when you need to customize or extend functionality. - -## Overview - -The CometChat UI Kit Builder follows a modular structure organized by feature and functionality. All UI Kit Builder files are contained within the `src/CometChat/` directory. +The exported UI Kit Builder code lives in `src/CometChat/`. This guide helps you navigate the structure so you know exactly where to make changes. ``` src/ β”œβ”€β”€ CometChat/ -β”‚ β”œβ”€β”€ assets/ -β”‚ β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ context/ -β”‚ β”œβ”€β”€ locales/ -β”‚ β”œβ”€β”€ styles/ -β”‚ β”œβ”€β”€ utils/ +β”‚ β”œβ”€β”€ assets/ # Icons, images, audio files +β”‚ β”œβ”€β”€ components/ # React components (UI elements) +β”‚ β”œβ”€β”€ context/ # React Context providers (state management) +β”‚ β”œβ”€β”€ locales/ # Translation files (en, fr, de, etc.) +β”‚ β”œβ”€β”€ styles/ # CSS files (mirrors components structure) +β”‚ β”œβ”€β”€ utils/ # Utility functions and helpers β”‚ β”œβ”€β”€ CometChatApp.tsx β”‚ β”œβ”€β”€ CometChatSettings.ts β”‚ β”œβ”€β”€ customHooks.ts β”‚ β”œβ”€β”€ decl.d.ts β”‚ └── styleConfig.ts -β”œβ”€β”€ App.css β”œβ”€β”€ App.tsx └── index.tsx ``` -## Directory Details - -### Root Files - -| File | Description | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `CometChatApp.tsx` | The main entry point for the UI Kit Builder application. This is the component you import in your project to render the chat experience. | -| `CometChatSettings.ts` | Contains configuration settings for the UI Kit Builder, including UI elements, features, and theming options. | -| `customHooks.ts` | Custom React hooks used throughout the application. | -| `decl.d.ts` | TypeScript declaration file for type definitions. | -| `styleConfig.ts` | Configuration file for styling across the application. | +--- -### Key Directories +## Root Files -#### `assets/` +| File | Purpose | +| ---------------------- | ------------------------------------------------------------ | +| `CometChatApp.tsx` | Main entry point β€” import this to render the chat experience | +| `CometChatSettings.ts` | Toggle features on/off (messaging, calls, AI copilot, etc.) | +| `customHooks.ts` | Custom React hooks used throughout the application | +| `styleConfig.ts` | Global styling configuration (colors, fonts, spacing) | -Contains UI resources like icons, images, and audio files used throughout the application. +--- -``` -assets/ -β”‚ β”œβ”€β”€ chats.svg -β”‚ β”œβ”€β”€ calls.svg -β”‚ β”œβ”€β”€ users.svg -β”‚ β”œβ”€β”€ groups.svg -β”‚ └── (Other UI icons and images) -``` +## Key Folders -#### `components/` +### `components/` -Contains all React components that make up the UI of the UI Kit Builder. +Each component folder contains the main `.tsx` file and associated hooks (`use*.ts`). These are the building blocks of your chat UI. ``` components/ -β”œβ”€β”€ CometChatAddMembers/ -β”‚ β”œβ”€β”€ CometChatAddMembers.tsx -β”‚ └── useCometChatAddMembers.ts -β”œβ”€β”€ CometChatAlertPopup/ -β”‚ └── CometChatAlertPopup.tsx -β”œβ”€β”€ CometChatBannedMembers/ -β”‚ └── CometChatBannedMembers.tsx -β”œβ”€β”€ CometChatCallLog/ -β”‚ β”œβ”€β”€ CometChatCallLogDetails.tsx -β”‚ β”œβ”€β”€ CometChatCallLogHistory.tsx -β”‚ β”œβ”€β”€ CometChatCallLogInfo.tsx -β”‚ β”œβ”€β”€ CometChatCallLogParticipants.tsx -β”‚ └── CometChatCallLogRecordings.tsx -β”œβ”€β”€ CometChatCreateGroup/ -β”‚ └── CometChatCreateGroup.tsx -β”œβ”€β”€ CometChatDetails/ -β”‚ β”œβ”€β”€ CometChatThreadedMessages.tsx -β”‚ └── CometChatUserDetails.tsx -β”œβ”€β”€ CometChatHome/ -β”‚ └── CometChatHome.tsx -β”œβ”€β”€ CometChatJoinGroup/ -β”‚ └── CometChatJoinGroup.tsx -β”œβ”€β”€ CometChatLogin/ -β”‚ β”œβ”€β”€ CometChatAppCredentials.tsx -β”‚ β”œβ”€β”€ CometChatLogin.tsx -β”‚ └── sampledata.ts -β”œβ”€β”€ CometChatMessages/ -β”‚ β”œβ”€β”€ CometChatEmptyStateView.tsx -β”‚ └── CometChatMessages.tsx -β”œβ”€β”€ CometChatSelector/ -β”‚ β”œβ”€β”€ CometChatSelector.tsx -β”‚ └── CometChatTabs.tsx -└── CometChatTransferOwnership/ - β”œβ”€β”€ CometChatTransferOwnership.tsx - └── useCometChatTransferOwnership.ts -``` - -Each component folder typically contains: - -* The main component file (`.tsx`) -* Associated hook files (`use*.ts`) for component logic -* Subcomponents specific to that feature area - -#### `context/` - -Contains React Context providers used for state management across the application. - -```python -context/ -β”œβ”€β”€ AppContext.tsx # Main application context -β”œβ”€β”€ CometChatContext.tsx # Context for builder settings -└── appReducer.ts # Reducer functions for AppContext +β”œβ”€β”€ CometChatAddMembers/ # Add members to groups +β”œβ”€β”€ CometChatBannedMembers/ # Manage banned users +β”œβ”€β”€ CometChatCallLog/ # Call history display +β”œβ”€β”€ CometChatCreateGroup/ # Group creation flow +β”œβ”€β”€ CometChatDetails/ # User/group details panel +β”œβ”€β”€ CometChatHome/ # Main chat home screen +β”œβ”€β”€ CometChatJoinGroup/ # Join group flow +β”œβ”€β”€ CometChatLogin/ # Login screen +β”œβ”€β”€ CometChatMessages/ # Message list and composer +β”œβ”€β”€ CometChatSelector/ # Conversation/user selector +└── CometChatTransferOwnership/ # Transfer group ownership ``` -#### `locales/` +### `context/` -Contains translations for different languages, enabling localization of the UI. +State management for the chat application. -```bash -locales/ (Contains translations for different languages) -β”œβ”€β”€ en/en.json -β”œβ”€β”€ fr/fr.json -β”œβ”€β”€ de/de.json -└── (Other language JSON files) ``` - -#### `styles/` - -Contains CSS files for styling components, organized to mirror the components directory structure. - -``` -styles/ -β”œβ”€β”€ CometChatAddMembers/ -β”‚ └── CometChatAddMembers.css -β”œβ”€β”€ CometChatAlertPopup/ -β”‚ └── CometChatAlertPopup.css -β”œβ”€β”€ CometChatBannedMembers/ -β”‚ └── CometChatBannedMembers.css -β”œβ”€β”€ CometChatCallLog/ -β”‚ β”œβ”€β”€ CometChatCallLogDetails.css -β”‚ β”œβ”€β”€ CometChatCallLogHistory.css -β”‚ β”œβ”€β”€ CometChatCallLogInfo.css -β”‚ β”œβ”€β”€ CometChatCallLogParticipants.css -β”‚ └── CometChatCallLogRecordings.css -β”œβ”€β”€ CometChatCreateGroup/ -β”‚ └── CometChatCreateGroup.css -β”œβ”€β”€ CometChatDetails/ -β”‚ β”œβ”€β”€ CometChatDetails.css -β”‚ β”œβ”€β”€ CometChatThreadedMessages.css -β”‚ └── CometChatUserDetails.css -β”œβ”€β”€ CometChatLogin/ -β”‚ β”œβ”€β”€ CometChatAppCredentials.css -β”‚ └── CometChatLogin.css -β”œβ”€β”€ CometChatMessages/ -β”‚ β”œβ”€β”€ CometChatEmptyStateView.css -β”‚ └── CometChatMessages.css -β”œβ”€β”€ CometChatNewChat/ -β”‚ └── CometChatNewChatView.css -β”œβ”€β”€ CometChatSelector/ -β”‚ β”œβ”€β”€ CometChatSelector.css -β”‚ └── CometChatTabs.css -β”œβ”€β”€ CometChatTransferOwnership/ -β”‚ └── CometChatTransferOwnership.css -└── CometChatApp.css -``` - -#### `utils/` - -Contains utility functions and helpers used across the application. - -```python -utils/ -└── utils.ts # General utility functions +context/ +β”œβ”€β”€ AppContext.tsx # Main application state +β”œβ”€β”€ CometChatContext.tsx # Builder settings and configuration +└── appReducer.ts # State reducer functions ``` -## Key Components Overview - -* **CometChatHome**: Main dashboard component that serves as the entry point for the chat experience -* **CometChatMessages**: Core component for displaying and managing chat messages -* **CometChatCallLog**: Components for call history and details -* **CometChatDetails**: User and group details and settings -* **CometChatLogin**: Authentication-related components -* **CometChatSelector/CometChatTabs**: Navigation and tab-based interface components +### `styles/` -## Customization Points +CSS files organized to mirror the components structure. Each component has a corresponding style folder. -When customizing the UI Kit Builder, you'll typically work with: +### `locales/` -1. **`CometChatSettings.ts`**: To modify high-level configuration -2. **`styleConfig.ts`**: To change theme colors, fonts, and other styling variables -3. **Component styles**: To make specific UI adjustments to individual components -4. **Locale files**: To modify text strings or add new language support +Translation files for multi-language support. Add or modify JSON files here to customize text. -## Recommendations for Modifications - -* Avoid direct modification of core components when possible -* Use the settings files for configuration changes -* Use CSS overrides for styling customizations -* For extensive customizations, consider creating wrapper components that use the UI Kit Builder components as children +--- -*** +## Quick Reference: Where to Customize -## **Conclusion** +| What you want to change | Where to look | +| ----------------------- | ----------------------------- | +| Enable/disable features | `CometChatSettings.ts` | +| Theme colors & fonts | `styleConfig.ts` | +| Component-specific CSS | `styles//` | +| Text & translations | `locales//.json` | +| Component behavior | `components//` | -This structured breakdown of the **CometChat UI Kit Builder directory** helps developers understand the project layout, making it easier to navigate, extend, and customize as needed. + + Prefer using settings and CSS overrides. For extensive changes, create wrapper + components instead of modifying core files directly. + -For further customization and integration details, refer to: +--- -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. +## Next Steps + + + + Configure feature toggles and behavior + + + Modify component props, styling, and behavior + + + Customize colors, typography, and styling + + + Add multi-language support + + diff --git a/chat-builder/react-router/builder-settings.mdx b/chat-builder/react-router/builder-settings.mdx index 2886b43d9..142a6d9d5 100644 --- a/chat-builder/react-router/builder-settings.mdx +++ b/chat-builder/react-router/builder-settings.mdx @@ -1,9 +1,15 @@ --- -title: "CometChat Settings Guide" +title: "UI Kit Builder Settings" description: "Comprehensive reference for all CometChatSettings options." --- -The `CometChatSettings` object controls everything the React Router Builder rendersβ€”messaging, AI helpers, calls, layout and theming. Use this page as a definitive map of every toggle with recommended defaults. +The `CometChatSettings` object controls everything the React Router UI Kit Builder rendersβ€”messaging, AI helpers, calls, layout, theming, and agent tools. + + + **For developers customizing their chat UI**: Edit `CometChatSettings.ts` to + enable/disable features like messaging, calls, AI copilot, and theming. See + [Integration Guide](/chat-builder/react-router/integration) for setup. + ## Top-level structure @@ -12,92 +18,142 @@ export interface CometChatSettings { chatFeatures: { ... } callFeatures: { ... } layout: { ... } - style: { ... } + style: { ... } } ``` --- + +All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely. + + ## 1. Chat Features (`chatFeatures`) ### 1.1 Core Messaging Experience (`coreMessagingExperience`) -Controls the essentials of chat. - -| Property | Type | Description | -| --- | --- | --- | -| typingIndicator | boolean | Show β€œuser is typing” state. | -| threadConversationAndReplies | boolean | Enable threaded conversations and replies. | -| photosSharing | boolean | Allow sharing images. | -| videoSharing | boolean | Allow sharing videos. | -| audioSharing | boolean | Allow sharing audio clips. | -| fileSharing | boolean | Allow generic file uploads. | -| editMessage | boolean | Let users edit their sent messages. | -| deleteMessage | boolean | Let users delete their sent messages. | -| messageDeliveryAndReadReceipts | boolean | Show delivery/read receipts. | -| userAndFriendsPresence | boolean | Display online/offline presence. | -| conversationAndAdvancedSearch | boolean (optional) | Enable conversation + advanced search. | -| moderation | boolean (optional) | Turn on content moderation tools. | -| quotedReplies | boolean (optional) | Allow quoting messages. | -| markAsUnread | boolean (optional) | Let users mark messages as unread. | + +Essential messaging features: typing indicators, media sharing, message actions, and presence. + +| Setting | Type | What It Does | +| ---------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Typing indicator (`typingIndicator`) | boolean | Shows "typing..." indicator when someone is composing a message | +| Thread conversation & replies (`threadConversationAndReplies`) | boolean | Enables threaded replies to specific messages, creating nested conversation threads | +| Photos sharing (`photosSharing`) | boolean | Allows users to share images from device or camera | +| Video sharing (`videoSharing`) | boolean | Allows users to share video files | +| Audio sharing (`audioSharing`) | boolean | Allows users to share audio files (mp3, wav, etc.) | +| File sharing (`fileSharing`) | boolean | Allows users to share documents (PDF, DOC, etc.) | +| Edit messages (`editMessage`) | boolean | Lets users modify their sent messages; edited messages show "(edited)" label | +| Delete messages (`deleteMessage`) | boolean | Lets users remove their sent messages | +| Message delivery and read receipts (`messageDeliveryAndReadReceipts`) | boolean | Shows delivery (βœ“) and read (βœ“βœ“) status indicators on messages | +| User & friends presence (`userAndFriendsPresence`) | boolean | Shows online/offline status dot next to user avatars | +| Conversation and Advanced Search (`conversationAndAdvancedSearch`) | boolean | Enables search across messages, users, and conversations | +| Quoted Replies (`quotedReplies`) | boolean | Lets users quote a message when replying, showing the original above their response | +| Mark as Unread (`markAsUnread`) | boolean | Lets users mark a conversation as unread to revisit later | + + + Empower users with a seamless chat experienceβ€”reply to specific messages with + quoted replies, mark conversations as unread for later, and search across all + chats instantly. Learn more about [Core + Features](/ui-kit/react/core-features). + ### 1.2 Deeper User Engagement (`deeperUserEngagement`) -Richer ways to participate. - -| Property | Type | Description | -| --- | --- | --- | -| mentions | boolean | Enable @mentions. | -| mentionAll | boolean (optional) | Allow @all to notify everyone in the group. | -| reactions | boolean | Emoji/label reactions on messages. | -| messageTranslation | boolean | Inline message translation. | -| polls | boolean | Create and vote on polls. | -| collaborativeWhiteboard | boolean | Real-time whiteboard. | -| collaborativeDocument | boolean | Collaborative docs. | -| voiceNotes | boolean | Voice-note capture and send. | -| emojis | boolean | Emoji keyboard support. | -| stickers | boolean | Sticker sending. | -| userInfo | boolean | View user profile info. | -| groupInfo | boolean | View group details. | -| reportMessage | boolean (optional) | Allow reporting a message. | + +Interactive features: mentions, reactions, polls, voice notes, and collaborative tools. + +| Setting | Type | What It Does | +| ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Mentions (`mentions`) | boolean | Lets users @mention specific people in a message to notify them | +| Mention All (`mentionAll`) | boolean | Lets users type @all to notify every member in a group chat | +| Reactions (`reactions`) | boolean | Lets users add emoji reactions (πŸ‘ ❀️ πŸ˜‚ etc.) to messages | +| Message Translation (`messageTranslation`) | boolean | Translates messages to user's preferred language. Requires Dashboard setup | +| Polls (`polls`) | boolean | Lets users create polls with multiple options for group voting. Requires Dashboard setup | +| Collaborative Whiteboard (`collaborativeWhiteboard`) | boolean | Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup | +| Collaborative Document (`collaborativeDocument`) | boolean | Creates shared documents for real-time collaborative editing. Requires Dashboard setup | +| Voice Notes (`voiceNotes`) | boolean | Lets users record and send voice messages | +| Emojis (`emojis`) | boolean | Shows emoji picker in composer for browsing and inserting emojis | +| Stickers (`stickers`) | boolean | Lets users send sticker images from available packs. Requires Dashboard setup | +| User Info (`userInfo`) | boolean | Lets users tap on another user's avatar to view their profile | +| Group Info (`groupInfo`) | boolean | Lets users tap on group header to view group details and member list | +| Report Message (`reportMessage`) | boolean | Lets users flag inappropriate messages for review. Requires moderation setup | + + + Configure these features based on your app's requirements. Learn more about + [Extensions](/ui-kit/react/extensions). + ### 1.3 AI User Copilot (`aiUserCopilot`) -AI assistance inside chat. -| Property | Type | Description | -| --- | --- | --- | -| conversationStarter | boolean | Suggest AI-generated conversation openers. | -| conversationSummary | boolean | Summaries of chat threads. | -| smartReply | boolean | Quick replies suggested by AI. | +AI-powered features to help users start and navigate conversations. + +| Setting | Type | What It Does | +| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Conversation Starter (`conversationStarter`) | boolean | Shows AI-suggested opening messages when starting a new chat. Requires OpenAI API key | +| Conversation Summary (`conversationSummary`) | boolean | Generates an AI-powered summary of the conversation. Requires OpenAI API key | +| Smart Reply (`smartReply`) | boolean | Shows AI-suggested quick reply options based on conversation context. Requires OpenAI API key | -### 1.4 User Management (`userManagement`) β€” Optional + +AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **Chat & Messaging > Settings**. Learn more about [AI Features](/ui-kit/react/ai-features). + -| Property | Type | Description | -| --- | --- | --- | -| friendsOnly | boolean (optional) | Restrict chat to friends-only mode. | +### 1.4 User Management (`userManagement`) + +| Setting | Type | What It Does | +| ------------------------------ | ------- | ------------------------------------------------------------------------------------- | +| Friends Only (`friendsOnly`) | boolean | Restricts chat to friends list only; Users tab shows only friends | ### 1.5 Group Management (`groupManagement`) -| Property | Type | Description | -| --- | --- | --- | -| createGroup | boolean | Allow users to create groups. | -| addMembersToGroups | boolean | Add members to groups. | -| joinLeaveGroup | boolean | Join or leave groups. | -| deleteGroup | boolean | Allow admins to delete groups. | -| viewGroupMembers | boolean | Show group member list. | +Control what users can do with groups. + +| Setting | Type | What It Does | +| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Create Group (`createGroup`) | boolean | Lets users create new public or private groups | +| Add Members to Groups (`addMembersToGroups`) | boolean | Lets group admins/owners invite users to join the group | +| Join/Leave Group (`joinLeaveGroup`) | boolean | Lets users join public groups and leave groups they're in | +| Delete Group (`deleteGroup`) | boolean | Lets group owners permanently delete a group and all its messages | +| View Group Members (`viewGroupMembers`) | boolean | Shows member list in group info | + +### 1.6 Moderation (`moderatorControls`) + +Admin tools for managing group members and content. -### 1.6 Moderator Controls (`moderatorControls`) +| Setting | Type | What It Does | +| -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Blocked message feedback (`moderation`) | boolean | Enables blocked message feedback for blocked messages as per configured moderation rules. Requires Dashboard setup | +| Report Message (`reportMessage`) | boolean | Lets users flag messages for moderator review in Dashboard | +| Kick Users (`kickUsers`) | boolean | Lets admins/moderators remove a user from a group (they can rejoin) | +| Ban Users (`banUsers`) | boolean | Lets admins/moderators permanently remove a user and prevent rejoining | +| Promote/Demote Members (`promoteDemoteMembers`) | boolean | Lets group owners change member roles (member, moderator, admin) | -| Property | Type | Description | -| --- | --- | --- | -| kickUsers | boolean | Kick users from groups. | -| banUsers | boolean | Ban users from groups. | -| promoteDemoteMembers | boolean | Change a member’s scope. | -| reportMessage | boolean (optional) | Enable message reporting. | + + To enable content moderation, set `moderation` and `reportMessage` to `true`, + then configure your moderation rules in the [CometChat + Dashboard](https://app.cometchat.com). See [Rules + Management](/moderation/getting-started#setting-up-moderation-rules) for setup + details. + ### 1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`) -| Property | Type | Description | -| --- | --- | --- | -| sendPrivateMessageToGroupMembers | boolean | DM group members from the group context. | +Allow direct messages between group members. + +| Setting | Type | What It Does | +| -------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Send Private Message to Group Members (`sendPrivateMessageToGroupMembers`) | boolean | Lets users start a 1:1 chat with a group member from their profile | + +### 1.8 In-App Sounds (`inAppSounds`) + +Control sound notifications for incoming and outgoing messages. + +| Setting | Type | What It Does | +| -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Incoming Message Sound (`incomingMessageSound`) | boolean | Plays a sound when a new message is received | +| Outgoing Message Sound (`outgoingMessageSound`) | boolean | Plays a sound when a message is sent | + + +These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the [Sound Manager](/ui-kit/react/sound-manager). + --- @@ -105,62 +161,84 @@ AI assistance inside chat. ### 2.1 Voice and Video Calling (`voiceAndVideoCalling`) -| Property | Type | Description | -| --- | --- | --- | -| oneOnOneVoiceCalling | boolean | One-to-one voice calls. | -| oneOnOneVideoCalling | boolean | One-to-one video calls. | -| groupVideoConference | boolean | Group video calls. | -| groupVoiceConference | boolean | Group voice-only calls. | +Enable voice and video calling capabilities. + +| Setting | Type | What It Does | +| ------------------------------------------------ | ------- | ------------------------------------------------------------------------------------- | +| 1:1 Voice Calling (`oneOnOneVoiceCalling`) | boolean | Shows phone icon in 1:1 chat header for starting voice calls | +| 1:1 Video Calling (`oneOnOneVideoCalling`) | boolean | Shows video camera icon in 1:1 chat header for starting video calls | +| Group Video Conference (`groupVideoConference`) | boolean | Shows video camera icon in group chat header for starting group video calls | +| Group Voice Conference (`groupVoiceConference`) | boolean | Shows phone icon in group chat header for starting group voice calls | + + + Learn more about [Call Features](/ui-kit/react/call-features#features). + --- ## 3. Layout (`layout`) -| Property | Type | Description | -| --- | --- | --- | -| withSideBar | boolean | Show/hide the sidebar. | -| tabs | string[] | Tabs to expose, e.g. `['chats','calls','users','groups']`. | -| chatType | string | Default chat type: `'user'` or `'group'`. | +Control the overall UI structure and navigation. + +| Setting | Type | What It Does | +| ---------------------------- | -------- | ------------------------------------------------------------------------------------- | +| With Sidebar (`withSideBar`) | boolean | Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) on the left side | +| Tabs (`tabs`) | string[] | Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'` | +| Chat Type (`chatType`) | string | Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats | + + + Set `withSideBar: false` for embedded chat widgets or single-conversation + views where navigation isn't needed. + --- ## 4. Style (`style`) +Customize colors, fonts, and theme appearance. + ### 4.1 Theme -| Property | Type | Description | -| --- | --- | --- | -| theme | string | `'light'`, `'dark'`, or `'system'`. | - -### 4.2 Color -| Property | Type | Description | -| --- | --- | --- | -| brandColor | string | Primary UI color (hex). | -| primaryTextLight | string | Text color in light mode. | -| primaryTextDark | string | Text color in dark mode. | -| secondaryTextLight | string | Secondary text color in light mode. | -| secondaryTextDark | string | Secondary text color in dark mode. | -### 4.3 Typography -| Property | Type | Description | -| --- | --- | --- | -| font | string | Font family (e.g., `'roboto'`). | -| size | string | Font size preset (e.g., `'default'`). | +| Setting | Type | What It Does | +| ---------------------------------------- | ------ | ------------------------------------------------------------------------------------- | +| Theme (`theme`) | string | Controls light/dark mode: `'light'`, `'dark'`, or `'system'` (matches device preference) | ---- + + Use `theme: "system"` to automatically match the user's device preference. + Preview your `brandColor` in both light and dark modes for contrast. + +[Learn more about UI Kit Theming](/ui-kit/react/theme) for additional customizations. -{/* ## 5. Agent (`agent`) β€” Optional -Agent-facing options for support scenarios. + -| Property | Type | Description | -| --- | --- | --- | -| chatHistory | boolean | Allow viewing previous chats. | -| newChat | boolean | Start new chat threads. | -| agentIcon | string | URL/path for the agent’s avatar. | -| showAgentIcon | boolean | Display the agent icon in UI. | +### 4.2 Colors ---- */} +| Setting | Type | What It Does | +| ------------------------------------------ | ------ | ------------------------------------------------------------------------------------- | +| Brand Color (`brandColor`) | string | Primary accent color (hex) for buttons, links, active states. Example: `"#6852D6"` | +| Primary Text Light (`primaryTextLight`) | string | Main text color in light mode (hex). Example: `"#2B2B2B"` | +| Primary Text Dark (`primaryTextDark`) | string | Main text color in dark mode (hex). Example: `"#FFFFFF"` | +| Secondary Text Light (`secondaryTextLight`)| string | Secondary text color in light mode (hex) for timestamps, subtitles. Example: `"#727272"` | +| Secondary Text Dark (`secondaryTextDark`) | string | Secondary text color in dark mode (hex) for timestamps, subtitles. Example: `"#989898"` | -## Example configuration + + Match `brandColor` to your website's primary accent color. Use your site's + existing text colors for `primaryTextLight` and `primaryTextDark` to maintain + brand consistency. + + +### 4.3 Typography + +| Setting | Type | What It Does | +| -------------------- | ------ | ------------------------------------------------------------------------------------- | +| Font (`font`) | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'` | +| Size (`size`) | string | Text size and spacing: `'default'`, `'compact'`, or `'comfortable'` | + +--- + +## Settings Overview + +Below is the complete settings structure with default values. Update these in `CometChatSettings.ts` to customize your chat experience. ```json { @@ -176,17 +254,19 @@ Agent-facing options for support scenarios. "deleteMessage": true, "messageDeliveryAndReadReceipts": true, "userAndFriendsPresence": true, - "quotedReplies": true, - "markAsUnread": true + "conversationAndAdvancedSearch": true, + "moderation": true, + "quotedReplies": false, + "markAsUnread": false }, "deeperUserEngagement": { "mentions": true, - "mentionAll": false, + "mentionAll": true, "reactions": true, "messageTranslation": true, "polls": true, - "collaborativeWhiteboard": false, - "collaborativeDocument": false, + "collaborativeWhiteboard": true, + "collaborativeDocument": true, "voiceNotes": true, "emojis": true, "stickers": true, @@ -194,11 +274,13 @@ Agent-facing options for support scenarios. "groupInfo": true }, "aiUserCopilot": { - "conversationStarter": true, - "conversationSummary": true, - "smartReply": true + "conversationStarter": false, + "conversationSummary": false, + "smartReply": false + }, + "userManagement": { + "friendsOnly": false }, - "userManagement": { "friendsOnly": false }, "groupManagement": { "createGroup": true, "addMembersToGroups": true, @@ -209,10 +291,15 @@ Agent-facing options for support scenarios. "moderatorControls": { "kickUsers": true, "banUsers": true, - "promoteDemoteMembers": true + "promoteDemoteMembers": true, + "reportMessage": true }, "privateMessagingWithinGroups": { "sendPrivateMessageToGroupMembers": true + }, + "inAppSounds": { + "incomingMessageSound": true, + "outgoingMessageSound": true } }, "callFeatures": { @@ -232,7 +319,7 @@ Agent-facing options for support scenarios. "theme": "system", "color": { "brandColor": "#6852D6", - "primaryTextLight": "#2B2B2B", + "primaryTextLight": "#141414", "primaryTextDark": "#FFFFFF", "secondaryTextLight": "#727272", "secondaryTextDark": "#989898" @@ -241,31 +328,25 @@ Agent-facing options for support scenarios. "font": "roboto", "size": "default" } - }, - "noCode": { - "docked": true, - "styles": { - "buttonBackGround": "#6852D6", - "buttonShape": "rounded", - "openIcon": "https://example.com/open.svg", - "closeIcon": "https://example.com/close.svg", - "customJs": "console.log('hello from no-code')", - "customCss": ".cc-chat { border-radius: 16px; }", - "dockedAlignment": "right" - } - }, - "agent": { - "chatHistory": true, - "newChat": true, - "agentIcon": "https://example.com/agent.png", - "showAgentIcon": true } } ``` --- -## Tips -- Enable `conversationAndAdvancedSearch` when you need global search across conversations; keep it off for lighter builds. -- For enterprise moderation, pair `moderation` + `reportMessage` with your backend review queues. -- Keep `noCode.styles.customJs` minimal and sanitized; avoid long-running scripts to maintain widget performance. +## Next Steps + + + + Understand the organization of the builder components and generated code. + + + Modify component props, styling, and behavior for deeper customization. + + diff --git a/chat-builder/react-router/integration.mdx b/chat-builder/react-router/integration.mdx index 915049287..12935a44f 100644 --- a/chat-builder/react-router/integration.mdx +++ b/chat-builder/react-router/integration.mdx @@ -1,212 +1,222 @@ --- title: "Getting Started With UI Kit Builder" sidebarTitle: "Integration" +description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your React Router application, including initialization, user login, SSR handling, and rendering the CometChatApp component." --- -**UI Kit Builder** is a powerful tool designed to simplify the integration of CometChat's UI Kit into your existing React application. - -With the **UI Kit Builder**, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding. +The **UI Kit Builder** simplifies integrating CometChat's UI Kit into your React Router application β€” quickly set up chat, customize UI elements, and add features without extensive coding. - + + + **For developers integrating chat into React Router apps**: This guide covers + installing dependencies, initializing CometChat, and rendering the chat UI. + **Prerequisites**: CometChat account with App ID, Region, and Auth Key from + the [CometChat Dashboard](https://app.cometchat.com), plus an existing React + Router project. + + ## **Complete Integration Workflow** 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. -5. **Integration** - Integrate into your existing application. -6. **Customize Further** - Explore advanced customization options to tailor the chat experience. +2. **Review and Export** - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package. +3. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project. +4. **Integration** - Integrate into your existing application. +5. **Customize Further** - Explore advanced customization options to tailor the chat experience. + + + + -*** +--- ## **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 UI Kit Builder**. +3. Navigate to **Chat & Messaging** β†’ **Get Started**. +4. Choose your platform and click **Launch UI Kit Builder**. -*** - -## **Enable Features in CometChat Dashboard** +--- -If your app requires any of the following features, make sure to enable them from the **[CometChat Dashboard](https://app.cometchat.com/)** +## **Review Your Export** -* **Stickers** – Allow users to send expressive stickers. -* **Polls** – Enable in-chat polls for user engagement. -* **Collaborative Whiteboard** – Let users draw and collaborate in real time. -* **Collaborative Document** – Allow multiple users to edit documents together. -* **Message Translation** – Translate messages between different languages. -* **AI User Copilot** - * Conversation Starter – Suggests conversation openers. - * Conversation Summary – Generates AI-powered chat summaries. - * Smart Reply – Provides quick reply suggestions. +When you click **Export**, a "Review Your Export" modal appears (Step 1 of 3). This lets you: -### **How to Enable These Features?** +- **Review features** β€” See which features will be enabled in your CometChat Dashboard based on your UI Kit configuration +- **Toggle features** β€” Turn individual features on/off before export +- **AI User Copilot** β€” Requires an OpenAI API key (you'll configure this in the next step) - + -1. Log in to your **[CometChat Dashboard](https://app.cometchat.com)** -2. Select your application. -3. Navigate to **Chat > Features**. -4. Toggle **ON** the required features. -5. Click **Save Changes**. + + Only checked features will be enabled in your Dashboard. You can always modify + these settings later in the [CometChat Dashboard](https://app.cometchat.com). + -*** +--- ## **Preview Customizations (Optional)** -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. +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: -> +> > 1. Open the `cometchat-app-react` folder. -> 2. Add credentials for your app in `src/index.tsx`: -> -> ```javascript -> export const COMETCHAT_CONSTANTS = { -> APP_ID: "", // Replace with your App ID -> REGION: "", // Replace with your App Region -> AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token -> }; -> ``` -> -> 3. Install dependencies: -> +> 2. Install dependencies: +> > ``` > npm i > ``` -> -> 4. Run the app: -> +> +> 3. Run the app: +> > ```powershell > npm start > ``` +> +> Your app credentials are already prepopulated in the exported code. -*** +--- ## **Integration with CometChat UI Kit Builder (React Router)** +Follow these steps to integrate CometChat UI Kit Builder into your existing React Router project: + ### **Step 1: Install Dependencies** +Run the following command to install the required dependencies: + ```ruby -npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript +npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript ``` ### **Step 2: Copy CometChat Folder** -Copy the `cometchat-app-react/src/CometChat` folder inside your `src/app` directory. - -*** +Copy the `cometchat-app-react/src/CometChat` folder into your project's `src` directory. -### **Step 3: Create & Initialize `CometChatNoSSR.tsx`** +### **Step 3: Initialize CometChat UI Kit** -Directory Structure: +Initialize CometChat in your app's entry file. Select your setup: -```swift -src/app/ -β”œβ”€β”€ CometChat/ -└── CometChatNoSSR/ - └── CometChatNoSSR.tsx -``` + + -```tsx src/app/CometChatNoSSR/CometChatNoSSR.tsx -import React, { useEffect, useState } from "react"; +```tsx {12-14} src/main.tsx +import { createRoot } from "react-dom/client"; +import "./index.css"; +import App from "./App.tsx"; import { - CometChatUIKit, UIKitSettingsBuilder, + CometChatUIKit, } from "@cometchat/chat-uikit-react"; -import CometChatApp from "../CometChat/CometChatApp"; -import { CometChatProvider } from "../CometChat/context/CometChatContext"; -import { setupLocalization } from "../CometChat/utils/utils"; +import { setupLocalization } from "./CometChat/utils/utils.ts"; +import { CometChatProvider } from "./CometChat/context/CometChatContext"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; -const CometChatNoSSR: React.FC = () => { - const [initialized, setInitialized] = useState(false); +const uiKitSettings = new UIKitSettingsBuilder() + .setAppId(COMETCHAT_CONSTANTS.APP_ID) + .setRegion(COMETCHAT_CONSTANTS.REGION) + .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) + .subscribePresenceForAllUsers() + .build(); + +CometChatUIKit.init(uiKitSettings)?.then(() => { + setupLocalization(); + createRoot(document.getElementById("root")!).render( + + + , + ); +}); +``` + + - useEffect(() => { - if (typeof window === "undefined") return; - - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - ?.then(() => { - setupLocalization(); - console.log("Initialization completed successfully"); - setInitialized(true); - }) - .catch((error) => console.error("Initialization failed", error)); - }, []); + - if (!initialized) { - return
Initializing Chat...
; - } +```tsx {12-14} src/index.tsx +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import { + UIKitSettingsBuilder, + CometChatUIKit, +} from "@cometchat/chat-uikit-react"; +import { setupLocalization } from "./CometChat/utils/utils"; +import { CometChatProvider } from "./CometChat/context/CometChatContext"; - return ( -
- - - -
- ); +export const COMETCHAT_CONSTANTS = { + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; -export default CometChatNoSSR; +const uiKitSettings = new UIKitSettingsBuilder() + .setAppId(COMETCHAT_CONSTANTS.APP_ID) + .setRegion(COMETCHAT_CONSTANTS.REGION) + .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) + .subscribePresenceForAllUsers() + .build(); + +CometChatUIKit.init(uiKitSettings)?.then(() => { + setupLocalization(); + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + , + ); +}); ``` -*** - -### **Step 4: User Login** + -To authenticate a user, you need a **`UID`**. You can either: + -1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**. + -2. **Use pre-generated test users**: +Your app credentials (`APP_ID`, `AUTH_KEY`, `REGION`) are prepopulated in the exported code. If you need to use different credentials, you can find them in the Credentials block of your app's [Overview section](https://app.cometchat.com) on the CometChat Dashboard. - * `cometchat-uid-1` - * `cometchat-uid-2` - * `cometchat-uid-3` - * `cometchat-uid-4` - * `cometchat-uid-5` + -The **Login** method returns a **User object** containing all relevant details of the logged-in user. +### **Step 4: User Authentication** -*** +CometChat uses a UID (User ID) to identify each user. After initialization, authenticate users to enable chat functionality. - +You can either: -**Security Best Practices** +1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://www.cometchat.com/docs/rest-api/users/create)**. -* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing. -* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. +2. **Use pre-generated test users**: `cometchat-uid-1` through `cometchat-uid-5` - +The **Login** method returns a **User object** containing all relevant details of the logged-in user. -**User Login After Initialization** +**Login After Initialization** -Once the CometChat UI Kit is initialized, you can log in the user **whenever it fits your app’s workflow.** +Log in the user after initialization β€” useful when login happens later in your app flow (e.g., after a login form). ```ts import { CometChatUIKit } from "@cometchat/chat-uikit-react"; -const UID = "cometchat-uid-1"; // Replace with your actual UID +const UID = "YOUR_UID"; // Replace with your actual UID CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { if (!user) { @@ -222,296 +232,302 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { } }); ``` - - + +```js +import { CometChatUIKit } from "@cometchat/chat-uikit-react"; + +const UID = "YOUR_UID"; // Replace with your actual UID -However, **if you prefer to log in the user immediately after initialization,** you can do so within the then block of CometChatUIKit.init(). +CometChatUIKit.getLoggedinUser().then((user) => { + if (!user) { + // If no user is logged in, proceed with login + CometChatUIKit.login(UID) + .then((user) => { + console.log("Login Successful:", { user }); + // Mount your app + }) + .catch(console.log); + } else { + // If user is already logged in, mount your app + } +}); +``` + + -In this step, we create a React component that will only run on the client (no SSR). Inside the useEffect hook, we: +**Login During Initialization** -1. Build the CometChat UIKit settings using your App ID, Region, and Auth Key. -2. Initialize CometChatUIKit with those settings and set up localization. -3. Check if a user is already logged in; if not, perform a login with a hard-coded UID (replace "UID" with your actual user ID). +Alternatively, log in the user immediately inside `CometChatUIKit.init()` β€” ideal for apps that authenticate on startup. -```ts -import React, { useEffect, useState } from "react"; +```ts {12-14} +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; import { - CometChatUIKit, UIKitSettingsBuilder, + CometChatUIKit, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import CometChatApp from "../CometChat/CometChatApp"; -import { CometChatProvider } from "../CometChat/context/CometChatContext"; -import { setupLocalization } from "../CometChat/utils/utils"; +import { setupLocalization } from "./CometChat/utils/utils"; +import { CometChatProvider } from "./CometChat/context/CometChatContext"; -// Replace these with your actual keys export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Your App ID - REGION: "", // Your App Region - AUTH_KEY: "", // Your Auth Key + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; -const CometChatNoSSR: React.FC = () => { - const [initialized, setInitialized] = useState(false); - const [user, setUser] = useState(null); - - useEffect(() => { - // Exit if not running in the browser - if (typeof window === "undefined") return; - - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - ?.then(() => { - console.log("Initialization completed"); - setupLocalization(); - setInitialized(true); - - const UID = "cometchat-uid-1"; // Replace with your actual UID - - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login(UID) - .then((newUser) => { - console.log("Login successful:", newUser); - setUser(newUser); - }) - .catch((error) => { - console.error("Login failed:", error); - }); - } else { - console.log("User already logged in:", loggedInUser); - setUser(loggedInUser); - } - }); - }) - .catch((error) => { - console.error("CometChat initialization failed:", error); - }); - }, []); +const uiKitSettings = new UIKitSettingsBuilder() + .setAppId(COMETCHAT_CONSTANTS.APP_ID) + .setRegion(COMETCHAT_CONSTANTS.REGION) + .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) + .subscribePresenceForAllUsers() + .build(); + +CometChatUIKit.init(uiKitSettings)?.then(() => { + setupLocalization(); + + const UID = "YOUR_UID"; // Replace with your actual UID + + CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { + if (!user) { + CometChatUIKit.login(UID) + .then((loggedUser: CometChat.User) => { + console.log("Login Successful:", loggedUser); + // Mount your app + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + + ); + }) + .catch((error) => console.error("Login Failed:", error)); + } else { + // User already logged in, mount app directly + console.log("User already logged in:", user); + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + + ); + } + }); +}); +``` + - if (!initialized || !user) { - return
Initializing Chat...
; - } + +```js {12-14} +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import { + UIKitSettingsBuilder, + CometChatUIKit, +} from "@cometchat/chat-uikit-react"; +import { setupLocalization } from "./CometChat/utils/utils"; +import { CometChatProvider } from "./CometChat/context/CometChatContext"; - return ( -
- - - -
- ); +export const COMETCHAT_CONSTANTS = { + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; -export default CometChatNoSSR; +const uiKitSettings = new UIKitSettingsBuilder() + .setAppId(COMETCHAT_CONSTANTS.APP_ID) + .setRegion(COMETCHAT_CONSTANTS.REGION) + .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) + .subscribePresenceForAllUsers() + .build(); + +CometChatUIKit.init(uiKitSettings)?.then(() => { + setupLocalization(); + + const UID = "YOUR_UID"; // Replace with your actual UID + + CometChatUIKit.getLoggedinUser().then((user) => { + if (!user) { + CometChatUIKit.login(UID) + .then((loggedUser) => { + console.log("Login Successful:", loggedUser); + // Mount your app + ReactDOM.createRoot(document.getElementById("root")).render( + + + + ); + }) + .catch((error) => console.error("Login Failed:", error)); + } else { + // User already logged in, mount app directly + console.log("User already logged in:", user); + ReactDOM.createRoot(document.getElementById("root")).render( + + + + ); + } + }); +}); ``` - - -*** - -### **Step 5: Disable SSR and Render the CometChat Component** - -Create a file CometChat.tsx inside the routes folder: + -```javascript -import React, { lazy, Suspense } from 'react'; -import '@cometchat/chat-uikit-react/css-variables.css'; +**Auth Key vs Auth Token** -// Lazy load the CometChat component -const CometChatComponent = lazy(() => import('../CometChatNoSSR/CometChatNoSSR')); +Auth Key is perfect for prototyping. For production apps, switch to [Auth Token](/ui-kit/react/methods#login-using-auth-token) for secure authentication. [Learn more](/fundamentals/user-auth). -export default function Home() { - return ( - Loading Chat...
}> - - - ); -} -``` + -Now, create a route for CometChat in your routes file: +--- -```typescript -import { type RouteConfig, index, route } from "@react-router/dev/routes"; +### **Step 5: Render the CometChatApp Component** -export default [ - index("routes/home.tsx"), - route("chat", "routes/CometChat.tsx"), // Chat Route -] satisfies RouteConfig; -``` +Render the chat UI by adding `CometChatApp` to your component: - +```javascript +import CometChatApp from "./CometChat/CometChatApp"; -Why disable SSR? CometChat UI Kit Builder relies on browser APIs such as window, document, and WebSockets. Since React Router renders on the server by default, disabling SSR for this component prevents runtime errors. +const App = () => { + return ( + /* CometChatApp requires a parent with explicit height & width to render correctly. + Adjust the height and width as needed. + */ +
+ +
+ ); +}; - +export default App; +``` #### **Render with Default User and Group** You can also render the component with default user and group selection: -```javascript -import React, { useEffect, useState } from "react"; -import { - CometChatUIKit, - UIKitSettingsBuilder, -} from "@cometchat/chat-uikit-react"; -import CometChatApp from "../CometChat/CometChatApp"; -import { CometChatProvider } from "../CometChat/context/CometChatContext"; -import { setupLocalization } from "../CometChat/utils/utils"; + + +```tsx +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; - -export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key -}; - -// Functional Component -const CometChatNoSSR: React.FC = () => { - const [user, setUser] = useState(undefined); - - const [selectedUser, setSelectedUser] = useState( - undefined - ); - const [selectedGroup, setSelectedGroup] = useState< - CometChat.Group | undefined - >(undefined); - +import CometChatApp from "./CometChat/CometChatApp"; +const App = () => { + const [selectedUser, setSelectedUser] = + useState(undefined); + const [selectedGroup, setSelectedGroup] = + useState(undefined); useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - // Initialize CometChat UIKit - CometChatUIKit.init(UIKitSettings) - ?.then(() => { - setupLocalization(); - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login("cometchat-uid-1") // Replace with your logged in user UID - .then((user) => { - console.log("Login Successful", { user }); - setUser(user); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); + const UID = "cometchat-uid-2"; // Replace with your User ID + CometChat.getUser(UID).then(setSelectedUser).catch(console.error); + // const GUID = "cometchat-guid-1"; // Replace with your Group ID + // CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error); }, []); + return ( + /* CometChatApp requires a parent with explicit height & width to render correctly. + Adjust the height and width as needed. + */ +
+ +
+ ); +}; +export default App; +``` + + +```jsx +import { useEffect, useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import CometChatApp from "./CometChat/CometChatApp"; +const App = () => { + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); useEffect(() => { - if (user) { - // Fetch user or group from CometChat SDK whose chat you want to load. - - /** Fetching User */ - const UID = "cometchat-uid-2"; // Replace with your actual UID - CometChat.getUser(UID).then( - (user) => { - setSelectedUser(user); - }, - (error) => { - console.log("User fetching failed with error:", error); - } - ); - - /** Fetching Group */ - // const GUID = "cometchat-guid-1"; // Replace with your actual GUID - // CometChat.getGroup(GUID).then( - // (group) => { - // setSelectedGroup(group); - // }, - // (error) => { - // console.log("User fetching failed with error:", error); - // } - // ); - } - }, [user]); - + const UID = "cometchat-uid-2"; // Replace with your User ID + CometChat.getUser(UID).then(setSelectedUser).catch(console.error); + // const GUID = "cometchat-guid-1"; // Replace with your Group ID + // CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error); + }, []); return ( - /* The CometChatApp component requires a parent element with an explicit height and width - to render properly. Ensure the container has defined dimensions, and adjust them as needed - based on your layout requirements. */ -
- - {(selectedUser || selectedGroup) && ( - - )} - + /* CometChatApp requires a parent with explicit height & width to render correctly. + Adjust the height and width as needed. + */ +
+
); }; - -export default CometChatNoSSR; +export default App; ``` + + + +#### Without Sidebar Mode + +When the sidebar is hidden via the **Without Sidebar** option in UI Kit Builder, the component renders a single chat type based on the `chatType` prop: -When you enable the **Without Sidebar** option for the Sidebar, the following behavior applies: +| `chatType` | Behavior | +| ---------- | ------------------------------------------------------------------- | +| `"user"` | Displays one-on-one conversations with the selected or default user | +| `"group"` | Displays group conversations with the selected or default group | -* **User Chats (`chatType = "user"`)**: Displays one-on-one chats only, either for a currently selected user or the default user. -* **Group Chats (`chatType = "group"`)**: Displays group chats exclusively, either for a currently selected group or the default group. +Pass the `user` or `group` prop to specify which conversation opens by default. -*** +### **Step 6: Run the App** -**Group Action Messages** +Start your application with the appropriate command based on your setup: -You can control the visibility of group action messages using the showGroupActionMessages prop: + + +``` +npm run dev +``` + + ``` - +npm start ``` + + -- If `showGroupActionMessages` is `true (default)`, group action messages will be **visible**. +--- -- If `showGroupActionMessages` is `false`, group action messages will be **hidden**. +## **Advanced Customizations** -### **Step 6: Run Your Application** +### **Group Action Messages** -1. **Start the development server** +Control the visibility of group action messages using the `showGroupActionMessages` prop: - ``` - npm run dev - ``` +```jsx + +``` -2. **Verify the chat interface** +- `true` (default) β€” Group action messages are **visible** +- `false` β€” Group action messages are **hidden** -* In your browser, navigate to the `/chat` route `(e.g., http://localhost:3000/chat)`. -* Confirm that the chat experience loads as expected. +### **Auto Open First Item** -*** +Control whether the first item in lists automatically opens on render using the `autoOpenFirstItem` prop: -## **Additional Configuration Notes** +```jsx + +``` -Ensure the following features are also turned on in your app > Chat > Features for full functionality: - -* Message translation -* Polls -* Stickers -* Collaborative whiteboard -* Collaborative document -* Conversation starter -* Conversation summary -* Smart reply +- `true` (default) β€” The first item in conversation list, user list, or group list opens automatically on first render +- `false` β€” No item opens until the user clicks on one + +--- + +## **Troubleshooting** If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your `tsConfig.json`: @@ -526,37 +542,40 @@ If you face any issues while integrating the builder in your app project, please If your development server is running, restart it to ensure the new TypeScript configuration is picked up. -*** - -## **Understanding Your Generated Code** - -The exported package includes several important elements to help you further customize your chat experience: - -### **Directory Structure** - -The `CometChat` folder contains: + + Stuck on something? Our [Developer Community](http://community.cometchat.com/) + and [Support team](https://help.cometchat.com/hc/en-us/requests/new) are happy + to help. + -* **Components** - Individual UI elements (message bubbles, input fields, etc.) -* **Layouts** - Pre-configured arrangement of components -* **Context** - State management for your chat application -* **Hooks** - Custom React hooks for chat functionality -* **Utils** - Helper functions and configuration - -### **Configuration Files** - -* **CometChat Settings File** - Controls the appearance and behavior of your chat UI -* **Theme Configuration** - Customize colors, typography, and spacing -* **Localization Files** - Add support for different languages - -*** +--- ## **Next Steps** Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want. - -*** + + + Learn how to customize your integration through the UI Kit Builder settings + file. + + + Understand the organization of the UI Kit Builder components and generated + code. + + + Modify themes and UI elements to match your brand. + + + Customise the UI the way you want with advanced options. + + \ No newline at end of file diff --git a/chat-builder/react-router/overview.mdx b/chat-builder/react-router/overview.mdx index 38c8b329c..f92c7aa30 100644 --- a/chat-builder/react-router/overview.mdx +++ b/chat-builder/react-router/overview.mdx @@ -1,120 +1,141 @@ --- title: "CometChat UI Kit Builder For React Router" sidebarTitle: "Overview" +description: "CometChat UI Kit Builder for React Router is a visual development tool that helps you design and configure chat experiences for React Router applications without building the interface from scratch." --- -The **CometChat UI Kit Builder** for React Router is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. +It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure. -*** +With CometChat UI Kit Builder, you can: -## **Why Choose CometChat UI Kit Builder?** +- Configure chat and calling features +- Apply theming and layout options +- Export React Router-ready code -* **Rapid Integration** – Prebuilt UI components for faster deployment. -* **Customizable & Flexible** – Modify the UI to align with your brand’s identity. -* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks. -* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance. +The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling. -*** - -## **User Interface Preview** + + Go to the Integration Guide + - - - +--- -*** +## UI Kit Builder Features -*** +**Visual Configuration** β€” UI Kit Builder provides a visual configuration environment for designing your chat interface before integration. -## **Try Live Demo** +**Toggle-Based Feature Control** β€” Messaging and calling features can be controlled through configuration settings in the UI Kit Builder. -**Experience the CometChat UI Kit Builder in action:** +**Ready-to-Export Code** β€” After configuration, UI Kit Builder generates a ready-to-integrate React Router codebase. - +--- - +## How to Use UI Kit Builder - +### 1. Design -*** - -## **Integration** +Customize your chat experience using the visual UI Kit Builder: -A ready-to-use chat interfaceβ€”configured via a UI Kit Builderβ€”built on top of our UI Kits. +- **Configure layout** β€” Toggle all the required features in the dashboard. Choose whether you want a sidebar or not. +- **Themes** β€” Select between system, light, and dark themes. Choose custom colors and typography. +- Customize component behavior directly from the builder interface. - + -**How It Works** - -* Toggle features like @mentions, reactions, media uploads, and more in a visual interface. -* Drag-and-drop or point-and-click to enable or disable components. -* Customize layouts and stylesβ€”no deep coding required. - -**Why It’s Great** - -* **Fastest Setup** – Minimal component wiring. -* **Continuous Customization** – Only turn on the features you want. -* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain. - -*** - -## **Next Steps for Developers** - -1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts). - -2. **Follow the Setup Guide** – - - * **UI Kit Builder** – [React Router](/ui-kit/react/builder-integration-react-router). - -4. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview). - -5. **Test & Deploy** – Run tests and launch your chat app. +### 2. Export -*** +Once configured, export production-ready React Router code tailored to your selected setup. -## **Helpful Resources** +1. Click on **Export Code** +2. Review your export +3. Your code will be successfully exported -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. +### 3. Integrate - - - - - Fully functional sample applications to accelerate your development. +Add the exported code into your React Router application and connect using your CometChat App ID, Region, and Auth Key. - View on GitHub +1. **Install dependencies** +2. **Copy CometChat folder** into your project's `src` directory +3. **Initialize CometChat** in your app's entry file +4. **User Authentication** β€” CometChat uses a UID (User ID) to identify each user. After initialization, authenticate users to enable chat functionality. +5. **Render the CometChatApp component** β€” Render the chat UI by adding `CometChatApp` to your component +6. **Run the app** β€” Start your application with the appropriate command based on your setup + + Step-by-step instructions for integrating the UI Kit Builder into your React Router app - - - Access the complete UI Kit source code on GitHub. - - View on GitHub +--- - +## Try Live Demo - +Experience the CometChat UI Kit Builder in action: - UI design resources for customization and prototyping. + + + - View on Figma + + + - +--- +## Need Help? + + + + Connect with other developers and get answers + + + Contact our support team for assistance + -*** - -## **Need Help?** - -If you need assistance, check out: +--- -* [Developer Community](http://community.cometchat.com/) -* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new) +## Related Resources + + + + Learn more about the CometChat JavaScript SDK + + + Explore the React UI Kit components + + + UI Kit Builder for React applications + + + UI Kit Builder for Next.js applications + + diff --git a/chat-builder/react/builder-customisations.mdx b/chat-builder/react/builder-customisations.mdx index c0aab0638..ef6a9709c 100644 --- a/chat-builder/react/builder-customisations.mdx +++ b/chat-builder/react/builder-customisations.mdx @@ -1,101 +1,139 @@ --- -title: "Customizing Your UI Kit Builder Integration" -sidebarTitle: "Overview" +title: "Customizing Your UI Kit Builder" +sidebarTitle: "Customizations" +description: "Customize CometChat UI Kit Builder components β€” modify props, styling, and behavior." --- -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. +The `CometChatSettings.ts` file handles basic feature toggles. For deeper customizations, modify component props or source code directly. -*** - -## **How to Customize Components** - -1. **Refer to the UI Kit Documentation**\ - Browse the [**UI Kit components overview**](/ui-kit/react/components-overview) to find the component you'd like to customize.\ - *Example*: [**Message List**](/ui-kit/react/message-list) - -2. **Locate Customization Options**\ - Once you've identified the component, explore its props and features within the documentation.\ - *Example*: [**Sticky DateTime Format**](/ui-kit/react/message-list#sticky-datetime-format) - -3. **Update Props or Modify Code**\ - Use supported props to tweak behavior or look. For advanced changes, navigate through the folder structure and directly edit component logic or styling. - -*** - - -Applying Customizations - -Changes made to the UI Kit Builder settings or components **will not reflect automatically** in your app.\ -If you make additional modifications in the UI Kit Builder after initial setup: - -* Re-download the updated code package -* Reintegrate it into your application - -This ensures all customizations are applied correctly. - - - -*** +--- -## **Example: Customizing Date & Time Format in Message List** +## **Customization Workflow** -### Goal +1. Find the component in the [UI Kit Components Overview](/ui-kit/react/components-overview) +2. Check available props and customization options +3. Update props or edit the component source code -Update how the sticky date headers appear in the chat message list. + + After modifying the UI Kit Builder, re-download and reintegrate the code + package to apply changes. + -### Step-by-Step +--- -1. **Component to Customize**:\ - [Message List](/ui-kit/react/message-list) +## **Example: Custom Date Format** -2. **Customization Option**:\ - [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) +Customize how sticky date headers appear in the message list. -3. **Apply the Prop**: +**Component**: [Message List](/ui-kit/react/message-list) β†’ [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) -```javascript +```jsx import { CometChatMessageList, - CalendarObject + CalendarObject, } from "@cometchat/chat-uikit-react"; -function getDateFormat() { - return new CalendarObject({ - today: `hh:mm A`, // e.g., "10:30 AM" - yesterday: `[Yesterday]`, // Displays literally as "Yesterday" - otherDays: `DD/MM/YYYY`, // e.g., "25/05/2025" - }); -} +const dateFormat = new CalendarObject({ + today: "hh:mm A", // "10:30 AM" + yesterday: "[Yesterday]", + otherDays: "DD/MM/YYYY", // "25/05/2025" +}); - +; ``` -*** - -### Default Format Used +**Default format** (for reference): ```javascript new CalendarObject({ today: "today", yesterday: "yesterday", - otherDays: "DD MMM, YYYY", // e.g., "25 Jan, 2025" + otherDays: "DD MMM, YYYY", // "25 Jan, 2025" }); ``` -*** +--- + +## **Example: Custom Conversation Subtitle** + +Show online status or member count instead of the default last message preview. + +**Component**: [Conversations](/ui-kit/react/conversations) β†’ [`subtitleView`](/ui-kit/react/conversations#subtitleview) + +```jsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +const customSubtitleView = (conversation) => { + if (conversation.getConversationType() === "user") { + const user = conversation.getConversationWith(); + return {user.getStatus() === "online" ? "🟒 Online" : "⚫ Offline"}; + } else { + const group = conversation.getConversationWith(); + return {group.getMembersCount()} members; + } +}; + + +``` + +--- + +## **Example: Custom Send Button** + +Replace the default send button with your brand's icon. - -Why Customize This? +**Component**: [Message Composer](/ui-kit/react/message-composer) β†’ [`sendButtonView`](/ui-kit/react/message-composer#sendbuttonview) -Sticky date headers enhance the chat experience by improving message navigation and giving users better temporal context. Adjust the format based on your target locale, tone of voice, or branding needs. +```jsx +import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react"; - +const brandedSendButton = ( + { + // Your custom send logic + }} + /> +); + + +``` + +```css +/* Style the custom send button */ +.cometchat-message-composer .cometchat-button { + background: #6852D6; + border-radius: 50%; +} + +.cometchat-message-composer .cometchat-button__icon { + background: #ffffff; +} +``` + +--- -*** +## **Next Steps** + + + + Configure feature toggles and behavior + + + Explore all available UI components + + + Customize colors, typography, and styling + + + Add multi-language support + + diff --git a/chat-builder/react/builder-dir-structure.mdx b/chat-builder/react/builder-dir-structure.mdx index 9ec131b6d..8d43ddf84 100644 --- a/chat-builder/react/builder-dir-structure.mdx +++ b/chat-builder/react/builder-dir-structure.mdx @@ -1,213 +1,120 @@ --- -title: "CometChat UI Kit Builder Directory Structure" +title: "Directory Structure" sidebarTitle: "Directory Structure" +description: "Overview of the CometChat UI Kit Builder directory layout for React β€” understand where to find and customize components, settings, and styles." --- -This document provides an overview of the CometChat UI Kit Builder directory structure, helping you understand the organization of the project and where to find specific files when you need to customize or extend functionality. - -## Overview - -The CometChat UI Kit Builder follows a modular structure organized by feature and functionality. All UI Kit Builder files are contained within the `src/CometChat/` directory. +The exported UI Kit Builder code lives in `src/CometChat/`. This guide helps you navigate the structure so you know exactly where to make changes. ``` src/ β”œβ”€β”€ CometChat/ -β”‚ β”œβ”€β”€ assets/ -β”‚ β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ context/ -β”‚ β”œβ”€β”€ locales/ -β”‚ β”œβ”€β”€ styles/ -β”‚ β”œβ”€β”€ utils/ +β”‚ β”œβ”€β”€ assets/ # Icons, images, audio files +β”‚ β”œβ”€β”€ components/ # React components (UI elements) +β”‚ β”œβ”€β”€ context/ # React Context providers (state management) +β”‚ β”œβ”€β”€ locales/ # Translation files (en, fr, de, etc.) +β”‚ β”œβ”€β”€ styles/ # CSS files (mirrors components structure) +β”‚ β”œβ”€β”€ utils/ # Utility functions and helpers β”‚ β”œβ”€β”€ CometChatApp.tsx β”‚ β”œβ”€β”€ CometChatSettings.ts β”‚ β”œβ”€β”€ customHooks.ts β”‚ β”œβ”€β”€ decl.d.ts β”‚ └── styleConfig.ts -β”œβ”€β”€ App.css β”œβ”€β”€ App.tsx └── index.tsx ``` -## Directory Details - -### Root Files - -| File | Description | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `CometChatApp.tsx` | The main entry point for the UI Kit Builder application. This is the component you import in your project to render the chat experience. | -| `CometChatSettings.ts` | Contains configuration settings for the UI Kit Builder, including UI elements, features, and theming options. | -| `customHooks.ts` | Custom React hooks used throughout the application. | -| `decl.d.ts` | TypeScript declaration file for type definitions. | -| `styleConfig.ts` | Configuration file for styling across the application. | +--- -### Key Directories +## Root Files -#### `assets/` +| File | Purpose | +| ---------------------- | ------------------------------------------------------------ | +| `CometChatApp.tsx` | Main entry point β€” import this to render the chat experience | +| `CometChatSettings.ts` | Toggle features on/off (messaging, calls, AI copilot, etc.) | +| `customHooks.ts` | Custom React hooks used throughout the application | +| `styleConfig.ts` | Global styling configuration (colors, fonts, spacing) | -Contains UI resources like icons, images, and audio files used throughout the application. +--- -``` -assets/ -β”‚ β”œβ”€β”€ chats.svg -β”‚ β”œβ”€β”€ calls.svg -β”‚ β”œβ”€β”€ users.svg -β”‚ β”œβ”€β”€ groups.svg -β”‚ └── (Other UI icons and images) -``` +## Key Folders -#### `components/` +### `components/` -Contains all React components that make up the UI of the UI Kit Builder. +Each component folder contains the main `.tsx` file and associated hooks (`use*.ts`). These are the building blocks of your chat UI. ``` components/ -β”œβ”€β”€ CometChatAddMembers/ -β”‚ β”œβ”€β”€ CometChatAddMembers.tsx -β”‚ └── useCometChatAddMembers.ts -β”œβ”€β”€ CometChatAlertPopup/ -β”‚ └── CometChatAlertPopup.tsx -β”œβ”€β”€ CometChatBannedMembers/ -β”‚ └── CometChatBannedMembers.tsx -β”œβ”€β”€ CometChatCallLog/ -β”‚ β”œβ”€β”€ CometChatCallLogDetails.tsx -β”‚ β”œβ”€β”€ CometChatCallLogHistory.tsx -β”‚ β”œβ”€β”€ CometChatCallLogInfo.tsx -β”‚ β”œβ”€β”€ CometChatCallLogParticipants.tsx -β”‚ └── CometChatCallLogRecordings.tsx -β”œβ”€β”€ CometChatCreateGroup/ -β”‚ └── CometChatCreateGroup.tsx -β”œβ”€β”€ CometChatDetails/ -β”‚ β”œβ”€β”€ CometChatThreadedMessages.tsx -β”‚ └── CometChatUserDetails.tsx -β”œβ”€β”€ CometChatHome/ -β”‚ └── CometChatHome.tsx -β”œβ”€β”€ CometChatJoinGroup/ -β”‚ └── CometChatJoinGroup.tsx -β”œβ”€β”€ CometChatLogin/ -β”‚ β”œβ”€β”€ CometChatAppCredentials.tsx -β”‚ β”œβ”€β”€ CometChatLogin.tsx -β”‚ └── sampledata.ts -β”œβ”€β”€ CometChatMessages/ -β”‚ β”œβ”€β”€ CometChatEmptyStateView.tsx -β”‚ └── CometChatMessages.tsx -β”œβ”€β”€ CometChatSelector/ -β”‚ β”œβ”€β”€ CometChatSelector.tsx -β”‚ └── CometChatTabs.tsx -└── CometChatTransferOwnership/ - β”œβ”€β”€ CometChatTransferOwnership.tsx - └── useCometChatTransferOwnership.ts -``` - -Each component folder typically contains: - -* The main component file (`.tsx`) -* Associated hook files (`use*.ts`) for component logic -* Subcomponents specific to that feature area - -#### `context/` - -Contains React Context providers used for state management across the application. - -```python -context/ -β”œβ”€β”€ AppContext.tsx # Main application context -β”œβ”€β”€ CometChatContext.tsx # Context for builder settings -└── appReducer.ts # Reducer functions for AppContext +β”œβ”€β”€ CometChatAddMembers/ # Add members to groups +β”œβ”€β”€ CometChatBannedMembers/ # Manage banned users +β”œβ”€β”€ CometChatCallLog/ # Call history display +β”œβ”€β”€ CometChatCreateGroup/ # Group creation flow +β”œβ”€β”€ CometChatDetails/ # User/group details panel +β”œβ”€β”€ CometChatHome/ # Main chat home screen +β”œβ”€β”€ CometChatJoinGroup/ # Join group flow +β”œβ”€β”€ CometChatLogin/ # Login screen +β”œβ”€β”€ CometChatMessages/ # Message list and composer +β”œβ”€β”€ CometChatSelector/ # Conversation/user selector +└── CometChatTransferOwnership/ # Transfer group ownership ``` -#### `locales/` +### `context/` -Contains translations for different languages, enabling localization of the UI. +State management for the chat application. -```bash -locales/ (Contains translations for different languages) -β”œβ”€β”€ en/en.json -β”œβ”€β”€ fr/fr.json -β”œβ”€β”€ de/de.json -└── (Other language JSON files) ``` - -#### `styles/` - -Contains CSS files for styling components, organized to mirror the components directory structure. - -``` -styles/ -β”œβ”€β”€ CometChatAddMembers/ -β”‚ └── CometChatAddMembers.css -β”œβ”€β”€ CometChatAlertPopup/ -β”‚ └── CometChatAlertPopup.css -β”œβ”€β”€ CometChatBannedMembers/ -β”‚ └── CometChatBannedMembers.css -β”œβ”€β”€ CometChatCallLog/ -β”‚ β”œβ”€β”€ CometChatCallLogDetails.css -β”‚ β”œβ”€β”€ CometChatCallLogHistory.css -β”‚ β”œβ”€β”€ CometChatCallLogInfo.css -β”‚ β”œβ”€β”€ CometChatCallLogParticipants.css -β”‚ └── CometChatCallLogRecordings.css -β”œβ”€β”€ CometChatCreateGroup/ -β”‚ └── CometChatCreateGroup.css -β”œβ”€β”€ CometChatDetails/ -β”‚ β”œβ”€β”€ CometChatDetails.css -β”‚ β”œβ”€β”€ CometChatThreadedMessages.css -β”‚ └── CometChatUserDetails.css -β”œβ”€β”€ CometChatLogin/ -β”‚ β”œβ”€β”€ CometChatAppCredentials.css -β”‚ └── CometChatLogin.css -β”œβ”€β”€ CometChatMessages/ -β”‚ β”œβ”€β”€ CometChatEmptyStateView.css -β”‚ └── CometChatMessages.css -β”œβ”€β”€ CometChatNewChat/ -β”‚ └── CometChatNewChatView.css -β”œβ”€β”€ CometChatSelector/ -β”‚ β”œβ”€β”€ CometChatSelector.css -β”‚ └── CometChatTabs.css -β”œβ”€β”€ CometChatTransferOwnership/ -β”‚ └── CometChatTransferOwnership.css -└── CometChatApp.css -``` - -#### `utils/` - -Contains utility functions and helpers used across the application. - -```python -utils/ -└── utils.ts # General utility functions +context/ +β”œβ”€β”€ AppContext.tsx # Main application state +β”œβ”€β”€ CometChatContext.tsx # Builder settings and configuration +└── appReducer.ts # State reducer functions ``` -## Key Components Overview - -* **CometChatHome**: Main dashboard component that serves as the entry point for the chat experience -* **CometChatMessages**: Core component for displaying and managing chat messages -* **CometChatCallLog**: Components for call history and details -* **CometChatDetails**: User and group details and settings -* **CometChatLogin**: Authentication-related components -* **CometChatSelector/CometChatTabs**: Navigation and tab-based interface components +### `styles/` -## Customization Points +CSS files organized to mirror the components structure. Each component has a corresponding style folder. -When customizing the UI Kit Builder, you'll typically work with: +### `locales/` -1. **`CometChatSettings.ts`**: To modify high-level configuration -2. **`styleConfig.ts`**: To change theme colors, fonts, and other styling variables -3. **Component styles**: To make specific UI adjustments to individual components -4. **Locale files**: To modify text strings or add new language support +Translation files for multi-language support. Add or modify JSON files here to customize text. -## Recommendations for Modifications - -* Avoid direct modification of core components when possible -* Use the settings files for configuration changes -* Use CSS overrides for styling customizations -* For extensive customizations, consider creating wrapper components that use the UI Kit Builder components as children +--- -*** +## Quick Reference: Where to Customize -## **Conclusion** +| What you want to change | Where to look | +| ----------------------- | ----------------------------- | +| Enable/disable features | `CometChatSettings.ts` | +| Theme colors & fonts | `styleConfig.ts` | +| Component-specific CSS | `styles//` | +| Text & translations | `locales//.json` | +| Component behavior | `components//` | -This structured breakdown of the **CometChat UI Kit Builder directory** helps developers understand the project layout, making it easier to navigate, extend, and customize as needed. + + Prefer using settings and CSS overrides. For extensive changes, create wrapper + components instead of modifying core files directly. + -For further customization and integration details, refer to: +--- -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. +## Next Steps + + + + Configure feature toggles and behavior + + + Modify component props, styling, and behavior + + + Customize colors, typography, and styling + + + Add multi-language support + + diff --git a/chat-builder/react/builder-settings.mdx b/chat-builder/react/builder-settings.mdx index 7d85e6f95..232f2237b 100644 --- a/chat-builder/react/builder-settings.mdx +++ b/chat-builder/react/builder-settings.mdx @@ -1,9 +1,15 @@ --- -title: "CometChat Settings Guide" +title: "UI Kit Builder Settings" description: "Comprehensive reference for all CometChatSettings options." --- -The `CometChatSettings` object controls everything the React Builder rendersβ€”messaging, AI helpers, calls, layout, theming, and agent tools. Use this page as a definitive map of every toggle with recommended defaults. +The `CometChatSettings` object controls everything the React UI Kit Builder rendersβ€”messaging, AI helpers, calls, layout, theming, and agent tools. + + + **For developers customizing their chat UI**: Edit `CometChatSettings.ts` to + enable/disable features like messaging, calls, AI copilot, and theming. See + [Integration Guide](/chat-builder/react/integration) for setup. + ## Top-level structure @@ -12,92 +18,142 @@ export interface CometChatSettings { chatFeatures: { ... } callFeatures: { ... } layout: { ... } - style: { ... } + style: { ... } } ``` --- + +All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely. + + ## 1. Chat Features (`chatFeatures`) ### 1.1 Core Messaging Experience (`coreMessagingExperience`) -Controls the essentials of chat. - -| Property | Type | Description | -| --- | --- | --- | -| typingIndicator | boolean | Show β€œuser is typing” state. | -| threadConversationAndReplies | boolean | Enable threaded conversations and replies. | -| photosSharing | boolean | Allow sharing images. | -| videoSharing | boolean | Allow sharing videos. | -| audioSharing | boolean | Allow sharing audio clips. | -| fileSharing | boolean | Allow generic file uploads. | -| editMessage | boolean | Let users edit their sent messages. | -| deleteMessage | boolean | Let users delete their sent messages. | -| messageDeliveryAndReadReceipts | boolean | Show delivery/read receipts. | -| userAndFriendsPresence | boolean | Display online/offline presence. | -| conversationAndAdvancedSearch | boolean (optional) | Enable conversation + advanced search. | -| moderation | boolean (optional) | Turn on content moderation tools. | -| quotedReplies | boolean (optional) | Allow quoting messages. | -| markAsUnread | boolean (optional) | Let users mark messages as unread. | + +Essential messaging features: typing indicators, media sharing, message actions, and presence. + +| Setting | Type | What It Does | +| ---------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Typing indicator (`typingIndicator`) | boolean | Shows "typing..." indicator when someone is composing a message | +| Thread conversation & replies (`threadConversationAndReplies`) | boolean | Enables threaded replies to specific messages, creating nested conversation threads | +| Photos sharing (`photosSharing`) | boolean | Allows users to share images from device or camera | +| Video sharing (`videoSharing`) | boolean | Allows users to share video files | +| Audio sharing (`audioSharing`) | boolean | Allows users to share audio files (mp3, wav, etc.) | +| File sharing (`fileSharing`) | boolean | Allows users to share documents (PDF, DOC, etc.) | +| Edit messages (`editMessage`) | boolean | Lets users modify their sent messages; edited messages show "(edited)" label | +| Delete messages (`deleteMessage`) | boolean | Lets users remove their sent messages | +| Message delivery and read receipts (`messageDeliveryAndReadReceipts`) | boolean | Shows delivery (βœ“) and read (βœ“βœ“) status indicators on messages | +| User & friends presence (`userAndFriendsPresence`) | boolean | Shows online/offline status dot next to user avatars | +| Conversation and Advanced Search (`conversationAndAdvancedSearch`) | boolean | Enables search across messages, users, and conversations | +| Quoted Replies (`quotedReplies`) | boolean | Lets users quote a message when replying, showing the original above their response | +| Mark as Unread (`markAsUnread`) | boolean | Lets users mark a conversation as unread to revisit later | + + + Empower users with a seamless chat experienceβ€”reply to specific messages with + quoted replies, mark conversations as unread for later, and search across all + chats instantly. Learn more about [Core + Features](/ui-kit/react/core-features). + ### 1.2 Deeper User Engagement (`deeperUserEngagement`) -Richer ways to participate. - -| Property | Type | Description | -| --- | --- | --- | -| mentions | boolean | Enable @mentions. | -| mentionAll | boolean (optional) | Allow @all to notify everyone in the group. | -| reactions | boolean | Emoji/label reactions on messages. | -| messageTranslation | boolean | Inline message translation. | -| polls | boolean | Create and vote on polls. | -| collaborativeWhiteboard | boolean | Real-time whiteboard. | -| collaborativeDocument | boolean | Collaborative docs. | -| voiceNotes | boolean | Voice-note capture and send. | -| emojis | boolean | Emoji keyboard support. | -| stickers | boolean | Sticker sending. | -| userInfo | boolean | View user profile info. | -| groupInfo | boolean | View group details. | -| reportMessage | boolean (optional) | Allow reporting a message. | + +Interactive features: mentions, reactions, polls, voice notes, and collaborative tools. + +| Setting | Type | What It Does | +| ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Mentions (`mentions`) | boolean | Lets users @mention specific people in a message to notify them | +| Mention All (`mentionAll`) | boolean | Lets users type @all to notify every member in a group chat | +| Reactions (`reactions`) | boolean | Lets users add emoji reactions (πŸ‘ ❀️ πŸ˜‚ etc.) to messages | +| Message Translation (`messageTranslation`) | boolean | Translates messages to user's preferred language. Requires Dashboard setup | +| Polls (`polls`) | boolean | Lets users create polls with multiple options for group voting. Requires Dashboard setup | +| Collaborative Whiteboard (`collaborativeWhiteboard`) | boolean | Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup | +| Collaborative Document (`collaborativeDocument`) | boolean | Creates shared documents for real-time collaborative editing. Requires Dashboard setup | +| Voice Notes (`voiceNotes`) | boolean | Lets users record and send voice messages | +| Emojis (`emojis`) | boolean | Shows emoji picker in composer for browsing and inserting emojis | +| Stickers (`stickers`) | boolean | Lets users send sticker images from available packs. Requires Dashboard setup | +| User Info (`userInfo`) | boolean | Lets users tap on another user's avatar to view their profile | +| Group Info (`groupInfo`) | boolean | Lets users tap on group header to view group details and member list | +| Report Message (`reportMessage`) | boolean | Lets users flag inappropriate messages for review. Requires moderation setup | + + + Configure these features based on your app's requirements. Learn more about + [Extensions](/ui-kit/react/extensions). + ### 1.3 AI User Copilot (`aiUserCopilot`) -AI assistance inside chat. -| Property | Type | Description | -| --- | --- | --- | -| conversationStarter | boolean | Suggest AI-generated conversation openers. | -| conversationSummary | boolean | Summaries of chat threads. | -| smartReply | boolean | Quick replies suggested by AI. | +AI-powered features to help users start and navigate conversations. + +| Setting | Type | What It Does | +| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Conversation Starter (`conversationStarter`) | boolean | Shows AI-suggested opening messages when starting a new chat. Requires OpenAI API key | +| Conversation Summary (`conversationSummary`) | boolean | Generates an AI-powered summary of the conversation. Requires OpenAI API key | +| Smart Reply (`smartReply`) | boolean | Shows AI-suggested quick reply options based on conversation context. Requires OpenAI API key | -### 1.4 User Management (`userManagement`) β€” Optional + +AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **Chat & Messaging > Settings**. Learn more about [AI Features](/ui-kit/react/ai-features). + -| Property | Type | Description | -| --- | --- | --- | -| friendsOnly | boolean (optional) | Restrict chat to friends-only mode. | +### 1.4 User Management (`userManagement`) + +| Setting | Type | What It Does | +| ------------------------------ | ------- | ------------------------------------------------------------------------------------- | +| Friends Only (`friendsOnly`) | boolean | Restricts chat to friends list only; Users tab shows only friends | ### 1.5 Group Management (`groupManagement`) -| Property | Type | Description | -| --- | --- | --- | -| createGroup | boolean | Allow users to create groups. | -| addMembersToGroups | boolean | Add members to groups. | -| joinLeaveGroup | boolean | Join or leave groups. | -| deleteGroup | boolean | Allow admins to delete groups. | -| viewGroupMembers | boolean | Show group member list. | +Control what users can do with groups. + +| Setting | Type | What It Does | +| ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Create Group (`createGroup`) | boolean | Lets users create new public or private groups | +| Add Members to Groups (`addMembersToGroups`) | boolean | Lets group admins/owners invite users to join the group | +| Join/Leave Group (`joinLeaveGroup`) | boolean | Lets users join public groups and leave groups they're in | +| Delete Group (`deleteGroup`) | boolean | Lets group owners permanently delete a group and all its messages | +| View Group Members (`viewGroupMembers`) | boolean | Shows member list in group info | + +### 1.6 Moderation (`moderatorControls`) + +Admin tools for managing group members and content. -### 1.6 Moderator Controls (`moderatorControls`) +| Setting | Type | What It Does | +| -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Blocked message feedback (`moderation`) | boolean | Enables blocked message feedback for blocked messages as per configured moderation rules. Requires Dashboard setup | +| Report Message (`reportMessage`) | boolean | Lets users flag messages for moderator review in Dashboard | +| Kick Users (`kickUsers`) | boolean | Lets admins/moderators remove a user from a group (they can rejoin) | +| Ban Users (`banUsers`) | boolean | Lets admins/moderators permanently remove a user and prevent rejoining | +| Promote/Demote Members (`promoteDemoteMembers`) | boolean | Lets group owners change member roles (member, moderator, admin) | -| Property | Type | Description | -| --- | --- | --- | -| kickUsers | boolean | Kick users from groups. | -| banUsers | boolean | Ban users from groups. | -| promoteDemoteMembers | boolean | Change a member’s scope. | -| reportMessage | boolean (optional) | Enable message reporting. | + + To enable content moderation, set `moderation` and `reportMessage` to `true`, + then configure your moderation rules in the [CometChat + Dashboard](https://app.cometchat.com). See [Rules + Management](/moderation/getting-started#setting-up-moderation-rules) for setup + details. + ### 1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`) -| Property | Type | Description | -| --- | --- | --- | -| sendPrivateMessageToGroupMembers | boolean | DM group members from the group context. | +Allow direct messages between group members. + +| Setting | Type | What It Does | +| -------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Send Private Message to Group Members (`sendPrivateMessageToGroupMembers`) | boolean | Lets users start a 1:1 chat with a group member from their profile | + +### 1.8 In-App Sounds (`inAppSounds`) + +Control sound notifications for incoming and outgoing messages. + +| Setting | Type | What It Does | +| -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | +| Incoming Message Sound (`incomingMessageSound`) | boolean | Plays a sound when a new message is received | +| Outgoing Message Sound (`outgoingMessageSound`) | boolean | Plays a sound when a message is sent | + + +These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the [Sound Manager](/ui-kit/react/sound-manager). + --- @@ -105,62 +161,84 @@ AI assistance inside chat. ### 2.1 Voice and Video Calling (`voiceAndVideoCalling`) -| Property | Type | Description | -| --- | --- | --- | -| oneOnOneVoiceCalling | boolean | One-to-one voice calls. | -| oneOnOneVideoCalling | boolean | One-to-one video calls. | -| groupVideoConference | boolean | Group video calls. | -| groupVoiceConference | boolean | Group voice-only calls. | +Enable voice and video calling capabilities. + +| Setting | Type | What It Does | +| ------------------------------------------------ | ------- | ------------------------------------------------------------------------------------- | +| 1:1 Voice Calling (`oneOnOneVoiceCalling`) | boolean | Shows phone icon in 1:1 chat header for starting voice calls | +| 1:1 Video Calling (`oneOnOneVideoCalling`) | boolean | Shows video camera icon in 1:1 chat header for starting video calls | +| Group Video Conference (`groupVideoConference`) | boolean | Shows video camera icon in group chat header for starting group video calls | +| Group Voice Conference (`groupVoiceConference`) | boolean | Shows phone icon in group chat header for starting group voice calls | + + + Learn more about [Call Features](/ui-kit/react/call-features#features). + --- ## 3. Layout (`layout`) -| Property | Type | Description | -| --- | --- | --- | -| withSideBar | boolean | Show/hide the sidebar. | -| tabs | string[] | Tabs to expose, e.g. `['chats','calls','users','groups']`. | -| chatType | string | Default chat type: `'user'` or `'group'`. | +Control the overall UI structure and navigation. + +| Setting | Type | What It Does | +| ---------------------------- | -------- | ------------------------------------------------------------------------------------- | +| With Sidebar (`withSideBar`) | boolean | Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) on the left side | +| Tabs (`tabs`) | string[] | Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'` | +| Chat Type (`chatType`) | string | Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats | + + + Set `withSideBar: false` for embedded chat widgets or single-conversation + views where navigation isn't needed. + --- ## 4. Style (`style`) +Customize colors, fonts, and theme appearance. + ### 4.1 Theme -| Property | Type | Description | -| --- | --- | --- | -| theme | string | `'light'`, `'dark'`, or `'system'`. | - -### 4.2 Color -| Property | Type | Description | -| --- | --- | --- | -| brandColor | string | Primary UI color (hex). | -| primaryTextLight | string | Text color in light mode. | -| primaryTextDark | string | Text color in dark mode. | -| secondaryTextLight | string | Secondary text color in light mode. | -| secondaryTextDark | string | Secondary text color in dark mode. | -### 4.3 Typography -| Property | Type | Description | -| --- | --- | --- | -| font | string | Font family (e.g., `'roboto'`). | -| size | string | Font size preset (e.g., `'default'`). | +| Setting | Type | What It Does | +| ---------------------------------------- | ------ | ------------------------------------------------------------------------------------- | +| Theme (`theme`) | string | Controls light/dark mode: `'light'`, `'dark'`, or `'system'` (matches device preference) | ---- + + Use `theme: "system"` to automatically match the user's device preference. + Preview your `brandColor` in both light and dark modes for contrast. + +[Learn more about UI Kit Theming](/ui-kit/react/theme) for additional customizations. -{/* ## 5. Agent (`agent`) β€” Optional -Agent-facing options for support scenarios. + -| Property | Type | Description | -| --- | --- | --- | -| chatHistory | boolean | Allow viewing previous chats. | -| newChat | boolean | Start new chat threads. | -| agentIcon | string | URL/path for the agent’s avatar. | -| showAgentIcon | boolean | Display the agent icon in UI. | +### 4.2 Colors ---- */} +| Setting | Type | What It Does | +| ------------------------------------------ | ------ | ------------------------------------------------------------------------------------- | +| Brand Color (`brandColor`) | string | Primary accent color (hex) for buttons, links, active states. Example: `"#6852D6"` | +| Primary Text Light (`primaryTextLight`) | string | Main text color in light mode (hex). Example: `"#2B2B2B"` | +| Primary Text Dark (`primaryTextDark`) | string | Main text color in dark mode (hex). Example: `"#FFFFFF"` | +| Secondary Text Light (`secondaryTextLight`)| string | Secondary text color in light mode (hex) for timestamps, subtitles. Example: `"#727272"` | +| Secondary Text Dark (`secondaryTextDark`) | string | Secondary text color in dark mode (hex) for timestamps, subtitles. Example: `"#989898"` | -## Example configuration + + Match `brandColor` to your website's primary accent color. Use your site's + existing text colors for `primaryTextLight` and `primaryTextDark` to maintain + brand consistency. + + +### 4.3 Typography + +| Setting | Type | What It Does | +| -------------------- | ------ | ------------------------------------------------------------------------------------- | +| Font (`font`) | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'` | +| Size (`size`) | string | Text size and spacing: `'default'`, `'compact'`, or `'comfortable'` | + +--- + +## Settings Overview + +Below is the complete settings structure with default values. Update these in `CometChatSettings.ts` to customize your chat experience. ```json { @@ -176,17 +254,19 @@ Agent-facing options for support scenarios. "deleteMessage": true, "messageDeliveryAndReadReceipts": true, "userAndFriendsPresence": true, - "quotedReplies": true, - "markAsUnread": true + "conversationAndAdvancedSearch": true, + "moderation": true, + "quotedReplies": false, + "markAsUnread": false }, "deeperUserEngagement": { "mentions": true, - "mentionAll": false, + "mentionAll": true, "reactions": true, "messageTranslation": true, "polls": true, - "collaborativeWhiteboard": false, - "collaborativeDocument": false, + "collaborativeWhiteboard": true, + "collaborativeDocument": true, "voiceNotes": true, "emojis": true, "stickers": true, @@ -194,11 +274,13 @@ Agent-facing options for support scenarios. "groupInfo": true }, "aiUserCopilot": { - "conversationStarter": true, - "conversationSummary": true, - "smartReply": true + "conversationStarter": false, + "conversationSummary": false, + "smartReply": false + }, + "userManagement": { + "friendsOnly": false }, - "userManagement": { "friendsOnly": false }, "groupManagement": { "createGroup": true, "addMembersToGroups": true, @@ -209,10 +291,15 @@ Agent-facing options for support scenarios. "moderatorControls": { "kickUsers": true, "banUsers": true, - "promoteDemoteMembers": true + "promoteDemoteMembers": true, + "reportMessage": true }, "privateMessagingWithinGroups": { "sendPrivateMessageToGroupMembers": true + }, + "inAppSounds": { + "incomingMessageSound": true, + "outgoingMessageSound": true } }, "callFeatures": { @@ -232,7 +319,7 @@ Agent-facing options for support scenarios. "theme": "system", "color": { "brandColor": "#6852D6", - "primaryTextLight": "#2B2B2B", + "primaryTextLight": "#141414", "primaryTextDark": "#FFFFFF", "secondaryTextLight": "#727272", "secondaryTextDark": "#989898" @@ -241,31 +328,25 @@ Agent-facing options for support scenarios. "font": "roboto", "size": "default" } - }, - "noCode": { - "docked": true, - "styles": { - "buttonBackGround": "#6852D6", - "buttonShape": "rounded", - "openIcon": "https://example.com/open.svg", - "closeIcon": "https://example.com/close.svg", - "customJs": "console.log('hello from no-code')", - "customCss": ".cc-chat { border-radius: 16px; }", - "dockedAlignment": "right" - } - }, - "agent": { - "chatHistory": true, - "newChat": true, - "agentIcon": "https://example.com/agent.png", - "showAgentIcon": true } } ``` --- -## Tips -- Enable `conversationAndAdvancedSearch` when you need global search across conversations; keep it off for lighter builds. -- For enterprise moderation, pair `moderation` + `reportMessage` with your backend review queues. -- Keep `noCode.styles.customJs` minimal and sanitized; avoid long-running scripts to maintain widget performance. +## Next Steps + + + + Understand the organization of the builder components and generated code. + + + Modify component props, styling, and behavior for deeper customization. + + diff --git a/chat-builder/react/integration.mdx b/chat-builder/react/integration.mdx index 35960e2da..e0d65c062 100644 --- a/chat-builder/react/integration.mdx +++ b/chat-builder/react/integration.mdx @@ -1,103 +1,94 @@ --- title: "Getting Started With UI Kit Builder" sidebarTitle: "Integration" +description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your React application, including initialization, user login, and rendering the CometChatApp component." --- -**UI Kit Builder** is a powerful tool designed to simplify the integration of CometChat's UI Kit into your existing React application. - -With the **UI Kit Builder**, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding. +The **UI Kit Builder** simplifies integrating CometChat's UI Kit into your React application β€” quickly set up chat, customize UI elements, and add features without extensive coding. - + + + **For developers integrating chat into React apps**: This guide covers + installing dependencies, initializing CometChat, and rendering the chat UI. + **Prerequisites**: CometChat account with App ID, Region, and Auth Key from + the [CometChat Dashboard](https://app.cometchat.com), plus an existing React + project. + + ## **Complete Integration Workflow** 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. -5. **Integration** - Integrate into your existing application. -6. **Customize Further** - Explore advanced customization options to tailor the chat experience. +2. **Review and Export** - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package. +3. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project. +4. **Integration** - Integrate into your existing application. +5. **Customize Further** - Explore advanced customization options to tailor the chat experience. - + -*** +--- ## **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 UI Kit Builder**. - -*** - -## **Enable Features in CometChat Dashboard** - -If your app requires any of the following features, make sure to enable them from the **[CometChat Dashboard](https://app.cometchat.com/)** - -* **Stickers** – Allow users to send expressive stickers. - -* **Polls** – Enable in-chat polls for user engagement. +3. Navigate to **Chat & Messaging** β†’ **Get Started**. +4. Choose your platform and click **Launch UI Kit Builder**. -* **Collaborative Whiteboard** – Let users draw and collaborate in real time. - -* **Collaborative Document** – Allow multiple users to edit documents together. - -* **Message Translation** – Translate messages between different languages. +--- -* **AI User Copilot** +## **Review Your Export** - * Conversation Starter – Suggests conversation openers. - * Conversation Summary – Generates AI-powered chat summaries. - * Smart Reply – Provides quick reply suggestions. +When you click **Export**, a "Review Your Export" modal appears (Step 1 of 3). This lets you: -### **How to Enable These Features?** +- **Review features** β€” See which features will be enabled in your CometChat Dashboard based on your UI Kit configuration +- **Toggle features** β€” Turn individual features on/off before export +- **AI User Copilot** β€” Requires an OpenAI API key (you'll configure this in the next step) - + -1. Log in to your **[CometChat Dashboard](https://app.cometchat.com)** -2. Select your application. -3. Navigate to **Chat > Features**. -4. Toggle **ON** the required features. -5. Click **Save Changes**. + + Only checked features will be enabled in your Dashboard. You can always modify + these settings later in the [CometChat Dashboard](https://app.cometchat.com). + -*** +--- ## **Preview Customizations (Optional)** 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: -> +> > 1. Open the `cometchat-app-react` folder. -> 2. Add credentials for your app in `src/index.tsx` (`src/main.tsx` incase for Vite): -> -> ```javascript -> export const COMETCHAT_CONSTANTS = { -> APP_ID: "", // Replace with your App ID -> REGION: "", // Replace with your App Region -> AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token -> }; -> ``` -> -> 3. Install dependencies: -> +> 2. Install dependencies: +> > ``` > npm i > ``` -> -> 4. Run the app: -> +> +> 3. Run the app: +> > ```powershell > npm start > ``` +> +> Your app credentials are already prepopulated in the exported code. -*** +--- ## **Integration with CometChat UI Kit Builder (React.js)** @@ -108,7 +99,7 @@ Follow these steps to integrate CometChat UI Kit Builder into your existing Reac Run the following command to install the required dependencies: ```ruby -npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript +npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript ``` ### **Step 2: Copy CometChat Folder** @@ -117,12 +108,12 @@ Copy the `cometchat-app-react/src/CometChat` folder into your project's `src` di ### **Step 3: Initialize CometChat UI Kit** -The initialization process varies depending on your setup. Select your framework: +Initialize CometChat in your app's entry file. Select your setup: -```tsx src/main.tsx +```tsx {12-14} src/main.tsx import { createRoot } from "react-dom/client"; import "./index.css"; import App from "./App.tsx"; @@ -134,9 +125,9 @@ import { setupLocalization } from "./CometChat/utils/utils.ts"; import { CometChatProvider } from "./CometChat/context/CometChatContext"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; const uiKitSettings = new UIKitSettingsBuilder() @@ -151,7 +142,7 @@ CometChatUIKit.init(uiKitSettings)?.then(() => { createRoot(document.getElementById("root")!).render( - + , ); }); ``` @@ -160,7 +151,7 @@ CometChatUIKit.init(uiKitSettings)?.then(() => { -```tsx src/index.tsx +```tsx {12-14} src/index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; @@ -172,9 +163,9 @@ import { setupLocalization } from "./CometChat/utils/utils"; import { CometChatProvider } from "./CometChat/context/CometChatContext"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; const uiKitSettings = new UIKitSettingsBuilder() @@ -189,7 +180,7 @@ CometChatUIKit.init(uiKitSettings)?.then(() => { ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + , ); }); ``` @@ -200,53 +191,32 @@ CometChatUIKit.init(uiKitSettings)?.then(() => { -Ensure you replace the following placeholders with your actual CometChat credentials: - -* APP\_ID β†’ Your CometChat App ID -* AUTH\_KEY β†’ Your CometChat Auth Key -* REGION β†’ Your App Region - -These values are required for proper authentication and seamless integration. +Your app credentials (`APP_ID`, `AUTH_KEY`, `REGION`) are prepopulated in the exported code. If you need to use different credentials, you can find them in the Credentials block of your app's [Overview section](https://app.cometchat.com) on the CometChat Dashboard. -### **Step 4: User Login** +### **Step 4: User Authentication** -To authenticate a user, you need a **`UID`**. You can either: +CometChat uses a UID (User ID) to identify each user. After initialization, authenticate users to enable chat functionality. -1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**. +You can either: -2. **Use pre-generated test users**: +1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://www.cometchat.com/docs/rest-api/users/create)**. - * `cometchat-uid-1` - * `cometchat-uid-2` - * `cometchat-uid-3` - * `cometchat-uid-4` - * `cometchat-uid-5` +2. **Use pre-generated test users**: `cometchat-uid-1` through `cometchat-uid-5` The **Login** method returns a **User object** containing all relevant details of the logged-in user. -*** +**Login After Initialization** - - -**Security Best Practices** - -* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing. -* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. - - - -**User Login After Initialization** - -Once the CometChat UI Kit is initialized, you can log in the user **whenever it fits your app’s workflow.** +Log in the user after initialization β€” useful when login happens later in your app flow (e.g., after a login form). ```ts import { CometChatUIKit } from "@cometchat/chat-uikit-react"; -const UID = "UID"; // Replace with your actual UID +const UID = "YOUR_UID"; // Replace with your actual UID CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { if (!user) { @@ -262,16 +232,38 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { } }); ``` - + +```js +import { CometChatUIKit } from "@cometchat/chat-uikit-react"; + +const UID = "YOUR_UID"; // Replace with your actual UID + +CometChatUIKit.getLoggedinUser().then((user) => { + if (!user) { + // If no user is logged in, proceed with login + CometChatUIKit.login(UID) + .then((user) => { + console.log("Login Successful:", { user }); + // Mount your app + }) + .catch(console.log); + } else { + // If user is already logged in, mount your app + } +}); +``` + -However, **if you prefer to log in the user immediately after initialization,** you can do so within the then block of CometChatUIKit.init(). +**Login During Initialization** + +Alternatively, log in the user immediately inside `CometChatUIKit.init()` β€” ideal for apps that authenticate on startup. -```ts +```ts {12-14} import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; @@ -283,9 +275,9 @@ import { setupLocalization } from "./CometChat/utils/utils"; import { CometChatProvider } from "./CometChat/context/CometChatContext"; export const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your App Region - AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token }; const uiKitSettings = new UIKitSettingsBuilder() @@ -298,7 +290,7 @@ const uiKitSettings = new UIKitSettingsBuilder() CometChatUIKit.init(uiKitSettings)?.then(() => { setupLocalization(); - const UID = "UID"; // Replace with your actual UID + const UID = "YOUR_UID"; // Replace with your actual UID CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { if (!user) { @@ -325,37 +317,87 @@ CometChatUIKit.init(uiKitSettings)?.then(() => { }); }); ``` - - + +```js {12-14} +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import { + UIKitSettingsBuilder, + CometChatUIKit, +} from "@cometchat/chat-uikit-react"; +import { setupLocalization } from "./CometChat/utils/utils"; +import { CometChatProvider } from "./CometChat/context/CometChatContext"; + +export const COMETCHAT_CONSTANTS = { + APP_ID: "YOUR_APP_ID", // Replace with your App ID + REGION: "YOUR_REGION", // Replace with your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token +}; -**Group Action Messages** +const uiKitSettings = new UIKitSettingsBuilder() + .setAppId(COMETCHAT_CONSTANTS.APP_ID) + .setRegion(COMETCHAT_CONSTANTS.REGION) + .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) + .subscribePresenceForAllUsers() + .build(); -You can control the visibility of group action messages using the showGroupActionMessages prop: +CometChatUIKit.init(uiKitSettings)?.then(() => { + setupLocalization(); -``` - -``` + const UID = "YOUR_UID"; // Replace with your actual UID + + CometChatUIKit.getLoggedinUser().then((user) => { + if (!user) { + CometChatUIKit.login(UID) + .then((loggedUser) => { + console.log("Login Successful:", loggedUser); + // Mount your app + ReactDOM.createRoot(document.getElementById("root")).render( + + + + ); + }) + .catch((error) => console.error("Login Failed:", error)); + } else { + // User already logged in, mount app directly + console.log("User already logged in:", user); + ReactDOM.createRoot(document.getElementById("root")).render( + + + + ); + } + }); +}); +```` + + + + + -- If `showGroupActionMessages` is `true (default)`, group action messages will be **visible**. +**Auth Key vs Auth Token** -- If `showGroupActionMessages` is `false`, group action messages will be **hidden**. +Auth Key is perfect for prototyping. For production apps, switch to [Auth Token](/ui-kit/react/methods#login-using-auth-token) for secure authentication. [Learn more](/fundamentals/user-auth). -*** + + +--- ### **Step 5: Render the CometChatApp Component** -Add the `CometChatApp` component to your app: +Render the chat UI by adding `CometChatApp` to your component: ```javascript import CometChatApp from "./CometChat/CometChatApp"; const App = () => { - return ( - /* CometChatApp requires a parent with explicit height & width to render correctly. + return ( + /* CometChatApp requires a parent with explicit height & width to render correctly. Adjust the height and width as needed. */
@@ -371,17 +413,44 @@ export default App; You can also render the component with default user and group selection: -```javascript + + +```tsx import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import CometChatApp from "./CometChat/CometChatApp"; const App = () => { - const [selectedUser, setSelectedUser] = useState( - undefined + const [selectedUser, setSelectedUser] = + useState(undefined); + const [selectedGroup, setSelectedGroup] = + useState(undefined); + useEffect(() => { + const UID = "cometchat-uid-2"; // Replace with your User ID + CometChat.getUser(UID).then(setSelectedUser).catch(console.error); + // const GUID = "cometchat-guid-1"; // Replace with your Group ID + // CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error); + }, []); + return ( + /* CometChatApp requires a parent with explicit height & width to render correctly. + Adjust the height and width as needed. + */ +
+ +
); - const [selectedGroup, setSelectedGroup] = useState< - CometChat.Group | undefined - >(undefined); +}; +export default App; +``` + + + +```jsx +import { useEffect, useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import CometChatApp from "./CometChat/CometChatApp"; +const App = () => { + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); useEffect(() => { const UID = "cometchat-uid-2"; // Replace with your User ID CometChat.getUser(UID).then(setSelectedUser).catch(console.error); @@ -399,42 +468,67 @@ const App = () => { }; export default App; ``` + + + +#### Without Sidebar Mode + +When the sidebar is hidden via the **Without Sidebar** option in UI Kit Builder, the component renders a single chat type based on the `chatType` prop: -When you enable the **Without Sidebar** option for the Sidebar, the following behavior applies: +| `chatType` | Behavior | +| ---------- | ------------------------------------------------------------------- | +| `"user"` | Displays one-on-one conversations with the selected or default user | +| `"group"` | Displays group conversations with the selected or default group | -* **User Chats (`chatType = "user"`)**: Displays one-on-one chats only, either for a currently selected user or the default user. -* **Group Chats (`chatType = "group"`)**: Displays group chats exclusively, either for a currently selected group or the default group. +Pass the `user` or `group` prop to specify which conversation opens by default. ### **Step 6: Run the App** Start your application with the appropriate command based on your setup: -* Vite / Next.js: - + + ``` npm run dev ``` + -* Create React App (CRA): - -```powershell + +``` npm start ``` + + + +--- + +## **Advanced Customizations** + +### **Group Action Messages** + +Control the visibility of group action messages using the `showGroupActionMessages` prop: + +```jsx + +``` + +- `true` (default) β€” Group action messages are **visible** +- `false` β€” Group action messages are **hidden** -*** +### **Auto Open First Item** -## **Additional Configuration Notes** +Control whether the first item in lists automatically opens on render using the `autoOpenFirstItem` prop: -Ensure the following features are also turned on in your app > Chat > Features for full functionality: +```jsx + +``` + +- `true` (default) β€” The first item in conversation list, user list, or group list opens automatically on first render +- `false` β€” No item opens until the user clicks on one -* Message translation -* Polls -* Stickers -* Collaborative whiteboard -* Collaborative document -* Conversation starter -* Conversation summary -* Smart reply +--- + +## **Troubleshooting** If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your `tsConfig.json`: @@ -449,37 +543,42 @@ If you face any issues while integrating the builder in your app project, please If your development server is running, restart it to ensure the new TypeScript configuration is picked up. -*** - -## **Understanding Your Generated Code** - -The exported package includes several important elements to help you further customize your chat experience: - -### **Directory Structure** - -The `CometChat` folder contains: - -* **Components** - Individual UI elements (message bubbles, input fields, etc.) -* **Layouts** - Pre-configured arrangement of components -* **Context** - State management for your chat application -* **Hooks** - Custom React hooks for chat functionality -* **Utils** - Helper functions and configuration - -### **Configuration Files** - -* **CometChat Settings File** - Controls the appearance and behavior of your chat UI -* **Theme Configuration** - Customize colors, typography, and spacing -* **Localization Files** - Add support for different languages + + Stuck on something? Our [Developer Community](http://community.cometchat.com/) + and [Support team](https://help.cometchat.com/hc/en-us/requests/new) are happy + to help. + -*** +--- ## **Next Steps** Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want. + + + Learn how to customize your integration through the UI Kit Builder settings + file. + + + Understand the organization of the UI Kit Builder components and generated + code. + + + Modify themes and UI elements to match your brand. + + + Customise the UI the way you want with advanced options. + + -*** +--- diff --git a/chat-builder/react/overview.mdx b/chat-builder/react/overview.mdx index ecefeaa9b..0f8fecbaf 100644 --- a/chat-builder/react/overview.mdx +++ b/chat-builder/react/overview.mdx @@ -1,118 +1,141 @@ --- -title: "CometChat Builder For React" +title: "CometChat UI Kit Builder For React" sidebarTitle: "Overview" +description: "CometChat UI Kit Builder for React is a visual development tool that helps you design and configure chat experiences for React applications without building the interface from scratch." --- -The **CometChat Builder** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. +It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure. -*** +With CometChat UI Kit Builder, you can: -## **Why Choose CometChat Builder?** +- Configure chat and calling features +- Apply theming and layout options +- Export React-ready code -* **Rapid Integration** – Prebuilt UI components for faster deployment. -* **Customizable & Flexible** – Modify the UI to align with your brand’s identity. -* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks. -* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance. +The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling. -*** - -## **User Interface Preview** + + Go to the Integration Guide + - - - +--- -*** +## UI Kit Builder Features -## **Try Live Demo** +**Visual Configuration** β€” UI Kit Builder provides a visual configuration environment for designing your chat interface before integration. -**Experience the CometChat UI Kit Builder in action:** +**Toggle-Based Feature Control** β€” Messaging and calling features can be controlled through configuration settings in the UI Kit Builder. - +**Ready-to-Export Code** β€” After configuration, UI Kit Builder generates a ready-to-integrate React codebase. - +--- - +## How to Use UI Kit Builder -*** +### 1. Design -## **Integration** +Customize your chat experience using the visual UI Kit Builder: -A ready-to-use chat interfaceβ€”configured via a UI Kit Builderβ€”built on top of our UI Kits. +- **Configure layout** β€” Toggle all the required features in the dashboard. Choose whether you want a sidebar or not. +- **Themes** β€” Select between system, light, and dark themes. Choose custom colors and typography. +- Customize component behavior directly from the builder interface. - + -**How It Works** - -* Toggle features like @mentions, reactions, media uploads, and more in a visual interface. -* Drag-and-drop or point-and-click to enable or disable components. -* Customize layouts and stylesβ€”no deep coding required. - -**Why It’s Great** - -* **Fastest Setup** – Minimal component wiring. -* **Continuous Customization** – Only turn on the features you want. -* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain. - -*** - -## **Next Steps for Developers** - -1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts). - -2. **Follow the Setup Guide** – - - * **UI Kit Builder** – [React.js](/ui-kit/react/builder-integration) - -3. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview). - -4. **Test & Deploy** – Run tests and launch your chat app. - -*** +### 2. Export -## **Helpful Resources** +Once configured, export production-ready React code tailored to your selected setup. -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. +1. Click on **Export Code** +2. Review your export +3. Your code will be successfully exported - - - +### 3. Integrate - Fully functional sample applications to accelerate your development. +Add the exported code into your React application and connect using your CometChat App ID, Region, and Auth Key. - View on GitHub +1. **Install dependencies** +2. **Copy CometChat folder** into your project's `src` directory +3. **Initialize CometChat** in your app's entry file +4. **User Authentication** β€” CometChat uses a UID (User ID) to identify each user. After initialization, authenticate users to enable chat functionality. +5. **Render the CometChatApp component** β€” Render the chat UI by adding `CometChatApp` to your component +6. **Run the app** β€” Start your application with the appropriate command based on your setup + + Step-by-step instructions for integrating the UI Kit Builder into your React app - - - Access the complete UI Kit source code on GitHub. - - View on GitHub +--- - +## Try Live Demo - +Experience the CometChat UI Kit Builder in action: - UI design resources for customization and prototyping. + + + - View on Figma + + + - +--- +## Need Help? + + + + Connect with other developers and get answers + + + Contact our support team for assistance + -*** - -## **Need Help?** - -If you need assistance, check out: +--- -* [Developer Community](http://community.cometchat.com/) -* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new) +## Related Resources + + + + Learn more about the CometChat JavaScript SDK + + + Explore the React UI Kit components + + + UI Kit Builder for Next.js applications + + + UI Kit Builder for React Router applications + + diff --git a/docs.json b/docs.json index 6fe2a0c07..c8c56b112 100644 --- a/docs.json +++ b/docs.json @@ -37,9 +37,7 @@ { "group": "Docs MCP", "hidden": true, - "pages": [ - "mcp-server" - ] + "pages": ["mcp-server"] } ] }, @@ -91,9 +89,7 @@ { "dropdown": "Kubernetes", "icon": "/images/icons/kubernetes.svg", - "pages": [ - "on-premise-deployment/kubernetes/overview" - ] + "pages": ["on-premise-deployment/kubernetes/overview"] } ] } @@ -104,9 +100,7 @@ "tabs": [ { "tab": "Chat & Calling", - "pages": [ - "chat-call" - ] + "pages": ["chat-call"] }, { "tab": "Platform", @@ -226,15 +220,11 @@ }, { "group": "User-Roles", - "pages": [ - "fundamentals/user-roles-and-permissions" - ] + "pages": ["fundamentals/user-roles-and-permissions"] }, { "group": "Guides", - "pages": [ - "fundamentals/user-auth" - ] + "pages": ["fundamentals/user-auth"] } ] }, @@ -292,10 +282,7 @@ { "dropdown": "Wix", "icon": "/images/icons/wix.svg", - "pages": [ - "/widget/wix/overview", - "/widget/wix/integration" - ] + "pages": ["/widget/wix/overview", "/widget/wix/integration"] }, { "dropdown": "Webflow", @@ -323,11 +310,11 @@ ] }, { - "group": "Additional Customizations", + "group": "Reference", "pages": [ - "chat-builder/react/builder-customisations", + "chat-builder/react/builder-settings", "chat-builder/react/builder-dir-structure", - "chat-builder/react/builder-settings" + "chat-builder/react/builder-customisations" ] } ] @@ -344,11 +331,11 @@ ] }, { - "group": "Additional Customizations", + "group": "Reference", "pages": [ - "chat-builder/nextjs/builder-customisations", + "chat-builder/nextjs/builder-settings", "chat-builder/nextjs/builder-dir-structure", - "chat-builder/nextjs/builder-settings" + "chat-builder/nextjs/builder-customisations" ] } ] @@ -365,11 +352,11 @@ ] }, { - "group": "Additional Customizations", + "group": "Reference", "pages": [ - "chat-builder/react-router/builder-customisations", + "chat-builder/react-router/builder-settings", "chat-builder/react-router/builder-dir-structure", - "chat-builder/react-router/builder-settings" + "chat-builder/react-router/builder-customisations" ] } ] @@ -970,9 +957,7 @@ }, { "group": "Guides", - "pages": [ - "ui-kit/react-native/guide-ai-agent" - ] + "pages": ["ui-kit/react-native/guide-ai-agent"] }, { "group": "Migration Guide", @@ -1264,10 +1249,7 @@ }, { "group": "Reference", - "pages": [ - "ui-kit/ios/methods", - "ui-kit/ios/events" - ] + "pages": ["ui-kit/ios/methods", "ui-kit/ios/events"] }, { "group": "Advanced", @@ -1841,9 +1823,7 @@ "pages": [ { "group": "Overview", - "pages": [ - "ui-kit/flutter/overview" - ] + "pages": ["ui-kit/flutter/overview"] }, { "group": "Getting Started", @@ -2518,9 +2498,7 @@ }, { "group": "Setup", - "pages": [ - "sdk/javascript/setup-sdk" - ] + "pages": ["sdk/javascript/setup-sdk"] }, { "group": "Authentication", @@ -2578,9 +2556,7 @@ }, { "group": "User Presence", - "pages": [ - "sdk/javascript/user-presence" - ] + "pages": ["sdk/javascript/user-presence"] }, { "group": "Groups", @@ -4686,9 +4662,7 @@ }, { "group": "Users", - "pages": [ - "rest-api/data-import-apis/users/import-users" - ] + "pages": ["rest-api/data-import-apis/users/import-users"] }, { "group": "Groups", @@ -4889,9 +4863,7 @@ "tabs": [ { "tab": "AI Agents", - "pages": [ - "ai-agents" - ] + "pages": ["ai-agents"] }, { "tab": "Agent Builder", @@ -4954,15 +4926,11 @@ "/ai-agents/crew-ai-tools", { "group": "Guides", - "pages": [ - "/ai-agents/crew-ai-knowledge-agent" - ] + "pages": ["/ai-agents/crew-ai-knowledge-agent"] }, { "group": "Tutorials", - "pages": [ - "/ai-agents/crew-ai-product-hunt-agent" - ] + "pages": ["/ai-agents/crew-ai-product-hunt-agent"] } ] }, @@ -4975,15 +4943,11 @@ "/ai-agents/agno-tools", { "group": "Guides", - "pages": [ - "/ai-agents/agno-knowledge-agent" - ] + "pages": ["/ai-agents/agno-knowledge-agent"] }, { "group": "Tutorials", - "pages": [ - "/ai-agents/agno-product-hunt-agent" - ] + "pages": ["/ai-agents/agno-product-hunt-agent"] } ] }, @@ -4996,15 +4960,11 @@ "/ai-agents/vercel-tools", { "group": "Guides", - "pages": [ - "/ai-agents/vercel-knowledge-agent" - ] + "pages": ["/ai-agents/vercel-knowledge-agent"] }, { "group": "Tutorials", - "pages": [ - "/ai-agents/vercel-product-hunt-agent" - ] + "pages": ["/ai-agents/vercel-product-hunt-agent"] } ] }, @@ -5015,15 +4975,11 @@ "/ai-agents/langgraph", { "group": "Guides", - "pages": [ - "/ai-agents/langgraph-knowledge-agent" - ] + "pages": ["/ai-agents/langgraph-knowledge-agent"] }, { "group": "Tutorials", - "pages": [ - "/ai-agents/langgraph-product-hunt-agent" - ] + "pages": ["/ai-agents/langgraph-product-hunt-agent"] } ] }, @@ -5036,15 +4992,11 @@ "/ai-agents/ag2-tools", { "group": "Guides", - "pages": [ - "/ai-agents/ag2-knowledge-agent" - ] + "pages": ["/ai-agents/ag2-knowledge-agent"] }, { "group": "Tutorials", - "pages": [ - "/ai-agents/ag2-product-hunt-agent" - ] + "pages": ["/ai-agents/ag2-product-hunt-agent"] } ] }, @@ -5057,9 +5009,7 @@ "/ai-agents/ag-ui-tools", { "group": "Guides", - "pages": [ - "/ai-agents/cometchat-ag-ui-byoa" - ] + "pages": ["/ai-agents/cometchat-ag-ui-byoa"] }, { "group": "Implementation", @@ -5075,16 +5025,12 @@ { "tab": "Widget Builder", "tab-id": "ai-agent-chat-builder", - "pages": [ - "/ai-agents/chat-widget" - ] + "pages": ["/ai-agents/chat-widget"] }, { "tab": "Custom Bots", "hidden": true, - "pages": [ - "/ai-chatbots/custom-bots" - ] + "pages": ["/ai-chatbots/custom-bots"] }, { "tab": "AI Bots (Legacy)", @@ -5141,9 +5087,7 @@ "tabs": [ { "tab": "Notifications", - "pages": [ - "notifications" - ] + "pages": ["notifications"] }, { "tab": "Push", @@ -5156,7 +5100,7 @@ "notifications/ios-apns-push-notifications", "notifications/ios-fcm-push-notifications", "notifications/flutter-push-notifications-android", - "notifications/flutter-push-notifications-ios", + "notifications/flutter-push-notifications-ios", "notifications/react-native-push-notifications-android", "notifications/react-native-push-notifications-ios", "notifications/web-push-notifications" @@ -5174,9 +5118,7 @@ }, { "group": " ", - "pages": [ - "notifications/push-notifications-extension-legacy" - ] + "pages": ["notifications/push-notifications-extension-legacy"] } ] }, @@ -5190,9 +5132,7 @@ "notifications/email-custom-providers", { "group": " ", - "pages": [ - "notifications/email-notifications-extension-legacy" - ] + "pages": ["notifications/email-notifications-extension-legacy"] } ] }, @@ -5206,9 +5146,7 @@ "notifications/sms-custom-providers", { "group": " ", - "pages": [ - "notifications/sms-notifications-extension-legacy" - ] + "pages": ["notifications/sms-notifications-extension-legacy"] } ] } @@ -5219,9 +5157,7 @@ "tabs": [ { "tab": "Insights", - "pages": [ - "insights" - ] + "pages": ["insights"] } ] } @@ -5859,62 +5795,62 @@ { "source": "/notifications/push-notification-extension-overview", "destination": "/notifications/push-notification-extension-legacy" - }, + }, { "source": "/notifications/push-notification-extension-legacy", "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/web-push-notifications-legacy", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/web-push-notifications-legacy", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/android-push-notifications-legacy", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/android-push-notifications-legacy", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/android-connection-service", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/android-connection-service", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/ios-fcm-push-notifications-legacy", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/ios-fcm-push-notifications-legacy", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/ios-apns-push-notifications-legacy", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/ios-apns-push-notifications-legacy", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/flutter-push-notifications", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/flutter-push-notifications", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/react-native-push-notifications-legacy", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/react-native-push-notifications-legacy", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/capacitor-cordova-ionic-push-notifications", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/capacitor-cordova-ionic-push-notifications", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/mute-functionality", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/mute-functionality", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/token-management", - "destination": "/notifications/push-notifications-extension-legacy" + "source": "/notifications/token-management", + "destination": "/notifications/push-notifications-extension-legacy" }, { - "source": "/notifications/email-notification-extension", - "destination": "/notifications/email-notifications-extension-legacy" + "source": "/notifications/email-notification-extension", + "destination": "/notifications/email-notifications-extension-legacy" }, { - "source": "/notifications/sms-notification-extension", - "destination": "/notifications/sms-notifications-extension-legacy" + "source": "/notifications/sms-notification-extension", + "destination": "/notifications/sms-notifications-extension-legacy" }, { - "source": "/notifications/react-native-push-notifications", - "destination": "/notifications/react-native-push-notifications-android" + "source": "/notifications/react-native-push-notifications", + "destination": "/notifications/react-native-push-notifications-android" } ], "integrations": { @@ -5936,4 +5872,4 @@ "redirect": true } } -} \ No newline at end of file +} diff --git a/images/ui-kit-builder-review-export.png b/images/ui-kit-builder-review-export.png new file mode 100644 index 000000000..63754e8d0 Binary files /dev/null and b/images/ui-kit-builder-review-export.png differ diff --git a/images/uikit-builder-preview.png b/images/uikit-builder-preview.png new file mode 100644 index 000000000..12d13454d Binary files /dev/null and b/images/uikit-builder-preview.png differ diff --git a/snippets/widget/overview.mdx b/snippets/widget/overview.mdx index db51b50c5..ef57cb220 100644 --- a/snippets/widget/overview.mdx +++ b/snippets/widget/overview.mdx @@ -8,49 +8,57 @@ The Chat Widget enables you to embed a fully functional chat interface into your ## Prerequisites -- A valid CometChat account. -- Permissions to create and manage applications in the CometChat Dashboard. -- Basic familiarity with your target platform (Web, React, Angular, Vue, etc.). +- A valid CometChat account. +- Permissions to create and manage applications in the CometChat Dashboard. +- Basic familiarity with your target platform (Web, React, Angular, Vue, etc.). ## Create Account -1. Navigate to the [CometChat Dashboard](https://app.cometchat.com/). -2. Click **Sign Up** and complete the registration form. -3. Confirm your email address to activate your account. +1. Navigate to the [CometChat Dashboard](https://app.cometchat.com/). +2. Click **Sign Up** and complete the registration form. +3. Confirm your email address to activate your account. ## Create App -1. Log in to the CometChat Dashboard. -2. Click **+ Create New App**. -3. Enter an **App Name**, select a **Region**, and choose a **Plan**. -4. Click **Create** and note your **App ID**, **Region**, and **Auth Key**. +1. Log in to the CometChat Dashboard. +2. Click **+ Create New App**. +3. Enter an **App Name**, select a **Region**, and choose a **Plan**. +4. Click **Create** and note your **App ID**, **Region**, and **Auth Key**. ## Integrate No Code Solution -1. In the Dashboard sidebar, select **Integrate**. -2. Choose **No Code**. -3. Select a **Suitable Platform** for your project (e.g., WordPress, HTML, PHP, Laravel etc.). +1. In the Dashboard sidebar, select **Integrate**. +2. Choose **No Code**. +3. Select a **Suitable Platform** for your project (e.g., WordPress, HTML, PHP, Laravel etc.). 4. Add a variant and customize the widget settings as needed. ## Customize Chat Widget -1. In UI Kit Builder, adjust **Appearance**. - - Adjust **Theme**, **Colors**, and **Typography** to match your brand. -2. Select **Features** (e.g., **Block Users**, **Threaded Messages**, **Read Receipts**). -3. Preview changes in the **Live Preview** pane. +1. In UI Kit Builder, adjust **Appearance**. + - Adjust **Theme**, **Colors**, and **Typography** to match your brand. +2. Select **Features** (e.g., **Block Users**, **Threaded Messages**, **Read Receipts**). +3. Preview changes in the **Live Preview** pane. 4. Save and publish your changes. ## Embed Code -1. In UI Kit Builder, click **Get Embedded Code**. -2. Note the app credentials: - - **App ID** - - **Auth Key** +1. In UI Kit Builder, click **Get Embedded Code**. +2. Note the app credentials: + - **App ID** + - **Auth Key** - **Region** - **VariantID** -3. Follow the documentation to implement the code snippet. +3. Follow the documentation to implement the code snippet. ## Next Steps -- Test end-to-end chat functionality in a development environment. -- Deploy the updated application to production. \ No newline at end of file + + + Embed the CometChat Widget into your static HTML website with a simple code + snippet. + + + Explore advanced JavaScript controls for the CometChat Widget β€” open chats, + listen for events, and more. + + diff --git a/ui-kit/react/moved/builder-integration-nextjs.mdx b/ui-kit/react/moved/builder-integration-nextjs.mdx index 038d32ade..24cfb126a 100644 --- a/ui-kit/react/moved/builder-integration-nextjs.mdx +++ b/ui-kit/react/moved/builder-integration-nextjs.mdx @@ -8,7 +8,7 @@ sidebarTitle: "Integration - Next.js" With the **UI Kit Builder**, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding. - + ## **Complete Integration Workflow** @@ -94,7 +94,7 @@ Before integrating the UI Kit Builder into your project, you can preview the cha ### **Step 1: Install Dependencies** ```ruby -npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript +npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript ``` ### **Step 2: Copy CometChat Folder** diff --git a/ui-kit/react/moved/builder-integration-react-router.mdx b/ui-kit/react/moved/builder-integration-react-router.mdx index 8dc80bd54..54f43b401 100644 --- a/ui-kit/react/moved/builder-integration-react-router.mdx +++ b/ui-kit/react/moved/builder-integration-react-router.mdx @@ -8,7 +8,7 @@ sidebarTitle: "Integration - React Router" With the **UI Kit Builder**, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding. - + ## **Complete Integration Workflow** @@ -94,7 +94,7 @@ Before integrating the UI Kit Builder into your project, you can preview the cha ### **Step 1: Install Dependencies** ```ruby -npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript +npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript ``` ### **Step 2: Copy CometChat Folder** diff --git a/ui-kit/react/moved/builder-integration.mdx b/ui-kit/react/moved/builder-integration.mdx index dd4cfd9a7..deafcdcef 100644 --- a/ui-kit/react/moved/builder-integration.mdx +++ b/ui-kit/react/moved/builder-integration.mdx @@ -8,7 +8,7 @@ sidebarTitle: "Integration - React.js" With the **UI Kit Builder**, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding. - + ## **Complete Integration Workflow** @@ -108,7 +108,7 @@ Follow these steps to integrate CometChat UI Kit Builder into your existing Reac Run the following command to install the required dependencies: ```ruby -npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript +npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript ``` ### **Step 2: Copy CometChat Folder** diff --git a/widget/html/advanced.mdx b/widget/html/advanced.mdx index ebecc7456..94c66859d 100644 --- a/widget/html/advanced.mdx +++ b/widget/html/advanced.mdx @@ -6,4 +6,25 @@ description: "Explore advanced setup options for the CometChat Widget in static import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; - \ No newline at end of file + +**Quick Reference for AI Agents & Developers** +- **What this page covers**: Advanced JavaScript controls for the CometChat Widget β€” open specific chats, listen for events, manage users/groups, control auth sessions, and change localization. +- **Prerequisites**: The standard widget snippet from the [Integration guide](/widget/html/integration) must already be on your page. +- **Key action**: Add a ` + @@ -47,17 +67,17 @@ Replace UID with id of the user you want to login with. + + @@ -608,16 +702,16 @@ Replace UID with id of the user you want to login with.