VoiceMock

Question Progress

The row inside the input bar’s own container, directly above the textarea, showing how many answers have been given, how many unlock grading, and the grade button itself. It counts toward the product’s real threshold (`canGrade`), not toward an invented interview length — the interview has no fixed number of questions.

In context

Inside the input bar container — `border-t bg-background px-4 py-3` — directly above the textarea, exactly as in `/interview`. The grade button lives in the `action` slot to its right. Use the buttons to add and remove answers: the caption changes wording once the threshold is met, and the button enables.

Answer 1 of 3 · grading unlocks after 3

Your answer, or speak into the mic...

answered = 1

Prop	Type	Default	Description
answered	number	—	Candidate answers so far. In the product this is `candidateTurnCount`.
required	number	—	Answers needed before grading unlocks — the product threshold, not a target interview length.
language	'ua' \| 'en'	—	Picks the caption from `interviewCopy`; the component owns no strings of its own.
action	ReactNode	—	Rendered to the right of the segments+caption. In the product this is the grade button — `QuestionProgress` renders it but owns none of its click/disabled logic.
className	string	—	Layout only — never for restyling the row.
'data-tour'	string	undefined	Pass-through tour hook (c19-7 wave2 §11.2/§11.4) — spread onto the root `<div>`. In the product this is `interview-grade`; the component has no knowledge of the tour itself.

Mobile (~360px)

Below the caption’s natural width, the row wraps: segments + caption stay together as one group, and the button is pinned to the right of whichever line it lands on. The button never shrinks below its `gradeButtonShort` label to make room.

Answer 2 of 3 · grading unlocks after 3

Your answer, or speak into the mic...

States

Every state the row has. It is not interactive, so there is no hover, focus or disabled state to show — the states are the values of `answered` against `required`.

Answer 0 of 3 · grading unlocks after 3

answered = 0 — nothing said yet

Answer 1 of 3 · grading unlocks after 3

answered = 1 — counting toward the threshold

Answer 2 of 3 · grading unlocks after 3

answered = 2 — counting toward the threshold

3 answers · grading is available

answered = 3 — threshold met, bar full

5 answers · grading is available

answered = 5 — past the threshold, no longer a target

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