MessageThread

The scrolling log of a chat. It keeps the newest message in view, offers a jump button when you scroll up, and shows who is writing. Pick it for any back-and-forth with a person or an agent.

MessageThread

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, MessageThread

Why does the build fail on CI but not on my machine?

DoneRead .github/workflows/ci.yml

DoneRun npm ci

Claude Code

CI runs Node 22, and the project needs Node 26. Set it in the workflow:

- uses: actions/setup-node@v4
  with:
    node-version: 26

Dark theme, MessageThread

Why does the build fail on CI but not on my machine?

DoneRead .github/workflows/ci.yml

DoneRun npm ci

Claude Code

CI runs Node 22, and the project needs Node 26. Set it in the workflow:

- uses: actions/setup-node@v4
  with:
    node-version: 26

High contrast theme, MessageThread

Why does the build fail on CI but not on my machine?

DoneRead .github/workflows/ci.yml

DoneRun npm ci

Claude Code

CI runs Node 22, and the project needs Node 26. Set it in the workflow:

- uses: actions/setup-node@v4
  with:
    node-version: 26

UsageLink to the section Usage

tsx

import { MessageThread } from '@skribly/ui/conversation'

tsx

<MessageThread label="Chat with Claude Code" jumpLabel="Jump to the newest message" isBusy={busy} busyLabel="Claude Code is writing">
  {messages.map((m) => <MessageBubble key={m.id} from={m.from} author={m.author}>{m.text}</MessageBubble>)}
</MessageThread>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A named log in the tab order, so arrow keys scroll it.
While a reply streams, aria-busy holds the announcement until the reply is complete.
The writing state is a polite status.
The jump button moves focus back to the log.

This demo runs through axe in all three themes on every test run. See what the tests check.