botframework-webchat-fluent-theme 4.18.1-main.20250708.40736b1 → 4.18.1-main.20250721.cf546fb

package/package.json

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

package/src/components/activity/ActivityDecorator.module.css

@@ -118,7 +118,7 @@
     font-size: var(--webchat-fontSizeBase400);
     line-height: var(--webchat-lineHeightBase400);
     color: var(--webchat-colorNeutralForeground4);
-    margin: var(--webchat__bubble--block-padding) var(--webchat__bubble--inline-padding) 0;
+    margin: var(--webchat__bubble--block-padding) var(--webchat__bubble--inline-padding);
   }
 
   :global(.stacked-layout__attachment-row) {

package/src/components/activity/ActivityLoader.module.css

@@ -6,7 +6,8 @@
   width: auto;
 
   &.variant-fluent {
-    margin: 0 0 var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalSNudge);
+    margin: 0 var(--webchat-spacingHorizontalSNudge) var(--webchat-spacingVerticalM)
+      var(--webchat-spacingHorizontalSNudge);
   }
 
   &.variant-copilot {

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

@@ -22,7 +22,7 @@
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body--blueprint {
-  opacity: 60%;
+  opacity: 65%;
 
   .pre-chat-message-activity__body-avatar {
     filter: grayscale(1);

package/src/components/preChatActivity/StarterPromptsToolbar.tsx

@@ -1,7 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
-import React, { Fragment, memo } from 'react';
+import React, { memo } from 'react';
 import { useStyles } from '../../styles/index.js';
 import StarterPromptsCardAction from './StarterPromptsCardAction.js';
 import styles from './StarterPromptsToolbar.module.css';
@@ -21,13 +21,7 @@ const StarterPromptsToolbar = ({ cardActions, className }: Props) => {
     // TODO: Accessibility-wise, this should be role="toolbar" with keyboard navigation.
     <div className={cx(className, classNames['pre-chat-message-activity__card-action-toolbar'])}>
       <div className={classNames['pre-chat-message-activity__card-action-toolbar-grid']}>
-        {uiState === 'blueprint' ? (
-          <Fragment>
-            <StarterPromptsCardAction />
-            <StarterPromptsCardAction />
-            <StarterPromptsCardAction />
-          </Fragment>
-        ) : (
+        {uiState !== 'blueprint' &&
           cardActions
             .filter<DirectLineCardAction & { type: 'messageBack' }>(
               (card: DirectLineCardAction): card is DirectLineCardAction & { type: 'messageBack' } =>
@@ -35,8 +29,7 @@ const StarterPromptsToolbar = ({ cardActions, className }: Props) => {
             )
             // There is no other usable keys in card actions.
             // eslint-disable-next-line react/no-array-index-key
-            .map((cardAction, index) => <StarterPromptsCardAction key={index} messageBackAction={cardAction} />)
-        )}
+            .map((cardAction, index) => <StarterPromptsCardAction key={index} messageBackAction={cardAction} />)}
       </div>
     </div>
   );

package/src/private/FluentThemeProvider.tsx

@@ -1,14 +1,11 @@
 /* eslint-disable prefer-arrow-callback */
 import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import {
-  ActivityBorderDecoratorRequest,
   createActivityBorderMiddleware,
   DecoratorComposer,
-  type InferDecoratorRequest,
-  useDecoratorRequest,
   type DecoratorMiddleware
 } from 'botframework-webchat-api/decorator';
-import { BorderFlair, WebChatDecorator } from 'botframework-webchat-component/decorator';
+import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import { Components } from 'botframework-webchat-component';
 import React, { memo, type ReactNode } from 'react';
 
@@ -22,7 +19,6 @@ import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
 import SlidingDotsTypingIndicator from '../components/typingIndicator/SlidingDotsTypingIndicator';
 import { createStyles } from '../styles';
-import { composePipeline } from './composePipeline';
 import VariantComposer, { VariantList } from './VariantComposer';
 
 const { ThemeProvider } = Components;
@@ -57,34 +53,14 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
-const FluentDecorator = composePipeline<InferDecoratorRequest<typeof ActivityBorderDecoratorRequest>>([
-  function FluentBorderLoader({ request, Next, ...props }) {
+const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([
+  createActivityBorderMiddleware(function FluentBorderLoader({ request, Next, ...props }) {
     return (
-      <ActivityLoader showLoader={request.livestreamingState === 'preparing'}>
-        <Next {...props} />
+      <ActivityLoader showLoader={props.showLoader ?? request.livestreamingState === 'preparing'}>
+        <Next {...props} showLoader={false} />
       </ActivityLoader>
     );
-  },
-  function FluentBorderFlair({ request, Next, ...props }) {
-    return (
-      <BorderFlair showFlair={request.livestreamingState === 'completing'}>
-        <Next {...props} />
-      </BorderFlair>
-    );
-  }
-]);
-
-FluentDecorator.displayName = 'FluentDecoratorPipeline';
-
-const FluentDecoratorWithRequest = memo(function DecoratorWithRequest(props) {
-  const request = useDecoratorRequest(ActivityBorderDecoratorRequest);
-  return <FluentDecorator {...props} request={request} />;
-});
-
-FluentDecoratorWithRequest.displayName = 'FluentDecoratorWithRequest';
-
-const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([
-  createActivityBorderMiddleware(() => () => FluentDecoratorWithRequest)
+  })
 ]);
 
 const styles = createStyles('fluent-theme');