# Suggestions
Source: https://ui.spencerwueste.com/docs/components/suggestions
Markdown: https://ui.spencerwueste.com/llm/components/suggestions.md

> Prompt suggestion chips and a dismissible suggestions panel.

> Live preview: https://ui.spencerwueste.com/docs/components/suggestions (demo source: `src/demos/suggestions-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/suggestions.json
```

Manual install dependencies: `radix-ui @radix-ui/react-presence class-variance-authority`

Registry JSON: https://ui.spencerwueste.com/r/suggestions.json

## Usage

```tsx
import {
  Suggestion,
  SuggestionList,
  Suggestions,
} from "@/components/pandacoderz-ui/suggestions";
```

```tsx
<Suggestions onSelect={(text) => send(text)}>
  <SuggestionList>
    <Suggestion>Summarize this document</Suggestion>
    <Suggestion highlight="email">Draft a launch email</Suggestion>
  </SuggestionList>
</Suggestions>
```

Use `SuggestionPanel` for a panel that sits above the prompt input and can be dismissed with Escape or its close button.

## API Reference

### Suggestions

| Prop | Type | Description |
| --- | --- | --- |
| `onSelect` | `(value: string) => void` | Called with the suggestion's `value` or text. |

### Suggestion

| Prop | Type | Description |
| --- | --- | --- |
| `variant` | `"filled" \| "outline" \| "ghost"` | Visual style. Default `filled`. |
| `value` | `string` | Value passed to `onSelect`. Defaults to the text content. |
| `highlight` | `string \| string[]` | Terms to render de-emphasized inside the label. |

### SuggestionPanel

| Prop | Type | Description |
| --- | --- | --- |
| `open` | `boolean` | Controlled open state. |
| `onOpenChange` | `(open: boolean) => void` | Called on close requests. |
| `onClose` | `() => void` | Called after the exit animation finishes. |