shadcn.io is not affiliated with official shadcn/ui
Message With Citations AI Block for Solid
An assistant answer with numbered source chips that open a small card, a source list that marks the sentences it supports, a count of how often each source is cited and a copy button that keeps the footnotes.
Installation
Overview
Show where an answer comes from, with this AI message with citations for Solid with Ark UI. A compact header names the product, a hairline frame with a plus mark on each corner holds one turn: your question in a secondary Bubble, then the assistant's answer as plain prose in three short paragraphs. Every sentence that rests on a source ends with numbered chips, each a button named "Source 2: title, outlet" that opens a Popover with the domain, the title and the snippet, and marks that source in the list below. A "Sources (4)" Collapsible holds the list; each row says "Cited 2 times", counted from the answer, and pressing a row tints the sentences that use it, so the link runs in both directions. Copy answer puts the text on the clipboard with its footnotes. It's built from Bubble, Message, Popover, Collapsible, Badge styles and Guides, with a CSS entrance only. For research assistants, support bots and any answer that has to be checked.
FAQ
What stays local, and how do I connect real sources?
Everything. The question, the answer, the four sources and their snippets are typed at the top of the file, and nothing is searched or sent. A status line says which source is chosen and how often it is cited. To make it real, return each sentence with the ids of the sources it used and each source with its title, outlet, domain and snippet; the chips, the counts and the copied text are all worked out from those two lists.
Where does each source's citation count come from?
It is counted from the answer, never typed: each source's count is the number of sentences whose list of sources includes it. Add a sentence or change its sources and the counts, the tint and the copied footnotes follow.
How does it work from the keyboard and a screen reader?
Each chip and each source is a real button. A chip is named for its source ("Source 2: When to cut, Journal of Farmland Ecology") and reports whether it is pressed; Enter or Space opens its card and Escape closes it. The source list is a list of buttons, the chosen row is marked as current, and a polite status line repeats the choice.