`<MessageBubble />`

A single chat-message bubble. User messages render with the --alz-user-bubble background and a flat-corner tail; assistant messages get a bordered card with markdown rendering. The streaming variant adds a pulsing cursor.

The vanilla / Web Component package ships an integrated <alz-chat-widget> custom element. Granular per-element components (e.g. <alz-message-bubble>) aren't standalone yet — for now, consumers compose with raw HTML + the soma BEM classes.

Why is the sky blue?

Rayleigh scattering — shorter wavelengths bend more in the atmosphere.

Streaming response …

<script setup lang="ts">
import { MessageBubble } from '@agent-layer-zero/dendrite-vue'
import '@agent-layer-zero/soma/chat-components.css'
</script>

<template>
  <MessageBubble :message="{ role: 'user',      content: 'Why is the sky blue?' }" />
  <MessageBubble :message="{ role: 'assistant', content: 'Rayleigh scattering …' }" />
  <MessageBubble :message="{ role: 'assistant', content: 'Streaming …' }" :streaming="true" />
</template>

import { MessageBubble } from '@agent-layer-zero/dendrite-react'
import '@agent-layer-zero/soma/chat-components.css'

export function Demo() {
  return (
    <>
      <MessageBubble message={{ role: 'user',      content: 'Why is the sky blue?' }} />
      <MessageBubble message={{ role: 'assistant', content: 'Rayleigh scattering …' }} />
      <MessageBubble message={{ role: 'assistant', content: 'Streaming …' }} streaming />
    </>
  )
}

<link rel="stylesheet" href="/node_modules/@agent-layer-zero/soma/dist/chat-components.css" />

<div class="alz-message alz-message--user">
  <div class="alz-message__bubble alz-message__bubble--user">Why is the sky blue?</div>
</div>
<div class="alz-message alz-message--assistant">
  <div class="alz-message__bubble alz-message__bubble--assistant">
    Rayleigh scattering — shorter wavelengths bend more in the atmosphere.
  </div>
</div>

The Vue and React panels both render actual live components as Astro islands. They share the same DOM, the same soma CSS, and emit identical markup — that's the multi-framework parity guarantee.