ChatPopupComponent

ChatPopupComponent is a composition that renders a floating launcher button in the bottom-right corner of the screen. Clicking the launcher opens a chat window as an overlay. The window can be toggled open and closed without destroying conversation state.

Selector: chat-popup

Import:

import { ChatPopupComponent } from '@ngaf/chat';

When to Use It

Use ChatPopupComponent when you want an unobtrusive chat entry point that does not occupy permanent screen real estate. The popup stays out of the way until the user chooses to engage, making it ideal for support chat, contextual help, and assistant features embedded in existing applications.

If you need the chat to always be visible, use <chat> (embedded) instead. If you need a slide-in panel alongside your app content, use <chat-sidebar>.

Basic Usage

import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { agent } from '@ngaf/langgraph';
import { ChatPopupComponent } from '@ngaf/chat';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChatPopupComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- your app content here -->
    <chat-popup [agent]="chatAgent" />
  `,
})
export class AppComponent {
  protected readonly chatAgent = agent({
    assistantId: 'chat_agent',
    threadId: signal(null),
  });
}

Place at the root level

ChatPopupComponent uses position: fixed internally. Place it as a direct child of your root component or app shell so it is not clipped by a parent with overflow: hidden.

API

Inputs

Input	Type	Default	Description
`agent`	`Agent`	Required	The agent providing streaming state
`open`	`boolean`	`false`	Two-way bindable. Controls whether the chat window is open

Outputs

Output	Type	Description
`openChange`	`boolean`	Emits when the window opens or closes. Use with `[(open)]` for two-way binding

Slots

Slot	Selector	Description
Header content	`[chatHeader]`	Projected into the chat window header bar. Replaces the default title

Methods

Method	Description
`toggle()`	Toggles the window between open and closed
`openWindow()`	Opens the chat window
`closeWindow()`	Closes the chat window

Two-Way Binding

Control the open state from your component:

@Component({
  template: `
    <button (click)="popup.openWindow()">Open Chat</button>
    <chat-popup [(open)]="chatOpen" [agent]="chatAgent" #popup />
  `,
})
export class AppComponent {
  chatOpen = false;
  chatAgent = agent({ assistantId: 'chat_agent', threadId: signal(null) });
}

Custom Header

Project content into the window header with the [chatHeader] slot:

<chat-popup [agent]="chatAgent">
  <span chatHeader>Support Chat</span>
</chat-popup>

Styling

The popup uses the standard --ngaf-chat-* token system. To adjust the launcher position:

chat-popup {
  --ngaf-chat-launcher-offset-x: 1.5rem;
  --ngaf-chat-launcher-offset-y: 1.5rem;
}

See Theming for the full token reference.