botframework-webchat-api 4.18.1 → 4.19.0

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

@@ -0,0 +1,92 @@
+import { useRef, useCallback, useMemo } from 'react';
+import useCapabilities from '../../Capabilities/useCapabilities';
+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 lastSourceRef = useRef<AudioBufferSourceNode | undefined>(undefined);
+  const nextPlayTimeRef = useRef(0);
+  const voiceConfiguration = useCapabilities(caps => caps.voiceConfiguration);
+  const [, setVoiceState] = useVoiceStateWritable();
+
+  const sampleRate = voiceConfiguration?.sampleRate ?? DEFAULT_SAMPLE_RATE;
+
+  const queueAudio = useCallback(
+    async (base64: string) => {
+      if (!audioCtxRef.current) {
+        audioCtxRef.current = new AudioContext({ sampleRate });
+      }
+      const audioCtx = audioCtxRef.current;
+      await audioCtx.resume();
+
+      try {
+        const bytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+        const int16Bytes = new Int16Array(bytes.buffer);
+        const float32Bytes = new Float32Array(int16Bytes.length);
+
+        for (let i = 0; i < int16Bytes.length; i++) {
+          float32Bytes[+i] = int16Bytes.at(i) / INT16_SCALE;
+        }
+
+        const buffer = audioCtx.createBuffer(1, float32Bytes.length, audioCtx.sampleRate);
+        buffer.getChannelData(0).set(float32Bytes);
+
+        const src = audioCtx.createBufferSource();
+        src.buffer = buffer;
+        src.connect(audioCtx.destination);
+
+        // Clear previous source's onended to avoid stale callbacks
+        if (lastSourceRef.current) {
+          lastSourceRef.current.onended = null;
+        }
+
+        src.onended = () => {
+          src.disconnect();
+          src.buffer = null;
+          // Only the last source's onended should trigger state change to 'listening'
+          if (lastSourceRef.current === src) {
+            setVoiceState('listening');
+          }
+        };
+
+        lastSourceRef.current = src;
+        const isFirstChunk = nextPlayTimeRef.current <= audioCtx.currentTime;
+        // Only dispatch bot_speaking on first chunk, we are resetting refs on stopAllAudio (bargein, mic off)
+        if (isFirstChunk) {
+          setVoiceState('bot_speaking');
+        }
+
+        nextPlayTimeRef.current = Math.max(nextPlayTimeRef.current, audioCtx.currentTime);
+        src.start(nextPlayTimeRef.current);
+        nextPlayTimeRef.current += buffer.duration;
+      } catch (error) {
+        console.warn('botframework-webchat: Error during audio playback in useAudioPlayer:', error);
+      }
+    },
+    [setVoiceState, sampleRate]
+  );
+
+  const stopAllAudio = useCallback(() => {
+    nextPlayTimeRef.current = 0;
+    if (lastSourceRef.current) {
+      lastSourceRef.current.onended = null;
+      lastSourceRef.current = undefined;
+    }
+    if (audioCtxRef.current) {
+      audioCtxRef.current.close();
+      audioCtxRef.current = undefined;
+    }
+  }, []);
+
+  return useMemo(
+    () =>
+      Object.freeze({
+        queueAudio,
+        stopAllAudio
+      }),
+    [queueAudio, stopAllAudio]
+  );
+}

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

@@ -0,0 +1,344 @@
+/** @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

@@ -0,0 +1,220 @@
+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

@@ -0,0 +1,46 @@
+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);