botframework-webchat 4.13.0 → 4.14.2

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "botframework-webchat",
-  "version": "4.13.0",
+  "version": "4.14.2",
   "description": "A highly-customizable web-based chat client for Azure Bot Services.",
   "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -21,68 +22,72 @@
     "build:babel": "babel src --extensions .js,.ts,.tsx --ignore **/*.spec.js,**/*.spec.ts,**/*.spec.tsx,**/*.test.js,**/*.test.ts,**/*.test.tsx,__tests__/**/*.js,__tests__/**/*.ts,__tests__/**/*.tsx --out-dir lib --verbose",
     "build:typescript": "tsc --project src/tsconfig.json",
     "build:webpack": "webpack-cli",
-    "eslint": "eslint src/**/*.js src/**/*.ts --fix",
-    "prestart": "npm run build:babel",
+    "eslint": "npm run precommit",
+    "precommit": "npm run precommit:eslint -- src && npm run precommit:typecheck",
+    "precommit:eslint": "eslint",
+    "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
     "start": "concurrently --kill-others --names \"babel,tsc,webpack\" \"npm run start:babel\" \"npm run start:typescript\" \"npm run start:webpack\"",
     "start:babel": "npm run build:babel -- --skip-initial-build --watch",
     "start:typescript": "npm run build:typescript -- --watch",
     "start:webpack": "npm run build:webpack -- --watch"
   },
   "dependencies": {
-    "@babel/runtime": "7.13.10",
-    "adaptivecards": "2.5.0",
-    "botframework-directlinejs": "0.14.1",
-    "botframework-directlinespeech-sdk": "4.13.0",
-    "botframework-webchat-api": "4.13.0",
-    "botframework-webchat-component": "4.13.0",
-    "botframework-webchat-core": "4.13.0",
-    "classnames": "2.2.6",
-    "core-js": "3.9.1",
-    "markdown-it": "12.0.4",
+    "@babel/runtime": "7.14.6",
+    "adaptivecards": "2.9.0",
+    "botframework-directlinejs": "0.15.0",
+    "botframework-directlinespeech-sdk": "4.14.2",
+    "botframework-webchat-api": "4.14.2",
+    "botframework-webchat-component": "4.14.2",
+    "botframework-webchat-core": "4.14.2",
+    "classnames": "2.3.1",
+    "core-js": "3.15.2",
+    "markdown-it": "12.1.0",
     "markdown-it-attrs": "4.0.0",
-    "markdown-it-attrs-es5": "1.2.0",
+    "markdown-it-attrs-es5": "2.0.0",
     "markdown-it-for-inline": "0.1.1",
     "math-random": "2.0.1",
-    "memoize-one": "5.1.1",
-    "microsoft-cognitiveservices-speech-sdk": "1.15.1",
+    "memoize-one": "5.2.1",
+    "microsoft-cognitiveservices-speech-sdk": "1.17.0",
     "prop-types": "15.7.2",
-    "sanitize-html": "1.27.5",
-    "url-search-params-polyfill": "8.1.0",
-    "web-speech-cognitive-services": "7.1.0",
-    "whatwg-fetch": "3.4.1"
+    "sanitize-html": "2.4.0",
+    "url-search-params-polyfill": "8.1.1",
+    "uuid": "8.3.2",
+    "web-speech-cognitive-services": "7.1.1",
+    "whatwg-fetch": "3.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/node": "^14.14.35",
-    "@types/react": "^16.9.55",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@types/node": "^16.3.1",
+    "@types/react": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/parser": "^4.28.3",
+    "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "concurrently": "^6.0.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "concurrently": "^6.2.0",
+    "eslint": "^7.30.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "isomorphic-react": "4.13.0",
-    "isomorphic-react-dom": "4.13.0",
-    "prettier": "^2.2.1",
-    "source-map-loader": "^1.1.2",
+    "isomorphic-react": "4.14.2",
+    "isomorphic-react-dom": "4.14.2",
+    "prettier": "^2.3.2",
+    "source-map-loader": "^1.1.3",
     "terser-webpack-plugin": "^4.2.3",
-    "typescript": "^4.2.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^4.2.0",
-    "webpack-stats-plugin": "^1.0.2"
+    "typescript": "^4.3.5",
+    "webpack": "^5.45.1",
+    "webpack-cli": "^4.6.0",
+    "webpack-stats-plugin": "^1.0.3"
   },
   "peerDependencies": {
-    "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react": ">= 16.8.6",
+    "react-dom": ">= 16.8.6"
   }
 }

