botframework-webchat-fluent-theme 4.18.1-main.20250804.93043a9 → 4.18.1-main.20250916.f2f7323

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250804.93043a9",
+  "version": "4.18.1-main.20250916.f2f7323",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -53,6 +53,7 @@
   "localDependencies": {
     "@msinternal/botframework-webchat-base": "development",
     "@msinternal/botframework-webchat-styles": "development",
+    "@msinternal/botframework-webchat-tsconfig": "development",
     "botframework-webchat-api": "production",
     "botframework-webchat-component": "production",
     "botframework-webchat-core": "production"
@@ -68,9 +69,9 @@
     ]
   },
   "devDependencies": {
-    "@msinternal/botframework-webchat-base": "4.18.1-main.20250804.93043a9",
-    "@msinternal/botframework-webchat-styles": "4.18.1-main.20250804.93043a9",
-    "@tsconfig/strictest": "^2.0.5",
+    "@msinternal/botframework-webchat-base": "4.18.1-main.20250916.f2f7323",
+    "@msinternal/botframework-webchat-styles": "4.18.1-main.20250916.f2f7323",
+    "@msinternal/botframework-webchat-tsconfig": "4.18.1-main.20250916.f2f7323",
     "@types/math-random": "^1.0.2",
     "@types/node": "^24.1.0",
     "@types/react": "^16.14.65",
@@ -78,9 +79,9 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250804.93043a9",
-    "botframework-webchat-component": "4.18.1-main.20250804.93043a9",
-    "botframework-webchat-core": "4.18.1-main.20250804.93043a9",
+    "botframework-webchat-api": "4.18.1-main.20250916.f2f7323",
+    "botframework-webchat-component": "4.18.1-main.20250916.f2f7323",
+    "botframework-webchat-core": "4.18.1-main.20250916.f2f7323",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/buildInfo.ts

@@ -0,0 +1,9 @@
+import { createBuildInfo } from '@msinternal/botframework-webchat-base/utils';
+
+const buildInfo = createBuildInfo('botframework-webchat:fluent-theme');
+
+buildInfo.set('buildTool', globalThis.WEB_CHAT_BUILD_INFO_BUILD_TOOL);
+buildInfo.set('moduleFormat', globalThis.WEB_CHAT_BUILD_INFO_MODULE_FORMAT);
+buildInfo.set('version', globalThis.WEB_CHAT_BUILD_INFO_VERSION);
+
+export default buildInfo;

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

@@ -1,106 +1,5 @@
 :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(.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(.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(.stacked-layout) {
-    margin: 0;
-    position: static;
-  }
-
-  :global(.webchat__bubble) {
-    position: static;
-    width: var(--webchat__bubble--max-width);
-  }
-
-  :global(.webchat__bubble .webchat__bubble__content) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--webchat-spacingVerticalS);
-    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(.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(.stacked-layout__status) {
-    display: none;
-  }
 }
 
 /* Transcript activity non-empty */
@@ -108,82 +7,6 @@
   padding-block-end: var(--webchat-spacingVerticalXL);
 }
 
-/* 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);
-  }
-
-  :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(.stacked-layout .stacked-layout__content:has(.webchat__bubble)) {
-  max-width: 100%;
-  overflow: visible;
-}
-
-/* Message 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(.stacked-layout .webchat__bubble) {
-  max-width: min(var(--webchat__bubble--max-width), 100%);
-  min-width: var(--webchat__bubble--min-width);
-  overflow: visible;
-
-  /* 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(.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(.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
@@ -224,66 +47,6 @@
   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

package/src/components/activity/ActivityDecorator.tsx

@@ -1,26 +1,31 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { WebChatActivity } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { ReactNode, memo } from 'react';
-import useVariants from '../../private/useVariants';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
 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 activityDecoratorPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type ActivityDecoratorProps = InferInput<typeof activityDecoratorPropsSchema>;
+
+function ActivityDecorator(props: Readonly<{ activity: WebChatActivity; children: ReactNode }>) {
+  const { children } = validateProps(activityDecoratorPropsSchema, props);
+
   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';
 
 export default memo(ActivityDecorator);
+export { activityDecoratorPropsSchema, type ActivityDecoratorProps };

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

@@ -11,6 +11,6 @@
   }
 
   &.variant-copilot {
-    margin: var(--webchat-spacingVerticalXS) 0 0 -10px;
+    margin: var(--webchat-spacingVerticalXS) 0 var(--webchat-spacingVerticalXS) -10px;
   }
 }

package/src/components/activity/ActivityLoader.tsx

@@ -1,24 +1,37 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import cx from 'classnames';
-import React, { Fragment, memo, type ReactNode } from 'react';
+import React, { Fragment, memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import { useVariantClassName } from '../../styles';
 import SlidingDots from '../assets/SlidingDots';
 import styles from './ActivityLoader.module.css';
 
-function FluentActivityLoader({
-  children,
-  showLoader = true
-}: Readonly<{ children?: ReactNode | undefined; showLoader?: boolean }>) {
+const fluentActivityLoaderPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    showLoader: optional(boolean(), true)
+  }),
+  readonly()
+);
+
+type FluentActivityLoaderProps = InferInput<typeof fluentActivityLoaderPropsSchema>;
+
+function FluentActivityLoader(props: FluentActivityLoaderProps) {
+  const { children, className, showLoader } = validateProps(fluentActivityLoaderPropsSchema, props);
+
   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>
   );
 }
 
 export default memo(FluentActivityLoader);
+export { fluentActivityLoaderPropsSchema, type FluentActivityLoaderProps };

package/src/components/activity/CopilotMessageHeader.tsx

@@ -1,15 +1,29 @@
-import React, { memo, useMemo, type CSSProperties } from 'react';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { WebChatActivity, hooks } from 'botframework-webchat-component';
-
-import useActivityStyleOptions from './private/useActivityStyleOptions';
-import isAIGeneratedActivity from './private/isAIGeneratedActivity';
-import useActivityAuthor from './private/useActivityAuthor';
+import cx from 'classnames';
+import React, { memo, useMemo, type CSSProperties } from 'react';
+import { custom, object, optional, pipe, readonly, safeParse, string, type InferInput } from 'valibot';
 import { useStyles } from '../../styles';
 import styles from './CopilotMessageHeader.module.css';
+import isAIGeneratedActivity from './private/isAIGeneratedActivity';
+import useActivityAuthor from './private/useActivityAuthor';
+import useActivityStyleOptions from './private/useActivityStyleOptions';
 
 const { useLocalizer } = hooks;
 
-function CopilotMessageHeader({ activity }: Readonly<{ activity?: WebChatActivity | undefined }>) {
+const copilotMessageHeaderPropsSchema = pipe(
+  object({
+    activity: optional(custom<Readonly<WebChatActivity>>(value => safeParse(object({}), value).success)),
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type CopilotMessageHeaderProps = InferInput<typeof copilotMessageHeaderPropsSchema>;
+
+function CopilotMessageHeader(props: CopilotMessageHeaderProps) {
+  const { activity, className } = validateProps(copilotMessageHeaderPropsSchema, props);
+
   const [{ botAvatarImage, botAvatarBackgroundColor }] = useActivityStyleOptions(activity);
   const classNames = useStyles(styles);
   const localize = useLocalizer();
@@ -25,7 +39,7 @@ function CopilotMessageHeader({ activity }: Readonly<{ activity?: WebChatActivit
   const botTitle = author?.name || activity?.from?.name;
 
   return (
-    <div className={classNames['copilot-message-header']}>
+    <div className={cx(classNames['copilot-message-header'], className)}>
       {avatarImage && (
         <img
           alt={localize('AVATAR_ALT', botTitle)}
@@ -47,3 +61,4 @@ function CopilotMessageHeader({ activity }: Readonly<{ activity?: WebChatActivit
 }
 
 export default memo(CopilotMessageHeader);
+export { copilotMessageHeaderPropsSchema, type CopilotMessageHeaderProps };