This document provides an overview of the CometChat Visual 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 Visual Builder follows a modular structure organized by feature and functionality. All Visual 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

FileDescription
CometChatApp.tsxThe main entry point for the Visual Builder application. This is the component you import in your project to render the chat experience.
CometChatSettings.tsContains configuration settings for the Visual Builder, including UI elements, features, and theming options.
customHooks.tsCustom React hooks used throughout the application.
decl.d.tsTypeScript declaration file for type definitions.
styleConfig.tsConfiguration 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 Visual 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 Visual Builder, you’ll typically work with:
  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

​
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 Visual Builder components as children

​
Conclusion

This structured breakdown of the CometChat Visual 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: