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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.17.1",
+  "version": "4.18.1-hotfix.20260127.b53acdf",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -38,22 +38,25 @@
     "src/**/*"
   ],
   "scripts": {
-    "auditfix": "npm audit fix --legacy-peer-deps || exit 0",
     "build": "tsup",
-    "bump": "npm run bump:prod && npm run bump:dev && npm run bump:auditfix",
-    "bump:auditfix": "npm audit fix --legacy-peer-deps || exit 0",
-    "bump:dev": "if [ `cat package.json | jq -r '.devDependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.devDependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
-    "bump:prod": "if [ `cat package.json | jq -r '.dependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps --save-exact $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.dependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
+    "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
+    "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
+    "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
     "eslint": "npm run precommit",
-    "postauditfix": "npm run postbump",
-    "postbump": "cat package.json | jq '. + (.dependencies = ((.dependencies + (.localPeerDependencies // {})) | to_entries | sort_by(.key) | from_entries)) | (.devDependencies = ((.devDependencies + (.localPeerDevDependencies // {})) | to_entries | sort_by(.key) | from_entries))' > package-temp.json && mv package-temp.json package.json",
-    "preauditfix": "npm run prebump",
-    "prebump": "cat package.json | jq '(((.localPeerDependencies // {}) | keys | map([\"dependencies\", .])) + ((.localPeerDevDependencies // {}) | keys | map([\"devDependencies\", .]))) as $localPeerPaths | delpaths($localPeerPaths)' > package-temp.json && mv package-temp.json package.json",
+    "postversion": "cat package.json | jq '.version as $V | (.localDependencies // {} | with_entries(select(.value == \"production\") | { key: .key, value: $V })) as $L1 | (.localDependencies // {} | with_entries(select(.value == \"development\") | { key: .key, value: $V })) as $L2 | ((.dependencies // {}) + $L1 | to_entries | sort_by(.key) | from_entries) as $D1 | ((.devDependencies // {}) + $L2 | to_entries | sort_by(.key) | from_entries) as $D2 | . + { dependencies: $D1, devDependencies: $D2 }' > package-temp.json && mv package-temp.json package.json",
     "precommit": "npm run precommit:eslint -- src && npm run precommit:typecheck",
     "precommit:eslint": "../../node_modules/.bin/eslint --report-unused-disable-directives --max-warnings 0",
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
+    "preversion": "cat package.json | jq '(.localDependencies // {} | to_entries | map([if .value == \"production\" then \"dependencies\" else \"devDependencies\" end, .key])) as $P | delpaths($P)' > package-temp.json && mv package-temp.json package.json",
     "start": "npm run build -- --watch"
   },
+  "localDependencies": {
+    "botframework-webchat-api": "production",
+    "botframework-webchat-base": "development",
+    "botframework-webchat-component": "production",
+    "botframework-webchat-core": "production",
+    "botframework-webchat-styles": "development"
+  },
   "pinDependencies": {
     "@types/react": [
       "16",
@@ -63,26 +66,24 @@
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.5",
     "@types/math-random": "^1.0.2",
-    "@types/node": "^20.10.3",
-    "@types/react": "^16.14.60",
-    "tsup": "^8.0.2",
-    "typescript": "^5.3.2"
+    "@types/node": "^22.13.4",
+    "@types/react": "^16.14.62",
+    "botframework-webchat-base": "4.18.1-hotfix.20260127.b53acdf",
+    "botframework-webchat-styles": "4.18.1-hotfix.20260127.b53acdf",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.17.1",
-    "botframework-webchat-component": "4.17.1",
-    "botframework-webchat-core": "4.17.1",
-    "classnames": "^2.5.1",
-    "inject-meta-tag": "^0.0.1",
-    "math-random": "^2.0.1",
-    "use-ref-from": "^0.1.0"
+    "botframework-webchat-api": "4.18.1-hotfix.20260127.b53acdf",
+    "botframework-webchat-component": "4.18.1-hotfix.20260127.b53acdf",
+    "botframework-webchat-core": "4.18.1-hotfix.20260127.b53acdf",
+    "classnames": "2.5.1",
+    "inject-meta-tag": "0.0.1",
+    "math-random": "2.0.1",
+    "use-ref-from": "0.1.0",
+    "valibot": "1.1.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6"
-  },
-  "localPeerDependencies": {
-    "botframework-webchat-api": "0.0.0-0",
-    "botframework-webchat-component": "0.0.0-0",
-    "botframework-webchat-core": "0.0.0-0"
   }
 }

package/src/bundle.ts

@@ -1,8 +1,10 @@
+import { SendBox as FluentSendBox } from './components/sendBox/index';
 import { FluentThemeProvider, testIds } from './index';
 
 (globalThis as any).WebChat = {
   ...(globalThis as any).WebChat,
   FluentThemeProvider,
+  FluentSendBox,
   testIds: {
     ...(globalThis as any).WebChat?.testIds,
     ...testIds

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

@@ -0,0 +1,432 @@
+:global(.webchat-fluent) .activity-decorator {
+  display: contents;
+  font-family: var(--webchat__font--primary);
+
+  --webchat__bubble--inline-padding: var(--webchat-spacingHorizontalL);
+  --webchat__bubble--block-padding: var(--webchat-spacingVerticalM);
+  --webchat__bubble--min-height: var(--webchat-bubble-minHeight);
+  --webchat__bubble--max-width: var(--webchat-bubble-maxWidth);
+  --webchat__bubble--min-width: var(--webchat-bubble-minWidth);
+
+  --webchat-bubble-maxWidth: var(--bubble-maxWidth, max(450px, 75%));
+  --webchat-bubble-minWidth: var(--bubble-minWidth, auto);
+  --webchat-bubble-minHeight: var(--bubble-minHeight, 36px);
+  --webchat-externalLink-mask: var(
+    --externalLink-mask,
+    var(--webchat__icon-url--external-link) center center /
+    10px 10px
+  );
+  --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)) {
+    --webchat__bubble--background-color: var(--webchat-colorBrandBackground2);
+    --webchat__bubble--block-padding: var(--webchat-spacingVerticalS);
+    --webchat__bubble--min-width: auto;
+  }
+}
+
+/* Decorator fluent variant */
+:global(.webchat-fluent) .activity-decorator.variant-fluent {
+  --webchat__bubble--background-color: var(--webchat-colorNeutralBackground1);
+  --webchat__bubble--border-radius: var(--webchat-borderRadiusXLarge);
+  --webchat__bubble--box-shadow: var(--webchat-shadow4);
+}
+
+/* Decorator copilot variant */
+:global(.webchat-fluent) .activity-decorator.variant-copilot {
+  --webchat__bubble--border-radius: var(--webchat-borderRadiusXLarge);
+
+  :global(.webchat__activity-status) {
+    margin: 0 0 var(--webchat-spacingHorizontalXXS);
+  }
+
+  :global(.webchat__stacked-layout__status) {
+    order: -1;
+  }
+
+  &:has(:global(.webchat__bubble--from-user)) :global(.webchat__bubble) {
+    margin-block-end: var(--webchat-spacingVerticalM);
+  }
+
+  /* Hide generated badge as it is in the copilot header */
+  :global(.webchat__bubble .webchat__text-content .webchat__text-content__generated-badge) {
+    display: none;
+  }
+}
+
+/* Decorator copilot variant which has bot message */
+:global(.webchat-fluent) .activity-decorator.variant-copilot:not(:has(:global(.webchat__bubble--from-user))) {
+  --webchat__bubble--block-padding: 0;
+  --webchat__bubble--border-radius: var(--webchat-borderRadiusMedium);
+  --webchat__bubble--inline-padding: 0;
+  --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;
+
+  :global(.webchat__stacked-layout) {
+    margin: 0;
+    position: static;
+  }
+
+  :global(.webchat__bubble) {
+    position: static;
+    width: var(--webchat__bubble--max-width);
+  }
+
+  :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;
+    gap: var(--webchat-spacingVerticalS);
+    padding-inline-end: var(--webchat-spacingHorizontalM);
+    width: 500px;
+  }
+
+  :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__stacked-layout__status) {
+    display: none;
+  }
+}
+
+/* Transcript activity non-empty */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__basic-transcript__activity-body:not(:empty)) {
+  padding-block-end: var(--webchat-spacingVerticalXL);
+}
+
+/* Stacked layout */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout) {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+/* Stacked layout which has message bubble */
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__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) {
+  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) {
+  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;
+    box-shadow: none;
+  }
+}
+
+/* Message bubble content */
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) {
+  background-color: var(--webchat__bubble--background-color);
+  border-radius: var(--webchat__bubble--border-radius);
+  border-width: 0;
+  box-shadow: var(--webchat__bubble--box-shadow);
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground1);
+  max-width: 100%;
+  min-height: var(--webchat__bubble--min-height);
+}
+
+/* Message bubble text content */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content) {
+  font-size: var(--webchat__font-size--medium);
+  line-height: var(--webchat__line-height--medium);
+  min-height: auto;
+  padding-block: var(--webchat__bubble--block-padding);
+  padding-inline: var(--webchat__bubble--inline-padding);
+
+  &:empty {
+    padding-block-end: 0;
+  }
+
+  + :global(.webchat__text-content) {
+    margin-top: calc(var(--webchat__bubble--block-padding) * -1);
+  }
+}
+
+/* Message bubble text content generated badge */
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) {
+  align-items: center;
+  align-self: flex-start;
+  background-color: var(--webchat-colorNeutralBackground5);
+  border-radius: var(--webchat-borderRadiusMedium);
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground3);
+  cursor: default;
+  display: inline-flex;
+  font-size: var(--webchat-fontSizeBase100);
+  height: 16px;
+  line-height: var(--webchat-lineHeightBase100);
+  padding-inline: var(--webchat-spacingHorizontalXS);
+}
+
+/* Message bubble attachment content */
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) {
+  cursor: default;
+  font-size: var(--webchat-fontSizeBase300);
+  line-height: var(--webchat-lineHeightBase300);
+
+  :global(.webchat__fileContent__fileName) {
+    color: var(--webchat-colorBrandForegroundLink);
+    font-family: inherit;
+  }
+  :global(.webchat__fileContent__size) {
+    color: var(--webchat-colorNeutralForeground2);
+    font-family: inherit;
+  }
+}
+
+/* Markdown links and citation links */
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__render-markdown)
+  a[href]:not(:global(.webchat__render-markdown__pure-identifier)) {
+  color: var(--webchat-colorBrandForegroundLink);
+  text-decoration-color: transparent;
+
+  &:target {
+    color: var(--webchat-colorBrandForegroundLinkSelected);
+  }
+
+  &:hover {
+    color: var(--webchat-colorBrandForegroundLinkHover);
+    text-decoration: underline 1px currentColor;
+  }
+
+  &:active {
+    color: var(--webchat-colorBrandForegroundLinkPressed);
+  }
+
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+  }
+
+  :global(.webchat__render-markdown__external-link-icon) {
+    background: currentColor;
+    -webkit-mask: var(--webchat__icon-url--external-link) no-repeat;
+    mask: var(--webchat__icon-url--external-link) no-repeat;
+  }
+}
+
+/* Citation inline references */
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__render-markdown)
+  :global(.webchat__render-markdown__citation),
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__render-markdown)
+  :global(.webchat__render-markdown__pure-identifier) {
+  align-items: center;
+  background-color: var(--webchat-colorNeutralBackground3);
+  border-radius: var(--webchat-borderRadiusMedium);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground2);
+  display: inline-flex;
+  font-size: var(--webchat-fontSizeBase100);
+  font-weight: var(--webchat-fontWeightSemibold);
+  height: 14px;
+  justify-content: center;
+  line-height: var(--webchat-lineHeightBase100);
+  margin-left: var(--webchat-spacingHorizontalXXS);
+  margin-right: var(--webchat-spacingHorizontalXXS);
+  min-width: 14px;
+  text-decoration: none;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  vertical-align: calc((var(--webchat-lineHeightBase100) - var(--webchat-fontSizeBase100)) / 2);
+
+  &:hover {
+    background-color: var(--webchat-colorBrandBackground2Hover);
+    border-color: var(--webchat-colorBrandStroke2Hover);
+    color: var(--webchat-colorBrandForeground2Hover);
+    cursor: pointer;
+  }
+
+  &:hover:active {
+    background-color: var(--webchat-colorBrandBackground2Pressed);
+    border-color: var(--webchat-colorBrandStroke2Pressed);
+    color: var(--webchat-colorBrandForeground2Pressed);
+  }
+
+  &::before,
+  &::after {
+    all: unset;
+  }
+
+  &:has(:global(.webchat__render-markdown__external-link-icon)) {
+    padding-inline: 3px;
+  }
+
+  :global(.webchat__render-markdown__external-link-icon) {
+    background: currentColor;
+    height: 0.7em;
+    -webkit-mask: var(--webchat__icon-url--external-link) no-repeat;
+    mask: var(--webchat__icon-url--external-link) no-repeat;
+  }
+}
+
+/* Citation summary chevron */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions__header) {
+  border-radius: var(--webchat-borderRadiusMedium);
+
+  :global(.webchat__link-definitions__header-text) {
+    color: var(--webchat-colorNeutralForeground3);
+  }
+
+  :global(.webchat__link-definitions__header-chevron) {
+    fill: var(--webchat-colorNeutralForeground3);
+    font-size: var(--webchat__font-size--small);
+    width: 1em;
+  }
+
+  &:focus-visible {
+    outline-offset: 1px;
+    outline: var(--webchat-strokeWidthThin) solid var(--webchat-colorStrokeFocus2);
+  }
+}
+
+/* Citation link definitions */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions) {
+  --webchat__citation__external-link--mask: var(--webchat-externalLink-mask);
+  --webchat__citation__link--max-width: var(--webchat-externalLink-maxWidth);
+
+  :global(.webchat__link-definitions__list) {
+    color: var(--webchat__color--subtle);
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__link-definitions__list-item) {
+    border-radius: var(--webchat-borderRadiusMedium);
+    max-width: var(--webchat__citation__link--max-width);
+  }
+
+  :global(.webchat__link-definitions__list-item-box) {
+    background-color: var(--webchat-colorNeutralBackground3);
+    border-radius: var(--webchat-borderRadiusMedium);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    box-sizing: border-box;
+    color: currentColor;
+    display: inline-flex;
+    font-size: var(--webchat__font-size--small);
+    height: 24px;
+    padding-inline-end: var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__link-definitions__list-item-body) {
+    font-family: inherit;
+    gap: var(--webchat-spacingHorizontalSNudge);
+    min-width: 0;
+    padding: 0;
+  }
+
+  :global(.webchat__link-definitions__badge) {
+    align-self: center;
+    background-color: transparent;
+    border-radius: 0;
+    border: none;
+    color: currentColor;
+    font-size: var(--webchat-fontSizeBase100);
+    font-weight: var(--webchat-fontWeightSemibold);
+    line-height: var(--webchat-lineHeightBase100);
+    margin: 0;
+    min-width: 20px;
+    padding: 0;
+    position: relative;
+    text-align: center;
+  }
+
+  :global(.webchat__link-definitions__badge)::after {
+    border-right: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    bottom: 0;
+    content: '';
+    display: block;
+    height: 16px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 0;
+  }
+
+  :global(.webchat__link-definitions__list-item-main-text) {
+    gap: var(--webchat-spacingHorizontalXS);
+  }
+
+  :global(.webchat__link-definitions__list-item-text) {
+    color: currentColor;
+    text-decoration: none;
+    text-overflow: ellipsis;
+  }
+
+  :global(.webchat__link-definitions__list-item-main-text):has(
+      :global(.webchat__link-definitions__open-in-new-window-icon)
+    )::before {
+    align-self: center;
+    background: currentColor;
+    color: currentColor;
+    content: '';
+    flex: none;
+    font-size: var(--webchat-fontSizeBase400);
+    height: 1em;
+    -webkit-mask: var(--webchat__citation__external-link--mask) no-repeat;
+    mask: var(--webchat__citation__external-link--mask) no-repeat;
+    padding: 0;
+    width: 1em;
+  }
+
+  /* It seems Copilot does not show per-item sensitivity label, i.e. "General", etc. */
+  :global(.webchat__link-definitions__list-item-badge) {
+    display: none;
+  }
+
+  :global(.webchat__link-definitions__open-in-new-window-icon) {
+    display: none;
+  }
+}

