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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

package/README.md

@@ -224,6 +224,8 @@ fuse.js is an optional peer dependency — install it separately to enable fuzzy
 | 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                                                         |
@@ -298,7 +300,7 @@ const App = () => {
 #### Signature
 
 ```
-useVocal(lang, grammars, maxAlternatives)
+useVocal(lang, grammars, maxAlternatives, continuous)
 ```
 
 | Args            | Type              | Default | Description                                                                                     |
@@ -306,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) => (

package/dist/index.es.js

@@ -672,39 +672,41 @@ x(N, "defaultOptions", {
 });
 //#endregion
 //#region node_modules/@untemps/utils/dist/function/isFunction.js
-var P = (e) => typeof e == "function", F = (e = "en-US", t = null, i = 1, o = null) => {
-	let s = a(null);
+var P = (e) => typeof e == "function", F = (e = "en-US", t = null, i = 1, o = !1, s = null) => {
+	let c = a(null);
 	return r(() => {
-		if (N.isSupported) return s.current = o || new N({
+		if (N.isSupported) return c.current = s || new N({
 			lang: e,
 			grammars: t,
-			maxAlternatives: i
+			maxAlternatives: i,
+			continuous: o
 		}), () => {
-			s.current.abort(), s.current.cleanup();
+			c.current.abort(), c.current.cleanup();
 		};
 	}, [
 		e,
 		t,
 		i,
-		o
-	]), [s, {
+		o,
+		s
+	]), [c, {
 		start: n(() => {
-			s.current && s.current.start();
+			c.current && c.current.start();
 		}, []),
 		stop: n(() => {
-			s.current && s.current.stop();
+			c.current && c.current.stop();
 		}, []),
 		abort: n(() => {
-			s.current && s.current.abort();
+			c.current && c.current.abort();
 		}, []),
 		subscribe: n((e, t) => {
-			s.current && s.current.addEventListener(e, t);
+			c.current && c.current.addEventListener(e, t);
 		}, []),
 		unsubscribe: n((e, t) => {
-			s.current && s.current.removeEventListener(e, t);
+			c.current && c.current.removeEventListener(e, t);
 		}, []),
 		clean: n(() => {
-			s.current && s.current.cleanup();
+			c.current && c.current.cleanup();
 		}, [])
 	}];
 }, I = (e, t = 0) => {
@@ -742,17 +744,20 @@ var P = (e) => typeof e == "function", F = (e = "en-US", t = null, i = 1, o = nu
 			let t = e.trim().split(/\s+/), r = t.length > 1 ? t : [e.trim()];
 			for (let e of r) {
 				let t = e.toLowerCase();
-				if (t in n) return n[t]?.(e);
+				if (t in n) return n[t]?.(e, t);
 			}
 			return null;
 		}
 		let r = c.current;
 		if (r) {
 			let i = r.search(e).filter((e) => e.score < t);
-			if (i?.length) return n[i[0].item.toLowerCase()]?.(e);
+			if (i?.length) {
+				let t = i[0].item.toLowerCase();
+				return n[t]?.(e, t);
+			}
 		} else {
 			let t = e.toLowerCase(), r = o.find((e) => t.includes(e) || e.includes(t));
-			if (r) return n[r]?.(e);
+			if (r) return n[r]?.(e, r);
 		}
 		return null;
 	};
@@ -950,32 +955,39 @@ var P = (e) => typeof e == "function", F = (e = "en-US", t = null, i = 1, o = nu
 	})] })
 }), te = (e, t) => {
 	for (let { alternatives: n } of e) for (let e of n) if (t(e) !== null) return;
-}, V = ({ children: r, commands: s = null, lang: c = "en-US", grammars: l = null, timeout: u = 3e3, precision: d = .4, maxAlternatives: f = 1, ariaLabel: p = "start recognition", style: m = null, className: h = null, outlineStyle: g = "2px solid", onStart: _ = null, onEnd: v = null, onSpeechStart: y = null, onSpeechEnd: b = null, onResult: x = null, onError: S = null, onNoMatch: C = null, __rsInstance: w }) => {
-	let T = a(null), [E, D] = o(!1), [, { start: O, stop: k, subscribe: A, unsubscribe: j }] = F(c, l, f, w), M = L(s, d), R = a({});
-	R.current = {
-		onStart: _,
-		onEnd: v,
-		onSpeechStart: y,
-		onSpeechEnd: b,
-		onResult: x,
-		onError: S,
-		onNoMatch: C
+}, V = ({ children: r, commands: s = null, lang: c = "en-US", grammars: l = null, timeout: u = 3e3, silenceTimeout: d = null, precision: f = .4, maxAlternatives: p = 1, continuous: m = !1, ariaLabel: h = "start recognition", style: g = null, className: _ = null, outlineStyle: v = "2px solid", onStart: y = null, onEnd: b = null, onSpeechStart: x = null, onSpeechEnd: S = null, onResult: C = null, onError: w = null, onNoMatch: T = null, __rsInstance: E }) => {
+	let D = a(null), [O, k] = o(!1), [, { start: A, stop: j, subscribe: M, unsubscribe: R }] = F(c, l, p, m, E), z = L(s, f), V = a({});
+	V.current = {
+		onStart: y,
+		onEnd: b,
+		onSpeechStart: x,
+		onSpeechEnd: S,
+		onResult: C,
+		onError: w,
+		onNoMatch: T
 	};
-	let z = a(M);
-	z.current = M;
-	let V = a(null), H = a(null), [U, W] = I(n(() => H.current?.(), []), u), G = n(() => {
+	let H = a(m);
+	H.current = m;
+	let U = a({
+		transcript: "",
+		event: null
+	}), W = a(z);
+	W.current = z;
+	let G = a(null), ne = a(null), re = a(d);
+	re.current = d;
+	let ie = n(() => ne.current?.(), []), [K, q] = I(ie, u), [ae, J] = I(ie, d ?? 0), Y = n(() => {
 		try {
-			D(!1), k();
+			k(!1), j();
 		} catch (e) {
-			R.current.onError?.(e), V.current?.();
+			V.current.onError?.(e), G.current?.();
 		}
-	}, [k]), K = n((e) => {
-		U(), R.current.onStart?.(e);
-	}, [U]), q = n((e) => {
-		W(), R.current.onSpeechStart?.(e);
-	}, [W]), J = n((e) => {
-		U(), R.current.onSpeechEnd?.(e);
-	}, [U]), Y = n((e) => {
+	}, [j]), oe = n((e) => {
+		K(), V.current.onStart?.(e);
+	}, [K]), se = n((e) => {
+		q(), V.current.onSpeechStart?.(e);
+	}, [q]), ce = n((e) => {
+		K(), V.current.onSpeechEnd?.(e);
+	}, [K]), le = n((e) => {
 		let t = Array.from(e?.results ?? [], (e) => {
 			let t = {
 				confidence: -Infinity,
@@ -990,74 +1002,83 @@ var P = (e) => typeof e == "function", F = (e = "en-US", t = null, i = 1, o = nu
 				alternatives: n
 			};
 		}), n = t.map((e) => e.best).join("");
-		W(), G(), te(t, z.current), R.current.onResult?.(n, e);
-	}, [W, G]), X = n((e) => {
-		G(), R.current.onError?.(e);
-	}, [G]), ne = n((e) => {
-		W(), G(), R.current.onNoMatch?.(e);
-	}, [W, G]), Z = n((e) => {
-		W();
+		q(), H.current ? (U.current.transcript = n, U.current.event = e, re.current > 0 && ae()) : (te(t, W.current), Y(), V.current.onResult?.(n, e));
+	}, [
+		q,
+		ae,
+		Y
+	]), X = n((e) => {
+		Y(), V.current.onError?.(e);
+	}, [Y]), ue = n((e) => {
+		q(), Y(), V.current.onNoMatch?.(e);
+	}, [q, Y]), Z = n((e) => {
+		q(), J();
 		try {
-			G(), V.current?.();
+			Y(), G.current?.(), H.current && U.current.transcript && (V.current.onResult?.(U.current.transcript, U.current.event), U.current.transcript = "", U.current.event = null);
 		} finally {
-			R.current.onEnd?.(e);
+			V.current.onEnd?.(e);
 		}
-	}, [W, G]);
-	H.current = Z;
+	}, [
+		q,
+		J,
+		Y
+	]);
+	ne.current = Z;
 	let Q = i(() => ({
-		start: K,
+		start: oe,
 		end: Z,
-		speechstart: q,
-		speechend: J,
-		result: Y,
+		speechstart: se,
+		speechend: ce,
+		result: le,
 		error: X,
-		nomatch: ne
+		nomatch: ue
 	}), [
-		K,
+		oe,
 		Z,
-		q,
-		J,
-		Y,
+		se,
+		ce,
+		le,
 		X,
-		ne
+		ue
 	]);
-	V.current = () => Object.entries(Q).forEach(([e, t]) => j?.(e, t));
+	G.current = () => Object.entries(Q).forEach(([e, t]) => R?.(e, t));
 	let $ = n(() => {
 		try {
-			D(!0), Object.entries(Q).forEach(([e, t]) => A(e, t)), O();
+			U.current.transcript = "", U.current.event = null, J(), k(!0), Object.entries(Q).forEach(([e, t]) => M(e, t)), A();
 		} catch (e) {
 			X(e);
 		}
 	}, [
 		Q,
+		M,
 		A,
-		O,
+		J,
 		X
-	]), re = () => {
-		!h && g && (T.current.style.outline = g);
-	}, ie = () => {
-		!h && g && (T.current.style.outline = "none");
+	]), de = () => {
+		!_ && v && (D.current.style.outline = v);
+	}, fe = () => {
+		!_ && v && (D.current.style.outline = "none");
 	};
-	return N.isSupported ? P(r) ? r($, G, E) : t(r) ? e(r, { ...!E && { onClick: $ } }) : /* @__PURE__ */ (0, B.jsx)("button", {
+	return N.isSupported ? P(r) ? r($, Y, O) : t(r) ? e(r, { ...!O && { onClick: $ } }) : /* @__PURE__ */ (0, B.jsx)("button", {
 		"data-testid": "__vocal-root__",
-		ref: T,
-		role: "button",
-		"aria-label": p,
-		style: h ? null : {
+		ref: D,
+		"aria-label": h,
+		"aria-pressed": O,
+		style: _ ? null : {
 			width: 24,
 			height: 24,
 			backgroundColor: "transparent",
 			border: "none",
 			padding: 0,
-			cursor: E ? "default" : "pointer",
-			...m
+			cursor: !m && O ? "default" : "pointer",
+			...g
 		},
-		className: h,
-		onFocus: re,
-		onBlur: ie,
-		onClick: $,
+		className: _,
+		onFocus: de,
+		onBlur: fe,
+		onClick: O ? Y : $,
 		children: /* @__PURE__ */ (0, B.jsx)(ee, {
-			isActive: E,
+			isActive: O,
 			color: "#aaa"
 		})
 	}) : null;