botframework-webchat-fluent-theme 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/components/activity/private/isAIGeneratedActivity.ts

@@ -0,0 +1,5 @@
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isAIGeneratedActivity(activity: undefined | WebChatActivity) {
+  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords?.includes('AIGeneratedContent'));
+}

package/src/components/activity/private/useActivityAuthor.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function useActivityAuthor(activity?: WebChatActivity | undefined) {
+  return useMemo(() => {
+    const entity = getOrgSchemaMessage(activity?.entities || []);
+    return typeof entity?.author === 'string'
+      ? {
+          '@type': 'Person',
+          description: undefined,
+          image: undefined,
+          name: entity?.author
+        }
+      : entity?.author;
+  }, [activity]);
+}

package/src/components/activity/private/useActivityStyleOptions.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { hooks, type WebChatActivity } from 'botframework-webchat-component';
+import { type StrictStyleOptions } from 'botframework-webchat-api';
+
+const { useStyleOptions } = hooks;
+
+export default function useActivityStyleOptions(activity?: WebChatActivity | undefined) {
+  const [styleOptions] = useStyleOptions();
+  return useMemo<readonly [Readonly<StrictStyleOptions>]>(
+    () =>
+      Object.freeze([
+        {
+          ...styleOptions,
+          ...activity?.channelData?.webChat?.styleOptions
+        }
+      ]),
+    [activity?.channelData?.webChat?.styleOptions, styleOptions]
+  );
+}

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/dropZone/DropZone.module.css

@@ -8,16 +8,15 @@
   place-content: center;
   place-items: center;
   position: absolute;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {
-  background-color: #e00;
-  color: White
+  background-color: var(--webchat-colorBrandBackground2Hover);
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {
-  height: 36px;
+  font-size: 36px;
   /* Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the "--droppable" modifier.*/
   pointer-events: none;
-  width: 36px
 }

package/src/components/dropZone/DropZone.tsx

@@ -1,6 +1,14 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
-import React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type DragEvent as ReactDragEvent,
+  type DragEventHandler
+} from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 import { AddDocumentIcon } from '../../icons';
@@ -10,14 +18,20 @@ import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;
 
-const handleDragOver: DragEventHandler<HTMLDivElement> = event => {
-  // This is for preventing the browser from opening the dropped file in a new tab.
+const handleDragOver = (event: ReactDragEvent<unknown> | DragEvent) => {
+  // Prevent default dragover behavior to enable drop event triggering.
+  // Browsers require this to fire subsequent drop events - without it,
+  // they would handle the drop directly (e.g., open files in new tabs).
+  // This is needed regardless of whether we prevent default drop behavior,
+  // as it ensures our dropzone receives the drop event first. If we allow
+  // default drop handling (by not calling preventDefault there), the browser
+  // will still process the drop after our event handlers complete.
   event.preventDefault();
 };
 
 // Notes: For files dragging from outside of browser, it only tell us if it is a "File" instead of "text/plain" or "text/uri-list".
 //        For images dragging inside of browser, it only tell us that it is "text/plain", "text/uri-list" and "text/html". But not "image/*".
-//        So we cannot whitelist what is droppable.
+//        So we cannot allowlist what is droppable.
 //        We are using case-insensitive of type "files" so we can drag in WebDriver.
 const isFilesTransferEvent = (event: DragEvent) =>
   !!event.dataTransfer?.types?.some(type => type.toLowerCase() === 'files');
@@ -47,6 +61,8 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
     let entranceCounter = 0;
 
     const handleDragEnter = (event: DragEvent) => {
+      document.addEventListener('dragover', handleDragOver);
+
       entranceCounter++;
 
       if (isFilesTransferEvent(event)) {
@@ -62,12 +78,31 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
 
     const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
 
-    document.addEventListener('dragenter', handleDragEnter, false);
-    document.addEventListener('dragleave', handleDragLeave, false);
+    const handleDragEnd = () => {
+      document.removeEventListener('dragover', handleDragOver);
+
+      entranceCounter = 0;
+
+      setDropZoneState(false);
+    };
+
+    const handleDocumentDrop = (event: DragEvent) => {
+      if (!dropZoneRef.current?.contains(event.target as Node)) {
+        handleDragEnd();
+      }
+    };
+
+    document.addEventListener('dragend', handleDragEnd);
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('drop', handleDocumentDrop);
 
     return () => {
+      document.removeEventListener('dragend', handleDragEnd);
       document.removeEventListener('dragenter', handleDragEnter);
       document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('drop', handleDocumentDrop);
     };
   }, [setDropZoneState]);
 

package/src/components/linerActivity/index.ts

@@ -0,0 +1,2 @@
+export { default as isLinerMessageActivity } from './private/isLinerMessageActivity';
+export { default as LinerMessageActivity } from './private/LinerActivity';

package/src/components/linerActivity/private/LinerActivity.tsx

@@ -0,0 +1,20 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo } from 'react';
+import { useStyles } from '../../../styles/index.js';
+import styles from './LinerMessageActivity.module.css';
+
+type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
+
+const LinerMessageActivity = ({ activity }: Props) => {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['liner-message-activity']} role="separator">
+      <span className={classNames['liner-message-activity__text']}>{activity.text}</span>
+    </div>
+  );
+};
+
+LinerMessageActivity.displayName = 'LinerMessageActivity';
+
+export default memo(LinerMessageActivity);

