botframework-webchat-fluent-theme 4.18.1-main.20250803.6044b59 → 4.18.1-main.20250912.cbaf98f

package/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);
@@ -230,8 +231,8 @@
 :global(.webchat-fluent).theme :global(.text-area.text-area--scroll),
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
 :global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block']),
-:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__body),
-:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body) {
+:global(.webchat-fluent).theme :global(.view-code-dialog__body),
+:global(.webchat-fluent).theme :global(.view-code-dialog__code-body) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;
@@ -276,6 +277,11 @@
   }
 }
 
+:global(.webchat-fluent).theme.variant-copilot
+  :global(.transcript-focus-area) {
+    --webchat__transcript--spacing: var(--webchat-spacingVerticalM);
+}
+
 :global(.webchat-fluent).theme.variant-copilot
   :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
   scrollbar-gutter: stable;
@@ -283,42 +289,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__root:has(.transcript-focus-area__terminator:focus-visible) + .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 activity focused directly */
+  > :global(.webchat__focus-trap > .webchat__basic-transcript__activity-body .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;
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      pointer-events: none;
+    }
+  }
+
+  &:has(:global(.collapsible-grouping)) > :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) {
+    display: none;
+  }
+
+  :global(.collapsible-grouping)::after {
+    border-radius: var(--webchat__bubble--border-radius);
+    border: none;
+    content: '';
+    inset: 0;
+    isolation: isolate;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    pointer-events: none;
+    position: absolute;
+  }
+
+  :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: '';
@@ -341,6 +375,13 @@
   }
 }
 
+/* Transcript focused content copilot variant */
+:global(.webchat-fluent).theme.variant-copilot :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
+  :global(.collapsible-grouping)::after {
+    inset: -2px -4px;
+  }
+}
+
 /* Transcript filer in copilot variant */
 :global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__filler) {
   /* No filler unless pre-chat activity, see next rule */
@@ -350,7 +391,7 @@
 /* Transcript with a single pre-chat activity */
 :global(.webchat-fluent).theme
   :global(
-    .webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity)
+    .webchat__basic-transcript:has(.part-grouping-decorator:only-child):has(.pre-chat-message-activity)
     .webchat__basic-transcript__filler
   ) {
   /* limit grow to half of the size to center the activity */
@@ -403,7 +444,7 @@
 }
 
 /* Code block */