package/src/components/activity/ActivityDecorator.tsx

@@ -0,0 +1,26 @@
+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 }>) {
+  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>
+  );
+}
+
+ActivityDecorator.displayName = 'ActivityDecorator';
+
+export default memo(ActivityDecorator);

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

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

package/src/components/activity/ActivityLoader.tsx

@@ -0,0 +1,21 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+import { useVariantClassName } from '../../styles';
+import SlidingDots from '../assets/SlidingDots';
+import styles from './ActivityLoader.module.css';
+
+function FluentActivityLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+  const variantClassName = useVariantClassName(classNames);
+
+  return (
+    <Fragment>
+      {children}
+      <SlidingDots className={cx(classNames['activity-loader'], variantClassName)} />
+    </Fragment>
+  );
+}
+
+export default memo(FluentActivityLoader);

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

@@ -0,0 +1,38 @@
+:global(.webchat-fluent) .copilot-message-header {
+  align-items: center;
+  box-sizing: border-box;
+  cursor: default;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--webchat-spacingHorizontalS);
+  max-width: var(--webchat__bubble--max-width);
+}
+
+:global(.webchat-fluent) .copilot-message-header__avatar {
+  aspect-ratio: 1;
+  background-color: var(--background-color);
+  border-radius: var(--webchat-borderRadiusSmall);
+  width: 20px;
+}
+
+:global(.webchat-fluent) .copilot-message-header__title {
+  font-size: var(--webchat-fontSizeBase300);
+  font-weight: var(--webchat-fontWeightSemibold);
+  line-height: var(--webchat-lineHeightBase300);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+:global(.webchat-fluent) .copilot-message-header__ai-generated-content {
+  align-items: center;
+  background-color: var(--webchat-colorNeutralBackground5);
+  border-radius: var(--webchat-borderRadiusMedium);
+  color: var(--webchat-colorNeutralForeground3);
+  display: flex;
+  flex: none;
+  font-size: var(--webchat-fontSizeBase100);
+  height: 20px;
+  line-height: var(--webchat-lineHeightBase100);
+  padding-inline: var(--webchat-spacingHorizontalXS);
+}

package/src/components/activity/CopilotMessageHeader.tsx

@@ -0,0 +1,49 @@
+import React, { memo, useMemo, type CSSProperties } from 'react';
+import { WebChatActivity, hooks } from 'botframework-webchat-component';
+
+import useActivityStyleOptions from './private/useActivityStyleOptions';
+import isAIGeneratedActivity from './private/isAIGeneratedActivity';
+import useActivityAuthor from './private/useActivityAuthor';
+import { useStyles } from '../../styles';
+import styles from './CopilotMessageHeader.module.css';
+
+const { useLocalizer } = hooks;
+
+function CopilotMessageHeader({ activity }: Readonly<{ activity?: WebChatActivity | undefined }>) {
+  const [{ botAvatarImage, botAvatarBackgroundColor }] = useActivityStyleOptions(activity);
+  const classNames = useStyles(styles);
+  const localize = useLocalizer();
+  const isAIGenerated = isAIGeneratedActivity(activity);
+
+  const avatarStyle = useMemo(
+    () => ({ '--background-color': botAvatarBackgroundColor }) as CSSProperties,
+    [botAvatarBackgroundColor]
+  );
+
+  const author = useActivityAuthor(activity);
+  const avatarImage = author?.image || botAvatarImage;
+  const botTitle = author?.name || activity?.from?.name;
+
+  return (
+    <div className={classNames['copilot-message-header']}>
+      {avatarImage && (
+        <img
+          alt={localize('AVATAR_ALT', botTitle)}
+          className={classNames['copilot-message-header__avatar']}
+          src={avatarImage}
+          style={avatarStyle}
+        />
+      )}
+      <span className={classNames['copilot-message-header__title']} title={botTitle}>
+        {botTitle}
+      </span>
+      {isAIGenerated && (
+        <span className={classNames['copilot-message-header__ai-generated-content']}>
+          {localize('ACTIVITY_CONTENT_CAUTION')}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default memo(CopilotMessageHeader);

package/src/components/activity/index.ts

@@ -0,0 +1,2 @@
+export { default as ActivityDecorator } from './ActivityDecorator';
+export { default as useActivityAuthor } from './private/useActivityAuthor';