fluent: part grouping decorator and related adjustments

Author: OEvgeny

packages/fluent-theme/src/components/activity/ActivityDecorator.module.css

@@ -63,12 +63,9 @@
   --webchat__bubble--max-width: 100%;
   --webchat__bubble--min-height: 20px;
 
-  display: flex;
-  flex-flow: column nowrap;
-  gap: var(--webchat-spacingVerticalS);
-  margin-inline: var(--webchat-spacingHorizontalM);
   padding: var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalM);
   position: relative;
+  margin-inline: var(--webchat-spacingHorizontalNone);
 
   :global(.stacked-layout) {
     margin: 0;
@@ -85,7 +82,7 @@
     flex-direction: column;
     gap: var(--webchat-spacingVerticalS);
     margin-block: calc(var(--webchat-spacingVerticalS) * -1);
-    margin-inline: 20px calc(var(--webchat-spacingHorizontalS) * -1);
+    margin-inline: calc(var(--webchat-spacingHorizontalS) * -1);
     padding-block: var(--webchat-spacingVerticalS);
     padding-inline: var(--webchat-spacingHorizontalS);
   }

packages/fluent-theme/src/components/activity/ActivityDecorator.tsx

@@ -1,24 +1,14 @@
 import { WebChatActivity } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { ReactNode, memo } from 'react';
-import useVariants from '../../private/useVariants';
 import { useStyles, useVariantClassName } from '../../styles';
 import styles from './ActivityDecorator.module.css';
-import CopilotMessageHeader from './CopilotMessageHeader';
 
