botframework-webchat-fluent-theme 4.18.1-main.20250701.b63791f → 4.18.1-main.20250708.40736b1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250701.b63791f",
+  "version": "4.18.1-main.20250708.40736b1",
   "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.20250701.b63791f",
-    "botframework-webchat-styles": "4.18.1-main.20250701.b63791f",
+    "botframework-webchat-base": "4.18.1-main.20250708.40736b1",
+    "botframework-webchat-styles": "4.18.1-main.20250708.40736b1",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250701.b63791f",
-    "botframework-webchat-component": "4.18.1-main.20250701.b63791f",
-    "botframework-webchat-core": "4.18.1-main.20250701.b63791f",
+    "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",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

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

@@ -19,7 +19,7 @@
   --webchat-externalLink-maxWidth: var(--externalLink-maxWidth, 204px);
 
   /* Override for stacked layout message which has user message bubble props */
-  &:has(:global(.webchat__stacked-layout .webchat__bubble--from-user)) {
+  &:has(:global(.stacked-layout .webchat__bubble--from-user)) {
     --webchat__bubble--background-color: var(--webchat-colorBrandBackground2);
     --webchat__bubble--block-padding: var(--webchat-spacingVerticalS);
     --webchat__bubble--min-width: auto;
@@ -41,7 +41,7 @@
     margin: 0 0 var(--webchat-spacingHorizontalXXS);
   }
 
-  :global(.webchat__stacked-layout__status) {
+  :global(.stacked-layout__status) {
     order: -1;
   }
 
@@ -70,7 +70,7 @@
   padding: var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalM);
   position: relative;
 
-  :global(.webchat__stacked-layout) {
+  :global(.stacked-layout) {
     margin: 0;
     position: static;
   }
@@ -81,31 +81,24 @@
   }
 
   :global(.webchat__bubble .webchat__bubble__content) {
-    overflow: visible;
-  }
-
-  :global(.webchat__text-content) {
-    margin-inline-start: 28px;
-  }
-
-  :global(.border-loader) {
     display: flex;
-    flex-flow: column nowrap;
+    flex-direction: column;
     gap: var(--webchat-spacingVerticalS);
-    padding-inline-end: var(--webchat-spacingHorizontalM);
-    width: 500px;
+    margin-block: calc(var(--webchat-spacingVerticalS) * -1);
+    margin-inline: 20px calc(var(--webchat-spacingHorizontalS) * -1);
+    padding-block: var(--webchat-spacingVerticalS);
+    padding-inline: var(--webchat-spacingHorizontalS);
   }
 
-  :global(.border-loader__track) {
-    border-radius: inherit;
-    box-sizing: border-box;
-    clip-path: border-box;
-    margin-inline-start: 28px;
-    order: -1;
-    width: auto;
+  :global(.webchat__bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment-list) {
+    margin-block-start: var(--webchat-spacingVerticalS);
+  }
+
+  :global(.webchat__bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment) {
+    max-width: var(--webchat__bubble--max-width);
   }
 
-  :global(.webchat__stacked-layout__status) {
+  :global(.stacked-layout__status) {
     display: none;
   }
 }
@@ -116,36 +109,45 @@
 }
 
 /* Stacked layout */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout) {
   display: flex;
   flex-flow: column nowrap;
+  margin-inline: var(--webchat-spacingHorizontalMNudge);
+
+  :global(.stacked-layout__title) {
+    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;
+  }
+
+  :global(.stacked-layout__attachment-row) {
+    margin-block-start: var(--webchat-spacingVerticalMNudge);
+  }
+
+  &:global(.stacked-layout--no-message .stacked-layout__attachment-row) {
+    margin-block-start: 0;
+  }
 }
 
 /* Stacked layout which has message bubble */
