botframework-webchat 4.13.0 → 4.14.2

package/src/adaptiveCards/Attachment/{VideoCardContent.js → VideoCardContent.tsx}

@@ -1,16 +1,28 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineVideoCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CommonCard from './CommonCard';
 
 const { useStyleSet } = hooks;
 const { VideoContent } = Components;
 
-const VideoCardContent = ({ actionPerformedClassName, content, disabled }) => {
-  const { media, autostart, autoloop, image: { url: imageURL } = {} } = content;
+type VideoCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineVideoCard & {
+    autoloop?: boolean;
+    autostart?: boolean;
+    image?: { url?: string };
+    media?: { profile?: string; url?: string }[];
+  };
+  disabled?: boolean;
+};
+
+const VideoCardContent: FC<VideoCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
+  const { autoloop, autostart, image: { url: imageURL } = { url: undefined }, media } = content;
   const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet();
 
   return (

package/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.ts

@@ -1,4 +1,4 @@
-import FullBundleStyleOptions from '../../../FullBundleStyleOptions';
+import FullBundleStyleOptions from '../../../types/FullBundleStyleOptions';
 
 export default function ({
   cardPushButtonBackgroundColor,

package/src/adaptiveCards/Styles/adaptiveCardHostConfig.ts

@@ -1,6 +1,6 @@
 import { normalizeStyleOptions } from 'botframework-webchat-api';
 
-import FullBundleStyleOptions from '../../FullBundleStyleOptions';
+import FullBundleStyleOptions from '../../types/FullBundleStyleOptions';
 import normalizeAdaptiveCardsStyleOptions from '../normalizeStyleOptions';
 
 // https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config
@@ -21,7 +21,27 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
           },
           accent: {
             default: accent,
-            subtle: accent
+            subtle: '#0078D4'
+          },
+          attention: {
+            default: '#D13438',
+            subtle: '#A4262C'
+          },
+          dark: {
+            default: '#000000',
+            subtle: '#646464'
+          },
+          good: {
+            default: '#0B6A0B',
+            subtle: '#028A02'
+          },
+          light: {
+            default: '#FFFFFF',
+            subtle
+          },
+          warning: {
+            default: '#B75C00',
+            subtle: '#986F0B'
           }
         }
       },
@@ -29,8 +49,8 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         backgroundColor: cardEmphasisBackgroundColor,
         foregroundColors: {
           default: {
-            default: bubbleTextColor,
-            subtle
+            default: '#000000',
+            subtle: '#484644'
           }
         }
       },
@@ -39,7 +59,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       },
@@ -48,7 +68,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       },
@@ -57,7 +77,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       },
@@ -66,7 +86,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       }

package/src/adaptiveCards/Styles/createAdaptiveCardsStyleSet.spec.js

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import createStyleSet from './createAdaptiveCardsStyleSet';
 
 describe('createAdaptiveCardsStyleSet', () => {

package/src/adaptiveCards/Styles/createAdaptiveCardsStyleSet.ts

@@ -1,6 +1,7 @@
-import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
+import { normalizeStyleOptions, StrictStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
-import AdaptiveCardsStyleOptions from '../AdaptiveCardsStyleOptions';
+import AdaptiveCardsStyleOptions, { StrictAdaptiveCardsStyleOptions } from '../AdaptiveCardsStyleOptions';
+import AdaptiveCardsStyleSet from '../AdaptiveCardsStyleSet';
 import createAdaptiveCardRendererStyle from './StyleSet/AdaptiveCardRenderer';
 import createAnimationCardAttachmentStyle from './StyleSet/AnimationCardAttachment';
 import createAudioCardAttachmentStyle from './StyleSet/AudioCardAttachment';
@@ -10,8 +11,10 @@ import normalizeAdaptiveCardsStyleOptions from '../normalizeStyleOptions';
 //       "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 createAdaptiveCardsStyleSet(options: StyleOptions & AdaptiveCardsStyleOptions): any {
-  const strictOptions = {
+export default function createAdaptiveCardsStyleSet(
+  options: StyleOptions & AdaptiveCardsStyleOptions
+): AdaptiveCardsStyleSet {
+  const strictOptions: StrictStyleOptions & StrictAdaptiveCardsStyleOptions = {
     ...normalizeStyleOptions(options),
     ...normalizeAdaptiveCardsStyleOptions(options)
   };

package/src/adaptiveCards/{createAdaptiveCardsAttachmentForScreenReaderMiddleware.js → createAdaptiveCardsAttachmentForScreenReaderMiddleware.tsx}

@@ -1,3 +1,4 @@
+import { AttachmentForScreenReaderMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
 import AdaptiveCardAttachment from './AttachmentForScreenReader/AdaptiveCardAttachment';
@@ -14,20 +15,20 @@ const RICH_CARD_CONTENT_TYPES = [
   'application/vnd.microsoft.card.video'
 ];
 
-export default function createAdaptiveCardsAttachmentMiddleware() {
-  return () => next => (...args) => {
-    const [
-      {
-        activity,
-        attachment,
-        attachment: { content, contentType }
-      }
-    ] = args;
+export default function createAdaptiveCardsAttachmentMiddleware(): AttachmentForScreenReaderMiddleware {
+  return () =>
+    next =>
+    (...args) => {
+      const [
+        {
+          attachment: { content, contentType }
+        }
+      ] = args;
 
-    return content && RICH_CARD_CONTENT_TYPES.includes(contentType)
-      ? () => <RichCardAttachment content={content} />
-      : content && contentType === 'application/vnd.microsoft.card.adaptive'
-      ? () => <AdaptiveCardAttachment content={content} />
-      : next({ activity, attachment });
-  };
+      return content && RICH_CARD_CONTENT_TYPES.includes(contentType)
+        ? () => <RichCardAttachment content={content} />
+        : content && contentType === 'application/vnd.microsoft.card.adaptive'
+        ? () => <AdaptiveCardAttachment content={content} />
+        : next(...args);
+    };
 }

package/src/adaptiveCards/createAdaptiveCardsAttachmentMiddleware.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { AttachmentMiddleware } from 'botframework-webchat-api';
+
+import AdaptiveCardAttachment from './Attachment/AdaptiveCardAttachment';
+import AnimationCardAttachment from './Attachment/AnimationCardAttachment';
+import AudioCardAttachment from './Attachment/AudioCardAttachment';
+import HeroCardAttachment from './Attachment/HeroCardAttachment';
+import OAuthCardAttachment from './Attachment/OAuthCardAttachment';
+import ReceiptCardAttachment from './Attachment/ReceiptCardAttachment';
+import SignInCardAttachment from './Attachment/SignInCardAttachment';
+import ThumbnailCardAttachment from './Attachment/ThumbnailCardAttachment';
+import VideoCardAttachment from './Attachment/VideoCardAttachment';
+
+export default function createAdaptiveCardsAttachmentMiddleware(): AttachmentMiddleware {
+  // This is not returning a React component, but a render function.
+  return () =>
+    next =>
+    /* eslint-disable-next-line react/display-name */
+    (...args) => {
+      const [{ attachment }] = args;
+
+      return attachment.contentType === 'application/vnd.microsoft.card.hero' ? (
+        <HeroCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.adaptive' ? (
+        <AdaptiveCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.animation' ? (
+        <AnimationCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.audio' ? (
+        <AudioCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.oauth' ? (
+        <OAuthCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.receipt' ? (
+        <ReceiptCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.signin' ? (
+        <SignInCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.thumbnail' ? (
+        <ThumbnailCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.video' ? (
+        <VideoCardAttachment attachment={attachment} />
+      ) : (
+        next(...args)
+      );
+    };
+}

package/src/adaptiveCards/defaultStyleOptions.ts

@@ -1,9 +1,10 @@
 import AdaptiveCardsStyleOptions from './AdaptiveCardsStyleOptions';
 
 const ADAPTIVE_CARDS_DEFAULT_STYLE_OPTIONS: Required<AdaptiveCardsStyleOptions> = {
+  adaptiveCardsParserMaxVersion: undefined,
   cardEmphasisBackgroundColor: '#F0F0F0',
   cardPushButtonBackgroundColor: '#0063B1',
-  cardPushButtonTextColor: 'white',
+  cardPushButtonTextColor: 'White',
   richCardWrapTitle: false
 };
 

package/src/adaptiveCards/hooks/internal/{useAdaptiveCardsContext.js → useAdaptiveCardsContext.ts}

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import AdaptiveCardsContext from '../../AdaptiveCardsContext';
 
-export default function useAdaptiveCardsContext() {
+export default function useAdaptiveCardsContext(): AdaptiveCardsContext {
   const context = useContext(AdaptiveCardsContext);
 
   if (!context) {

package/src/adaptiveCards/hooks/internal/{useParseAdaptiveCardJSON.js → useParseAdaptiveCardJSON.ts}

@@ -2,8 +2,9 @@ import { hooks } from 'botframework-webchat-component';
 import { useCallback, useMemo } from 'react';
 
 import useAdaptiveCardsPackage from '../useAdaptiveCardsPackage';
+import useStyleOptions from '../../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 function updateRTLInline(element, rtl, adaptiveCardsPackage) {
   if (element instanceof adaptiveCardsPackage.Container) {
@@ -33,7 +34,9 @@ export default function useParseAdaptiveCardJSON() {
     const maxVersion = Version.parse(adaptiveCardsParserMaxVersion, new SerializationContext());
 
     if (maxVersion && !maxVersion.isValid) {
-      return console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+      console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+
+      return;
     }
 
     return maxVersion;

package/src/adaptiveCards/hooks/internal/{useUniqueId.js → useUniqueId.ts}

@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import random from 'math-random';
 
-export default function useUniqueId(prefix) {
+export default function useUniqueId(prefix?: string): string {
   const id = useMemo(() => random().toString(36).substr(2, 5), []);
 
   prefix = prefix ? `${prefix}--` : '';

package/src/adaptiveCards/hooks/{useAdaptiveCardsHostConfig.js → useAdaptiveCardsHostConfig.ts}

@@ -1,19 +1,17 @@
-import { hooks } from 'botframework-webchat-component';
 import { useMemo } from 'react';
 
 import createDefaultAdaptiveCardHostConfig from '../Styles/adaptiveCardHostConfig';
 import useAdaptiveCardsContext from './internal/useAdaptiveCardsContext';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useStyleOptions } = hooks;
-
-export default function useAdaptiveCardsHostConfig() {
+export default function useAdaptiveCardsHostConfig(): [any] {
   const { hostConfigFromProps } = useAdaptiveCardsContext();
   const [styleOptions] = useStyleOptions();
 
-  const patchedHostConfig = useMemo(() => hostConfigFromProps || createDefaultAdaptiveCardHostConfig(styleOptions), [
-    hostConfigFromProps,
-    styleOptions
-  ]);
+  const patchedHostConfig = useMemo(
+    () => hostConfigFromProps || createDefaultAdaptiveCardHostConfig(styleOptions),
+    [hostConfigFromProps, styleOptions]
+  );
 
   return [patchedHostConfig];
 }

package/src/adaptiveCards/hooks/{useAdaptiveCardsPackage.js → useAdaptiveCardsPackage.ts}

@@ -1,6 +1,7 @@
+import AdaptiveCardsPackage from '../../types/AdaptiveCardsPackage';
 import useAdaptiveCardsContext from './internal/useAdaptiveCardsContext';
 
-export default function useAdaptiveCardsPackage() {
+export default function useAdaptiveCardsPackage(): [AdaptiveCardsPackage] {
   const { adaptiveCardsPackage } = useAdaptiveCardsContext();
 
   return [adaptiveCardsPackage];

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,29 @@ beforeEach(() => {
   };
 
   createPonyfill = require('web-speech-cognitive-services/lib/SpeechServices');
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  createCognitiveServicesSpeechServicesPonyfillFactory = require('./createCognitiveServicesSpeechServicesPonyfillFactory')
-    .default;
+  createCognitiveServicesSpeechServicesPonyfillFactory =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('./createCognitiveServicesSpeechServicesPonyfillFactory').default;
+
+  window.AudioContext = class MockAudioContext {
+    // eslint-disable-next-line class-methods-use-this
+    createMediaStreamSource() {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return { connect: () => {} };
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    createScriptProcessor() {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return { connect: () => {} };
+    }
+  };
 
-  window.navigator.mediaDevices = {};
+  window.navigator.mediaDevices = {
+    getUserMedia: jest.fn(() => ({
+      getAudioTracks: () => ['mock-media-stream-track']
+    }))
+  };
 });
 
 afterEach(() => {
@@ -60,7 +79,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 +89,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
+    })
+  );
+}