Voice Command Dialog Block for React

So you can see it without a click. On load the drawer is a copy drawn in place, docked to the foot of the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. Nothing runs until you press the mic or a phrase. The Voice command button opens the real Drawer, with its swipe, Escape and focus return, and the copy stays closed until a reload. Both show the same VoiceFields component and share the block's state. In your app keep the Drawer and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

No. The microphone is never opened, there is no speech recognition and no permission prompt, and the drawer says so under its title and beside the mic. The four phrases are typed in the block, and the bars move on a fixed curve, so the same pass looks the same every time. In your app pass the recognised text to the same intent step: the transcript, the card and Confirm work on any string you give them.

The bars move for seven beats, 1.4 seconds in all, then the phrase appears one word at a time, at most seven steps, and the card fills in. The mic button says Stop listening while a pass runs and ends it on a press, and the phrases wait until it is over. Under reduced motion the bars hold one shape and the phrase and the card appear at once. Closing the drawer drops a pass in hand, and a pending step is cleared with it.

The moving bars and the word-by-word transcript are decoration and are hidden from assistive technology; what is read, once, is the final phrase and the card: "Heard Set the living room to 21 degrees. Action: Set temperature. Target: Living room. Value: 21 °C. Confirm or cancel." Stopping early says "Stopped. Nothing was heard." Confirm stays quiet until a phrase has been understood, and pressing it before then says what is missing.

Everything. Confirm changes the drawn panel in this page's state and says "Nothing was sent to a device in this demo"; no light, lock or thermostat is switched. In your app call your hub from confirm, keep homeAfter as the place that applies an intent to your state, and ask for the microphone only when the person presses the mic.

Yes. The real drawer is named Voice command, focus starts on the mic and stays inside until it closes, and Escape returns focus to the Voice command button. The mic, the phrases, Cancel and Confirm are all buttons. The trigger is passed to DrawerTrigger through render, and the drawer is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and Cancel close it and put focus on the button.