WireKit v2.14.0
Feature release. The Chat / AI Conversation suite: six new components for building chat transcripts and AI-native surfaces, plus fade, delivery-status, readability, animated-progress and copy-affordance additions to existing components. All additive — nothing changes for existing components — with one accessibility fix to the rating component.
Added
- Shimmer. An animated highlight that sweeps across the letterforms of live text — the "Generating response…" / "Thinking…" affordance for AI streaming and long-running status. Unlike a skeleton's block shimmer, this shimmers the real copy rather than a gray placeholder, so the text stays readable to a screen reader throughout. Bind
activeto a streaming flag and it turns itself on and off with no conditional markup and no JavaScript. The sweep is disabled underprefers-reduced-motionand its duration is a token you can override per instance. - Conversation. A stick-to-bottom transcript scroller for chat and streaming. It keeps the newest message in view while a response streams in, but the moment the reader scrolls up to read history it stops yanking them back down — and offers an announced "jump to latest" with an unread count instead. New content appended above the fold never shifts what the reader is looking at. The viewport is a labeled live region, reachable and scrollable by keyboard.
- Attachment. The display card for a file on a message — icon, name, human-readable size and type — and an
attachment-groupthat lays several out, stacked by default or as a scroll-snapped row. Sizes and types are formatted server-side, so nothing about the file depends on JavaScript. Fills the existingattachmentsslot on the message component. An opt-inanimategives the uploading bar a shimmer sweep so an in-flight upload reads as active; it is disabled underprefers-reduced-motion. - Chat Marker. The in-thread meta row for the things in a conversation that are not messages — a streaming or tool-call status, a system note, a "New messages" divider, a timestamp separator. Presentational by design: compose a link or button inside it when a marker needs to be actionable.
- Message Typing. The three-dot "someone is composing" indicator. Given an
author, it shows that person's avatar and name above the dots — indented like their message — so the reader sees who is typing. It carries a visually-hidden "… is typing" text so a screen-reader user loses nothing when the dots freeze underprefers-reduced-motion, and it is a static announcement rather than a per-keystroke flicker that would flood assistive tech. - Assistant Message. The AI turn — the assistant-side counterpart to the human chat bubble, and WireKit's first AI-native surface. Assistant, user and system roles (a system turn is a centered notice), a streaming state, a prose body, an optional model chip on assistant turns, a collapsible reasoning disclosure, and footer chips and actions slots. The streaming body is announced a complete sentence at a time rather than character by character, so a screen reader hears finished thoughts, never a half-clause re-read on every token. An
intenttints the bubble when a turn IS a state — an error answer (danger), a caution (warning), a confirmation (success) — with the body text kept regular so the tint reads as a marker, never as low-contrast colored text.
Changed
- Scroll Area gained an edge fade. A
fadeoption masks the overflow edges along the scroll axis so the content itself dissolves toward the edge — adapting to any background automatically, since there is no colored overlay to keep in sync with the surface. The fade lifts entirely when a child near the edge takes keyboard focus, so a focused control is never faded out from under the reader. Edge depth is a token. - Message gained a delivery-status ladder. A
statusprop shows sending → sent → delivered → read (or failed), the affordance a messaging UI needs for a bubble's own state. It follows the convention every messaging app shares — one check for sent, two checks for delivered, two accent checks for read — and is never carried by color or glyph alone: each rung states its own wording for assistive technology. PassstatusTimeand the glyph carries a tooltip with the exact moment ("Read at 9:15 AM"), woven into its accessible text too so a screen reader gets the time without the hover. - Progress gained an optional animated fill. An
animationoverlays motion on a determinate bar —stripes(a barber-pole) orshimmer(a light sweep) — the "work in flight" affordance for uploads and streaming. The bar's value is unchanged and the motion is disabled underprefers-reduced-motion. - Clipboard Button gained a bare
icon-onlymode. A compact copy glyph — muted gray at rest, popping to the success green on copy — for action rows where a full labeled button is too heavy. Requires anaria-labelsince there is no visible text to name it. - Prose gained readability presets. A
presetpicks a reading rhythm — tighter line spacing for chat, roomier line spacing for long-form reading, larger text for emphasis — on top of the existing prose styling. (This is the vertical rhythm only; the separatemeasureprop that clamps line length is untouched.)
Fixed
- Rating: a read-only rating is now a record, not a switched-off control. A read-only rating used to render a hidden form field and announce itself as a radio group with several stars simultaneously "selected" — so a page showing a dozen product scores carried a dozen stray form fields, and a screen reader heard a broken multi-select. A read-only rating is now announced as a single image with one readable value ("4.2 out of 5 stars"), carries no form field, and exposes nothing to operate. The interactive rating — where the reader gives a score — now implements its full documented keyboard model: both arrow axes move the selection, and Home / End jump to the first and last star.