botframework-webchat-component 4.13.0 → 4.14.2

package/src/Dictation.js

@@ -2,8 +2,9 @@ import { Composer as DictateComposer } from 'react-dictate-button';
 import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
+import useResumeAudioContext from './hooks/internal/useResumeAudioContext';
 import useSettableDictateAbortable from './hooks/internal/useSettableDictateAbortable';
 import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
 
@@ -40,13 +41,15 @@ const Dictation = ({ onError }) => {
   const [sendTypingIndicator] = useSendTypingIndicator();
   const [speechLanguage] = useLanguage('speech');
   const emitTypingIndicator = useEmitTypingIndicator();
+  const resumeAudioContext = useResumeAudioContext();
   const setDictateState = useSetDictateState();
   const stopDictate = useStopDictate();
   const submitSendBox = useSubmitSendBox();
 
-  const numSpeakingActivities = useMemo(() => activities.filter(({ channelData: { speak } = {} }) => speak).length, [
-    activities
-  ]);
+  const numSpeakingActivities = useMemo(
+    () => activities.filter(({ channelData: { speak } = {} }) => speak).length,
+    [activities]
+  );
 
   const handleDictate = useCallback(
     ({ result: { confidence, transcript } = {} }) => {
@@ -97,6 +100,12 @@ const Dictation = ({ onError }) => {
     [dictateState, onError, setDictateState, stopDictate]
   );
 
+  useEffect(() => {
+    window.addEventListener('pointerdown', resumeAudioContext);
+
+    return () => window.removeEventListener('pointerdown', resumeAudioContext);
+  }, [resumeAudioContext]);
+
   return (
     <DictateComposer
       lang={speechLanguage}

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

@@ -2,14 +2,19 @@
 
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import ScreenReaderText from './ScreenReaderText';
 import useStyleSet from './hooks/useStyleSet';
 
 const { useLocalizer } = hooks;
 
-const ErrorBox = ({ error, type }) => {
+type ErrorBoxProps = {
+  error: Error;
+  type?: string;
+};
+
+const ErrorBox: FC<ErrorBoxProps> = ({ error, type }) => {
   const [{ errorBox: errorBoxStyleSet }] = useStyleSet();
   const localize = useLocalizer();
 

package/src/Middleware/Activity/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,10 +1,11 @@
 /* eslint-disable complexity */
+import { ActivityMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
 import CarouselLayout from '../../Activity/CarouselLayout';
 import StackedLayout from '../../Activity/StackedLayout';
 
-export default function createCoreMiddleware() {
+export default function createCoreMiddleware(): ActivityMiddleware[] {
   return [
     () => next => (...args) => {
       const [{ activity }] = args;

package/src/Middleware/ActivityStatus/SendStatus/{SendStatus.js → SendStatus.tsx}

@@ -1,7 +1,7 @@
-import { Constants } from 'botframework-webchat-core';
+import { Constants, DirectLineActivity } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React, { useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import connectToWebChat from '../../../connectToWebChat';
 import ScreenReaderText from '../../../ScreenReaderText';
@@ -32,7 +32,12 @@ const connectSendStatus = (...selectors) =>
     ...selectors
   );
 
-const SendStatus = ({ activity, sendState }) => {
+type SendStatusProps = {
+  activity: DirectLineActivity;
+  sendState: 'sending' | 'send failed' | 'sent';
+};
+
+const SendStatus: FC<SendStatusProps> = ({ activity, sendState }) => {
   const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
   const focus = useFocus();
   const localize = useLocalizer();

package/src/Middleware/ActivityStatus/{Timestamp.js → Timestamp.tsx}

@@ -1,7 +1,8 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import AbsoluteTime from './AbsoluteTime';
 import RelativeTime from './RelativeTime';
@@ -9,7 +10,12 @@ import useStyleSet from '../../hooks/useStyleSet';
 
 const { useStyleOptions } = hooks;
 
-const Timestamp = ({ activity: { timestamp }, className }) => {
+type TimestampProps = {
+  activity: DirectLineActivity;
+  className?: string;
+};
+
+const Timestamp: FC<TimestampProps> = ({ activity: { timestamp }, className }) => {
   const [{ timestampFormat }] = useStyleOptions();
   const [{ timestamp: timestampStyleSet, sendStatus: sendStatusStyleSet }] = useStyleSet();
 

package/src/Middleware/ActivityStatus/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,6 +1,8 @@
+import { ActivityStatusMiddleware } from 'botframework-webchat-api';
+
 import createSendStatusMiddleware from './createSendStatusMiddleware';
 import createTimestampMiddleware from './createTimestampMiddleware';
 
-export default function createCoreMiddleware() {
+export default function createCoreMiddleware(): ActivityStatusMiddleware[] {
   return [createSendStatusMiddleware(), createTimestampMiddleware()];
 }

package/src/Middleware/ActivityStatus/createSendStatusMiddleware.js

@@ -8,11 +8,13 @@ const {
 } = Constants;
 
 export default function createSendStatusMiddleware() {
-  return () => next => ({ activity, sendState, ...args }) => {
-    if (sendState !== SENT) {
-      return <SendStatus activity={activity} sendState={sendState} />;
-    }
+  return () =>
+    next =>
+    ({ activity, sendState, ...args }) => {
+      if (sendState !== SENT) {
+        return <SendStatus activity={activity} sendState={sendState} />;
+      }
 
-    return next({ activity, sendState, ...args });
-  };
+      return next({ activity, sendState, ...args });
+    };
 }

package/src/Middleware/ActivityStatus/createTimestampMiddleware.js

@@ -4,14 +4,16 @@ import AbsoluteTime from './AbsoluteTime';
 import Timestamp from './Timestamp';
 
 export default function createTimestampMiddleware() {
-  return () => () => (...args) => {
-    const [{ activity, hideTimestamp }] = args;
+  return () =>
+    () =>
+    (...args) => {
+      const [{ activity, hideTimestamp }] = args;
 
-    if (hideTimestamp) {
-      // If "hideTimestamp" is set, we will not render the visual timestamp. But continue to render the screen reader only version.
-      return <AbsoluteTime hide={true} value={activity.timestamp} />;
-    }
+      if (hideTimestamp) {
+        // If "hideTimestamp" is set, we will not render the visual timestamp. But continue to render the screen reader only version.
+        return <AbsoluteTime hide={true} value={activity.timestamp} />;
+      }
 
-    return <Timestamp activity={activity} />;
-  };
+      return <Timestamp activity={activity} />;
+    };
 }

package/src/Middleware/Attachment/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,3 +1,4 @@
+import { AttachmentMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
 import AudioAttachment from '../../Attachment/AudioAttachment';
@@ -7,7 +8,7 @@ import TextAttachment from '../../Attachment/TextAttachment';
 import VideoAttachment from '../../Attachment/VideoAttachment';
 
 // TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
-export default function createCoreMiddleware() {
+export default function createCoreMiddleware(): AttachmentMiddleware[] {
   return [
     // This is not returning a React component, but a render function.
     /* eslint-disable-next-line react/display-name */
@@ -15,9 +16,9 @@ export default function createCoreMiddleware() {
       const [
         {
           activity = {},
-          activity: { from: { role } = {} } = {},
+          activity: { from: { role = undefined } = {} } = {},
           attachment,
-          attachment: { contentType, contentUrl, thumbnailUrl } = {}
+          attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
         }
       ] = args;
 
@@ -26,15 +27,15 @@ export default function createCoreMiddleware() {
       return (isText ? !attachment.content : role === 'user' && !thumbnailUrl) ? (
         <FileAttachment activity={activity} attachment={attachment} />
       ) : /^audio\//u.test(contentType) ? (
-        <AudioAttachment activity={activity} attachment={attachment} />
+        <AudioAttachment attachment={attachment} />
       ) : /^image\//u.test(contentType) ? (
-        <ImageAttachment activity={activity} attachment={attachment} />
+        <ImageAttachment attachment={attachment} />
       ) : /^video\//u.test(contentType) ? (
-        <VideoAttachment activity={activity} attachment={attachment} />
+        <VideoAttachment attachment={attachment} />
       ) : contentUrl || contentType === 'application/octet-stream' ? (
         <FileAttachment activity={activity} attachment={attachment} />
       ) : isText ? (
-        <TextAttachment activity={activity} attachment={attachment} />
+        <TextAttachment attachment={attachment} />
       ) : (
         next(...args)
       );

package/src/Middleware/AttachmentForScreenReader/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,3 +1,4 @@
+import { AttachmentForScreenReaderMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
 import AudioAttachment from './AudioAttachment';
@@ -6,14 +7,14 @@ import ImageAttachment from './ImageAttachment';
 import TextAttachment from './TextAttachment';
 import VideoAttachment from './VideoAttachment';
 
-export default function createCoreMiddleware() {
+export default function createCoreMiddleware(): AttachmentForScreenReaderMiddleware[] {
   return [
     () => next => (...args) => {
       const [
         {
-          activity: { from: { role } = {} } = {},
+          activity: { from: { role = undefined } = {} } = {},
           attachment,
-          attachment: { contentType, contentUrl, thumbnailUrl } = {}
+          attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
         }
       ] = args;
 

package/src/Middleware/Avatar/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,6 +1,7 @@
+import { AvatarMiddleware } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import ImageAvatar from '../../Avatar/ImageAvatar';
 import InitialsAvatar from '../../Avatar/InitialsAvatar';
@@ -18,7 +19,13 @@ const ROOT_STYLE = {
   }
 };
 
-const DefaultAvatar = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
+type DefaultAvatarProps = {
+  'aria-hidden'?: boolean;
+  className?: string;
+  fromUser: boolean;
+};
+
+const DefaultAvatar: FC<DefaultAvatarProps> = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
   const [{ avatar: avatarStyleSet }] = useStyleSet();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
@@ -50,7 +57,7 @@ DefaultAvatar.propTypes = {
   fromUser: PropTypes.bool.isRequired
 };
 
-export default function createCoreAvatarMiddleware() {
+export default function createCoreAvatarMiddleware(): AvatarMiddleware[] {
   return [
     () => () => ({ fromUser, styleOptions }) => {
       const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions;

package/src/Middleware/CardAction/createCoreMiddleware.js

@@ -2,7 +2,7 @@ import { ie11 } from '../../Utils/detectBrowser';
 
 // This code is adopted from sanitize-html/naughtyScheme.
 // sanitize-html is a dependency of Web Chat but the naughtScheme function is neither exposed nor reusable.
-// https://github.com/apostrophecms/sanitize-html/blob/master/src/index.js#L526
+// https://github.com/apostrophecms/sanitize-html/
 function getScheme(href) {
   // Browsers ignore character codes of 32 (space) and below in a surprising
   // number of situations. Start reading here:
@@ -31,55 +31,57 @@ const ALLOWED_SCHEMES = ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel']
 
 export default function createDefaultCardActionMiddleware() {
   return [
-    () => next => (...args) => {
-      const [
-        {
-          cardAction: { type, value },
-          getSignInUrl
-        }
-      ] = args;
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            cardAction: { type, value },
+            getSignInUrl
+          }
+        ] = args;
 
-      switch (type) {
-        case 'call':
-        case 'downloadFile':
-        case 'openUrl':
-        case 'playAudio':
-        case 'playVideo':
-        case 'showImage':
-          if (ALLOWED_SCHEMES.includes(getScheme(value))) {
-            if (ie11) {
-              const newWindow = window.open();
-              newWindow.opener = null;
-              newWindow.location = value;
+        switch (type) {
+          case 'call':
+          case 'downloadFile':
+          case 'openUrl':
+          case 'playAudio':
+          case 'playVideo':
+          case 'showImage':
+            if (ALLOWED_SCHEMES.includes(getScheme(value))) {
+              if (ie11) {
+                const newWindow = window.open();
+                newWindow.opener = null;
+                newWindow.location = value;
+              } else {
+                window.open(value, '_blank', 'noopener noreferrer');
+              }
             } else {
-              window.open(value, '_blank', 'noopener noreferrer');
+              console.warn('botframework-webchat: Cannot open URL with disallowed schemes.', value);
             }
-          } else {
-            console.warn('botframework-webchat: Cannot open URL with disallowed schemes.', value);
-          }
 
-          break;
+            break;
 
-        case 'signin': {
-          /**
-           * @todo TODO: [P3] We should prime the URL into the OAuthCard directly, instead of calling getSessionId on-demand
-           *       This is to eliminate the delay between window.open() and location.href call
-           */
+          case 'signin': {
+            /**
+             * @todo TODO: [P3] We should prime the URL into the OAuthCard directly, instead of calling getSessionId on-demand
+             *       This is to eliminate the delay between window.open() and location.href call
+             */
 
-          // eslint-disable-next-line wrap-iife
-          (async function () {
-            const popup = window.open();
-            const url = await getSignInUrl();
+            // eslint-disable-next-line wrap-iife
+            (async function () {
+              const popup = window.open();
+              const url = await getSignInUrl();
 
-            popup.location.href = url;
-          })();
+              popup.location.href = url;
+            })();
 
-          break;
-        }
+            break;
+          }
 
-        default:
-          return next(...args);
+          default:
+            return next(...args);
+        }
       }
-    }
   ];
 }

package/src/Middleware/GroupActivities/createCoreMiddleware.js

@@ -48,8 +48,10 @@ function shouldGroupTimestamp(activityX, activityY, groupTimestamp) {
 }
 
 export default function createDefaultGroupActivityMiddleware({ groupTimestamp }) {
-  return () => () => ({ activities }) => ({
-    sender: bin(activities, (x, y) => x.from.role === y.from.role),
-    status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
-  });
+  return () =>
+    () =>
+    ({ activities }) => ({
+      sender: bin(activities, (x, y) => x.from.role === y.from.role),
+      status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
+    });
 }

package/src/Middleware/ScrollToEndButton/ScrollToEndButton.js

@@ -0,0 +1,45 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import useStyleSet from '../../hooks/useStyleSet';
+
+const { useDirection, useLocalizer, useStyleOptions } = hooks;
+
+const ScrollToEndButton = ({ onClick }) => {
+  const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet();
+  const [{ scrollToEndButtonBehavior }] = useStyleOptions();
+  const [direction] = useDirection();
+  const localize = useLocalizer();
+
+  const text = localize(scrollToEndButtonBehavior === 'any' ? 'TRANSCRIPT_MORE_MESSAGES' : 'TRANSCRIPT_NEW_MESSAGES');
+
+  return (
+    <button
+      aria-label={text}
+      className={classNames(
+        'webchat__scroll-to-end-button',
+        scrollToEndButtonStyleSet + '',
+        direction === 'rtl' ? 'webchat__scroll-to-end-button--rtl' : ''
+      )}
+      onClick={onClick}
+      tabIndex={0}
+      type="button"
+    >
+      {text}
+    </button>
+  );
+};
+
+ScrollToEndButton.defaultProps = {
+  onClick: undefined
+};
+
+ScrollToEndButton.displayName = 'ScrollToEndButton';
+
+ScrollToEndButton.propTypes = {
+  onClick: PropTypes.func
+};
+
+export default ScrollToEndButton;

package/src/Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware.ts

@@ -0,0 +1,17 @@
+import { ScrollToEndButtonMiddleware } from 'botframework-webchat-api';
+
+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
+  ];
+}

package/src/Middleware/Toast/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,6 +1,8 @@
+import { ToastMiddleware } from 'botframework-webchat-api';
+
 import createToastMiddleware from '../../Toast/createToastMiddleware';
 
-function createCoreMiddleware() {
+function createCoreMiddleware(): ToastMiddleware[] {
   return [
     () => next => (...args) => {
       const [

package/src/Middleware/TypingIndicator/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,6 +1,4 @@
-/* eslint react/prop-types: "off"*/
-
-import { hooks } from 'botframework-webchat-api';
+import { hooks, TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -22,6 +20,7 @@ const DotIndicator = () => {
 };
 
 // TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
-export default function createCoreMiddleware() {
+export default function createCoreMiddleware(): TypingIndicatorMiddleware[] {
+  /* eslint-disable-next-line react/prop-types */
   return [() => () => ({ visible }) => visible && <DotIndicator />];
 }

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

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import BasicWebChat from './BasicWebChat';
-import Composer from './Composer';
+import Composer, { ComposerProps } from './Composer';
 
 // Please keep this file as simple as possible. This is for setting up the surface (a.k.a. <Composer>) and <BasicWebChat> only.
 
@@ -12,22 +12,40 @@ import Composer from './Composer';
 // - They can run hooks outside of activity/attachment middleware
 //   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot
 
-const ReactWebChat = ({ className, role, ...composerProps }) => (
+// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
+const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
+
+type ReactWebChatProps = Omit<ComposerProps, 'children'> & {
+  className?: string;
+  role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
+};
+
+const ReactWebChat: VFC<ReactWebChatProps> = ({ className, role, ...composerProps }) => (
   <Composer {...composerProps}>
     <BasicWebChat className={className} role={role} />
   </Composer>
 );
 
-export default ReactWebChat;
-
 ReactWebChat.defaultProps = {
   className: undefined,
   role: undefined,
   ...Composer.defaultProps
 };
 
+const {
+  // Excluding "children" from ComposerProps.
+  children: _,
+  ...composerPropTypesWithoutChildren
+} = Composer.propTypes;
+
 ReactWebChat.propTypes = {
   className: PropTypes.string,
-  role: PropTypes.string,
-  ...Composer.propTypes
+  // Ignoring deficiencies with TypeScript/PropTypes inference.
+  // @ts-ignore
+  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES),
+  ...composerPropTypesWithoutChildren
 };
+
+export default ReactWebChat;
+
+export type { ReactWebChatProps };