Keep the draft editable while the agent works.
MVP / agentic
chat thread
A normal-flow conversation container that owns message scrolling and composer placement.
Specimen
A normal-flow conversation container that owns message scrolling and composer placement. Copy Preview, Code, or Install from the tabs. The raw file and standalone fixture remain below.
Preview
No runtime required. The host owns state, persistence, and any execution boundary.
Code
chat-thread.html
<style>
.au-chat-thread {
--au-thread-bg: var(--au-surface);
--au-thread-border: var(--au-border-color);
background: var(--au-thread-bg);
border: 1px solid var(--au-thread-border);
border-radius: var(--au-radius-lg);
display: flex;
flex-direction: column;
min-height: 360px;
overflow: hidden;
}
.au-chat-thread__messages { display: grid; gap: 4px; min-height: 0; overflow: auto; padding: var(--au-space-6); }
.au-chat-thread__composer { border-top: 1px solid var(--au-thread-border); padding: var(--au-space-4); }
.au-chat-thread__new { background: var(--au-action-soft); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-pill); color: var(--au-action); font: 600 11px/1 var(--au-font-mono); padding: 7px 10px; }
</style>
<section class="au-chat-thread" aria-label="Conversation">
<div class="au-chat-thread__messages">
<!-- Place chat-message elements here. -->
</div>
<div class="au-chat-thread__composer">
<!-- Place chat-input here. -->
</div>
</section>Install
head.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">Component contract
- Dependencies
tokens.css,chat-thread.css.- States
- static, streaming, and new-content notification are host-owned; message states remain local to child components.
- CSS variables
- `--au-thread-bg`, `--au-thread-border`
- Events
- Native form, focus, and click events. No custom event or runtime is required.
- No JavaScript
- Messages stay readable in normal document flow and the nested native form can submit without JavaScript.
- Host boundary
- The host owns scroll position, stick-to-bottom behavior, unread markers, persistence, and message insertion.
Accessibility and security
Keep the state explicit.
Accessibility: Give the thread an accessible label, keep messages in articles, and keep the composer outside the scrollable list when possible. Security: The thread is a layout surface. Escape message content in the child component and never use the thread as an execution boundary.
Source files
The page is documentation, not a package boundary. Copy the raw files and edit them in your application.