remaining review comment fixed

Author: pranavjoshi001

packages/api/src/hooks/internal/useSetVoiceState.ts

@@ -0,0 +1,18 @@
+import { setVoiceState, type VoiceState } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from './WebChatReduxContext';
+
+/**
+ * Internal hook to set the voice state.
+ */
+export default function useVoiceStateWritable(): readonly [VoiceState, (state: VoiceState) => void] {
+  const dispatch = useDispatch();
+  const setter = useCallback(
+    (state: VoiceState) => {
+      dispatch(setVoiceState(state));
+    },
+    [dispatch]
+  );
+  const value = useSelector(({ voice }) => voice.voiceState);
+  return Object.freeze([value, setter]);
+}

packages/api/src/hooks/internal/useVoiceStateWritable.ts

@@ -1,5 +1,5 @@
 import type { VoiceState } from 'botframework-webchat-core';
-import { useSelector } from './internal/WebChatReduxContext';
+import useVoiceStateWritable from './internal/useVoiceStateWritable';
 
 /**
  * Hook to get the voice state.
@@ -10,8 +10,6 @@ import { useSelector } from './internal/WebChatReduxContext';
  * - 'processing': User finished speaking, server is processing
  * - 'bot_speaking': Bot is speaking (audio playback)
  */
-export default function useVoiceState(): [VoiceState] {
-  return [useSelector(({ voice }) => voice.voiceState)];
+export default function useVoiceState(): readonly [VoiceState] {
+  return Object.freeze([useVoiceStateWritable()[0]]);
 }
-
-export type { VoiceState };

packages/api/src/hooks/useVoiceState.ts

@@ -18,7 +18,7 @@ export const VoiceHandlerBridge = () => {
       return;
     }
     return registerVoiceHandler({ queueAudio, stopAllAudio });
-  }, [registerVoiceHandler, queueAudio, stopAllAudio, showMicrophoneButton]);
+  }, [registerVoiceHandler, queueAudio, showMicrophoneButton, stopAllAudio]);
 
   return null;
 };

packages/api/src/providers/SpeechToSpeech/private/VoiceHandlerBridge.tsx

@@ -9,22 +9,22 @@ import { useAudioPlayer } from './useAudioPlayer';
 // Mock setVoiceState function
 const mockSetVoiceState = jest.fn();
 
