Here is the beginning of a response…
Streaming & AI
streaming_block, copy_btn, model_card — SSE and LLM patterns.
Streaming Block (idle)
Content that would stream in. No cursor when idle.
Streaming Block (active)
Partial response text that is still streaming...
Streaming Block (SSE swap target)
Use with htmx SSE: sse-swap="fragment" hx-target="this" on the inner div.
Streaming Bubble (active)
Message bubble variant with role-aware styling. Wraps streaming_block inside an article.
Streaming Bubble (thinking)
Animated thinking dots, aria-busy="true". Use state="thinking".
Streaming Bubble (error)
Error-tinted bubble with role="alert". Use state="error".
Connection lost. Please try again.
Copy Button
Requires event delegation when used inside htmx-swapped content.
Model Card
Fast, capable model for general use.
Efficient smaller model.
Model Card (SSE streaming)
Use sse_connect, sse_streaming=true for LLM comparison UIs. Requires backend SSE routes. See Chirp LLM playground or RAG demo for working examples.
With sse_connect="/stream/a" and sse_streaming=true, this would connect to an SSE endpoint and stream tokens into the card body.
Same pattern for model B. Each card needs its own sse-connect URL.
SSE Connection Status
Connection indicator with dot + label. Shows stream health at a glance.
Uses role="status" and aria-live="polite".
Connected
Disconnected
Connection lost
SSE Retry
Recovery button that re-fetches an SSE endpoint. Place inside an error state so users can manually reconnect.
Disconnected. Retry fetches a mock recovery fragment.
Try it — Live SSE Demo
No LLM required. Click to connect; tokens stream word-by-word via Chirp EventStream.