`<MessageList />`

Scrollable list of message bubbles. Auto-scrolls to the bottom on new messages and during streaming. Renders the in-flight assistant reply as a bubble with a pulsing cursor. Empty state has its own slot (title / subtitle / logo / "powered by" link).

Vanilla path uses the BEM classes directly. The dendrite-ui package handles autoscroll inside <alz-chat-widget>; a standalone alz-message-list element isn't shipped yet.

What does dendrite do?

Runs LLMs in the browser via WebGPU.

<script setup lang="ts">
import { MessageList } from '@agent-layer-zero/dendrite-vue'

const messages = [
  { role: 'user', content: 'What does dendrite do?' },
  { role: 'assistant', content: '…' },
]
</script>

<template>
  <MessageList
    :messages="messages"
    :streaming-content="streaming"
    :is-generating="true"
    empty-title="What's on your mind?"
    :render-markdown="renderMarkdown"
  />
</template>

import { MessageList } from '@agent-layer-zero/dendrite-react'

export function Demo() {
  return (
    <MessageList
      messages={messages}
      streamingContent={streaming}
      isGenerating
      emptyTitle="What's on your mind?"
      renderMarkdown={renderMarkdown}
    />
  )
}

<div class="alz-message-list">
  <div class="alz-message-list__inner">
    <div class="alz-message alz-message--user">
      <div class="alz-message__bubble alz-message__bubble--user">…</div>
    </div>
  </div>
</div>