Prompt Box

Collect clear instructions with suggestions, keyboard submission, length limits, and cancellation.

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

Theme Fail next request

WORKSPACE / OPERATIONS CONSOLE

What should we work on?

Turn a rough idea into a focused development task.

queue-workbenchLocal simulation

Task instruction

Enter starts the task · Shift+Enter adds a line

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

      <ngb-prompt-box
  [(value)]="instruction" [busy]="pending()"
  [suggestions]="suggestions" [maxLength]="2000"
  (promptSubmit)="submit($event)" (stop)="cancel()" />

No action yet.

When to use it

Ask an operational question without opening a conversation.
Collect a report-generation instruction or search request.

Working with component data

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.

Enter submits and Shift+Enter adds a line. Text composition does not submit early. While busy, the input is read-only and Stop remains reachable.