-:global(.webchat-fluent).theme :global(.webchat__code-block) {
+:global(.webchat-fluent).theme :global(.code-block) {
   border: none;
   font-family: var(--webchat-fontFamilyMonospace);
   font-size: var(--webchat-fontSizeBase300);
@@ -411,7 +452,7 @@
   --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
   --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
 
-  :global(.webchat__code-block-copy-button) {
+  :global(.code-block-copy-button) {
     background: transparent;
     border: none;
     color: var(--webchat__code-block__copy-button--color);
@@ -421,7 +462,7 @@
     width: 20px;
     transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 
-    :global(.webchat__code-block-copy-button__icon) {
+    :global(.code-block-copy-button__icon) {
       --webchat__component-icon--color: currentColor;
     }
 
@@ -441,16 +482,21 @@
     }
   }
 
-  &:global(:has(.webchat__code-block__body:focus-visible)):focus-within {
+  &:global(:has(.code-block__body:focus-visible)):focus-within {
     outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
     outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
 
-    :global(.webchat__code-block__body) {
+    :global(.code-block__body) {
       outline: none;
     }
   }
 
-  &:global(:has(> .webchat__code-block__theme--github-dark-default)) {
+  :global(.code-block__body) {
+    /* TODO: what is the right value? The value below matches "normal" for contents display */
+    line-height: 1.435;
+  }
+
+  &:global(:has(> .code-block__theme--github-dark-default)) {
     --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey8));
     --webchat__code-block__copy-button--background: var(
       --codeBlockCopyButtonBackgroundPressed,
@@ -460,7 +506,7 @@
     --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey98));
   }
 
-  &:global(:has(> .webchat__code-block__theme--github-light-default)) {
+  &:global(:has(> .code-block__theme--github-light-default)) {
     --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey98));
     --webchat__code-block__copy-button--background: var(--codeBlockBackgroundPressed, var(--webchat-colorGrey92));
     --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonForeground, var(--webchat__color--code-block));
@@ -485,7 +531,7 @@
     width: unset;
   }
 
-  :global(.webchat__code-block-copy-button) {
+  :global(.code-block-copy-button) {
     --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
     --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
 
@@ -504,20 +550,25 @@
     padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
   }
 
-  :global(.webchat__view-code-dialog__title) {
+  :global(.view-code-dialog__title) {
     font-size: var(--webchat-fontSizeBase300);
     font-weight: var(--webchat-fontWeightSemibold);
     line-height: var(--webchat-lineHeightBase300);
   }
 
-  :global(.webchat__view-code-dialog__body) {
+  :global(.view-code-dialog__body) {
     font-family: var(--webchat-fontFamilyMonospace);
     font-size: var(--webchat-fontSizeBase300);
     margin: 0 calc(var(--webchat-spacingHorizontalM) * -1);
     padding: 0 var(--webchat-spacingHorizontalM);
   }
 
-  :global(.webchat__view-code-dialog__footer) {
+  :global(.code-block__body) {
+    /* TODO: what is the right value? The value below matches "normal" for block display */
+    line-height: normal;
+  }
+
+  :global(.view-code-dialog__footer) {
     color: var(--webchat-colorNeutralForeground4);
     font-size: var(--webchat-fontSizeBase100);
     line-height: var(--webchat-lineHeightBase100);
@@ -596,13 +647,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) {

package/src/env.d.ts

@@ -1 +1,11 @@
 /// <reference types="@msinternal/botframework-webchat-styles/env" />
+
+// For adding things to `globalThis`, TypeScript need `var`, not `const` or `let`.
+/* eslint-disable no-var */
+declare global {
+  var WEB_CHAT_BUILD_INFO_BUILD_TOOL: string | undefined;
+  var WEB_CHAT_BUILD_INFO_MODULE_FORMAT: string | undefined;
+  var WEB_CHAT_BUILD_INFO_VERSION: string | undefined;
+}
+
+export {};

package/src/external.umd/botframework-webchat-api/decorator.ts

@@ -1 +1,3 @@
+/// <reference types="node" />
+
 module.exports = (globalThis as any).WebChat.decorator;

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

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+
 module.exports = {
   hooks: (globalThis as any).WebChat.hooks
 };

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

@@ -1 +1,3 @@
+/// <reference types="node" />
+
 module.exports = (globalThis as any).WebChat.decorator;

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

@@ -1 +1,3 @@
+/// <reference types="node" />
+
 module.exports = (globalThis as any).WebChat.internal;

package/src/external.umd/react.ts

@@ -1 +1,3 @@
+/// <reference types="node" />
+
 module.exports = (globalThis as any).React;

package/src/index.ts

@@ -1,18 +1,13 @@
-import { injectMetaTag } from 'inject-meta-tag';
-
 import { SendBox as FluentSendBox } from './components/sendBox/index';
 import FluentThemeProvider from './private/FluentThemeProvider';
 import testIds from './testIds';
 
-const buildTool = process.env['build_tool'];
-const moduleFormat = process.env['module_format'];
-const version = process.env['npm_package_version'];
+export { FluentSendBox, FluentThemeProvider, testIds };
 
-const buildInfo = { buildTool, moduleFormat, version };
+// #region Build info
+import buildInfo from './buildInfo';
 
-injectMetaTag(
-  'botframework-webchat:fluent-theme',
-  `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`
-);
+const { object: buildInfoObject, version } = buildInfo;
 
-export { FluentThemeProvider, FluentSendBox, buildInfo, testIds };
+export { buildInfoObject as buildInfo, version };
+// #endregion

package/src/private/FluentThemeProvider.tsx

@@ -2,15 +2,17 @@
 import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import {
   createActivityBorderMiddleware,
+  createActivityGroupingMiddleware,
   DecoratorComposer,
   type DecoratorMiddleware
 } from 'botframework-webchat-api/decorator';
-import { 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';
 import ActivityLoader from '../components/activity/ActivityLoader';
+import PartGroupDecorator from '../components/activity/PartGroupingDecorator';
 import AssetComposer from '../components/assets/AssetComposer';
 import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
 import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
@@ -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'}>

package/src/tsconfig.json

@@ -1,14 +1,10 @@
 {
-	"compilerOptions": {
-		"allowSyntheticDefaultImports": true,
-		"checkJs": false,
-		"jsx": "react",
-		"moduleResolution": "Bundler",
-		"skipLibCheck": true,
-		"target": "ESNext"
-	},
-	"extends": [
-		"@tsconfig/strictest/tsconfig.json",
-		"@msinternal/botframework-webchat-styles/tsconfig.json"
-	]
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "checkJs": false
+  },
+  "extends": [
+    "@msinternal/botframework-webchat-tsconfig/current",
+    "@msinternal/botframework-webchat-tsconfig/features/cssModules"
+  ]
 }