ThreadPage
StableA full answer with the assistant's thinking, the steps it took, sources and feedback.
Also known as chat page, conversation page
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Full page
Maya Okafor
Product team
Why sales grew last quarter
AI can make mistakes. Check important information.
<ThreadPage />The reply is written when the page loads. Press Stop to interrupt it, or send a message to start another.
When to use it
A worked example of one full answer: thinking, a step the assistant took, the reply as it is written, then sources and feedback. The extras wait until the reply ends, so the page does not jump.
Made of: Side panel · Title · Your message · Thinking section · Card for a step the assistant took · The reply, as it is written · How sure the assistant is · Sources · Message actions · Feedback bar · Suggestion chips · Message box · AI notice
Use it for
- A starting point for a research or question-and-answer screen.
- Seeing the order of thinking, steps, answer, sources and feedback.
- Seeing how Stop, streaming text and follow-up suggestions work together.
Not for
- A long task with approvals and steps: use WorkflowPage.
- A tool that makes images or drafts: use StudioPage.
Do and avoid
Do
- Copy the order: thinking, steps taken, answer, then how sure it is, sources and actions.
- Show the extras only when the reply is finished.
- Put source numbers in the reply so they link to the source cards.
- Show follow-up suggestions after the last reply, and hide them while a reply is being written.
Avoid
- Do not show feedback or actions while the reply is still being written.
- Do not put the message box inside the scrolling conversation. ThreadTemplate keeps it at the bottom.
- Do not use the sample reply in your real product. Swap in your own.
On a phone
- The sidebar opens from a Menu button in a side sheet on a phone, and the page shows the conversation.
- Messages, sources and the composer fit one column, and the composer stays at the bottom while the messages scroll.
- The page is 45rem tall at most and never taller than the phone screen height. The composer area clears the bottom safe area.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| (none) | - | none | This page takes no props. It is a reference composition with sample content, meant to be copied and adapted. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- streaming
- Sending a message streams the reply, shows Stop on the composer and holds back sources and feedback until it finishes.
Tokens
Change one of these and every part that uses it follows.
--surface-sunken (user bubble)--lime--success (confidence)--border
Built in
- New messages are read out politely. The reply being written is marked busy, then says "Response complete" once.
- The blinking cursor is hidden from screen readers.
- Before words arrive, the typing indicator is read as "Assistant is thinking".
- Sources are a numbered list of links, and the [1] markers in the reply link to them.
- Stop replaces Send while the reply is written, and works from the keyboard.
What you need to do
- Keep streaming on the reply in step with your real stream, and turn it off when it ends.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide