botframework-webchat-api 4.18.1-main.20260416.88357ae → 4.18.1

package/src/hooks/Composer.tsx

@@ -1,12 +1,3 @@
-import { GraphProvider } from '@msinternal/botframework-webchat-api-graph';
-import { PolymiddlewareComposer, type Polymiddleware } from '@msinternal/botframework-webchat-api-middleware';
-import {
-  type LegacyActivityMiddleware,
-  type LegacyAttachmentMiddleware
-} from '@msinternal/botframework-webchat-api-middleware/legacy';
-import { singleToArray, type OneOrMany } from '@msinternal/botframework-webchat-base/utils';
-import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
-import { ReduxStoreComposer } from '@msinternal/botframework-webchat-redux-store';
 import {
   clearSuggestedActions,
   connect as createConnectAction,
@@ -29,15 +20,15 @@ import {
   setSendBoxAttachments,
   setSendTimeout,
   setSendTypingIndicator,
+  singleToArray,
   startDictate,
   startSpeakingActivity,
-  startVoiceRecording,
   stopDictate,
   stopSpeakingActivity,
-  stopVoiceRecording,
   submitSendBox,
   type DirectLineJSBotConnection,
   type GlobalScopePonyfill,
+  type OneOrMany,
   type WebChatActivity
 } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
@@ -45,34 +36,24 @@ import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNod
 import { Provider } from 'react-redux';
 import updateIn from 'simple-update-in';
 
-import type StyleOptions from '../StyleOptions';
-import errorBoxTelemetryPolymiddleware from '../errorBox/errorBoxTelemetryPolymiddleware';
-import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
+import StyleOptions from '../StyleOptions';
 import usePonyfill from '../hooks/usePonyfill';
-import createActivityPolymiddlewareFromLegacy from '../legacy/createActivityPolymiddlewareFromLegacy';
-import createAvatarPolymiddlewareFromLegacy from '../legacy/createAvatarPolymiddlewareFromLegacy';
 import getAllLocalizedStrings from '../localization/getAllLocalizedStrings';
-import { SendBoxMiddlewareProvider, type SendBoxMiddleware } from '../middleware/SendBoxMiddleware';
-import {
-  SendBoxToolbarMiddlewareProvider,
-  type SendBoxToolbarMiddleware
-} from '../middleware/SendBoxToolbarMiddleware';
+import normalizeStyleOptions from '../normalizeStyleOptions';
+import patchStyleOptionsFromDeprecatedProps from '../patchStyleOptionsFromDeprecatedProps';
 import ActivityAcknowledgementComposer from '../providers/ActivityAcknowledgement/ActivityAcknowledgementComposer';
 import ActivityKeyerComposer from '../providers/ActivityKeyer/ActivityKeyerComposer';
 import ActivityListenerComposer from '../providers/ActivityListener/ActivityListenerComposer';
 import ActivitySendStatusComposer from '../providers/ActivitySendStatus/ActivitySendStatusComposer';
 import ActivitySendStatusTelemetryComposer from '../providers/ActivitySendStatusTelemetry/ActivitySendStatusTelemetryComposer';
 import ActivityTypingComposer from '../providers/ActivityTyping/ActivityTypingComposer';
-import CapabilitiesComposer from '../providers/Capabilities/CapabilitiesComposer';
-import GroupActivitiesComposer from '../providers/GroupActivities/GroupActivitiesComposer';
 import PonyfillComposer from '../providers/Ponyfill/PonyfillComposer';
-import { SpeechToSpeechComposer } from '../providers/SpeechToSpeech/SpeechToSpeechComposer';
-import StyleOptionsComposer from '../providers/StyleOptions/StyleOptionsComposer';
+import ActivityMiddleware from '../types/ActivityMiddleware';
 import { type ActivityStatusMiddleware, type RenderActivityStatus } from '../types/ActivityStatusMiddleware';
 import AttachmentForScreenReaderMiddleware from '../types/AttachmentForScreenReaderMiddleware';
+import AttachmentMiddleware from '../types/AttachmentMiddleware';
 import AvatarMiddleware from '../types/AvatarMiddleware';
 import CardActionMiddleware from '../types/CardActionMiddleware';
-import { type ContextOf } from '../types/ContextOf';
 import GroupActivitiesMiddleware from '../types/GroupActivitiesMiddleware';
 import LocalizedStrings from '../types/LocalizedStrings';
 import PrecompiledGlobalizeType from '../types/PrecompiledGlobalize';
@@ -80,26 +61,30 @@ import ScrollToEndButtonMiddleware, { ScrollToEndButtonComponentFactory } from '
 import TelemetryMeasurementEvent, { TelemetryExceptionMeasurementEvent } from '../types/TelemetryMeasurementEvent';
 import ToastMiddleware from '../types/ToastMiddleware';
 import TypingIndicatorMiddleware from '../types/TypingIndicatorMiddleware';
+import { type ContextOf } from '../types/ContextOf';
 import createCustomEvent from '../utils/createCustomEvent';
 import isObject from '../utils/isObject';
 import mapMap from '../utils/mapMap';
 import normalizeLanguage from '../utils/normalizeLanguage';
+import { SendBoxMiddlewareProvider, type SendBoxMiddleware } from './internal/SendBoxMiddleware';
+import { SendBoxToolbarMiddlewareProvider, type SendBoxToolbarMiddleware } from './internal/SendBoxToolbarMiddleware';
 import Tracker from './internal/Tracker';
-import WebChatAPIContext, { type WebChatAPIContextType } from './internal/WebChatAPIContext';
+import { default as WebChatAPIContext } from './internal/WebChatAPIContext';
 import WebChatReduxContext, { useDispatch } from './internal/WebChatReduxContext';
 import defaultSelectVoice from './internal/defaultSelectVoice';
-import useVoiceHandlers from './internal/useVoiceHandlers';
-import activityFallbackPolymiddleware from './middleware/activityFallbackPolymiddleware';
 import applyMiddleware, {
   forLegacyRenderer as applyMiddlewareForLegacyRenderer,
   forRenderer as applyMiddlewareForRenderer
 } from './middleware/applyMiddleware';
 import createDefaultCardActionMiddleware from './middleware/createDefaultCardActionMiddleware';
+import createDefaultGroupActivitiesMiddleware from './middleware/createDefaultGroupActivitiesMiddleware';
 import useMarkAllAsAcknowledged from './useMarkAllAsAcknowledged';
-import useStyleOptions from './useStyleOptions';
 import ErrorBoundary from './utils/ErrorBoundary';
 import observableToPromise from './utils/observableToPromise';
-import { parseUIState } from './validation/uiState';
+
+// PrecompileGlobalize is a generated file and is not ES module. TypeScript don't work with UMD.
+// @ts-ignore
+import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
 
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
@@ -130,16 +115,14 @@ const EMPTY_ARRAY: readonly [] = Object.freeze([]);
 
 function createCardActionContext({
   cardActionMiddleware,
-  continuous,
   directLine,
   dispatch,
   markAllAsAcknowledged,
   ponyfill
 }: {
   cardActionMiddleware: readonly CardActionMiddleware[];
-  continuous: boolean;
   directLine: DirectLineJSBotConnection;
-  dispatch: (...args: unknown[]) => unknown;
+  dispatch: Function;
   markAllAsAcknowledged: () => void;
   ponyfill: GlobalScopePonyfill;
 }) {
@@ -153,11 +136,6 @@ function createCardActionContext({
     onCardAction: (cardAction, { target }: { target?: any } = {}) => {
       markAllAsAcknowledged();
 
-      // Stop speech recognition only if under interactive mode.
-      if (!continuous) {
-        dispatch(stopDictate());
-      }
-
       return runMiddleware({
         cardAction,
         getSignInUrl:
@@ -187,6 +165,26 @@ function createCardActionContext({
   };
 }
 
+function createGroupActivitiesContext({
+  groupActivitiesMiddleware,
+  groupTimestamp,
+  ponyfill
+}: {
+  groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
+  groupTimestamp: boolean | number;
+  ponyfill: GlobalScopePonyfill;
+}) {
+  const runMiddleware = applyMiddleware(
+    'group activities',
+    ...groupActivitiesMiddleware,
+    createDefaultGroupActivitiesMiddleware({ groupTimestamp, ponyfill })
+  );
+
+  return {
+    groupActivities: runMiddleware({})
+  };
+}
+
 function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStrings) {
   if (!overrideLocalizedStrings) {
     return localizedStrings;
@@ -213,24 +211,15 @@ function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStri
 // Ignoring it in TypeScript version should be safe, as we have `propTypes` version to protect us.
 
 type ComposerCoreProps = Readonly<{
-  /**
-   * @deprecated Use `polymiddleware` instead. The `activityMiddleware` prop is being deprecated, please use `polymiddleware` instead. This prop will be removed on or after 2027-08-21.
-   */
-  activityMiddleware?: OneOrMany<LegacyActivityMiddleware> | undefined;
-  activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware> | undefined;
-  attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware> | undefined;
-  attachmentMiddleware?: OneOrMany<LegacyAttachmentMiddleware> | undefined;
-  /**
-   * @deprecated Use `polymiddleware` instead. The `avatarMiddleware` prop is being deprecated, please use `polymiddleware` instead. This prop will be removed on or after 2028-03-16.
-   */
-  avatarMiddleware?: OneOrMany<AvatarMiddleware> | undefined;
-  cardActionMiddleware?: OneOrMany<CardActionMiddleware> | undefined;
-  children?: ReactNode | ((context: ContextOf<React.Context<WebChatAPIContextType>>) => ReactNode);
+  activityMiddleware?: OneOrMany<ActivityMiddleware>;
+  activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware>;
+  attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
+  attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
+  avatarMiddleware?: OneOrMany<AvatarMiddleware>;
+  cardActionMiddleware?: OneOrMany<CardActionMiddleware>;
+  children?: ReactNode | ((context: ContextOf<typeof WebChatAPIContext>) => ReactNode);
   dir?: string;
   directLine: DirectLineJSBotConnection;
-  /**
-   * @deprecated Please use `uiState="disabled"` instead. This feature will be removed on or after 2026-09-04.
-   */
   disabled?: boolean;
   downscaleImageToDataURL?: (
     blob: Blob,
@@ -240,9 +229,9 @@ type ComposerCoreProps = Readonly<{
     quality: number
   ) => Promise<URL>;
   grammars?: any;
-  groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware> | undefined;
+  groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware>;
+  internalErrorBoxClass?: React.Component | Function;
   locale?: string;
-  polymiddleware?: readonly Polymiddleware[] | undefined;
   onTelemetry?: (event: TelemetryMeasurementEvent) => void;
   overrideLocalizedStrings?: LocalizedStrings | ((strings: LocalizedStrings, language: string) => LocalizedStrings);
   renderMarkdown?: (
@@ -250,33 +239,24 @@ type ComposerCoreProps = Readonly<{
     newLineOptions: { markdownRespectCRLF: boolean },
     linkOptions: { externalLinkAlt: string }
   ) => string;
-  scrollToEndButtonMiddleware?: OneOrMany<ScrollToEndButtonMiddleware> | undefined;
+  scrollToEndButtonMiddleware?: OneOrMany<ScrollToEndButtonMiddleware>;
   selectVoice?: (voices: (typeof window.SpeechSynthesisVoice)[], activity: WebChatActivity) => void;
   sendBoxMiddleware?: readonly SendBoxMiddleware[] | undefined;
   sendBoxToolbarMiddleware?: readonly SendBoxToolbarMiddleware[] | undefined;
   sendTypingIndicator?: boolean;
-  toastMiddleware?: OneOrMany<ToastMiddleware> | undefined;
-  typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware> | undefined;
-  /**
-   * Sets the state of the UI.
-   *
-   * - `undefined` will render normally
-   * - `"blueprint"` will render as few UI elements as possible and should be non-functional
-   *   - Useful for loading scenarios
-   * - `"disabled"` will render most UI elements as non-functional
-   *   - Scrolling may continue to trigger read acknowledgements
-   */
-  uiState?: 'blueprint' | 'disabled' | undefined;
+  styleOptions?: StyleOptions;
+  toastMiddleware?: OneOrMany<ToastMiddleware>;
+  typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware>;
   userID?: string;
   username?: string;
 }>;
 
 const ComposerCore = ({
-  activityMiddleware: activityMiddlewareFromProps,
+  activityMiddleware,
   activityStatusMiddleware,
   attachmentForScreenReaderMiddleware,
   attachmentMiddleware,
-  avatarMiddleware: avatarMiddlewareFromProps,
+  avatarMiddleware,
   cardActionMiddleware,
   children,
   dir,
@@ -284,33 +264,33 @@ const ComposerCore = ({
   disabled,
   downscaleImageToDataURL,
   grammars,
-  groupActivitiesMiddleware: groupActivitiesMiddlewareFromProps,
+  groupActivitiesMiddleware,
+  internalErrorBoxClass,
   locale,
   onTelemetry,
   overrideLocalizedStrings,
-  polymiddleware: polymiddlewareFromProps,
   renderMarkdown,
   scrollToEndButtonMiddleware,
   selectVoice,
   sendBoxMiddleware,
   sendBoxToolbarMiddleware,
   sendTypingIndicator,
+  styleOptions,
   toastMiddleware,
   typingIndicatorMiddleware,
-  uiState,
   userID,
   username
 }: ComposerCoreProps) => {
   const [ponyfill] = usePonyfill();
-  const [styleOptions] = useStyleOptions();
   const dispatch = useDispatch();
   const telemetryDimensionsRef = useRef({});
-  const [voiceHandlers] = useVoiceHandlers();
 
   const patchedDir = useMemo(() => (dir === 'ltr' || dir === 'rtl' ? dir : 'auto'), [dir]);
   const patchedGrammars = useMemo(() => grammars || [], [grammars]);
-
-  uiState = parseUIState(uiState, disabled);
+  const patchedStyleOptions = useMemo(
+    () => normalizeStyleOptions(patchStyleOptionsFromDeprecatedProps(styleOptions)),
+    [styleOptions]
+  );
 
   useEffect(() => {
     dispatch(setLanguage(locale));
@@ -343,20 +323,12 @@ const ComposerCore = ({
     () =>
       createCardActionContext({
         cardActionMiddleware: Object.freeze([...singleToArray(cardActionMiddleware)]),
-        continuous: !!styleOptions.speechRecognitionContinuous,
         directLine,
         dispatch,
         markAllAsAcknowledged,
         ponyfill
       }),
-    [
-      cardActionMiddleware,
-      directLine,
-      dispatch,
-      markAllAsAcknowledged,
-      ponyfill,
-      styleOptions.speechRecognitionContinuous
-    ]
+    [cardActionMiddleware, directLine, dispatch, markAllAsAcknowledged, ponyfill]
   );
 
   const patchedSelectVoice = useMemo(
@@ -364,6 +336,16 @@ const ComposerCore = ({
     [locale, selectVoice]
   );
 
+  const groupActivitiesContext = useMemo(
+    () =>
+      createGroupActivitiesContext({
+        groupActivitiesMiddleware: Object.freeze([...singleToArray(groupActivitiesMiddleware)]),
+        groupTimestamp: patchedStyleOptions.groupTimestamp,
+        ponyfill
+      }),
+    [groupActivitiesMiddleware, patchedStyleOptions.groupTimestamp, ponyfill]
+  );
+
   const hoistedDispatchers = useMemo(
     () =>
       mapMap(
@@ -376,15 +358,6 @@ const ComposerCore = ({
     [dispatch]
   );
 
-  const startVoice = useCallback(() => {
-    dispatch(startVoiceRecording());
-  }, [dispatch]);
-
-  const stopVoice = useCallback(() => {
-    voiceHandlers.forEach(handler => handler.stopAllAudio());
-    dispatch(stopVoiceRecording());
-  }, [dispatch, voiceHandlers]);
-
   const patchedLocalizedStrings = useMemo(
     () => mergeStringsOverrides(getAllLocalizedStrings()[normalizeLanguage(locale)], locale, overrideLocalizedStrings),
     [locale, overrideLocalizedStrings]
@@ -417,6 +390,25 @@ const ComposerCore = ({
     [telemetryDimensionsRef]
   );
 
+  const patchedActivityRenderer = useMemo(
+    () =>
+      applyMiddlewareForRenderer(
+        'activity',
+        { strict: false },
+        ...singleToArray(activityMiddleware),
+        () =>
+          () =>
+          ({ activity }) => {
+            if (activity) {
+              throw new Error(`No renderer for activity of type "${activity.type}"`);
+            } else {
+              throw new Error('No activity to render');
+            }
+          }
+      )({}),
+    [activityMiddleware]
+  );
+
   const patchedActivityStatusRenderer = useMemo<RenderActivityStatus>(
     () =>
       applyMiddlewareForRenderer(
@@ -471,18 +463,14 @@ const ComposerCore = ({
     [attachmentMiddleware]
   );
 
-  const groupActivitiesMiddleware = useMemoIterable<readonly GroupActivitiesMiddleware[] | undefined>(
-    () => Object.freeze(singleToArray(groupActivitiesMiddlewareFromProps)),
-    [groupActivitiesMiddlewareFromProps]
-  );
-
-  const avatarMiddleware = useMemoIterable<readonly AvatarMiddleware[]>(
-    () => singleToArray(avatarMiddlewareFromProps),
-    [avatarMiddlewareFromProps]
-  );
-
-  const polymiddlewareForLegacyAvatarMiddleware = useMemo<Polymiddleware | undefined>(
-    () => createAvatarPolymiddlewareFromLegacy(...avatarMiddleware),
+  const patchedAvatarRenderer = useMemo(
+    () =>
+      applyMiddlewareForRenderer(
+        'avatar',
+        { strict: false },
+        ...singleToArray(avatarMiddleware),
+        () => () => () => false
+      )({}),
     [avatarMiddleware]
   );
 
@@ -527,50 +515,6 @@ const ComposerCore = ({
     [scrollToEndButtonMiddleware]
   );
 
-  const activityMiddleware = useMemoIterable<readonly LegacyActivityMiddleware[]>(
-    () => singleToArray(activityMiddlewareFromProps),
-    [activityMiddlewareFromProps]
-  );
-
-  const polymiddlewareForLegacyActivityMiddleware = useMemo<Polymiddleware | undefined>(
-    () => createActivityPolymiddlewareFromLegacy(...activityMiddleware),
-    [activityMiddleware]
-  );
-
-  const polymiddleware = useMemoIterable<readonly Polymiddleware[]>(
-    () =>
-      Object.freeze([
-        // Error box telemetry polymiddleware is special and has a much higher priority.
-        // This guarantees telemetry is always emitted for exception and no other polymiddleware can override this behavior.
-        errorBoxTelemetryPolymiddleware,
-
-        // # Why render legacy middleware before polymiddleware?
-        //
-        // - Legacy middleware should have high priority than defaults
-        // - Default middleware will be upgraded to polymiddleware, however, they should have lower priority
-        // - Default middleware are implemented in the `component` package, and passed via `polymiddleware` props
-        //   - They are UI, cannot be implemented in `api` package
-        //
-        // We have a few way out, either one of the followings:
-        //
-        // - Add a new `lowPriorityPolymiddleware` props for default polymiddleware, so we can put them after legacy
-        //   - We don't want any special treatments or any prioritization system
-        // - We put the upgrade logics inside both `api` and `component` package
-        //   - `component` will upgrade legacy to polymiddleware and prioritize properly
-        //   - Spaghetti code and it is difficult to test the logic in `api` package
-        // - We always render legacy middleware before polymiddleware
-        //   - Default middleware are polymiddleware, has lower priority than legacy
-        //
-        // The simplest and logical move is #3: render legacy middleware before polymiddleware.
-
-        ...(polymiddlewareForLegacyActivityMiddleware ? [polymiddlewareForLegacyActivityMiddleware] : []),
-        ...(polymiddlewareForLegacyAvatarMiddleware ? [polymiddlewareForLegacyAvatarMiddleware] : []),
-        ...(polymiddlewareFromProps ?? []),
-        activityFallbackPolymiddleware
-      ]),
-    [polymiddlewareForLegacyActivityMiddleware, polymiddlewareForLegacyAvatarMiddleware, polymiddlewareFromProps]
-  );
-
   /**
    * This is a heavy function, and it is expected to be only called when there is a need to recreate business logic, e.g.
    * - User ID changed, causing all send* functions to be updated
@@ -582,17 +526,22 @@ const ComposerCore = ({
    *       This context should consist of members that are not in the Redux store
    *       i.e. members that are not interested in other types of UIs
    */
-  const context = useMemo<ContextOf<React.Context<WebChatAPIContextType>>>(
+  const context = useMemo<ContextOf<typeof WebChatAPIContext>>(
     () => ({
       ...cardActionContext,
+      ...groupActivitiesContext,
       ...hoistedDispatchers,
+      activityRenderer: patchedActivityRenderer,
       activityStatusRenderer: patchedActivityStatusRenderer,
       attachmentForScreenReaderRenderer: patchedAttachmentForScreenReaderRenderer,
       attachmentRenderer: patchedAttachmentRenderer,
+      avatarRenderer: patchedAvatarRenderer,
       dir: patchedDir,
       directLine,
+      disabled,
       downscaleImageToDataURL,
       grammars: patchedGrammars,
+      internalErrorBoxClass,
       language: locale,
       localizedGlobalizeState: [localizedGlobalize],
       localizedStrings: patchedLocalizedStrings,
@@ -601,41 +550,42 @@ const ComposerCore = ({
       scrollToEndButtonRenderer,
       selectVoice: patchedSelectVoice,
       sendTypingIndicator,
-      startVoice,
-      stopVoice,
+      styleOptions: patchedStyleOptions,
       telemetryDimensionsRef,
       toastRenderer: patchedToastRenderer,
       trackDimension,
       typingIndicatorRenderer: patchedTypingIndicatorRenderer,
-      uiState,
       userID,
       username
     }),
     [
       cardActionContext,
       directLine,
+      disabled,
       downscaleImageToDataURL,
+      groupActivitiesContext,
       hoistedDispatchers,
+      internalErrorBoxClass,
       locale,
       localizedGlobalize,
       onTelemetry,
+      patchedActivityRenderer,
       patchedActivityStatusRenderer,
       patchedAttachmentForScreenReaderRenderer,
       patchedAttachmentRenderer,
+      patchedAvatarRenderer,
       patchedDir,
       patchedGrammars,
       patchedLocalizedStrings,
       patchedSelectVoice,
+      patchedStyleOptions,
       patchedToastRenderer,
       patchedTypingIndicatorRenderer,
       renderMarkdown,
       scrollToEndButtonRenderer,
       sendTypingIndicator,
-      startVoice,
-      stopVoice,
       telemetryDimensionsRef,
       trackDimension,
-      uiState,
       userID,
       username
     ]
@@ -643,26 +593,18 @@ const ComposerCore = ({
 
   return (
     <WebChatAPIContext.Provider value={context}>
-      <CapabilitiesComposer>
-        <ActivityListenerComposer>
-          <ActivitySendStatusComposer>
-            <ActivityTypingComposer>
-              <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || EMPTY_ARRAY}>
-                <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || EMPTY_ARRAY}>
-                  <GroupActivitiesComposer groupActivitiesMiddleware={groupActivitiesMiddleware}>
-                    <PolymiddlewareComposer polymiddleware={polymiddleware}>
-                      <SpeechToSpeechComposer>
-                        {typeof children === 'function' ? children(context) : children}
-                      </SpeechToSpeechComposer>
-                    </PolymiddlewareComposer>
-                  </GroupActivitiesComposer>
-                  <ActivitySendStatusTelemetryComposer />
-                </SendBoxToolbarMiddlewareProvider>
-              </SendBoxMiddlewareProvider>
-            </ActivityTypingComposer>
-          </ActivitySendStatusComposer>
-        </ActivityListenerComposer>
-      </CapabilitiesComposer>
+      <ActivityListenerComposer>
+        <ActivitySendStatusComposer>
+          <ActivityTypingComposer>
+            <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || EMPTY_ARRAY}>
+              <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || EMPTY_ARRAY}>
+                {typeof children === 'function' ? children(context) : children}
+                <ActivitySendStatusTelemetryComposer />
+              </SendBoxToolbarMiddlewareProvider>
+            </SendBoxMiddlewareProvider>
+          </ActivityTypingComposer>
+        </ActivitySendStatusComposer>
+      </ActivityListenerComposer>
       {onTelemetry && <Tracker />}
     </WebChatAPIContext.Provider>
   );
@@ -675,6 +617,7 @@ const ComposerCore = ({
  *       We should decide which data is needed for React but not in other environment such as CLI/VSCode
  */
 ComposerCore.defaultProps = {
+  activityMiddleware: undefined,
   activityStatusMiddleware: undefined,
   attachmentForScreenReaderMiddleware: undefined,
   attachmentMiddleware: undefined,
@@ -686,6 +629,7 @@ ComposerCore.defaultProps = {
   downscaleImageToDataURL: undefined,
   grammars: [],
   groupActivitiesMiddleware: undefined,
+  internalErrorBoxClass: undefined,
   locale: window.navigator.language || 'en-US',
   onTelemetry: undefined,
   overrideLocalizedStrings: undefined,
@@ -693,14 +637,15 @@ ComposerCore.defaultProps = {
   scrollToEndButtonMiddleware: undefined,
   selectVoice: undefined,
   sendTypingIndicator: false,
+  styleOptions: {},
   toastMiddleware: undefined,
   typingIndicatorMiddleware: undefined,
-  uiState: undefined,
   userID: '',
   username: ''
 };
 
 ComposerCore.propTypes = {
+  activityMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   activityStatusMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   attachmentForScreenReaderMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   attachmentMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
@@ -727,6 +672,7 @@ ComposerCore.propTypes = {
   downscaleImageToDataURL: PropTypes.func,
   grammars: PropTypes.arrayOf(PropTypes.string),
   groupActivitiesMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
+  internalErrorBoxClass: PropTypes.func, // This is for internal use only. We don't allow customization of error box.
   locale: PropTypes.string,
   onTelemetry: PropTypes.func,
   overrideLocalizedStrings: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
@@ -734,9 +680,9 @@ ComposerCore.propTypes = {
   scrollToEndButtonMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   selectVoice: PropTypes.func,
   sendTypingIndicator: PropTypes.bool,
+  styleOptions: PropTypes.any,
   toastMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   typingIndicatorMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  uiState: PropTypes.oneOf(['blueprint', 'disabled']),
   userID: PropTypes.string,
   username: PropTypes.string
 };
@@ -747,7 +693,7 @@ type ComposerWithStoreProps = ComposerCoreProps &
   }>;
 
 type ComposerProps = ComposerWithStoreProps & {
-  readonly internalRenderErrorBox?: any;
+  internalRenderErrorBox?: any;
 
   /**
    * Ponyfill to overrides specific global scope members. This prop cannot be changed after initial render.
@@ -758,8 +704,7 @@ type ComposerProps = ComposerWithStoreProps & {
    *
    * Please see [#4662](https://github.com/microsoft/BotFramework-WebChat/pull/4662) for details.
    */
-  readonly ponyfill?: Partial<GlobalScopePonyfill> | undefined;
-  readonly styleOptions?: StyleOptions | undefined;
+  ponyfill?: Partial<GlobalScopePonyfill>;
 };
 
 // We will create a Redux store if it was not passed in
@@ -803,15 +748,11 @@ const ComposerWithStore = ({ onTelemetry, store, ...props }: ComposerWithStorePr
 
   return (
     <Provider context={WebChatReduxContext} store={memoizedStore}>
-      <ReduxStoreComposer store={memoizedStore}>
-        <GraphProvider store={memoizedStore}>
-          <ActivityKeyerComposer>
-            <ActivityAcknowledgementComposer>
-              <ComposerCore onTelemetry={onTelemetry} {...props} />
-            </ActivityAcknowledgementComposer>
-          </ActivityKeyerComposer>
-        </GraphProvider>
-      </ReduxStoreComposer>
+      <ActivityKeyerComposer>
+        <ActivityAcknowledgementComposer>
+          <ComposerCore onTelemetry={onTelemetry} {...props} />
+        </ActivityAcknowledgementComposer>
+      </ActivityKeyerComposer>
     </Provider>
   );
 };
@@ -826,7 +767,7 @@ ComposerWithStore.propTypes = {
   store: PropTypes.any
 };
 
-const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, styleOptions, ...props }: ComposerProps) => {
+const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, ...props }: ComposerProps) => {
   const [error, setError] = useState();
 
   const handleError = useCallback(
@@ -845,9 +786,7 @@ const Composer = ({ internalRenderErrorBox, onTelemetry, ponyfill, styleOptions,
   ) : (
     <ErrorBoundary onError={handleError}>
       <PonyfillComposer ponyfill={ponyfill}>
-        <StyleOptionsComposer styleOptions={styleOptions}>
-          <ComposerWithStore onTelemetry={onTelemetry} {...props} />
-        </StyleOptionsComposer>
+        <ComposerWithStore onTelemetry={onTelemetry} {...props} />
       </PonyfillComposer>
     </ErrorBoundary>
   );