botframework-webchat 4.13.0 → 4.15.0

package/src/createBrowserWebSpeechPonyfillFactory.ts

@@ -0,0 +1,21 @@
+import { WebSpeechPonyfill } from 'botframework-webchat-api';
+
+export default function createBrowserWebSpeechPonyfillFactory(): () => WebSpeechPonyfill {
+  // eslint-disable-next-line dot-notation
+  if (!window.SpeechRecognition && !window['webkitSpeechRecognition']) {
+    console.warn('Web Chat: This browser does not support Web Speech API Speech Recognition.');
+  }
+
+  if (!window.speechSynthesis) {
+    console.warn('Web Chat: This browser does not support Web Speech API Speech Synthesis.');
+  }
+
+  return () => ({
+    // eslint-disable-next-line dot-notation
+    SpeechGrammarList: window.SpeechGrammarList || window['webkitSpeechGrammarList'],
+    // eslint-disable-next-line dot-notation
+    SpeechRecognition: window.SpeechRecognition || window['webkitSpeechRecognition'],
+    speechSynthesis: window.speechSynthesis,
+    SpeechSynthesisUtterance: window.SpeechSynthesisUtterance
+  });
+}

package/src/createCognitiveServicesSpeechServicesPonyfillFactory.spec.js

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-global-assign */
 let consoleWarns;
