@untemps/react-vocal 2.0.0-beta.4 → 2.0.0-beta.6

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [2.0.0-beta.6](https://github.com/untemps/react-vocal/compare/v2.0.0-beta.5...v2.0.0-beta.6) (2026-05-12)
+
+
+### Features
+
+* Add continuous session support ([#118](https://github.com/untemps/react-vocal/issues/118)) ([690ba61](https://github.com/untemps/react-vocal/commit/690ba617746aa28499d7ea2d48751453a652ff5e))
+
+# [2.0.0-beta.5](https://github.com/untemps/react-vocal/compare/v2.0.0-beta.4...v2.0.0-beta.5) (2026-05-11)
+
+
+### Features
+
+* Make fuse.js an optional peer dependency ([#117](https://github.com/untemps/react-vocal/issues/117)) ([a1c2a33](https://github.com/untemps/react-vocal/commit/a1c2a337f8d4ba4729c81f0a9b8664bcf914755f))
+
+
+### BREAKING CHANGES
+
+* fuse.js must now be installed separately to enable fuzzy matching for phrase commands.
+
 # [2.0.0-beta.4](https://github.com/untemps/react-vocal/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2026-05-10)
 
 

package/README.md

@@ -46,6 +46,14 @@ Although the lack of `SpeechGrammar` and `SpeechGrammarList` is handled by the u
 yarn add @untemps/react-vocal
 ```
 
+Fuzzy matching for phrase commands requires [fuse.js](https://fusejs.io/) as an optional peer dependency:
+
+```bash
+yarn add fuse.js
+```
+
+Without fuse.js, phrase commands fall back to case-insensitive exact matching. Single-word commands always use exact matching and never require fuse.js.
+
 ## Usage
 
 ### `Vocal` component
@@ -190,7 +198,11 @@ const commands = {
 }
 ```
 
-The component utilizes a special hook called `useCommands` to respond to the commands.
+The component utilizes a special hook called `useCommands` to respond to the commands.  
+The hook performs a fuzzy search to match approximate commands if needed. This allows to fix accidental typos or approximate recognition results.  
+To do so the hook uses [fuse.js](https://fusejs.io/) which implements an algorithm to find strings that are approximately equal to a given input. The score precision that distinguishes acceptable command-to-callback mapping from negative matching can be customized in the hook instantiation.
+
+fuse.js is an optional peer dependency — install it separately to enable fuzzy matching (see [Installation](#installation)). Without it, phrase commands fall back to case-insensitive exact matching.
 
 **Single-word command keys** (e.g. `rouge`, `submit`) use exact case-insensitive lookup. When the recognition returns a multi-word transcript, each word is tried individually so a command fires even when embedded in a phrase (e.g. _"je veux du rouge"_ triggers `rouge`).
 
@@ -212,6 +224,8 @@ The component utilizes a special hook called `useCommands` to respond to the com
 | timeout         | number            | 3000                 | Time in ms to wait before discarding the recognition                                            |
 | precision       | number            | 0.4                  | Fuse.js score threshold for **phrase** command keys only (lower = stricter). Single-word commands always use exact lookup. |
 | maxAlternatives | number            | 1                    | Maximum number of recognition alternatives per segment. Setting this to 3–5 lets the engine surface the correct word as a secondary transcript, which is useful for handling homophones (e.g. _vert_ / _verre_ in French). |
+| continuous      | boolean           | false                | Keep the recognition session open after each result. The session accumulates transcript across segments and stops when the button is clicked again or `silenceTimeout` expires. Commands are not evaluated in continuous mode. |
+| silenceTimeout  | number            | null                 | When `continuous` is true, automatically stop the session after this many ms of inactivity following the last recognized result. `null` or `0` disables auto-stop (button click required). |
 | style         | object            | null                 | Styles of the root element if className is not specified                                        |
 | className     | string            | null                 | Class of the root element                                                                       |
 | ariaLabel     | string            | 'start recognition'  | Accessible label for the default button                                                         |
@@ -286,7 +300,7 @@ const App = () => {
 #### Signature
 
 ```
-useVocal(lang, grammars, maxAlternatives)
+useVocal(lang, grammars, maxAlternatives, continuous)
 ```
 
 | Args            | Type              | Default | Description                                                                                     |
@@ -294,6 +308,7 @@ useVocal(lang, grammars, maxAlternatives)
 | lang            | string            | 'en-US' | Language understood by the recognition [BCP 47 language tag](https://tools.ietf.org/html/bcp47) |
 | grammars        | SpeechGrammarList | null    | Grammars understood by the recognition [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/)    |
 | maxAlternatives | number            | 1       | Maximum number of recognition alternatives per segment                                          |
+| continuous      | boolean           | false   | Keep the recognition session open after each result                                             |
 
 ---
 

package/dev/src/index.jsx

@@ -13,6 +13,7 @@ const COMMANDS = {
 const App = () => {
 	const [logs, setLogs] = useState('')
 	const [borderColor, setBorderColor] = useState()
+	const [continuous, setContinuous] = useState(false)
 
 	const _log = (value) => setLogs((prev) => `${prev}${prev.length > 0 ? '\n' : ''} ----- ${value}`)
 
@@ -22,8 +23,8 @@ const App = () => {
 			Object.fromEntries(
 				Object.entries(COMMANDS).map(([key, color]) => [
 					key,
-					(input) => {
-						_log(`command matched: "${input}" → ${color}`)
+					(rawInput, commandKey) => {
+						_log(`command matched: "${commandKey}" → ${color}`)
 						setBorderColor(color)
 					},
 				])
@@ -37,12 +38,19 @@ const App = () => {
 			<Vocal
 				lang="fr"
 				commands={commands}
+				continuous={continuous}
 				onStart={() => _log('start')}
 				onEnd={() => _log('end')}
-				onResult={(result) => _log(`result: "${result}"`)}
+				onResult={(result) => _log(`transcript: "${result}"`)}
 				onError={(e) => _log(`error: ${e.message}`)}
 				maxAlternatives={3}
 			/>
+            <p style={{ fontSize: 12, color: '#666', margin: '8px 0' }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <input type="checkbox" checked={continuous} onChange={(e) => setContinuous(e.target.checked)} />
+                Mode continu
+              </label>
+            </p>
 			<p style={{ fontSize: 12, color: '#666', margin: '8px 0' }}>
 				Commandes :{' '}
 				{Object.keys(COMMANDS).map((k, i) => (