React Chat Message Thread
The substrate an assistant UI is built on. Turns render with a small, dependency-free markdown pass — paragraphs, lists, inline code, and fenced code blocks — so a model's real output looks right without pulling a markdown engine or reaching for dangerouslySetInnerHTML.
What causes a chamber pressure excursion on an etch tool, and how do I read the SPC chart?
A pressure excursion usually traces back to one of three things:
- Pump degradation — a turbo pump bearing wearing out raises effective base pressure.
- Leak or seal fault — an O-ring or valve not sealing lets the chamber drift.
- Flow controller drift — an MFC delivering off-setpoint gas.
On the SPC chart, watch for a run of points trending toward the upper control limit rather than a single spike — that pattern points at the pump. A single isolated point is more often a transient.
python# Western Electric rule 2: 2 of 3 points beyond 2σ def zone_a_violation(points, mean, sigma): beyond = [p > mean + 2 * sigma for p in points] return sum(beyond[-3:]) >= 2
Want me to pull the last 24 hours of pressure data for EQ-07?
Installation
Props
| Prop | Type | Description |
|---|---|---|
| messages | ChatMessage[] | { id, role, content, feedback? } |
| thinking | boolean | Show a trailing “thinking…” bubble |
| assistantName | string | Label above assistant turns |
| onFeedback | (id, value, reason?) => void | Thumbs feedback per message |
| onRegenerate | (id) => void | Regenerate a specific assistant turn |
Markdown without a markdown engine
content is plain text with a familiar subset of markdown, rendered to real React nodes — never injected HTML. Fenced code blocks (```) render on Kelvin's deep surface with a language tag; inline `code` and **bold** are tokenised; lines beginning with - become a list. That is enough for the vast majority of model output, it is deterministic, and it carries no supply-chain surface. If you need tables or math, swap renderMessageContent for your renderer of choice — the thread doesn't care how a message becomes nodes.
The thinking state is a real design token
An assistant that has received your message but hasn't started answering needs to say so, and Kelvin reserves one visual language for "generation in progress": the deep surface with --accent-bold — the one place that near-neon mint is legal. The thinking bubble and the Streaming Response share it, so across a whole product "the AI is working" always looks the same. Message actions (copy, feedback, regenerate) fade in on hover so a calm thread doesn't read as a wall of buttons.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.