Answer Card

Ответ с источниками в стиле Perplexity. Pro · ИИ: чат и агенты › Ответы и артефакты

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add answer-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { AnswerCard } from 'valyro-ui-pro';

Prop	Type	Default
`query` *	`string`		The question, shown as the heading.
`answer` *	`string`		Markdown answer with `[1]`-style citations; grows while streaming (unfinished markup is closed on the fly).
`streaming`	`boolean`	`false`	The answer is still being written.
`sources`	`CitationSource[]`	`[]`	Sources the citations point to, numbered from 1. Placeholder cards show while streaming without any.
`images`	`AnswerCardImage[]`	`[]`	Related image thumbnails in their own section; one with `href` opens it in a new tab.
`related`	`string[]`	`[]`	Suggested follow-up questions.
`onRelatedSelect`	`(question: string) => void`		Called with the question when a related suggestion is clicked. Suggestions are hidden while streaming.
`onFollowUp`	`(question: string) => void`		Shows a follow-up field; called with the question.
`onRegenerate`	`() => void`		Adds a Rewrite action.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5`	`2`	Heading level of the query (the section titles are one below). Default 2.
`mark`	`ReactNode`		The tile beside "Answer": the assistant's logo or avatar. Default: a monogram of `labels.assistant`.
`locale`	`string`		BCP 47 locale for source dates; defaults to the ThemeProvider's.
`labels`	`Partial<AnswerCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.