`<Composer />`

Textarea + send / stop button. Submits on Enter, newlines on Shift+Enter. Send / stop icons are slottable (Vue) or prop-overridable (React) if you want custom glyphs.

For pure HTML, the same BEM classes give you the visual; you wire up your own keydown handler and button click. The dendrite-ui package bakes this into <alz-chat-widget>.

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

const generating = ref(false)
function onSend(content: string) { /* ... */ }
function onStop() { generating.value = false }
</script>

<template>
  <Composer
    :generating="generating"
    placeholder="Type something…"
    @send="onSend"
    @stop="onStop"
  />
</template>

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

export function Demo() {
  const [generating, setGenerating] = useState(false)
  return (
    <Composer
      generating={generating}
      placeholder="Type something…"
      onSend={(content) => { /* ... */ }}
      onStop={() => setGenerating(false)}
    />
  )
}

<div class="alz-composer">
  <textarea class="alz-composer__input" placeholder="Type something…" rows="1"></textarea>
  <button class="alz-composer__btn alz-composer__btn--send" aria-label="Send">
    <svg viewBox="0 0 16 16" stroke="currentColor" fill="none" stroke-width="2">
      <line x1="8" y1="13" x2="8" y2="3" />
      <polyline points="4,7 8,3 12,7" />
    </svg>
  </button>
</div>