Conversation

The scrolling part of a chat with an AI assistant: it follows the newest message while it streams, inside a panel that keeps its height.

$ pnpm dlx shadcn@latest add https://dashral.com/r/conversation.json

Dashboard assistant

Ask about revenue, customers or traffic.

What would you like to know?

The assistant reads your dashboards: sales, customers, invoices and traffic.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/conversation.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/conversation

Usage

example.tsx

1import { Message } from "@/components/dashral/message"
2import { Conversation } from "@/components/dashral/conversation"
3
4<Conversation className="h-96">
5  <Message from="user">What were sales yesterday?</Message>
6  <Message from="assistant">$12,480 across 96 orders.</Message>
7</Conversation>

Examples

A long conversation

Opens at the newest message; scroll up to read and Jump to latest takes you back.

Which plan sold best last quarter?

Team: 212 sales, 41% of the quarter's revenue. Personal sold more copies (486) but at a lower price.

And this quarter so far?

Team again, with 88 sales in three weeks: on pace for about 250 by the end of the quarter.

Where do Team buyers come from?

Mostly search (38%) and the docs (27%). Agencies make up two in three of them, judging by their company domains.

How many asked for a refund?

Four of 212, under 2%. Three said the product didn't fit their stack; one bought the wrong plan and upgraded instead.

What should we try next to grow Team?

Two ideas from the numbers: a page for agencies (they're two thirds of Team buyers and none of the pages speaks to them), and a yearly reminder to Personal buyers who invited a second developer, since that's when most upgrades happen.

API reference

Conversation

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`children`	`ReactNode` The messages, oldest first: Message, or your own.	—
`empty`	`{ icon?, title?, description?, actions? } \| ReactNode` What fills the middle while there are no messages: EmptyState's props, or your own content.	—
`stickToBottom`	`boolean` Follow the newest message until the reader scrolls up; a message from you brings the bottom back.	`true`
`fade`	`number` How far the top and bottom edges fade while there's more to scroll that way, in px.	`32`
`scrollbar`	`boolean` Show the scrollbar as well as the fade.	`false`
`aria-label`	`string` Names the log.	`"Conversation"`
`classNames`	`{ viewport?, content?, jump? }` Classes for the scroll area, the list inside it and Jump to latest.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Focus the conversation, to scroll it
`↑ ↓`or`Page Up`or`Page Down`	Scroll
`Enter`or`Space`	On Jump to latest: back to the newest message

Accessibility

The messages are a log (role="log"), so screen readers announce new ones politely; a streaming Message holds its words back until it's whole.
The scroll area takes focus when nothing inside does, so it scrolls with the keyboard; the hidden scrollbar doesn't stop wheel, trackpad, touch or keys.
Jump to latest is a named button, there only while you're away from the bottom.

Motion

Jump to latest scrolls smoothly, and jumps with reduced motion; following a stream never animates. The button fades and scales in over --duration-fast.