Mischief

11 / Agent UI

Message

One turn in a thread, with a role, an optional avatar and timestamp, and actions that stay reachable without a pointer.

Live previewSource

You

Can you check the migration before I merge it?
2:14 PM

Assistant

The index is created before the backfill runs, so any row still holding a null email will collide. Reordering the two statements fixes it.
2:14 PM

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Turn() {
  return (
    <Message role="assistant" avatar="M" timestamp="just now">
      <StreamingText source={reply} />
    </Message>
  )
}

API

role"user" | "assistant" | "system"Who is speaking. Sets the layout and the announced name.
nameReactNodeOverrides the name read out for the role.
avatarReactNodeA decorative avatar beside the turn.
timestampReactNodeShown under the body.
actionsReactNodeControls such as copy or regenerate.
pendingbooleanMarks the turn busy while it is still arriving.

Accessibility

Each turn is an article naming its speaker, so a thread can be navigated turn by turn instead of read as one block. Actions are hidden with opacity rather than display, which keeps them focusable by keyboard and reveals them on focus as well as hover; on touch, where there is no hover, they stay visible. A turn still arriving reports aria-busy.

Dependencies