CometChat Visual Builder Directory Structure

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/
│   ├── CometChatBuilderApp.tsx
│   ├── builderSettings.ts
│   ├── customHooks.ts
│   ├── decl.d.ts
│   └── styleConfig.ts
├── App.css
├── App.tsx
└── index.tsx

Directory Details

Root Files

File	Description
CometChatBuilderApp.tsx	The main entry point for the Visual Builder application. This is the component you import in your project to render the chat experience.
builderSettings.ts	Contains configuration settings for the Visual 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 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
├── BuilderSettingsContext.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
└── CometChatBuilderApp.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. builderSettings.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:

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