package/src/AddFullBundle.tsx

@@ -0,0 +1,94 @@
+import { AttachmentForScreenReaderMiddleware, AttachmentMiddleware, StyleOptions } from 'botframework-webchat-api';
+import { OneOrMany, singleToArray, warnOnce } from 'botframework-webchat-core';
+import PropTypes from 'prop-types';
+import React, { FC, ReactNode } from 'react';
+
+import { StrictFullBundleStyleOptions } from './types/FullBundleStyleOptions';
+import AdaptiveCardsComposer from './adaptiveCards/AdaptiveCardsComposer';
+import AdaptiveCardsPackage from './types/AdaptiveCardsPackage';
+import AdaptiveCardsStyleOptions from './adaptiveCards/AdaptiveCardsStyleOptions';
+import useComposerProps from './useComposerProps';
+
+type AddFullBundleProps = {
+  adaptiveCardsHostConfig?: any;
+  adaptiveCardsPackage?: AdaptiveCardsPackage;
+  attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
+  attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
+  children: ({ extraStyleSet }: { extraStyleSet: any }) => ReactNode;
+  renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
+  styleOptions?: StyleOptions & AdaptiveCardsStyleOptions;
+  styleSet?: any & { options: StrictFullBundleStyleOptions };
+
+  /** @deprecated Rename to "adaptiveCardsHostConfig" */
+  adaptiveCardHostConfig?: any;
+};
+
+const adaptiveCardHostConfigDeprecation = warnOnce(
+  '"adaptiveCardHostConfig" is deprecated. Please use "adaptiveCardsHostConfig" instead. "adaptiveCardHostConfig" will be removed on or after 2022-01-01.'
+);
+
+const AddFullBundle: FC<AddFullBundleProps> = ({
+  adaptiveCardHostConfig,
+  adaptiveCardsHostConfig,
+  adaptiveCardsPackage,
+  attachmentForScreenReaderMiddleware,
+  attachmentMiddleware,
+  children,
+  renderMarkdown,
+  styleOptions,
+  styleSet
+}) => {
+  adaptiveCardHostConfig && adaptiveCardHostConfigDeprecation();
+
+  const patchedProps = useComposerProps({
+    attachmentForScreenReaderMiddleware: singleToArray(attachmentForScreenReaderMiddleware),
+    attachmentMiddleware: singleToArray(attachmentMiddleware),
+    renderMarkdown,
+    styleOptions,
+    styleSet
+  });
+
+  return (
+    <AdaptiveCardsComposer
+      adaptiveCardsHostConfig={adaptiveCardHostConfig || adaptiveCardsHostConfig}
+      adaptiveCardsPackage={adaptiveCardsPackage}
+    >
+      {children(patchedProps)}
+    </AdaptiveCardsComposer>
+  );
+};
+
+AddFullBundle.defaultProps = {
+  adaptiveCardHostConfig: undefined,
+  adaptiveCardsHostConfig: undefined,
+  adaptiveCardsPackage: undefined,
+  attachmentForScreenReaderMiddleware: undefined,
+  attachmentMiddleware: undefined,
+  renderMarkdown: undefined,
+  styleOptions: undefined,
+  styleSet: undefined
+};
+
+AddFullBundle.propTypes = {
+  adaptiveCardHostConfig: PropTypes.any,
+  adaptiveCardsHostConfig: PropTypes.any,
+  // TypeScript class is not mappable to PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  adaptiveCardsPackage: PropTypes.shape({
+    AdaptiveCard: PropTypes.func.isRequired,
+    HorizontalAlignment: PropTypes.any.isRequired,
+    TextSize: PropTypes.any.isRequired,
+    TextWeight: PropTypes.any.isRequired
+  }),
+  attachmentForScreenReaderMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
+  attachmentMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
+  children: PropTypes.func.isRequired,
+  renderMarkdown: PropTypes.func,
+  styleOptions: PropTypes.any,
+  styleSet: PropTypes.any
+};
+
+export default AddFullBundle;
+
+export type { AddFullBundleProps };

