shadcn.io is not affiliated with official shadcn/ui
Research Chat AI Block for Vue
A research chat with a Sources pane beside the conversation: five typed sources count how often the thread cites them, pressing one marks the sentences that cite it, and numbered chips open a card about their source.
Installation
Overview
Show where every claim comes from, with this research chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Lenswright, a literature assistant: a Sources pane at the start and the conversation at the end. The pane lists five typed sources with their outlet, the day they were added and, worked out from the thread, how often they are cited ("Cited 2 times", "Not cited yet"). Pressing a source marks the sentences that cite it in the log. Each sentence ends with numbered chips; a chip is a Popover with a card about its source and a button that marks it too. An answer has a closed Collapsible with three lines of reasoning, and three follow-up chips above the composer send a question. Messages are Message and Bubble rows with a Typing Indicator Text, the composer is a Textarea with the Shine Button, the only colored control, and Send turns into Stop while an answer arrives. Guides draw the frame; everything moves with CSS only. For literature tools, research notebooks and any assistant that has to show its sources.
FAQ
What stays in the page, and how do I make it real?
Everything. The five sources, the answers, their sentences and the reasoning lines are constants in the file, and a reply is picked by words in your question ("cost", "health", "pavement"). Nothing is fetched, sent or generated, and the pane says so. To wire it for real, send the question and the source ids to your model where the code says so, stream its sentences back with the ids they cite, and keep the same Sentence shape: the pane's counts, the marks and the chips all follow from it.
How do I use my own sources?
Edit SOURCES at the top of the file: an id, a title, an outlet, the day it was added and a one-line note. The numbers on the chips are the order of that list, and the counts in the pane are worked out from the answers in the thread, so nothing is typed twice.
How does marking work, and can I use the keyboard?
Pressing a source (or the button in a chip's card) marks every sentence that cites it with a solid tint; pressing the same source again clears the marks, and the status line says how many sentences were marked. Everything is a real button: Tab reaches each source, each chip and each follow-up, and Enter or Space presses it. The card of a chip closes with Escape.
What does Stop do, and what about reduced motion?
While an answer arrives, the Send button is replaced by an outline Stop button in the same place. Stop keeps the sentences that arrived, marks the turn "Stopped" and gives it no reasoning row. With reduced motion the typing line still shows for its short wait and the whole answer then lands at once.