shadcn.io is not affiliated with official shadcn/ui
Tech Support Chat Block for Svelte
A bot-led troubleshooting path for a dropping router: step cards with That worked and Still broken, a What we tried pane with outcomes and a count, and Copy case notes after three failures.
Installation
Overview
Walk someone through a fix one check at a time, with this tech support chat for Svelte with Ark UI. Fixmate Bot, marked with a Bot badge in the top bar, leads a typed path for "My router keeps dropping the connection": each step is a card in the thread with a title, one instruction and two buttons, "That worked" and "Still broken". The end pane, "What we tried", lists the five steps with a glyph and an outcome word (Worked, Did not work, Not tried yet, Skipped) and a count such as "2 of 5 checked". After three failed steps it offers "Copy case notes", a Copy Button that really copies a typed summary of what was tried, and the bot says plainly that it cannot hand over to a person here; "That worked" posts a solved card with the step that fixed it. Framed by Guides, it moves with CSS only, and on a phone the thread and the pane are two views.
FAQ
What stays in the page, and how do I make it real?
Everything. The five steps, the bot's lines and the outcomes live in this file and the component's state; the composer's replies are one typed reminder to use the cards. To wire it for real, replace STEPS with your own decision tree, report each outcome from answer to your service and keep the pane reading from the same lists.
How are the pane's outcomes worked out?
One pure helper, outcomeOf, reads two lists, the steps that worked and the steps that failed. A step in the first reads Worked, in the second Did not work, and once something has worked every untried step reads Skipped. The count above the list is the two lists' lengths added together.
What does Copy case notes copy?
A short plain-text summary: a title, the problem and each step with its outcome word, built by notesOf from the same lists. It is a real clipboard copy and the status line says when it is done. The button appears after three failed steps so it is never offered before there is something to hand over.
Why is there no handoff to a person?
Because this chat is about the bot's path and its record. Handing a conversation to an agent is a different feature, shown in the chatbot handoff block; here the bot says it cannot, and gives you the notes to take to one.
Is it usable with a keyboard and a screen reader?
Step buttons are in a labelled group that names the step, answered steps replace them with a glyph and a word, the pane is an ordered list with outcomes in text, and the log is a focusable region announced as a log. Outcomes are never shown by colour.