A scrolling conversation with user and assistant bubbles, avatars, timestamps, a streaming last reply, a typing indicator and auto-scroll to the newest message.
Ada Lovelace: Did the staging deploy go through?
Relay Assistant: Yes. Build 482 is live on staging, all 3 checks passed.
npx shadcn@latest add https://hyperblur.dev/r/chat-thread.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chat-thread.tsx.
import { ChatThread } from "@/components/hyperblur/chat-thread"
<ChatThread messages={[{ id: "1", role: "user", content: "Hello" }, { id: "2", role: "assistant", content: "Hi, how can I help?" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| messages | { id: string; role: "user" | "assistant" | "system"; content: string; time?: string; streaming?: boolean }[] | [] | Messages in order. Content supports **bold**, `inline code` and newlines. Set streaming on the last assistant message to reveal it progressively. |
| userName | string | "You" | Name used for the user avatar initials. |
| assistantName | string | "Assistant" | Name used for the assistant avatar initials and typing label. |
| avatars | { user?: ReactNode; assistant?: ReactNode } | Custom avatar content. Defaults to initials. | |
| maxHeight | number | 360 | Maximum height in pixels before the thread scrolls. |
| typing | boolean | false | Show the assistant typing indicator after the last message. |
| color | string | "#2f7bff" | Accent color of user bubbles. |
| speed | number | 24 | Milliseconds per word for a streaming message. |