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

package/src/providers/LiveRegionTwin/LiveRegionTwinComposer.tsx

@@ -0,0 +1,172 @@
+import { hooks } from 'botframework-webchat-api';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import type { FC, PropsWithChildren } from 'react';
+
+import LiveRegionTwinContainer from './private/LiveRegionTwinContainer';
+import LiveRegionTwinContext from './private/Context';
+import useValueRef from '../../hooks/internal/useValueRef';
+
+import type { StaticElement, StaticElementEntry } from './private/types';
+
+const { usePonyfill } = hooks;
+
+const DEFAULT_ARIA_LIVE = 'polite';
+const DEFAULT_FADE_AFTER = 1000;
+
+type LiveRegionTwinComposerProps = PropsWithChildren<{
+  /** Optional "aria-label" attribute for the live region twin container. */
+  'aria-label'?: string;
+
+  /** "aria-live" attribute for the live region twin container, defaults to `'polite'`. */
+  'aria-live'?: 'assertive' | 'polite';
+
+  /** Optional "aria-roledescription" attribute for the live region twin container. */
+  'aria-roledescription'?: string;
+
+  /** Optional "className" attribute for the live region twin container. */
+  className?: string;
+
+  /**
+   * Static elements will fade out after this timeout value specified in milliseconds, defaults to `1000`.
+   *
+   * When lowering this value, make sure screen reader can continue to pick up new static elements before fading out.
+   *
+   * If this prop is updated, it will be reflected in next queueing elements.
+   */
+  fadeAfter?: number;
+
+  /** Optional "role" attribute for the live region twin container. */
+  role?: string;
+
+  /** Optional "className" attribute for static text element. */
+  textElementClassName?: string;
+}>;
+
+/**
+ * Live region twin is an UI component for queueing texts or elements to the screen reader using
+ * a container element with `aria-live` attribute set.
+ *
+ * After the text is rendered and queued, it will be removed to reduce burden on the DOM tree.
+ * Currently, we assume the assistive technologies should pick up the text within 1 second of rendering.
+ * This value is configurable.
+ *
+ * By default, the live region is visible. If is is not desirable, the caller can use `className` prop to
+ * hide its visuals.
+ */
+const LiveRegionTwinComposer: FC<LiveRegionTwinComposerProps> = ({
+  'aria-label': ariaLabel,
+  'aria-live': ariaLive = DEFAULT_ARIA_LIVE,
+  'aria-roledescription': ariaRoleDescription,
+  children,
+  className,
+  fadeAfter = DEFAULT_FADE_AFTER,
+  role,
+  textElementClassName
+}) => {
+  const [{ clearTimeout, setTimeout }] = usePonyfill();
+  const [staticElementEntries, setStaticElementEntries] = useState<StaticElementEntry[]>([]);
+  const fadeAfterRef = useValueRef(fadeAfter);
+  const markAllAsRenderedTimeoutIdRef = useRef<any>();
+  const nextKeyRef = useRef<number>(1);
+
+  const staticElementEntriesRef = useValueRef(staticElementEntries);
+
+  // This function is called by an effect hook `useMarkAllAsRenderedEffect`, it must be designed with converging in mind.
+  // To prevent infinite render loop, after multiple calls to this function, it should eventually no-op.
+  const markAllAsRendered = useCallback<() => void>(() => {
+    if (!staticElementEntriesRef.current.length) {
+      // Nothing to remove.
+      return;
+    }
+
+    // When removing each element one-by-one based on an individual timeout, Narrator would narrate them twice occasionally.
+    // Possibly it think some elements that is not removed during the current cycle, are new elements and queued them twice.
+    // Thus, we are removing all at once to prevent bugs in Narrator.
+    markAllAsRenderedTimeoutIdRef.current && clearTimeout(markAllAsRenderedTimeoutIdRef.current);
+
+    markAllAsRenderedTimeoutIdRef.current = setTimeout(() => {
+      // We are playing safe by using value ref to check its length here.
+      // If we are certain that `setStaticElements(emptyArray => emptyArray)` is a no-op,
+      // we could replace it with just the setter function.
+      staticElementEntriesRef.current.length && setStaticElementEntries([]);
+    }, fadeAfterRef.current);
+  }, [
+    clearTimeout,
+    fadeAfterRef,
+    markAllAsRenderedTimeoutIdRef,
+    setStaticElementEntries,
+    setTimeout,
+    staticElementEntriesRef
+  ]);
+
+  // When this component is unmounting, make sure all future `setTimeout` are cleared and should not be fired.
+  useEffect(
+    () => () => markAllAsRenderedTimeoutIdRef.current && clearTimeout(markAllAsRenderedTimeoutIdRef.current),
+    [clearTimeout, markAllAsRenderedTimeoutIdRef]
+  );
+
+  const queueStaticElement = useCallback<(staticElement: StaticElement) => void>(
+    (element: StaticElement): void => {
+      const key = nextKeyRef.current;
+
+      nextKeyRef.current = nextKeyRef.current + 1;
+
+      setStaticElementEntries(entries => [...entries, { element, key }]);
+    },
+    [nextKeyRef, setStaticElementEntries]
+  );
+
+  const staticElementEntriesState = useMemo<readonly [readonly StaticElementEntry[]]>(
+    () => Object.freeze([Object.freeze(staticElementEntries)]) as readonly [readonly StaticElementEntry[]],
+    [staticElementEntries]
+  );
+
+  const context = useMemo(
+    () => ({
+      markAllAsRendered,
+      queueStaticElement,
+      staticElementEntriesState
+    }),
+    [markAllAsRendered, queueStaticElement, staticElementEntriesState]
+  );
+
+  return (
+    <LiveRegionTwinContext.Provider value={context}>
+      <LiveRegionTwinContainer
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
+        aria-roledescription={ariaRoleDescription}
+        className={className}
+        role={role}
+        textElementClassName={textElementClassName}
+      />
+      {children}
+    </LiveRegionTwinContext.Provider>
+  );
+};
+
+LiveRegionTwinComposer.defaultProps = {
+  'aria-label': undefined,
+  'aria-live': DEFAULT_ARIA_LIVE,
+  'aria-roledescription': undefined,
+  children: undefined,
+  className: undefined,
+  fadeAfter: DEFAULT_FADE_AFTER,
+  role: undefined,
+  textElementClassName: undefined
+};
+
+LiveRegionTwinComposer.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-live': PropTypes.oneOf(['assertive', 'polite']),
+  'aria-roledescription': PropTypes.string,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  fadeAfter: PropTypes.number,
+  role: PropTypes.string,
+  textElementClassName: PropTypes.string
+};
+
+export default LiveRegionTwinComposer;

