shadcn.io is not affiliated with official shadcn/ui
Car Diagnostic Chat Block for Radix UI
A garage mechanic's thread with a service report of five findings sorted by urgency, a checkbox per repair, parts and labour in cents, a derived estimate and an Approve selected button that posts your choice.
Installation
Overview
Show a repair quote answered in conversation, with this car diagnostic chat for React with Radix UI. A hairline frame holds a window of fixed height for Torquebridge, an independent garage: the mechanic, Hollis Varnell, posts a service report in the log with five findings, each a Checkbox row with a note, an urgency shown as a glyph and a word (Now, Soon or Watch) and its parts and labour. Ticking a repair re-derives the parts, the labour and the estimate, and Approve selected posts your approval and locks the ticks. The composer's Shine Button is the only colored control. Every figure is an example, not a quote.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file, picked by words in your message, then one fallback per message and a last line that says it was the last sample reply. The report, the ticks and the approval live in state. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the approved ids from approve to your workshop system and load REPAIRS from the job sheet.
How is the estimate calculated?
In integer cents, from the ticked repairs only: parts and labour are summed separately and added for the estimate. The button label and the status line read the same helpers, so the count and the total always agree.
How is urgency shown without color?
As a glyph and a word: a triangle for Now, a clock for Soon and an eye for Watch. The findings are sorted by urgency in the data.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time. Each checkbox is named by the repair and described by its note, and the estimate is a term and value list. The avatars are hidden from assistive technology because the name is always in text.