PromptSuggestions
prompt-suggestionsOffers clickable starter prompts or follow-up suggestions.
Usage
Basic usage
A string array is sufficient. Click to return the text (label or value).
<PromptSuggestions
suggestions={["Help me rewrite the homepage copy", "Explain this code", "Summary the main points", "Translate into English"]}
onSelect={(v) => fill(v)}
/>With title
title Add a line of weakened title above the pill list.
You can try
<PromptSuggestions
title="You can try"
suggestions={["Help me rewrite the homepage copy", "Explain this code", "Summary the key points"]}
onSelect={(v) => fill(v)}
/>Separation of display and postback
Use {label, value} to make the button text different from the content returned to the model.
<PromptSuggestions
suggestions={[
{ label: "📝 Rewrite the copy", value: "Please help me rewrite this homepage copy to make it more concise and powerful" },
{ label: "🌐 Translate into English", value: "Translate the above content into authentic English" },
]}
onSelect={(v) => send(v)}
/>When to Use
Used when giving a set of clickable guidance prompts pill (click to fill in the input box or directly initiate a conversation) above the dialogue input area. Different from MessageActions (for operations that have generated messages), this component is oriented to the guidance of "what to ask next"; click to return the value and the consumer side decides whether to fill or send it.
Import
import { PromptSuggestions } from "@hulianui/ui"Props
Inherits Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title">, additionally:
| Name | Type | Default | Description |
|---|---|---|---|
| suggestions* | Suggestion[] | — | Suggestion list |
Events
| Event | Type | Description |
|---|---|---|
| onSelect | (value: string) => void | Click a callback (pass back its value) |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Optional title (weakened above list) |
Suggestion: string (label is value) or { label: ReactNode; value?: string } (separate display copy and return value).
Usage Guidelines
onSelectandtitlehave been redefined from Omit in native HTMLAttributes - don't mistake them for native DOM event/attribute signatures.- For
{ label, value }items with a stringlabel, omittingvaluereturns that exact string fromonSelect. - For items with a non-string ReactNode
label, omittingvaluereturns the empty string"". Provide an explicitvaluewhenever the label is not a string.
Related
StreamingText · MessageActions · Citation · Conversation · ChatMessage · PromptInput