botframework-webchat-component 4.14.0 → 4.15.1

package/src/Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware.ts

@@ -4,14 +4,16 @@ import ScrollToEndButton from './ScrollToEndButton';
 
 export default function createScrollToEndButtonMiddleware(): ScrollToEndButtonMiddleware[] {
   return [
-    () => () => ({ atEnd, styleOptions: { scrollToEndButtonBehavior }, unread }) =>
-      !scrollToEndButtonBehavior
-        ? // Don't show the button when it is set to false.
-          false
-        : scrollToEndButtonBehavior === 'any'
-        ? // Show when the scroll view is not at the end, regardless of number of unread activities.
-          !atEnd && ScrollToEndButton
-        : // Show when the scroll view is not at the end of the transcript, and there are new/unread activities.
-          !atEnd && unread && ScrollToEndButton
+    () =>
+      () =>
+      ({ atEnd, styleOptions: { scrollToEndButtonBehavior }, unread }) =>
+        !scrollToEndButtonBehavior
+          ? // Don't show the button when it is set to false.
+            false
+          : scrollToEndButtonBehavior === 'any'
+          ? // Show when the scroll view is not at the end, regardless of number of unread activities.
+            !atEnd && ScrollToEndButton
+          : // Show when the scroll view is not at the end of the transcript, and there are new/unread activities.
+            !atEnd && unread && ScrollToEndButton
   ];
 }

package/src/Middleware/Toast/createCoreMiddleware.tsx

@@ -4,17 +4,19 @@ import createToastMiddleware from '../../Toast/createToastMiddleware';
 
 function createCoreMiddleware(): ToastMiddleware[] {
   return [
-    () => next => (...args) => {
-      const [
-        {
-          notification: { id }
-        }
-      ] = args;
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            notification: { id }
+          }
+        ] = args;
 
-      // We are ignoring "connectivitystatus" notifications, we will render it using <BasicConnectivityStatus> instead.
-      // If devs want to render it, they can add a middleware.
-      return id !== 'connectivitystatus' && next(...args);
-    },
+        // We are ignoring "connectivitystatus" notifications, we will render it using <BasicConnectivityStatus> instead.
+        // If devs want to render it, they can add a middleware.
+        return id !== 'connectivitystatus' && next(...args);
+      },
     createToastMiddleware()
   ];
 }

package/src/Middleware/TypingIndicator/createCoreMiddleware.tsx

