botframework-webchat 4.13.0 → 4.15.0

package/src/AddFullBundle.tsx

@@ -0,0 +1,93 @@
+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
+  // @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, isForbiddenPropertyName } 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);
@@ -90,9 +96,12 @@ export default class AdaptiveCardBuilder {
     if (typeof text !== 'undefined') {
       const textblock = new TextBlock();
 
-      // tslint:disable-next-line:forin
       for (const prop in template) {
-        textblock[prop] = template[prop];
+        if (!isForbiddenPropertyName(prop)) {
+          // Mitigated through denylisting.
+          // eslint-disable-next-line security/detect-object-injection
+          textblock[prop] = template[prop];
+        }
       }
 
       textblock.text = text;
@@ -101,7 +110,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 +120,14 @@ export default class AdaptiveCardBuilder {
   addCommonHeaders(content: ICommonContent) {
     const { richCardWrapTitle } = this.styleOptions;
     this.addTextBlock(content.title, {
-      color: TextColor.Dark,
+      color: TextColor.Default,
       size: TextSize.Medium,
+      style: 'heading',
       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 +135,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 +150,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(