botframework-webchat-component 4.13.0 → 4.15.0

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

@@ -1,20 +1,21 @@
 import { hooks } from 'botframework-webchat-api';
+import React, { Fragment, VFC } from 'react';
 
 const { useActiveTyping, useRenderTypingIndicator } = hooks;
 
-function useTypingIndicatorVisible() {
+function useTypingIndicatorVisible(): [boolean] {
   const [activeTyping] = useActiveTyping();
 
   return [!!Object.values(activeTyping).filter(({ role }) => role !== 'user').length];
 }
 
-const BasicTypingIndicator = () => {
+const BasicTypingIndicator: VFC<{}> = () => {
   const [activeTyping] = useActiveTyping();
   const [visible] = useTypingIndicatorVisible();
   const [typing] = useActiveTyping(Infinity);
   const renderTypingIndicator = useRenderTypingIndicator();
 
-  return renderTypingIndicator({ activeTyping, typing, visible });
+  return <Fragment>{renderTypingIndicator({ activeTyping, typing, visible })}</Fragment>;
 };
 
 export default BasicTypingIndicator;

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

@@ -4,7 +4,7 @@
 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 AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
 import BasicConnectivityStatus from './BasicConnectivityStatus';
@@ -40,7 +40,12 @@ const TRANSCRIPT_STYLE = {
 // Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
 const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
 
-const BasicWebChat = ({ className, role }) => {
+type BasicWebChatProps = {
+  className?: string;
+  role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
+};
+
+const BasicWebChat: FC<BasicWebChatProps> = ({ className, role }) => {
   const [{ root: rootStyleSet }] = useStyleSet();
   const [options] = useStyleOptions();
   const styleToEmotionObject = useStyleToEmotionObject();
@@ -66,8 +71,6 @@ const BasicWebChat = ({ className, role }) => {
   );
 };
 
-export default BasicWebChat;
-
 BasicWebChat.defaultProps = {
   className: '',
   role: 'complementary'
@@ -75,5 +78,11 @@ BasicWebChat.defaultProps = {
 
 BasicWebChat.propTypes = {
   className: PropTypes.string,
+  // Ignoring deficiencies with TypeScript/PropTypes inference.
+  // @ts-ignore
   role: PropTypes.oneOf(ARIA_LANDMARK_ROLES)
 };
+
+export default BasicWebChat;
+
+export type { BasicWebChatProps };

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

@@ -1,15 +1,22 @@
-import { Composer as APIComposer, hooks } from 'botframework-webchat-api';
+import {
+  Composer as APIComposer,
+  ComposerProps as APIComposerProps,
+  hooks,
+  WebSpeechPonyfillFactory
+} from 'botframework-webchat-api';
 import { Composer as SayComposer } from 'react-say';
-import createEmotion from 'create-emotion';
+import { singleToArray } from 'botframework-webchat-core';
+import createEmotion from '@emotion/css/create-instance';
 import createStyleSet from './Styles/createStyleSet';
 import MarkdownIt from 'markdown-it';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { FC, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 
 import {
   speechSynthesis as bypassSpeechSynthesis,
   SpeechSynthesisUtterance as BypassSpeechSynthesisUtterance
 } from './hooks/internal/BypassSpeechSynthesisPonyfill';
+import ActivityTreeComposer from './providers/ActivityTree/ActivityTreeComposer';
 import addTargetBlankToHyperlinksMarkdown from './Utils/addTargetBlankToHyperlinksMarkdown';
 import createCSSKey from './Utils/createCSSKey';
 import createDefaultActivityMiddleware from './Middleware/Activity/createCoreMiddleware';
@@ -18,19 +25,18 @@ import createDefaultAttachmentForScreenReaderMiddleware from './Middleware/Attac
 import createDefaultAttachmentMiddleware from './Middleware/Attachment/createCoreMiddleware';
 import createDefaultAvatarMiddleware from './Middleware/Avatar/createCoreMiddleware';
 import createDefaultCardActionMiddleware from './Middleware/CardAction/createCoreMiddleware';
+import createDefaultScrollToEndButtonMiddleware from './Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware';
 import createDefaultToastMiddleware from './Middleware/Toast/createCoreMiddleware';
 import createDefaultTypingIndicatorMiddleware from './Middleware/TypingIndicator/createCoreMiddleware';
 import Dictation from './Dictation';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import ErrorBox from './ErrorBox';
 import mapMap from './Utils/mapMap';
-import singleToArray from './Utils/singleToArray';
 import UITracker from './hooks/internal/UITracker';
 import WebChatUIContext from './hooks/internal/WebChatUIContext';
 
-const { useReferenceGrammarID, useStyleOptions } = hooks;
+const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions } = hooks;
 
-// eslint-disable-next-line no-undef
 const node_env = process.env.node_env || process.env.NODE_ENV;
 
 const emotionPool = {};
@@ -39,7 +45,17 @@ function styleSetToEmotionObjects(styleToEmotionObject, styleSet) {
   return mapMap(styleSet, (style, key) => (key === 'options' ? style : styleToEmotionObject(style)));
 }
 
-const ComposerCore = ({
+type ComposerCoreProps = {
+  children?: ReactNode;
+  extraStyleSet?: any;
+  nonce?: string;
+  renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
+  styleSet?: any;
+  suggestedActionsAccessKey?: boolean | string;
+  webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
+};
+
+const ComposerCore: FC<ComposerCoreProps> = ({
   children,
   extraStyleSet,
   nonce,
@@ -82,7 +98,9 @@ const ComposerCore = ({
     // 1. If 2 instances use different nonce, they should result in different hash;
     // 2. If 2 instances are being mounted, pooling will make sure we render only 1 set of <style> tags, instead of 2.
     const emotion =
-      emotionPool[nonce] || (emotionPool[nonce] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }));
+      // Prefix "id-" to prevent object injection attack.
+      emotionPool[`id-${nonce}`] ||
+      (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }));
 
     return style => emotion.css(style);
   }, [nonce]);
@@ -108,7 +126,6 @@ const ComposerCore = ({
   }, [referenceGrammarID, webSpeechPonyfillFactory]);
 
   const scrollPositionObserversRef = useRef([]);
-  const [numScrollPositionObservers, setNumScrollPositionObservers] = useState(0);
 
   const dispatchScrollPosition = useCallback(
     event => scrollPositionObserversRef.current.forEach(observer => observer(event)),
@@ -118,23 +135,32 @@ const ComposerCore = ({
   const observeScrollPosition = useCallback(
     observer => {
       scrollPositionObserversRef.current = [...scrollPositionObserversRef.current, observer];
-      setNumScrollPositionObservers(scrollPositionObserversRef.current.length);
 
       return () => {
         scrollPositionObserversRef.current = scrollPositionObserversRef.current.filter(target => target !== observer);
-        setNumScrollPositionObservers(scrollPositionObserversRef.current.length);
       };
     },
-    [scrollPositionObserversRef, setNumScrollPositionObservers]
+    [scrollPositionObserversRef]
   );
 
   const transcriptFocusObserversRef = useRef([]);
   const [numTranscriptFocusObservers, setNumTranscriptFocusObservers] = useState(0);
 
-  const dispatchTranscriptFocus = useCallback(
-    event => transcriptFocusObserversRef.current.forEach(observer => observer(event)),
-    [transcriptFocusObserversRef]
-  );
+  const getActivityByKey = useGetActivityByKey();
+
+  const dispatchTranscriptFocusByActivityKey = useMemo(() => {
+    let prevActivityKey: string | Symbol | undefined = Symbol();
+
+    return activityKey => {
+      if (activityKey !== prevActivityKey) {
+        prevActivityKey = activityKey;
+
+        const event = { activity: getActivityByKey(activityKey) };
+
+        transcriptFocusObserversRef.current.forEach(observer => observer(event));
+      }
+    };
+  }, [getActivityByKey, transcriptFocusObserversRef]);
 
   const observeTranscriptFocus = useCallback(
     observer => {
@@ -153,13 +179,12 @@ const ComposerCore = ({
     () => ({
       dictateAbortable,
       dispatchScrollPosition,
-      dispatchTranscriptFocus,
+      dispatchTranscriptFocusByActivityKey,
       focusSendBoxCallbacksRef,
       focusTranscriptCallbacksRef,
       internalMarkdownItState: [internalMarkdownIt],
       internalRenderMarkdownInline,
       nonce,
-      numScrollPositionObservers,
       numTranscriptFocusObservers,
       observeScrollPosition,
       observeTranscriptFocus,
@@ -176,13 +201,12 @@ const ComposerCore = ({
     [
       dictateAbortable,
       dispatchScrollPosition,
-      dispatchTranscriptFocus,
+      dispatchTranscriptFocusByActivityKey,
       focusSendBoxCallbacksRef,
       focusTranscriptCallbacksRef,
       internalMarkdownIt,
       internalRenderMarkdownInline,
       nonce,
-      numScrollPositionObservers,
       numTranscriptFocusObservers,
       observeScrollPosition,
       observeTranscriptFocus,
@@ -209,6 +233,7 @@ const ComposerCore = ({
 };
 
 ComposerCore.defaultProps = {
+  children: undefined,
   extraStyleSet: undefined,
   nonce: undefined,
   renderMarkdown: undefined,
@@ -226,7 +251,13 @@ ComposerCore.propTypes = {
   webSpeechPonyfillFactory: PropTypes.func
 };
 
-const Composer = ({
+type ComposerProps = APIComposerProps &
+  ComposerCoreProps & {
+    nonce?: string;
+    webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
+  };
+
+const Composer: FC<ComposerProps> = ({
   activityMiddleware,
   activityStatusMiddleware,
   attachmentForScreenReaderMiddleware,
@@ -236,6 +267,7 @@ const Composer = ({
   children,
   extraStyleSet,
   renderMarkdown,
+  scrollToEndButtonMiddleware,
   styleSet,
   suggestedActionsAccessKey,
   toastMiddleware,
@@ -278,15 +310,23 @@ const Composer = ({
     [cardActionMiddleware]
   );
 
-  const patchedToastMiddleware = useMemo(() => [...singleToArray(toastMiddleware), ...createDefaultToastMiddleware()], [
-    toastMiddleware
-  ]);
+  const patchedToastMiddleware = useMemo(
+    () => [...singleToArray(toastMiddleware), ...createDefaultToastMiddleware()],
+    [toastMiddleware]
+  );
 
   const patchedTypingIndicatorMiddleware = useMemo(
     () => [...singleToArray(typingIndicatorMiddleware), ...createDefaultTypingIndicatorMiddleware()],
     [typingIndicatorMiddleware]
   );
 
+  const defaultScrollToEndButtonMiddleware = useMemo(() => createDefaultScrollToEndButtonMiddleware(), []);
+
+  const patchedScrollToEndButtonMiddleware = useMemo(
+    () => [...singleToArray(scrollToEndButtonMiddleware), ...defaultScrollToEndButtonMiddleware],
+    [defaultScrollToEndButtonMiddleware, scrollToEndButtonMiddleware]
+  );
+
   return (
     <React.Fragment>
       <APIComposer
@@ -300,21 +340,24 @@ const Composer = ({
         // Under dev server of create-react-app, "NODE_ENV" will be set to "development".
         internalErrorBoxClass={node_env === 'development' ? ErrorBox : undefined}
         nonce={nonce}
+        scrollToEndButtonMiddleware={patchedScrollToEndButtonMiddleware}
         toastMiddleware={patchedToastMiddleware}
         typingIndicatorMiddleware={patchedTypingIndicatorMiddleware}
         {...composerProps}
       >
-        <ComposerCore
-          extraStyleSet={extraStyleSet}
-          nonce={nonce}
-          renderMarkdown={renderMarkdown}
-          styleSet={styleSet}
-          suggestedActionsAccessKey={suggestedActionsAccessKey}
-          webSpeechPonyfillFactory={webSpeechPonyfillFactory}
-        >
-          {children}
-          {onTelemetry && <UITracker />}
-        </ComposerCore>
+        <ActivityTreeComposer>
+          <ComposerCore
+            extraStyleSet={extraStyleSet}
+            nonce={nonce}
+            renderMarkdown={renderMarkdown}
+            styleSet={styleSet}
+            suggestedActionsAccessKey={suggestedActionsAccessKey}
+            webSpeechPonyfillFactory={webSpeechPonyfillFactory}
+          >
+            {children}
+            {onTelemetry && <UITracker />}
+          </ComposerCore>
+        </ActivityTreeComposer>
       </APIComposer>
     </React.Fragment>
   );
@@ -323,47 +366,15 @@ const Composer = ({
 Composer.defaultProps = {
   ...APIComposer.defaultProps,
   ...ComposerCore.defaultProps,
-  activityMiddleware: undefined,
-  activityRenderer: undefined,
-  activityStatusMiddleware: undefined,
-  activityStatusRenderer: undefined,
-  attachmentForScreenReaderMiddleware: undefined,
-  attachmentMiddleware: undefined,
-  attachmentRenderer: undefined,
-  avatarMiddleware: undefined,
-  avatarRenderer: undefined,
-  cardActionMiddleware: undefined,
-  children: undefined,
-  nonce: undefined,
-  renderMarkdown: undefined,
-  toastMiddleware: undefined,
-  toastRenderer: undefined,
-  typingIndicatorMiddleware: undefined,
-  typingIndicatorRenderer: undefined,
-  webSpeechPonyfillFactory: undefined
+  children: undefined
 };
 
 Composer.propTypes = {
   ...APIComposer.propTypes,
   ...ComposerCore.propTypes,
-  activityMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  activityRenderer: PropTypes.func,
-  activityStatusMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  activityStatusRenderer: PropTypes.func,
-  attachmentForScreenReaderMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  attachmentMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  attachmentRenderer: PropTypes.func,
-  avatarMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  avatarRenderer: PropTypes.func,
-  cardActionMiddleware: PropTypes.func,
-  children: PropTypes.any,
-  nonce: PropTypes.string,
-  renderMarkdown: PropTypes.func,
-  toastMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  toastRenderer: PropTypes.func,
-  typingIndicatorMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  typingIndicatorRenderer: PropTypes.func,
-  webSpeechPonyfillFactory: PropTypes.func
+  children: PropTypes.any
 };
 
 export default Composer;
+
+export type { ComposerProps };

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.tsx

@@ -0,0 +1,78 @@
+/* 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(): ActivityMiddleware[] {
+  return [
+    () =>
+      next =>
+      (...args) => {
+        const [{ activity }] = args;
+
+        // TODO: [P4] Can we simplify these if-statement to something more readable?
+
+        const { type } = activity;
+
+        // Filter out activities that should not be visible
+        if (type === 'conversationUpdate' || type === 'event' || type === 'invoke' || type === 'typing') {
+          return false;
+        } else if (type === 'message') {
+          const { attachments = [], channelData, text } = activity;
+
+          if (
+            // Do not show postback
+            (channelData && channelData.postBack) ||
+            // Do not show messageBack if displayText is undefined
+            (channelData && channelData.messageBack && !channelData.messageBack.displayText) ||
+            // Do not show empty bubbles (no text and attachments, and not "typing")
+            !(text || attachments.length)
+          ) {
+            return false;
+          }
+          // eslint-disable-next-line no-dupe-else-if
+        } else if (type === 'typing' && activity.from.role === 'user') {
+          // Do not show typing by oneself
+          return false;
+        }
+
+        if (type === 'message' || type === 'typing') {
+          if (
+            type === 'message' &&
+            (activity.attachments || []).length > 1 &&
+            activity.attachmentLayout === 'carousel'
+          ) {
+            // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
+            // The function signature need to be compatible with older version of activity middleware, which was:
+            //
+            // renderActivity(
+            //   renderAttachment: ({ activity, attachment }) => React.Element
+            // ) => React.Element
+
+            return function renderCarouselLayout(renderAttachment, props) {
+              typeof props === 'undefined' &&
+                console.warn(
+                  'botframework-webchat: One or more arguments were missing after passing through the activity middleware. Please check your custom activity middleware to make sure it passes all arguments.'
+                );
+
+              return <CarouselLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
+            };
+          }
+
+          // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
+          return function renderStackedLayout(renderAttachment, props) {
+            typeof props === 'undefined' &&
+              console.warn(
+                'botframework-webchat: One or more arguments were missing after passing through the activity middleware. Please check your custom activity middleware to make sure it passes all arguments.'
+              );
+
+            return <StackedLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
+          };
+        }
+
+        return next(...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,15 @@ const {
 } = Constants;
 
 export default function createSendStatusMiddleware() {
-  return () => next => ({ activity, sendState, ...args }) => {
-    if (sendState !== SENT) {
-      return <SendStatus activity={activity} sendState={sendState} />;
-    }
+  return () =>
+    next =>
+    // This is not a React component.
+    // eslint-disable-next-line react/prop-types
+    ({ 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.tsx

@@ -0,0 +1,44 @@
+import { AttachmentMiddleware } from 'botframework-webchat-api';
+import React from 'react';
+
+import AudioAttachment from '../../Attachment/AudioAttachment';
+import FileAttachment from '../../Attachment/FileAttachment';
+import ImageAttachment from '../../Attachment/ImageAttachment';
+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(): AttachmentMiddleware[] {
+  return [
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            activity = {},
+            activity: { from: { role = undefined } = {} } = {},
+            attachment,
+            attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
+          }
+        ] = args;
+
+        const isText = /^text\//u.test(contentType);
+
+        return (isText ? !attachment.content : role === 'user' && !thumbnailUrl) ? (
+          <FileAttachment activity={activity} attachment={attachment} />
+        ) : /^audio\//u.test(contentType) ? (
+          <AudioAttachment attachment={attachment} />
+        ) : /^image\//u.test(contentType) ? (
+          <ImageAttachment attachment={attachment} />
+        ) : /^video\//u.test(contentType) ? (
+          <VideoAttachment attachment={attachment} />
+        ) : contentUrl || contentType === 'application/octet-stream' ? (
+          <FileAttachment activity={activity} attachment={attachment} />
+        ) : isText ? (
+          <TextAttachment attachment={attachment} />
+        ) : (
+          next(...args)
+        );
+      }
+  ];
+}