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

package/src/BasicWebChat.tsx

@@ -2,16 +2,17 @@
 /* eslint react/no-unsafe: off */
 
 import { SendBoxMiddlewareProxy, hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { fallback, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
 
 import BasicConnectivityStatus from './BasicConnectivityStatus';
 import BasicToaster from './BasicToaster';
 import BasicTranscript from './BasicTranscript';
-import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useStyleSet from './hooks/useStyleSet';
+import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
 
 const { useStyleOptions } = hooks;
 
@@ -33,18 +34,31 @@ const TOASTER_STYLE = {
 };
 
 const TRANSCRIPT_STYLE = {
-  flex: 1
+  '.webchat__basic-transcript': {
+    flex: 1
+  }
 };
 
-// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
-const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
+const basicWebChatPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    role: fallback(
+      optional(
+        // Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
+        union([literal('complementary'), literal('contentinfo'), literal('form'), literal('main'), literal('region')])
+      ),
+      // Fallback to "complementary" if specified is not a valid landmark role.
+      'complementary'
+    )
+  }),
+  readonly()
+);
+
+type BasicWebChatProps = InferInput<typeof basicWebChatPropsSchema>;
+
+function BasicWebChat(props: BasicWebChatProps) {
+  const { className, role } = validateProps(basicWebChatPropsSchema, props, 'strict');
 
-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();
@@ -55,33 +69,18 @@ const BasicWebChat: FC<BasicWebChatProps> = ({ className, role }) => {
   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(rootClassName, rootStyleSet + '', (className || '') + '')} role={role}>
+    <AccessKeySinkSurface
+      className={classNames('webchat__surface', 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 type { BasicWebChatProps };
+export default memo(BasicWebChat);
+export { basicWebChatPropsSchema, type BasicWebChatProps };

package/src/BuiltInDecorator.tsx

@@ -0,0 +1,17 @@
+import { LowPriorityDecoratorComposer } from 'botframework-webchat-api/internal';
+import React, { memo, type ReactNode } from 'react';
+
+import createDefaultActivityGroupingDecoratorMiddleware from './Middleware/ActivityGrouping/createDefaultActivityGroupingDecoratorMiddleware';
+
+const middleware = Object.freeze([...createDefaultActivityGroupingDecoratorMiddleware()] as const);
+
+type BuiltInDecoratorProps = Readonly<{
+  readonly children?: ReactNode | undefined;
+}>;
+
+function BuiltInDecorator({ children }: BuiltInDecoratorProps) {
+  return <LowPriorityDecoratorComposer middleware={middleware}>{children}</LowPriorityDecoratorComposer>;
+}
+
+export default memo(BuiltInDecorator);
+export { type BuiltInDecoratorProps };

package/src/ChatHistory/ChatHistoryBox.tsx

@@ -0,0 +1,28 @@
+import { validateProps } from 'botframework-webchat-api/internal';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { useStyleSet } from '../hooks';
+import reactNode from '../types/internal/reactNode';
+
+const chatHistoryBoxPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type ChatHistoryBoxProps = InferInput<typeof chatHistoryBoxPropsSchema>;
+
+function ChatHistoryBox(props: ChatHistoryBoxProps) {
+  const { children, className } = validateProps(chatHistoryBoxPropsSchema, props);
+
+  const [{ chatHistoryBox }] = useStyleSet();
+
+  return <div className={classNames('webchat__chat-history-box', className, chatHistoryBox)}>{children}</div>;
+}
+
+export default memo(ChatHistoryBox);
+export { chatHistoryBoxPropsSchema, type ChatHistoryBoxProps };

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,
@@ -7,10 +6,11 @@ import type {
 import {
   Composer as APIComposer,
   hooks,
-  rectifySendBoxMiddlewareProps,
-  rectifySendBoxToolbarMiddlewareProps,
+  initSendBoxMiddleware,
+  initSendBoxToolbarMiddleware,
   WebSpeechPonyfillFactory
 } from 'botframework-webchat-api';
+import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
 import { singleToArray } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import MarkdownIt from 'markdown-it';
@@ -19,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';
@@ -36,48 +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)}>
-      <ModalDialogComposer>
-        {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}
-        <SendBoxComposer>
-          {children}
-          <Dictation onError={dictationOnError} />
-        </SendBoxComposer>
-      </ModalDialogComposer>
+    <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>
   );
 });
