botframework-webchat-component 4.14.1 → 4.15.2-main.20220413.af6e8a3

package/src/BasicTypingIndicator.tsx

@@ -1,4 +1,5 @@
 import { hooks } from 'botframework-webchat-api';
+import React, { Fragment, VFC } from 'react';
 
 const { useActiveTyping, useRenderTypingIndicator } = hooks;
 
@@ -8,13 +9,13 @@ function useTypingIndicatorVisible(): [boolean] {
   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/Composer.tsx

@@ -16,6 +16,7 @@ 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';
@@ -34,9 +35,8 @@ import mapMap from './Utils/mapMap';
 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 = {};
@@ -98,7 +98,9 @@ const ComposerCore: FC<ComposerCoreProps> = ({
     // 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]);
@@ -124,7 +126,6 @@ const ComposerCore: FC<ComposerCoreProps> = ({
   }, [referenceGrammarID, webSpeechPonyfillFactory]);
 
   const scrollPositionObserversRef = useRef([]);
-  const [numScrollPositionObservers, setNumScrollPositionObservers] = useState(0);
 
   const dispatchScrollPosition = useCallback(
     event => scrollPositionObserversRef.current.forEach(observer => observer(event)),
@@ -134,23 +135,32 @@ const ComposerCore: FC<ComposerCoreProps> = ({
   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 => {
@@ -169,13 +179,12 @@ const ComposerCore: FC<ComposerCoreProps> = ({
     () => ({
       dictateAbortable,
       dispatchScrollPosition,
-      dispatchTranscriptFocus,
+      dispatchTranscriptFocusByActivityKey,
       focusSendBoxCallbacksRef,
       focusTranscriptCallbacksRef,
       internalMarkdownItState: [internalMarkdownIt],
       internalRenderMarkdownInline,
       nonce,
-      numScrollPositionObservers,
       numTranscriptFocusObservers,
       observeScrollPosition,
       observeTranscriptFocus,
@@ -192,13 +201,12 @@ const ComposerCore: FC<ComposerCoreProps> = ({
     [
       dictateAbortable,
       dispatchScrollPosition,
-      dispatchTranscriptFocus,
+      dispatchTranscriptFocusByActivityKey,
       focusSendBoxCallbacksRef,
       focusTranscriptCallbacksRef,
       internalMarkdownIt,
       internalRenderMarkdownInline,
       nonce,
-      numScrollPositionObservers,
       numTranscriptFocusObservers,
       observeScrollPosition,
       observeTranscriptFocus,
@@ -225,6 +233,7 @@ const ComposerCore: FC<ComposerCoreProps> = ({
 };
 
 ComposerCore.defaultProps = {
+  children: undefined,
   extraStyleSet: undefined,
   nonce: undefined,
   renderMarkdown: undefined,
@@ -301,9 +310,10 @@ const Composer: FC<ComposerProps> = ({
     [cardActionMiddleware]
   );
 
-  const patchedToastMiddleware = useMemo(() => [...singleToArray(toastMiddleware), ...createDefaultToastMiddleware()], [
-    toastMiddleware
-  ]);
+  const patchedToastMiddleware = useMemo(
+    () => [...singleToArray(toastMiddleware), ...createDefaultToastMiddleware()],
+    [toastMiddleware]
+  );
 
   const patchedTypingIndicatorMiddleware = useMemo(
     () => [...singleToArray(typingIndicatorMiddleware), ...createDefaultTypingIndicatorMiddleware()],
@@ -335,17 +345,19 @@ const Composer: FC<ComposerProps> = ({
         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>
   );

package/src/Middleware/Activity/createCoreMiddleware.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 import { ActivityMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
@@ -7,66 +6,68 @@ import StackedLayout from '../../Activity/StackedLayout';
 
 export default function createCoreMiddleware(): ActivityMiddleware[] {
   return [
-    () => next => (...args) => {
-      const [{ activity }] = args;
+    () =>
+      next =>
+      (...args) => {
+        const [{ activity }] = args;
 
-      // TODO: [P4] Can we simplify these if-statement to something more readable?
+        // TODO: [P4] Can we simplify these if-statement to something more readable?
 
-      const { type } = activity;
+        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)
-        ) {
+        // 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?.postBack ||
+            // Do not show messageBack if displayText is undefined
+            (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
+        if (type === 'message' || type === 'typing') {
+          if (
+            type === 'message' &&
+            (activity.attachments?.length || 0) > 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 function renderCarouselLayout(renderAttachment, props) {
+              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 <CarouselLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
+            return <StackedLayout 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);
       }
-
-      return next(...args);
-    }
   ];
 }

package/src/Middleware/ActivityStatus/SendStatus/SendStatus.tsx

@@ -1,7 +1,8 @@
-import { Constants, DirectLineActivity } from 'botframework-webchat-core';
+import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
 import React, { FC, useCallback } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import connectToWebChat from '../../../connectToWebChat';
 import ScreenReaderText from '../../../ScreenReaderText';
@@ -33,7 +34,7 @@ const connectSendStatus = (...selectors) =>
   );
 
 type SendStatusProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   sendState: 'sending' | 'send failed' | 'sent';
 };
 
@@ -72,9 +73,10 @@ const SendStatus: FC<SendStatusProps> = ({ activity, sendState }) => {
 };
 
 SendStatus.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
   activity: PropTypes.shape({
     channelData: PropTypes.shape({
-      clientTimestamp: PropTypes.string,
       state: PropTypes.string
     })
   }).isRequired,

package/src/Middleware/ActivityStatus/Timestamp.tsx

@@ -1,8 +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, { FC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import AbsoluteTime from './AbsoluteTime';
 import RelativeTime from './RelativeTime';
@@ -11,7 +11,7 @@ import useStyleSet from '../../hooks/useStyleSet';
 const { useStyleOptions } = hooks;
 
 type TimestampProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   className?: string;
 };
 
@@ -40,8 +40,10 @@ Timestamp.defaultProps = {
 };
 
 Timestamp.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
   activity: PropTypes.shape({
-    timestamp: PropTypes.string.isRequired
+    timestamp: PropTypes.string
   }).isRequired,
   className: PropTypes.string
 };

package/src/Middleware/ActivityStatus/createSendStatusMiddleware.js

@@ -10,6 +10,8 @@ const {
 export default function createSendStatusMiddleware() {
   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} />;

package/src/Middleware/Attachment/createCoreMiddleware.tsx

@@ -10,35 +10,35 @@ 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 [
-    // This is not returning a React component, but a render function.
-    /* eslint-disable-next-line react/display-name */
-    () => next => (...args) => {
-      const [
-        {
-          activity = {},
-          activity: { from: { role = undefined } = {} } = {},
-          attachment,
-          attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
-        }
-      ] = args;
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            activity = {},
+            activity: { from: { role = undefined } = {} } = {},
+            attachment,
+            attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
+          }
+        ] = args;
 
-      const isText = /^text\//u.test(contentType);
+        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)
-      );
-    }
+        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)
+        );
+      }
   ];
 }

package/src/Middleware/AttachmentForScreenReader/createCoreMiddleware.tsx

@@ -9,30 +9,32 @@ import VideoAttachment from './VideoAttachment';
 
 export default function createCoreMiddleware(): AttachmentForScreenReaderMiddleware[] {
   return [
-    () => next => (...args) => {
-      const [
-        {
-          activity: { from: { role = undefined } = {} } = {},
-          attachment,
-          attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
-        }
-      ] = args;
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            activity: { from: { role = undefined } = {} } = {},
+            attachment,
+            attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
+          }
+        ] = args;
 
-      const isText = /^text\//u.test(contentType);
+        const isText = /^text\//u.test(contentType);
 
-      return (isText ? !attachment.content : role === 'user' && !thumbnailUrl)
-        ? () => <FileAttachment attachment={attachment} />
-        : /^audio\//u.test(contentType)
-        ? () => <AudioAttachment />
-        : /^image\//u.test(contentType)
-        ? () => <ImageAttachment />
-        : /^video\//u.test(contentType)
-        ? () => <VideoAttachment />
-        : contentUrl || contentType === 'application/octet-stream'
-        ? () => <FileAttachment attachment={attachment} />
-        : isText
-        ? () => <TextAttachment attachment={attachment} />
-        : next(...args);
-    }
+        return (isText ? !attachment.content : role === 'user' && !thumbnailUrl)
+          ? () => <FileAttachment attachment={attachment} />
+          : /^audio\//u.test(contentType)
+          ? () => <AudioAttachment />
+          : /^image\//u.test(contentType)
+          ? () => <ImageAttachment />
+          : /^video\//u.test(contentType)
+          ? () => <VideoAttachment />
+          : contentUrl || contentType === 'application/octet-stream'
+          ? () => <FileAttachment attachment={attachment} />
+          : isText
+          ? () => <TextAttachment attachment={attachment} />
+          : next(...args);
+      }
   ];
 }

package/src/Middleware/Avatar/createCoreMiddleware.tsx

@@ -59,16 +59,17 @@ DefaultAvatar.propTypes = {
 
 export default function createCoreAvatarMiddleware(): AvatarMiddleware[] {
   return [
-    () => () => ({ fromUser, styleOptions }) => {
-      const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions;
+    () =>
+      () =>
+      ({ fromUser, styleOptions }) => {
+        const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions;
 
-      if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) {
-        // eslint-disable-next-line react/display-name
-        return () => <DefaultAvatar fromUser={fromUser} />;
-      }
+        if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) {
+          return () => <DefaultAvatar fromUser={fromUser} />;
+        }
 
-      return false;
-    }
+        return false;
+      }
   ];
 }
 

package/src/Middleware/CardAction/createCoreMiddleware.js

@@ -54,6 +54,8 @@ export default function createDefaultCardActionMiddleware() {
                 newWindow.opener = null;
                 newWindow.location = value;
               } else {
+                // False alarm: this is "window.open", and not "fs.open".
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 window.open(value, '_blank', 'noopener noreferrer');
               }
             } else {
@@ -68,12 +70,17 @@ export default function createDefaultCardActionMiddleware() {
              *       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();
 
-              popup.location.href = url;
+              if (['http', 'https'].includes(getScheme(url))) {
+                popup.location.href = url;
+              } else {
+                console.warn('botframework-webchat: Cannot open URL with disallowed schemes.', url);
+
+                popup.close();
+              }
             })();
 
             break;

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 />
+  ];
 }