Message List

Core component

<loquix-message-list> owns the scrollable message history. It follows new content until the reader scrolls away and can reveal a return-to-bottom control.

loquix-message-listauto-scrollslot-based

Preview

Scrollable conversation Live component

How should I structure a chat timeline?

Keep messages composable, let the list own scrolling, and preserve stable message IDs for navigation.

That keeps the responsibilities nicely separated.

Usage

import '@loquix/core/define/define-message-list';
import '@loquix/core/define/define-message-item';

<loquix-message-list auto-scroll show-scroll-anchor>
  <loquix-message-item
    sender="assistant"
    status="complete"
    message-id="msg_42"
  >
    Your message content
  </loquix-message-item>
</loquix-message-list>

Properties

Property	Attribute	Type	Default	Description
`autoScroll`	`auto-scroll`	`boolean`	`true`	Follows new content while the reader remains at the bottom.
`virtualize`	`virtualize`	`boolean`	`false`	Reserved for virtual scrolling; currently a no-op.
`showTimestamps`	`show-timestamps`	`boolean`	`false`	Exposes the list-level timestamp preference.
`showScrollAnchor`	`show-scroll-anchor`	`boolean`	`true`	Shows a return-to-bottom button after scrolling away.
`scrollOnSend`	`scroll-on-send`	`boolean`	`true`	Scrolls to the bottom when a `loquix-submit` event is detected.

Events

Event	Detail	When it fires
`loquix-scroll-bottom`	`{}`	The scroll position reaches the bottom.
`loquix-scroll-away`	`{ scrollTop: number }`	The reader moves away from the bottom.

list.addEventListener('loquix-scroll-away', (event) => {
  console.log('Reader position:', event.detail.scrollTop);
});

Methods

Method	Description
`scrollToBottom(behavior?)`	Scrolls to the newest content. Accepts a `ScrollBehavior` and defaults to `'smooth'`.
`scrollToMessage(messageId)`	Finds a slotted element by `message-id`, scrolls to it, and returns whether it was found.

Slots

Slot	Purpose
default	Message elements.
`empty-state`	Content displayed when there are no messages.
`loading`	Loading content shown above the message slot.

CSS parts

Part	Purpose
`list`	Outer list wrapper.
`scroll-container`	Inner scrolling region.
`scroll-anchor`	Return-to-bottom control.

CSS custom properties

Variable	Purpose
`--loquix-message-gap`	Gap between messages.
`--loquix-message-list-bg`	Message list background.
`--loquix-message-list-padding`	Padding inside the scrolling region.