Conversation Thread

A scrollable message thread that renders user and assistant messages. Supports an animated thinking indicator while the assistant is generating a response, and accepts a custom message renderer for full control over individual message appearance.

You2:40 PM

What is React?

AI2:40 PM

React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small, isolated pieces of code called components.

import { ConversationThread } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add conversation-thread

Import

import.tsx

import { ConversationThread } from "@aetherstack/patterns"

Usage

conversation-thread.tsx

import * as React from "react"
import { ConversationThread } from "@aetherstack/patterns"
import type { Message } from "@aetherstack/patterns"

const messages: Message[] = [
  {
    id: "1",
    role: "user",
    content: "What is React?",
    name: "You",
    timestamp: "2:40 PM",
  },
  {
    id: "2",
    role: "assistant",
    content: "React is a JavaScript library for building user interfaces.",
    name: "AI",
    timestamp: "2:40 PM",
  },
]

export function MyThread() {
  const [isThinking, setIsThinking] = React.useState(false)
  return (
    <ConversationThread messages={messages} isThinking={isThinking} />
  )
}

Props

Prop	Type	Default	Description
messages*	Message[]	—	Array of message objects to display in the thread.
isThinking	boolean	false	Shows an animated thinking indicator after the last message.
renderMessage	(msg: Message) => ReactNode	—	Custom renderer for individual message bubbles.
className	string	—	Additional CSS classes applied to the thread container.

* Required

Accessibility

→Messages are rendered as an ordered list so screen readers announce count and position.
→The thinking indicator uses aria-live='polite' to announce state changes without interrupting reading.
→Timestamps are wrapped in <time> elements with machine-readable datetime attributes.
→Avatar images include descriptive alt text derived from the message sender's name.