Component reference

ChatMessageList

The ordered messages of a conversation, announced as a log.

Preview

Row spacing and continuation

The list column declares the row pitch and each row reads it, so layout-neutral wrappers inserted when mounting row by row do not change the result. A user message starts a new round, a continuation answer sits close to the previous one, and a tool row sits close to the work it reports.

packages/meowtail/stories/chat-message.stories.tsxline 463tsx

render: () => (
  <Measure>
    <Stack>
      <ChatFrame>
        <ChatMessageList ariaLabel="Message list with direct children">
          <ChatMessageListContent>{rows(false)}</ChatMessageListContent>
        </ChatMessageList>
      </ChatFrame>
      <ChatFrame>
        <ChatMessageList ariaLabel="Message list mounted row by row">
          <ChatMessageListContent>{rows(true)}</ChatMessageListContent>
        </ChatMessageList>
      </ChatFrame>
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ChatMessageList } from "meowtail";

<ChatMessageList ariaLabel="Message list with direct children">
  <ChatMessageListContent>{rows(false)}</ChatMessageListContent>
</ChatMessageList>

API reference

Props

Prop	Type	Default
`ariaLabel`	`string`	`"Message log"`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootcontentitemdate

Registry

The component is registered as chat-message-list in the meowtail component registry.