MVP / agentic
chat input
A native form composer with a textarea, helper copy, and host-owned submit action.
Specimen
A native form composer with a textarea, helper copy, and host-owned submit action. 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-input.html
<style>
.au-chat-input {
background: var(--au-surface);
border: 1px solid var(--au-border-emphasis);
border-radius: var(--au-radius-md);
display: grid;
gap: 10px;
padding: 10px;
}
.au-chat-input:focus-within {
border-color: var(--au-focus);
box-shadow: var(--au-focus-ring);
}
.au-chat-input__textarea:focus-visible {
border-radius: var(--au-radius-sm);
outline: 2px solid var(--au-focus);
outline-offset: 2px;
}
.au-chat-input__textarea { background: transparent; border: 0; color: var(--au-fg); font: 15px/1.5 var(--au-font-sans); min-height: 60px; outline: 0; padding: 4px; resize: vertical; width: 100%; }
.au-chat-input__textarea::placeholder { color: var(--au-fg-subtle); }
.au-chat-input__footer { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.au-chat-input__hint { color: var(--au-fg-subtle); font: 10px/1.4 var(--au-font-mono); }
</style>
<form class="au-chat-input" method="post">
<textarea class="au-chat-input__textarea" name="message" rows="2" placeholder="Ask the agent to continue..."></textarea>
<div class="au-chat-input__footer"><span class="au-chat-input__hint">Enter to send · Shift + Enter for a new line</span><button class="au-btn au-btn--primary" type="submit">Send</button></div>
</form>Install
head.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">Component contract
- Dependencies
tokens.css,chat-input.css,button.css for the canonical submit.- States
- idle, streaming with a stop action, disabled, and error are host-owned form states.
- CSS variables
- No component-specific variables. Child controls consume the shared token layer.
- Events
- Native form, focus, and click events. No custom event or runtime is required.
- No JavaScript
- The form submits normally with `method=post`; Enter-to-submit is optional enhancement, never a requirement.
- Host boundary
- The host owns validation, draft persistence, upload slots, streaming control, rate limits, and the request lifecycle.
Accessibility and security
Keep the state explicit.
Accessibility: Give the textarea a visible or programmatic label, preserve drafts after errors, and keep submit and stop actions concrete. Security: Treat the message as untrusted input. Validate length, authorization, and request identity on the host before sending it to an agent.
Source files
The page is documentation, not a package boundary. Copy the raw files and edit them in your application.