package/src/providers/LiveRegionTwin/private/Context.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+import type { StaticElement, StaticElementEntry } from './types';
+
+type LiveRegionTwinContextType = {
+  markAllAsRendered: () => void;
+  queueStaticElement: (element: StaticElement) => void;
+  staticElementEntriesState: readonly [readonly StaticElementEntry[]];
+};
+
+const LiveRegionTwinContext = createContext<LiveRegionTwinContextType>(undefined);
+
+export default LiveRegionTwinContext;
+
+export type { LiveRegionTwinContextType };

package/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx

@@ -1,35 +1,29 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
-import { literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+
+import type { VFC } from 'react';
 
 import useMarkAllAsRenderedEffect from './useMarkAllAsRenderedEffect';
 import useStaticElementEntries from './useStaticElementEntries';
 
-const liveRegionTwinContainerPropsSchema = pipe(
-  object({
-    'aria-label': optional(string()),
-    'aria-live': union([literal('assertive'), literal('polite')]),
-    'aria-roledescription': optional(string()),
-    className: optional(string()),
-    role: optional(string()),
-    textElementClassName: optional(string())
-  }),
-  readonly()
-);
-
-type LiveRegionTwinContainerProps = InferInput<typeof liveRegionTwinContainerPropsSchema>;
+type LiveRegionTwinContainerProps = {
+  'aria-label'?: string;
+  'aria-live': 'assertive' | 'polite';
+  'aria-roledescription'?: string;
+  className?: string;
+  role?: string;
+  textElementClassName?: string;
+};
 
 // This container is marked as private because we assume there is only one instance under the <LiveRegionTwinContext>.
-function LiveRegionTwinContainer(props: LiveRegionTwinContainerProps) {
-  const {
-    'aria-label': ariaLabel,
-    'aria-live': ariaLive,
-    'aria-roledescription': ariaRoleDescription,
-    className,
-    role,
-    textElementClassName
-  } = validateProps(liveRegionTwinContainerPropsSchema, props);
-
+const LiveRegionTwinContainer: VFC<LiveRegionTwinContainerProps> = ({
+  'aria-label': ariaLabel,
+  'aria-live': ariaLive,
+  'aria-roledescription': ariaRoleDescription,
+  className,
+  role,
+  textElementClassName
+}) => {
   const [staticElementEntries] = useStaticElementEntries();
 
   // We assume there is only one instance under the <LiveRegionTwinContext>.
@@ -58,7 +52,25 @@ function LiveRegionTwinContainer(props: LiveRegionTwinContainerProps) {
       })}
     </div>
   );
