botframework-webchat-component 4.18.1 → 4.19.0

package/src/Composer.tsx

@@ -1,87 +1,157 @@
-import createEmotion from '@emotion/css/create-instance';
-import type {
-  ComposerProps as APIComposerProps,
-  SendBoxMiddleware,
-  SendBoxToolbarMiddleware
-} from 'botframework-webchat-api';
+/* eslint-disable react/require-default-props */
+
+import { singleToArray } from '@msinternal/botframework-webchat-base/utils';
+import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
 import {
   Composer as APIComposer,
+  AttachmentForScreenReaderMiddleware,
+  extractSendBoxMiddleware,
+  extractSendBoxToolbarMiddleware,
   hooks,
-  initSendBoxMiddleware,
-  initSendBoxToolbarMiddleware,
-  WebSpeechPonyfillFactory
+  WebSpeechPonyfillFactory,
+  type ActivityStatusMiddleware,
+  type ComposerProps as APIComposerProps,
+  type AttachmentMiddleware,
+  type AvatarMiddleware,
+  type CardActionMiddleware,
+  type ScrollToEndButtonMiddleware,
+  type SendBoxMiddleware,
+  type SendBoxToolbarMiddleware,
+  type ToastMiddleware,
+  type TypingIndicatorMiddleware
 } from 'botframework-webchat-api';
-import { DecoratorComposer } from 'botframework-webchat-api/decorator';
-import { singleToArray } from 'botframework-webchat-core';
+import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator.js';
+import { type LegacyActivityMiddleware, type Polymiddleware } from 'botframework-webchat-api/middleware.js';
+import { StoreDebugAPIRegistry, type StoreDebugAPI } from 'botframework-webchat-core/internal.js';
 import classNames from 'classnames';
 import MarkdownIt from 'markdown-it';
 import PropTypes from 'prop-types';
-import React, { memo, useCallback, useMemo, useRef, useState, type ReactNode } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 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 WebChatUIContext from './hooks/internal/WebChatUIContext';
-import useStyleSet from './hooks/useStyleSet';
-import createDefaultActivityMiddleware from './Middleware/Activity/createCoreMiddleware';
+import { FocusSendBoxScope } from './hooks/sendBoxFocus';
+import { ScrollRelativeTranscriptScope } from './hooks/transcriptScrollRelative';
+import defaultActivityPolymiddleware from './Middleware/Activity/defaultActivityPolymiddleware';
 import createDefaultActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';
 import createDefaultAttachmentForScreenReaderMiddleware from './Middleware/AttachmentForScreenReader/createCoreMiddleware';
-import createDefaultAvatarMiddleware from './Middleware/Avatar/createCoreMiddleware';
+import createDefaultAvatarMiddleware from './Middleware/Avatar/createDefaultAvatarPolymiddleware';
 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 ActivityTreeComposer from './providers/ActivityTree/ActivityTreeComposer';
+import { ActivityLogicalGroupingComposer } from './providers/ActivityLogicalGrouping';
+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 CSSCustomPropertiesContainer from './Styles/CSSCustomPropertiesContainer';
+import ComponentStylesheet from './stylesheet/ComponentStylesheet';
 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 node_env = process.env.node_env || process.env.NODE_ENV;
-
-const emotionPool = {};
+const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions, useTrackException } = hooks;
 
 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;
