diff --git a/chat-builder/nextjs/builder-customisations.mdx b/chat-builder/nextjs/builder-customisations.mdx index c0aab063..8723b0a8 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 9ec131b6..00a616e7 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 4aa78752..212759bb 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,7 +18,7 @@ export interface CometChatSettings { chatFeatures: { ... } callFeatures: { ... } layout: { ... } - style: { ... } + style: { ... } } ``` @@ -21,82 +27,115 @@ export interface CometChatSettings { ## 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. + +| 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 | Enable conversation + advanced search. | +| moderation | boolean | Turn on content moderation tools. | +| quotedReplies | boolean | Allow quoting messages. | +| markAsUnread | boolean | Let users mark messages as unread. | + + + 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. + +| Property | Type | Description | +| ----------------------- | ------- | ------------------------------------------- | +| mentions | boolean | Enable @mentions. | +| mentionAll | boolean | 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 | Allow reporting a message. | + + + 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 | -| --- | --- | --- | +AI-powered features to help users start and navigate conversations. + +| Property | Type | Description | +| ------------------- | ------- | ------------------------------------------ | | conversationStarter | boolean | Suggest AI-generated conversation openers. | -| conversationSummary | boolean | Summaries of chat threads. | -| smartReply | boolean | Quick replies suggested by AI. | +| conversationSummary | boolean | Summaries of chat threads. | +| smartReply | boolean | Quick replies suggested by AI. | + + +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). + -### 1.4 User Management (`userManagement`) β€” Optional +### 1.4 User Management (`userManagement`) -| Property | Type | Description | -| --- | --- | --- | -| friendsOnly | boolean (optional) | Restrict chat to friends-only mode. | +| Property | Type | Description | +| ----------- | ------- | ----------------------------------- | +| friendsOnly | boolean | Restrict chat to friends-only mode. | ### 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. + +| 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. | ### 1.6 Moderator Controls (`moderatorControls`) -| 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. | +Admin tools for managing group members and content. + +| Property | Type | Description | +| -------------------- | ------- | ------------------------- | +| kickUsers | boolean | Kick users from groups. | +| banUsers | boolean | Ban users from groups. | +| promoteDemoteMembers | boolean | Change a member’s scope. | +| reportMessage | boolean | 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 | -| --- | --- | --- | +Allow direct messages between group members. + +| Property | Type | Description | +| -------------------------------- | ------- | ---------------------------------------- | | sendPrivateMessageToGroupMembers | boolean | DM group members from the group context. | --- @@ -105,62 +144,85 @@ AI assistance inside chat. ### 2.1 Voice and Video Calling (`voiceAndVideoCalling`) -| Property | Type | Description | -| --- | --- | --- | +Enable voice and video calling capabilities. + +| Property | Type | Description | +| -------------------- | ------- | ----------------------- | | oneOnOneVoiceCalling | boolean | One-to-one voice calls. | | oneOnOneVideoCalling | boolean | One-to-one video calls. | -| groupVideoConference | boolean | Group video calls. | +| groupVideoConference | boolean | Group video calls. | | groupVoiceConference | boolean | Group voice-only 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. + +| 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'`. | + + + 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'`. | + +| Property | Type | Description | +| -------- | ------ | ----------------------------------- | +| theme | string | `'system'`, `'light'`, or `'dark'`. | + + + 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. + + ### 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. | + +| 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. | +| secondaryTextDark | string | Secondary text color in dark mode. | + + + 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 -| Property | Type | Description | -| --- | --- | --- | -| font | string | Font family (e.g., `'roboto'`). | -| size | string | Font size preset (e.g., `'default'`). | ---- +| Property | Type | Description | +| -------- | ------ | ---------------------------------------------------------------------- | +| font | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'`. | +| size | string | Font size preset: `'default'`, `'compact'`, or `'comfortable'`. | -{/* ## 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. | ---- */} +## Settings Overview -## Example configuration +Here's the complete settings structure. Modify these values in `CometChatSettings.ts` to customize your chat experience. ```json { @@ -265,7 +327,19 @@ Agent-facing options for support scenarios. --- -## 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 0db49c57..1f2555e9 100644 --- a/chat-builder/nextjs/integration.mdx +++ b/chat-builder/nextjs/integration.mdx @@ -1,93 +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 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)** @@ -101,7 +102,7 @@ npm install @cometchat/chat-uikit-react@6.2.3 @cometchat/calls-sdk-javascript 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 94349fec..9599fe2a 100644 --- a/chat-builder/nextjs/overview.mdx +++ b/chat-builder/nextjs/overview.mdx @@ -1,120 +1,118 @@ --- title: "CometChat UI Kit Builder For Next.js" sidebarTitle: "Overview" +description: "Overview of the CometChat UI Kit Builder for Next.js β€” a prebuilt, customizable UI Kit solution for rapidly integrating chat into Next.js applications." --- -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. +Build chat and calling into your Next.js app in minutes. The **UI Kit Builder** gives you **prebuilt UI components** with toggle-based configurationβ€”customize the theme, enable the features you need, and export production-ready code. -*** + + **For developers exploring chat solutions**: Learn what the UI Kit Builder + offers and how it simplifies chat integration. Ready to start? Follow the + [Integration Guide](/chat-builder/nextjs/integration). + + +--- ## **Why Choose CometChat UI Kit Builder?** -* **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. +- **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. -*** +--- -## **User Interface Preview** +## **Key Features** - - - +| Feature | Description | +| ------------------- | ---------------------------------------------------- | +| πŸ’¬ Chat & Messaging | Instant messaging with rich media and quoted replies | +| πŸ”” Real-time | Typing indicators, read receipts, and user presence | +| πŸ“Ή Voice & Video | 1:1 and group calling built-in | +| ✨ AI Copilot | Smart replies, summaries, and conversation starters | +| πŸ” Search & History | Conversational search and message history | -*** +--- -## **Try Live Demo** +## **Supported Frameworks** -**Experience the CometChat UI Kit Builder in action:** +The UI Kit Builder works seamlessly with popular React-based frameworks: - +- [**React**](/chat-builder/react/integration) (Vite, Create React App) +- [**Next.js**](/chat-builder/nextjs/integration) +- [**React Router**](/chat-builder/react-router/integration) - +--- - +## **How It Works** -*** +1. **Design** – Customize your chat UI in the visual builder +2. **Export** – Download production-ready React code +3. **Integrate** – Drop into your app and go live -## **Integration Options** +--- -A ready-to-use chat interfaceβ€”configured via a UI Kit Builderβ€”built on top of our UI Kits. +## **User Interface Preview** - + -**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. - -*** +--- -## **Helpful Resources** +## **Try Live Demo** -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. +**Experience the CometChat UI Kit Builder in action:** + + - - - Fully functional sample applications to accelerate your development. - - View on GitHub - - - - - - Access the complete UI Kit source code on GitHub. - - View on GitHub - - - - - - UI design resources for customization and prototyping. +--- - View on Figma +## **Get Started** + + Launch the UI Kit Builder and integrate chat in minutes - + + + -*** +--- ## **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) + + + Connect with other developers and get answers + + + Contact our support team for assistance + + diff --git a/chat-builder/react-router/builder-customisations.mdx b/chat-builder/react-router/builder-customisations.mdx index 983d43e8..d22035ce 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 9ec131b6..a58e3982 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 2886b43d..5c44f2ee 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,7 +18,7 @@ export interface CometChatSettings { chatFeatures: { ... } callFeatures: { ... } layout: { ... } - style: { ... } + style: { ... } } ``` @@ -21,82 +27,115 @@ export interface CometChatSettings { ## 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. + +| 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 | Enable conversation + advanced search. | +| moderation | boolean | Turn on content moderation tools. | +| quotedReplies | boolean | Allow quoting messages. | +| markAsUnread | boolean | Let users mark messages as unread. | + + + 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. + +| Property | Type | Description | +| ----------------------- | ------- | ------------------------------------------- | +| mentions | boolean | Enable @mentions. | +| mentionAll | boolean | 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 | Allow reporting a message. | + + + 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 | -| --- | --- | --- | +AI-powered features to help users start and navigate conversations. + +| Property | Type | Description | +| ------------------- | ------- | ------------------------------------------ | | conversationStarter | boolean | Suggest AI-generated conversation openers. | -| conversationSummary | boolean | Summaries of chat threads. | -| smartReply | boolean | Quick replies suggested by AI. | +| conversationSummary | boolean | Summaries of chat threads. | +| smartReply | boolean | Quick replies suggested by AI. | + + +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). + -### 1.4 User Management (`userManagement`) β€” Optional +### 1.4 User Management (`userManagement`) -| Property | Type | Description | -| --- | --- | --- | -| friendsOnly | boolean (optional) | Restrict chat to friends-only mode. | +| Property | Type | Description | +| ----------- | ------- | ----------------------------------- | +| friendsOnly | boolean | Restrict chat to friends-only mode. | ### 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. + +| 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. | ### 1.6 Moderator Controls (`moderatorControls`) -| 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. | +Admin tools for managing group members and content. + +| Property | Type | Description | +| -------------------- | ------- | ------------------------- | +| kickUsers | boolean | Kick users from groups. | +| banUsers | boolean | Ban users from groups. | +| promoteDemoteMembers | boolean | Change a member’s scope. | +| reportMessage | boolean | 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 | -| --- | --- | --- | +Allow direct messages between group members. + +| Property | Type | Description | +| -------------------------------- | ------- | ---------------------------------------- | | sendPrivateMessageToGroupMembers | boolean | DM group members from the group context. | --- @@ -105,62 +144,85 @@ AI assistance inside chat. ### 2.1 Voice and Video Calling (`voiceAndVideoCalling`) -| Property | Type | Description | -| --- | --- | --- | +Enable voice and video calling capabilities. + +| Property | Type | Description | +| -------------------- | ------- | ----------------------- | | oneOnOneVoiceCalling | boolean | One-to-one voice calls. | | oneOnOneVideoCalling | boolean | One-to-one video calls. | -| groupVideoConference | boolean | Group video calls. | +| groupVideoConference | boolean | Group video calls. | | groupVoiceConference | boolean | Group voice-only 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. + +| 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'`. | + + + 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'`. | + +| Property | Type | Description | +| -------- | ------ | ----------------------------------- | +| theme | string | `'system'`, `'light'`, or `'dark'`. | + + + 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. + + ### 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. | + +| 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. | +| secondaryTextDark | string | Secondary text color in dark mode. | + + + 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 -| Property | Type | Description | -| --- | --- | --- | -| font | string | Font family (e.g., `'roboto'`). | -| size | string | Font size preset (e.g., `'default'`). | ---- +| Property | Type | Description | +| -------- | ------ | ---------------------------------------------------------------------- | +| font | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'`. | +| size | string | Font size preset: `'default'`, `'compact'`, or `'comfortable'`. | -{/* ## 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. | ---- */} +## Settings Overview -## Example configuration +Here's the complete settings structure. Modify these values in `CometChatSettings.ts` to customize your chat experience. ```json { @@ -265,7 +327,19 @@ Agent-facing options for support scenarios. --- -## 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 91504928..7171fc7a 100644 --- a/chat-builder/react-router/integration.mdx +++ b/chat-builder/react-router/integration.mdx @@ -1,93 +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 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. > 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)** @@ -101,7 +102,7 @@ npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript Copy the `cometchat-app-react/src/CometChat` folder inside your `src/app` directory. -*** +--- ### **Step 3: Create & Initialize `CometChatNoSSR.tsx`** @@ -114,7 +115,7 @@ src/app/ └── CometChatNoSSR.tsx ``` -```tsx src/app/CometChatNoSSR/CometChatNoSSR.tsx +```tsx {11-13} src/app/CometChatNoSSR/CometChatNoSSR.tsx import React, { useEffect, useState } from "react"; import { CometChatUIKit, @@ -125,9 +126,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 + 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 }; const CometChatNoSSR: React.FC = () => { @@ -168,38 +169,29 @@ const CometChatNoSSR: React.FC = () => { export default CometChatNoSSR; ``` -*** - -### **Step 4: User Login** + -To authenticate a user, you need a **`UID`**. You can either: +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. -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**: - - * `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). @@ -225,9 +217,34 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { + +```js +import { CometChatUIKit } from "@cometchat/chat-uikit-react"; + +const UID = "cometchat-uid-1"; // 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. In this step, we create a React component that will only run on the client (no SSR). Inside the useEffect hook, we: @@ -237,7 +254,7 @@ In this step, we create a React component that will only run on the client (no S -```ts +```ts {13-15} import React, { useEffect, useState } from "react"; import { CometChatUIKit, @@ -250,9 +267,9 @@ import { setupLocalization } from "../CometChat/utils/utils"; // 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", // Your App ID + REGION: "YOUR_REGION", // Your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Your Auth Key }; const CometChatNoSSR: React.FC = () => { @@ -317,20 +334,110 @@ export default CometChatNoSSR; + +```js {13-15} +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"; + +// Replace these with your actual keys +export const COMETCHAT_CONSTANTS = { + APP_ID: "YOUR_APP_ID", // Your App ID + REGION: "YOUR_REGION", // Your App Region + AUTH_KEY: "YOUR_AUTH_KEY", // Your Auth Key +}; + +const CometChatNoSSR = () => { + 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); + }); + }, []); + + if (!initialized || !user) { + return
Initializing Chat...
; + } + + 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 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'; +import React, { lazy, Suspense } from "react"; +import "@cometchat/chat-uikit-react/css-variables.css"; // Lazy load the CometChat component -const CometChatComponent = lazy(() => import('../CometChatNoSSR/CometChatNoSSR')); +const CometChatComponent = lazy( + () => import("../CometChatNoSSR/CometChatNoSSR"), +); export default function Home() { return ( @@ -362,7 +469,7 @@ Why disable SSR? CometChat UI Kit Builder relies on browser APIs such as window, You can also render the component with default user and group selection: -```javascript +```javascript {12-14} import React, { useEffect, useState } from "react"; import { CometChatUIKit, @@ -374,9 +481,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 + 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 }; // Functional Component @@ -449,7 +556,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. */
@@ -464,54 +571,61 @@ const CometChatNoSSR: React.FC = () => { export default CometChatNoSSR; ``` -When you enable the **Without Sidebar** option for the Sidebar, the following behavior applies: - -* **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. +#### 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: -**Group Action Messages** +| `chatType` | Behavior | +| ---------- | ------------------------------------------------------------------- | +| `"user"` | Displays one-on-one conversations with the selected or default user | +| `"group"` | Displays group conversations with the selected or default group | -You can control the visibility of group action messages using the showGroupActionMessages prop: +Pass the `user` or `group` prop to specify which conversation opens by default. -``` - -``` - -- If `showGroupActionMessages` is `true (default)`, group action messages will be **visible**. - -- If `showGroupActionMessages` is `false`, group action messages will be **hidden**. +--- ### **Step 6: Run Your Application** 1. **Start the development server** - ``` + ```bash npm run dev ``` 2. **Verify the chat interface** -* In your browser, navigate to the `/chat` route `(e.g., http://localhost:3000/chat)`. -* Confirm that the chat experience loads as expected. + - In your browser, navigate to the `/chat` route (e.g., `http://localhost:3000/chat`). + - Confirm that the chat experience loads as expected. + +--- + +## **Advanced Customizations** -*** +### **Group Action Messages** -## **Additional Configuration Notes** +Control the visibility of group action messages using the `showGroupActionMessages` prop: -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 +```jsx + +``` + +- `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: + +```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 + +--- + +## **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 +640,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. -*** + + 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. + -## **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 - -*** +--- ## **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-router/overview.mdx b/chat-builder/react-router/overview.mdx index 38c8b329..b1c4f15c 100644 --- a/chat-builder/react-router/overview.mdx +++ b/chat-builder/react-router/overview.mdx @@ -1,120 +1,118 @@ --- title: "CometChat UI Kit Builder For React Router" sidebarTitle: "Overview" +description: "Overview of the CometChat UI Kit Builder for React Router β€” a prebuilt, customizable UI Kit solution for rapidly integrating chat into React Router applications." --- -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. +Build chat and calling into your React Router app in minutes. The **UI Kit Builder** gives you **prebuilt UI components** with toggle-based configurationβ€”customize the theme, enable the features you need, and export production-ready code. -*** + + **For developers exploring chat solutions**: Learn what the UI Kit Builder + offers and how it simplifies chat integration. Ready to start? Follow the + [Integration Guide](/chat-builder/react-router/integration). + + +--- ## **Why Choose CometChat UI Kit Builder?** -* **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. +- **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. -*** +--- -## **User Interface Preview** +## **Key Features** - - - +| Feature | Description | +| ------------------- | ---------------------------------------------------- | +| πŸ’¬ Chat & Messaging | Instant messaging with rich media and quoted replies | +| πŸ”” Real-time | Typing indicators, read receipts, and user presence | +| πŸ“Ή Voice & Video | 1:1 and group calling built-in | +| ✨ AI Copilot | Smart replies, summaries, and conversation starters | +| πŸ” Search & History | Conversational search and message history | -*** +--- -*** +## **Supported Frameworks** -## **Try Live Demo** +The UI Kit Builder works seamlessly with popular React-based frameworks: -**Experience the CometChat UI Kit Builder in action:** +- [**React**](/chat-builder/react/integration) (Vite, Create React App) +- [**Next.js**](/chat-builder/nextjs/integration) +- [**React Router**](/chat-builder/react-router/integration) - +--- - +## **How It Works** - +1. **Design** – Customize your chat UI in the visual builder +2. **Export** – Download production-ready React code +3. **Integrate** – Drop into your app and go live -*** - -## **Integration** +--- -A ready-to-use chat interfaceβ€”configured via a UI Kit Builderβ€”built on top of our UI Kits. +## **User Interface Preview** - + -**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. - -*** +--- -## **Helpful Resources** +## **Try Live Demo** -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. +**Experience the CometChat UI Kit Builder in action:** + + - - - Fully functional sample applications to accelerate your development. - - View on GitHub - - - - - - Access the complete UI Kit source code on GitHub. - - View on GitHub - - - - - - UI design resources for customization and prototyping. +--- - View on Figma +## **Get Started** + + Launch the UI Kit Builder and integrate chat in minutes - + + + -*** +--- ## **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) + + + Connect with other developers and get answers + + + Contact our support team for assistance + + diff --git a/chat-builder/react/builder-customisations.mdx b/chat-builder/react/builder-customisations.mdx index c0aab063..ef6a9709 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 9ec131b6..8d43ddf8 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 7d85e6f9..d6228623 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,7 +18,7 @@ export interface CometChatSettings { chatFeatures: { ... } callFeatures: { ... } layout: { ... } - style: { ... } + style: { ... } } ``` @@ -21,82 +27,115 @@ export interface CometChatSettings { ## 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. + +| 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 | Enable conversation + advanced search. | +| moderation | boolean | Turn on content moderation tools. | +| quotedReplies | boolean | Allow quoting messages. | +| markAsUnread | boolean | Let users mark messages as unread. | + + + 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. + +| Property | Type | Description | +| ----------------------- | ------- | ------------------------------------------- | +| mentions | boolean | Enable @mentions. | +| mentionAll | boolean | 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 | Allow reporting a message. | + + + 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 | -| --- | --- | --- | +AI-powered features to help users start and navigate conversations. + +| Property | Type | Description | +| ------------------- | ------- | ------------------------------------------ | | conversationStarter | boolean | Suggest AI-generated conversation openers. | -| conversationSummary | boolean | Summaries of chat threads. | -| smartReply | boolean | Quick replies suggested by AI. | +| conversationSummary | boolean | Summaries of chat threads. | +| smartReply | boolean | Quick replies suggested by AI. | + + +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). + -### 1.4 User Management (`userManagement`) β€” Optional +### 1.4 User Management (`userManagement`) -| Property | Type | Description | -| --- | --- | --- | -| friendsOnly | boolean (optional) | Restrict chat to friends-only mode. | +| Property | Type | Description | +| ----------- | ------- | ----------------------------------- | +| friendsOnly | boolean | Restrict chat to friends-only mode. | ### 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. + +| 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. | ### 1.6 Moderator Controls (`moderatorControls`) -| 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. | +Admin tools for managing group members and content. + +| Property | Type | Description | +| -------------------- | ------- | ------------------------- | +| kickUsers | boolean | Kick users from groups. | +| banUsers | boolean | Ban users from groups. | +| promoteDemoteMembers | boolean | Change a member’s scope. | +| reportMessage | boolean | 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 | -| --- | --- | --- | +Allow direct messages between group members. + +| Property | Type | Description | +| -------------------------------- | ------- | ---------------------------------------- | | sendPrivateMessageToGroupMembers | boolean | DM group members from the group context. | --- @@ -105,62 +144,84 @@ AI assistance inside chat. ### 2.1 Voice and Video Calling (`voiceAndVideoCalling`) -| Property | Type | Description | -| --- | --- | --- | +Enable voice and video calling capabilities. + +| Property | Type | Description | +| -------------------- | ------- | ----------------------- | | oneOnOneVoiceCalling | boolean | One-to-one voice calls. | | oneOnOneVideoCalling | boolean | One-to-one video calls. | -| groupVideoConference | boolean | Group video calls. | +| groupVideoConference | boolean | Group video calls. | | groupVoiceConference | boolean | Group voice-only 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. + +| 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'`. | + + + 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'`. | + +| Property | Type | Description | +| -------- | ------ | ----------------------------------- | +| theme | string | `'system'`, `'light'`, or `'dark'`. | + + + 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. + + ### 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. | + +| 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. | +| 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'`). | + + 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 -{/* ## 5. Agent (`agent`) β€” Optional -Agent-facing options for support scenarios. +| Property | Type | Description | +| -------- | ------ | ---------------------------------------------------------------------- | +| font | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'`. | +| size | string | Font size preset: `'default'`, `'compact'`, or `'comfortable'`. | -| 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. | +--- ---- */} +## Settings Overview -## Example configuration +Here's the complete settings structure. Modify these values in `CometChatSettings.ts` to customize your chat experience. ```json { @@ -265,7 +326,19 @@ Agent-facing options for support scenarios. --- -## 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 35960e2d..d538557a 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)** @@ -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 ecefeaa9..cbd7d2dd 100644 --- a/chat-builder/react/overview.mdx +++ b/chat-builder/react/overview.mdx @@ -1,118 +1,118 @@ --- -title: "CometChat Builder For React" +title: "CometChat UI Kit Builder For React" sidebarTitle: "Overview" +description: "Overview of the CometChat UI Kit Builder for React β€” a prebuilt, customizable UI Kit solution for rapidly integrating chat into React applications." --- -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. +Build chat and calling into your React app in minutes. The **UI Kit Builder** gives you **prebuilt UI components** with toggle-based configurationβ€”customize the theme, enable the features you need, and export production-ready code. -*** + + **For developers exploring chat solutions**: Learn what the UI Kit Builder + offers and how it simplifies chat integration. Ready to start? Follow the + [Integration Guide](/chat-builder/react/integration). + -## **Why Choose CometChat Builder?** +--- -* **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. +## **Why Choose CometChat UI Kit Builder?** -*** +- **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. -## **User Interface Preview** +--- - - - +## **Key Features** -*** +| Feature | Description | +| ------------------- | ---------------------------------------------------- | +| πŸ’¬ Chat & Messaging | Instant messaging with rich media and quoted replies | +| πŸ”” Real-time | Typing indicators, read receipts, and user presence | +| πŸ“Ή Voice & Video | 1:1 and group calling built-in | +| ✨ AI Copilot | Smart replies, summaries, and conversation starters | +| πŸ” Search & History | Conversational search and message history | -## **Try Live Demo** +--- -**Experience the CometChat UI Kit Builder in action:** +## **Supported Frameworks** - +The UI Kit Builder works seamlessly with popular React-based frameworks: - +- [**React**](/chat-builder/react/integration) (Vite, Create React App) +- [**Next.js**](/chat-builder/nextjs/integration) +- [**React Router**](/chat-builder/react-router/integration) - +--- -*** +## **How It Works** -## **Integration** +1. **Design** – Customize your chat UI in the visual builder +2. **Export** – Download production-ready React code +3. **Integrate** – Drop into your app and go live -A ready-to-use chat interfaceβ€”configured via a UI Kit Builderβ€”built on top of our UI Kits. +--- + +## **User Interface Preview** - + -**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. - -*** +--- -## **Helpful Resources** +## **Try Live Demo** -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. +**Experience the CometChat UI Kit Builder in action:** + + - - - Fully functional sample applications to accelerate your development. - - View on GitHub - - - - - - Access the complete UI Kit source code on GitHub. - - View on GitHub - - - - - - UI design resources for customization and prototyping. +--- - View on Figma +## **Get Started** + + Launch the UI Kit Builder and integrate chat in minutes - + + + -*** +--- ## **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) + + + Connect with other developers and get answers + + + Contact our support team for assistance + + diff --git a/docs.json b/docs.json index 6fe2a0c0..c8c56b11 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 00000000..63754e8d Binary files /dev/null and b/images/ui-kit-builder-review-export.png differ diff --git a/snippets/widget/overview.mdx b/snippets/widget/overview.mdx index db51b50c..ef57cb22 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/widget/html/advanced.mdx b/widget/html/advanced.mdx index ebecc745..94c66859 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 ` + ``` ### Copy this into `` -```html lines highlight={8-9, 11, 15-17, 22-24} +```html
+ ``` ### Copy this into `` -```html lines highlight={8-9, 11, 14, 18-20, 25-27} +```html
+ ``` ### Copy this into `` -```html lines highlight={8-9, 13, 17-18} +```html
+ @@ -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.