UI Kit Builder Integration

import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
import { builderSettings, SettingsService, ThemeStylesService } from './config';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAppInitializer(() => {
      inject(SettingsService).applySettings(builderSettings);
      // Writes the Builder's colours and typography out as CSS variables. Nothing
      // else injects it, so without this line it is never constructed.
      inject(ThemeStylesService);
    }),
    // ...your own providers
  ],
};

import { bootstrapApplication } from '@angular/platform-browser';
import { CometChatLocalize, CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { sampleAppTranslations } from './app/i18n';
import { environment } from './environments/environment';

const settings = new UIKitSettingsBuilder()
  .setAppId(environment.appId)
  .setRegion(environment.region)
  .setAuthKey(environment.authKey)
  .subscribePresenceForAllUsers()
  .setCallingEnabled(true)
  .build();

// init() returns undefined, not a rejected promise, when no app ID is set.
// Turn that into a rejection so the chain below still bootstraps.
(CometChatUIKit.init(settings) ?? Promise.reject(new Error('CometChat app ID is not set')))
  .then(() => CometChatUIKit.login('YOUR_UID'))
  .then(() => {
    // The copied components use keys the UI Kit does not ship (for example
    // create_group_title). Without this the UI shows raw keys.
    CometChatLocalize.addTranslation(sampleAppTranslations);
  })
  .catch((err) => console.error('CometChat init failed:', err))
  // Bootstrap either way, so a failed init or login doesn't blank the whole host app.
  .finally(() => bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)));

(CometChatUIKit.init(settings) ?? Promise.reject(new Error('CometChat app ID is not set')))
  .then(() => CometChatUIKit.getLoggedinUser())
  .then((user) => user ?? CometChatUIKit.login('YOUR_UID'))
  .then(() => CometChatLocalize.addTranslation(sampleAppTranslations))
  .catch((err) => console.error('CometChat init failed:', err))
  .finally(() => bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)));

import { Component } from '@angular/core';
import { CometChatAppComponent } from './cometchat-app.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CometChatAppComponent],
  template: `
    <div class="chat-container">
      <cometchat-app />
    </div>
  `,
  styles: [`.chat-container { height: 100vh; }`],
})
export class AppComponent {}