-// Mock useSetVoiceState hook
-jest.mock('../../../hooks/internal/useSetVoiceState', () => ({
+// Mock useVoiceStateWritable hook - returns [state, setVoiceState] array
+jest.mock('../../../hooks/internal/useVoiceStateWritable', () => ({
   __esModule: true,
-  default: jest.fn(() => mockSetVoiceState)
+  default: jest.fn(() => [undefined, mockSetVoiceState])
 }));
 
 // Mock AudioContext and related APIs
 const mockAudioContext = {
-  sampleRate: 24000,
+  close: jest.fn().mockResolvedValue(undefined),
+  createBuffer: jest.fn(),
+  createBufferSource: jest.fn(),
   currentTime: 0,
   destination: {},
-  state: 'running',
   resume: jest.fn().mockResolvedValue(undefined),
-  close: jest.fn().mockResolvedValue(undefined),
-  createBuffer: jest.fn(),
-  createBufferSource: jest.fn()
+  sampleRate: 24000,
+  state: 'running'
 };
 
 const mockAudioBuffer = {
@@ -36,10 +36,10 @@ const mockAudioBuffer = {
 const createMockBufferSource = () => ({
   buffer: null as typeof mockAudioBuffer | null,
   connect: jest.fn(),
-  start: jest.fn(),
-  stop: jest.fn(),
   disconnect: jest.fn(),
-  onended: null as (() => void) | null
+  onended: null as (() => void) | null,
+  start: jest.fn(),
+  stop: jest.fn()
 });
 
 // Track all created buffer sources for assertions

packages/api/src/providers/SpeechToSpeech/private/useAudioPlayer.spec.tsx

@@ -1,14 +1,14 @@
 import { useRef, useCallback, useMemo } from 'react';
-import useSetVoiceState from '../../../hooks/internal/useSetVoiceState';
+import useVoiceStateWritable from '../../../hooks/internal/useVoiceStateWritable';
 
 const DEFAULT_SAMPLE_RATE = 24000;
 const INT16_SCALE = 32768;
 
 export function useAudioPlayer() {
   const audioCtxRef = useRef<AudioContext | undefined>(undefined);
-  const nextPlayTimeRef = useRef(0);
   const lastSourceRef = useRef<AudioBufferSourceNode | undefined>(undefined);
-  const setVoiceState = useSetVoiceState();
+  const nextPlayTimeRef = useRef(0);
+  const [, setVoiceState] = useVoiceStateWritable();
 
   const queueAudio = useCallback(
     async (base64: string) => {

packages/api/src/providers/SpeechToSpeech/private/useAudioPlayer.ts

@@ -20,8 +20,8 @@ const mockMediaDevices = {
 };
 
 const mockWorkletPort = {
-  postMessage: jest.fn(),
-  onmessage: null as ((event: { data: unknown }) => void) | null
+  onmessage: null as ((event: { data: unknown }) => void) | null,
+  postMessage: jest.fn()
 };
 
 const mockWorkletNode = {
@@ -31,15 +31,15 @@ const mockWorkletNode = {
 };
 
 const mockAudioContext = {
-  state: 'running',
-  resume: jest.fn().mockResolvedValue(undefined),
+  audioWorklet: {
+    addModule: jest.fn().mockResolvedValue(undefined)
+  },
   createMediaStreamSource: jest.fn(() => ({
     connect: jest.fn()
   })),
   destination: {},
-  audioWorklet: {
-    addModule: jest.fn().mockResolvedValue(undefined)
-  }
+  resume: jest.fn().mockResolvedValue(undefined),
+  state: 'running'
 };
 
 // --- Global Mocks Setup ---
@@ -206,8 +206,8 @@ describe('useRecorder', () => {
       expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith({
         audio: {
           channelCount: 1,
-          sampleRate: 24000,
-          echoCancellation: true
+          echoCancellation: true,
+          sampleRate: 24000
         }
       });
     });

packages/api/src/providers/SpeechToSpeech/private/useRecorder.spec.tsx

@@ -5,51 +5,43 @@ import usePonyfill from '../../Ponyfill/usePonyfill';
 // adding reference of worker does not work
 declare class AudioWorkletProcessor {
   readonly port: MessagePort;
+  recording: boolean;
+  buffer: number[];
+  bufferSize: number;
   constructor(options?: AudioWorkletNodeOptions);
   process(inputs: Float32Array[][], outputs: Float32Array[][], parameters: Record<string, Float32Array>): boolean;
 }
 declare function registerProcessor(name: string, processorCtor: typeof AudioWorkletProcessor): void;
 
 /**
  * CSP Compliant: check __tests__/html2/speechToSpeech/csp.recording.html for CSP compliance tests.
+ * NOTE: This code is stringified and run in an AudioWorklet context, so it must be plain JavaScript
+ * without any TypeScript annotations that could be transformed by the compiler.
  */
 const audioProcessorCode = `(${function () {
-  type RecorderState = { recording: boolean; buffer: number[]; bufferSize: number };
   class AudioRecorderProcessor extends AudioWorkletProcessor {
     constructor(options: AudioWorkletNodeOptions) {
       super();
-      const state: RecorderState = {
-        recording: false,
-        buffer: [],
-        bufferSize: options.processorOptions.bufferSize
-      };
-      Object.assign(this, state);
+      this.buffer = [];
+      this.bufferSize = options.processorOptions.bufferSize;
+      this.recording = false;
 
-      this.port.onmessage = (e: MessageEvent) => {
-        const state = this as unknown as RecorderState;
+      this.port.onmessage = e => {
         if (e.data.command === 'START') {
-          state.recording = true;
+          this.recording = true;
         } else if (e.data.command === 'STOP') {
-          state.recording = false;
-          state.buffer = [];
+          this.recording = false;
+          this.buffer = [];
         }
       };
     }
 
-    sendBuffer() {
-      const { buffer, bufferSize } = this as unknown as RecorderState;
-      while (buffer.length >= bufferSize) {
-        const chunk = buffer.splice(0, bufferSize);
-        this.port.postMessage({ eventType: 'audio', audioData: new Float32Array(chunk) });
-      }
-    }
-
     process(inputs: Float32Array[][]) {
-      const state = this as unknown as RecorderState;
-      if (inputs[0]?.length && state.recording) {
-        state.buffer.push(...inputs[0][0]);
-        if (state.buffer.length >= state.bufferSize) {
-          this.sendBuffer();
+      if (inputs[0] && inputs[0].length && this.recording) {
+        this.buffer.push(...inputs[0][0]);
+        while (this.buffer.length >= this.bufferSize) {
+          const chunk = this.buffer.splice(0, this.bufferSize);
+          this.port.postMessage({ eventType: 'audio', audioData: new Float32Array(chunk) });
         }
       }
       return true;
@@ -109,8 +101,8 @@ export function useRecorder(onAudioChunk: (base64: string, timestamp: string) =>
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
         channelCount: 1,
-        sampleRate: DEFAULT_SAMPLE_RATE,
-        echoCancellation: true
+        echoCancellation: true,
+        sampleRate: DEFAULT_SAMPLE_RATE
       }
     });
     streamRef.current = stream;