botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/BasicWebChat.tsx

@@ -1,18 +1,17 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2] }] */
 /* eslint react/no-unsafe: off */
 
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { SendBoxMiddlewareProxy, hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo, useRef } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
 import BasicConnectivityStatus from './BasicConnectivityStatus';
 import BasicToaster from './BasicToaster';
 import BasicTranscript from './BasicTranscript';
-import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
-import useStyleSet from './hooks/useStyleSet';
 import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
+import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import useStyleSet from './hooks/useStyleSet';
 
 const { useStyleOptions } = hooks;
 
@@ -34,25 +33,18 @@ const TOASTER_STYLE = {
 };
 
 const TRANSCRIPT_STYLE = {
-  '.webchat__basic-transcript': {
-    flex: 1
-  }
+  flex: 1
 };
 
-const basicWebChatPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    role: optional(string())
-  }),
-  readonly()
-);
-
-type BasicWebChatProps = InferInput<typeof basicWebChatPropsSchema>;
+// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
+const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
 
-function BasicWebChat(props: BasicWebChatProps) {
-  const { className, role } = validateProps(basicWebChatPropsSchema, props, 'strict');
+type BasicWebChatProps = {
+  className?: string;
+  role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
+};
 
-  const rootRef = useRef<HTMLDivElement>(null);
+const BasicWebChat: FC<BasicWebChatProps> = ({ className, role }) => {
   const [{ root: rootStyleSet }] = useStyleSet();
   const [options] = useStyleOptions();
   const styleToEmotionObject = useStyleToEmotionObject();
@@ -63,19 +55,33 @@ function BasicWebChat(props: BasicWebChatProps) {
   const toasterClassName = styleToEmotionObject(TOASTER_STYLE) + '';
   const transcriptClassName = styleToEmotionObject(TRANSCRIPT_STYLE) + '';
 
+  // Fallback to "complementary" if specified is not a valid landmark role.
+  if (!ARIA_LANDMARK_ROLES.includes(role)) {
+    role = 'complementary';
+  }
+
   return (
-    <AccessKeySinkSurface
-      className={classNames('webchat__surface', rootClassName, rootStyleSet + '', className)}
-      ref={rootRef}
-      role={role}
-    >
+    <AccessKeySinkSurface className={classNames(rootClassName, rootStyleSet + '', (className || '') + '')} role={role}>
       {!options.hideToaster && <BasicToaster className={toasterClassName} />}
       <BasicTranscript className={transcriptClassName} />
       <BasicConnectivityStatus className={connectivityStatusClassName} />
       <SendBoxMiddlewareProxy className={sendBoxClassName} request={undefined} />
     </AccessKeySinkSurface>
   );
-}
+};
+
+BasicWebChat.defaultProps = {
+  className: '',
+  role: 'complementary'
+};
+
+BasicWebChat.propTypes = {
+  className: PropTypes.string,
+  // Ignoring deficiencies with TypeScript/PropTypes inference.
+  // @ts-ignore
+  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES)
+};
+
+export default BasicWebChat;
 
-export default memo(BasicWebChat);
-export { basicWebChatPropsSchema, type BasicWebChatProps };
+export type { BasicWebChatProps };

package/src/Composer.tsx

@@ -1,157 +1,87 @@
-/* eslint-disable react/require-default-props */
-
-import { singleToArray } from '@msinternal/botframework-webchat-base/utils';
-import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
+import createEmotion from '@emotion/css/create-instance';
+import type {
+  ComposerProps as APIComposerProps,
+  SendBoxMiddleware,
+  SendBoxToolbarMiddleware
+} from 'botframework-webchat-api';
 import {
   Composer as APIComposer,
-  AttachmentForScreenReaderMiddleware,
-  extractSendBoxMiddleware,
-  extractSendBoxToolbarMiddleware,
   hooks,
-  WebSpeechPonyfillFactory,
-  type ActivityStatusMiddleware,
-  type ComposerProps as APIComposerProps,
-  type AttachmentMiddleware,
-  type AvatarMiddleware,
-  type CardActionMiddleware,
-  type ScrollToEndButtonMiddleware,
-  type SendBoxMiddleware,
-  type SendBoxToolbarMiddleware,
-  type ToastMiddleware,
-  type TypingIndicatorMiddleware
+  initSendBoxMiddleware,
+  initSendBoxToolbarMiddleware,
+  WebSpeechPonyfillFactory
 } from 'botframework-webchat-api';
