botframework-webchat 4.14.0 → 4.15.1

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

@@ -9,6 +9,14 @@ export default function ({
 }: FullBundleStyleOptions) {
   return {
     '&.webchat__adaptive-card-renderer': {
+      // Related to #4075.
+      // Adaptive Cards assume its host is in "forced border-box" mode.
+      // In CSS, the default is "content-box" mode.
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#values
+      '& *': {
+        boxSizing: 'border-box'
+      },
+
       '& .ac-input, & .ac-inlineActionButton, & .ac-quickActionButton': {
         fontFamily: primaryFont
       },

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

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

package/src/adaptiveCards/createAdaptiveCardsAttachmentForScreenReaderMiddleware.tsx

@@ -16,17 +16,19 @@ const RICH_CARD_CONTENT_TYPES = [
 ];
 
 export default function createAdaptiveCardsAttachmentMiddleware(): AttachmentForScreenReaderMiddleware {
-  return () => next => (...args) => {
-    const [
-      {
-        attachment: { content, contentType }
-      }
-    ] = args;
+  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(...args);
-  };
+      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

@@ -14,30 +14,31 @@ import VideoCardAttachment from './Attachment/VideoCardAttachment';
 
 export default function createAdaptiveCardsAttachmentMiddleware(): AttachmentMiddleware {
   // This is not returning a React component, but a render function.
-  /* eslint-disable-next-line react/display-name */
-  return () => next => (...args) => {
-    const [{ attachment }] = args;
+  return () =>
+    next =>
+    (...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)
-    );
-  };
+      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/hooks/useAdaptiveCardsHostConfig.ts

@@ -8,10 +8,10 @@ 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/createCognitiveServicesSpeechServicesPonyfillFactory.spec.js

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-global-assign */
 let consoleWarns;
@@ -17,20 +18,19 @@ 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 @typescript-eslint/no-empty-function
+      // eslint-disable-next-line no-empty-function
       return { connect: () => {} };
     }
 
     // eslint-disable-next-line class-methods-use-this
     createScriptProcessor() {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      // eslint-disable-next-line no-empty-function
       return { connect: () => {} };
     }
   };

package/src/index-es5.ts

@@ -1,32 +1,9 @@
 /* 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/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';

package/src/renderMarkdown.ts

@@ -57,6 +57,18 @@ const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAA
 // This is used for parsing Markdown for external links.
 const internalMarkdownIt = new MarkdownIt();
 
+const MARKDOWN_ATTRS_LEFT_DELIMITER = '⟬';
+// Make sure the delimiter is free from any RegExp characters, such as *, ?, etc.
+// IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here.
+// eslint-disable-next-line security/detect-non-literal-regexp, require-unicode-regexp
+const MARKDOWN_ATTRS_LEFT_DELIMITER_PATTERN = new RegExp(MARKDOWN_ATTRS_LEFT_DELIMITER, 'g');
+
+const MARKDOWN_ATTRS_RIGHT_DELIMITER = '⟭';
+// Make sure the delimiter is free from any RegExp characters, such as *, ?, etc.
+// IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here.
+// eslint-disable-next-line security/detect-non-literal-regexp, require-unicode-regexp
+const MARKDOWN_ATTRS_RIGHT_DELIMITER_PATTERN = new RegExp(MARKDOWN_ATTRS_RIGHT_DELIMITER, 'g');
+
 export default function render(
   markdown: string,
   { markdownRespectCRLF }: { markdownRespectCRLF: boolean },
@@ -66,16 +78,37 @@ export default function render(
     markdown = markdown.replace(/\n\r|\r\n/gu, carriageReturn => (carriageReturn === '\n\r' ? '\r\n' : '\n\r'));
   }
 
-  const html = new MarkdownIt({
+  // Related to #3165.
+  // We only support attributes "aria-label" and should leave other attributes as-is.
+  // However, `markdown-it-attrs` remove unrecognized attributes, such as {hello}.
+  // Before passing to `markdown-it-attrs`, we will convert known attributes from {aria-label="..."} into ⟬aria-label="..."⟭ (using white tortoise shell brackets).
+  // Then, we ask `markdown-it-attrs` to only process the new brackets, so it should only try to process things that we allowlisted.
+  // Lastly, we revert tortoise shell brackets back to curly brackets, for unprocessed attributes.
+  markdown = markdown
+    .replace(/\{\s*aria-label()\s*\}/giu, `${MARKDOWN_ATTRS_LEFT_DELIMITER}aria-label${MARKDOWN_ATTRS_RIGHT_DELIMITER}`)
+    .replace(
+      /\{\s*aria-label=("[^"]*"|[^\s}]*)\s*\}/giu,
+      (_, valueInsideQuotes) =>
+        `${MARKDOWN_ATTRS_LEFT_DELIMITER}aria-label=${valueInsideQuotes}${MARKDOWN_ATTRS_RIGHT_DELIMITER}`
+    );
+
+  let html = new MarkdownIt({
     breaks: false,
     html: false,
     linkify: true,
     typographer: true,
     xhtmlOut: true
   })
-    .use(markdownItAttrs)
+    .use(markdownItAttrs, {
+      // `markdown-it-attrs` is added for accessibility and allow bot developers to specify `aria-label`.
+      // We are allowlisting `aria-label` only as it is allowlisted in `sanitize-html`.
+      // Other `aria-*` will be sanitized even we allowlisted here.
+      allowedAttributes: ['aria-label'],
+      leftDelimiter: MARKDOWN_ATTRS_LEFT_DELIMITER,
+      rightDelimiter: MARKDOWN_ATTRS_RIGHT_DELIMITER
+    })
     .use(iterator, 'url_new_win', 'link_open', (tokens, index) => {
-      const token = tokens[index];
+      const token = tokens[+index];
 
       token.attrSet('rel', 'noopener noreferrer');
       token.attrSet('target', '_blank');
@@ -97,8 +130,11 @@ export default function render(
     })
     .render(markdown);
 
+  // Restore attributes not processed by `markdown-it-attrs`.
+  // TODO: [P2] #2511 After we fixed our polyfill story, we should use "String.prototype.replaceAll" instead of RegExp for replace all occurrences.
+  html = html.replace(MARKDOWN_ATTRS_LEFT_DELIMITER_PATTERN, '{').replace(MARKDOWN_ATTRS_RIGHT_DELIMITER_PATTERN, '}');
+
   // The signature from "sanitize-html" module is not correct.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return sanitizeHTML(html, SANITIZE_HTML_OPTIONS);
 }

package/src/speech/CustomAudioInputStream.ts

@@ -22,6 +22,7 @@ import {
   type as Type
 } from 'microsoft-cognitiveservices-speech-sdk/distrib/lib/src/common.speech/Exports';
 
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import { v4 } from 'uuid';
 import createDeferred, { DeferredPromise } from 'p-defer-es5';
 
@@ -88,9 +89,20 @@ abstract class CustomAudioInputStream extends AudioInputStream {
       id: options.id || v4().replace(/-/gu, '')
     };
 
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_DEVICE_INFO_DEFERRED] = createDeferred<DeviceInfo>();
+
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_EVENTS] = new EventSource<AudioSourceEvent>();
+
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_FORMAT_DEFERRED] = createDeferred<AudioStreamFormatImpl>();
+
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_OPTIONS] = normalizedOptions;
   }
 
@@ -101,9 +113,10 @@ abstract class CustomAudioInputStream extends AudioInputStream {
 
   /** Gets the event source for listening to events. */
   // ESLint: This code will only works in browsers other than IE11. Only works in ES5 is okay.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore Accessors are only available when targeting ECMAScript 5 and higher.ts(1056)
   get events(): EventSource<AudioSourceEvent> {
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     return this[SYMBOL_EVENTS];
   }
 
@@ -114,16 +127,19 @@ abstract class CustomAudioInputStream extends AudioInputStream {
   // Speech SDK quirks: In normal speech recognition, getter of "format" is called only after "attach".
   //                    But in Direct Line Speech, it is called before "attach".
   // ESLint: This code will only works in browsers other than IE11. Only works in ES5 is okay.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore Accessors are only available when targeting ECMAScript 5 and higher.ts(1056)
   get format(): Promise<AudioStreamFormatImpl> {
     this.debug('Getting "format".');
 
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     return this[SYMBOL_FORMAT_DEFERRED].promise;
   }
 
   /** Gets the ID of this audio stream. */
   id(): string {
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     return this[SYMBOL_OPTIONS].id;
   }
 
@@ -131,6 +147,8 @@ abstract class CustomAudioInputStream extends AudioInputStream {
   // Speech SDK quirks: In JavaScript, onXxx means "listen to event XXX".
   //                    Instead, in Speech SDK, it means "emit event XXX".
   protected onEvent(event: AudioSourceEvent): void {
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_EVENTS].onEvent(event);
     Events.instance.onEvent(event);
   }
@@ -191,7 +209,6 @@ abstract class CustomAudioInputStream extends AudioInputStream {
 
   // Speech SDK quirks: Although "close" is marked as abstract, it is never called in our observations.
   // ESLint: Speech SDK requires this function, but we are not implementing it.
-  // eslint-disable-next-line class-methods-use-this
   close(): void {
     this.debug('Callback for "close".');
 
@@ -215,14 +232,13 @@ abstract class CustomAudioInputStream extends AudioInputStream {
   /** Log the message to console if `debug` is set to `true`. */
   private debug(message, ...args) {
     // ESLint: For debugging, will only log when "debug" is set to "true".
-    // eslint-disable-next-line no-console
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line no-console, security/detect-object-injection
     this[SYMBOL_OPTIONS].debug && console.info(`CustomAudioInputStream: ${message}`, ...args);
   }
 
   /** Implements this function. When called, it should start recording and return an `IAudioStreamNode`. */
-  protected abstract performAttach(
-    audioNodeId: string
-  ): Promise<{
+  protected abstract performAttach(audioNodeId: string): Promise<{
     audioStreamNode: AudioStreamNode;
     deviceInfo: DeviceInfo;
     format: Format;
@@ -242,7 +258,13 @@ abstract class CustomAudioInputStream extends AudioInputStream {
 
         // Although only getter of "format" is called before "attach" (in Direct Line Speech),
         // we are handling both "deviceInfo" and "format" in similar way for uniformity.
+
+        // False alarm: indexer is a constant of type Symbol.
+        // eslint-disable-next-line security/detect-object-injection
         this[SYMBOL_DEVICE_INFO_DEFERRED].resolve(deviceInfo);
+
+        // False alarm: indexer is a constant of type Symbol.
+        // eslint-disable-next-line security/detect-object-injection
         this[SYMBOL_FORMAT_DEFERRED].resolve(
           new AudioStreamFormatImpl(format.samplesPerSec, format.bitsPerSample, format.channels)
         );
@@ -302,21 +324,28 @@ abstract class CustomAudioInputStream extends AudioInputStream {
 
   /** Gets the device information. */
   // ESLint: This code will only works in browsers other than IE11. Only works in ES5 is okay.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore Accessors are only available when targeting ECMAScript 5 and higher.ts(1056)
   get deviceInfo(): Promise<ISpeechConfigAudioDevice> {
     this.debug(`Getting "deviceInfo".`);
 
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     return Promise.all([this[SYMBOL_DEVICE_INFO_DEFERRED].promise, this[SYMBOL_FORMAT_DEFERRED].promise]).then(
       ([{ connectivity, manufacturer, model, type }, { bitsPerSample, channels, samplesPerSec }]) => ({
         bitspersample: bitsPerSample,
         channelcount: channels,
         connectivity:
-          typeof connectivity === 'string' ? Connectivity[connectivity] : connectivity || Connectivity.Unknown,
+          typeof connectivity === 'string' && !isForbiddenPropertyName(connectivity)
+            ? // Mitigated through denylisting.
+              // eslint-disable-next-line security/detect-object-injection
+              Connectivity[connectivity]
+            : connectivity || Connectivity.Unknown,
         manufacturer: manufacturer || '',
         model: model || '',
         samplerate: samplesPerSec,
-        type: typeof type === 'string' ? Type[type] : type || Type.Unknown
+        // Mitigated through denylisting.
+        // eslint-disable-next-line security/detect-object-injection
+        type: typeof type === 'string' && !isForbiddenPropertyName(type) ? Type[type] : type || Type.Unknown
       })
     );
   }

package/src/speech/createAudioConfig.spec.js

@@ -1,4 +1,4 @@
-/* eslint @typescript-eslint/no-empty-function: "off" */
+/* eslint no-empty-function: "off" */
 
 import createAudioConfig from './createAudioConfig';
 

package/src/speech/createAudioConfig.ts

@@ -5,9 +5,7 @@ import { AudioConfig } from 'microsoft-cognitiveservices-speech-sdk';
 
 import CustomAudioInputStream, { AudioStreamNode, DeviceInfo, Format } from './CustomAudioInputStream';
 
-type AttachFunction = (
-  audioNodeId: string
-) => Promise<{
+type AttachFunction = (audioNodeId: string) => Promise<{
   audioStreamNode: AudioStreamNode;
   deviceInfo: DeviceInfo;
   format: Format;
@@ -45,20 +43,25 @@ class CreateAudioConfigAudioInputStream extends CustomAudioInputStream {
 
     super({ debug });
 
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_ATTACH] = attach;
+
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     this[SYMBOL_TURN_OFF] = turnOff;
   }
 
   [SYMBOL_ATTACH]: AttachFunction;
   [SYMBOL_TURN_OFF]: TurnOffFunction;
 
-  protected performAttach(
-    audioNodeId: string
-  ): Promise<{
+  protected performAttach(audioNodeId: string): Promise<{
     audioStreamNode: AudioStreamNode;
     deviceInfo: DeviceInfo;
     format: Format;
   }> {
+    // False alarm: indexer is a constant of type Symbol.
+    // eslint-disable-next-line security/detect-object-injection
     return this[SYMBOL_ATTACH](audioNodeId);
   }
 

package/src/speech/createMicrophoneAudioConfigAndAudioContext.ts

@@ -55,9 +55,7 @@ function createMicrophoneAudioConfig(options: MicrophoneAudioInputStreamOptions)
   pcmRecorderWorkletUrl && pcmRecorder.setWorkletUrl(pcmRecorderWorkletUrl);
 
   return createAudioConfig({
-    async attach(
-      audioNodeId: string
-    ): Promise<{
+    async attach(audioNodeId: string): Promise<{
       audioStreamNode: AudioStreamNode;
       deviceInfo: DeviceInfo;
       format: Format;

package/src/useComposerProps.ts

@@ -35,10 +35,10 @@ export default function useComposerProps({
   );
 
   // When styleSet is not specified, the styleOptions will be used to create Adaptive Cards styleSet and merged into useStyleSet.
-  const extraStyleSet = useMemo(() => (styleSet ? undefined : createAdaptiveCardsStyleSet(styleOptions)), [
-    styleOptions,
-    styleSet
-  ]);
+  const extraStyleSet = useMemo(
+    () => (styleSet ? undefined : createAdaptiveCardsStyleSet(styleOptions)),
+    [styleOptions, styleSet]
+  );
 
   const patchedRenderMarkdown = useMemo(
     () => (typeof renderMarkdown === 'undefined' ? defaultRenderMarkdown : renderMarkdown),

package/webpack.config.js

@@ -14,6 +14,27 @@ let config = {
     'webchat-minimal': './lib/index-minimal.js'
   },
   mode: 'production',
+  module: {
+    rules: [
+      {
+        // To speed up bundling, we are limiting Babel to a number of packages which does not publish ES5 bits.
+        test: /\/node_modules\/(botframework-streaming|buffer|nanoid|postcss|punycode|sanitize-html)\//iu,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  modules: 'commonjs'
+                }
+              ]
+            ]
+          }
+        }
+      }
+    ]
+  },
   optimization: {
     minimizer: [
       // Webpack use terser for minification
@@ -30,9 +51,7 @@ let config = {
     ]
   },
   output: {
-    filename: '[name].js',
-    libraryTarget: 'umd',
-    path: resolve(__dirname, 'dist')
+    libraryTarget: 'umd'
   },
   plugins: [
     new StatsWriterPlugin({
@@ -77,7 +96,8 @@ let config = {
       react: resolve(__dirname, 'node_modules/isomorphic-react/dist/react.js'),
       'react-dom': resolve(__dirname, 'node_modules/isomorphic-react-dom/dist/react-dom.js')
     }
-  }
+  },
+  target: ['web', 'es5']
 };
 
 // VSTS always emits uppercase environment variables.

package/.eslintignore

@@ -1 +0,0 @@
-/src/tsconfig.json