Directory Structure - CometChat Docs

The exported app has two halves, and the difference decides where you make changes:

Folder	Who owns it	On re-export
`src/CometChat/`	CometChat. The sample app, shipped as-is.	Copy the new one over yours — edits here are lost
`src/builder/`, `src/App.tsx`, `src/index.tsx`	You. Settings, theming, localization and the app shell.	Regenerated in the download too — keep your own, and take across only `cometchat-builder-settings.json` if you changed settings in the Builder

Both folders are required: src/CometChat reads its configuration from src/builder.

This split is new in React UI Kit v7. If you are upgrading from v6, CometChatApp.tsx, CometChatSettings.ts, CometChat/context/CometChatContext.tsx and CometChat/utils/utils.ts no longer exist — see Integration for the replacements.

Project Structure Overview

cometchat-app-react/
│── public/
│── src/
│   ├── CometChat/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── config/
│   │   ├── context/
│   │   ├── hooks/
│   │   ├── locales/
│   │   ├── styles/
│   │   ├── utils/
│   │   └── decl.d.ts
│   ├── builder/
│   │   ├── cometchat-builder-settings.json
│   │   ├── builderSettings.ts
│   │   ├── useBuilderTheme.ts
│   │   ├── colorUtils.ts
│   │   ├── customHooks.ts
│   │   ├── localization.ts
│   │   ├── styleConfig.ts
│   │   └── shell.css
│   ├── App.tsx
│   └── index.tsx
│── project-info/
│── index.html
│── package.json
│── tsconfig.json
│── vite.config.ts

1. `src/CometChat/` — the CometChat sample app

The chat experience itself, built on the CometChat UI Kit. Treat this folder as vendored: read it, but make your changes through src/builder/ and your builder settings instead.

1.1 `assets/`

Icons and images used by the sample app’s components.

1.2 `components/`

Each subfolder is one screen or feature, with its .tsx and .css files:

Component	Purpose
`CometChatAddMembers/`	Adds members to a group
`CometChatAIAssistant/`	The AI assistant chat experience
`CometChatCallLog/`	Call history, details, participants and recordings
`CometChatCreateGroup/`	Creating new groups
`CometChatCredentials/`	Credentials screen from the standalone sample app — unused here, since this app reads credentials from `src/index.tsx`
`CometChatDetails/`	User and group details panels, including banned members
`CometChatHome/`	The main home screen, and the layout that places every other panel
`CometChatJoinGroup/`	Joining group chats, including password-protected ones
`CometChatLogin/`	Login screen with sample users
`CometChatMessages/`	Core chat interface for one-on-one and group chats
`CometChatNewChat/`	Starting a new conversation
`CometChatSelector/`	The sidebar: chats, calls, users and groups
`CometChatThreadPanel/`	Threaded conversations
`CometChatTransferOwnership/`	Transferring group ownership

1.3 `config/` — settings plumbing

Connects your builder settings to the components:

settings.types.ts — the CometChatSettingsInterface type and its sub-types.
defaultSettings.ts — the fallbacks, plus resolveSettings(), which merges yours over them. This is why a partial settings file is safe. It exports two sets, and the difference matters: storedSettingsDefaults fills the gaps whenever a settings file is present, which is always in an exported app, and is what the Default column on UI Kit Builder Settings documents. defaultSettings turns every feature on and applies only with no SettingsProvider at all — the sample app run bare.
SettingsContext.tsx — SettingsProvider and the useSettings() hook.
useFeatureProps.ts — turns settings into the UI Kit component props that switch features on and off.

1.4 `context/`

AppContext.tsx — app-wide state such as the selected conversation, user or group.
appReducer.ts — the reducer behind AppContext.

1.5 `hooks/`

useIsMobile.ts — switches to the single-pane layout when the chat area is narrow. It measures the app’s own container, so it works when the chat is embedded in a smaller part of your page, not only when the browser window is small.

