CopilotPopup

CopilotPopup renders a floating launcher and responsive chat dialog. It is a standalone, OnPush component with the selector copilot-popup.

import { Component, signal } from "@angular/core";
import { CopilotPopup } from "@copilotkit/angular";

@Component({
  imports: [CopilotPopup],
  template: `
    <copilot-popup
      [(open)]="open"
      title="Support assistant"
      [width]="420"
      [height]="560"
      [clickOutsideToClose]="false"
    />
  `,
})
export class SupportAssistant {
  readonly open = signal(false);
}

Inputs and model

Name	Type	Default	Behavior
`open`	`ModelSignal<boolean>`	`true`	Two-way bindable open state
`title`	`string`	`"Copilot"`	Accessible dialog name and default header text
`width`	`number \| string`	`420`	Pixel number or CSS dimension
`height`	`number \| string`	`560`	Pixel number or CSS dimension
`clickOutsideToClose`	`boolean`	`false`	Opts into backdrop-click closing
`chatComponent`	`Type<unknown>`	`CopilotChat`	Replacement chat body component
`headerComponent`	`Type<unknown> \| undefined`	`undefined`	Replacement header component

The dialog traps focus, moves initial focus to its close control, closes on Escape, and restores focus to the launcher. It becomes full-screen on compact viewports and disables its entrance animation when reduced motion is requested. Destroying the component removes its rendered dialog and Angular CDK focus-trap state. Browser focus work starts after rendering and is inert during SSR; keep the initial open value unchanged until hydration completes.