botframework-webchat-fluent-theme 4.18.1-main.20250313.cd86ef9 → 4.18.1-main.20250320.abcd9e7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250313.cd86ef9",
+  "version": "4.18.1-main.20250320.abcd9e7",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -72,15 +72,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^22.13.4",
     "@types/react": "^16.14.62",
-    "botframework-webchat-base": "4.18.1-main.20250313.cd86ef9",
-    "botframework-webchat-styles": "4.18.1-main.20250313.cd86ef9",
+    "botframework-webchat-base": "4.18.1-main.20250320.abcd9e7",
+    "botframework-webchat-styles": "4.18.1-main.20250320.abcd9e7",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250313.cd86ef9",
-    "botframework-webchat-component": "4.18.1-main.20250313.cd86ef9",
-    "botframework-webchat-core": "4.18.1-main.20250313.cd86ef9",
+    "botframework-webchat-api": "4.18.1-main.20250320.abcd9e7",
+    "botframework-webchat-component": "4.18.1-main.20250320.abcd9e7",
+    "botframework-webchat-core": "4.18.1-main.20250320.abcd9e7",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/activity/ActivityLoader.tsx

@@ -3,23 +3,17 @@ import cx from 'classnames';
 import React, { Fragment, memo, type ReactNode } from 'react';
 
 import { useVariantClassName } from '../../styles';
+import SlidingDots from '../assets/SlidingDots';
 import styles from './ActivityLoader.module.css';
 
-const loadingAnimationUrl =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MDAgMjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSIxMDAlIiB5MT0iMCIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2FkNWFlMTsjYWQ1YWUxOyMwRTk0RTE7IzBFOTRFMTsjNjY5ZmMyOyM2NjlmYzI7I2FkNWFlMSIvPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjUwJSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3RvcC1jb2xvciIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IiNlOTYxOGQ7I2U5NjE4ZDsjNTdBQjgyOyM1N0FCODI7IzYzNzdlMDsjNjM3N2UwOyNlOTYxOGQiLz48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2ZkOWU1ZjsjZmQ5ZTVmOyNDNkMyMjU7I0M2QzIyNTsjOWI4MGVjOyM5YjgwZWM7I2ZkOWU1ZiIvPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2EpIj48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI2OzI2OzA7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDszMDszMDsyMDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE7MTswOzAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjI7NjI7NzI7NzI7MjY7MjY7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTA0OzEwNDsyMDsyMDs3MDs3MDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxOzE7MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxODI7MTgyOzEwODsxMDg7MTEyOzExMjsyNiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMTg7MjE4OzE4NDsxODQ7MTQ4OzE0ODs2MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjA7NjA7ODA7ODA7NDA7NDA7MTA0Ii8+PC9yZWN0PjxyZWN0IGhlaWdodD0iMjAiIHJ4PSIxMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI5NDsyOTQ7MjgwOzI4MDsyMDQ7MjA0OzE4MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDA7NDA7MjA7MjA7ODA7ODA7MjAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMzUwOzM1MDszMTY7MzE2OzMwMDszMDA7MjE4Ii8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0id2lkdGgiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMDs2MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIzODY7Mzg2OzM5MjszOTI7MzM2OzMzNjsyOTQiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ3aWR0aCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC41OzAuNjY7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMjA7MjA7NDA7NDAiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwOzA7MTsxIi8+PC9yZWN0PjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDIyOzQyMjs0Mjg7NDI4OzM5MjszOTI7MzUwIi8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIycyIga2V5VGltZXM9IjA7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjA7MDsxIi8+PC9yZWN0PjwvZz48L3N2Zz4=';
-
 function FluentActivityLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
   const classNames = useStyles(styles);
   const variantClassName = useVariantClassName(classNames);
+
   return (
     <Fragment>
       {children}
-      <img
-        alt=""
-        className={cx(classNames['activity-loader'], variantClassName)}
-        role="presentation"
-        src={loadingAnimationUrl}
-      />
+      <SlidingDots className={cx(classNames['activity-loader'], variantClassName)} />
     </Fragment>
   );
 }

package/src/components/assets/AssetComposer.tsx

