botframework-webchat-api 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/providers/SpeechToSpeech/private/useRecorder.spec.tsx

@@ -1,344 +0,0 @@
-/** @jest-environment @happy-dom/jest-environment */
-/// <reference types="jest" />
-
-import { act, render, waitFor, type RenderResult } from '@testing-library/react';
-import React, { type ComponentType } from 'react';
-import { useRecorder } from './useRecorder';
-
-jest.mock('../../Ponyfill/usePonyfill', () => ({ __esModule: true, default: jest.fn(() => [{ Date: global.Date }]) }));
-jest.mock('../../Capabilities/useCapabilities', () => ({
-  __esModule: true,
-  default: jest.fn((selector: (caps: { voiceConfiguration?: { sampleRate: number } }) => unknown) =>
-    selector({ voiceConfiguration: { sampleRate: 24000 } })
-  )
-}));
-
-const mockTrack = {
-  stop: jest.fn()
-};
-
-const mockMediaStream = {
-  getTracks: jest.fn(() => [mockTrack])
-};
-
-const mockMediaDevices = {
-  getUserMedia: jest.fn().mockResolvedValue(mockMediaStream)
-};
-
-const mockWorkletPort = {
-  onmessage: null as ((event: { data: unknown }) => void) | null,
-  postMessage: jest.fn()
-};
-
-const mockWorkletNode = {
-  connect: jest.fn(),
-  disconnect: jest.fn(),
-  port: mockWorkletPort
-};
-
-const mockSourceNode = {
-  connect: jest.fn(),
-  disconnect: jest.fn()
-};
-
-const mockAudioContext = {
-  audioWorklet: {
-    addModule: jest.fn().mockResolvedValue(undefined)
-  },
-  createMediaStreamSource: jest.fn(() => mockSourceNode),
-  destination: {},
-  resume: jest.fn().mockResolvedValue(undefined),
-  state: 'running'
-};
-
-// --- Global Mocks Setup ---
-
-Object.defineProperty(global.navigator, 'mediaDevices', {
-  value: mockMediaDevices,
-  writable: true
-});
-
-global.AudioContext = jest.fn(() => mockAudioContext) as unknown as typeof AudioContext;
-global.AudioWorkletNode = jest.fn(() => mockWorkletNode) as unknown as typeof AudioWorkletNode;
-global.Blob = jest.fn(parts => ({ parts, type: (parts as { type?: string }[])[1]?.type })) as unknown as typeof Blob;
-global.URL.createObjectURL = jest.fn(() => 'blob:http://localhost/mock-url');
-global.URL.revokeObjectURL = jest.fn();
-global.btoa = jest.fn(str => `btoa(${str})`);
-
-// --- Tests ---
-
-describe('useRecorder', () => {
-  let onAudioChunk: jest.Mock;
-  let HookApp: ComponentType<{ onAudioChunk: (base64: string, timestamp: string) => void }>;
-  let hookData: ReturnType<typeof useRecorder> | undefined;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let renderResult: RenderResult;
-
-  beforeEach(() => {
-    // Clear all mocks before each test
-    jest.clearAllMocks();
-    onAudioChunk = jest.fn();
-    hookData = undefined;
-    mockWorkletPort.onmessage = null;
-    (mockAudioContext.state as string) = 'running';
-
-    HookApp = ({ onAudioChunk: onChunk }) => {
-      hookData = useRecorder(onChunk);
-      return null;
-    };
-  });
-
-  test('should return record function', () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-    expect(typeof hookData?.record).toBe('function');
-  });
-
-  test('should start recording when record is called', async () => {
-    renderResult = render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledTimes(1);
-    });
-
-    expect(global.AudioContext).toHaveBeenCalledTimes(1);
-    expect(mockAudioContext.audioWorklet.addModule).toHaveBeenCalledTimes(1);
-    expect(global.AudioWorkletNode).toHaveBeenCalledWith(expect.anything(), 'audio-recorder', {
-      processorOptions: { bufferSize: 2400 }
-    });
-    expect(mockWorkletNode.connect).toHaveBeenCalledTimes(1);
-    expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'START' });
-  });
-
-  test('should stop recording when returned cleanup function is called', async () => {
-    renderResult = render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    let stopRecording: (() => void) | undefined;
-    // Start recording
-    act(() => {
-      stopRecording = hookData?.record();
-    });
-
-    // Wait for async startRecording to complete
-    await waitFor(() => {
-      expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'START' });
-    });
-
-    // Stop recording
-    act(() => {
-      stopRecording?.();
-    });
-
-    expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'STOP' });
-    expect(mockWorkletNode.disconnect).toHaveBeenCalledTimes(1);
-    expect(mockTrack.stop).toHaveBeenCalledTimes(1);
-  });
-
-  test('should process audio chunks sent from the worklet', async () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => expect(mockWorkletPort.onmessage).not.toBeNull());
-
-    // Simulate a message from the audio worklet
-    const mockAudioData = new Float32Array([0.1, 0.2, -0.1]);
-    act(() => {
-      mockWorkletPort.onmessage!({
-        data: {
-          eventType: 'audio',
-          audioData: mockAudioData
-        }
-      });
-    });
-
-    await waitFor(() => expect(onAudioChunk).toHaveBeenCalledTimes(1));
-    expect(global.btoa).toHaveBeenCalled();
-    // Check that timestamp is passed as second argument
-    expect(onAudioChunk).toHaveBeenCalledWith(expect.any(String), expect.any(String));
-  });
-
-  test('should handle suspended audio context by resuming it', async () => {
-    (mockAudioContext.state as string) = 'suspended';
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(mockAudioContext.resume).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  test('should reuse existing AudioContext on subsequent calls', async () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    let stopRecording: (() => void) | undefined;
-    act(() => {
-      stopRecording = hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'START' });
-    });
-
-    act(() => {
-      stopRecording?.();
-    });
-
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(mockWorkletPort.postMessage).toHaveBeenCalledTimes(3); // START, STOP, START
-    });
-
-    // AudioContext should only be created once
-    expect(global.AudioContext).toHaveBeenCalledTimes(1);
-  });
-
-  test('should request microphone with correct audio constraints', async () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith({
-        audio: {
-          channelCount: 1,
-          echoCancellation: true,
-          sampleRate: 24000
-        }
-      });
-    });
-  });
-
-  test('should return mute function', () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-    expect(typeof hookData?.mute).toBe('function');
-  });
-
-  test('should send MUTE command and stop media stream when mute is called', async () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    // Start recording first
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'START' });
-    });
-    await waitFor(() => expect(mockWorkletPort.onmessage).not.toBeNull());
-
-    // Clear mocks to isolate mute behavior
-    mockWorkletPort.postMessage.mockClear();
-    mockTrack.stop.mockClear();
-    mockSourceNode.disconnect.mockClear();
-
-    // Call mute
-    act(() => {
-      hookData?.mute();
-    });
-
-    // Should send MUTE command to worklet
-    expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'MUTE' });
-    // Should stop media stream tracks (mic indicator OFF)
-    expect(mockTrack.stop).toHaveBeenCalledTimes(1);
-    // Should disconnect source node
-    expect(mockSourceNode.disconnect).toHaveBeenCalledTimes(1);
-
-    // Clear to track only muted audio
-    onAudioChunk.mockClear();
-    (global.btoa as jest.Mock).mockClear();
-
-    // Simulate audio worklet sending silent frame (all zeros) while muted
-    const silentAudioData = new Float32Array(128).fill(0);
-    act(() => {
-      mockWorkletPort.onmessage!({
-        data: {
-          eventType: 'audio',
-          audioData: silentAudioData
-        }
-      });
-    });
-
-    await waitFor(() => expect(onAudioChunk).toHaveBeenCalledTimes(1));
-
-    // Verify btoa was called with data representing zeros
-    expect(global.btoa).toHaveBeenCalled();
-    const [[btoaCall]] = (global.btoa as jest.Mock).mock.calls;
-    // All characters should be null characters (representing 16-bit zeros)
-    const allZeros = [...btoaCall].every((char: string) => char.charCodeAt(0) === 0);
-    expect(allZeros).toBe(true);
-  });
-
-  test('should return unmute function from mute() that sends UNMUTE and restarts media stream', async () => {
-    render(<HookApp onAudioChunk={onAudioChunk} />);
-
-    // Start recording first
-    act(() => {
-      hookData?.record();
-    });
-
-    await waitFor(() => {
-      expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'START' });
-    });
-    await waitFor(() => expect(mockWorkletPort.onmessage).not.toBeNull());
-
-    // Call mute and get unmute function
-    let unmute: (() => void) | undefined;
-    act(() => {
-      unmute = hookData?.mute();
-    });
-
-    // Clear mocks to isolate unmute behavior
-    mockWorkletPort.postMessage.mockClear();
-    mockMediaDevices.getUserMedia.mockClear();
-
-    // Call unmute
-    act(() => {
-      unmute?.();
-    });
-
-    // Should send UNMUTE command to worklet
-    expect(mockWorkletPort.postMessage).toHaveBeenCalledWith({ command: 'UNMUTE' });
-    // Should restart media stream
-    await waitFor(() => {
-      expect(mockMediaDevices.getUserMedia).toHaveBeenCalledTimes(1);
-    });
-
-    // Clear mocks to track audio after unmute
-    onAudioChunk.mockClear();
-    (global.btoa as jest.Mock).mockClear();
-
-    // Simulate real audio data after unmute (non-zero values)
-    const realAudioData = new Float32Array([0.7, -0.5, 0.9, -0.2, 0.4]);
-    act(() => {
-      mockWorkletPort.onmessage!({
-        data: {
-          eventType: 'audio',
-          audioData: realAudioData
-        }
-      });
-    });
-
-    await waitFor(() => expect(onAudioChunk).toHaveBeenCalledTimes(1));
-
-    // Verify real audio (non-zero) was processed
-    expect(global.btoa).toHaveBeenCalled();
-    const [[btoaCall]] = (global.btoa as jest.Mock).mock.calls;
-    // Real audio should have non-zero bytes
-    const hasNonZero = [...btoaCall].some((char: string) => char.charCodeAt(0) !== 0);
-    expect(hasNonZero).toBe(true);
-  });
-});

