# ChatSuggestions

`ChatSuggestions` presents suggested prompts as native buttons and sends the selected string to the parent.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<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>
```

## Notes

- 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.

## Parameters

| 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. |

## Accessibility

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.