STT: Don't change state if SR is unavailable and Reinit SR on customSpeechRecognizer runtime changing (#31213)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme/js/__internal/core/speech_recognition_adapter.ts

@@ -85,4 +85,8 @@ export class SpeechRecognitionAdapter {
   dispose(): void {
     this._speechRecognition = null;
   }
+
+  isAvailable(): boolean {
+    return Boolean(this._speechRecognition);
+  }
 }

packages/devextreme/js/__internal/ui/speech_to_text/speech_to_text.ts

@@ -228,7 +228,10 @@ class SpeechToText extends Widget<Properties> {
   }
 
   private _handleStartClick(e: ClickEvent): void {
-    if (!this._isCustomSpeechRecognitionEnabled()) {
+    const isCustomEnabled = this._isCustomSpeechRecognitionEnabled();
+    const isSRAvailable = this._speechRecognitionAdapter?.isAvailable();
+
+    if (!isCustomEnabled && isSRAvailable) {
       this._setState(SpeechToTextState.LISTENING);
 
       this._speechRecognitionAdapter?.start();
@@ -306,6 +309,7 @@ class SpeechToText extends Widget<Properties> {
     switch (name) {
       case 'customSpeechRecognizer':
         this._handleCustomEngineState();
+        this._initSpeechRecognitionAdapter();
         break;
 
       case 'speechRecognitionConfig':

packages/devextreme/testing/tests/DevExpress.core/speechRecognitionAdapter.tests.js

@@ -165,5 +165,30 @@ QUnit.module('SpeechRecognitionAdapter', {
         speechRecognition.onend();
         assert.strictEqual(adapter._isListening, false, 'reset to false after onend');
     });
+
+    QUnit.test('should return true from isAvailable when SpeechRecognition is supported', function(assert) {
+        const adapter = this.createAdapter();
+
+        assert.strictEqual(adapter.isAvailable(), true, 'isAvailable returns true when SpeechRecognition exists');
+    });
+
+    QUnit.test('should return false from isAvailable when SpeechRecognition is not supported', function(assert) {
+        window.SpeechRecognition = undefined;
+        window.webkitSpeechRecognition = undefined;
+
+        const adapter = this.createAdapter();
+
+        assert.strictEqual(adapter.isAvailable(), false, 'isAvailable returns false when SpeechRecognition is not supported');
+    });
+
+    QUnit.test('should return false from isAvailable after dispose', function(assert) {
+        const adapter = this.createAdapter();
+
+        assert.strictEqual(adapter.isAvailable(), true, 'isAvailable returns true before dispose');
+
+        adapter.dispose();
+
+        assert.strictEqual(adapter.isAvailable(), false, 'isAvailable returns false after dispose');
+    });
 });
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/speechToText.tests.js

@@ -259,7 +259,7 @@ QUnit.module('State Management', moduleConfig, () => {
         const $button = this.getButton();
         $button.trigger('dxclick');
 
-        assert.ok(this.$element.hasClass(SPEECH_TO_TEXT_LISTENING_CLASS), 'manual control works');
+        assert.ok(this.$element.hasClass(SPEECH_TO_TEXT_LISTENING_CLASS), 'native speech recognition processes');
     });
 
     QUnit.test('should handle state transitions with disabled component', function(assert) {
@@ -648,6 +648,32 @@ QUnit.module('Custom Engine Integration', moduleConfig, () => {
 
         assert.ok(this.$element.hasClass(SPEECH_TO_TEXT_LISTENING_CLASS), 'enabled not missed');
     });
+
+    QUnit.test('should reinitialize speech recognition adapter when custom engine settings change', function(assert) {
+        this.reinit({
+            customSpeechRecognizer: {
+                enabled: true,
+                isListening: false,
+            }
+        });
+
+        assert.strictEqual(this.getAdapter(), undefined, 'adapter is unavailable on init');
+
+        this.instance.option('customSpeechRecognizer', {
+            enabled: false,
+            isListening: false,
+        });
+
+        const adapter = this.getAdapter();
+
+        assert.ok(adapter.isAvailable(), 'adapter is available after CSR reinitialization');
+
+        const startSpy = sinon.spy(adapter, 'start');
+        this.getButton().trigger('dxclick');
+
+        assert.ok(startSpy.calledOnce, 'reinitialized adapter works correctly');
+        assert.ok(this.$element.hasClass(SPEECH_TO_TEXT_LISTENING_CLASS), 'state changes correctly with reinitialized adapter');
+    });
 });
 
 QUnit.module('Options', moduleConfig, () => {
@@ -904,6 +930,19 @@ QUnit.module('SpeechRecognitionAdapter integration', moduleConfig, () => {
         assert.ok(startSpy.calledOnce, 'start called once on button click');
     });
 
+    QUnit.test('should not start recognition when adapter is not available', function(assert) {
+        this.reinit();
+        const speechRecognitionAdapter = this.getAdapter();
+        const startSpy = sinon.spy(speechRecognitionAdapter, 'start');
+
+        sinon.stub(speechRecognitionAdapter, 'isAvailable').returns(false);
+
+        this.getButton().trigger('dxclick');
+
+        assert.ok(startSpy.notCalled, 'start not called when adapter is not available');
+        assert.ok(!this.$element.hasClass(SPEECH_TO_TEXT_LISTENING_CLASS), 'state not changed to listening when adapter unavailable');
+    });
+
     QUnit.test('should call stop on speechRecognitionAdapter when stop button clicked', function(assert) {
         this.reinit();
         const speechRecognitionAdapter = this.getAdapter();