Suggestions Since v4.1.0

A scrolling row of prompt suggestions above the prompt input.

Suggestions is a recipe and adds no Core code. It is a row of small matButtons above the prompt input that scrolls sideways with faded edges when it does not fit. Picking one writes its text to the editor value and focuses the editor at the end, so the prompt can be edited before sending.

Example

The row carries a small padding with matching negative margins, so the scroll clip does not cut the button shadows.

<div>
  <div
    class="-mx-1 -mt-1 mb-1 scrollbar-none flex gap-2 overflow-x-auto overscroll-x-contain scroll-fade-x px-1 py-1"
  >
    @for (suggestion of suggestions; track suggestion) {
      <button
        matButton
        type="button"
        class="small shrink-0"
        (click)="suggest(suggestion, editor)"
      >
        {{ suggestion }}
      </button>
    }
  </div>
  <form buiPromptInput (ngSubmit)="send()">
    <div
      buiPromptInputEditor
      #editor="buiPromptInputEditor"
      placeholder="Ask anything"
      [(value)]="prompt"
    ></div>
    <button matIconButton class="primary" aria-label="Send">
      <mat-icon svgIcon="corner-down-left" />
    </button>
  </form>
</div>

import { BuiPromptInputEditor } from '@/bui/ui/prompt-input';

readonly prompt = signal('');

suggest(suggestion: string, editor: BuiPromptInputEditor) {
  this.prompt.set(suggestion);
  editor.editor?.commands.focus('end');
}

Outlined

Tertiary buttons with a border give a lighter row, outlined without a shadow.

<button
  matButton
  type="button"
  class="tertiary small shrink-0 border border-neutral-a4"
  (click)="suggest(suggestion, editor)"
>
  {{ suggestion }}
</button>

Data

The row renders a list of strings. Fetch them per context, such as the current page or the last reply, and hide the row once the conversation has started if they only serve as starters.

readonly suggestions: string[] = [
  'Summarize overdue invoices',
  'Draft a payment reminder',
  'Which clients pay late?',
  'Forecast cash flow for next quarter',
];