package/src/FullComposer.tsx

@@ -0,0 +1,38 @@
+import { ComposerProps } from 'botframework-webchat-api';
+import { Components } from 'botframework-webchat-component';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
+
+import AddFullBundle, { AddFullBundleProps } from './AddFullBundle';
+
+const { Composer } = Components;
+
+type FullComposerProps = ComposerProps & AddFullBundleProps;
+
+const FullComposer: FC<FullComposerProps> = props => (
+  <AddFullBundle {...props}>
+    {extraProps => (
+      <Composer {...props} {...extraProps}>
+        {props.children}
+      </Composer>
+    )}
+  </AddFullBundle>
+);
+
+FullComposer.defaultProps = {
+  ...Composer.defaultProps,
+  adaptiveCardsHostConfig: undefined,
+  adaptiveCardsPackage: undefined,
+  children: undefined
+};
+
+FullComposer.propTypes = {
+  ...Composer.propTypes,
+  adaptiveCardsHostConfig: PropTypes.any,
+  adaptiveCardsPackage: PropTypes.any,
+  children: PropTypes.any
+};
+
+export default FullComposer;
+
+export type { FullComposerProps };

package/src/FullReactWebChat.tsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React, { VFC } from 'react';
+import ReactWebChat, { ReactWebChatProps } from 'botframework-webchat-component';
+
+import AddFullBundle, { AddFullBundleProps } from './AddFullBundle';
+
+type FullReactWebChatProps = ReactWebChatProps & Omit<AddFullBundleProps, 'children'>;
+
+// Add additional props to <WebChat>, so it support additional features
+const FullReactWebChat: VFC<FullReactWebChatProps> = props => (
+  <AddFullBundle {...props}>{extraProps => <ReactWebChat {...props} {...extraProps} />}</AddFullBundle>
+);
+
+FullReactWebChat.defaultProps = {
+  ...ReactWebChat.defaultProps,
+  adaptiveCardHostConfig: undefined,
+  adaptiveCardsHostConfig: undefined,
+  adaptiveCardsPackage: undefined,
+  renderMarkdown: undefined
+};
+
+FullReactWebChat.propTypes = {
+  ...ReactWebChat.propTypes,
+  adaptiveCardHostConfig: PropTypes.any,
+  adaptiveCardsHostConfig: PropTypes.any,
+  adaptiveCardsPackage: PropTypes.any,
+  renderMarkdown: PropTypes.func
+};
+
+export default FullReactWebChat;
+
+export type { FullReactWebChatProps };

