Components / Message Scroller

Message Scroller

A transcript viewport that follows only by choice and preserves position when history is prepended.

Can we ship the registry update?

The verification suite is running.

All consumer builds passed.

Ready for review.

example.component.html

html

<aevko-message-scroller label="Project conversation">
  <aevko-message-scroller-item messageId="m1">
    First message
  </aevko-message-scroller-item>
  <aevko-message-scroller-item messageId="m2" [scrollAnchor]="true">
    Latest turn
  </aevko-message-scroller-item>
</aevko-message-scroller>

Installation

npx aevko-ui@latest add message-scroller --yes

Source ownership

Customization

Constrain the host height, compose any message rows and opt into live following explicitly. The component owns scroll behavior, not transport or message state.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`'Messages'`	Accessible name for the transcript region.
`autoScroll`	`boolean`	`false`	Follows growing content only while the reader stays at the live edge.
`preserveScrollOnPrepend`	`boolean`	`true`	Offsets prepended history so the visible content does not jump.
`messageId`	`string`	`required`	Stable address for each transcript item.
`scrollAnchor`	`boolean`	`false`	Marks a meaningful turn boundary.
`scrollToMessage`	`(id: string) => boolean`	`method`	Moves a mounted item to the viewport start.

Accessibility contract

Accessibility

Included behavior

The viewport is a labelled keyboard-focusable region and the transcript is a polite additions-only log.

Your responsibility

Use stable message ids, set aria-busy while a response streams and never enable following when it would override the reader’s position.

Back to all components