botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/src/ChatHistory/ChatHistoryToolbar.tsx

@@ -0,0 +1,38 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import reactNode from '../types/internal/reactNode';
+
+const { useDirection } = hooks;
+
+const chatHistoryToolbarPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type ChatHistoryToolbarProps = InferInput<typeof chatHistoryToolbarPropsSchema>;
+
+function ChatHistoryToolbar(props: ChatHistoryToolbarProps) {
+  const { children } = validateProps(chatHistoryToolbarPropsSchema, props);
+
+  const [direction] = useDirection();
+
+  return (
+    <div
+      className={classNames(
+        'webchat__chat-history-box__toolbar',
+        direction === 'rtl' ? 'webchat__chat-history-box__toolbar--rtl' : ''
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default memo(ChatHistoryToolbar);
+export { chatHistoryToolbarPropsSchema, type ChatHistoryToolbarProps };

package/src/ChatHistory/private/ScrollToEndButton.tsx

@@ -0,0 +1,105 @@
+import { hooks } from 'botframework-webchat-api';
+import React, { Fragment, memo, MutableRefObject, useCallback, useMemo } from 'react';
+import { useAnimatingToEnd, useAtEnd, useScrollToEnd, useSticky } from 'react-scroll-to-bottom';
+import { useRefFrom } from 'use-ref-from';
+
+import useRenderingActivityKeys from '../../providers/RenderingActivities/useRenderingActivityKeys';
+import useFocusByActivityKey from '../../providers/TranscriptFocus/useFocusByActivityKey';
+
+const { useActivityKeysByRead, useCreateScrollToEndButtonRenderer, useMarkActivityKeyAsRead, useStyleOptions } = hooks;
+
+const useScrollToEndRenderResult = (terminatorRef: MutableRefObject<HTMLDivElement>) => {
+  const [renderingActivityKeys] = useRenderingActivityKeys();
+  const [sticky]: [boolean] = useSticky();
+  const [animatingToEnd]: [boolean] = useAnimatingToEnd();
+  const [atEnd]: [boolean] = useAtEnd();
+  const [, unreadActivityKeys] = useActivityKeysByRead();
+  const [styleOptions] = useStyleOptions();
+  const focusByActivityKey = useFocusByActivityKey();
+  const markActivityKeyAsRead = useMarkActivityKeyAsRead();
+  const scrollToEnd: (options?: ScrollToOptions) => void = useScrollToEnd();
+
+  // Acknowledged means either:
+  // 1. The user sent a message
+  //    - We don't need a condition here. When Web Chat sends the user's message, it will scroll to bottom, and it will trigger condition 2 below.
+  // 2. The user scroll to the bottom of the transcript, from a non-bottom scroll position
+  //    - If the transcript is already at the bottom, the user needs to scroll up and then go back down
+  //    - What happens if we are relaxing "scrolled from a non-bottom scroll position":
+  //      1. The condition will become solely "at the bottom of the transcript"
+  //      2. Auto-scroll will always scroll the transcript to the bottom
+  //      3. Web Chat will always acknowledge all activities as it is at the bottom
+  //      4. Acknowledge flag become useless
+  //      5. Therefore, even the developer set "pause after 3 activities", if activities are coming in at a slow pace (not batched in a single render)
+  //         Web Chat will keep scrolling and not snapped/paused
+
+  // Note: When Web Chat is loaded, there are no activities acknowledged. We need to assume all arriving activities are acknowledged until end-user sends their first activity.
+  //       Activities loaded initially could be from conversation history. Without assuming acknowledgement, Web Chat will not scroll initially (as everything is not acknowledged).
+  //       It would be better if the chat adapter should let Web Chat know if the activity is loaded from history or not.
+
+  // TODO: [P2] #3670 Move the "conversation history acknowledgement" logic mentioned above to polyfill of chat adapters.
+  //       1. Chat adapter should send "acknowledged" as part of "channelData"
+  //       2. If "acknowledged" is "undefined", we set it to:
+  //          a. true, if there are no egress activities yet
+  //          b. Otherwise, false
+
+  const renderingActivityKeysRef = useRefFrom(renderingActivityKeys);
+
+  // To prevent flashy button, we are not waiting for another render loop to update the `[readActivityKeys, unreadActivityKeys]` state.
+  // Instead, we are building the next one in this `useMemo` call.
+  const nextUnreadActivityKeys = useMemo(() => {
+    // This code need to be careful reviewed as it will cause another render. The code should be converging.
+    // After we call `markActivityKeyAsRead`, everything will be read and nothing will be unread.
+    // That means, in next render, `unreadActivityKeys` will be emptied and the `markActivityKeyAsRead` will not get called again.
+    if (sticky && unreadActivityKeys.length) {
+      markActivityKeyAsRead(unreadActivityKeys[unreadActivityKeys.length - 1]);
+
+      return [];
+    }
+
+    return unreadActivityKeys;
+  }, [markActivityKeyAsRead, sticky, unreadActivityKeys]);
+
+  const nextUnreadActivityKeysRef = useRefFrom(nextUnreadActivityKeys);
+
+  // If we are rendering anything that is unread, we should show the "New messages" button.
+  // Not everything in the `unreadActivityKeys` are rendered, say, bot typing indicator.
+  // We should not show the "New messages" button for bot typing indicator as it will confuse the user.
+  const unread = useMemo(
+    () => nextUnreadActivityKeys.some(key => renderingActivityKeys.includes(key)),
+    [renderingActivityKeys, nextUnreadActivityKeys]
+  );
+
+  const handleScrollToEndButtonClick = useCallback(() => {
+    scrollToEnd({ behavior: 'smooth' });
+
+    const { current: renderingActivityKeys } = renderingActivityKeysRef;
+
+    // After the "New message" button is clicked, focus on the first unread activity which will be rendered.
+    const firstUnreadRenderingActivityKey = nextUnreadActivityKeysRef.current.find(key =>
+      renderingActivityKeys.includes(key)
+    );
+
+    if (firstUnreadRenderingActivityKey) {
+      focusByActivityKey(firstUnreadRenderingActivityKey);
+    } else {
+      // If no unread activity, send the focus to the terminator block.
+      terminatorRef.current?.focus();
+    }
+  }, [focusByActivityKey, nextUnreadActivityKeysRef, renderingActivityKeysRef, scrollToEnd, terminatorRef]);
+
+  // According to tests no memo is expected here
+  const renderScrollToEndButton = useCreateScrollToEndButtonRenderer()({
+    atEnd: animatingToEnd || atEnd || sticky,
+    styleOptions,
+    unread
+  });
+
+  return renderScrollToEndButton && renderScrollToEndButton({ onClick: handleScrollToEndButtonClick });
+};
+
+function ScrollToEndButton({ terminatorRef }: Readonly<{ terminatorRef: MutableRefObject<HTMLDivElement> }>) {
+  const children = useScrollToEndRenderResult(terminatorRef);
+  return <Fragment>{children}</Fragment>;
+}
+
+export default memo(ScrollToEndButton);

package/src/Composer.tsx

@@ -1,4 +1,3 @@
-import createEmotion from '@emotion/css/create-instance';
 import type {
   ComposerProps as APIComposerProps,
   SendBoxMiddleware,
@@ -11,7 +10,7 @@ import {
   initSendBoxToolbarMiddleware,
   WebSpeechPonyfillFactory
 } from 'botframework-webchat-api';
-import { DecoratorComposer } from 'botframework-webchat-api/decorator';
+import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
 import { singleToArray } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import MarkdownIt from 'markdown-it';
@@ -20,15 +19,19 @@ import React, { memo, useCallback, useMemo, useRef, useState, type ReactNode } f
 import { Composer as SayComposer } from 'react-say';
 
 import createDefaultAttachmentMiddleware from './Attachment/createMiddleware';
+import BuiltInDecorator from './BuiltInDecorator';
 import Dictation from './Dictation';
 import ErrorBox from './ErrorBox';
 import {
   speechSynthesis as bypassSpeechSynthesis,
   SpeechSynthesisUtterance as BypassSpeechSynthesisUtterance
 } from './hooks/internal/BypassSpeechSynthesisPonyfill';
+import { StyleToEmotionObjectComposer, useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import UITracker from './hooks/internal/UITracker';
+import useInjectStyles from './hooks/internal/useInjectStyles';
 import WebChatUIContext from './hooks/internal/WebChatUIContext';
-import useStyleSet from './hooks/useStyleSet';
+import { FocusSendBoxScope } from './hooks/sendBoxFocus';
+import { ScrollRelativeTranscriptScope } from './hooks/transcriptScrollRelative';
 import createDefaultActivityMiddleware from './Middleware/Activity/createCoreMiddleware';
 import createDefaultActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';
 import createDefaultAttachmentForScreenReaderMiddleware from './Middleware/AttachmentForScreenReader/createCoreMiddleware';
@@ -37,50 +40,86 @@ import createDefaultCardActionMiddleware from './Middleware/CardAction/createCor
 import createDefaultScrollToEndButtonMiddleware from './Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware';
 import createDefaultToastMiddleware from './Middleware/Toast/createCoreMiddleware';
 import createDefaultTypingIndicatorMiddleware from './Middleware/TypingIndicator/createCoreMiddleware';
-import ActivityTreeComposer from './providers/ActivityTree/ActivityTreeComposer';
+import CustomElementsComposer from './providers/CustomElements/CustomElementsComposer';
+import HTMLContentTransformComposer from './providers/HTMLContentTransformCOR/HTMLContentTransformComposer';
+import { type HTMLContentTransformMiddleware } from './providers/HTMLContentTransformCOR/private/HTMLContentTransformContext';
 import SendBoxComposer from './providers/internal/SendBox/SendBoxComposer';
+import { LiveRegionTwinComposer } from './providers/LiveRegionTwin';
 import ModalDialogComposer from './providers/ModalDialog/ModalDialogComposer';
+import ReducedMotionComposer from './providers/ReducedMotion/ReducedMotionComposer';
 import useTheme from './providers/Theme/useTheme';
 import createDefaultSendBoxMiddleware from './SendBox/createMiddleware';
 import createDefaultSendBoxToolbarMiddleware from './SendBoxToolbar/createMiddleware';
 import createStyleSet from './Styles/createStyleSet';
+import useCustomPropertiesClassName from './Styles/useCustomPropertiesClassName';
 import { type ContextOf } from './types/ContextOf';
 import { type FocusTranscriptInit } from './types/internal/FocusTranscriptInit';
 import addTargetBlankToHyperlinksMarkdown from './Utils/addTargetBlankToHyperlinksMarkdown';
-import createCSSKey from './Utils/createCSSKey';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import mapMap from './Utils/mapMap';
 
-const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions } = hooks;
+const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions, useTrackException } = hooks;
 
 const node_env = process.env.node_env || process.env.NODE_ENV;
 
-const emotionPool = {};
-
 function styleSetToEmotionObjects(styleToEmotionObject, styleSet) {
   return mapMap(styleSet, (style, key) => (key === 'options' ? style : styleToEmotionObject(style)));
 }
 
-type ComposerCoreUIProps = Readonly<{ children?: ReactNode }>;
+type ComposerCoreUIProps = Readonly<{ children?: ReactNode | undefined }>;
+
+const ROOT_STYLE = {
+  '&.webchat__css-custom-properties': {
+    '& .webchat__live-region': {
+      color: 'transparent',
+      height: 1,
+      overflow: 'hidden',
+      position: 'absolute',
+      top: 0,
+      whiteSpace: 'nowrap',
+      width: 1
+    }
+  }
+};
 
 const ComposerCoreUI = memo(({ children }: ComposerCoreUIProps) => {
-  const [{ cssCustomProperties }] = useStyleSet();
+  const [{ internalLiveRegionFadeAfter }] = useStyleOptions();
+  const [customPropertiesClassName] = useCustomPropertiesClassName();
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const trackException = useTrackException();
+
+  const dictationOnError = useCallback(
+    (errorEvent: SpeechRecognitionErrorEvent) => {
+      // Ignore aborted error as it is likely user clicking on the microphone button to abort recognition.
+      if (errorEvent.error !== 'aborted') {
+        const nativeError = new Error('Speech recognition failed');
 
-  const dictationOnError = useCallback(err => {
-    console.error(err);
-  }, []);
+        nativeError.cause = errorEvent;
+
+        trackException(nativeError, false);
+        console.error(nativeError);
+      }
+    },
+    [trackException]
+  );
 
   return (
-    <div className={classNames('webchat__css-custom-properties', cssCustomProperties)}>
-      <DecoratorComposer>
-        <ModalDialogComposer>
-          {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}
-          <SendBoxComposer>
-            {children}
-            <Dictation onError={dictationOnError} />
-          </SendBoxComposer>
-        </ModalDialogComposer>
-      </DecoratorComposer>
+    <div className={classNames('webchat', 'webchat__css-custom-properties', rootClassName, customPropertiesClassName)}>
+      <CustomElementsComposer>
+        <FocusSendBoxScope>
+          <ScrollRelativeTranscriptScope>
+            <LiveRegionTwinComposer className="webchat__live-region" fadeAfter={internalLiveRegionFadeAfter}>
+              <ModalDialogComposer>
+                {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}
+                <SendBoxComposer>
+                  {children}
+                  <Dictation onError={dictationOnError} />
+                </SendBoxComposer>
+              </ModalDialogComposer>
+            </LiveRegionTwinComposer>
+          </ScrollRelativeTranscriptScope>
+        </FocusSendBoxScope>
+      </CustomElementsComposer>
     </div>
   );
 });
@@ -89,7 +128,9 @@ ComposerCoreUI.displayName = 'ComposerCoreUI';
 
 type ComposerCoreProps = Readonly<{
   children?: ReactNode;
+  decoratorMiddleware?: readonly DecoratorMiddleware[] | undefined;
   extraStyleSet?: any;
+  htmlContentTransformMiddleware?: readonly HTMLContentTransformMiddleware[] | undefined;
   nonce?: string;
   renderMarkdown?: (
     markdown: string,
@@ -97,6 +138,7 @@ type ComposerCoreProps = Readonly<{
     linkOptions: { externalLinkAlt: string }
   ) => string;
   styleSet?: any;
+  styles?: readonly HTMLStyleElement[];
   suggestedActionsAccessKey?: boolean | string;
   webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
 }>;
@@ -106,6 +148,7 @@ const ComposerCore = ({
   extraStyleSet,
   nonce,
   renderMarkdown,
+  styles,
   styleSet,
   suggestedActionsAccessKey,
   webSpeechPonyfillFactory
@@ -131,17 +174,7 @@ const ComposerCore = ({
     [internalMarkdownIt]
   );
 
-  const styleToEmotionObject = useMemo(() => {
-    // Emotion doesn't hash with nonce. We need to provide the pooling mechanism.
-    // 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 =
-      // 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]);
+  const styleToEmotionObject = useStyleToEmotionObject();
 
   const patchedStyleSet = useMemo(
     () =>
@@ -187,7 +220,7 @@ const ComposerCore = ({
   const getActivityByKey = useGetActivityByKey();
 
   const dispatchTranscriptFocusByActivityKey = useMemo(() => {
-    let prevActivityKey: string | Symbol | undefined = Symbol();
+    let prevActivityKey: string | symbol | undefined = Symbol();
 
     return activityKey => {
       if (activityKey !== prevActivityKey) {
@@ -213,6 +246,8 @@ const ComposerCore = ({
     [transcriptFocusObserversRef, setNumTranscriptFocusObservers]
   );
 
+  useInjectStyles(styles, nonce);
+
   const context = useMemo<ContextOf<typeof WebChatUIContext>>(
     () => ({
       dictateAbortable,
@@ -230,7 +265,6 @@ const ComposerCore = ({
       scrollToEndCallbacksRef,
       setDictateAbortable,
       styleSet: patchedStyleSet,
-      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     }),
@@ -250,7 +284,6 @@ const ComposerCore = ({
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,
-      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     ]
@@ -293,7 +326,9 @@ const Composer = ({
   avatarMiddleware,
   cardActionMiddleware,
   children,
+  decoratorMiddleware,
   extraStyleSet,
+  htmlContentTransformMiddleware,
   renderMarkdown,
   scrollToEndButtonMiddleware,
   sendBoxMiddleware: sendBoxMiddlewareFromProps,
@@ -388,8 +423,8 @@ const Composer = ({
   const sendBoxMiddleware = useMemo<readonly SendBoxMiddleware[]>(
     () =>
       Object.freeze([
-        ...initSendBoxMiddleware(sendBoxMiddlewareFromProps),
-        ...initSendBoxMiddleware(theme.sendBoxMiddleware),
+        ...initSendBoxMiddleware(sendBoxMiddlewareFromProps, undefined),
+        ...initSendBoxMiddleware(theme.sendBoxMiddleware, undefined),
         ...createDefaultSendBoxMiddleware()
       ]),
     [sendBoxMiddlewareFromProps, theme.sendBoxMiddleware]
@@ -398,8 +433,8 @@ const Composer = ({
   const sendBoxToolbarMiddleware = useMemo<readonly SendBoxToolbarMiddleware[]>(
     () =>
       Object.freeze([
-        ...initSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps),
-        ...initSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware),
+        ...initSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps, undefined),
+        ...initSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware, undefined),
         ...createDefaultSendBoxToolbarMiddleware()
       ]),
     [sendBoxToolbarMiddlewareFromProps, theme.sendBoxToolbarMiddleware]
@@ -415,7 +450,7 @@ const Composer = ({
       cardActionMiddleware={patchedCardActionMiddleware}
       downscaleImageToDataURL={downscaleImageToDataURL}
       // Under dev server of create-react-app, "NODE_ENV" will be set to "development".
-      internalErrorBoxClass={node_env === 'development' ? ErrorBox : undefined}
+      {...(node_env === 'development' ? { internalErrorBoxClass: ErrorBox } : {})}
       nonce={nonce}
       scrollToEndButtonMiddleware={patchedScrollToEndButtonMiddleware}
       sendBoxMiddleware={sendBoxMiddleware}
@@ -425,19 +460,28 @@ const Composer = ({
       typingIndicatorMiddleware={patchedTypingIndicatorMiddleware}
       {...composerProps}
     >
-      <ActivityTreeComposer>
-        <ComposerCore
-          extraStyleSet={extraStyleSet}
-          nonce={nonce}
-          renderMarkdown={renderMarkdown}
-          styleSet={styleSet}
-          suggestedActionsAccessKey={suggestedActionsAccessKey}
-          webSpeechPonyfillFactory={webSpeechPonyfillFactory}
-        >
-          {children}
-          {onTelemetry && <UITracker />}
-        </ComposerCore>
-      </ActivityTreeComposer>
+      <StyleToEmotionObjectComposer nonce={nonce}>
+        <HTMLContentTransformComposer middleware={htmlContentTransformMiddleware}>
+          <ReducedMotionComposer>
+            <BuiltInDecorator>
+              <DecoratorComposer middleware={decoratorMiddleware}>
+                <ComposerCore
+                  extraStyleSet={extraStyleSet}
+                  nonce={nonce}
+                  renderMarkdown={renderMarkdown}
+                  styleSet={styleSet}
+                  styles={theme.styles}
+                  suggestedActionsAccessKey={suggestedActionsAccessKey}
+                  webSpeechPonyfillFactory={webSpeechPonyfillFactory}
+                >
+                  {children}
+                  {onTelemetry && <UITracker />}
+                </ComposerCore>
+              </DecoratorComposer>
+            </BuiltInDecorator>
+          </ReducedMotionComposer>
+        </HTMLContentTransformComposer>
+      </StyleToEmotionObjectComposer>
     </APIComposer>
   );
 };
@@ -455,5 +499,4 @@ Composer.propTypes = {
 };
 
 export default Composer;
-
 export type { ComposerProps };

package/src/ConnectivityStatus/{Connecting.js → Connecting.tsx}

@@ -1,18 +1,30 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { Fragment, memo, useState } from 'react';
+import { boolean, object, optional, pipe, readonly, type InferInput } from 'valibot';
 
-import ScreenReaderText from '../ScreenReaderText';
-import SpinnerAnimation from './Assets/SpinnerAnimation';
 import useForceRender from '../hooks/internal/useForceRender';
-import useStyleSet from '../hooks/useStyleSet';
 import useTimer from '../hooks/internal/useTimer';
+import useStyleSet from '../hooks/useStyleSet';
+import ScreenReaderText from '../ScreenReaderText';
+import SpinnerAnimation from './Assets/SpinnerAnimation';
 import WarningNotificationIcon from './Assets/WarningNotificationIcon';
 
 const { useDirection, useLocalizer, usePonyfill, useStyleOptions } = hooks;
 
-const ConnectivityStatusConnecting = ({ reconnect }) => {
+const connectivityStatusConnectingPropsSchema = pipe(
+  object({
+    reconnect: optional(boolean())
+  }),
+  readonly()
+);
+
+type ConnectivityStatusConnectingProps = InferInput<typeof connectivityStatusConnectingPropsSchema>;
+
+function ConnectivityStatusConnecting(props: ConnectivityStatusConnectingProps) {
+  const { reconnect = false } = validateProps(connectivityStatusConnectingPropsSchema, props);
+
   const [{ Date }] = usePonyfill();
   const [{ slowConnectionAfter }] = useStyleOptions();
   const [
@@ -33,7 +45,7 @@ const ConnectivityStatusConnecting = ({ reconnect }) => {
   const slow = now >= initialRenderAt + slowConnectionAfter;
 
   return slow ? (
-    <React.Fragment>
+    <Fragment>
       <ScreenReaderText text={localize('CONNECTIVITY_STATUS_ALT', slowConnectionText)} />
       <div
         aria-hidden={true}
@@ -43,9 +55,9 @@ const ConnectivityStatusConnecting = ({ reconnect }) => {
         <WarningNotificationIcon />
         {slowConnectionText}
       </div>
-    </React.Fragment>
+    </Fragment>
   ) : (
-    <React.Fragment>
+    <Fragment>
       <ScreenReaderText
         text={localize('CONNECTIVITY_STATUS_ALT', reconnect ? interruptedConnectionText : initialConnectionText)}
       />
@@ -57,16 +69,9 @@ const ConnectivityStatusConnecting = ({ reconnect }) => {
         <SpinnerAnimation />
         {reconnect ? interruptedConnectionText : initialConnectionText}
       </div>
-    </React.Fragment>
+    </Fragment>
   );
-};
-
-ConnectivityStatusConnecting.defaultProps = {
-  reconnect: false
-};
-
-ConnectivityStatusConnecting.propTypes = {
-  reconnect: PropTypes.bool
-};
+}
 
-export default ConnectivityStatusConnecting;
+export default memo(ConnectivityStatusConnecting);
+export { connectivityStatusConnectingPropsSchema, type ConnectivityStatusConnectingProps };

package/src/Dictation.js

@@ -3,7 +3,7 @@ import { hooks } from 'botframework-webchat-api';
 import { useSetDictateState } from 'botframework-webchat-api/internal';
 import { Constants } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Composer as DictateComposer } from 'react-dictate-button';
 
 import useResumeAudioContext from './hooks/internal/useResumeAudioContext';
@@ -11,17 +11,17 @@ import useSettableDictateAbortable from './hooks/internal/useSettableDictateAbor
 import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
 
 const {
-  useActivities,
   useDictateInterims,
   useDictateState,
-  useDisabled,
   useEmitTypingIndicator,
   useLanguage,
   useSendBoxValue,
   useSendTypingIndicator,
   useShouldSpeakIncomingActivity,
   useStopDictate,
-  useSubmitSendBox
+  useStyleOptions,
+  useSubmitSendBox,
+  useUIState
 } = hooks;
 
 const {
@@ -34,28 +34,21 @@ const Dictation = ({ onError }) => {
   const [, setSendBox] = useSendBoxValue();
   const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
   const [{ SpeechGrammarList, SpeechRecognition } = {}] = useWebSpeechPonyfill();
-  const [activities] = useActivities();
+  const [{ speechRecognitionContinuous }] = useStyleOptions();
   const [dictateState] = useDictateState();
-  const [disabled] = useDisabled();
   const [sendTypingIndicator] = useSendTypingIndicator();
   const [speechLanguage] = useLanguage('speech');
+  const [uiState] = useUIState();
   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 handleDictate = useCallback(
     ({ result: { confidence, transcript } = {} }) => {
       if (dictateState === DICTATING || dictateState === STARTING) {
         setDictateInterims([]);
-        setDictateState(IDLE);
-        stopDictate();
 
         if (transcript) {
           setSendBox(transcript);
@@ -64,15 +57,7 @@ const Dictation = ({ onError }) => {
         }
       }
     },
-    [
-      dictateState,
-      setDictateInterims,
-      setDictateState,
-      stopDictate,
-      setSendBox,
-      submitSendBox,
-      setShouldSpeakIncomingActivity
-    ]
+    [dictateState, setDictateInterims, setSendBox, submitSendBox, setShouldSpeakIncomingActivity]
   );
 
   const handleDictating = useCallback(
@@ -89,6 +74,11 @@ const Dictation = ({ onError }) => {
     [dictateState, emitTypingIndicator, sendTypingIndicator, setDictateAbortable, setDictateInterims, setDictateState]
   );
 
+  const handleEnd = useCallback(() => {
+    dictateState !== IDLE && setDictateState(IDLE);
+    (dictateState === DICTATING || dictateState === STARTING) && stopDictate();
+  }, [dictateState, setDictateState, stopDictate]);
+
   const handleError = useCallback(
     event => {
       dictateState !== IDLE && setDictateState(IDLE);
@@ -107,13 +97,15 @@ const Dictation = ({ onError }) => {
 
   return (
     <DictateComposer
+      continuous={speechRecognitionContinuous}
       lang={speechLanguage}
       onDictate={handleDictate}
+      onEnd={handleEnd}
       onError={handleError}
       onProgress={handleDictating}
       speechGrammarList={SpeechGrammarList}
       speechRecognition={SpeechRecognition}
-      started={!disabled && (dictateState === STARTING || dictateState === DICTATING) && !numSpeakingActivities}
+      started={uiState !== 'disabled' && (dictateState === STARTING || dictateState === DICTATING)}
     />
   );
 };