microsoft · pranavjoshi001 · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025 · Dec 17, 2025
@@ -149,6 +149,7 @@ Breaking changes in this release:
    - Breakpoint: open <kbd>F12</kbd>, select the subject in Element pane, type `$0.webChat.breakpoint.incomingActivity`
 - The `botframework-webchat` package now uses CSS modules for styling purposes, in PR [#5666](https://github.com/microsoft/BotFramework-WebChat/pull/5666), in PR [#5677](https://github.com/microsoft/BotFramework-WebChat/pull/5677) by [@OEvgeny](https://github.com/OEvgeny)
 - 👷🏻 Added `npm run build-browser` script for building test harness package only, in PR [#5667](https://github.com/microsoft/BotFramework-WebChat/pull/5667), by [@compulim](https://github.com/compulim)
+- Added Speech-to-Speech (S2S) support for real-time voice conversations, in PR [#5654](https://github.com/microsoft/BotFramework-WebChat/pull/5654), by [@pranavjoshi](https://github.com/pranavjoshi001)
 
 ### Changed
 

@@ -0,0 +1,23 @@
+/* global AudioContext */
+
+/**
+ * Mocks AudioContext.createBuffer to return buffers with minimum duration.
+ *
+ */
+export function setupMockAudioPlayback() {
+  const originalCreateBuffer = AudioContext.prototype.createBuffer;
+
+  AudioContext.prototype.createBuffer = function (numberOfChannels, length, sampleRate) {
+    // Ensure minimum duration of 0.5 seconds for testing
+    const minSamples = Math.floor(sampleRate * 0.5);
+    const actualLength = Math.max(length, minSamples);
+
+    return originalCreateBuffer.call(this, numberOfChannels, actualLength, sampleRate);
+  };
+
+  return {
+    restore: () => {
+      AudioContext.prototype.createBuffer = originalCreateBuffer;
+    }
+  };
+}
@@ -0,0 +1,32 @@
+/* global AudioContext, navigator */
+
+/**
+ * Mocks navigator.mediaDevices.getUserMedia for testing speechToSpeech functionality.
+ */
+export function setupMockMediaDevices() {
+  if (!navigator.mediaDevices) {
+    navigator.mediaDevices = {};
+  }
+
+  navigator.mediaDevices.getUserMedia = constraints => {
+    const audioContext = new AudioContext({ sampleRate: constraints?.audio?.sampleRate || 24000 });
+    const oscillator = audioContext.createOscillator();
+    const destination = audioContext.createMediaStreamDestination();
+
+    oscillator.connect(destination);
+    oscillator.start();
+
+    const { stream } = destination;
+
+    stream.getTracks().forEach(track => {
+      const originalStop = track.stop.bind(track);
+      track.stop = () => {
+        oscillator.stop();
+        audioContext.close();
+        originalStop();
+      };
+    });
+
+    return stream;
+  };
+}
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <!--
+      Test: Barge-in scenario with full state cycle
+
+      Flow:
+      1. User starts recording → "Listening..."
+      2. Bot sends audio chunks → "Talk to interrupt..." (bot speaking)
+      3. User barges in (server detects) → "Listening..." (user speaking)
+      4. Server processes → "Processing..."
+      5. Bot responds with new audio → "Talk to interrupt..." (bot speaking again)
+      6. User toggles mic off
+    -->
+    <script type="module">
+      import { setupMockMediaDevices } from '/assets/esm/speechToSpeech/mockMediaDevices.js';
+      import { setupMockAudioPlayback } from '/assets/esm/speechToSpeech/mockAudioPlayback.js';
+
+      setupMockMediaDevices();
+      setupMockAudioPlayback();
+    </script>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat, testIds }
+        } = window;
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        render(
+          <FluentThemeProvider variant="fluent">
+            <ReactWebChat 
+              directLine={directLine}
+              store={store}
+              styleOptions={{
+                showMicrophoneButton: true
+              }}
+            />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        const micButton = document.querySelector(`[data-testid="${testIds.sendBoxMicrophoneButton}"]`);
+        const textArea = document.querySelector(`[data-testid="${testIds.sendBoxTextBox}"]`);
+        expect(micButton).toBeTruthy();
+        expect(textArea).toBeTruthy();
+
+        // Start recording
+        await host.click(micButton);
+
+        await pageConditions.became(
+          'Recording started',
+          () => micButton.getAttribute('aria-label')?.includes('Microphone on'),
+          1000
+        );
+
+        // VERIFY: State is "listening"
+        await pageConditions.became(
+          'State: listening → Placeholder: "Listening..."',
+          () => textArea.getAttribute('placeholder') === 'Listening...',
+          2000
+        );
+
+        // Bot starts speaking (sends audio chunks)
+        await directLine.emulateIncomingVoiceActivity({
+          type: 'event',
+          name: 'stream.chunk',
+          from: { role: 'bot' },
+          payload: { voice: { content: 'AAAAAA==' } }
+        });
+
+        await directLine.emulateIncomingVoiceActivity({
+          type: 'event',
+          name: 'stream.chunk',
+          from: { role: 'bot' },
+          payload: { voice: { content: 'AAAAAA==' } }
+        });
+
+        // VERIFY: State is "bot_speaking" (isPlaying = true)
+        await pageConditions.became(
+          'State: bot_speaking → Placeholder: "Talk to interrupt..."',
+          () => textArea.getAttribute('placeholder') === 'Talk to interrupt...',
+          1000
+        );
+
+        // VERIFY: Mic button has pulse animation during bot speaking
+        expect(micButton.className).toMatch(/with-pulse/);
+
+        // User barges in (server detects user speech)
+        await directLine.emulateIncomingVoiceActivity({
+          type: 'event',
+          name: 'session.update',
+          from: { role: 'bot' },
+          payload: { voice: { session: 'request.detected' } }
+        });
+
+        // VERIFY: State changes to "user_speaking" - bot audio stopped
+        await pageConditions.became(
+          'State: user_speaking → Placeholder: "Listening…" (barge-in worked)',
+          () => textArea.getAttribute('placeholder') === 'Listening...',
+          1000
+        );
+
+        // VERIFY: Mic button still has pulse animation during user speaking
+        expect(micButton.className).toMatch(/with-pulse/);
+
+        // Server processes the user's interrupted request
+        await directLine.emulateIncomingVoiceActivity({
+          type: 'event',
+          name: 'session.update',
+          from: { role: 'bot' },
+          payload: { voice: { session: 'request.processing' } }
+        });
+
+        // VERIFY: State is "processing"
+        await pageConditions.became(
+          'State: processing → Placeholder: "Processing…"',
+          () => textArea.getAttribute('placeholder') === 'Processing...',
+          1000
+        );
+
+        // User transcript arrives
+        await directLine.emulateIncomingActivity({
+          type: 'event',
+          name: 'stream.end',
+          from: { role: 'bot' },
+          text: 'Stop! Change my destination.',
+          payload: { voice: { transcription: 'Stop! Change my destination.', origin: 'user' } }
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // Bot responds with new audio
+        await directLine.emulateIncomingVoiceActivity({
+          type: 'event',
+          name: 'stream.chunk',
+          from: { role: 'bot' },
+          payload: { voice: { content: 'AAAAAA==' } }
+        });
+
+        // VERIFY: State is "bot_speaking" again
+        await pageConditions.became(
+          'State: bot_speaking → Placeholder: "Talk to interrupt..." (bot responding)',
+          () => textArea.getAttribute('placeholder') === 'Talk to interrupt...',
+          1000
+        );
+
+        // Bot transcript arrives
+        await directLine.emulateIncomingActivity({
+          type: 'event',
+          name: 'stream.end',
+          from: { role: 'bot' },
+          text: 'Sure, where would you like to go instead?',
+          payload: { voice: { transcription: 'Sure, where would you like to go instead?', origin: 'agent' } }
+        });
+
+        await pageConditions.numActivitiesShown(2);
+
+        // Verify both messages appear
+        const activities = pageElements.activityContents();
+        expect(activities[0]).toHaveProperty('textContent', 'Stop! Change my destination.');
+        expect(activities[1]).toHaveProperty('textContent', 'Sure, where would you like to go instead?');
+
+        // Toggle mic off
+        await host.click(micButton);
+
+        await pageConditions.became(
+          'Recording stopped',
+          () => micButton.getAttribute('aria-label')?.includes('Microphone off'),
+          1000
+        );
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat, testIds }
+        } = window;
+
+        // GIVEN: Web Chat with Fluent Theme and microphone button enabled
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        render(
+          <FluentThemeProvider variant="fluent">
+            <ReactWebChat 
+              directLine={directLine}
+              store={store}
+              styleOptions={{
+                disableFileUpload: true,
+                showMicrophoneButton: true,
+                hideTelephoneKeypadButton: false,
+              }}
+            />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // THEN: Microphone button should be present
+        const micButton = document.querySelector(`[data-testid="${testIds.sendBoxMicrophoneButton}"]`);
+        expect(micButton).toBeTruthy();
+
+        // THEN: Telephone keypad button should be present
+        const keypadButton = document.querySelector(`[data-testid="${testIds.sendBoxTelephoneKeypadToolbarButton}"]`);
+        expect(keypadButton).toBeTruthy();
+
+        // THEN: Text counter should NOT be present
+        const textCounter = document.querySelector('.sendbox__text-counter');
+        expect(textCounter).toBeFalsy();
+
+        // THEN: Send button should NOT be present
+        const sendButton = document.querySelector(`[data-testid="${testIds.sendBoxSendButton}"]`);
+        expect(sendButton).toBeFalsy();
+
+        // THEN: Should show sendbox with microphone and keypad buttons
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>