Skip to main content
WireKit
Copy for LLM

Chat & Messaging

Everything you need to build a chat thread, a comment section, or an AI assistant conversation — the human bubble, the assistant turn, the scroll container that follows new output, the typing indicator, the in-thread markers, and the file attachments that ride along.

Every piece is token-driven, keyboard-operable, and screen-reader-correct out of the box — including the parts most chat UIs get wrong (streaming announcements that don't re-read the whole answer, typing indicators that don't flood a screen reader, delivery status that is never conveyed by color alone).

The suite in one thread
Ada
Morning — is the export API rate-limited?
You
Yes, 60 requests a minute per token.
Read
Assistant atlas-2
The export API allows 60 requests per minute per token. A 429 always includes a `Retry-After` header, in seconds.
Ada
Ada is typing… 
<x-wirekit::conversation max-height="22rem" label="Support thread">
    <x-wirekit::stack gap="md">
        <x-wirekit::chat-marker variant="separator">Today</x-wirekit::chat-marker>
        <x-wirekit::message :author="['name' => 'Ada']" timestamp="2026-07-17 09:14">Morning — is the export API rate-limited?</x-wirekit::message>
        <x-wirekit::message :author="['name' => 'You']" side="right" timestamp="2026-07-17 09:15" status="read">Yes, 60 requests a minute per token.</x-wirekit::message>
        <x-wirekit::assistant-message model="atlas-2">
            The export API allows 60 requests per minute per token. A 429 always includes a `Retry-After` header, in seconds.
        </x-wirekit::assistant-message>
    </x-wirekit::stack>
    <x-slot:footer>
        <x-wirekit::message-typing author="Ada" />
    </x-slot:footer>
</x-wirekit::conversation>

The components

Component What it is
Message The human chat bubble — author, timestamp, side, delivery status (single check = sent, double = delivered, accent double = read), reactions, and attachments.
Conversation The scroll container that holds the thread — sticks to the bottom as output streams, offers a jump-to-latest with an unread count, and preserves the scroll anchor when older history loads.
Assistant Message An AI turn — roles, a streaming body, a model chip, a collapsible reasoning disclosure, and announcements a screen-reader user can actually follow.
Message Typing The three-dot "someone is composing" indicator, indented under the typist's name so the reader sees who is typing.
Chat Marker The rows in a thread that are NOT messages — streaming/tool status, system notes, and labeled date breaks.
Attachment A file attachment card — name, size, type, thumbnail, and upload lifecycle — that rides inside a message or stands alone.
Reaction The emoji reaction pill with a count and an active state, for the reactions slot on a message.

Where to start

  • Building a human chat or comment thread? Start with Conversation as the container and Message for each bubble.
  • Building an AI assistant UI? Use Conversation plus Assistant Message, and stream into it — the streaming and announcement model is documented on the Assistant Message page.
  • Need a live "is typing / is thinking" affordance? Pin Message Typing (human) or a Chat Marker status row (assistant) to the conversation footer.

Keyboard Interaction

This overview page has no interactive elements of its own. Each component documents its own keyboard contract on its page — the ones with a keyboard model are Conversation (the scroll region is a focusable role="log", reachable and scrollable by keyboard) and Reaction (an operable toggle). The rest — Message, Assistant Message, Message Typing, and Chat Marker — are presentational; any interactivity comes from the controls you place in their slots (buttons, menus), which carry their own keyboard behavior.

Was this page helpful?

Voting requires cookies or local storage. What we store