-:global(.webchat-fluent)
-  .activity-decorator
-  :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .stacked-layout__content:has(.webchat__bubble)) {
   max-width: 100%;
   overflow: visible;
 }
 
 /* Message status */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__status) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .stacked-layout__status) {
   font-size: var(--webchat__font-size--small);
   line-height: var(--webchat__line-height--small);
 }
 
 /* Message bubble */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble) {
   max-width: min(var(--webchat__bubble--max-width), 100%);
   min-width: var(--webchat__bubble--min-width);
   overflow: visible;
 
-  /* Take all width available when has message bubble latency loader */
-  &:has(:global(.border-loader)) {
-    width: 100%;
-  }
-
   /* Ensure activity loader doesn't have bubble and shadow */
   &:has(:global(.activity-loader)) :global(.webchat__bubble__content) {
     background: transparent;
@@ -154,9 +156,7 @@
 }
 
 /* Message bubble content */
-:global(.webchat-fluent)
-  .activity-decorator
-  :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__bubble__content) {
   background-color: var(--webchat__bubble--background-color);
   border-radius: var(--webchat__bubble--border-radius);
   border-width: 0;
@@ -168,7 +168,7 @@
 }
 
 /* Message bubble text content */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__text-content) {
   font-size: var(--webchat__font-size--medium);
   line-height: var(--webchat__line-height--medium);
   min-height: auto;
@@ -187,7 +187,7 @@
 /* Message bubble text content generated badge */
 :global(.webchat-fluent)
   .activity-decorator
-  :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) {
+  :global(.stacked-layout .webchat__bubble .webchat__text-content__generated-badge) {
   align-items: center;
   align-self: flex-start;
   background-color: var(--webchat-colorNeutralBackground5);
@@ -203,9 +203,7 @@
 }
 
 /* Message bubble attachment content */
-:global(.webchat-fluent)
-  .activity-decorator
-  :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) {
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__fileContent__badge) {
   cursor: default;
   font-size: var(--webchat-fontSizeBase300);
   line-height: var(--webchat-lineHeightBase300);
@@ -222,10 +220,70 @@
 
 :global(.webchat-fluent)
   .activity-decorator
-  :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__downloadIcon) {
+  :global(.stacked-layout .webchat__bubble .webchat__fileContent__downloadIcon) {
   color: var(--webchat-colorBrandForegroundLink);
 }
 
+/* Message bubble collapsible content */
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .collapsible-content) {
+  :global(.collapsible-content__summary) {
+    margin-block: var(--webchat__bubble--block-padding);
+    margin-inline: var(--webchat__bubble--inline-padding);
+
+    &:focus-visible {
+      border-radius: var(--webchat-borderRadiusSmall);
+      outline-offset: 4px;
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    }
+  }
+
+  :global(.collapsible-content__content) {
+    margin-block: 0 var(--webchat__bubble--block-padding);
+  }
+
+  :global(.collapsible-content__content .stacked-layout__attachment-list) {
+    gap: var(--webchat-spacingVerticalS);
+  }
+
+  :global(.collapsible-content__content .stacked-layout__attachment-row) {
+    margin: 0;
+  }
+
+  :global(.collapsible-content__content .stacked-layout__attachment-row .webchat__text-content) {
+    padding-block: 0;
+  }
+}
+
+/* Message bubble code block content */
+:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .code-block-content) {
+  border-radius: var(--webchat-borderRadiusXLarge);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+  font-size: var(--webchat-fontSizeBase300);
+  font-weight: var(--webchat-fontWeightRegular);
+  margin-block: 0;
+  margin-inline: var(--webchat__bubble--inline-padding);
+
+  :global(.code-block-content__header) {
+    padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL);
+  }
+
+  :global(.code-block-content__code-block) {
+    padding-block: var(--webchat-spacingVerticalM);
+    padding-inline: var(--webchat-spacingHorizontalL) var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__code-block-copy-button) {
+    --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
+    --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
+
+    margin-block-start: var(--webchat-spacingVerticalM);
+    margin-inline-end: var(--webchat-spacingHorizontalL);
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
 /* Markdown links and citation links */
 :global(.webchat-fluent)
   .activity-decorator
@@ -330,9 +388,8 @@
   }
 
   :global(.webchat__link-definitions__header-chevron) {
-    fill: var(--webchat-colorNeutralForeground3);
+    color: var(--webchat-colorNeutralForeground3);
     font-size: var(--webchat__font-size--small);
-    width: 1em;
   }
 
   &:focus-visible {

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

@@ -1,10 +1,15 @@
 :global(.webchat-fluent) .activity-loader {
+  align-self: flex-start;
   flex: none;
   height: 8px;
-  margin: var(--webchat-spacingHorizontalM) 0 0 18px;
+  margin: var(--webchat-spacingVerticalM) 0 0 18px;
   width: auto;
 
   &.variant-fluent {
-    margin: 0 0 var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalSNudge);
+    margin: 0 0 var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalSNudge);
+  }
+
+  &.variant-copilot {
+    margin: var(--webchat-spacingVerticalXS) 0 0 -10px;
   }
 }

package/src/components/activity/ActivityLoader.tsx

@@ -6,14 +6,17 @@ import { useVariantClassName } from '../../styles';
 import SlidingDots from '../assets/SlidingDots';
 import styles from './ActivityLoader.module.css';
 