+  readonly nonce: string | undefined;
+  readonly storeDebugAPI?: StoreDebugAPI | 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, nonce, storeDebugAPI }: ComposerCoreUIProps) => {
+  const [{ internalLiveRegionFadeAfter }] = useStyleOptions();
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const rootRef = useRef<HTMLDivElement>(null);
+  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');
+
+        nativeError.cause = errorEvent;
+
+        trackException(nativeError, false);
+        console.error(nativeError);
+      }
+    },
+    [trackException]
+  );
+
+  useEffect(() => {
+    const { current } = rootRef;
 
-const ComposerCoreUI = memo(({ children }: ComposerCoreUIProps) => {
-  const [{ cssCustomProperties }] = useStyleSet();
+    if (current) {
+      current['webChat'] = storeDebugAPI;
 
-  const dictationOnError = useCallback(err => {
-    console.error(err);
-  }, []);
+      return () => delete current['webChat'];
+    }
+
+    return () => {
+      // Intentionally left blank.
+    };
+  }, [storeDebugAPI]);
 
   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>
+    <CSSCustomPropertiesContainer
+      className={classNames('webchat', 'webchat__css-custom-properties', rootClassName)}
+      nonce={nonce}
+      ref={rootRef}
+    >
+      <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>
+                  <ActivityLogicalGroupingComposer>{children}</ActivityLogicalGroupingComposer>
+                  <Dictation onError={dictationOnError} />
+                </SendBoxComposer>
+              </ModalDialogComposer>
+            </LiveRegionTwinComposer>
+          </ScrollRelativeTranscriptScope>
+        </FocusSendBoxScope>
+      </CustomElementsComposer>
+    </CSSCustomPropertiesContainer>
   );
 });
 
