Live answer
Answers that stream in with numbered sources and next steps.
A live answer is a question and the reply that streams in beneath it, word by word. A [1] after a
word turns into a numbered citation you can hover or pin, which lights up its entry in the sources
list. Each turn moves through waiting, thinking, answering and done; once it is done it
gains the copy, rate and retry actions, the sources toggle and — on the last turn — the suggested
followUps. Picking a follow-up adds a new turn below, so the thread grows instead of being replaced.
Usage
<!-- include core.css + live-answer.css -->
<div class="lva">
<div class="lva-q"><div class="bub">Where are people dropping off in onboarding?</div></div>
<div class="lva-a">
<div class="lva-turn">
<p class="lva-p">Most people leave at the workspace step <span class="cite">1</span>.</p>
<!-- actions, sources and follow-ups are added by live-answer.js as the turn finishes -->
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
turns | AnswerTurn[] | The thread: a question and its answer, newest last. |
followUps | string[] | Suggested next questions, shown under the last answer once it is done. |
onFollowUp | (question) => void | Called when a follow-up is picked. |
onRetry | (index) => void | Adds a Try again button under each answer; called with the turn's index. |
onRate | (index, rating) => void | Called when an answer is rated good, bad or back to null. |
onCopy | (index, text) => void | Called after an answer is copied, with its text without the citations. |
onSourceClick | (source) => void | Called when a source in the list is clicked, besides pinning it. |
turn.state | waiting | thinking | answering | done | waiting shows nothing, thinking the Thinking line, answering streams the text, done adds sources and actions. |
turn.text | string | The answer so far. [1] after a word cites source 1; a blank line starts a new paragraph. |
turn.thoughts | string[] | What the agent did before it answered, under a toggle that counts them. |
turn.sources | AnswerSource[] | The sources, each with its number n, title, detail, badge mark and color. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
answer text, the question bubble, the citation chips and the sources list all draw from the theme
tokens, so an active citation and its source row share the one accent tint; in Soft the chips and
follow-up buttons are rounder.