Suggestion
A suggestion is a one-line strip above a composer. It offers a reply, holds one action, and opens to the full text without moving the conversation.
Suggested reply
Press the chevron to open the full text. Dismiss hides it for this suggestion only; a new one appears fresh.
Thanks for the details. Clearing the export cache usually fixes this, and I can do it for you now. Reply here if you would rather I leave it.
Show code
<KbSuggestion label="Suggested reply" text={line} expanded={open} onToggle={…} onDismiss={…} moreId="more" primary={<KbButton size="sm">Insert</KbButton>}>…</KbSuggestion>Needs a person
When KiBee can't answer, the outline turns brand and the action becomes Take over.
Thanks for the details. Clearing the export cache usually fixes this, and I can do it for you now. Reply here if you would rather I leave it.
Show code
<KbSuggestion attention label="KiBee needs a teammate" … primary={<KbButton size="sm">Take over</KbButton>} />When to use
- Use it above a composer when the system can offer a reply or ask for a person.
- Keep the strip to one line: mark, label, text and one action.
- Remember whether the person left it open, and never pre-dismiss a new suggestion.
- Hide it when it can't help: the request is resolved, or a teammate is already driving.
Thanks for the details. Clearing the export cache usually fixes this, and I can do it for you now. Reply here if you would rather I leave it.
Import
import { KbSuggestion } from "@/components/ui/KbSuggestion";
<KbSuggestion label="Suggested reply" text={line} expanded={open} onToggle={toggle} onDismiss={dismiss} moreId="more" primary={<KbButton size="sm">Insert</KbButton>}>{full}</KbSuggestion>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | What this is: Suggested reply. |
text | string | None | The suggestion on one line; the full text is the tooltip. |
primary | ReactNode | None | The one action worth a button on the line. |
expanded | boolean | None | Whether the body is open. |
onToggle | () => void | None | Opens or closes the body. |
onDismiss | () => void | None | Hides this suggestion. |
attention | boolean | false | Brand outline when a person is needed. |
moreId | string | None | id of the body; links the toggle to it. |
mark | ReactNode | None | A small decorative image at the start. |
children | ReactNode | None | The full suggestion; without it there is no toggle. |
Keyboard and screen readers
- The toggle is an icon button named Show full suggestion or Hide full suggestion, with aria-expanded and aria-controls.
- While closed, the body is visibility hidden, so keyboard and screen reader users can't reach hidden controls.
- The opening animates with transitions that reduced motion turns off.
- Dismiss is a named button. Focus stays in the composer area.