botframework-webchat-component 4.13.0 → 4.14.2

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

@@ -2,7 +2,7 @@ import { Constants } 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 DictationInterims from './SendBox/DictationInterims';
 import MicrophoneButton from './SendBox/MicrophoneButton';
@@ -31,11 +31,11 @@ const ROOT_STYLE = {
 };
 
 // TODO: [P3] We should consider exposing core/src/definitions and use it instead
-function activityIsSpeakingOrQueuedToSpeak({ channelData: { speak } = {} }) {
+function activityIsSpeakingOrQueuedToSpeak({ channelData: { speak } = {} }: { channelData: { speak?: any } }) {
   return !!speak;
 }
 
-function useSendBoxSpeechInterimsVisible() {
+function useSendBoxSpeechInterimsVisible(): [boolean] {
   const [activities] = useActivities();
   const [dictateState] = useDictateState();
 
@@ -45,10 +45,14 @@ function useSendBoxSpeechInterimsVisible() {
   ];
 }
 
-const BasicSendBox = ({ className }) => {
+type BasicSendBoxProps = {
+  className?: string;
+};
+
+const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
   const [{ hideUploadButton, sendBoxButtonAlignment }] = useStyleOptions();
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
-  const [{ SpeechRecognition } = {}] = useWebSpeechPonyfill();
+  const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
   const [direction] = useDirection();
   const [speechInterimsVisible] = useSendBoxSpeechInterimsVisible();
   const styleToEmotionObject = useStyleToEmotionObject();

package/src/BasicToaster.js

@@ -94,10 +94,10 @@ const BasicToaster = () => {
     () => (!expandable || expanded ? `webchat__toaster__list__${instanceId}` : undefined),
     [expandable, expanded, instanceId]
   );
-  const headerElementId = useMemo(() => (expandable ? `webchat__toaster__header__${instanceId}` : undefined), [
-    expandable,
-    instanceId
-  ]);
+  const headerElementId = useMemo(
+    () => (expandable ? `webchat__toaster__header__${instanceId}` : undefined),
+    [expandable, instanceId]
+  );
 
   useEffect(() => {
     !expandable && setExpanded(false);

package/src/BasicTranscript.js

@@ -5,6 +5,7 @@ import {
   Composer as ReactScrollToBottomComposer,
   Panel as ReactScrollToBottomPanel,
   useAnimatingToEnd,
+  useAtEnd,
   useObserveScrollPosition,
   useScrollTo,
   useScrollToEnd,
@@ -26,7 +27,6 @@ import isZeroOrPositive from './Utils/isZeroOrPositive';
 import removeInline from './Utils/removeInline';
 import ScreenReaderActivity from './ScreenReaderActivity';
 import ScreenReaderText from './ScreenReaderText';
-import ScrollToEndButton from './Activity/ScrollToEndButton';
 import SpeakActivity from './Activity/Speak';
 import tabbableElements from './Utils/tabbableElements';
 import useAcknowledgedActivity from './hooks/internal/useAcknowledgedActivity';
@@ -47,6 +47,7 @@ const {
   useCreateActivityRenderer,
   useCreateActivityStatusRenderer,
   useCreateAvatarRenderer,
+  useCreateScrollToEndButtonRenderer,
   useDirection,
   useGroupActivities,
   useLocalizer,
@@ -86,9 +87,8 @@ function validateAllActivitiesTagged(activities, bins) {
 
 const InternalTranscript = ({ activityElementsRef, className }) => {
   const [{ basicTranscript: basicTranscriptStyleSet }] = useStyleSet();
-  const [
-    { bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, internalLiveRegionFadeAfter, showAvatarInGroup }
-  ] = useStyleOptions();
+  const [{ bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, internalLiveRegionFadeAfter, showAvatarInGroup }] =
+    useStyleOptions();
   const [focusedActivityKey, setFocusedActivityKey] = useState();
   const [activities] = useActivities();
   const [direction] = useDirection();
@@ -150,9 +150,10 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
     [activities]
   );
 
-  const visibleActivities = useMemo(() => activitiesWithRenderer.map(({ activity }) => activity), [
-    activitiesWithRenderer
-  ]);
+  const visibleActivities = useMemo(
+    () => activitiesWithRenderer.map(({ activity }) => activity),
+    [activitiesWithRenderer]
+  );
 
   // Tag activities based on types.
   // The default implementation tag into 2 types: sender and status.
@@ -255,10 +256,16 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
 
           const { renderActivity } = activitiesWithRenderer.find(entry => entry.activity === activity);
           const key = getActivityUniqueId(activity) || renderingElements.length;
+          const baseAltText =
+            typeof activity?.channelData?.['webchat:fallback-text'] === 'string'
+              ? activity?.channelData?.['webchat:fallback-text']
+              : activity?.channelData?.messageBack?.displayText || activity.text;
+
+          // If "webchat:fallback-text" field is set to empty string, the activity must not be narrated.
+          const supportScreenReader = activity?.channelData?.['webchat:fallback-text'] !== '';
+
           const {
-            channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
-            from: { role },
-            text
+            from: { role }
           } = activity;
 
           const topSideNub = role === 'user' ? topSideUserNub : topSideBotNub;
@@ -342,8 +349,8 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
               hideAllTimestamps || indexWithinSenderAndStatusGroup !== activitiesWithSameSenderAndStatus.length - 1,
             key,
 
-            // When "liveRegionKey" changes, it will show up in the live region momentarily.
-            liveRegionKey: key + '|' + (messageBackDisplayText || text),
+            // When "liveRegionKey" changes or contents that made up the alt text changed, it will show up in the live region momentarily.
+            liveRegionKey: key + '|' + baseAltText,
             renderActivity,
             renderActivityStatus,
             renderAvatar,
@@ -351,7 +358,8 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
 
             // TODO: [P2] #2858 We should use core/definitions/speakingActivity for this predicate instead
             shouldSpeak: activity.channelData && activity.channelData.speak,
-            showCallout
+            showCallout,
+            supportScreenReader
           });
         });
       });
@@ -440,6 +448,8 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
     [activityElementsRef, rootElementRef, scrollToBottomScrollTo]
   );
 
+  const scrollToEnd = useCallback(() => scrollToBottomScrollToEnd({ behavior: 'smooth' }), [scrollToBottomScrollToEnd]);
+
   const scrollRelative = useCallback(
     (direction, { displacement } = {}) => {
       const { current: rootElement } = rootElementRef;
@@ -470,7 +480,7 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
   // Since there could be multiple instances of <BasicTranscript> inside the <Composer>, when the developer calls `scrollXXX`, we need to call it on all instances.
   // We call `useRegisterScrollXXX` to register a callback function, the `useScrollXXX` will multiplex the call into each instance of <BasicTranscript>.
   useRegisterScrollTo(scrollTo);
-  useRegisterScrollToEnd(scrollToBottomScrollToEnd);
+  useRegisterScrollToEnd(scrollToEnd);
   useRegisterScrollRelative(scrollRelative);
 
   const dispatchScrollPosition = useDispatchScrollPosition();
@@ -691,9 +701,10 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
     [focus]
   );
 
-  const focusTranscriptCallback = useCallback(() => rootElementRef.current && rootElementRef.current.focus(), [
-    rootElementRef
-  ]);
+  const focusTranscriptCallback = useCallback(
+    () => rootElementRef.current && rootElementRef.current.focus(),
+    [rootElementRef]
+  );
 
   useRegisterFocusTranscript(focusTranscriptCallback);
 
@@ -713,10 +724,10 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
     return activity;
   }, [focusedActivityKey, renderingElements]);
 