1.6 `locales/`

Translation files for the sample app’s own text, one JSON file per language, collected by index.ts.

1.7 `styles/`

App.css — layout styles for the whole app. Imported once, from App.tsx.

1.8 `utils/`

assetUrl.ts — returns the URL of an imported image whichever bundler built it. Next.js imports images as objects rather than URLs, and this smooths that over.

1.9 `decl.d.ts`

TypeScript declarations that let components import .svg and .png files.

2. `src/builder/` — your configuration

Owned by you. This is where the choices you made in the UI Kit Builder live.

File	What it does
`cometchat-builder-settings.json`	Your builder settings, written by the dashboard at export and safe to edit by hand. See UI Kit Builder Settings
`builderSettings.ts`	Loads that JSON and exports `builderSettings` for `SettingsProvider`
`useBuilderTheme.ts`	Applies your theme, brand color and typography to the app
`colorUtils.ts`	Derives the lighter and darker brand shades used across the UI
`customHooks.ts`	`useSystemColorScheme`, which follows the OS light or dark mode when your theme is `system`
`localization.ts`	`setupLocalization()`, which registers the sample app’s translations with the UI Kit
`styleConfig.ts`	The font-size scales `useBuilderTheme` applies, and the option lists the Builder shows for fonts and sizes
`shell.css`	Page-level styles for the standalone app: the page reset, the chat’s full-height container, and the “credentials missing” screen

3. `src/` entry files

index.tsx — entry point. Holds your app credentials (COMETCHAT_CONSTANTS), initializes the UI Kit, and renders App inside SettingsProvider.
App.tsx — the app shell. Applies the theme, handles login and logout, and renders CometChatHome or CometChatLogin. This replaces v6’s CometChatApp component and is yours to edit.

4. Root files

File	Purpose
`index.html`	The HTML page Vite serves; loads `src/index.tsx`
`vite.config.ts`	Vite dev-server and build configuration
`package.json`	Dependencies, scripts and metadata
`tsconfig.json`	TypeScript configuration
`public/`	Files served as-is, such as the favicon and web manifest
`README.md`	Integrating this app into an existing React project, and running it standalone
`NEXT_JS.md`	The same for Next.js
`CHANGELOG.md`	Changes across versions
`project-info/`	Settings reference, this structure document, license, security and support notes

Where to make a change

You want to…	Edit
Turn a feature on or off	`src/builder/cometchat-builder-settings.json`
Change theme, brand color or font	`src/builder/cometchat-builder-settings.json` (`style.*`)
Change what the app renders around the chat	`src/App.tsx`
Change credentials	`src/index.tsx`
Add a language	`src/builder/localization.ts`
Restyle a UI Kit component	Your own CSS, using the UI Kit’s CSS variables — see Advanced Theming

Avoid editing anything inside src/CometChat/. That folder is replaced on every upgrade, so changes there are lost — and it is the one part of the app that is not yours.

UI Kit Builder Settings

Every setting in the JSON file, with its default.

Customizations

Go further than the settings file.

​Project Structure Overview

​1. src/CometChat/ — the CometChat sample app

​1.1 assets/

​1.2 components/

​1.3 config/ — settings plumbing

​1.4 context/

​1.5 hooks/

​1.6 locales/

​1.7 styles/

​1.8 utils/

​1.9 decl.d.ts

​2. src/builder/ — your configuration

​3. src/ entry files

​4. Root files

​Where to make a change

UI Kit Builder Settings

Customizations

Project Structure Overview

1. `src/CometChat/` — the CometChat sample app

1.1 `assets/`

1.2 `components/`

1.3 `config/` — settings plumbing

1.4 `context/`

1.5 `hooks/`

1.6 `locales/`

1.7 `styles/`

1.8 `utils/`

1.9 `decl.d.ts`

2. `src/builder/` — your configuration

3. `src/` entry files

4. Root files

Where to make a change