-}
+};
+
+LiveRegionTwinContainer.defaultProps = {
+  'aria-label': undefined,
+  'aria-roledescription': undefined,
+  className: undefined,
+  role: undefined,
+  textElementClassName: undefined
+};
+
+LiveRegionTwinContainer.propTypes = {
+  'aria-label': PropTypes.string,
+  // PropTypes.oneOf() returns type of `string`, but not `'assertive' | 'polite'`.
+  // @ts-ignore
+  'aria-live': PropTypes.oneOf(['assertive', 'polite']).isRequired,
+  'aria-roledescription': PropTypes.string,
+  className: PropTypes.string,
+  role: PropTypes.string,
+  textElementClassName: PropTypes.string
+};
 
 export default LiveRegionTwinContainer;
-export { liveRegionTwinContainerPropsSchema, type LiveRegionTwinContainerProps };

package/src/providers/LiveRegionTwin/private/useContext.ts

@@ -1,9 +1,15 @@
 import { useContext } from 'react';
 
-import { LiveRegionTwinContext, type LiveRegionTwinContextType } from './LiveRegionTwinComposer';
+import LiveRegionTwinContext from './Context';
 
-export default function useLiveRegionTwinContext(): LiveRegionTwinContextType {
+import type { LiveRegionTwinContextType } from './Context';
+
+export default function useLiveRegionTwinContext(thrownOnUndefined = true): LiveRegionTwinContextType {
   const contextValue = useContext(LiveRegionTwinContext);
 
+  if (thrownOnUndefined && !contextValue) {
+    throw new Error('botframework-webchat internal: This hook can only be used under <LiveRegionComposer>.');
+  }
+
   return contextValue;
 }

package/src/providers/LiveRegionTwin/useQueueStaticElement.ts

@@ -1,4 +1,4 @@
-import useLiveRegionTwinContext from './private/useContext';
+import useLiveRegionContext from './private/useContext';
 
 import type { StaticElement } from './private/types';
 
@@ -8,5 +8,5 @@ import type { StaticElement } from './private/types';
  * After the element is queued, screen reader will eventually narrate it and it cannot be changed.
  */
 export default function useQueueStaticElement(): (element: StaticElement) => void {
-  return useLiveRegionTwinContext().queueStaticElement;
+  return useLiveRegionContext().queueStaticElement;
 }

package/src/providers/ModalDialog/private/Popover.tsx

@@ -1,8 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo, type PropsWithChildren, useCallback, useLayoutEffect, useRef } from 'react';
+import React, { memo, type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
 
-import { ComponentIcon } from '../../../Icon';
 import useStyleSet from '../../../hooks/useStyleSet';
 
 const { useLocalizer } = hooks;
@@ -22,11 +21,11 @@ const ModalDialog = memo(
     const dialogRef = useRef<HTMLDialogElement>(null);
     const localize = useLocalizer();
 
-    const closeButtonAlt = localize('CLOSE_BUTTON_ALT');
+    const closeButtonAlt = localize('KEYBOARD_HELP_CLOSE_BUTTON_ALT');
 
     const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]);
 
