AI Chat

Keep an operational conversation readable with streamed messages, retry actions, and response feedback.

Available in ngbootstrap 2.2.0. All examples below simulate responses locally; no model or network request is used.

Theme Fail next request

Queue investigation

Operations companion

Ready

You

Why does the queue show 18 orders but the daily report shows 16?

Companion

The queue includes two orders created after the report cutoff. Compare the same time window before investigating missing records. I can help you outline the checks or draft a note for the operations team.

Your request

Sample context: 18 queued orders · 16 in the daily report · Two arrived after cutoff

Core component binding. Task modes, document selection, source notes, and final output previews are application UI composed around these components.

      <ngb-ai-chat
  [messages]="messages()" [busy]="pending()" [error]="error()"
  (promptSubmit)="send($event)" (stop)="cancel()"
  (retry)="retryMessage($event)" (feedback)="saveFeedback($event)" />

No action yet.

When to use it

Help a support agent review order exceptions.
Build a conversational companion beside a data-heavy workspace.

Inputs and events

AI Chat public API
Member	Type	Behavior
`messages`	`readonly NgbAiMessage[]`	Stable unique IDs; user, assistant, or system role; plain-text content.
`status`	`complete \| streaming \| error`	Optional message property; replace messages immutably as chunks arrive.
`busy / disabled / error`	`boolean / boolean / string`	Controls and request lifecycle.
`label / userLabel / assistantLabel / emptyText`	`string`	Conversation and speaker labels.
`suggestions`	`readonly string[]`	Composer shortcuts.
`promptSubmit / stop / retry`	`string / void / string`	Request text, cancellation, or failed message ID.
`feedback`	`NgbAiFeedback`	Message ID and helpful, unhelpful, or null.

Use stable unique message, response, and field IDs. Update input arrays immutably for OnPush rendering. Model outputs render as plain text, including code and HTML; Markdown rendering and attachments are not part of this API.

Connect your backend

This request sketch belongs in your application service. Adapt its endpoint and response schema to your backend; it is not a built-in ngbootstrap endpoint. Set busy immediately, handle errors, and discard results from canceled or superseded requests.

      // Application-owned service call. Keep provider credentials on your server.
const controller = new AbortController();
const response = await fetch('/api/assistant', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt }),
  signal: controller.signal,
});
if (!response.ok) throw new Error('Request failed');
const result: unknown = await response.json();
// Validate result before updating the component's messages or responses.
// On Stop or destruction: controller.abort(); ignore stale request IDs.
// Set busy/error from your request lifecycle; the components do not fetch.

Keyboard and review behavior

Tab and Shift+Tab move between controls. Enter or Space activates buttons. Inputs have labels, actions show focus, and status or error changes are announced.

Use the labeled message composer and response action buttons. Keep message IDs stable as your application appends or streams responses.