Configuration

@ngaf/chat uses Angular's dependency injection system for shared configuration. The provideChat() function registers a ChatConfig object under the CHAT_CONFIG injection token and starts the package license check.

#provideChat()

Call provideChat() in your application's provider array when your application or wrappers need to inject shared chat configuration.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideChat } from '@ngaf/chat';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideChat({
      avatarLabel: 'AI',
      assistantName: 'My Assistant',
    }),
  ],
};

Signature:

function provideChat(config: ChatConfig): EnvironmentProviders

provideChat() returns EnvironmentProviders (via makeEnvironmentProviders), so it works with bootstrapApplication, ApplicationConfig, or route-level providers.

#ChatConfig Interface

import type { AngularRegistry } from '@ngaf/render';
 
interface ChatConfig {
  /** Default render registry for consumers that read CHAT_CONFIG. */
  renderRegistry?: AngularRegistry;
 
  /** Override the default AI avatar label (default: "A"). */
  avatarLabel?: string;
 
  /** Override the default assistant display name (default: "Assistant"). */
  assistantName?: string;
 
  /** Signed license token from threadplane.ai. Optional in development. */
  license?: string;
}

#Options

OptionTypeDefaultDescription
renderRegistryAngularRegistryundefinedStored on CHAT_CONFIG for consumers that want a shared render registry. Pass [views] directly to ChatComponent for built-in generative UI rendering.
avatarLabelstring"A"Single character or short string for consumers that inject CHAT_CONFIG.
assistantNamestring"Assistant"Display name for consumers that inject CHAT_CONFIG.
licensestringundefinedSigned license token used by the package license check.

#CHAT_CONFIG Injection Token

The CHAT_CONFIG token is an InjectionToken<ChatConfig> that you can inject directly in any component or service:

import { inject } from '@angular/core';
import { CHAT_CONFIG } from '@ngaf/chat';
import type { ChatConfig } from '@ngaf/chat';
 
@Component({ /* ... */ })
export class MyComponent {
  private config = inject(CHAT_CONFIG);
 
  get avatarText(): string {
    return this.config.avatarLabel ?? 'A';
  }
}
Optional injection

If provideChat() has not been called, injecting CHAT_CONFIG will throw. Use inject(CHAT_CONFIG, { optional: true }) if your component needs to work with or without global configuration.

#Per-Route Configuration

Because provideChat() returns EnvironmentProviders, you can provide different configurations at the route level:

// app.routes.ts
import { provideChat } from '@ngaf/chat';
 
export const routes: Routes = [
  {
    path: 'support',
    loadComponent: () => import('./support-chat.component'),
    providers: [
      provideChat({
        assistantName: 'Support Bot',
        avatarLabel: 'S',
      }),
    ],
  },
  {
    path: 'code',
    loadComponent: () => import('./code-chat.component'),
    providers: [
      provideChat({
        assistantName: 'Code Assistant',
        avatarLabel: 'C',
        renderRegistry: codeRegistry,
      }),
    ],
  },
];

#Using Configuration Without provideChat()

All composition components use sensible defaults. If you do not call provideChat(), components will:

  • Use "A" as the avatar label
  • Use "Assistant" as the assistant name
  • Have no injected CHAT_CONFIG

This means you can use ChatComponent, ChatInputComponent, and all other components without global configuration for basic chat functionality. Generative UI is controlled by the ChatComponent [views], [store], and [handlers] inputs.