package/src/providers/SpeechToSpeech/private/useRecorder.ts

@@ -1,220 +0,0 @@
-import { useRef, useCallback, useMemo } from 'react';
-import useCapabilities from '../../Capabilities/useCapabilities';
-import usePonyfill from '../../Ponyfill/usePonyfill';
-
-// Minimum AudioWorkletProcessor definition for TypeScript recognition
-// adding reference of worker does not work
-declare class AudioWorkletProcessor {
-  buffer: number[];
-  bufferSize: number;
-  constructor(options?: AudioWorkletNodeOptions);
-  muted: boolean;
-  process(inputs: Float32Array[][], outputs: Float32Array[][], parameters: Record<string, Float32Array>): boolean;
-  readonly port: MessagePort;
-  recording: 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 () {
-  const RENDER_QUANTUM = 128;
-  const SILENT_FRAME = new Float32Array(RENDER_QUANTUM);
-
-  class AudioRecorderProcessor extends AudioWorkletProcessor {
-    constructor(options: AudioWorkletNodeOptions) {
-      super();
-      this.buffer = [];
-      this.bufferSize = options.processorOptions.bufferSize;
-      this.muted = false;
-      this.recording = false;
-
-      this.port.onmessage = e => {
-        if (e.data.command === 'START') {
-          this.recording = true;
-        } else if (e.data.command === 'STOP') {
-          this.recording = false;
-          this.buffer = [];
-        } else if (e.data.command === 'MUTE') {
-          this.muted = true;
-        } else if (e.data.command === 'UNMUTE') {
-          this.muted = false;
-        }
-      };
-    }
-
-    process(inputs: Float32Array[][]) {
-      if (this.recording) {
-        // Use real audio when not muted, otherwise silent frame to keep connection alive.
-        const inputAudio = inputs[0]?.[0];
-        const audioData = this.muted || !inputAudio ? SILENT_FRAME : inputAudio;
-        this.buffer.push(...audioData);
-
-        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;
-    }
-  }
-
-  registerProcessor('audio-recorder', AudioRecorderProcessor);
-}})()`;
-
-const INT16_MIN = -32768;
-const INT16_MAX = 32767;
-const INT16_SCALE = 32767;
-const DEFAULT_SAMPLE_RATE = 24000;
-const DEFAULT_CHUNK_SIZE_IN_MS = 100;
-const MS_IN_SECOND = 1000;
-
-export function useRecorder(onAudioChunk: (base64: string, timestamp: string) => void) {
-  const [{ Date }] = usePonyfill();
-  const audioCtxRef = useRef<AudioContext | undefined>(undefined);
-  const sourceRef = useRef<MediaStreamAudioSourceNode | undefined>(undefined);
-  const streamRef = useRef<MediaStream | undefined>(undefined);
-  const voiceConfiguration = useCapabilities(caps => caps.voiceConfiguration);
-  const workletRef = useRef<AudioWorkletNode | undefined>(undefined);
-
-  const chunkIntervalMs = voiceConfiguration?.chunkIntervalMs ?? DEFAULT_CHUNK_SIZE_IN_MS;
-  const sampleRate = voiceConfiguration?.sampleRate ?? DEFAULT_SAMPLE_RATE;
-
-  const stopMediaStream = useCallback(() => {
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach(track => track.stop());
-      streamRef.current = undefined;
-    }
-  }, [streamRef]);
-
-  // Acquire MediaStream and connect source to worklet
-  const acquireAndConnectMediaStream = useCallback(async () => {
-    const audioCtx = audioCtxRef.current;
-    if (!audioCtx) {
-      return;
-    }
-
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: {
-        channelCount: 1,
-        echoCancellation: true,
-        sampleRate
-      }
-    });
-    streamRef.current = stream;
-
-    const source = audioCtx.createMediaStreamSource(stream);
-    if (workletRef.current) {
-      source.connect(workletRef.current);
-    }
-    sourceRef.current = source;
-  }, [audioCtxRef, sampleRate, sourceRef, streamRef, workletRef]);
-
-  const stopRecording = useCallback(() => {
-    if (workletRef.current) {
-      workletRef.current.port.postMessage({ command: 'STOP' });
-      workletRef.current.disconnect();
-      workletRef.current = undefined;
-    }
-    stopMediaStream();
-  }, [stopMediaStream, workletRef]);
-
-  const initAudio = useCallback(async () => {
-    if (audioCtxRef.current) {
-      return;
-    }
-    const audioCtx = new AudioContext({ sampleRate });
-    const blob = new Blob([audioProcessorCode], {
-      type: 'application/javascript'
-    });
-    // eslint-disable-next-line no-restricted-properties
-    const url = URL.createObjectURL(blob);
-    await audioCtx.audioWorklet.addModule(url);
-    URL.revokeObjectURL(url);
-    // eslint-disable-next-line require-atomic-updates
-    audioCtxRef.current = audioCtx;
-  }, [audioCtxRef, sampleRate]);
-
-  const startRecording = useCallback(async () => {
-    await initAudio();
-    const audioCtx = audioCtxRef.current!; // audioCtx must be available after initAudio().
-    if (audioCtx.state === 'suspended') {
-      await audioCtx.resume();
-    }
-
-    const worklet = new AudioWorkletNode(audioCtx, 'audio-recorder', {
-      processorOptions: {
-        bufferSize: (sampleRate * chunkIntervalMs) / MS_IN_SECOND
-      }
-    });
-
-    worklet.port.onmessage = e => {
-      if (e.data.eventType === 'audio') {
-        const timestamp = new Date().toISOString();
-        const float32 = e.data.audioData;
-        const int16 = new Int16Array(float32.length);
-        for (let i = 0; i < float32.length; i++) {
-          int16[+i] = Math.max(INT16_MIN, Math.min(INT16_MAX, float32.at(i) * INT16_SCALE));
-        }
-        const base64 = btoa(String.fromCharCode(...new Uint8Array(int16.buffer)));
-        onAudioChunk(base64, timestamp);
-      }
-    };
-
-    worklet.connect(audioCtx.destination);
-    workletRef.current = worklet;
-
-    await acquireAndConnectMediaStream();
-
-    worklet.port.postMessage({ command: 'START' });
-  }, [
-    acquireAndConnectMediaStream,
-    audioCtxRef,
-    chunkIntervalMs,
-    Date,
-    initAudio,
-    onAudioChunk,
-    sampleRate,
-    workletRef
-  ]);
-
-  const muteRecording = useCallback(() => {
-    // Stop MediaStream (mic indicator OFF) and disconnect source
-    stopMediaStream();
-
-    if (sourceRef.current) {
-      sourceRef.current.disconnect();
-      sourceRef.current = undefined;
-    }
-
-    // Tell worklet to output silence
-    if (workletRef.current) {
-      workletRef.current.port.postMessage({ command: 'MUTE' });
-    }
-
-    // Return unmute function
-    return () => {
-      if (!audioCtxRef.current || !workletRef.current) {
-        return;
-      }
-
-      // Tell worklet to use real audio
-      workletRef.current.port.postMessage({ command: 'UNMUTE' });
-
-      // Restart MediaStream and reconnect source (fire and forget)
-      acquireAndConnectMediaStream();
-    };
-  }, [acquireAndConnectMediaStream, audioCtxRef, sourceRef, stopMediaStream, workletRef]);
-
-  const record = useCallback(() => {
-    startRecording();
-    return stopRecording;
-  }, [startRecording, stopRecording]);
-
-  const mute = useCallback(() => muteRecording(), [muteRecording]);
-
-  return useMemo(() => ({ mute, record }), [mute, record]);
-}

package/src/providers/StyleOptions/StyleOptionsComposer.tsx

@@ -1,46 +0,0 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import React, { memo, useMemo } from 'react';
-import { custom, is, object, optional, pipe, readonly, type InferInput } from 'valibot';
-
-import { type StyleOptions } from '../../StyleOptions';
-import StyleOptionsContext, { StyleOptionsContextType, useStyleOptionsContext } from './private/StyleOptionsContext';
-import rectifyStyleOptions from './private/rectifyStyleOptions';
-
-const styleOptionsComposerPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    styleOptions: optional(custom<StyleOptions>(value => is(object({}), value)))
-  }),
-  readonly()
-);
-
-type StyleOptionsComposerProps = InferInput<typeof styleOptionsComposerPropsSchema>;
-
-function StyleOptionsComposer(props: StyleOptionsComposerProps) {
-  const { children, styleOptions } = validateProps(styleOptionsComposerPropsSchema, props);
-
-  const {
-    styleOptionsState: [currentStyleOptionsState]
-  } = useStyleOptionsContext();
-
-  const context = useMemo<Readonly<StyleOptionsContextType>>(
-    () =>
-      Object.freeze({
-        styleOptionsState: Object.freeze([
-          Object.freeze(
-            rectifyStyleOptions({
-              ...currentStyleOptionsState,
-              ...styleOptions
-            })
-          )
-        ] as const)
-      }),
-    [currentStyleOptionsState, styleOptions]
-  );
-
-  return <StyleOptionsContext.Provider value={context}>{children}</StyleOptionsContext.Provider>;
-}
-
-StyleOptionsComposer.displayName = 'StyleOptionsComposer';
-
-export default memo(StyleOptionsComposer);

package/src/providers/StyleOptions/private/StyleOptionsContext.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import defaultStyleOptions from '../../../defaultStyleOptions';
-import { type StrictStyleOptions } from '../../../StyleOptions';
-import rectifyStyleOptions from './rectifyStyleOptions';
-
-type StyleOptionsContextType = {
-  readonly styleOptionsState: readonly [Readonly<StrictStyleOptions>];
-};
-
-const StyleOptionsContext = createContext<StyleOptionsContextType>({
-  styleOptionsState: Object.freeze([rectifyStyleOptions(defaultStyleOptions)])
-});
-
-StyleOptionsContext.displayName = 'StyleOptionsContext';
-
-const useStyleOptionsContext = () => useContext(StyleOptionsContext);
-
-export default StyleOptionsContext;
-export { useStyleOptionsContext, type StyleOptionsContextType };

package/src/providers/StyleOptions/private/rectifyStyleOptions.ts

@@ -1,6 +0,0 @@
-import type { StrictStyleOptions, StyleOptions } from '../../../StyleOptions';
-import normalizeStyleOptions from '../../../normalizeStyleOptions';
-
-export default function rectifyStyleOptions(styleOptions: StyleOptions): StrictStyleOptions {
-  return normalizeStyleOptions(styleOptions);
-}

package/src/providers/StyleOptions/useStyleOptions.ts

@@ -1,6 +0,0 @@
-import { type StrictStyleOptions } from '../../StyleOptions';
-import { useStyleOptionsContext } from './private/StyleOptionsContext';
-
-export default function useStyleOptions(): readonly [StrictStyleOptions] {
-  return useStyleOptionsContext().styleOptionsState;
-}