shadcn.io is not affiliated with official shadcn/ui
Threaded Chat AI Block for Solid
Ask about one paragraph of an answer: each of four paragraphs has an Ask about this button that opens a side thread anchored to it, with the quoted paragraph, its own log and composer, and a count chip.
Installation
Overview
Let people dig into one part of an answer without losing the thread of the whole, with this threaded chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Sidequill, a reading assistant: the main log holds a four-paragraph answer about how a DNS lookup works, and each paragraph has an "Ask about this" icon Button, named with the paragraph's first words, that opens a thread at the end of the window. The thread shows the quoted paragraph on top, its own small log and a composer with two sample questions for that paragraph, answered from typed text after a typing line. A paragraph that has a thread shows a count chip, the thread's title says "Thread, 2 replies", and Close returns focus to the button that opened it. The main composer keeps the main conversation, with Message and Bubble rows and a Typing Indicator Text; its Shine Button is the only colored control, so the thread's send button is outline. Below the medium breakpoint an Answer and Thread switch shows one side at a time. Guides draw the frame, and everything moves with CSS only. For reading tools, research assistants and any answer long enough to question in parts.
FAQ
What stays in the page, and how do I make it real?
Everything. The answer, the two questions under each paragraph with their replies, and the main replies are typed in the file, and the threads live in state. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the quoted paragraph with the thread's question to your model where postSide runs, and keep each thread's messages with the paragraph's id.
How are thread questions answered?
By a word in your question: each sample question has a few keys, and the first paragraph entry that matches answers. Anything else gets one line saying the demo only knows the two questions under that paragraph, so pressing a chip always works. The chips send their own words as your message.
Do threads stay when I open another paragraph?
Yes. Each paragraph keeps its own messages, so switching back to one shows its earlier questions and replies, and the count chip on the paragraph follows the number of replies in its thread. The one seeded thread belongs to paragraph 2.
Where does focus go when I open and close a thread?
Opening moves focus to the thread's title; Close, and Back on a phone, return it to the Ask button of the paragraph. The pressed state of that button and a tint on the paragraph show which one the thread is about.