-    useLayoutEffect(() => dialogRef.current?.showModal(), [dialogRef]);
+    useEffect(() => dialogRef.current?.showModal(), [dialogRef]);
 
     return (
       <dialog
@@ -50,7 +49,18 @@ const ModalDialog = memo(
               onClick={handleCloseButtonClick}
               type="button"
             >
-              <ComponentIcon appearance="text" className="webchat__modal-dialog__close-button-icon" icon="dismiss" />
+              <div className="webchat__modal-dialog__close-button-border">
+                <svg
+                  className="webchat__modal-dialog__close-button-image"
+                  // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+                  focusable={false}
+                  role="presentation"
+                  viewBox="0 0 2048 2048"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M2048 136l-888 888 888 888-136 136-888-888-888 888L0 1912l888-888L0 136 136 0l888 888L1912 0l136 136z" />
+                </svg>
+              </div>
             </button>
           </div>
           <div className="webchat__modal-dialog__body">{children}</div>

package/src/providers/RovingTabIndex/RovingTabIndexComposer.tsx

@@ -1,27 +1,21 @@
 /* eslint complexity: ["error", 50] */
 
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import React, { memo, useCallback, useEffect, useMemo, useRef, type MutableRefObject } from 'react';
-import { custom, function_, is, literal, object, optional, pipe, readonly, union, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import RovingTabIndexContext, { type RovingTabIndexContextType } from './private/Context';
+import RovingTabIndexContext from './private/Context';
 
-type ItemRef = MutableRefObject<HTMLElement | undefined>;
-
-const rovingTabIndexContextProps = pipe(
-  object({
-    children: optional(reactNode()),
-    onEscapeKey: optional(custom<() => void>(value => is(function_(), value))),
-    orientation: optional(union([literal('horizontal'), literal('vertical')]), 'horizontal')
-  }),
-  readonly()
-);
+import type { FC, MutableRefObject, PropsWithChildren } from 'react';
+import type { RovingTabIndexContextType } from './private/Context';
 
-type RovingTabIndexContextProps = InferInput<typeof rovingTabIndexContextProps>;
+type ItemRef = MutableRefObject<HTMLElement | undefined>;
 
-function RovingTabIndexComposer(props: RovingTabIndexContextProps) {
-  const { children, onEscapeKey, orientation } = validateProps(rovingTabIndexContextProps, props);
+type RovingTabIndexContextProps = PropsWithChildren<{
+  onEscapeKey?: () => void;
+  orientation?: 'horizontal' | 'vertical';
+}>;
 
+const RovingTabIndexComposer: FC<RovingTabIndexContextProps> = ({ children, onEscapeKey, orientation }) => {
   const activeItemIndexRef = useRef(0);
   const itemRefsRef = useRef<ItemRef[]>([]);
 
@@ -185,7 +179,16 @@ function RovingTabIndexComposer(props: RovingTabIndexContextProps) {
   });
 
   return <RovingTabIndexContext.Provider value={contextValue}>{children}</RovingTabIndexContext.Provider>;
-}
+};
+
+RovingTabIndexComposer.defaultProps = {
+  onEscapeKey: undefined,
+  orientation: 'horizontal'
+};
+
+RovingTabIndexComposer.propTypes = {
+  onEscapeKey: PropTypes.func,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+};
 
-export default memo(RovingTabIndexComposer);
-export { rovingTabIndexContextProps, type RovingTabIndexContext };
+export default RovingTabIndexComposer;

package/src/providers/Theme/ThemeProvider.tsx

@@ -1,113 +1,41 @@
-/* eslint react/no-unused-prop-types: off */
-/* eslint react/require-default-props: off */
-
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import {
-  type ActivityMiddleware,
-  type ActivityStatusMiddleware,
-  type AttachmentForScreenReaderMiddleware,
-  type AttachmentMiddleware,
-  type AvatarMiddleware,
-  type CardActionMiddleware,
-  type GroupActivitiesMiddleware,
-  type ScrollToEndButtonMiddleware,
-  type SendBoxMiddleware,
-  type SendBoxToolbarMiddleware,
-  type StyleOptions,
-  type ToastMiddleware,
-  type TypingIndicatorMiddleware
-} from 'botframework-webchat-api';
-import { StyleOptionsComposer } from 'botframework-webchat-api/internal.js';
-import { type Polymiddleware } from 'botframework-webchat-api/middleware.js';
 import React, { memo, useContext, useMemo, type ReactNode } from 'react';
-import { array, custom, function_, is, object, optional, pipe, readonly } from 'valibot';
-
-import Context, { type ThemeContextType } from './private/Context';
-
-const themeProviderPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    styleOptions: optional(custom<StyleOptions>(value => is(object({}), value))),
-
-    /** @deprecated Use `polymiddleware` instead, this will be removed on or after 2027-08-16. */
-    activityMiddleware: optional(pipe(array(custom<ActivityMiddleware>(value => is(function_(), value))))),
-    activityStatusMiddleware: optional(pipe(array(custom<ActivityStatusMiddleware>(value => is(function_(), value))))),
-    attachmentForScreenReaderMiddleware: optional(
-      pipe(array(custom<AttachmentForScreenReaderMiddleware>(value => is(function_(), value))))
-    ),
-    attachmentMiddleware: optional(pipe(array(custom<AttachmentMiddleware>(value => is(function_(), value))))),
-    avatarMiddleware: optional(pipe(array(custom<AvatarMiddleware>(value => is(function_(), value))))),
-    cardActionMiddleware: optional(pipe(array(custom<CardActionMiddleware>(value => is(function_(), value))))),
-    groupActivitiesMiddleware: optional(
-      pipe(array(custom<GroupActivitiesMiddleware>(value => is(function_(), value))))
-    ),
-    polymiddleware: optional(pipe(array(custom<Polymiddleware>(value => is(function_(), value))))),
-    scrollToEndButtonMiddleware: optional(
-      pipe(array(custom<ScrollToEndButtonMiddleware>(value => is(function_(), value))))
-    ),
-    sendBoxMiddleware: optional(pipe(array(custom<SendBoxMiddleware>(value => is(function_(), value))))),
-    sendBoxToolbarMiddleware: optional(pipe(array(custom<SendBoxToolbarMiddleware>(value => is(function_(), value))))),
-    toastMiddleware: optional(pipe(array(custom<ToastMiddleware>(value => is(function_(), value))))),
-    typingIndicatorMiddleware: optional(pipe(array(custom<TypingIndicatorMiddleware>(value => is(function_(), value)))))
-  }),
-  readonly()
-);
-
-// We cannot use InferInput<> here because the array need to be readonly but InferInput omitted the readonly.
-type ThemeProviderProps = {
-  readonly children?: ReactNode | undefined;
-  readonly styleOptions?: object | undefined;
-  /** @deprecated Use `polymiddleware` instead, this will be removed on or after 2027-08-16. */
-  readonly activityMiddleware?: readonly ActivityMiddleware[] | undefined;
-  readonly activityStatusMiddleware?: readonly ActivityStatusMiddleware[] | undefined;
-  readonly attachmentForScreenReaderMiddleware?: readonly AttachmentForScreenReaderMiddleware[] | undefined;
-  readonly attachmentMiddleware?: readonly AttachmentMiddleware[] | undefined;
-  readonly avatarMiddleware?: readonly AvatarMiddleware[] | undefined;
-  readonly cardActionMiddleware?: readonly CardActionMiddleware[] | undefined;
-  readonly groupActivitiesMiddleware?: readonly GroupActivitiesMiddleware[] | undefined;
-  readonly polymiddleware?: readonly Polymiddleware[] | undefined;
-  readonly scrollToEndButtonMiddleware?: readonly ScrollToEndButtonMiddleware[] | undefined;
-  readonly sendBoxMiddleware?: readonly SendBoxMiddleware[] | undefined;
-  readonly sendBoxToolbarMiddleware?: readonly SendBoxToolbarMiddleware[] | undefined;
-  readonly toastMiddleware?: readonly ToastMiddleware[] | undefined;
-  readonly typingIndicatorMiddleware?: readonly TypingIndicatorMiddleware[] | undefined;
-};
 