-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 { DecoratorComposer } from 'botframework-webchat-api/decorator';
+import { singleToArray } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import MarkdownIt from 'markdown-it';
 import PropTypes from 'prop-types';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import React, { memo, useCallback, 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 { FocusSendBoxScope } from './hooks/sendBoxFocus';
-import { ScrollRelativeTranscriptScope } from './hooks/transcriptScrollRelative';
-import defaultActivityPolymiddleware from './Middleware/Activity/defaultActivityPolymiddleware';
+import useStyleSet from './hooks/useStyleSet';
+import createDefaultActivityMiddleware from './Middleware/Activity/createCoreMiddleware';
 import createDefaultActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';
 import createDefaultAttachmentForScreenReaderMiddleware from './Middleware/AttachmentForScreenReader/createCoreMiddleware';
-import createDefaultAvatarMiddleware from './Middleware/Avatar/createDefaultAvatarPolymiddleware';
+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 { 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 ActivityTreeComposer from './providers/ActivityTree/ActivityTreeComposer';
 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, useTrackException } = hooks;
+const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions } = 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 | 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;
+type ComposerCoreUIProps = Readonly<{ children?: ReactNode }>;
 
-    if (current) {
-      current['webChat'] = storeDebugAPI;
+const ComposerCoreUI = memo(({ children }: ComposerCoreUIProps) => {
+  const [{ cssCustomProperties }] = useStyleSet();
 
-      return () => delete current['webChat'];
-    }
-
-    return () => {
-      // Intentionally left blank.
-    };
-  }, [storeDebugAPI]);
+  const dictationOnError = useCallback(err => {
+    console.error(err);
+  }, []);
 
   return (
-    <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>
+    <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>
   );
 });
 