package/src/components/linerActivity/private/LinerMessageActivity.module.css

@@ -0,0 +1,28 @@
+:global(.webchat-fluent) .liner-message-activity {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground3);
+  display: flex;
+  flex-direction: row;
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat-fontSizeBase200);
+  font-weight: var(--webchat-fontWeightRegular);
+  gap: var(--webchat-spacingHorizontalM);
+  line-height: var(--webchat-lineHeightBase200);
+  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
+  text-align: center;
+  width: 100%;
+
+  &::before,
+  &::after {
+    border-top: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    content: '';
+    display: flex;
+    flex: auto;
+    min-width: 8px;
+  }
+}
+
+:global(.webchat-fluent) .liner-message-activity__text {
+  text-align: center;
+}

package/src/components/linerActivity/private/isLinerMessageActivity.ts

@@ -0,0 +1,7 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isLinerMessageActivity(
+  activity: undefined | WebChatActivity
+): activity is WebChatActivity & { type: 'message'; from: { role: 'channel' } } {
+  return !!(activity && activity.from.role === 'channel' && activity.type === 'message' && 'text' in activity);
+}

package/src/components/preChatActivity/PreChatMessageActivity.module.css

@@ -0,0 +1,56 @@
+:global(.webchat-fluent) .pre-chat-message-activity {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--webchat-spacingHorizontalXXXL);
+  grid-template-areas: 'body' 'toolbar';
+  grid-template-rows: auto auto;
+  padding: var(--webchat-spacingHorizontalXXXL) var(--webchat-spacingHorizontalM);
+  position: relative;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body {
+  align-items: center;
+  display: flex;
+  flex-flow: column nowrap;
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: var(--webchat-fontSizeBase300);
+  font-weight: var(--webchat-fontWeightRegular);
+  gap: var(--webchat-spacingVerticalXS);
+  grid-area: body;
+  line-height: var(--webchat-lineHeightBase300);
+  text-align: center;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body--blueprint {
+  opacity: 60%;
+
+  .pre-chat-message-activity__body-avatar {
+    filter: grayscale(1);
+  }
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body-avatar {
+  border-radius: var(--webchat-borderRadiusMedium);
+  height: 64px;
+  margin-block-end: var(--webchat-spacingVerticalM);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body-title {
+  color: var(--webchat-colorNeutralForeground1);
+  font-family: inherit;
+  font-size: var(--webchat-fontSizeHero700);
+  font-weight: var(--webchat-fontWeightSemibold);
+  line-height: var(--webchat-lineHeightHero700);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body-subtitle {
+  font-size: var(--webchat-fontSizeBase300);
+  line-height: var(--webchat-lineHeightBase300);
+  overflow-wrap: anywhere;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__toolbar {
+  grid-area: toolbar;
+}

package/src/components/preChatActivity/PreChatMessageActivity.tsx

@@ -0,0 +1,60 @@
+import { hooks } from 'botframework-webchat-component';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { memo, useMemo } from 'react';
+import { useStyles } from '../../styles/index.js';
+import styles from './PreChatMessageActivity.module.css';
+import StarterPromptsToolbar from './StarterPromptsToolbar.js';
+import { useActivityAuthor } from '../activity/index.js';
+
+type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
+
+const { useLocalizer, useRenderMarkdownAsHTML, useUIState } = hooks;
+
+const PreChatMessageActivity = ({ activity }: Props) => {
+  const [uiState] = useUIState();
+  const classNames = useStyles(styles);
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+  const localize = useLocalizer();
+
+  const author = useActivityAuthor(activity);
+
+  const html = useMemo(
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(author?.description || '') } : { __html: '' }),
+    [author?.description, renderMarkdownAsHTML]
+  );
+
+  return (
+    <div className={classNames['pre-chat-message-activity']}>
+      {author && (
+        <div
+          className={cx(
+            classNames['pre-chat-message-activity__body'],
+            uiState === 'blueprint' && classNames['pre-chat-message-activity__body--blueprint']
+          )}
+        >
+          {author.image && (
+            <img
+              alt={localize('AVATAR_ALT', author.name)}
+              className={classNames['pre-chat-message-activity__body-avatar']}
+              src={author.image}
+            />
+          )}
+          {author.name && <h2 className={classNames['pre-chat-message-activity__body-title']}>{author.name}</h2>}
+          {author.description && (
+            // eslint-disable-next-line react/no-danger
+            <div className={classNames['pre-chat-message-activity__body-subtitle']} dangerouslySetInnerHTML={html} />
+          )}
+        </div>
+      )}
+      <StarterPromptsToolbar
+        cardActions={activity.suggestedActions?.actions || []}
+        className={classNames['pre-chat-message-activity__toolbar']}
+      />
+    </div>
+  );
+};
+
+PreChatMessageActivity.displayName = 'PreChatMessageActivity';
+
+export default memo(PreChatMessageActivity);

package/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -0,0 +1,126 @@
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-box {
+  appearance: none;
+  background-color: var(--webchat-colorNeutralBackground1);
+  border: 0;
+  border-radius: 16px;
+  box-shadow: var(--webchat-shadow2);
+  color: var(--webchat-colorNeutralForeground1);
+  cursor: pointer;
+  display: grid;
+  gap: var(--webchat-spacingVerticalS);
+  grid-template-areas: 'title' 'subtitle';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+  padding: 16px 20px;
+  text-align: left;
+  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  user-select: none;
+
+  &:has(.pre-chat-message-activity__card-action-image) {
+    grid-template-areas: 'image title' 'image subtitle';
+    grid-template-columns: 20px 1fr;
+  }
+
+  &:empty {
+    row-gap: 14px;
+  }
+
+  &[aria-disabled='true'],
+  &:empty {
+    cursor: default;
+  }
+
+  &[aria-disabled='true']:not(:empty) {
+    background-color: var(--webchat-colorNeutralBackgroundDisabled);
+  }
+
+  &:hover:not([aria-disabled='true'], :empty) {
+    background-color: var(--webchat-colorNeutralBackground1Hover);
+  }
+
+  &:active:not([aria-disabled='true'], :empty) {
+    background-color: var(--webchat-colorNeutralBackground1Pressed);
+  }
+
+  &:focus-visible {
+    outline: solid 2px var(--webchat-colorStrokeFocus2);
+    outline-offset: -2px;
+  }
+
+  &:empty::after,
+  &:empty::before {
+    animation: blueprintAnimation 3s linear infinite;
+    background-attachment: fixed;
+    background-image: linear-gradient(
+      -90deg,
+      var(--webchat-colorNeutralStencil1) 0%,
+      var(--webchat-colorNeutralStencil2) 50%,
+      var(--webchat-colorNeutralStencil1) 100%
+    );
+    background-size: 300% 100%;
+    content: '';
+    display: block;
+  }
+
+  /* animation-* needs to position after animation shorthand. */
+  @media (prefers-reduced-motion: reduce) {
+    &:empty::after,
+    &:empty::before {
+      animation-delay: -1s;
+      animation-play-state: paused;
+    }
+  }
+
+  &:dir(rtl) {
+    &:empty::after,
+    &:empty::before {
+      animation-direction: reverse;
+    }
+  }
+
+  &:empty::after {
+    border-radius: 16px;
+    height: 16px;
+    width: 100%;
+  }
+
+  &:empty::before {
+    border-radius: 18px;
+    height: 18px;
+    width: 66%;
+  }
+}
+
+@keyframes blueprintAnimation {
+  from {
+    background-position-x: 0%;
+  }
+
+  to {
+    background-position-x: -300%;
+  }
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-image {
+  color: var(--webchat-colorNeutralForeground4);
+  font-size: 20px;
+  grid-area: image;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-subtitle {
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  font-weight: var(--webchat-fontWeightRegular);
+  grid-area: subtitle;
+  line-height: 20px;
+  pointer-events: none; /* Links in subtitle are not clickable. */
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-title {
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  font-weight: var(--webchat-fontWeightSemibold);
+  grid-area: title;
+  line-height: 20px;
+}