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.
Investigate with a conversation
Continue a seeded thread, ask a follow-up, and review a streamed answer.
Operations companion
ReadyWhy does the queue show 18 orders but the daily report shows 16?
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.
Sample context: 18 queued orders · 16 in the daily report · Two arrived after cutoff
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
| 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
Controls use native buttons, labeled inputs, visible focus indicators, and status or error announcements. Tab and Shift+Tab move between controls; Enter or Space activates native buttons. Busy prompts keep the input read-only and the Stop action reachable without replacing the action button. Prompt Box supports Enter to submit and Shift+Enter for a new line, while respecting text composition. Inline Prompt closes with Escape and returns focus to its trigger. Generated drafts have a named, keyboard-focusable scroll region. Inline and paste proposals announce when they are ready. Smart Paste uses ordinary paste into a textarea and requires explicit selection and application of proposed values.