-function ActivityDecorator({ activity, children }: Readonly<{ activity: WebChatActivity; children: ReactNode }>) {
+function ActivityDecorator({ children }: Readonly<{ activity: WebChatActivity; children: ReactNode }>) {
   const classNames = useStyles(styles);
-  const variants = useVariants();
   const variantClassName = useVariantClassName(styles);
 
-  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role === 'bot' && !!children;
-
-  return (
-    <div className={cx(classNames['activity-decorator'], variantClassName)}>
-      {shouldRenderHeader && <CopilotMessageHeader activity={activity} />}
-      {children}
-    </div>
-  );
+  return <div className={cx(classNames['activity-decorator'], variantClassName)}>{children}</div>;
 }
 
 ActivityDecorator.displayName = 'ActivityDecorator';

packages/fluent-theme/src/components/activity/ActivityLoader.tsx

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

packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx

@@ -0,0 +1,36 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { PartGrouping } from 'botframework-webchat-component/internal';
+import cx from 'classnames';
+import React, { memo } from 'react';
+
+import CopilotMessageHeader from './CopilotMessageHeader';
+import useVariants from '../../private/useVariants';
+import { useStyles, useVariantClassName } from '../../styles';
+
+import styles from './PartGroupingingDecorator.module.css';
+
+type PartGroupingDecoratorProps = Readonly<{
+  activities: readonly WebChatActivity[];
+  children?: React.ReactNode;
+}>;
+
+function PartGroupingDecorator(props: PartGroupingDecoratorProps) {
+  const {
+    activities: [activity]
+  } = props;
+  const variants = useVariants();
+  const classNames = useStyles(styles);
+  const variantClassName = useVariantClassName(styles);
+
+  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role === 'bot';
+
+  return (
+    <div className={cx(classNames['part-grouping-decorator'], variantClassName)}>
+      {shouldRenderHeader && <CopilotMessageHeader activity={activity} />}
+      <PartGrouping {...props} />
+    </div>
+  );
+}
+
+export default memo(PartGroupingDecorator);
+export { type PartGroupingDecoratorProps };

packages/fluent-theme/src/components/activity/PartGroupingingDecorator.module.css

@@ -0,0 +1,116 @@
+:global(.webchat-fluent) .part-grouping-decorator {
+  display: grid;
+  font-family: var(--webchat-fontFamilyBase);
+  gap: var(--webchat-spacingVerticalS);
+  margin-inline: var(--webchat-spacingHorizontalM) var(--webchat-spacingHorizontalXXL);
+
+  :global(.stacked-layout) {
+    margin-inline: var(--webchat-spacingHorizontalNone);
+  }
+
+  :global(.stacked-layout .collapsible-grouping__header) {
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
+    position: relative;
+
+    :global(.webchat__activity-button) {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: var(--webchat-fontSizeBase300);
+      padding: var(--webchat-spacingVerticalXXS) var(--webchat-spacingHorizontalXS);
+
+      &::after {
+        content: '';
+        cursor: pointer;
+        display: block;
+        inset: 0;
+        position: absolute;
+      }
+    }
+  }
+
+  :global(.stacked-layout .collapsible-grouping__content) {
+    gap: var(--webchat-spacingVerticalS);
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalL);
+  }
+
+  :global(.stacked-layout .collapsible-grouping) {
+    display: grid;
+    gap: var(--webchat-spacingVerticalM);
+  }
+
+  :global(.stacked-layout .stacked-layout__title),
+  :global(.collapsible-grouping__title) {
+    color: var(--webchat-colorNeutralForeground2);
+    font-size: var(--webchat-fontSizeBase300);
+    font-weight: var(--webchat-fontWeightSemibold);
+    line-height: var(--webchat-lineHeightBase300);
+  }
+
+  :global(.stacked-layout .stacked-layout__title .collapsible-content__summary-text) {
+    flex: none;
+  }
+
+  :global(.collapsible-grouping) {
+    border: none;
+    max-width: 100%;
+
+    :global(.collapsible-grouping__header) {
+      border: none;
+    }
+
+    :global(.stacked-layout__message-status) {
+      color: var(--webchat-colorNeutralForeground2);
+      font-size: var(--webchat-fontSizeBase400);
+      margin-block: var(--webchat__bubble--block-padding);
+      margin-inline-start: var(--webchat__bubble--block-padding);
+
+      :global(.component-icon) {
+        height: 19px;
+        width: 19px;
+      }
+    }
+
+    :global(.stacked-layout .activity-loader) {
+      display: none;
+    }
+
+    :global(.activity-decorator .webchat__bubble .webchat__bubble__content) {
+      gap: var(--webchat-spacingVerticalXS);
+      box-sizing: content-box;
+    }
+  }
+
+  &.variant-fluent {
+    :global(.stacked-layout .stacked-layout__message-status) {
+      margin-inline-end: calc(var(--webchat-spacingHorizontalS) * -1);
+    }
+  }
+
+  &.variant-copilot {
+    :global(.collapsible-grouping__content) {
+      anchor-name: --webchat-flair;
+      background: var(--webchat-colorNeutralBackground1);
+      border-radius: var(--webchat-borderRadius2XLarge);
+      margin: calc(var(--webchat-spacingVerticalMNudge) * -1) var(--webchat-spacingHorizontalNone);
+
+      &:global(.collapsible-grouping__content--open) {
+        margin: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
+      }
+    }
+
+    :global(.stacked-layout .stacked-layout__message-status) {
+      margin-inline-end: var(--webchat-spacingHorizontalS);
+    }
+
+    :global(.collapsible-grouping__content .border-flair) {
+      border-radius: var(--webchat-borderRadius2XLarge);
+      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+      position-anchor: --webchat-flair;
+    }
+
+    :global(.webchat__bubble:not(.webchat__bubble--from-user)::after) {
+      outline-offset: 4px;
+    }
+  }
+}

packages/fluent-theme/src/components/theme/Theme.module.css

@@ -165,6 +165,7 @@
   --webchat-borderRadiusMedium: var(--borderRadiusMedium, 4px);
   --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);
   --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);
