> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Directory Structure

> Overview of the CometChat UI Kit Builder directory layout for Angular — understand where to find and customize components, settings, and styles.

The export (`cometchat-builder-angular.zip`) is a complete Angular application, packed flat — `package.json` and `src/` sit at the archive root, so the tree below starts at the folder you unzip it into. This guide helps you navigate the structure so you know exactly where to make changes.

<Tree>
  <Tree.Folder name="cometchat-builder-angular" defaultOpen>
    <Tree.Folder name="src" defaultOpen>
      <Tree.Folder name="app" defaultOpen>
        <Tree.Folder name="components">
          <Tree.File name="Screens the chat is built from" />
        </Tree.Folder>

        <Tree.Folder name="config">
          <Tree.File name="Builder settings and feature flags" />
        </Tree.Folder>

        <Tree.Folder name="guards">
          <Tree.File name="Route guards (auth, credentials)" />
        </Tree.Folder>

        <Tree.Folder name="i18n">
          <Tree.File name="Translation files (en, fr, de, etc.)" />
        </Tree.Folder>

        <Tree.Folder name="pages">
          <Tree.File name="home, login, credentials" />
        </Tree.Folder>

        <Tree.Folder name="services">
          <Tree.File name="Shared state (app, chat, navigation, auth)" />
        </Tree.Folder>

        <Tree.File name="cometchat-app.component.ts" />

        <Tree.File name="app.component.ts" />

        <Tree.File name="app.config.ts" />

        <Tree.File name="app.routes.ts" />
      </Tree.Folder>

      <Tree.Folder name="assets">
        <Tree.File name="Icons and images" />
      </Tree.Folder>

      <Tree.Folder name="environments">
        <Tree.File name="environment.ts (your credentials)" />
      </Tree.Folder>

      <Tree.File name="index.html" />

      <Tree.File name="main.ts" />

      <Tree.File name="styles.css" />
    </Tree.Folder>

    <Tree.Folder name="project-info">
      <Tree.File name="Settings reference, folder guide, licence" />
    </Tree.Folder>

    <Tree.File name="angular.json" />

    <Tree.File name="package.json" />

    <Tree.File name="README.md" />
  </Tree.Folder>
</Tree>

***

## Key Files

| File | Purpose |
| - | - |
| `src/app/cometchat-app.component.ts` | **The component you render** — `<cometchat-app />`, the whole chat experience |
| `src/app/app.config.ts` | Application providers, including where Builder settings are applied |
| `src/main.ts` | Bootstraps the app and initializes the UI Kit |
| `src/environments/environment.ts` | Your App ID, region and Auth Key, written at export time |
| `angular.json` | Build config — where the UI Kit's stylesheet and assets are registered |

***

## Key Folders

### `app/config/`

Everything the Builder controls lives here. This is the first place to look when changing behavior.

| File | Purpose |
| - | - |
| `cometchat-builder-settings.json` | **Your Builder choices** — edit this to change features after export |
| `default-settings.ts` | The shipped defaults your file is merged over |
| `settings.types.ts` | The settings contract (TypeScript interface) |
| `settings.service.ts` | Merges your settings over the defaults |
| `feature-flags.ts` | Exposes one signal per feature, which components read |
| `theme-styles.service.ts` | Turns your color and typography choices into CSS variables |
| `font-scales.ts` | The typography scales behind `size` and the font fallback stacks |
| `credentials.ts` | Resolves credentials from storage, then `environment.ts` |

### `app/components/`

Each folder is a standalone Angular component with its own template and stylesheet.

<Tree>
  <Tree.Folder name="components" defaultOpen>
    <Tree.Folder name="cometchat-selector">
      <Tree.File name="Conversation / user / group selector" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-tabs">
      <Tree.File name="Bottom tab navigation" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-messages">
      <Tree.File name="Message list, header and composer" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-threaded-messages">
      <Tree.File name="Thread panel" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-user-details">
      <Tree.File name="User details panel" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-group-details">
      <Tree.File name="Group details panel" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-create-group">
      <Tree.File name="Group creation flow" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-join-group">
      <Tree.File name="Join group flow" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-add-members">
      <Tree.File name="Add members to groups" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-banned-members">
      <Tree.File name="Manage banned users" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-transfer-ownership">
      <Tree.File name="Transfer group ownership" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-call-log-details">
      <Tree.File name="Call history detail" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-new-chat">
      <Tree.File name="Start a new conversation" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-empty-state">
      <Tree.File name="Placeholder when nothing is selected" />
    </Tree.Folder>

    <Tree.Folder name="cometchat-toast-container">
      <Tree.File name="Transient notifications" />
    </Tree.Folder>
  </Tree.Folder>
</Tree>

### `app/pages/`

The application shell — only needed if you run the export as its own app. When you embed `<cometchat-app />`, the `home` page is the layout it renders; `login` and `credentials` are not used.

### `app/services/`

Shared state: which conversation is active, navigation between panels, authentication, and toasts.

### `app/i18n/`

Translation files for multi-language support. Add or modify JSON files here to customize text. See [Localization](/docs/ui-kit/angular/customization/localization).

***

## Quick Reference: Where to Customize

| What you want to change | Where to look |
| - | - |
| Enable/disable features | `app/config/cometchat-builder-settings.json` |
| Theme colors & fonts | `app/config/cometchat-builder-settings.json` (`style` block) |
| Component-specific CSS | `app/components/<name>/<name>.component.css` |
| Text & translations | `app/i18n/<lang>.json` |
| Component behavior | `app/components/<name>/<name>.component.ts` |
| Credentials | `src/environments/environment.ts` |
| Build config & assets | `angular.json` |

<Note>
  Prefer using settings and CSS variable overrides. For extensive changes, wrap the UI Kit components in your own rather than modifying these files directly — it keeps a future re-export from overwriting your work.
</Note>

***

## Further Reading

The export ships its own reference material under `project-info/`:

| File | Contents |
| - | - |
| `COMETCHAT_SETTINGS.md` | Every Builder setting, and what it controls |
| `FOLDER_STRUCTURE.md` | What lives where in this export |
| `SUPPORT.md` | Getting help |
| `SECURITY.md` | Reporting a vulnerability |
| `LICENSE.md` | Licence |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/docs/chat-builder/angular/builder-settings">
    Configure feature toggles and behavior
  </Card>

  <Card title="Customizations" href="/docs/chat-builder/angular/builder-customisations">
    Modify component inputs, styling, and behavior
  </Card>

  <Card title="Theming" href="/docs/ui-kit/angular/customization/theming">
    Customize colors, typography, and styling
  </Card>

  <Card title="Localization" href="/docs/ui-kit/angular/customization/localization">
    Add multi-language support
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.