@@ -21,6 +21,12 @@ const DotIndicator = () => {
 
 // TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
 export default function createCoreMiddleware(): TypingIndicatorMiddleware[] {
-  /* eslint-disable-next-line react/prop-types */
-  return [() => () => ({ visible }) => visible && <DotIndicator />];
+  return [
+    () =>
+      () =>
+      // This is not a React component.
+      // eslint-disable-next-line react/prop-types
+      ({ visible }) =>
+        visible && <DotIndicator />
+  ];
 }

package/src/ScreenReaderActivity.js

@@ -9,7 +9,13 @@ import activityAltText from './Utils/activityAltText';
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 import useRenderMarkdownAsHTML from './hooks/useRenderMarkdownAsHTML';
 
-const { useAvatarForBot, useCreateAttachmentForScreenReaderRenderer, useDateFormatter, useLocalizer } = hooks;
+const {
+  useAvatarForBot,
+  useCreateAttachmentForScreenReaderRenderer,
+  useDateFormatter,
+  useGetKeyByActivity,
+  useLocalizer
+} = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__screen-reader-activity': {
@@ -76,6 +82,7 @@ ScreenReaderAttachments.propTypes = {
 const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
   const formatDate = useDateFormatter();
+  const getKeyByActivity = useGetKeyByActivity();
   const localize = useLocalizer();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
@@ -85,24 +92,31 @@ const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) =>
 
   const fromUser = role === 'user';
 
-  const greetingAlt = (fromUser
-    ? localize('ACTIVITY_YOU_SAID_ALT')
-    : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
+  const greetingAlt = (
+    fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
   ).replace(/\s{2,}/gu, ' ');
 
   const timestampAlt = localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(timestamp));
+  const labelId = useMemo(
+    () => `webchat__screen-reader-activity__label-${getKeyByActivity(activity)}`,
+    [activity, getKeyByActivity]
+  );
 
   return (
     <article
       aria-atomic={true}
+      // Narrator requires the "aria-labelledby" attribute, otherwise, it will only read "aria-roledescription".
+      // However, iOS VoiceOver and NVDA both ignore the "aria-labelledby" and read out the whole content, including timestamp.
+      aria-labelledby={labelId}
       aria-roledescription="message"
       className={classNames('webchat__screen-reader-activity', rootClassName)}
       // "id" attribute is used by `aria-labelledby`.
       // eslint-disable-next-line react/forbid-dom-props
       id={id}
-      role="region"
     >
-      <p>
+      {/* "id" attribute is used by `aria-labelledby`. */}
+      {/* eslint-disable-next-line react/forbid-dom-props */}
+      <p id={labelId}>
         <span>{greetingAlt}</span>
         <span>{textAlt}</span>
       </p>

package/src/{ScreenReaderText.js → ScreenReaderText.tsx}

@@ -1,7 +1,9 @@
 /* eslint react/forbid-dom-props: ["off"] */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
+
+import type { VFC } from 'react';
 
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 
@@ -21,21 +23,37 @@ const ROOT_STYLE = {
   width: 1
 };
 
-const ScreenReaderText = ({ id, text }) => {
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <div className={rootClassName} id={id}>
-      {text}
-    </div>
-  );
+type ScreenReaderTextProps = {
+  'aria-hidden'?: boolean;
+  id?: string;
+  text: string;
 };
 
+const ScreenReaderText: VFC<ScreenReaderTextProps> = forwardRef<HTMLDivElement, ScreenReaderTextProps>(
+  ({ 'aria-hidden': ariaHidden, id, text }, ref) => {
+    const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+    if (ariaHidden && !id) {
+      console.warn(
+        'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
+      );
+    }
+
+    return (
+      <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
+        {text}
+      </div>
+    );
+  }
+);
+
 ScreenReaderText.defaultProps = {
+  'aria-hidden': undefined,
   id: undefined
 };
 
 ScreenReaderText.propTypes = {
+  'aria-hidden': PropTypes.bool,
   id: PropTypes.string,
   text: PropTypes.string.isRequired
 };

package/src/SendBox/{IconButton.js → IconButton.tsx}

@@ -1,16 +1,28 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC, MouseEventHandler, ReactNode, useRef } from 'react';
 
 import AccessibleButton from '../Utils/AccessibleButton';
+import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useStyleOptions } = hooks;
 
-const IconButton = ({ alt, children, className, disabled, onClick }) => {
-  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+type IconButtonProps = {
+  alt?: string;
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+
+const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, onClick }) => {
   const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
+  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+  const buttonRef = useRef<HTMLButtonElement>();
+
+  const [focusVisible] = useFocusVisible(buttonRef);
 
   return (
     <AccessibleButton
@@ -18,16 +30,20 @@ const IconButton = ({ alt, children, className, disabled, onClick }) => {
         sendBoxButtonStyleSet + '',
         'webchat__icon-button',
         {
+          'webchat__icon-button--focus-visible': focusVisible,
           'webchat__icon-button--stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top'
         },
         className + ''
       )}
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
+      ref={buttonRef}
       title={alt}
       type="button"
     >
+      <div className="webchat__icon-button__shade" />
       {children}
+      <div className="webchat__icon-button__keyboard-focus-indicator" />
     </AccessibleButton>
   );
 };

package/src/SendBox/{SuggestedAction.js → SuggestedAction.tsx}

@@ -1,26 +1,26 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
+import React, { MouseEventHandler, useCallback, useRef, VFC } from 'react';
 
 import AccessibleButton from '../Utils/AccessibleButton';
 import connectToWebChat from '../connectToWebChat';
 import useFocus from '../hooks/useFocus';
 import useFocusAccessKeyEffect from '../Utils/AccessKeySink/useFocusAccessKeyEffect';