package/src/__tests__/createDirectLine.spec.js

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 jest.mock('botframework-directlinejs', () => {
   class DirectLine {
     constructor({ botAgent }) {

package/src/__tests__/renderMarkdown.spec.js

@@ -17,7 +17,7 @@ describe('renderMarkdown', () => {
     );
   });
 
-  it('should respect CRFL', () => {
+  it('should respect CRLF', () => {
     const styleOptions = { markdownRespectCRLF: true };
 
     expect(renderMarkdown('Same Line.\n\rSame Line.\r\n2nd line.', styleOptions)).toBe(

package/src/__tests__/versionTag.es5.spec.js

@@ -1,3 +1,6 @@
+/** @jest-environment jsdom */
+/* globals process */
+
 process.env.npm_package_version = '0.0.0-test';
 
 describe('loading Web Chat', () => {

package/src/__tests__/versionTag.full.spec.js

@@ -1,3 +1,6 @@
+/** @jest-environment jsdom */
+/* globals process */
+
 process.env.npm_package_version = '0.0.0-test';
 
 describe('loading Web Chat', () => {

package/src/__tests__/versionTag.minimal.spec.js

@@ -1,3 +1,6 @@
+/** @jest-environment jsdom */
+/* globals process */
+
 process.env.npm_package_version = '0.0.0-test';
 
 describe('loading Web Chat', () => {

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

@@ -1,13 +1,25 @@
 import * as defaultAdaptiveCardsPackage from 'adaptivecards';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, ReactNode, useMemo } from 'react';
 
 import AdaptiveCardsContext from './AdaptiveCardsContext';
+import AdaptiveCardsPackage from '../types/AdaptiveCardsPackage';
 
-const AdaptiveCardsComposer = ({ adaptiveCardsHostConfig, adaptiveCardsPackage, children }) => {
-  const patchedAdaptiveCardsPackage = useMemo(() => adaptiveCardsPackage || defaultAdaptiveCardsPackage, [
-    adaptiveCardsPackage
-  ]);
+type AdaptiveCardsComposerProps = {
+  adaptiveCardsHostConfig: any;
+  adaptiveCardsPackage: AdaptiveCardsPackage;
+  children: ReactNode;
+};
+
+const AdaptiveCardsComposer: FC<AdaptiveCardsComposerProps> = ({
+  adaptiveCardsHostConfig,
+  adaptiveCardsPackage,
+  children
+}) => {
+  const patchedAdaptiveCardsPackage = useMemo(
+    () => adaptiveCardsPackage || defaultAdaptiveCardsPackage,
+    [adaptiveCardsPackage]
+  );
 
   const adaptiveCardsContext = useMemo(
     () => ({

package/src/adaptiveCards/AdaptiveCardsContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+import AdaptiveCardsPackage from '../types/AdaptiveCardsPackage';
+
+type AdaptiveCardsContext = {
+  adaptiveCardsPackage: AdaptiveCardsPackage;
+  hostConfigFromProps: any;
+};
+
+const AdaptiveCardsContext = createContext<AdaptiveCardsContext>(undefined);
+
+export default AdaptiveCardsContext;

package/src/adaptiveCards/AdaptiveCardsStyleOptions.ts

@@ -1,7 +1,9 @@
+/**
+ * Adaptive Cards styling
+ */
 type AdaptiveCardsStyleOptions = {
-  /**
-   * Adaptive Cards styling
-   */
+  /** Adaptive Cards: Specify the maximum schema version supported by the Adaptive Card serializer. */
+  adaptiveCardsParserMaxVersion?: string;
 
   /**
    * Adaptive Cards styling for 'emphasis' container style

package/src/adaptiveCards/AdaptiveCardsStyleSet.ts

@@ -0,0 +1,7 @@
+type AdaptiveCardsStyleSet = {
+  adaptiveCardRenderer: any;
+  animationCardAttachment: any;
+  audioCardAttachment: any;
+};
+
+export default AdaptiveCardsStyleSet;

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

@@ -1,9 +1,15 @@
+import { DirectLineAttachment } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import AdaptiveCardContent from './AdaptiveCardContent';
 
-const AdaptiveCardAttachment = ({ attachment: { content }, disabled }) => (
+type AdaptiveCardAttachmentProps = {
+  attachment: DirectLineAttachment;
+  disabled?: boolean;
+};
+
+const AdaptiveCardAttachment: FC<AdaptiveCardAttachmentProps> = ({ attachment: { content }, disabled }) => (
   <AdaptiveCardContent content={content} disabled={disabled} />
 );
 

package/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts

@@ -16,14 +16,16 @@ import {
   TextWeight
 } from 'adaptivecards';
 
-import { CardAction } from 'botframework-directlinejs';
+import { DirectLineCardAction } from 'botframework-webchat-core';
+import AdaptiveCardsPackage from '../../types/AdaptiveCardsPackage';
+import AdaptiveCardsStyleOptions from '../AdaptiveCardsStyleOptions';
 
 export interface BotFrameworkCardAction {
-  __isBotFrameworkCardAction: boolean;
-  cardAction: CardAction;
+  __isBotFrameworkCardAction: true;
+  cardAction: DirectLineCardAction;
 }
 
-function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
+function addCardAction(cardAction: DirectLineCardAction, includesOAuthButtons?: boolean) {
   const { type } = cardAction;
   let action;
 
@@ -40,11 +42,11 @@ function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
       cardAction
     };
 
-    action.title = cardAction.title;
+    action.title = (cardAction as { title: string }).title;
   } else {
     action = new OpenUrlAction();
 
-    action.title = cardAction.title;
+    action.title = (cardAction as { title: string }).title;
     action.url = cardAction.type === 'call' ? `tel:${cardAction.value}` : cardAction.value;
   }
 
@@ -54,9 +56,13 @@ function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
 export default class AdaptiveCardBuilder {
   card: AdaptiveCard;
   container: Container;
-  styleOptions: any;
+  styleOptions: AdaptiveCardsStyleOptions;
 
-  constructor(adaptiveCards, styleOptions, direction = 'ltr') {
+  constructor(
+    adaptiveCards: AdaptiveCardsPackage,
+    styleOptions: AdaptiveCardsStyleOptions,
+    direction: 'ltr' | 'rtl' | 'auto' = 'ltr'
+  ) {
     this.card = new adaptiveCards.AdaptiveCard();
     this.container = new Container();
     this.container.rtl = direction === 'rtl';
@@ -65,7 +71,7 @@ export default class AdaptiveCardBuilder {
     this.card.addItem(this.container);
   }
 
-  addColumnSet(sizes: number[], container: Container = this.container, selectAction?: CardAction) {
+  addColumnSet(sizes: number[], container: Container = this.container, selectAction?: DirectLineCardAction) {
     const columnSet = new ColumnSet();
 
     columnSet.selectAction = selectAction && addCardAction(selectAction);
@@ -101,7 +107,7 @@ export default class AdaptiveCardBuilder {
     }
   }
 
-  addButtons(cardActions: CardAction[], includesOAuthButtons?: boolean) {
+  addButtons(cardActions: DirectLineCardAction[], includesOAuthButtons?: boolean) {
     cardActions &&
       cardActions.forEach(cardAction => {
         this.card.addAction(addCardAction(cardAction, includesOAuthButtons));
@@ -111,13 +117,13 @@ export default class AdaptiveCardBuilder {
   addCommonHeaders(content: ICommonContent) {
     const { richCardWrapTitle } = this.styleOptions;
     this.addTextBlock(content.title, {
-      color: TextColor.Dark,
+      color: TextColor.Default,
       size: TextSize.Medium,
       weight: TextWeight.Bolder,
       wrap: richCardWrapTitle
     });
-    this.addTextBlock(content.subtitle, { color: TextColor.Dark, isSubtle: true, wrap: richCardWrapTitle });
-    this.addTextBlock(content.text, { color: TextColor.Dark, wrap: true });
+    this.addTextBlock(content.subtitle, { color: TextColor.Default, isSubtle: true, wrap: richCardWrapTitle });
+    this.addTextBlock(content.text, { color: TextColor.Default, wrap: true });
   }
 
   addCommon(content: ICommonContent) {
@@ -125,7 +131,7 @@ export default class AdaptiveCardBuilder {
     this.addButtons(content.buttons);
   }
 
-  addImage(url: string, container?: Container, selectAction?: CardAction, altText?: string) {
+  addImage(url: string, container?: Container, selectAction?: DirectLineCardAction, altText?: string) {
     container = container || this.container;
 
     const image = new Image();
@@ -140,7 +146,7 @@ export default class AdaptiveCardBuilder {
 }
 
 export interface ICommonContent {
-  buttons?: CardAction[];
+  buttons?: DirectLineCardAction[];
   subtitle?: string;
   text?: string;
   title?: string;

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useParseAdaptiveCardJSON from '../hooks/internal/useParseAdaptiveCardJSON';
@@ -17,7 +17,13 @@ function stripSubmitAction(card) {
   return { ...card, nextActions };
 }
 
-const AdaptiveCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type AdaptiveCardContentProps = {
+  actionPerformedClassName?: string;
+  content: any;
+  disabled?: boolean;
+};
+
+const AdaptiveCardContent: FC<AdaptiveCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const parseAdaptiveCardJSON = useParseAdaptiveCardJSON();
 
   const card = useMemo(