Suggestions

Ready-made prompts: cards on an empty chat, chips after a turn.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Stack, Suggestions, Text } from '@weft-js/warp'import type { Suggestion } from '@weft-js/warp'export function Starters() {  const picked = state<Suggestion | null>(null)  return (    <Stack gap="related">      <Suggestions items={STARTERS} onPick={s => (picked.value = s)} />      <Text role="caption" subtle>{picked.value ? `Sends: ${picked.value.title}` : 'Pick one to send it.'}</Text>    </Stack>  )}const STARTERS = [  { title: 'Why did my deploy fail?', description: 'Reads the last failed build' },  { title: 'Roll back mobile-bff', description: 'Asks before it changes anything' },  { title: 'What changed today?', description: 'Every deploy across your projects' },  { title: 'Which project costs the most?', description: 'From this month\'s usage' },]

Installation

npm install @weft-js/warp

Usage

tsx

import { Suggestions } from '@weft-js/warp'

Chips

For follow-ups, usually inside the Prompt.

tsx

import { Suggestions } from '@weft-js/warp'export function Chips() {  return (    <Suggestions items={CHIPS} variant="chips" />  )}const CHIPS = [{ title: 'Roll it back' }, { title: 'Show me the failing check' }]

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`items`	`Suggestion[]`	—	Each has a `title` and an optional `description`.
`variant`	`"cards" \| "chips"`	—	`cards` or `chips`.

Event	Type	Default	Description
`onPick`	`((s: Suggestion) => void)`	—	Pressing one. Usually sends it.

RelatedPrompt Conversation