ChatSuggestions
ChatSuggestions presents suggested prompts as native buttons and sends the selected string to the parent.
01Preview
02Usage
Load @dg/ui/styles.css once in the root layout.
<script>
import { ChatSuggestions } from "@dg/ui";
let selected = $state("");
</script>
<ChatSuggestions suggestions={["Show the archive", "About the project"]} onselect={(text) => (selected = text)} /><p class="feedback" aria-live="polite">{selected}</p>
03Notes
- Native HTML attributes, DOM callbacks, class and style are forwarded to the suggestion group.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Suggestions use
type="button"and never submit an enclosing form.
04Parameters
| Name | Type | Default | Description |
|---|---|---|---|
suggestions | string[] | [] | One suggestion button per string, in array order. |
onselect | (text: string) => void | undefined | Receives the selected string directly, without a CustomEvent wrapper. |
05Accessibility
Each suggestion supplies its own button name. Enter and Space activate. This component has no disabled prop; hide it or guard the parent handler while requests are unavailable.