botframework-webchat 4.13.0 → 4.14.2

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

@@ -1,12 +1,15 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 2] }] */
 
+import { Action, OpenUrlAction, SubmitAction } from 'adaptivecards';
 import { Components, getTabIndex, hooks } from 'botframework-webchat-component';
+import { DirectLineCardAction } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, VFC } from 'react';
 
 import useAdaptiveCardsHostConfig from '../hooks/useAdaptiveCardsHostConfig';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import { BotFrameworkCardAction } from './AdaptiveCardBuilder';
 
 const { ErrorBox } = Components;
 const { useDisabled, useLocalizer, usePerformCardAction, useRenderMarkdownAsHTML, useScrollToEnd, useStyleSet } = hooks;
@@ -131,7 +134,7 @@ function disableElementWithUndo(element) {
   return () => undoStack.forEach(undo => undo && undo());
 }
 
-function disableInputElementsWithUndo(element, observeSubtree = true) {
+function disableInputElementsWithUndo(element: HTMLElement, observeSubtree = true) {
   const undoStack = [].map.call(element.querySelectorAll('button, input, select, textarea'), element =>
     disableElementWithUndo(element)
   );
@@ -145,7 +148,7 @@ function disableInputElementsWithUndo(element, observeSubtree = true) {
   if (observeSubtree) {
     const observer = new MutationObserver(mutations =>
       mutations.forEach(({ addedNodes }) =>
-        undoStack.push(...addedNodes.map(addedNode => disableInputElementsWithUndo(addedNode, false)))
+        undoStack.push(...[].map.call(addedNodes, addedNode => disableInputElementsWithUndo(addedNode, false)))
       )
     );
 
@@ -157,6 +160,167 @@ function disableInputElementsWithUndo(element, observeSubtree = true) {
   return () => undoStack.forEach(undo => undo && undo());
 }
 
+/**
+ * Checks if an element contains a class.
+ *
+ * @param {HTMLElement} element - The element to check for the class.
+ * @param {string} className - The name of the class to check for.
+ * @returns {boolean} `true` if the element contains the class, otherwise, `false`.
+ */
+function containsClassName(element: HTMLElement, className: string): boolean {
+  return (element.className || '').split(' ').includes(className);
+}
+
+/**
+ * Gets the value of an attribute from an element.
+ *
+ * @returns {false | string} The value of the attribute. `false` if the attribute was not set.
+ */
+function getAttribute(element: HTMLElement, qualifiedName: string): false | string {
+  return element.hasAttribute(qualifiedName) && element.getAttribute(qualifiedName);
+}
+
+/**
+ * Sets or removes an attribute from an element.
+ *
+ * @param {HTMLElement} element - The element to set or remove attribute from.
+ * @param {string} qualifiedName - The name of the attribute.
+ * @param {false | string} value - The value of the attribute. When passing `false`, remove the attribute.
+ */
+function setOrRemoveAttribute(element: HTMLElement, qualifiedName: string, value: false | string): void {
+  if (value === false) {
+    element.removeAttribute(qualifiedName);
+  } else {
+    element.setAttribute(qualifiedName, value);
+  }
+}
+
+/**
+ * Sets or removes an attribute from an element with an undo function.
+ *
+ * @param {HTMLElement} element - The element to set or remove attribute from.
+ * @param {string} qualifiedName - The name of the attribute.
+ * @param {false | string} value - The value of the attribute. When passing `false`, remove the attribute.
+ *
+ * @returns {() => void} The undo function, when called, will undo all manipulations by restoring values recorded at the time of the function call.
+ */
+function setOrRemoveAttributeWithUndo(element: HTMLElement, qualifiedName: string, value: false | string): () => void {
+  const prevValue = getAttribute(element, qualifiedName);
+
+  setOrRemoveAttribute(element, qualifiedName, value);
+
+  return () => setOrRemoveAttribute(element, qualifiedName, prevValue);
+}
+
+/**
+ * Finds the first ancestor that fulfill the predicate.
+ *
+ * @param {HTMLElement} element - The starting element. This element will not be checked against the predicate.
+ * @param {(ancestor: HTMLElement) => boolean} predicate - The predicate to fulfill.
+ *
+ * @returns {HTMLElement | undefined} The first ancestor that fulfill the predicate, otherwise, `undefined`.
+ */
+function findAncestor(element: HTMLElement, predicate: (ancestor: HTMLElement) => boolean): HTMLElement | undefined {
+  let current = element.parentElement;
+
+  while (current) {
+    if (predicate.call(element, current)) {
+      return current;
+    }
+
+    current = current.parentElement;
+  }
+}
+
+/**
+ * Indicates the action selected by performing a series of manipulations, with undo:
+ *
+ * - Accessibility: set `aria-pressed` to `true`
+ * - Applies `styleOptions.actionPerformedClassName`
+ *
+ * @param {HTMLElement[]} selectedActionElements - An array of elements that are representing the action and is selected.
+ * @param {string?} actionPerformedClassName - The name of the class to apply to all elements.
+ *
+ * @returns {() => void} The undo function, when called, will undo all manipulations by restoring values recorded at the time of the function call.
+ */
+function indicateActionSelectionWithUndo(
+  selectedActionElements: HTMLElement[],
+  actionPerformedClassName?: string
+): (() => void) | undefined {
+  if (!selectedActionElements.length) {
+    return;
+  }
+
+  // Verify all input elements are "ac-pushButton", could belongs to ActionSet or "card actions".
+  if (selectedActionElements.some(actionElement => !containsClassName(actionElement, 'ac-pushButton'))) {
+    console.warn(
+      'botframework-webchat: Cannot mark selected action in the card, some elements are not an "ac-pushButton".'
+    );
+
+    return;
+  }
+
+  // A distinct set of action set containers which has selections, excluding containers without actions.
+  // Multiple submission in an Adaptive Card is still a vague area and TBD.
+  // We might want to disable the whole card, just buttons in same container, or do nothing (today).
+  const actionSetElements = new Set<HTMLElement>();
+
+  selectedActionElements.forEach(selectedActionElement => {
+    const actionSetElement = findAncestor(
+      selectedActionElement,
+      ancestor => ancestor.getAttribute('role') === 'menubar'
+    );
+
+    actionSetElement && actionSetElements.add(actionSetElement);
+  });
+
+  const undoStack: (() => void)[] = [];
+
+  actionSetElements.forEach(actionSetElement => {
+    // Remove "role" from every "ac-actionSet" container.
+    undoStack.push(setOrRemoveAttributeWithUndo(actionSetElement, 'role', false));
+
+    // Modify "role" of every actions in the container.
+    Array.from(actionSetElement.querySelectorAll('.ac-pushButton') as NodeListOf<HTMLElement>).forEach(
+      actionElement => {
+        if (selectedActionElements.includes(actionElement)) {
+          // Add "aria-pressed" and set "role" attribute to "button" (which is required by "aria-pressed").
+          undoStack.push(setOrRemoveAttributeWithUndo(actionElement, 'aria-pressed', 'true'));
+          undoStack.push(setOrRemoveAttributeWithUndo(actionElement, 'role', 'button'));
+
+          // Highlight actions by applying `styleOptions.actionPerformedClassName`.
+          actionPerformedClassName &&
+            undoStack.push(addPersistentClassWithUndo(actionElement, actionPerformedClassName));
+        } else {
+          // We removed "role=menubar" from the container, we must remove "role=menuitem" from unselected actions.
+          undoStack.push(setOrRemoveAttributeWithUndo(actionElement, 'role', false));
+        }
+      }
+    );
+  });
+
+  return () => undoStack.forEach(undo => undo());
+}
+
+/**
+ * Fixes accessibility issues from Adaptive Card, with undo.
+ *
+ * @returns {() => void} The undo function, when called, will undo all manipulations by restoring values recorded at the time of the function call.
+ */
+function fixAccessibilityIssuesWithUndo(element: HTMLElement): () => void {
+  // These hacks should be done in Adaptive Cards library instead.
+  const undoStack: (() => void)[] = [];
+
+  // Related to #3949: All action buttons inside role="menubar" should be role="menuitem".
+  undoStack.push(
+    ...Array.from(element.querySelectorAll('.ac-actionSet[role="menubar"] [role="button"]')).map(actionButton =>
+      setAttributeWithUndo(actionButton, 'role', 'menuitem')
+    )
+  );
+
+  return () => undoStack.forEach(undo => undo());
+}
+
 function getFocusableElements(element) {
   return [].filter.call(
     element.querySelectorAll(
@@ -223,7 +387,19 @@ function saveInputValues(element) {
   });
 }
 
-const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled: disabledFromProps, tapAction }) => {
+type AdaptiveCardRendererProps = {
+  actionPerformedClassName?: string;
+  adaptiveCard: any;
+  disabled?: boolean;
+  tapAction?: DirectLineCardAction;
+};
+
+const AdaptiveCardRenderer: VFC<AdaptiveCardRendererProps> = ({
+  actionPerformedClassName,
+  adaptiveCard,
+  disabled: disabledFromProps,
+  tapAction
+}) => {
   const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet();
   const [{ GlobalSettings, HostConfig }] = useAdaptiveCardsPackage();
   const [actionsPerformed, setActionsPerformed] = useState([]);
@@ -232,8 +408,8 @@ const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled
   const [errors, setErrors] = useState([]);
   const [lastRender, setLastRender] = useState(0);
   const activeElementIndexRef = useRef(-1);
-  const adaptiveCardElementRef = useRef();
-  const contentRef = useRef();
+  const adaptiveCardElementRef = useRef<HTMLElement>();
+  const contentRef = useRef<HTMLDivElement>();
   const inputValuesRef = useRef([]);
   const localize = useLocalizer();
   const performCardAction = usePerformCardAction();
@@ -295,7 +471,7 @@ const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled
   );
 
   const handleExecuteAction = useCallback(
-    action => {
+    (action: Action) => {
       // Some items, e.g. tappable image, cannot be disabled thru DOM attributes
       if (disabled) {
         return;
@@ -304,25 +480,40 @@ const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled
       addActionsPerformed(action);
 
       const actionTypeName = action.getJsonTypeName();
+      const { iconUrl: image, title } = action;
 
+      // We cannot use "instanceof" check here, because web devs may bring their own version of Adaptive Cards package.
+      // We need to check using "getJsonTypeName()" instead.
       if (actionTypeName === 'Action.OpenUrl') {
+        const { url: value } = action as OpenUrlAction;
+
         performCardAction({
+          image,
+          title,
           type: 'openUrl',
-          value: action.url
+          value
         });
       } else if (actionTypeName === 'Action.Submit') {
-        if (typeof action.data !== 'undefined') {
-          const { data: actionData } = action;
-
-          if (actionData && actionData.__isBotFrameworkCardAction) {
-            const { cardAction } = actionData;
-            const { displayText, text, type, value } = cardAction;
+        const { data } = action as SubmitAction as {
+          data: string | BotFrameworkCardAction;
+        };
 
-            performCardAction({ displayText, text, type, value });
+        if (typeof data !== 'undefined') {
+          if (typeof data === 'string') {
+            performCardAction({
+              image,
+              title,
+              type: 'imBack',
+              value: data
+            });
+          } else if (data.__isBotFrameworkCardAction) {
+            performCardAction(data.cardAction);
           } else {
             performCardAction({
-              type: typeof action.data === 'string' ? 'imBack' : 'postBack',
-              value: action.data
+              image,
+              title,
+              type: 'postBack',
+              value: data
             });
           }
         }
@@ -421,48 +612,33 @@ const AdaptiveCardRenderer = ({ actionPerformedClassName, adaptiveCard, disabled
     adaptiveCard.onExecuteAction = disabled ? undefined : handleExecuteAction;
   }, [adaptiveCard, disabled, handleExecuteAction]);
 
+  useEffect(() => fixAccessibilityIssuesWithUndo(adaptiveCardElementRef.current), [adaptiveCardElementRef, lastRender]);
+
   useEffect(() => {
     // If the Adaptive Card get re-rendered, re-disable elements as needed.
     if (disabled) {
       return disableInputElementsWithUndo(adaptiveCardElementRef.current);
     }
-  }, [disabled, lastRender]);
+  }, [adaptiveCardElementRef, disabled, lastRender]);
 
   useEffect(() => {
     // If the Adaptive Card changed, reset all actions performed.
     setActionsPerformed([]);
   }, [adaptiveCard]);
 
-  useEffect(() => {
-    // Add aria-pressed and role attribute to the AC action button selected by the user.
-    actionsPerformed.forEach(({ renderedElement }) => {
-      if (renderedElement && adaptiveCardElementRef.current.contains(renderedElement)) {
-        setAttributeWithUndo(renderedElement, 'aria-pressed', 'true');
-        setAttributeWithUndo(renderedElement, 'role', 'button');
-      }
-    });
-
-    // Add developers to highlight actions when they have been clicked.
-    if (!actionPerformedClassName) {
-      return;
-    }
-
-    const undoStack = actionsPerformed.map(
-      ({ renderedElement }) =>
-        renderedElement &&
-        adaptiveCardElementRef.current.contains(renderedElement) &&
-        addPersistentClassWithUndo(renderedElement, actionPerformedClassName)
-    );
-
-    return () => undoStack.forEach(undo => undo && undo());
-  }, [actionsPerformed, actionPerformedClassName, lastRender]);
+  useEffect(
+    () =>
+      indicateActionSelectionWithUndo(
+        // Actions that do not have "renderedElement" means it is the Adaptive Card itself, such as "selectAction" (AC) or "tapAction" (rich cards).
+        // We do not need to mark the whole card as performed.
+        actionsPerformed.map(({ renderedElement }) => renderedElement).filter(renderedElement => renderedElement),
+        actionPerformedClassName
+      ),
+    [actionsPerformed, actionPerformedClassName, lastRender]
+  );
 
   return errors.length ? (
-    node_env === 'development' ? (
-      <ErrorBox error={errors[0]} type={localize('ADAPTIVE_CARD_ERROR_BOX_TITLE_RENDER')} />
-    ) : (
-      false
-    )
+    node_env === 'development' && <ErrorBox error={errors[0]} type={localize('ADAPTIVE_CARD_ERROR_BOX_TITLE_RENDER')} />
   ) : (
     <div
       className={classNames(adaptiveCardRendererStyleSet + '', 'webchat__adaptive-card-renderer')}
@@ -483,7 +659,13 @@ AdaptiveCardRenderer.propTypes = {
   actionPerformedClassName: PropTypes.string,
   adaptiveCard: PropTypes.any.isRequired,
   disabled: PropTypes.bool,
+
+  // TypeScript class is not mappable to PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   tapAction: PropTypes.shape({
+    image: PropTypes.string,
+    title: PropTypes.string,
     type: PropTypes.string.isRequired,
     value: PropTypes.string
   })

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

@@ -1,15 +1,22 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineAnimationCard } 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 { ImageContent, VideoContent } = Components;
 const { useStyleSet } = hooks;
 
-const AnimationCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type AnimationCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineAnimationCard;
+  disabled?: boolean;
+};
+
+const AnimationCardContent: FC<AnimationCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const { media = [] } = content;
   const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet();
 

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

@@ -1,15 +1,22 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineAudioCard } 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 { AudioContent } = Components;
 const { useStyleSet } = hooks;
 
-const AudioCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type AudioCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineAudioCard;
+  disabled?: boolean;
+};
+
+const AudioCardContent: FC<AudioCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet();
   const { autostart = false, autoloop = false, image: { url: imageURL = '' } = {}, media = [] } = content;
 

package/src/adaptiveCards/Attachment/CommonCard.js

@@ -6,8 +6,9 @@ import { hooks } from 'botframework-webchat-component';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 const CommonCard = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();

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

@@ -1,17 +1,26 @@
+import { DirectLineHeroCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
-const HeroCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type HeroCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineHeroCard;
+  disabled?: boolean;
+};
+
+const HeroCardContent: FC<HeroCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [styleOptions] = useStyleOptions();
   const [direction] = useDirection();
+
   const builtCard = useMemo(() => {
     const builder = new AdaptiveCardBuilder(adaptiveCardsPackage, styleOptions, direction);
 

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

@@ -1,14 +1,22 @@
+import { DirectLineOAuthCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
-const OAuthCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type OAuthCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineOAuthCard;
+  disabled?: boolean;
+};
+
+const OAuthCardContent: FC<OAuthCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
   const [styleOptions] = useStyleOptions();

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

@@ -1,20 +1,28 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 10, 15, 25, 50, 75] }] */
 
+import { DirectLineReceiptCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useLocalizer, useStyleOptions } = hooks;
+const { useDirection, useLocalizer } = hooks;
 
 function nullOrUndefined(obj) {
   return obj === null || typeof obj === 'undefined';
 }
 
-const ReceiptCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type ReceiptCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineReceiptCard;
+  disabled?: boolean;
+};
+
+const ReceiptCardContent: FC<ReceiptCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
   const [styleOptions] = useStyleOptions();
@@ -47,32 +55,54 @@ const ReceiptCardContent = ({ actionPerformedClassName, content, disabled }) =>
       }
 
       items &&
-        items.map(({ image: { alt, tap: imageTap, url } = {}, price, quantity, subtitle, tap, text, title }) => {
-          let itemColumns;
-
-          if (url) {
-            const [itemImageColumn, ...columns] = builder.addColumnSet([15, 75, 10]);
-
-            itemColumns = columns;
-            builder.addImage(url, itemImageColumn, imageTap, alt);
-          } else {
-            itemColumns = builder.addColumnSet([75, 25], undefined, tap && tap);
-          }
-
-          const [itemTitleColumn, itemPriceColumn] = itemColumns;
-
-          builder.addTextBlock(
-            quantity ? `${title} &times; ${quantity}` : title,
-            { size: TextSize.Medium, weight: TextWeight.Bolder, wrap: richCardWrapTitle },
-            itemTitleColumn
-          );
-          builder.addTextBlock(subtitle, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
-          builder.addTextBlock(price, { horizontalAlignment: HorizontalAlignment.Right }, itemPriceColumn);
-
-          if (text) {
-            builder.addTextBlock(text, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
+        items.map(
+          ({
+            image: { alt, tap: imageTap, url } = {},
+            price,
+            quantity,
+            subtitle,
+            tap,
+            text,
+            title
+          }: {
+            image: {
+              alt?: string;
+              tap?: any;
+              url?: string;
+            };
+            price: string;
+            quantity: string;
+            subtitle: string;
+            tap: any;
+            text: string;
+            title: string;
+          }) => {
+            let itemColumns;
+
+            if (url) {
+              const [itemImageColumn, ...columns] = builder.addColumnSet([15, 75, 10]);
+
+              itemColumns = columns;
+              builder.addImage(url, itemImageColumn, imageTap, alt);
+            } else {
+              itemColumns = builder.addColumnSet([75, 25], undefined, tap && tap);
+            }
+
+            const [itemTitleColumn, itemPriceColumn] = itemColumns;
+
+            builder.addTextBlock(
+              quantity ? `${title} &times; ${quantity}` : title,
+              { size: TextSize.Medium, weight: TextWeight.Bolder, wrap: richCardWrapTitle },
+              itemTitleColumn
+            );
+            builder.addTextBlock(subtitle, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
+            builder.addTextBlock(price, { horizontalAlignment: HorizontalAlignment.Right }, itemPriceColumn);
+
+            if (text) {
+              builder.addTextBlock(text, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
+            }
           }
-        });
+        );
 
       if (!nullOrUndefined(vat)) {
         const vatCol = builder.addColumnSet([75, 25]);

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

@@ -1,12 +1,19 @@
+import { DirectLineSignInCard } from 'botframework-webchat-core';
 import { 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 SignInCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type SignInCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineSignInCard;
+  disabled?: boolean;
+};
+
+const SignInCardContent: FC<SignInCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet();
 
   return (

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

@@ -1,19 +1,28 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [25, 75] }] */
 
+import { DirectLineThumbnailCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
-const ThumbnailCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type ThumbnailCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineThumbnailCard;
+  disabled?: boolean;
+};
+
+const ThumbnailCardContent: FC<ThumbnailCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
   const [styleOptions] = useStyleOptions();
+
   const builtCard = useMemo(() => {
     if (content) {
       const builder = new AdaptiveCardBuilder(adaptiveCardsPackage, styleOptions, direction);