+  --webchat-borderRadius2XLarge: var(--borderRadius2XLarge, 12px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/strokeWidths.ts */
   --webchat-strokeWidthThin: var(--strokeWidthThin, 1px);
@@ -283,42 +284,70 @@
 
 /* Transcript focus indicator color when in focus-visible state */
 :global(.webchat-fluent).theme
-  :global(
-    .webchat__basic-transcript
-    .webchat__basic-transcript__terminator:focus-visible
-    + .webchat__basic-transcript__focus-indicator
-  ) {
+  :global(.transcript-focus-area .transcript-focus-area__terminator + .transcript-focus-area__transcript-indicator) {
   border-color: var(--webchat-colorStrokeFocus2);
 }
 
-/* Transcript Activity indicator without focus-visible state */
-:global(.webchat-fluent).theme
-  :global(.webchat__basic-transcript:not(:focus-visible) .webchat__basic-transcript__activity-indicator--focus) {
+/* Transcript Content indicator without focus-visible state */
+:global(.webchat-fluent).theme :global(.transcript-focus-area:not(:focus-visible) .transcript-focus-area__indicator) {
   /* Hide activity focus when no focus-visible state */
   display: none;
 }
 
-/* Transcript Focus indicator when activity focused */
+/* Transcript Focus indicator when content focused */
 :global(.webchat-fluent).theme
-  :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) {
-  :global(.webchat__basic-transcript__focus-indicator) {
+  :global(.transcript-focus-area:focus-visible:has(.transcript-focus-area__content--focused)) {
+  :global(.transcript-focus-area__transcript-indicator) {
     /* Hide transcript focus when an activity is focused */
     display: none;
   }
 }
 
-/* Transcript focused activity */
-:global(.webchat-fluent).theme
-  :global(
-    .webchat__basic-transcript:focus-visible
-    .webchat__basic-transcript__activity:has(.webchat__basic-transcript__activity-indicator--focus)
-  ) {
-  :global(.webchat__basic-transcript__activity-indicator--focus) {
-    /* Hide transcript activity focus when the activity is focused */
+/* Transcript focused content */
+:global(.webchat-fluent).theme :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
+  :global(.transcript-focus-area__indicator) {
+    /* Hide transcript activity focus when the content is focused */
+    display: none;
+  }
+
+  /* Transcript ctivity focused directly */
+  > :global(.transcript-focus-area__content-root > .webchat__focus-trap .webchat__bubble) {
+    display: grid;
+    grid-template-areas: 'focused-content';
+    position: static;
+
+    :global(.webchat__bubble__content) {
+      grid-area: focused-content;
+    }
+
+    &::after {
+      border-radius: var(--webchat__bubble--border-radius);
+      content: '';
+      grid-area: focused-content;
+      height: 100%;
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      pointer-events: none;
+      width: 100%;
+    }
+  }
+
+  &:has(:global(.collapsible-grouping)) > :global(.transcript-focus-area__indicator) {
+    border-radius: var(--webchat-borderRadiusXLarge);
+    border: none;
+    box-sizing: content-box;
+    display: block;
+    height: calc(100% - var(--webchat-spacingVerticalXS));
+    margin: 0;
+    margin: var(--webchat-spacingVerticalXXS) calc(var(--webchat-spacingHorizontalSNudge) * -1);
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalSNudge);
+    width: 100%;
+  }
+
+  :global(.activity-decorator .webchat__bubble .webchat__bubble__nub-pad) {
     display: none;
   }
 
-  :global(.webchat__bubble)::after,
   :global(.pre-chat-message-activity)::after {
     border-radius: var(--webchat__bubble--border-radius);
     content: '';
@@ -596,13 +625,6 @@
   }
 }
 
-/* Monochrome image masker */
-:global(.webchat-fluent).theme :global(.webchat__monochrome-image-masker) {
-  background-color: currentColor;
-  height: 1em;
-  width: 1em;
-}
-
 /* Feedback button */
 :global(.webchat-fluent).theme :global(.webchat__thumb-button) {
   :global(.webchat__thumb-button__image) {

packages/fluent-theme/src/private/FluentThemeProvider.tsx

@@ -2,6 +2,7 @@
 import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import {
   createActivityBorderMiddleware,
+  createActivityGroupingMiddleware,
   DecoratorComposer,
   type DecoratorMiddleware
 } from 'botframework-webchat-api/decorator';
@@ -20,6 +21,7 @@ import { WebChatTheme } from '../components/theme';
 import SlidingDotsTypingIndicator from '../components/typingIndicator/SlidingDotsTypingIndicator';
 import { createStyles } from '../styles';
 import VariantComposer, { VariantList } from './VariantComposer';
+import PartGroupDecorator from '../components/activity/PartGroupingDecorator';
 
 const { ThemeProvider } = Components;
 
@@ -54,6 +56,12 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
 const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([
+  createActivityGroupingMiddleware(next => request => {
+    if (request.groupingName === 'part') {
+      return PartGroupDecorator;
+    }
+    return next(request);
+  }),
   createActivityBorderMiddleware(function FluentBorderLoader({ request, Next, ...props }) {
     return (
       <ActivityLoader showLoader={props.showLoader ?? request.livestreamingState === 'preparing'}>