-  useMemo(() => dispatchTranscriptFocus && dispatchTranscriptFocus({ activity: focusedActivity }), [
-    dispatchTranscriptFocus,
-    focusedActivity
-  ]);
+  useMemo(
+    () => dispatchTranscriptFocus && dispatchTranscriptFocus({ activity: focusedActivity }),
+    [dispatchTranscriptFocus, focusedActivity]
+  );
 
   // This is required by IE11.
   // When the user clicks on and empty space (a.k.a. filler) in an empty transcript, IE11 says the focus is on the <div className="filler">,
@@ -760,11 +771,13 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
         aria-roledescription={transcriptRoleDescription}
         role="log"
       >
-        {renderingElements.map(({ activity, liveRegionKey }) => (
-          <Fade fadeAfter={internalLiveRegionFadeAfter} key={liveRegionKey}>
-            {() => <ScreenReaderActivity activity={activity} />}
-          </Fade>
-        ))}
+        {renderingElements
+          .filter(({ supportScreenReader }) => supportScreenReader)
+          .map(({ activity, liveRegionKey }) => (
+            <Fade fadeAfter={internalLiveRegionFadeAfter} key={liveRegionKey}>
+              {() => <ScreenReaderActivity activity={activity} />}
+            </Fade>
+          ))}
       </section>
       {/* TODO: [P2] Fix ESLint error `no-use-before-define` */}
       {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
@@ -790,7 +803,8 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
               renderAvatar,
               role,
               shouldSpeak,
-              showCallout
+              showCallout,
+              supportScreenReader
             },
             index
           ) => {
@@ -818,9 +832,11 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
                 onMouseDownCapture={handleMouseDownCapture}
                 ref={callbackRef}
               >
-                <ScreenReaderActivity activity={activity} id={ariaLabelID} renderAttachments={false}>
-                  {!!isContentInteractive && <p>{activityInteractiveAlt}</p>}
-                </ScreenReaderActivity>
+                {supportScreenReader && (
+                  <ScreenReaderActivity activity={activity} id={ariaLabelID} renderAttachments={false}>
+                    {!!isContentInteractive && <p>{activityInteractiveAlt}</p>}
+                  </ScreenReaderActivity>
+                )}
                 <FocusRedirector
                   className="webchat__basic-transcript__activity-sentinel"
                   onFocus={focusActivity}
@@ -916,19 +932,20 @@ InternalScreenReaderTranscript.propTypes = {
 // Separating high-frequency hooks to improve performance.
 const InternalTranscriptScrollable = ({ activities, children, onFocusActivity, onFocusFiller, terminatorRef }) => {
   const [{ activities: activitiesStyleSet }] = useStyleSet();
-  const [{ hideScrollToEndButton }] = useStyleOptions();
   const [animatingToEnd] = useAnimatingToEnd();
+  const [atEnd] = useAtEnd();
   const [sticky] = useSticky();
+  const [styleOptions] = useStyleOptions();
   const lastVisibleActivityId = getActivityUniqueId(activities[activities.length - 1] || {}); // Activity ID of the last visible activity in the list.
   const localize = useLocalizer();
-  const scrollToEndButtonRef = useRef();
+  const scrollToEnd = useScrollToEnd();
 
   const lastReadActivityIdRef = useRef(lastVisibleActivityId);
   const transcriptRoleDescription = localize('TRANSCRIPT_ARIA_ROLE_ALT');
 
-  const allActivitiesRead = lastVisibleActivityId === lastReadActivityIdRef.current;
-
   const handleScrollToEndButtonClick = useCallback(() => {
+    scrollToEnd({ behavior: 'smooth' });
+
     // After the "New message" button is clicked, focus on the first unread activity.
     const index = activities.findIndex(({ id }) => id === lastReadActivityIdRef.current);
 
@@ -943,49 +960,29 @@ const InternalTranscriptScrollable = ({ activities, children, onFocusActivity, o
     const { current } = terminatorRef;
 
     current && current.focus();
-  }, [activities, lastReadActivityIdRef, onFocusActivity, terminatorRef]);
+  }, [activities, lastReadActivityIdRef, onFocusActivity, scrollToEnd, terminatorRef]);
 
-  if (sticky) {
-    // If it is sticky, the user is at the bottom of the transcript, everything is read.
+  if (atEnd || sticky) {
+    // If it is sticky or at the end, the user is at the bottom of the transcript, everything is read.
     // So mark the activity ID as read.
     lastReadActivityIdRef.current = lastVisibleActivityId;
   }
 
-  // Finds where we should render the "New messages" button, in index. Returns -1 to hide the button.
-  const renderSeparatorAfterIndex = useMemo(() => {
-    // Don't show the button if:
-    // - All activities have been read
-    // - Currently animating towards bottom
-    //   - "New messages" button must not flash when: 1. Type "help", 2. Scroll to top, 3. Type "help" again, 4. Expect the "New messages" button not flashy
-    // - Hidden by style options
-    // - It is already at the bottom (sticky)
-
-    // Any changes to this logic, verify:
-    // - "New messages" button should persist while programmatically scrolling to mid-point of the transcript:
-    //   1. Type "help"
-    //   2. Type "proactive", then immediately scroll to top
-    //      Expect: the "New messages" button should appear
-    //   3. Run hook "useScrollTo({ scrollTop: 500 })"
-    //      Expect: when the scroll is animating to 500px, the "New messages" button should kept on the screen
-    // - "New messages" button must not flashy:
-    //   1. Type "help"
-    //   2. Scroll to top
-    //      Expect: no "New messages" button is shown
-    //   3. Type "help" again
-    //      Expect: "New messages" button must not flash-appear
-
-    if (allActivitiesRead || animatingToEnd || hideScrollToEndButton || sticky) {
-      return -1;
-    }
+  const ScrollToEndButton = useCreateScrollToEndButtonRenderer()({
+    atEnd: animatingToEnd || atEnd || sticky,
+    styleOptions,
 
-    return activities.findIndex(activity => getActivityUniqueId(activity) === lastReadActivityIdRef.current);
-  }, [activities, allActivitiesRead, animatingToEnd, hideScrollToEndButton, lastReadActivityIdRef, sticky]);
+    // Unread means:
+    // 1. Last read is not the last one in the transcript, and;
+    // 2. Last read is still in the transcript.
+    unread:
+      lastVisibleActivityId !== lastReadActivityIdRef.current &&
+      !!~activities.findIndex(activity => getActivityUniqueId(activity) === lastReadActivityIdRef.current)
+  });
 
   return (
     <React.Fragment>
-      {renderSeparatorAfterIndex !== -1 && (
-        <ScrollToEndButton onClick={handleScrollToEndButtonClick} ref={scrollToEndButtonRef} />
-      )}
+      {ScrollToEndButton && <ScrollToEndButton onClick={handleScrollToEndButtonClick} />}
       {!!React.Children.count(children) && (
         <FocusRedirector className="webchat__basic-transcript__sentinel" redirectRef={terminatorRef} />
       )}
@@ -1016,10 +1013,13 @@ const SetScroller = ({ activityElementsRef, scrollerRef }) => {
   const [
     { autoScrollSnapOnActivity, autoScrollSnapOnActivityOffset, autoScrollSnapOnPage, autoScrollSnapOnPageOffset }
   ] = useStyleOptions();
+  const [activities] = useActivities();
   const [lastAcknowledgedActivity] = useAcknowledgedActivity();
 
+  const activitiesRef = useRef(activities);
   const lastAcknowledgedActivityRef = useRef(lastAcknowledgedActivity);
 
+  activitiesRef.current = activities;
   lastAcknowledgedActivityRef.current = lastAcknowledgedActivity;
 
   scrollerRef.current = useCallback(
@@ -1042,41 +1042,56 @@ const SetScroller = ({ activityElementsRef, scrollerRef }) => {
         typeof autoScrollSnapOnPageOffset === 'number' ? autoScrollSnapOnPageOffset : 0;
 
       if (patchedAutoScrollSnapOnActivity || patchedAutoScrollSnapOnPage) {
+        const { current: activities } = activitiesRef;
+        const { current: activityElements } = activityElementsRef;
         const { current: lastAcknowledgedActivity } = lastAcknowledgedActivityRef;
-
         const values = [];
 
-        if (patchedAutoScrollSnapOnActivity) {
-          const { element: nthUnacknowledgedActivityElement } =
-            activityElementsRef.current[
-              activityElementsRef.current.findIndex(({ activity }) => activity === lastAcknowledgedActivity) +
-                patchedAutoScrollSnapOnActivity
-            ] || {};
-
-          if (nthUnacknowledgedActivityElement) {
-            values.push(
-              nthUnacknowledgedActivityElement.offsetTop +
-                nthUnacknowledgedActivityElement.offsetHeight -
-                offsetHeight -
-                scrollTop +
-                patchedAutoScrollSnapOnActivityOffset
-            );
+        const lastAcknowledgedActivityIndex = activities.indexOf(lastAcknowledgedActivity);
+
+        if (~lastAcknowledgedActivityIndex) {
+          // The activity that we acknowledged could be not rendered, such as post back activity.
+          // When calculating scroll snap, we can only base on the first unacknowledged-and-rendering activity.
+          let firstUnacknowledgedActivityElementIndex = -1;
+
+          for (let index = lastAcknowledgedActivityIndex + 1, { length } = activities; index < length; index++) {
+            const activity = activities[index];
+            const activityElementIndex = activityElements.findIndex(entry => entry.activity === activity);
+
+            if (~activityElementIndex) {
+              firstUnacknowledgedActivityElementIndex = activityElementIndex;
+              break;
+            }
           }
-        }
 
-        if (patchedAutoScrollSnapOnPage) {
-          const { element: firstUnacknowledgedActivityElement } =
-            activityElementsRef.current[
-              activityElementsRef.current.findIndex(({ activity }) => activity === lastAcknowledgedActivity) + 1
-            ] || {};
-
-          if (firstUnacknowledgedActivityElement) {
-            values.push(
-              firstUnacknowledgedActivityElement.offsetTop -
-                scrollTop -
-                offsetHeight * (1 - patchedAutoScrollSnapOnPage) +
-                patchedAutoScrollSnapOnPageOffset
-            );
+          if (~firstUnacknowledgedActivityElementIndex) {
+            if (patchedAutoScrollSnapOnActivity) {
+              // Gets the activity element which we should snap to.
+              const { element: nthUnacknowledgedActivityElement } =
+                activityElements[firstUnacknowledgedActivityElementIndex + patchedAutoScrollSnapOnActivity - 1];
+
+              if (nthUnacknowledgedActivityElement) {
+                values.push(
+                  nthUnacknowledgedActivityElement.offsetTop +
+                    nthUnacknowledgedActivityElement.offsetHeight -
+                    offsetHeight -
+                    scrollTop +
+                    patchedAutoScrollSnapOnActivityOffset
+                );
+              }
+            }
+
+            if (patchedAutoScrollSnapOnPage) {
+              const { element: firstUnacknowledgedActivityElement } =
+                activityElements[firstUnacknowledgedActivityElementIndex];
+
+              values.push(
+                firstUnacknowledgedActivityElement.offsetTop -
+                  scrollTop -
+                  offsetHeight * (1 - patchedAutoScrollSnapOnPage) +
+                  patchedAutoScrollSnapOnPageOffset
+              );
+            }
           }
         }
 
@@ -1086,6 +1101,7 @@ const SetScroller = ({ activityElementsRef, scrollerRef }) => {
       return Infinity;
     },
     [
+      activitiesRef,
       activityElementsRef,
       autoScrollSnapOnActivity,
       autoScrollSnapOnActivityOffset,

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

@@ -2,7 +2,7 @@ import { hooks } from 'botframework-webchat-api';
 
 const { useActiveTyping, useRenderTypingIndicator } = hooks;
 
-function useTypingIndicatorVisible() {
+function useTypingIndicatorVisible(): [boolean] {
   const [activeTyping] = useActiveTyping();
 
   return [!!Object.values(activeTyping).filter(({ role }) => role !== 'user').length];

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,10 +1,16 @@
-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,
@@ -18,13 +24,13 @@ 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';
 
@@ -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,
@@ -226,7 +242,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 +258,7 @@ const Composer = ({
   children,
   extraStyleSet,
   renderMarkdown,
+  scrollToEndButtonMiddleware,
   styleSet,
   suggestedActionsAccessKey,
   toastMiddleware,
@@ -287,6 +310,13 @@ const Composer = ({
     [typingIndicatorMiddleware]
   );
 
+  const defaultScrollToEndButtonMiddleware = useMemo(() => createDefaultScrollToEndButtonMiddleware(), []);
+
+  const patchedScrollToEndButtonMiddleware = useMemo(
+    () => [...singleToArray(scrollToEndButtonMiddleware), ...defaultScrollToEndButtonMiddleware],
+    [defaultScrollToEndButtonMiddleware, scrollToEndButtonMiddleware]
+  );
+
   return (
     <React.Fragment>
       <APIComposer
@@ -300,6 +330,7 @@ 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}
@@ -323,47 +354,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 };