@@ -89,13 +159,16 @@ ComposerCoreUI.displayName = 'ComposerCoreUI';
 
 type ComposerCoreProps = Readonly<{
   children?: ReactNode;
+  decoratorMiddleware?: readonly DecoratorMiddleware[] | undefined;
   extraStyleSet?: any;
+  htmlContentTransformMiddleware?: readonly HTMLContentTransformMiddleware[] | undefined;
   nonce?: string;
   renderMarkdown?: (
     markdown: string,
     newLineOptions: { markdownRespectCRLF: boolean },
     linkOptions: { externalLinkAlt: string }
   ) => string;
+  storeDebugAPI?: StoreDebugAPI | undefined;
   styleSet?: any;
   suggestedActionsAccessKey?: boolean | string;
   webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
@@ -106,6 +179,7 @@ const ComposerCore = ({
   extraStyleSet,
   nonce,
   renderMarkdown,
+  storeDebugAPI,
   styleSet,
   suggestedActionsAccessKey,
   webSpeechPonyfillFactory
@@ -131,17 +205,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(
     () =>
@@ -186,11 +250,17 @@ const ComposerCore = ({
 
   const getActivityByKey = useGetActivityByKey();
 
+  // This is expected.
+  // The mutation is for preventing sending duplicates to the registered callback observers.
+  // eslint-disable-next-line react-hooks/immutability
   const dispatchTranscriptFocusByActivityKey = useMemo(() => {
-    let prevActivityKey: string | Symbol | undefined = Symbol();
+    let prevActivityKey: string | symbol | undefined = Symbol();
 
     return activityKey => {
       if (activityKey !== prevActivityKey) {
+        // This is expected.
+        // The mutation is for preventing sending duplicates to the registered callback observers.
+        // eslint-disable-next-line react-hooks/immutability
         prevActivityKey = activityKey;
 
         const event = { activity: getActivityByKey(activityKey) };
@@ -230,7 +300,6 @@ const ComposerCore = ({
       scrollToEndCallbacksRef,
       setDictateAbortable,
       styleSet: patchedStyleSet,
-      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     }),
@@ -250,7 +319,6 @@ const ComposerCore = ({
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,
-      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     ]
@@ -259,7 +327,9 @@ const ComposerCore = ({
   return (
     <SayComposer ponyfill={webSpeechPonyfill}>
       <WebChatUIContext.Provider value={context}>
-        <ComposerCoreUI>{children}</ComposerCoreUI>
+        <ComposerCoreUI nonce={nonce} storeDebugAPI={storeDebugAPI}>
+          {children}
+        </ComposerCoreUI>
       </WebChatUIContext.Provider>
     </SayComposer>
   );
@@ -293,7 +363,10 @@ const Composer = ({
   avatarMiddleware,
   cardActionMiddleware,
   children,
+  decoratorMiddleware,
   extraStyleSet,
+  htmlContentTransformMiddleware,
+  polymiddleware,
   renderMarkdown,
   scrollToEndButtonMiddleware,
   sendBoxMiddleware: sendBoxMiddlewareFromProps,
@@ -309,102 +382,119 @@ const Composer = ({
   const { nonce, onTelemetry } = composerProps;
   const theme = useTheme();
 
-  const patchedActivityMiddleware = useMemo(
-    () => [...singleToArray(activityMiddleware), ...theme.activityMiddleware, ...createDefaultActivityMiddleware()],
+  const patchedActivityMiddleware = useMemoIterable<readonly LegacyActivityMiddleware[]>(
+    () => Object.freeze([...singleToArray(activityMiddleware), ...theme.activityMiddleware]),
     [activityMiddleware, theme.activityMiddleware]
   );
 
-  const patchedActivityStatusMiddleware = useMemo(
-    () => [
-      ...singleToArray(activityStatusMiddleware),
-      ...theme.activityStatusMiddleware,
-      ...createDefaultActivityStatusMiddleware()
-    ],
+  const patchedActivityStatusMiddleware = useMemoIterable<readonly ActivityStatusMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(activityStatusMiddleware),
+        ...theme.activityStatusMiddleware,
+        ...createDefaultActivityStatusMiddleware()
+      ]),
     [activityStatusMiddleware, theme.activityStatusMiddleware]
   );
 
-  const patchedAttachmentForScreenReaderMiddleware = useMemo(
-    () => [
-      ...singleToArray(attachmentForScreenReaderMiddleware),
-      ...theme.attachmentForScreenReaderMiddleware,
-      ...createDefaultAttachmentForScreenReaderMiddleware()
-    ],
+  const patchedAttachmentForScreenReaderMiddleware = useMemoIterable<readonly AttachmentForScreenReaderMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(attachmentForScreenReaderMiddleware),
+        ...theme.attachmentForScreenReaderMiddleware,
+        ...createDefaultAttachmentForScreenReaderMiddleware()
+      ]),
     [attachmentForScreenReaderMiddleware, theme.attachmentForScreenReaderMiddleware]
   );
 
-  const patchedAttachmentMiddleware = useMemo(
-    () => [
-      ...singleToArray(attachmentMiddleware),
-      ...theme.attachmentMiddleware,
-      ...createDefaultAttachmentMiddleware()
-    ],
+  const patchedAttachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(attachmentMiddleware),
+        ...theme.attachmentMiddleware,
+        ...createDefaultAttachmentMiddleware()
+      ]),
     [attachmentMiddleware, theme.attachmentMiddleware]
   );
 
-  const patchedAvatarMiddleware = useMemo(
-    () => [...singleToArray(avatarMiddleware), ...theme.avatarMiddleware, ...createDefaultAvatarMiddleware()],
+  const patchedAvatarMiddleware = useMemoIterable<readonly AvatarMiddleware[]>(
+    () => Object.freeze([...singleToArray(avatarMiddleware), ...theme.avatarMiddleware]),
     [avatarMiddleware, theme.avatarMiddleware]
   );
 
-  const patchedCardActionMiddleware = useMemo(
-    () => [
-      ...singleToArray(cardActionMiddleware),
-      ...theme.cardActionMiddleware,
-      ...createDefaultCardActionMiddleware()
-    ],
+  const patchedCardActionMiddleware = useMemoIterable<readonly CardActionMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(cardActionMiddleware),
+        ...theme.cardActionMiddleware,
+        ...createDefaultCardActionMiddleware()
+      ]),
     [cardActionMiddleware, theme.cardActionMiddleware]
   );
 
-  const patchedToastMiddleware = useMemo(
-    () => [...singleToArray(toastMiddleware), ...theme.toastMiddleware, ...createDefaultToastMiddleware()],
-    [toastMiddleware, theme.toastMiddleware]
-  );
+  const defaultAvatarPolymiddleware = useMemo(() => createDefaultAvatarMiddleware(styleOptions), [styleOptions]);
 
-  const patchedTypingIndicatorMiddleware = useMemo(
-    () => [
-      ...singleToArray(typingIndicatorMiddleware),
-      ...theme.typingIndicatorMiddleware,
-      ...createDefaultTypingIndicatorMiddleware()
-    ],
-    [typingIndicatorMiddleware, theme.typingIndicatorMiddleware]
+  const patchedPolymiddleware = useMemoIterable<readonly Polymiddleware[]>(
+    () =>
+      Object.freeze([
+        ...(polymiddleware || []),
+        ...theme.polymiddleware,
+        // Polymiddleware has lower priority than legacy middleware.
+        // Later, we should move default middleware to a "default theme."
+        defaultActivityPolymiddleware,
+        defaultAvatarPolymiddleware
+      ]),
+    [defaultAvatarPolymiddleware, polymiddleware, theme.polymiddleware]
   );
 
-  const defaultScrollToEndButtonMiddleware = useMemo(() => createDefaultScrollToEndButtonMiddleware(), []);
+  const patchedToastMiddleware = useMemoIterable<readonly ToastMiddleware[]>(
+    () =>
+      Object.freeze([...singleToArray(toastMiddleware), ...theme.toastMiddleware, ...createDefaultToastMiddleware()]),
+    [toastMiddleware, theme.toastMiddleware]
+  );
 
-  const patchedScrollToEndButtonMiddleware = useMemo(
-    () => [
-      ...singleToArray(scrollToEndButtonMiddleware),
-      ...theme.scrollToEndButtonMiddleware,
-      ...defaultScrollToEndButtonMiddleware
-    ],
-    [defaultScrollToEndButtonMiddleware, scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]
+  const patchedTypingIndicatorMiddleware = useMemoIterable<readonly TypingIndicatorMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(typingIndicatorMiddleware),
+        ...theme.typingIndicatorMiddleware,
+        ...createDefaultTypingIndicatorMiddleware()
+      ]),
+    [typingIndicatorMiddleware, theme.typingIndicatorMiddleware]
   );
 
-  const patchedStyleOptions = useMemo(
-    () => ({ ...theme.styleOptions, ...styleOptions }),
-    [styleOptions, theme.styleOptions]
+  const patchedScrollToEndButtonMiddleware = useMemoIterable<readonly ScrollToEndButtonMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(scrollToEndButtonMiddleware),
+        ...theme.scrollToEndButtonMiddleware,
+        ...createDefaultScrollToEndButtonMiddleware()
+      ]),
+    [scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]
   );
 
-  const sendBoxMiddleware = useMemo<readonly SendBoxMiddleware[]>(
+  const sendBoxMiddleware = useMemoIterable<readonly SendBoxMiddleware[]>(
     () =>
       Object.freeze([
-        ...initSendBoxMiddleware(sendBoxMiddlewareFromProps),
-        ...initSendBoxMiddleware(theme.sendBoxMiddleware),
+        ...extractSendBoxMiddleware(sendBoxMiddlewareFromProps),
+        ...extractSendBoxMiddleware(theme.sendBoxMiddleware),
         ...createDefaultSendBoxMiddleware()
       ]),
     [sendBoxMiddlewareFromProps, theme.sendBoxMiddleware]
   );
 
-  const sendBoxToolbarMiddleware = useMemo<readonly SendBoxToolbarMiddleware[]>(
+  const sendBoxToolbarMiddleware = useMemoIterable<readonly SendBoxToolbarMiddleware[]>(
     () =>
       Object.freeze([
-        ...initSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps),
-        ...initSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware),
+        ...extractSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps),
+        ...extractSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware),
         ...createDefaultSendBoxToolbarMiddleware()
       ]),
     [sendBoxToolbarMiddlewareFromProps, theme.sendBoxToolbarMiddleware]
   );
 
+  const storeDebugAPI = useMemo(() => StoreDebugAPIRegistry.get(composerProps.store), [composerProps.store]);
+
   return (
     <APIComposer
       activityMiddleware={patchedActivityMiddleware}
@@ -414,30 +504,39 @@ const Composer = ({
       avatarMiddleware={patchedAvatarMiddleware}
       cardActionMiddleware={patchedCardActionMiddleware}
       downscaleImageToDataURL={downscaleImageToDataURL}
-      // Under dev server of create-react-app, "NODE_ENV" will be set to "development".
-      internalErrorBoxClass={node_env === 'development' ? ErrorBox : undefined}
       nonce={nonce}
+      polymiddleware={patchedPolymiddleware}
       scrollToEndButtonMiddleware={patchedScrollToEndButtonMiddleware}
       sendBoxMiddleware={sendBoxMiddleware}
       sendBoxToolbarMiddleware={sendBoxToolbarMiddleware}
-      styleOptions={patchedStyleOptions}
+      styleOptions={styleOptions}
       toastMiddleware={patchedToastMiddleware}
       typingIndicatorMiddleware={patchedTypingIndicatorMiddleware}
       {...composerProps}
     >
-      <ActivityTreeComposer>
-        <ComposerCore
-          extraStyleSet={extraStyleSet}
-          nonce={nonce}
-          renderMarkdown={renderMarkdown}
-          styleSet={styleSet}
-          suggestedActionsAccessKey={suggestedActionsAccessKey}
-          webSpeechPonyfillFactory={webSpeechPonyfillFactory}
-        >
-          {children}
-          {onTelemetry && <UITracker />}
-        </ComposerCore>
-      </ActivityTreeComposer>
+      <ComponentStylesheet nonce={nonce} />
+      <StyleToEmotionObjectComposer nonce={nonce}>
+        <HTMLContentTransformComposer middleware={htmlContentTransformMiddleware}>
+          <ReducedMotionComposer>
+            <BuiltInDecorator>
+              <DecoratorComposer middleware={decoratorMiddleware}>
+                <ComposerCore
+                  extraStyleSet={extraStyleSet}
+                  nonce={nonce}
+                  renderMarkdown={renderMarkdown}
+                  storeDebugAPI={storeDebugAPI}
+                  styleSet={styleSet}
+                  suggestedActionsAccessKey={suggestedActionsAccessKey}
+                  webSpeechPonyfillFactory={webSpeechPonyfillFactory}
+                >
+                  {children}
+                  {onTelemetry && <UITracker />}
+                </ComposerCore>
+              </DecoratorComposer>
+            </BuiltInDecorator>
+          </ReducedMotionComposer>
+        </HTMLContentTransformComposer>
+      </StyleToEmotionObjectComposer>
     </APIComposer>
   );
 };
@@ -455,5 +554,4 @@ Composer.propTypes = {
 };
 
 export default Composer;
-
 export type { ComposerProps };

package/src/ConnectivityStatus/Connecting.tsx

@@ -0,0 +1,77 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import classNames from 'classnames';
+import React, { Fragment, memo, useState } from 'react';
+import { boolean, object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import useForceRender from '../hooks/internal/useForceRender';
+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 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 [
+    { connectivityNotification: connectivityNotificationStyleSet, warningNotification: warningNotificationStyleSet }
+  ] = useStyleSet();
+  const [direction] = useDirection();
+  const [initialRenderAt] = useState(() => Date.now());
+  const forceRender = useForceRender();
+  const localize = useLocalizer();
+
+  const initialConnectionText = localize('CONNECTIVITY_STATUS_ALT_CONNECTING');
+  const interruptedConnectionText = localize('CONNECTIVITY_STATUS_ALT_RECONNECTING');
+  const slowConnectionText = localize('CONNECTIVITY_STATUS_ALT_SLOW_CONNECTION');
+
+  useTimer(initialRenderAt + slowConnectionAfter, forceRender);
+
+  const now = Date.now();
+  const slow = now >= initialRenderAt + slowConnectionAfter;
+
+  return slow ? (
+    <Fragment>
+      <ScreenReaderText text={localize('CONNECTIVITY_STATUS_ALT', slowConnectionText)} />
+      <div
+        aria-hidden={true}
+        className={classNames('webchat__connectivityStatus', warningNotificationStyleSet + '')}
+        dir={direction}
+      >
+        <WarningNotificationIcon />
+        {slowConnectionText}
+      </div>
+    </Fragment>
+  ) : (
+    <Fragment>
+      <ScreenReaderText
+        text={localize('CONNECTIVITY_STATUS_ALT', reconnect ? interruptedConnectionText : initialConnectionText)}
+      />
+      <div
+        aria-hidden={true}
+        className={classNames('webchat__connectivityStatus', connectivityNotificationStyleSet + '')}
+        dir={direction}
+      >
+        <SpinnerAnimation />
+        {reconnect ? interruptedConnectionText : initialConnectionText}
+      </div>
+    </Fragment>
+  );
+}
+
+export default memo(ConnectivityStatusConnecting);
+export { connectivityStatusConnectingPropsSchema, type ConnectivityStatusConnectingProps };