-function FluentActivityLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+function FluentActivityLoader({
+  children,
+  showLoader = true
+}: Readonly<{ children?: ReactNode | undefined; showLoader?: boolean }>) {
   const classNames = useStyles(styles);
   const variantClassName = useVariantClassName(classNames);
 
   return (
     <Fragment>
       {children}
-      <SlidingDots className={cx(classNames['activity-loader'], variantClassName)} />
+      {showLoader && <SlidingDots className={cx(classNames['activity-loader'], variantClassName)} />}
     </Fragment>
   );
 }

package/src/components/theme/Theme.module.css

@@ -199,6 +199,7 @@
   --webchat__line-height--small: var(--webchat-lineHeightBase200);
   --webchat__line-height--medium: var(--webchat-lineHeightBase300);
   --webchat__max-width--bubble: var(--webchat-bubble-maxWidth);
+  --webchat__max-width--attachment-bubble: var(--webchat-bubble-maxWidth);
   --webchat__min-height--bubble: var(--webchat-bubble-minHeight);
   --webchat__padding--regular: var(--webchat-spacingVerticalS);
   --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalMNudge)
@@ -224,6 +225,7 @@
 }
 
 /* Scrollbars */
+:global(.webchat-fluent).theme :global(.code-block-content .code-block-content__code-block),
 :global(.webchat-fluent).theme :global(.send-box-attachment-bar.send-box-attachment-bar--as-list-item),
 :global(.webchat-fluent).theme :global(.text-area.text-area--scroll),
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),

package/src/private/FluentThemeProvider.tsx

@@ -1,11 +1,15 @@
+/* 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 { Components } from 'botframework-webchat-component';
-import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
 
 import { ActivityDecorator } from '../components/activity';
@@ -18,6 +22,7 @@ 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;
@@ -52,10 +57,34 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
+const FluentDecorator = composePipeline<InferDecoratorRequest<typeof ActivityBorderDecoratorRequest>>([
+  function FluentBorderLoader({ request, Next, ...props }) {
+    return (
+      <ActivityLoader showLoader={request.livestreamingState === 'preparing'}>
+        <Next {...props} />
+      </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(
-    next => request => (request.livestreamingState === 'preparing' ? ActivityLoader : next(request))
-  )
+  createActivityBorderMiddleware(() => () => FluentDecoratorWithRequest)
 ]);
 
 const styles = createStyles('fluent-theme');

package/src/private/composePipeline.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable prefer-arrow-callback */
+import React, { Fragment, memo, type ComponentType, type ReactNode } from 'react';
+
+type PipelineProps<R, P> = Readonly<{ request: R }> & P;
+type InnerPipelineProps<R, P> = PipelineProps<R, P> & Readonly<{ originalRequest: R }>;
+
+type NextComponent<P, R> = ComponentType<P & Readonly<{ request?: R | undefined }>>;
+type ComposedComponent<P, R> = ComponentType<InnerPipelineProps<R, P>>;
+type StageComponent<R, P> = ComponentType<
+  PipelineProps<R, P> & {
+    Next: NextComponent<P, R>;
+  }
+>;
+type PipelineComponent<P, R> = ComponentType<PipelineProps<R, P>>;
+
+const Passthrough = memo(function PipelinePassthrough({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  return <Fragment>{children}</Fragment>;
+});
+
+export function composePipeline<
+  Request,
+  Props extends { children?: ReactNode | undefined } = { children?: ReactNode | undefined }
+>(stages: StageComponent<Request, Props>[], PassthroughComponent = Passthrough): PipelineComponent<Props, Request> {
+  const ComposedPipeline = stages.reduceRight<ComposedComponent<Props, Request>>((Next, Stage) => {
+    const StageMemo = memo(Stage);
+
+    const StageWrapper = memo<InnerPipelineProps<Request, Props>>(({ originalRequest, request, ...innerRest }) => {
+      const resolvedRequest = request ?? originalRequest;
+      return (
+        <StageMemo
+          Next={Next as NextComponent<Props, Request>}
+          request={resolvedRequest}
+          {...(innerRest as Props)}
+          originalRequest={originalRequest}
+        />
+      );
+    });
+    StageWrapper.displayName = `PipelineStage(Memo(${Stage.displayName || Stage.name}))`;
+    return StageWrapper;
+  }, PassthroughComponent);
+
+  return memo(function Pipeline(props: PipelineProps<Request, Props>) {
+    const { request, ...restProps } = props;
+
+    return <ComposedPipeline request={request} {...(restProps as unknown as Props)} originalRequest={request} />;
+  });
+}
+
+export type { NextComponent, PipelineProps, PipelineComponent, StageComponent };