untemps/react-vocal

React component and hook to initiate a SpeechRecognition session

react-vocal's Issues

Add link to demo page in README

A demo is available via Github page at https://untemps.github.io/react-vocal/
We must add it in the master main README.

Export a hook to abstract SpeechRecognition instance creation

By adding a hook, we decouple the creation of the SpeechRecognition from the Vocal component logic and offer a way to use the lib with no visual representation.

Export isSupported getter

A isSupported is used internally to detect if the Web Speech API is available.
For some use cases, it can be useful to import it directly from the package.

Custom component, uncomplete documentation

The documentation could detail the set of variables and methods we have access to when we decide to use a custom component.

Inconsistency in event signatures between result and other events makes it hard to wrap multiple events together

Current situation

All event signatures but result give the SpeechRecognition event as a first parameter to any installed handler. result, on the other hand, returns a partial result as a first parameter, and the event as a second parameter.

This makes it hard to remember the API, and hard to use a general event handler for all events (like we do in my UI toolkit so we can debounce all events from the wrapper).

Proposed change

I'd like to propose that all events returned by the SpeechRecognitionWrapper have the underlying event as the first parameter, since it's the richest source of information and the most useful for low-level use of the API.

Note that I don't mind that the Vocal component returns the computed result first.

Upgrade @untemps/vocal

Add section in README to explain how to handle partial supports

On iOS 14.5, SpeechRecognition API is supported but not all related APIs, like SpeechGrammarList or navigator.persmissions.
The lack of SpeechGrammarList is handled by @untemps/vocal but navigator.persmissions is not.
We should add a section to explain the developer should check for this particular case by himself.

Handle continuous sessions

TODO: Add specifications

---

Please pay attention to Sidnioulz's comments below:

Shouldn't this be memoized? What would be the performance impact if I ran, say, 5 commands in a row?

Originally posted by @Sidnioulz in #58 (comment)

Correct me if I'm wrong, but I should be able to completely change the commands in use without suspending the speech recognition session, right?
I'm thinking of assisted typing use cases where I want to provide matching commands based on the current field / table cell.

Originally posted by @Sidnioulz in #58 (comment)

The default icon is not a11y-compliant

At least add role, aria-label and tabIndex props to the main tag

Change references to master by main

Make the use of commands optional

Fuse.js increases your bundle size by > 50% judging on its unpacked size and your current package's unpacked size. That's quite big. I think it (and therefore commands) should be optional. You can set it as a peer dependency with a peerDependenciesMeta section to achieve that, should you want to.

Originally posted by @Sidnioulz in #58 (comment)

Switch from `toLocaleLowerCase` to `toLowerCase` to reference command keys

Switch from toLocaleLowerCase to toLowerCase since there is no specific reason to handle locale mapping.

---

Why .toLocaleLowerCase()? As in, why lowercase, and why specifically locale lowercase?

Originally posted by @Sidnioulz in #58 (comment)

Replace util function by @untemps/utils

The component uses internal util function to check if a value is a function.
The @untemps/utils package contains such a function. We can replace the internal one by the one included in the external package.

Remove @untemps/user-permissions-utils and @untemps/event-dispatcher from dev-dependencies

Upgrade @untemps/vocal for better support checking

The returned result isn't the most confident one, and isn't complete if interimResults / continuous are used

Current situation

• The result event returns only the first alternative of the result
• If the result is split (continuous mode or interimResults mode), only the first bit is sent

Proposed change

• All result bits are aggregated
• For each result, the most confident match is used instead of the first (occasionally, the first match is the second-most confident instead of most confident)

I think the performance cost is negligible when continuous and interimResults are false (we just loop over a small ~10 items array), but this makes the wrapper useful in more cases including the one I need to support in my UI library.

Upgrade @untemps/utils