@@ -0,0 +1,37 @@
+import { type ContextOf } from 'botframework-webchat-api';
+import React, { memo, useEffect, useMemo, type ReactNode } from 'react';
+
+import { type AssetName } from './AssetName';
+import Context from './private/Context';
+
+type ContextType = ContextOf<typeof Context>;
+
+type AssetComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+const SLIDING_DOTS_SVG_STRING =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="20" viewBox="0 0 400 20"><defs><linearGradient id="a" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%"><animate attributeName="stop-color" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="#ad5ae1;#ad5ae1;#0E94E1;#0E94E1;#669fc2;#669fc2;#ad5ae1"/></stop><stop offset="50%"><animate attributeName="stop-color" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="#e9618d;#e9618d;#57AB82;#57AB82;#6377e0;#6377e0;#e9618d"/></stop><stop offset="100%"><animate attributeName="stop-color" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="#fd9e5f;#fd9e5f;#C6C225;#C6C225;#9b80ec;#9b80ec;#fd9e5f"/></stop></linearGradient></defs><g fill="url(#a)"><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.5;0.66;1" repeatCount="indefinite" values="26;26;0;0"/><animate attributeName="width" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;1" repeatCount="indefinite" values="20;20;30;30;20;20"/><animate attributeName="opacity" dur="2s" keyTimes="0;0.5;0.66;1" repeatCount="indefinite" values="1;1;0;0"/></rect><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="62;62;72;72;26;26;0"/><animate attributeName="width" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="104;104;20;20;70;70;20"/><animate attributeName="opacity" dur="2s" keyTimes="0;0.8;1" repeatCount="indefinite" values="1;1;0"/></rect><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="182;182;108;108;112;112;26"/><animate attributeName="width" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;1" repeatCount="indefinite" values="20;20;60;60;20;20"/></rect><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="218;218;184;184;148;148;62"/><animate attributeName="width" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="60;60;80;80;40;40;104"/></rect><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="294;294;280;280;204;204;182"/><animate attributeName="width" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="40;40;20;20;80;80;20"/></rect><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="350;350;316;316;300;300;218"/><animate attributeName="width" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="20;20;60;60;20;20;60"/></rect><rect height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="386;386;392;392;336;336;294"/><animate attributeName="width" dur="2s" keyTimes="0;0.5;0.66;1" repeatCount="indefinite" values="20;20;40;40"/><animate attributeName="opacity" dur="2s" keyTimes="0;0.5;0.66;1" repeatCount="indefinite" values="0;0;1;1"/></rect><rect width="20" height="20" rx="10"><animate attributeName="x" dur="2s" keyTimes="0;0.2;0.33;0.5;0.66;0.8;1" repeatCount="indefinite" values="422;422;428;428;392;392;350"/><animate attributeName="opacity" dur="2s" keyTimes="0;0.8;1" repeatCount="indefinite" values="0;0;1"/></rect></g></svg>';
+
+const AssetComposer = memo(({ children }: AssetComposerProps) => {
+  const slidingDotsURL = useMemo(
+    () => URL.createObjectURL(new Blob([SLIDING_DOTS_SVG_STRING], { type: 'image/svg+xml' })),
+    []
+  );
+
+  useEffect(() => () => URL.revokeObjectURL(slidingDotsURL), [slidingDotsURL]);
+
+  const context = useMemo<ContextType>(
+    () =>
+      Object.freeze({
+        urlStateMap: new Map<AssetName, readonly [URL]>([['sliding dots', Object.freeze([new URL(slidingDotsURL)])]])
+      }),
+    [slidingDotsURL]
+  );
+
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+});
+
+AssetComposer.displayName = 'AssetComposer';
+
+export default AssetComposer;

package/src/components/assets/AssetName.ts

@@ -0,0 +1 @@
+export type AssetName = 'sliding dots';

package/src/components/assets/SlidingDots.tsx

@@ -0,0 +1,61 @@
+import { hooks } from 'botframework-webchat-component';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import useAssetURL from './private/useAssetURL';
+
+const { useLocalizer, useShouldReduceMotion } = hooks;
+
+type SlidingDotsProps = Readonly<{ className: string }>;
+
+const SlidingDots = ({ className }: SlidingDotsProps) => {
+  const [shouldReduceMotion] = useShouldReduceMotion();
+  const [url] = useAssetURL('sliding dots');
+  const localize = useLocalizer();
+  const objectElementRef = useRef<HTMLObjectElement>(null);
+
+  const altText = localize('TYPING_INDICATOR_ALT');
+  const shouldReduceMotionRef = useRefFrom(shouldReduceMotion);
+
+  const pauseAnimations = useCallback(() => {
+    const contentDocument = objectElementRef.current?.contentDocument;
+    const svgElement = contentDocument?.documentElement;
+    const { SVGSVGElement } = contentDocument?.defaultView || {};
+
+    SVGSVGElement && svgElement instanceof SVGSVGElement && svgElement.pauseAnimations();
+  }, [objectElementRef]);
+
+  const unpauseAnimations = useCallback(() => {
+    const contentDocument = objectElementRef.current?.contentDocument;
+    const svgElement = contentDocument?.documentElement;
+    const { SVGSVGElement } = contentDocument?.defaultView || {};
+
+    SVGSVGElement && svgElement instanceof SVGSVGElement && svgElement.unpauseAnimations();
+  }, [objectElementRef]);
+
+  const pauseOrUnpauseAnimations = useCallback(
+    () => (shouldReduceMotionRef.current ? pauseAnimations() : unpauseAnimations()),
+    [pauseAnimations, shouldReduceMotionRef, unpauseAnimations]
+  );
+
+  useEffect(pauseOrUnpauseAnimations, [
+    pauseOrUnpauseAnimations,
+    // Call "pauseOrUnpauseAnimations()" when "shouldReduceMotion" change.
+    shouldReduceMotion
+  ]);
+
+  return (
+    <object
+      aria-label={altText}
+      className={className}
+      data={url.href}
+      onLoad={pauseOrUnpauseAnimations}
+      ref={objectElementRef}
+      type="image/svg+xml"
+    />
+  );
+};
+
+SlidingDots.displayName = 'SlidingDots';
+
+export default memo(SlidingDots);