-const EMPTY_ARRAY = Object.freeze([] as const);
+import Context, { type ContextType } from './private/Context';
 
-const ThemeProvider = (props: ThemeProviderProps) => {
-  const {
-    activityMiddleware,
-    activityStatusMiddleware,
-    attachmentForScreenReaderMiddleware,
-    attachmentMiddleware,
-    avatarMiddleware,
-    cardActionMiddleware,
-    children,
-    groupActivitiesMiddleware,
-    polymiddleware,
-    scrollToEndButtonMiddleware,
-    sendBoxMiddleware,
-    sendBoxToolbarMiddleware,
-    styleOptions,
-    toastMiddleware,
-    typingIndicatorMiddleware
-  } = validateProps(themeProviderPropsSchema, props);
+type Props = Readonly<{ children?: ReactNode | undefined } & Partial<ContextType>>;
 
+const EMPTY_ARRAY = Object.freeze([] as const);
+
+const ThemeProvider = ({
+  children,
+  activityMiddleware,
+  activityStatusMiddleware,
+  attachmentForScreenReaderMiddleware,
+  attachmentMiddleware,
+  avatarMiddleware,
+  cardActionMiddleware,
+  groupActivitiesMiddleware,
+  scrollToEndButtonMiddleware,
+  sendBoxMiddleware,
+  sendBoxToolbarMiddleware,
+  styleOptions,
+  toastMiddleware,
+  typingIndicatorMiddleware
+}: Props) => {
   const existingContext = useContext(Context);
 
   // TODO: [P1] We should reduce boilerplate code.
-  const mergedActivityMiddleware = useMemo<ThemeContextType['activityMiddleware']>(
+  const mergedActivityMiddleware = useMemo<ContextType['activityMiddleware']>(
     () => Object.freeze([...(activityMiddleware || []), ...existingContext.activityMiddleware]),
     [activityMiddleware, existingContext.activityMiddleware]
   );
 
-  const mergedActivityStatusMiddleware = useMemo<ThemeContextType['activityStatusMiddleware']>(
+  const mergedActivityStatusMiddleware = useMemo<ContextType['activityStatusMiddleware']>(
     () => Object.freeze([...(activityStatusMiddleware || EMPTY_ARRAY), ...existingContext.activityStatusMiddleware]),
     [activityStatusMiddleware, existingContext.activityStatusMiddleware]
   );
 
-  const mergedAttachmentForScreenReaderMiddleware = useMemo<ThemeContextType['attachmentForScreenReaderMiddleware']>(
+  const mergedAttachmentForScreenReaderMiddleware = useMemo<ContextType['attachmentForScreenReaderMiddleware']>(
     () =>
       Object.freeze([
         ...(attachmentForScreenReaderMiddleware || EMPTY_ARRAY),
@@ -116,53 +44,53 @@ const ThemeProvider = (props: ThemeProviderProps) => {
     [attachmentForScreenReaderMiddleware, existingContext.attachmentForScreenReaderMiddleware]
   );
 
-  const mergedAttachmentMiddleware = useMemo<ThemeContextType['attachmentMiddleware']>(
+  const mergedAttachmentMiddleware = useMemo<ContextType['attachmentMiddleware']>(
     () => Object.freeze([...(attachmentMiddleware || EMPTY_ARRAY), ...existingContext.attachmentMiddleware]),
     [attachmentMiddleware, existingContext.attachmentMiddleware]
   );
 
-  const mergedAvatarMiddleware = useMemo<ThemeContextType['avatarMiddleware']>(
+  const mergedAvatarMiddleware = useMemo<ContextType['avatarMiddleware']>(
     () => Object.freeze([...(avatarMiddleware || EMPTY_ARRAY), ...existingContext.avatarMiddleware]),
     [avatarMiddleware, existingContext.avatarMiddleware]
   );
 
-  const mergedCardActionMiddleware = useMemo<ThemeContextType['cardActionMiddleware']>(
+  const mergedCardActionMiddleware = useMemo<ContextType['cardActionMiddleware']>(
     () => Object.freeze([...(cardActionMiddleware || EMPTY_ARRAY), ...existingContext.cardActionMiddleware]),
     [cardActionMiddleware, existingContext.cardActionMiddleware]
   );
 
-  const mergedGroupActivitiesMiddleware = useMemo<ThemeContextType['groupActivitiesMiddleware']>(
+  const mergedGroupActivitiesMiddleware = useMemo<ContextType['groupActivitiesMiddleware']>(
     () => Object.freeze([...(groupActivitiesMiddleware || EMPTY_ARRAY), ...existingContext.groupActivitiesMiddleware]),
     [groupActivitiesMiddleware, existingContext.groupActivitiesMiddleware]
   );
 
-  const mergedPolymiddleware = useMemo<ThemeContextType['polymiddleware']>(
-    () => Object.freeze([...(polymiddleware || EMPTY_ARRAY), ...existingContext.polymiddleware]),
-    [polymiddleware, existingContext.polymiddleware]
-  );
-
-  const mergedScrollToEndButtonMiddleware = useMemo<ThemeContextType['scrollToEndButtonMiddleware']>(
+  const mergedScrollToEndButtonMiddleware = useMemo<ContextType['scrollToEndButtonMiddleware']>(
     () =>
       Object.freeze([...(scrollToEndButtonMiddleware || EMPTY_ARRAY), ...existingContext.scrollToEndButtonMiddleware]),
     [scrollToEndButtonMiddleware, existingContext.scrollToEndButtonMiddleware]
   );
 
-  const mergedSendBoxMiddleware = useMemo<ThemeContextType['sendBoxMiddleware']>(
+  const mergedSendBoxMiddleware = useMemo<ContextType['sendBoxMiddleware']>(
     () => Object.freeze([...(sendBoxMiddleware || EMPTY_ARRAY), ...existingContext.sendBoxMiddleware]),
     [sendBoxMiddleware, existingContext.sendBoxMiddleware]
   );
 
-  const mergedSendBoxToolbarMiddleware = useMemo<ThemeContextType['sendBoxToolbarMiddleware']>(
+  const mergedSendBoxToolbarMiddleware = useMemo<ContextType['sendBoxToolbarMiddleware']>(
     () => Object.freeze([...(sendBoxToolbarMiddleware || EMPTY_ARRAY), ...existingContext.sendBoxToolbarMiddleware]),
     [sendBoxToolbarMiddleware, existingContext.sendBoxToolbarMiddleware]
   );
 
-  const mergedToastMiddleware = useMemo<ThemeContextType['toastMiddleware']>(
+  const mergedStyleOptions = useMemo<ContextType['styleOptions']>(
+    () => Object.freeze({ ...styleOptions, ...existingContext.styleOptions }),
+    [styleOptions, existingContext.styleOptions]
+  );
+
+  const mergedToastMiddleware = useMemo<ContextType['toastMiddleware']>(
     () => Object.freeze([...(toastMiddleware || EMPTY_ARRAY), ...existingContext.toastMiddleware]),
     [toastMiddleware, existingContext.toastMiddleware]
   );
 
-  const mergedTypingIndicatorMiddleware = useMemo<ThemeContextType['typingIndicatorMiddleware']>(
+  const mergedTypingIndicatorMiddleware = useMemo<ContextType['typingIndicatorMiddleware']>(
     () => Object.freeze([...(typingIndicatorMiddleware || EMPTY_ARRAY), ...existingContext.typingIndicatorMiddleware]),
     [typingIndicatorMiddleware, existingContext.typingIndicatorMiddleware]
   );
@@ -176,10 +104,10 @@ const ThemeProvider = (props: ThemeProviderProps) => {
       avatarMiddleware: mergedAvatarMiddleware,
       cardActionMiddleware: mergedCardActionMiddleware,
       groupActivitiesMiddleware: mergedGroupActivitiesMiddleware,
-      polymiddleware: mergedPolymiddleware,
       scrollToEndButtonMiddleware: mergedScrollToEndButtonMiddleware,
       sendBoxMiddleware: mergedSendBoxMiddleware,
       sendBoxToolbarMiddleware: mergedSendBoxToolbarMiddleware,
+      styleOptions: mergedStyleOptions,
       toastMiddleware: mergedToastMiddleware,
       typingIndicatorMiddleware: mergedTypingIndicatorMiddleware
     }),
@@ -191,23 +119,16 @@ const ThemeProvider = (props: ThemeProviderProps) => {
       mergedAvatarMiddleware,
       mergedCardActionMiddleware,
       mergedGroupActivitiesMiddleware,
-      mergedPolymiddleware,
       mergedScrollToEndButtonMiddleware,
       mergedSendBoxMiddleware,
       mergedSendBoxToolbarMiddleware,
+      mergedStyleOptions,
       mergedToastMiddleware,
       mergedTypingIndicatorMiddleware
     ]
   );
 
-  return (
-    <StyleOptionsComposer styleOptions={styleOptions}>
-      <Context.Provider value={context}>{children}</Context.Provider>
-    </StyleOptionsComposer>
-  );
+  return <Context.Provider value={context}>{children}</Context.Provider>;
 };
 
-ThemeProvider.displayName = 'ThemeProvider';
-
 export default memo(ThemeProvider);
-export { themeProviderPropsSchema, type ThemeProviderProps };