@@ -17,11 +18,28 @@ beforeEach(() => {
   };
 
   createPonyfill = require('web-speech-cognitive-services/lib/SpeechServices');
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  createCognitiveServicesSpeechServicesPonyfillFactory = require('./createCognitiveServicesSpeechServicesPonyfillFactory')
-    .default;
+  createCognitiveServicesSpeechServicesPonyfillFactory =
+    require('./createCognitiveServicesSpeechServicesPonyfillFactory').default;
+
+  window.AudioContext = class MockAudioContext {
+    // eslint-disable-next-line class-methods-use-this
+    createMediaStreamSource() {
+      // eslint-disable-next-line no-empty-function
+      return { connect: () => {} };
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    createScriptProcessor() {
+      // eslint-disable-next-line no-empty-function
+      return { connect: () => {} };
+    }
+  };
 
-  window.navigator.mediaDevices = {};
+  window.navigator.mediaDevices = {
+    getUserMedia: jest.fn(() => ({
+      getAudioTracks: () => ['mock-media-stream-track']
+    }))
+  };
 });
 
 afterEach(() => {
@@ -60,7 +78,8 @@ test('not providing reference grammar ID', () => {
   expect(referenceGrammars).toEqual([]);
 });
 
-test('supplying audioInputDeviceId', () => {
+test('supplying audioInputDeviceId', async () => {
+  // GIVEN: Set up Web Speech with "audioInputDeviceId" of "audio-input-device-1".
   const ponyfillFactory = createCognitiveServicesSpeechServicesPonyfillFactory({
     audioInputDeviceId: 'audio-input-device-1',
     credentials: {
@@ -69,9 +88,20 @@ test('supplying audioInputDeviceId', () => {
     }
   });
 
+  // WHEN: Polyfill is created.
   ponyfillFactory({});
 
-  expect(createPonyfill.mock.calls[0][0]).toHaveProperty('audioConfig.privSource.deviceId', 'audio-input-device-1');
+  // WHEN: Audio source is attached and audio device is opened.
+  await createPonyfill.mock.calls[0][0].audioConfig.privSource.attach();
+
+  // THEN: It should call getUserMedia() with "audio" constraints of { deviceId: 'audio-input-device-1' }.
+  expect(window.navigator.mediaDevices.getUserMedia.mock.calls[0][0]).toHaveProperty(
+    'audio.deviceId',
+    'audio-input-device-1'
+  );
+
+  // THEN: It should call getUserMedia() with "video" constraint of false.
+  expect(window.navigator.mediaDevices.getUserMedia.mock.calls[0][0]).toHaveProperty('video', false);
 });
 
 test('supplying both audioConfig and audioInputDeviceId', () => {

package/src/createCognitiveServicesSpeechServicesPonyfillFactory.ts

@@ -0,0 +1,78 @@
+import { AudioConfig } from 'microsoft-cognitiveservices-speech-sdk';
+import { WebSpeechPonyfillFactory } from 'botframework-webchat-api';
+import createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';
+
+import CognitiveServicesAudioOutputFormat from './types/CognitiveServicesAudioOutputFormat';
+import CognitiveServicesCredentials from './types/CognitiveServicesCredentials';
+import CognitiveServicesTextNormalization from './types/CognitiveServicesTextNormalization';
+import createMicrophoneAudioConfigAndAudioContext from './speech/createMicrophoneAudioConfigAndAudioContext';
+
+export default function createCognitiveServicesSpeechServicesPonyfillFactory({
+  audioConfig,
+  audioContext,
+  audioInputDeviceId,
+  credentials,
+  enableTelemetry,
+  speechRecognitionEndpointId,
+  speechSynthesisDeploymentId,
+  speechSynthesisOutputFormat,
+  textNormalization
+}: {
+  audioConfig?: AudioConfig;
+  audioContext?: AudioContext;
+  audioInputDeviceId?: string;
+  credentials: CognitiveServicesCredentials;
+  enableTelemetry?: true;
+  speechRecognitionEndpointId?: string;
+  speechSynthesisDeploymentId?: string;
+  speechSynthesisOutputFormat?: CognitiveServicesAudioOutputFormat;
+  textNormalization?: CognitiveServicesTextNormalization;
+}): WebSpeechPonyfillFactory {
+  if (!window.navigator.mediaDevices && !audioConfig) {
+    console.warn(
+      'botframework-webchat: Your browser does not support Web Audio or the page is not loaded via HTTPS or localhost. Cognitive Services Speech Services is disabled. However, you may pass a custom AudioConfig to enable speech in this environment.'
+    );
+
+    return () => ({});
+  }
+
+  if (audioConfig) {
+    audioInputDeviceId &&
+      console.warn(
+        'botframework-webchat: "audioConfig" and "audioInputDeviceId" cannot be set at the same time; ignoring "audioInputDeviceId".'
+      );
+
+    audioContext &&
+      console.warn(
+        'botframework-webchat: "audioConfig" and "audioContext" cannot be set at the same time; ignoring "audioContext" for speech recognition.'
+      );
+  } else {
+    ({ audioConfig, audioContext } = createMicrophoneAudioConfigAndAudioContext({
+      audioContext,
+      audioInputDeviceId,
+      enableTelemetry
+    }));
+  }
+
+  return ({ referenceGrammarID } = {}) => {
+    const { SpeechGrammarList, SpeechRecognition, speechSynthesis, SpeechSynthesisUtterance } = createPonyfill({
+      audioConfig,
+      audioContext,
+      credentials,
+      enableTelemetry,
+      referenceGrammars: referenceGrammarID ? [`luis/${referenceGrammarID}-PRODUCTION`] : [],
+      speechRecognitionEndpointId,
+      speechSynthesisDeploymentId,
+      speechSynthesisOutputFormat,
+      textNormalization
+    });
+
+    return {
+      resumeAudioContext: () => audioContext && audioContext.state === 'suspended' && audioContext.resume(),
+      SpeechGrammarList,
+      SpeechRecognition,
+      speechSynthesis,
+      SpeechSynthesisUtterance
+    };
+  };
+}

package/src/createDirectLine.ts

@@ -0,0 +1,65 @@
+import { DirectLine } from 'botframework-directlinejs';
+
+type CreateDirectLineOptions = {
+  botAgent?: string;
+  conversationId?: string;
+  conversationStartProperties?: any;
+  domain?: string;
+  fetch?: typeof window.fetch;
+  pollingInterval?: number;
+  secret?: string;
+  streamUrl?: string;
+  token?: string;
+  watermark?: string;
+  webSocket?: typeof WebSocket;
+};
+
+export default function createDirectLine({
+  botAgent,
+  conversationId,
+  conversationStartProperties,
+  domain,
+  fetch,
+  pollingInterval,
+  secret,
+  streamUrl,
+  token,
+  watermark,
+  webSocket
+}: CreateDirectLineOptions) {
+  // TODO: [P3] Checks if DLJS supports ponyfilling fetch.
+  return new DirectLine({
+    botAgent,
+    conversationId,
+    conversationStartProperties,
+    domain,
+    fetch,
+    pollingInterval,
+    secret,
+    streamUrl,
+    token,
+    watermark,
+    webSocket,
+    createFormData: attachments => {
+      const formData = new FormData();
+
+      attachments.forEach(
+        ({
+          contentType,
+          data,
+          filename,
+          name
+        }: {
+          contentType?: string;
+          data: BlobPart[];
+          filename?: string;
+          name?: string;
+        }) => {
+          formData.append(name, new Blob(data, { type: contentType }), filename);
+        }
+      );
+
+      return formData;
+    }
+  } as any);
+}

package/src/createDirectLineAppServiceExtension.ts

@@ -0,0 +1,22 @@
+import { DirectLineStreaming } from 'botframework-directlinejs';
+
+export default function createDirectLineAppServiceExtension({
+  botAgent,
+  conversationId,
+  domain,
+  token
+}: {
+  botAgent?: string;
+  conversationId?: string;
+  domain?: string;
+  token: string;
+}): Promise<any> {
+  return Promise.resolve(
+    new DirectLineStreaming({
+      botAgent,
+      conversationId,
+      domain,
+      token
+    })
+  );
+}

package/src/createDirectLineSpeechAdapters.ts

@@ -0,0 +1,84 @@
+import { AudioConfig } from 'microsoft-cognitiveservices-speech-sdk';
+import { createAdapters } from 'botframework-directlinespeech-sdk';
+import { DirectLineJSBotConnection } from 'botframework-webchat-core';
+import { WebSpeechPonyfill } from 'botframework-webchat-api';
+
+import CognitiveServicesAudioOutputFormat from './types/CognitiveServicesAudioOutputFormat';
+import CognitiveServicesCredentials from './types/CognitiveServicesCredentials';
+import CognitiveServicesTextNormalization from './types/CognitiveServicesTextNormalization';
+import createMicrophoneAudioConfigAndAudioContext from './speech/createMicrophoneAudioConfigAndAudioContext';
+
+const DEFAULT_LANGUAGE = 'en-US';
+
+// TODO: When using DLSpeech via bundle, we will add our own MicrophoneAudioConfig.
+export default function createDirectLineSpeechAdapters({
+  audioConfig,
+  audioContext,
+  audioInputDeviceId,
+  enableInternalHTTPSupport,
+  enableTelemetry,
+  fetchCredentials,
+  speechRecognitionEndpointId,
+  speechRecognitionLanguage = window?.navigator?.language || DEFAULT_LANGUAGE,
+  speechSynthesisDeploymentId,
+  speechSynthesisOutputFormat,
+  textNormalization,
+  userID,
+  username
+}: {
+  audioConfig?: AudioConfig;
+  audioContext?: AudioContext;
+  audioInputDeviceId?: string;
+  enableInternalHTTPSupport?: true;
+  enableTelemetry?: true;
+  fetchCredentials: CognitiveServicesCredentials;
+  speechRecognitionEndpointId?: string;
+  speechRecognitionLanguage?: string;
+  speechSynthesisDeploymentId?: string;
+  speechSynthesisOutputFormat?: CognitiveServicesAudioOutputFormat;
+  textNormalization?: CognitiveServicesTextNormalization;
+  userID?: string;
+  username?: string;
+}): {
+  directLine: DirectLineJSBotConnection;
+  webSpeechPonyfill: WebSpeechPonyfill;
+} {
+  if (audioConfig) {
+    audioInputDeviceId &&
+      console.warn(
+        'botframework-webchat: "audioConfig" and "audioInputDeviceId" cannot be set at the same time; ignoring "audioInputDeviceId".'
+      );
+
+    audioContext &&
+      console.warn(
+        'botframework-webchat: "audioConfig" and "audioContext" cannot be set at the same time; ignoring "audioContext" for speech recognition.'
+      );
+  } else if (!window.navigator.mediaDevices) {
+    // If the browser does not support or allow microphone access, we will continue to create Direct Line Speech adapter without custom "audioConfig" and "audioContext".
+    // In Direct Line Speech SDK, it will disable speech functionality, only leaving text chat available via the protocol.
+    console.warn(
+      'botframework-webchat: Your browser does not support or allow microphone access or the page is not loaded via HTTPS or localhost. Speech is disabled for Direct Line Speech. However, you may pass a custom "audioConfig" to enable speech in this environment.'
+    );
+  } else {
+    ({ audioConfig, audioContext } = createMicrophoneAudioConfigAndAudioContext({
+      audioContext,
+      audioInputDeviceId,
+      enableTelemetry
+    }));
+  }
+
+  return createAdapters({
+    audioConfig,
+    audioContext,
+    enableInternalHTTPSupport,
+    enableTelemetry,
+    fetchCredentials,
+    speechRecognitionEndpointId,
+    speechRecognitionLanguage,
+    speechSynthesisDeploymentId,
+    speechSynthesisOutputFormat,
+    textNormalization,
+    userID,
+    username
+  });
+}

package/src/createFullStyleSet.ts

@@ -1,13 +1,13 @@
 import { createStyleSet } from 'botframework-webchat-component';
-import { StyleOptions } from 'botframework-webchat-api';
 
 import createAdaptiveCardsStyleSet from './adaptiveCards/Styles/createAdaptiveCardsStyleSet';
+import FullBundleStyleOptions from './types/FullBundleStyleOptions';
 
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
 
-export default function createFullStyleSet(options: StyleOptions) {
+export default function createFullStyleSet(options: FullBundleStyleOptions) {
   return {
     ...createStyleSet(options),
     ...createAdaptiveCardsStyleSet(options)

package/src/fullBundleDefaultStyleOptions.ts

@@ -1,11 +1,11 @@
 import { defaultStyleOptions } from 'botframework-webchat-api';
 import adaptiveCardsDefaultStyleOptions from './adaptiveCards/defaultStyleOptions';
 
-import FullBundleStyleOptions from './FullBundleStyleOptions';
+import FullBundleStyleOptions from './types/FullBundleStyleOptions';
 
-const FULL_BUNDLE_DEFAULT_STYLE_OPTIONS: Required<FullBundleStyleOptions> = {
+const fullBundleDefaultStyleOptions: Required<FullBundleStyleOptions> = {
   ...defaultStyleOptions,
   ...adaptiveCardsDefaultStyleOptions
 };
 
-export default FULL_BUNDLE_DEFAULT_STYLE_OPTIONS;
+export default fullBundleDefaultStyleOptions;

package/src/hooks/useStyleOptions.ts

@@ -0,0 +1,9 @@
+import { hooks } from 'botframework-webchat-component';
+
+import { StrictFullBundleStyleOptions } from '../types/FullBundleStyleOptions';
+
+export default function useStyleOptions(): [StrictFullBundleStyleOptions] {
+  const [styleOptions] = hooks.useStyleOptions();
+
+  return [styleOptions as StrictFullBundleStyleOptions];
+}

package/src/index-es5.ts

@@ -1,34 +1,9 @@
-// IMPORTANT: To export anything from this file, add it to index-es5.tsx, which is the .d.ts for this file.
-
 /* eslint dot-notation: ["error", { "allowPattern": "^WebChat$" }] */
 // window['WebChat'] is required for TypeScript
 
-// Polyfills for IE11 and other ES5 browsers
-// To maintain quality, we prefer polyfills without additives
-// For example, we prefer Promise implementation from "core-js" than "bluebird"
-
-import 'core-js/features/array/find-index';
-import 'core-js/features/array/find';
-import 'core-js/features/array/from';
-import 'core-js/features/array/includes';
-import 'core-js/features/array/iterator';
-import 'core-js/features/dom-collections';
-import 'core-js/features/math/sign';
-import 'core-js/features/number/is-finite';
-import 'core-js/features/object/assign';
-import 'core-js/features/object/entries';
-import 'core-js/features/object/from-entries';
-import 'core-js/features/object/is';
-import 'core-js/features/object/values';
-import 'core-js/features/promise';
-import 'core-js/features/promise/finally';
-import 'core-js/features/set';
-import 'core-js/features/string/ends-with';
-import 'core-js/features/string/starts-with';
-import 'core-js/features/symbol';
-
-import 'url-search-params-polyfill';
-import 'whatwg-fetch';
+// Importing polyfills required for IE11/ES5.
+import './polyfill';
+
 import { version } from './index-minimal';
 import addVersion from './addVersion';
 import defaultCreateDirectLine from './createDirectLine';

package/src/index-minimal.ts

@@ -1,9 +1,8 @@
-// IMPORTANT: To export anything from this file, add it to index-minimal.tsx, which is the .d.ts for this file.
-
 /* eslint dot-notation: ["error", { "allowPattern": "^WebChat$" }] */
 // window['WebChat'] is required for TypeScript
 
 import { Constants, createStore, createStoreWithDevTools, version } from 'botframework-webchat-core';
+import { StrictStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
 import ReactWebChat, {
   Components,
@@ -55,6 +54,8 @@ export {
   version
 };
 
+export type { StyleOptions, StrictStyleOptions };
+
 // Until we have a development-specific bundle, we are not shipping createStoreWithDevTools in bundle.
 window['WebChat'] = {
   ...window['WebChat'],

package/src/index.ts

@@ -1,5 +1,3 @@
-// IMPORTANT: To export anything from this file, add it to index.tsx, which is the .d.ts for this file.
-
 /* eslint dot-notation: ["error", { "allowPattern": "^WebChat$" }] */
 // window['WebChat'] is required for TypeScript
 
@@ -18,6 +16,7 @@ import createDirectLineSpeechAdapters from './createDirectLineSpeechAdapters';
 import createStyleSet from './createFullStyleSet';
 import defaultCreateDirectLine from './createDirectLine';
 import defaultCreateDirectLineAppServiceExtension from './createDirectLineAppServiceExtension';
+import FullBundleStyleOptions, { StrictFullBundleStyleOptions } from './types/FullBundleStyleOptions';
 import FullComposer from './FullComposer';
 import HeroCardContent from './adaptiveCards/Attachment/HeroCardContent';
 import OAuthCardContent from './adaptiveCards/Attachment/OAuthCardContent';
@@ -28,12 +27,13 @@ import SignInCardContent from './adaptiveCards/Attachment/SignInCardContent';
 import ThumbnailCardContent from './adaptiveCards/Attachment/ThumbnailCardContent';
 import useAdaptiveCardsHostConfig from './adaptiveCards/hooks/useAdaptiveCardsHostConfig';
 import useAdaptiveCardsPackage from './adaptiveCards/hooks/useAdaptiveCardsPackage';
+import useStyleOptions from './hooks/useStyleOptions';
 import VideoCardContent from './adaptiveCards/Attachment/VideoCardContent';
 
 const renderWebChat = coreRenderWebChat.bind(null, ReactWebChat);
 
-export const createDirectLine = options => {
-  options.botAgent &&
+export const createDirectLine = (options: Omit<Parameters<typeof defaultCreateDirectLine>[0], 'botAgent'>) => {
+  (options as any).botAgent &&
     console.warn(
       'Web Chat: Developers are not currently allowed to set botAgent. See https://github.com/microsoft/BotFramework-WebChat/issues/2119 for more details.'
     );
@@ -41,8 +41,10 @@ export const createDirectLine = options => {
   return defaultCreateDirectLine({ ...options, botAgent: `WebChat/${version} (Full)` });
 };
 
-export const createDirectLineAppServiceExtension = options => {
-  options.botAgent &&
+export const createDirectLineAppServiceExtension = (
+  options: Omit<Parameters<typeof defaultCreateDirectLineAppServiceExtension>[0], 'botAgent'>
+) => {
+  (options as any).botAgent &&
     console.warn(
       'Web Chat: Developers are not currently allowed to set botAgent. See https://github.com/microsoft/BotFramework-WebChat/issues/2119 for more details.'
     );
@@ -53,14 +55,14 @@ export const createDirectLineAppServiceExtension = options => {
 const patchedHooks = {
   ...hooks,
   useAdaptiveCardsHostConfig,
-  useAdaptiveCardsPackage
+  useAdaptiveCardsPackage,
+  useStyleOptions
 };
 
-const Components = {
-  ...MinimalComponents,
+const AdditionalComponents = {
   AdaptiveCardContent,
-  AudioCardContent,
   AnimationCardContent,
+  AudioCardContent,
   Composer: FullComposer,
   HeroCardContent,
   OAuthCardContent,
@@ -70,6 +72,14 @@ const Components = {
   VideoCardContent
 };
 
+const Components: typeof MinimalComponents & typeof AdditionalComponents = {
+  ...MinimalComponents,
+  ...AdditionalComponents
+};
+
+type StyleOptions = FullBundleStyleOptions;
+type StrictStyleOptions = StrictFullBundleStyleOptions;
+
 export default ReactWebChat;
 
 export {
@@ -84,6 +94,8 @@ export {
   renderWebChat
 };
 
+export type { StyleOptions, StrictStyleOptions };
+
 window['WebChat'] = {
   ...window['WebChat'],
   Components,

package/src/polyfill.ts

@@ -0,0 +1,29 @@
+// Polyfills for IE11 and other ES5 browsers
+// To maintain quality, we prefer polyfills without additives
+// For example, we prefer Promise implementation from "core-js" than "bluebird"
+
+// To reduce conflicts with hosting app, we should consider using
+// @babel/plugin-transform-runtime to polyfill in transpiled code directly.
+
+import 'core-js/features/array/find-index';
+import 'core-js/features/array/find';
+import 'core-js/features/array/from';
+import 'core-js/features/array/includes';
+import 'core-js/features/array/iterator';
+import 'core-js/features/dom-collections';
+import 'core-js/features/map';
+import 'core-js/features/math/sign';
+import 'core-js/features/number/is-finite';
+import 'core-js/features/object/assign';
+import 'core-js/features/object/entries';
+import 'core-js/features/object/from-entries';
+import 'core-js/features/object/is';
+import 'core-js/features/object/values';
+import 'core-js/features/promise';
+import 'core-js/features/promise/finally';
+import 'core-js/features/set';
+import 'core-js/features/string/ends-with';
+import 'core-js/features/string/starts-with';
+import 'core-js/features/symbol';
+import 'url-search-params-polyfill';
+import 'whatwg-fetch';