package/src/components/assets/private/Context.ts

@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+
+import type { AssetName } from '../AssetName';
+
+type ContextType = Readonly<{
+  urlStateMap: ReadonlyMap<AssetName, readonly [URL]>;
+}>;
+
+type ContextAsGetter<T extends Record<string, unknown>> =
+  T extends Record<infer K, infer V> ? Record<K, { get(): V }> : never;
+
+const defaultContextValue: ContextAsGetter<ContextType> = {
+  urlStateMap: {
+    get() {
+      throw new Error('urlMap cannot be used outside of <AssetComposerContext>.');
+    }
+  }
+};
+
+const Context = createContext<ContextType>(Object.create({}, defaultContextValue));
+
+Context.displayName = 'AssetComposerContext';
+
+export default Context;

package/src/components/assets/private/useAssetURL.ts

@@ -0,0 +1,12 @@
+import { type AssetName } from '../AssetName';
+import useContext from './useContext';
+
+export default function useAssetURL(assetName: AssetName): readonly [URL] {
+  const urlState = useContext().urlStateMap.get(assetName);
+
+  if (!urlState) {
+    throw new Error(`botframework-webchat-fluent-theme internal: Asset "${assetName}" was not found.`);
+  }
+
+  return urlState;
+}

package/src/components/assets/private/useContext.ts

@@ -0,0 +1,8 @@
+import { type ContextOf } from 'botframework-webchat-api';
+import { useContext as useReactContext } from 'react';
+
+import Context from './Context';
+
+export default function useContext(): ContextOf<typeof Context> {
+  return useReactContext(Context);
+}

package/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css

@@ -0,0 +1,11 @@
+:global(.webchat-fluent) .sliding-dots-typing-indicator {
+  align-self: start;
+  display: flex;
+  height: 16px;
+  margin: auto var(--webchat-spacingHorizontalMNudge);
+}
+
+:global(.webchat-fluent) .sliding-dots-typing-indicator__image {
+  height: 6px;
+  width: auto;
+}

package/src/components/typingIndicator/SlidingDotsTypingIndicator.tsx

@@ -0,0 +1,19 @@
+import { testIds } from 'botframework-webchat-component';
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+
+import SlidingDots from '../assets/SlidingDots';
+import styles from './SlidingDotsTypingIndicator.module.css';
+
+function SlidingDotsTypingIndicator() {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['sliding-dots-typing-indicator']} data-testid={testIds.typingIndicator}>
+      <SlidingDots className={cx(classNames['sliding-dots-typing-indicator__image'])} />
+    </div>
+  );
+}
+
+export default memo(SlidingDotsTypingIndicator);

package/src/external.umd/botframework-webchat-component/index.ts

@@ -1,4 +1,5 @@
 module.exports = {
   Components: (globalThis as any).WebChat.Components,
-  hooks: (globalThis as any).WebChat.hooks
+  hooks: (globalThis as any).WebChat.hooks,
+  testIds: (globalThis as any).WebChat.testIds
 };

package/src/private/FluentThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { type ActivityMiddleware, type StyleOptions } from 'botframework-webchat-api';
+import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import { DecoratorComposer, DecoratorMiddleware } from 'botframework-webchat-api/decorator';
 import { Components } from 'botframework-webchat-component';
 import { WebChatDecorator } from 'botframework-webchat-component/decorator';
@@ -6,13 +6,15 @@ import React, { memo, type ReactNode } from 'react';
 
 import { ActivityDecorator } from '../components/activity';
 import ActivityLoader from '../components/activity/ActivityLoader';
+import AssetComposer from '../components/assets/AssetComposer';
+import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
 import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
 import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
+import SlidingDotsTypingIndicator from '../components/typingIndicator/SlidingDotsTypingIndicator';
 import { createStyles } from '../styles';
 import VariantComposer, { VariantList } from './VariantComposer';
-import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
 
 const { ThemeProvider } = Components;
 
@@ -55,6 +57,13 @@ const fluentStyleOptions: StyleOptions = Object.freeze({
   feedbackActionsPlacement: 'activity-actions'
 });
 
+const typingIndicatorMiddleware = Object.freeze([
+  () =>
+    next =>
+    (...args) =>
+      args[0].visible ? <SlidingDotsTypingIndicator /> : next(...args)
+] satisfies TypingIndicatorMiddleware[]);
+
 const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
   <VariantComposer variant={variant}>
     <WebChatTheme>
@@ -64,10 +73,13 @@ const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
           sendBoxMiddleware={sendBoxMiddleware}
           styleOptions={fluentStyleOptions}
           styles={styles}
+          typingIndicatorMiddleware={typingIndicatorMiddleware}
         >
-          <WebChatDecorator>
-            <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
-          </WebChatDecorator>
+          <AssetComposer>
+            <WebChatDecorator>
+              <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
+            </WebChatDecorator>
+          </AssetComposer>
         </ThemeProvider>
       </TelephoneKeypadProvider>
     </WebChatTheme>