InterVoice / InterVoice

InterVoice is a React component library with automatic voice control powered by the Web Speech API.

InterVoice to biblioteka komponentów React z automatycznym sterowaniem głosowym opartym o Web Speech API.

Features / Funkcje

• Automatic voice control for UI elements (buttons, inputs, selects, etc.)

• Global voice toggle + commands: enable/disable/help/cancel

• Disambiguation when multiple elements match (pick by number)

• Polish + English phrase parsing

• Automatyczna kontrola głosem elementów UI (przyciski, pola, selecty, itd.)

• Globalny przełącznik + komendy: włącz/wyłącz/pomoc/anuluj

• Doprecyzowanie gdy pasuje wiele elementów (wybór numeru)

• Parsowanie fraz po polsku i angielsku

Installation / Instalacja

npm i intervoice

Quick start / Szybki start

1) Add styles / Dodaj style

import 'intervoice/style.css'

2) Wrap your app / Owiń aplikację

import { VoiceProvider } from 'intervoice'

export function App() {
  return (
    <VoiceProvider defaultEnabled={false} showToggle={true}>
      {/* your app */}
    </VoiceProvider>
  )
}

3) Use voice-enabled components / Używaj komponentów "Voice*"

import { VoiceButton, VoiceInput, VoiceSelect } from 'intervoice'

export function Example() {
  return (
    <div>
      <VoiceInput id="name" label="Name" />
      <VoiceSelect
        id="country"
        label="Country"
        options={[
          { value: '', label: 'Choose...' },
          { value: 'pl', label: 'Poland' },
        ]}
      />
      <VoiceButton type="button">Save</VoiceButton>
    </div>
  )
}

Voice commands / Komendy głosowe

Global / Globalne

• PL: włącz głos, wyłącz głos, pomoc, anuluj
• EN: enable voice, disable voice, help, cancel

Actions / Akcje

• Click: kliknij Zapisz / click Save
• Focus: przejdź do Email / focus Email
• Clear: wyczyść email / clear email
• Set value:
  • wpisz "Jan" w polu Imię
  • set name to "John"
  • in field email: [email protected]
• Select:
  • wybierz Polska
  • choose option 2
  • select Poland in field Country
• Toggle:
  • zaznacz Regulamin
  • odznacz Regulamin
  • toggle Regulamin

Disambiguation / Doprecyzowanie

If multiple elements match, InterVoice will ask you to pick a number.

Gdy pasuje wiele elementów, InterVoice poprosi o wybór numeru.

• PL: wybierz 1
• EN: choose 2

Best practices / Dobre praktyki

• Provide labels and/or aria-label for inputs and buttons.

• Use data-voice-aliases to add alternative names.

• Dodawaj label i/lub aria-label.

• Używaj data-voice-aliases, aby dodać aliasy nazw.

Documentation / Dokumentacja

• Local docs app (Next.js + MDX): docs/
• Storybook: npm run storybook
• Demo app (Vite): demo/

Development / Development

npm run build
npm run typecheck
npm run storybook

License

MIT