repository·v7·Indexed 21 days ago
https://github.com/cometchat/cometchat-uikit-reactA library of ready-to-use, customizable UI components for integrating real-time messaging, voice and video calling, and AI-powered features into React applications. Version 7.1.0 supports conversations, rich message lists, AI assistants, and full visual customization via CSS custom properties. It requires Node.js >= 18 and React >= 18.
The CometChat React UI Kit provides pre-built, customizable components including:
Unit tests cover individual components, hooks, and utilities. They are located alongside source files as *.spec.ts or *.spec.tsx and do not require a browser or running server.
# Run all unit tests
npm test
# Run with coverage
npm run test:coverageTo test rejected upload states (file size exceeded or unsupported MIME types), you must provide specific fixtures in sample-app/e2e/fixtures/.
e2e-oversize.*)Place any file larger than 100 MB in e2e/fixtures/.
Example generation:
head -c 150000000 /dev/urandom > e2e/fixtures/e2e-oversize.txte2e-blocked-mime.*)This requires two components:
e2e/fixtures/ named e2e-blocked-mime.* (extension must NOT be png, mp4, mp3, or pdf).E2E_BLOCKED_MIME_TYPE in .env.e2e to the exact MIME type denied in your CometChat Dashboard (e.g., E2E_BLOCKED_MIME_TYPE=image/svg+xml).Note: The restriction must be set on the Strategy group → Scope permissions → Admin role in the dashboard.
# Generate an oversize file (~150 MB)
head -c 150000000 /dev/urandom > e2e/fixtures/e2e-oversize.txtStorybook provides an interactive environment to build and test components in isolation at http://localhost:6006.
# Start Storybook in dev mode
npm run storybook
# Build static Storybook
npm run build-storybookThe React Sample App is a reference implementation of CometChat's React UI Kit v7 using React 19 and Vite. It demonstrates real-time messaging, voice/video calling, and AI-powered chat features.
v7 branch:git clone https://github.com/cometchat/cometchat-uikit-react.git
cd cometchat-uikit-react
git checkout v7cd sample-appnpm installnpm run devgit clone https://github.com/cometchat/cometchat-uikit-react.git
git checkout v7
cd cometchat-uikit-react/sample-app
npm install
npm run devTo integrate real-time messaging and calling into your React application, install the @cometchat/chat-uikit-react package via npm.
App ID, Region, and Auth Key.npm install @cometchat/chat-uikit-reactIf you encounter issues while running the project or using CometChat, you can access support through the following channels:
End-to-end tests are located in sample-app/e2e/ and run against the live sample app.
Create a CometChat app and note the App ID, Region, Auth Key, and REST API Key. Enable the following extensions in the Dashboard:
In the Dashboard → BYO Agents, create a user with:
ai-agent-e2eAI Agent E2E@agenticConfigure the .env.e2e file in the sample-app directory:
COMETCHAT_APP_ID=your-app-id
COMETCHAT_REGION=us
COMETCHAT_AUTH_KEY=your-auth-key
COMETCHAT_API_KEY=your-rest-api-key
E2E_USER_UID=e2e-user-1
AI_AGENT_UID=ai-agent-e2e# Install Playwright browsers
npx playwright install
# Seed test data (one-time)
cd sample-app
npm run e2e:seed
# Start dev server (in a separate terminal)
npm run dev
# Run tests
npm run e2eIf you discover a security vulnerability in CometChat, please follow the Responsible Disclosure Policy. To prevent putting the community at risk, keep potential vulnerabilities confidential until they are confirmed and fixed by the CometChat team.
To report a security-related issue, send an email directly to the CometChat security team.
Email: security@cometchat.comThe AI assistant uses a stream of events to provide real-time updates (text streaming, tool calls, etc.). These events follow the CometChatAIStreamEvent interface.
Event Types (CometChatAIStreamEventType):
run_started: The AI run has begun.text_message_start / text_message_content / text_message_end: Lifecycle of text streaming.tool_call_start / tool_call_end / tool_call_args / tool_call_result: Lifecycle of tool/function execution.run_finished: The AI run is complete.Event Data Structure:
type: The event type.content: The text chunk (for text_message_content).toolCallId: The ID of the tool being called.toolName: The name of the tool (for tool_call_start).toolArgs: The arguments chunk (for tool_call_args).toolResult: The result of the tool execution (for tool_call_result).The CometChatConversations component system is built around a central context (CometChatConversationsContextValue) that manages the lifecycle of the conversation list.
State Management:
fetchState (loading, error, etc.) and hasMore to handle pagination via fetchNext.none, single, multiple). It tracks selectedConversationIds and a selectedConversationsMap to ensure selected items persist even during searches.searchText state drives the filtering of the list. When setSearchText is called, it triggers a re-fetch of the conversation list.typingIndicatorMap keyed by user UID or group GUID.Interaction Flow:
Root component initializes the fetch process using the provided conversationsRequestBuilder.handleItemClick) updates the activeConversationId and handles selection logic based on the selectionMode.deleteConversation (immediate) or setConversationToBeDeleted (which prepares the state for a confirmation UI).You can control which users' presence (online/offline status) the UIKit subscribes to using the UIKitSettingsBuilder. There are three modes:
subscribePresenceForAllUsers()).subscribePresenceForFriends()).subscribePresenceForRoles(roles: string[])).// Subscribe to presence for specific roles
const settings = new UIKitSettingsBuilder()
.setAppId('YOUR_APP_ID')
.setRegion('us')
.subscribePresenceForRoles(['admin', 'moderator'])
.build();