Threads, composers, tool cards, citations
Mufflermen-flavoured chat surface primitives. Drop them into a quote-assistant flow, a service advisor copilot, or an internal techs Q&A. Streaming-aware, reduced-motion friendly, and ARIA-labelled end to end.
Threads, composers, tool cards, citations is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Threads, composers, tool cards, citations: Mufflermen-flavoured chat surface primitives. Drop them into a quote-assistant flow, a service advisor copilot, or an internal techs Q&A. Streaming-aware, reduced-motion friendly, and ARIA-labelled end to end.
Pick a surface
Every primitive renders full-scale in its own sub-route with realistic Mufflermen assistant copy — exhaust selection, EGT diagnostics, supplier lookups, and Hilux 2.8L volume-legal recommendations.
Chat thread
Vertical transcript container with smart stick-to-bottom autoscroll, role=log, polite live region for incoming turns.
Inspect primitive states 02User message
Right-aligned brand bubble with attachment chips, timestamp, and edited badge for in-place revisions.
Inspect primitive states 03Assistant message
Left-aligned panel surface with author, model badge, citation slot, and inline feedback thumbs.
Inspect primitive states 04Streaming indicator
Three-dot typing animation with role=status. Reduced-motion users get a blinking caret instead.
Inspect primitive states 05Prompt input
Auto-grow textarea composer with slash trigger, attach button, char counter, and Cmd+Enter kbd hint.
Inspect primitive states 06Suggestion chips
Above-the-composer suggestion row with arrow-key cycling and click-to-insert prompt callback.
Inspect primitive states 07Tool call card
Collapsible card showing tool name, status chip, duration, and input/output JSON via the existing CodeBlock.
Inspect primitive states 08Citation pill
Inline citation chip that hover-reveals a QuoteBubble popover with source title, snippet, and URL.
Inspect primitive states 09Stop / Regen
Action toolbar beneath an assistant turn: stop, regenerate, edit prompt, copy. Streaming-aware disabled states.
Inspect primitive states 10Conversation rail
Left rail grouping past conversations by Today / Yesterday / Last 7 days / Older with hover preview.
Inspect primitive states 11Token usage
Compact meter chip showing tokens used vs budget. Tone shifts calm → amber → red as the budget exhausts.
Inspect primitive states 12Model selector
Listbox popover for choosing model with tier badge, context-window chip, and per-million cost chip.
Inspect primitive states 13System prompt
Collapsible system prompt editor with character counter, dirty-state subhead, and reset-to-default action.
Inspect primitive states 14Feedback thumbs
Animated thumbs up/down with confetti micro-burst on positive feedback and reason picker on negative.
Inspect primitive states 00Full conversation
Composed scene with rail + thread + suggestion chips + composer + tool calls. Mufflermen quote assistant in action.
Inspect primitive states