CometChat UI Kit Builder Directory Structure

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.

src/
├── CometChat/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── locales/
│   ├── styles/
│   ├── utils/
│   ├── 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

`assets/`

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)

`components/`

Contains all React components that make up the UI of the UI Kit Builder.

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.

context/
├── AppContext.tsx        # Main application context
├── CometChatContext.tsx  # Context for builder settings
└── appReducer.ts         # Reducer functions for AppContext

`locales/`

Contains translations for different languages, enabling localization of the UI.

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.

utils/
└── utils.ts  # General utility 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

Customization Points

When customizing the UI Kit Builder, you’ll typically work with:

CometChatSettings.ts: To modify high-level configuration
styleConfig.ts: To change theme colors, fonts, and other styling variables
Component styles: To make specific UI adjustments to individual components
Locale files: To modify text strings or add new language support

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

Conclusion

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. For further customization and integration details, refer to:

Builder Configuration File – Learn how to customize your integration.
Advanced Theming – Modify themes and UI elements to match your brand.

​Overview

​Directory Details

​Root Files

​Key Directories

​assets/

​components/

​context/

​locales/

​styles/

​utils/

​Key Components Overview

​Customization Points

​Recommendations for Modifications

​Conclusion