@@ -159,16 +89,13 @@ 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;
@@ -179,7 +106,6 @@ const ComposerCore = ({
   extraStyleSet,
   nonce,
   renderMarkdown,
-  storeDebugAPI,
   styleSet,
   suggestedActionsAccessKey,
   webSpeechPonyfillFactory
@@ -205,7 +131,17 @@ const ComposerCore = ({
     [internalMarkdownIt]
   );
 
-  const styleToEmotionObject = useStyleToEmotionObject();
+  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 patchedStyleSet = useMemo(
     () =>
@@ -250,17 +186,11 @@ 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) };
@@ -300,6 +230,7 @@ const ComposerCore = ({
       scrollToEndCallbacksRef,
       setDictateAbortable,
       styleSet: patchedStyleSet,
+      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     }),
@@ -319,6 +250,7 @@ const ComposerCore = ({
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,
+      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     ]
@@ -327,9 +259,7 @@ const ComposerCore = ({
   return (
     <SayComposer ponyfill={webSpeechPonyfill}>
       <WebChatUIContext.Provider value={context}>
-        <ComposerCoreUI nonce={nonce} storeDebugAPI={storeDebugAPI}>
-          {children}
-        </ComposerCoreUI>
+        <ComposerCoreUI>{children}</ComposerCoreUI>
       </WebChatUIContext.Provider>
     </SayComposer>
   );
@@ -363,10 +293,7 @@ const Composer = ({
   avatarMiddleware,
   cardActionMiddleware,
   children,
-  decoratorMiddleware,
   extraStyleSet,
-  htmlContentTransformMiddleware,
-  polymiddleware,
   renderMarkdown,
   scrollToEndButtonMiddleware,
   sendBoxMiddleware: sendBoxMiddlewareFromProps,
@@ -382,119 +309,102 @@ const Composer = ({
   const { nonce, onTelemetry } = composerProps;
   const theme = useTheme();
 
-  const patchedActivityMiddleware = useMemoIterable<readonly LegacyActivityMiddleware[]>(
-    () => Object.freeze([...singleToArray(activityMiddleware), ...theme.activityMiddleware]),
+  const patchedActivityMiddleware = useMemo(
+    () => [...singleToArray(activityMiddleware), ...theme.activityMiddleware, ...createDefaultActivityMiddleware()],
     [activityMiddleware, theme.activityMiddleware]
   );
 
-  const patchedActivityStatusMiddleware = useMemoIterable<readonly ActivityStatusMiddleware[]>(
-    () =>
-      Object.freeze([
-        ...singleToArray(activityStatusMiddleware),
-        ...theme.activityStatusMiddleware,
-        ...createDefaultActivityStatusMiddleware()
-      ]),
+  const patchedActivityStatusMiddleware = useMemo(
+    () => [
+      ...singleToArray(activityStatusMiddleware),
+      ...theme.activityStatusMiddleware,
+      ...createDefaultActivityStatusMiddleware()
+    ],
     [activityStatusMiddleware, theme.activityStatusMiddleware]
   );
 
-  const patchedAttachmentForScreenReaderMiddleware = useMemoIterable<readonly AttachmentForScreenReaderMiddleware[]>(
-    () =>
-      Object.freeze([
-        ...singleToArray(attachmentForScreenReaderMiddleware),
-        ...theme.attachmentForScreenReaderMiddleware,
-        ...createDefaultAttachmentForScreenReaderMiddleware()
-      ]),
+  const patchedAttachmentForScreenReaderMiddleware = useMemo(
+    () => [
+      ...singleToArray(attachmentForScreenReaderMiddleware),
+      ...theme.attachmentForScreenReaderMiddleware,
+      ...createDefaultAttachmentForScreenReaderMiddleware()
+    ],
     [attachmentForScreenReaderMiddleware, theme.attachmentForScreenReaderMiddleware]
   );
 
-  const patchedAttachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[]>(
-    () =>
-      Object.freeze([
-        ...singleToArray(attachmentMiddleware),
-        ...theme.attachmentMiddleware,
-        ...createDefaultAttachmentMiddleware()
-      ]),
+  const patchedAttachmentMiddleware = useMemo(
+    () => [
+      ...singleToArray(attachmentMiddleware),
+      ...theme.attachmentMiddleware,
+      ...createDefaultAttachmentMiddleware()
+    ],
     [attachmentMiddleware, theme.attachmentMiddleware]
   );
 
-  const patchedAvatarMiddleware = useMemoIterable<readonly AvatarMiddleware[]>(
-    () => Object.freeze([...singleToArray(avatarMiddleware), ...theme.avatarMiddleware]),
+  const patchedAvatarMiddleware = useMemo(
+    () => [...singleToArray(avatarMiddleware), ...theme.avatarMiddleware, ...createDefaultAvatarMiddleware()],
     [avatarMiddleware, theme.avatarMiddleware]
   );
 
-  const patchedCardActionMiddleware = useMemoIterable<readonly CardActionMiddleware[]>(
-    () =>
-      Object.freeze([
-        ...singleToArray(cardActionMiddleware),
-        ...theme.cardActionMiddleware,
-        ...createDefaultCardActionMiddleware()
-      ]),
+  const patchedCardActionMiddleware = useMemo(
+    () => [
+      ...singleToArray(cardActionMiddleware),
+      ...theme.cardActionMiddleware,
+      ...createDefaultCardActionMiddleware()
+    ],
     [cardActionMiddleware, theme.cardActionMiddleware]
   );
 
-  const defaultAvatarPolymiddleware = useMemo(() => createDefaultAvatarMiddleware(styleOptions), [styleOptions]);
-
-  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 patchedToastMiddleware = useMemoIterable<readonly ToastMiddleware[]>(
-    () =>
-      Object.freeze([...singleToArray(toastMiddleware), ...theme.toastMiddleware, ...createDefaultToastMiddleware()]),
+  const patchedToastMiddleware = useMemo(
+    () => [...singleToArray(toastMiddleware), ...theme.toastMiddleware, ...createDefaultToastMiddleware()],
     [toastMiddleware, theme.toastMiddleware]
   );
 
-  const patchedTypingIndicatorMiddleware = useMemoIterable<readonly TypingIndicatorMiddleware[]>(
-    () =>
-      Object.freeze([
-        ...singleToArray(typingIndicatorMiddleware),
-        ...theme.typingIndicatorMiddleware,
-        ...createDefaultTypingIndicatorMiddleware()
-      ]),
+  const patchedTypingIndicatorMiddleware = useMemo(
+    () => [
+      ...singleToArray(typingIndicatorMiddleware),
+      ...theme.typingIndicatorMiddleware,
+      ...createDefaultTypingIndicatorMiddleware()
+    ],
     [typingIndicatorMiddleware, theme.typingIndicatorMiddleware]
   );
 
-  const patchedScrollToEndButtonMiddleware = useMemoIterable<readonly ScrollToEndButtonMiddleware[]>(
-    () =>
-      Object.freeze([
-        ...singleToArray(scrollToEndButtonMiddleware),
-        ...theme.scrollToEndButtonMiddleware,
-        ...createDefaultScrollToEndButtonMiddleware()
-      ]),
-    [scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]
+  const defaultScrollToEndButtonMiddleware = useMemo(() => createDefaultScrollToEndButtonMiddleware(), []);
+
+  const patchedScrollToEndButtonMiddleware = useMemo(
+    () => [
+      ...singleToArray(scrollToEndButtonMiddleware),
+      ...theme.scrollToEndButtonMiddleware,
+      ...defaultScrollToEndButtonMiddleware
+    ],
+    [defaultScrollToEndButtonMiddleware, scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]
+  );
+
+  const patchedStyleOptions = useMemo(
+    () => ({ ...theme.styleOptions, ...styleOptions }),
+    [styleOptions, theme.styleOptions]
   );
 
-  const sendBoxMiddleware = useMemoIterable<readonly SendBoxMiddleware[]>(
+  const sendBoxMiddleware = useMemo<readonly SendBoxMiddleware[]>(
     () =>
       Object.freeze([
-        ...extractSendBoxMiddleware(sendBoxMiddlewareFromProps),
-        ...extractSendBoxMiddleware(theme.sendBoxMiddleware),
+        ...initSendBoxMiddleware(sendBoxMiddlewareFromProps),
+        ...initSendBoxMiddleware(theme.sendBoxMiddleware),
         ...createDefaultSendBoxMiddleware()
       ]),
     [sendBoxMiddlewareFromProps, theme.sendBoxMiddleware]
   );
 
-  const sendBoxToolbarMiddleware = useMemoIterable<readonly SendBoxToolbarMiddleware[]>(
+  const sendBoxToolbarMiddleware = useMemo<readonly SendBoxToolbarMiddleware[]>(
     () =>
       Object.freeze([
-        ...extractSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps),
-        ...extractSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware),
+        ...initSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps),
+        ...initSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware),
         ...createDefaultSendBoxToolbarMiddleware()
       ]),
     [sendBoxToolbarMiddlewareFromProps, theme.sendBoxToolbarMiddleware]
   );
 
-  const storeDebugAPI = useMemo(() => StoreDebugAPIRegistry.get(composerProps.store), [composerProps.store]);
-
   return (
     <APIComposer
       activityMiddleware={patchedActivityMiddleware}
@@ -504,39 +414,30 @@ 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={styleOptions}
+      styleOptions={patchedStyleOptions}
       toastMiddleware={patchedToastMiddleware}
       typingIndicatorMiddleware={patchedTypingIndicatorMiddleware}
       {...composerProps}
     >
-      <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>
+      <ActivityTreeComposer>
+        <ComposerCore
+          extraStyleSet={extraStyleSet}
+          nonce={nonce}
+          renderMarkdown={renderMarkdown}
+          styleSet={styleSet}
+          suggestedActionsAccessKey={suggestedActionsAccessKey}
+          webSpeechPonyfillFactory={webSpeechPonyfillFactory}
+        >
+          {children}
+          {onTelemetry && <UITracker />}
+        </ComposerCore>
+      </ActivityTreeComposer>
     </APIComposer>
   );
 };
@@ -554,4 +455,5 @@ Composer.propTypes = {
 };
 
 export default Composer;
+
 export type { ComposerProps };