Help Button / Tour Intro
Entry point into the on-demand interactive tour (c19-7) — an outline icon button on /setup and /interview that opens an intro dialog. Never opens automatically; opt-in only. "Start tour" runs the real driver.js walkthrough on both routes, via the shared useTourGuide hook.
States
default / hover / focus-visible — the button has no disabled state. Both aria-labels shown: "Довідка" (ua) and "Help" (en).
| Prop | Type | Default | Description |
|---|---|---|---|
| onClick | () => void | — | useTourGuide's openTour — on /interview it stops an in-progress mic recording first (the hook's beforeOpen), then opens the intro dialog. HelpButton itself owns no side effects. |
| ariaLabel | string | — | "Довідка" (ua) / "Help" (en) — from setupCopy.helpAria / interviewCopy.helpAria. |
| className | string | — | Layout only, e.g. mt-0.5 to align with the back button on /setup. |
Tour intro dialog
Built on the shared Dialog primitive, size "sm". Copy is route-specific (setupCopy vs interviewCopy) — this preview shows the /setup wording. Both buttons close the dialog; "Start tour" also runs the driver.js walkthrough (src/lib/tour.ts) on both routes.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled — same pattern as the leave-confirm dialog and InfoModal. |
| onOpenChange | (open: boolean) => void | — | Called on Esc, overlay click, or either footer button. |
| title / description | string | — | Route-specific copy from setupCopy / interviewCopy — the component holds no strings of its own. |
| startLabel / notNowLabel | string | — | "Почати тур" / "Не зараз" (ua), "Start tour" / "Not now" (en). |
| onStartTour | () => void | undefined | useTourGuide's startTour — called in addition to closing, when "Start tour" is clicked. Runs the real driver.js tour (src/lib/tour.ts) on both /setup and /interview. |
Tour steps (/setup and /interview, both live)
All seven rows below are real data-tour targets (data-tour="setup-challenge|setup-generate|setup-start" on /setup, data-tour="interview-mic|interview-status|interview-notes|interview-grade" on /interview) — try the actual flow on either route, not the intro dialog above, which does not run driver.js against this page. The last two rows are the two copy variants of the /interview grade step, picked by canGrade. A live overlay would take over the whole viewport and cannot be embedded in a DS preview, so this stays a static description of the copy.
/setup · 1
Challenge type
Pick what you're practicing — greenfield design, feature improvement, or trade-offs.
/setup · 2
AI drafts the question
Click once you've picked a type (and industry, if required) — the model suggests a few question options.
/setup · 3
Start once a question is picked
The button unlocks once you pick a generated question or write your own.
/interview · 1
Speak or type
Tap the mic and answer out loud — or just type in the field above.
/interview · 2
What's happening now
The indicator shows who's talking — you, or the AI thinking/replying.
/interview · 3
Notes are private to you
Jot thoughts here during the interview — the AI never sees this, it doesn't affect the grade, and it disappears once you leave the page.
/interview · 4 (locked)
Grading unlocks later
The button activates once you've given at least 3 answers.
/interview · 4 (ready)
Grading is available now
You've given enough answers — click whenever you're ready to finish.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn