Chat Input
Chat Input is a message composer built on a native <textarea>, ensuring reliable IME, keyboard, accessibility, and form semantics. Use it when you need a chat-style input box: Enter fires the send event with the text and clears the field, Shift+Enter inserts a line break, and the actions slot allows extra controls such as attach file. It also exposes an agent-native layer: a stable data-pura-chat-input id on the host and a global window.__puraChatInputs registry that maps each instance to a live handle (value, send(), clear(), focus()), letting agents and tools read the draft and operate the composer without piercing the shadow root.
Preview
<pura-chat-input
id="composer"
placeholder="Type a message..."
send-label="Send message"
maxlength="500">
<button slot="actions" type="button" aria-label="Attach file"
style="display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;font-size:1.4rem;line-height:1;padding:0;border-radius:8px">+</button>
</pura-chat-input>
<script type="module">
import "/pura/lib/chat-input.js";
const composer = document.getElementById("composer");
composer.addEventListener("send", (e) => {
console.log("send:", e.detail.value);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Placeholder text for the textarea. |
disabled | boolean | false | Blocks typing and sending; applies aria-disabled and disables the textarea and button. |
value | string | — | Current draft text; mirrored back to the host attribute on every keystroke. |
maxlength | number | — | Character limit passed through to the textarea (optional). |
send-label | string | Send message | Accessible label (aria-label) for the send button. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/chat-input.js"></script>import "./pura/lib/chat-input.js";