@aichatbot-saas/angular

Native in-page Angular chat UI for the AIChatbot SaaS.

A real, themeable chat panel (<aichatbot>) that renders native DOM and talks to your backend's REST API directly — distinct from the floating drop-in chatbot.js bubble. It's a thin, standalone UI binding over the shared headless core (@aichatbot-saas/core): the core owns all behaviour (config load, greeting, starter suggestions, optimistic send flow, conversation persistence, feedback, error handling); this package just renders its state and wires events.

• Standalone component — no NgModule required (Angular 16+).
• OnPush change detection with markForCheck.
• SSR / Angular Universal friendly — no window/document access during construction.
• Styling comes entirely from the resolved theme via [ngStyle]; no global CSS leakage, no external UI libraries.

Install

npm i @aichatbot-saas/angular

This pulls in @aichatbot-saas/core automatically. Angular 16+ (@angular/core, @angular/common) is a peer dependency you already have in an Angular app.

Usage

Import the standalone AiChatbotComponent into a component's imports and place <aichatbot> inside a sized container (it fills its host):

import { Component } from '@angular/core';
import { AiChatbotComponent } from '@aichatbot-saas/angular';

@Component({
  selector: 'app-support',
  standalone: true,
  imports: [AiChatbotComponent],
  template: `
    <div style="width: 380px; height: 560px">
      <aichatbot apiKey="pk_live_xxx" apiUrl="https://api.you.com"></aichatbot>
    </div>
  `,
})
export class SupportComponent {}

Only apiKey is required. Bot name, greeting, suggestions, languages, and theme are fetched from the backend on init.

Inputs

| Input | Type | Required | Description | | ------------ | --------------------- | -------- | ------------------------------------------------------------------------ | | apiKey | string | ✅ | Publishable API key (pk_live_…). | | apiUrl | string | | Backend base URL (e.g. https://api.you.com). Defaults to same-origin. | | language | string | | Force a language. Otherwise config.languages[0], then "en". | | theme | Partial<ChatTheme> | | Local theme overrides (highest precedence). See below. | | sessionId | string | | Stable device/session id forwarded to the backend for threading. |

Theming

The backend config is normalized into a full ChatTheme. Override precedence: client theme input → backend config → built-in default. So you can force a token locally even if the backend says otherwise:

import { Component } from '@angular/core';
import { AiChatbotComponent, ChatTheme } from '@aichatbot-saas/angular';

@Component({
  selector: 'app-support',
  standalone: true,
  imports: [AiChatbotComponent],
  template: `
    <div style="width: 100%; height: 100%">
      <aichatbot apiKey="pk_live_xxx" [theme]="themeOverrides"></aichatbot>
    </div>
  `,
})
export class SupportComponent {
  themeOverrides: Partial<ChatTheme> = {
    primaryColor: '#16a34a',
    botBubbleColor: '#f0fdf4',
    bubbleRadius: 18,
  };
}

Available tokens: primaryColor, secondaryColor, onPrimaryColor, backgroundColor, surfaceColor, botBubbleColor, botBubbleTextColor, botBubbleBorderColor, userBubbleColor, userBubbleTextColor, mutedTextColor, bubbleRadius (px), inputRadius (px), fontFamily.

Embedding & SSR

<aichatbot> is inline and embeddable — drop it anywhere you can size a container (modal, sidebar, full-page support view). It does not position itself; the host app controls layout.

It is SSR / Angular Universal safe: the controller is created in ngOnInit and all network/storage I/O happens in lifecycle hooks, never during construction or render, so it won't touch window/document on the server. The initial render shows the panel shell; the conversation hydrates on the client.

Building

This is an Angular library packaged with ng-packagr:

npm run build

This emits a publishable package (with proper main/module/types/exports) into dist/.

License

MIT © 2026 AIChatbot