+import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
 import useScrollToEnd from '../hooks/useScrollToEnd';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { DirectLineCardAction } from 'botframework-webchat-core';
 
 const { useDirection, useDisabled, usePerformCardAction, useStyleOptions, useSuggestedActions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__suggested-action': {
-    '& .webchat__suggested-action__button': {
-      display: 'flex',
-      overflow: 'hidden' // Prevent image from leaking; object-fit does not work with IE11
-    }
+    display: 'flex',
+    overflow: 'hidden' // Prevent image from leaking; object-fit does not work with IE11
   }
 };
 
@@ -37,7 +37,39 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt, text, textClassName, type, value }) => {
+type SuggestedActionProps = {
+  buttonText: string;
+  className?: string;
+  displayText?: string;
+  image?: string;
+  imageAlt?: string;
+  text?: string;
+  textClassName?: string;
+  type?:
+    | 'call'
+    | 'downloadFile'
+    | 'imBack'
+    | 'messageBack'
+    | 'openUrl'
+    | 'playAudio'
+    | 'playVideo'
+    | 'postBack'
+    | 'showImage'
+    | 'signin';
+  value?: any;
+};
+
+const SuggestedAction: VFC<SuggestedActionProps> = ({
+  buttonText,
+  className,
+  displayText,
+  image,
+  imageAlt,
+  text,
+  textClassName,
+  type,
+  value
+}) => {
   const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
@@ -48,12 +80,16 @@ const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt,
   const focusRef = useRef();
   const localizeAccessKey = useLocalizeAccessKey();
   const performCardAction = usePerformCardAction();
-  const scrollToEnd = useScrollToEnd();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const scrollToEnd = useScrollToEnd();
 
-  const handleClick = useCallback(
+  const [focusVisible] = useFocusVisible(focusRef);
+
+  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     ({ target }) => {
-      performCardAction({ displayText, text, type, value }, { target });
+      // TODO: [P3] #XXX We should not destruct DirectLineCardAction into React props and pass them in. It makes typings difficult.
+      //       Instead, we should pass a "cardAction" props.
+      performCardAction({ displayText, text, type, value } as DirectLineCardAction, { target });
 
       // Since "openUrl" action do not submit, the suggested action buttons do not hide after click.
       type === 'openUrl' && setSuggestedActions([]);
@@ -67,38 +103,37 @@ const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt,
   useFocusAccessKeyEffect(accessKey, focusRef);
 
   return (
-    <div
+    <AccessibleButton
+      {...(accessKey ? { 'aria-keyshortcuts': localizeAccessKey(accessKey) } : {})}
       className={classNames(
         'webchat__suggested-action',
-        { 'webchat__suggested-action--rtl': direction === 'rtl' },
+        {
+          'webchat__suggested-action--focus-visible': focusVisible,
+          'webchat__suggested-action--rtl': direction === 'rtl',
+          'webchat__suggested-action--wrapping': suggestedActionsStackedLayoutButtonTextWrap
+        },
         rootClassName,
         suggestedActionStyleSet + '',
         (className || '') + ''
       )}
+      disabled={disabled}
+      onClick={handleClick}
+      ref={focusRef}
+      type="button"
     >
-      <AccessibleButton
-        {...(accessKey ? { 'aria-keyshortcuts': localizeAccessKey(accessKey) } : {})}
-        className={classNames('webchat__suggested-action__button', {
-          'webchat__suggested-action--wrapping': suggestedActionsStackedLayoutButtonTextWrap
-        })}
-        disabled={disabled}
-        onClick={handleClick}
-        ref={focusRef}
-        type="button"
-      >
-        {image && (
-          <img
-            alt={imageAlt}
-            className={classNames(
-              'webchat__suggested-action__image',
-              direction === 'rtl' && 'webchat__suggested-action__image--rtl'
-            )}
-            src={image}
-          />
-        )}
-        <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
-      </AccessibleButton>
-    </div>
+      {image && (
+        <img
+          alt={imageAlt}
+          className={classNames(
+            'webchat__suggested-action__image',
+            direction === 'rtl' && 'webchat__suggested-action__image--rtl'
+          )}
+          src={image}
+        />
+      )}
+      <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
+      <div className="webchat__suggested-action__keyboard-focus-indicator" />
+    </AccessibleButton>
   );
 };
 
@@ -109,7 +144,7 @@ SuggestedAction.defaultProps = {
   imageAlt: undefined,
   text: '',
   textClassName: '',
-  type: '',
+  type: undefined,
   value: undefined
 };
 
@@ -121,6 +156,8 @@ SuggestedAction.propTypes = {
   imageAlt: PropTypes.string,
   text: PropTypes.string,
   textClassName: PropTypes.string,
+  // TypeScript class is not mappable to PropTypes.
+  // @ts-ignore
   type: PropTypes.string,
   value: PropTypes.any
 };

package/src/SendBox/SuggestedActions.tsx

@@ -5,7 +5,7 @@ import { hooks } from 'botframework-webchat-api';
 import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useRef } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
@@ -151,7 +151,7 @@ const SuggestedActionFlowContainer = ({ children, className, screenReaderText })
       {!!children && !!React.Children.count(children) && (
         <div className="webchat__suggested-actions__flow-box">
           {React.Children.map(children, child => (
-            <div className="webchat__suggested-actions__item">{child}</div>
+            <div className="webchat__suggested-actions__flow-item-box">{child}</div>
           ))}
         </div>
       )}
@@ -209,12 +209,13 @@ SuggestedActionStackedContainer.propTypes = {
 
 type SuggestedActionsProps = {
   className?: string;
-  suggestedActions?: DirectLineCardAction;
+  suggestedActions?: DirectLineCardAction[];
 };
 
 const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActions = [] }) => {
   const [{ suggestedActionLayout, suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [accessKey] = useSuggestedActionsAccessKey();
+  const hideEmptyRef = useRef(true);
   const localize = useLocalizer();
   const localizeAccessKey = useLocalizeAccessKey();
 
@@ -227,24 +228,63 @@ const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActio
       : localize('SUGGESTED_ACTIONS_ALT_NO_CONTENT')
   );
 
-  const children = suggestedActions.map(({ displayText, image, imageAltText, text, title, type, value }, index) => (
-    <SuggestedAction
-      buttonText={suggestedActionText({ displayText, title, type, value })}
-      className="webchat__suggested-actions__button"
-      displayText={displayText}
-      image={image}
-      imageAlt={imageAltText}
-      key={index}
-      text={text}
-      textClassName={
-        suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
-          ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
-          : 'webchat__suggested-actions__button-text'
-      }
-      type={type}
-      value={value}
-    />
-  ));
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, title, type, value } = cardAction as {
+      displayText?: string;
+      image?: string;
+      imageAltText?: string;
+      text?: string;
+      title?: string;
+      type:
+        | 'call'
+        | 'downloadFile'
+        | 'imBack'
+        | 'messageBack'
+        | 'openUrl'
+        | 'playAudio'
+        | 'playVideo'
+        | 'postBack'
+        | 'showImage'
+        | 'signin';
+      value?: { [key: string]: any } | string;
+    };
+
+    return (
+      <div className="webchat__suggested-actions__item-box" key={index}>
+        <SuggestedAction
+          buttonText={suggestedActionText({ displayText, title, type, value })}
+          className="webchat__suggested-actions__button"
+          displayText={displayText}
+          image={image}
+          imageAlt={imageAltText}
+          text={text}
+          textClassName={
+            suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
+              ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
+              : 'webchat__suggested-actions__button-text'
+          }
+          type={type}
+          value={value}
+        />
+      </div>
+    );
+  });
+
+  // (Related to #4021)
+  //
+  // To improve accessibility UX, if there are no suggested actions, and this container was never shown.
+  // Then, avoid rendering the alt-text "Suggested Actions Container: Is empty".
+  //
+  // This is to reduce the narration of "Is empty".
+  //
+  // After any suggested actions were shown during the lifetime of this container, then we will
+  // continue to start showing "Suggested Actions Container: Is empty" when the container is empty.
+  if (!children.length && hideEmptyRef.current) {
+    return null;
+  }
+
+  // Otherwise, if we have rendered once, we will continue to render "Is empty".
+  hideEmptyRef.current = false;
 
   if (suggestedActionLayout === 'flow') {
     return (
@@ -273,6 +313,9 @@ SuggestedActions.defaultProps = {
 
 SuggestedActions.propTypes = {
   className: PropTypes.string,
+
+  // TypeScript class is not mappable to PropTypes.func
+  // @ts-ignore
   suggestedActions: PropTypes.arrayOf(
     PropTypes.shape({
       displayText: PropTypes.string,

package/src/Styles/StyleSet/BasicTranscript.ts

@@ -26,9 +26,12 @@ export default function createBasicTranscriptStyleSet({
           borderStyle: transcriptActivityVisualKeyboardIndicatorStyle,
           borderWidth: transcriptActivityVisualKeyboardIndicatorWidth,
           boxSizing: 'border-box',
-          height: `calc(100% - ${paddingRegular}px)`,
+          height: `calc(100% - ${paddingRegular / 2}px)`,
           left: 0,
-          margin: paddingRegular / 2,
+          marginBottom: 0,
+          marginLeft: paddingRegular / 2,
+          marginRight: paddingRegular / 2,
+          marginTop: 0,
           pointerEvents: 'none',
           position: 'absolute',
           top: 0,
@@ -36,40 +39,51 @@ export default function createBasicTranscriptStyleSet({
         }
       },
 
-      '&:focus .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus + .webchat__basic-transcript__focus-indicator': {
-        height: '100%',
-        borderColor: transcriptVisualKeyboardIndicatorColor,
-        borderStyle: transcriptVisualKeyboardIndicatorStyle,
-        borderWidth: transcriptVisualKeyboardIndicatorWidth,
-        boxSizing: 'border-box',
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        width: '100%'
-      },
+      '&:focus .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus + .webchat__basic-transcript__focus-indicator':
+        {
+          height: '100%',
+          borderColor: transcriptVisualKeyboardIndicatorColor,
+          borderStyle: transcriptVisualKeyboardIndicatorStyle,
+          borderWidth: transcriptVisualKeyboardIndicatorWidth,
+          boxSizing: 'border-box',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 0,
+          width: '100%'
+        },
 
       '& .webchat__basic-transcript__activity': {
-        paddingTop: paddingRegular,
+        paddingTop: paddingRegular / 2,
         position: 'relative',
 
+        '&:first-child': {
+          marginTop: paddingRegular / 2
+        },
+
         '&:not(:first-child)': {
-          marginTop: -paddingRegular
+          marginTop: -paddingRegular / 2
         }
       },
 
-      '& .webchat__basic-transcript__activity-box:not(:empty)': {
-        paddingBottom: paddingRegular
-      },
-
-      '& .webchat__basic-transcript__activity-sentinel': {
+      // When the activity is focused as active descendant, `scrollIntoView()` will scroll this invisible <div> into view.
+      '& .webchat__basic-transcript__activity-active-descendant': {
         height: '100%',
         left: 0,
+        marginTop: -paddingRegular / 2,
+        paddingBottom: paddingRegular / 2,
+        // The bounding box is expanded to both top and bottom to scroll focus indicator into view.
+        // We should ignore clicks to make sure this expansion don't register click as focus.
+        // Otherwise, when clicking on the very bottom edge of the activity, it will focus on next activity instead.
         pointerEvents: 'none',
         position: 'absolute',
         top: 0,
         width: '100%'
       },
 
+      '& .webchat__basic-transcript__activity-body:not(:empty)': {
+        paddingBottom: paddingRegular
+      },
+
       '& .webchat__basic-transcript__terminator': {
         bottom: 0,
         height: 0,

package/src/Styles/StyleSet/Bubble.ts

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';