@@ -86,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,
@@ -94,6 +138,7 @@ type ComposerCoreProps = Readonly<{
     linkOptions: { externalLinkAlt: string }
   ) => string;
   styleSet?: any;
+  styles?: readonly HTMLStyleElement[];
   suggestedActionsAccessKey?: boolean | string;
   webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
 }>;
@@ -103,6 +148,7 @@ const ComposerCore = ({
   extraStyleSet,
   nonce,
   renderMarkdown,
+  styles,
   styleSet,
   suggestedActionsAccessKey,
   webSpeechPonyfillFactory
@@ -115,10 +161,6 @@ const ComposerCore = ({
   const scrollToCallbacksRef = useRef([]);
   const scrollToEndCallbacksRef = useRef([]);
 
-  // Instead of having a `scrollUpCallbacksRef` and `scrollDownCallbacksRef`, they are combined into a single `scrollRelativeCallbacksRef`.
-  // The first argument tells whether it should go "up" or "down".
-  const scrollRelativeCallbacksRef = useRef([]);
-
   const internalRenderMarkdownInline = useMemo(
     () => markdown => {
       const tree = internalMarkdownIt.parseInline(markdown);
@@ -132,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(
     () =>
@@ -188,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) {
@@ -214,6 +246,8 @@ const ComposerCore = ({
     [transcriptFocusObserversRef, setNumTranscriptFocusObservers]
   );
 
+  useInjectStyles(styles, nonce);
+
   const context = useMemo<ContextOf<typeof WebChatUIContext>>(
     () => ({
       dictateAbortable,
@@ -227,12 +261,10 @@ const ComposerCore = ({
       observeScrollPosition,
       observeTranscriptFocus,
       renderMarkdown,
-      scrollRelativeCallbacksRef,
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,
       styleSet: patchedStyleSet,
-      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     }),
@@ -249,11 +281,9 @@ const ComposerCore = ({
       observeTranscriptFocus,
       patchedStyleSet,
       renderMarkdown,
-      scrollRelativeCallbacksRef,
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,
-      styleToEmotionObject,
       suggestedActionsAccessKey,
       webSpeechPonyfill
     ]
@@ -296,7 +326,9 @@ const Composer = ({
   avatarMiddleware,
   cardActionMiddleware,
   children,
+  decoratorMiddleware,
   extraStyleSet,
+  htmlContentTransformMiddleware,
   renderMarkdown,
   scrollToEndButtonMiddleware,
   sendBoxMiddleware: sendBoxMiddlewareFromProps,
@@ -391,8 +423,8 @@ const Composer = ({
   const sendBoxMiddleware = useMemo<readonly SendBoxMiddleware[]>(
     () =>
       Object.freeze([
-        ...rectifySendBoxMiddlewareProps(sendBoxMiddlewareFromProps),
-        ...rectifySendBoxMiddlewareProps(theme.sendBoxMiddleware),
+        ...initSendBoxMiddleware(sendBoxMiddlewareFromProps, undefined),
+        ...initSendBoxMiddleware(theme.sendBoxMiddleware, undefined),
         ...createDefaultSendBoxMiddleware()
       ]),
     [sendBoxMiddlewareFromProps, theme.sendBoxMiddleware]
@@ -401,8 +433,8 @@ const Composer = ({
   const sendBoxToolbarMiddleware = useMemo<readonly SendBoxToolbarMiddleware[]>(
     () =>
       Object.freeze([
-        ...rectifySendBoxToolbarMiddlewareProps(sendBoxToolbarMiddlewareFromProps),
-        ...rectifySendBoxToolbarMiddlewareProps(theme.sendBoxToolbarMiddleware),
+        ...initSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps, undefined),
+        ...initSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware, undefined),
         ...createDefaultSendBoxToolbarMiddleware()
       ]),
     [sendBoxToolbarMiddlewareFromProps, theme.sendBoxToolbarMiddleware]
@@ -418,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}
@@ -428,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>
   );
 };
@@ -458,5 +499,4 @@ Composer.propTypes = {
 };
 
 export default Composer;
-
 export type { ComposerProps };