botframework-webchat-fluent-theme 4.18.1-main.20240807.dfe788c → 4.18.1-main.20240813.c50aac5

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

@@ -3,7 +3,9 @@
 
   --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);
   --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);
+  --webchat-colorNeutralForeground3: var(--colorNeutralForeground3, #616161);
   --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
+  --webchat-colorNeutralForeground5: var(--colorNeutralForeground5, #7e7e7e);
 
   --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);
   --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);
@@ -12,14 +14,16 @@
   --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);
 
   --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);
+  --webchat-colorNeutralBackground3: var(--colorNeutralBackground3, #f5f5f5);
   --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
 
+  --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
+
   --webchat-colorNeutralBackground1Disabled: var(--colorNeutralBackground1Disabled, #f0f0f0);
+  --webchat-colorNeutralBackground1Hover: var(--colorNeutralBackground1Pressed, #f0f0f0);
   --webchat-colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed, #e0e0e0);
 
-  --webchat-colorNeutralGrey94: var(--colorNeutralGrey94, #f0f0f0);
-
   --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
   --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
   --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);
@@ -27,15 +31,20 @@
   --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);
 
   --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);
+  --webchat-colorTransparentStroke: var(--colorTransparentStroke, transparent);
+
+  --webchat-colorBrandForeground1: var(--colorBrandForeground1, #01678c);
 
   --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);
   --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);
+  --webchat-colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed, #01384d);
 
   --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);
   --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);
   --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);
   --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);
 
+  --webchat-colorBrandBackground2: var(--colorBrandBackground2, #def2fc);
   --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);
   --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);
 
@@ -49,19 +58,35 @@
   --webchat-colorGray190: var(--colorGray190, #201f1e);
   --webchat-colorGray200: var(--colorGray200, #1b1a19);
 
-  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */
-  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);
-  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);
-  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);
-
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
+  --webchat-shadow2: var(--shadow2, 0 0 2px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 14%));
+  --webchat-shadow4: var(--shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));
   --webchat-shadow16: var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108));
+  --webchat-shadow64: var(--shadow64, 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14));
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */
+  --webchat-spacingHorizontalNone: var(--spacingHorizontalNone, 0);
+  --webchat-spacingHorizontalXXS: var(--spacingHorizontalXXS, 2px);
+  --webchat-spacingHorizontalXS: var(--spacingHorizontalXS, 4px);
+  --webchat-spacingHorizontalSNudge: var(--spacingHorizontalSNudge, 6px);
+  --webchat-spacingHorizontalS: var(--spacingHorizontalS, 8px);
   --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);
   --webchat-spacingHorizontalM: var(--spacingHorizontalM, 12px);
+  --webchat-spacingHorizontalL: var(--spacingHorizontalL, 16px);
+  --webchat-spacingHorizontalXL: var(--spacingHorizontalXL, 20px);
+  --webchat-spacingHorizontalXXL: var(--spacingHorizontalXXL, 24px);
   --webchat-spacingHorizontalXXXL: var(--spacingHorizontalXXXL, 32px);
+  --webchat-spacingVerticalNone: var(--spacingVerticalNone, 0);
+  --webchat-spacingVerticalXXS: var(--spacingVerticalXXS, 2px);
+  --webchat-spacingVerticalXS: var(--spacingVerticalXS, 4px);
+  --webchat-spacingVerticalSNudge: var(--spacingVerticalSNudge, 6px);
+  --webchat-spacingVerticalS: var(--spacingVerticalS, 8px);
+  --webchat-spacingVerticalMNudge: var(--spacingVerticalMNudge, 10px);
+  --webchat-spacingVerticalM: var(--spacingVerticalM, 12px);
   --webchat-spacingVerticalL: var(--spacingVerticalL, 16px);
+  --webchat-spacingVerticalXL: var(--spacingVerticalXL, 20px);
+  --webchat-spacingVerticalXXL: var(--spacingVerticalXXL, 24px);
+  --webchat-spacingVerticalXXXL: var(--spacingVerticalXXXL, 32px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
   --webchat-fontFamilyBase: var(--fontFamilyBase, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
@@ -72,12 +97,35 @@
   --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
+  --webchat-fontSizeBase100: var(--fontSizeBase100, 10px);
+  --webchat-fontSizeBase200: var(--fontSizeBase200, 12px);
   --webchat-fontSizeBase300: var(--fontSizeBase300, 14px);
+  --webchat-fontSizeBase400: var(--fontSizeBase400, 16px);
+  --webchat-fontSizeBase500: var(--fontSizeBase500, 20px);
+  --webchat-fontSizeBase600: var(--fontSizeBase600, 24px);
   --webchat-fontSizeHero700: var(--fontSizeHero700, 28px);
+  --webchat-fontSizeHero800: var(--fontSizeHero800, 32px);
+  --webchat-fontSizeHero900: var(--fontSizeHero900, 40px);
 
+  --webchat-lineHeightBase100: var(--lineHeightBase100, 14px);
+  --webchat-lineHeightBase200: var(--lineHeightBase200, 16px);
   --webchat-lineHeightBase300: var(--lineHeightBase300, 20px);
+  --webchat-lineHeightBase400: var(--lineHeightBase400, 22px);
+  --webchat-lineHeightBase500: var(--lineHeightBase500, 28px);
+  --webchat-lineHeightBase600: var(--lineHeightBase600, 32px);
   --webchat-lineHeightHero700: var(--lineHeightHero700, 36px);
+  --webchat-lineHeightHero800: var(--lineHeightHero800, 40px);
+  --webchat-lineHeightHero900: var(--lineHeightHero900, 52px);
+  --webchat-lineHeightHero1000: var(--lineHeightHero1000, 92px);
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */
+  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);
+  --webchat-borderRadiusMedium: var(--borderRadiusMedium, 4px);
+  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);
+  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);
 
+  --webchat-strokeWidthThin: var(--strokeWidthThin, 1px);
+  --webchat-strokeWidthThick: var(--strokeWidthThicker, 2px);
   --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
 
   --webchat-durationUltraFast: var(--durationUltraFast, 0);
@@ -85,9 +133,6 @@
 
   --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
   --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
-
-  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
-  --webchat-shadow2: 0 0 2px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 14%);
 }
 
 @media (prefers-reduced-motion) {
@@ -96,3 +141,171 @@
     --webchat-durationNormal: 0.01ms;
   }
 }
+
+/* Style Options override */
+:global(.webchat-fluent).theme :global(.webchat__css-custom-properties) {
+  --webchat__color--accent: var(--webchat-colorBrandForeground1);
+  --webchat__color--subtle: var(--webchat-colorNeutralForeground2);
+  --webchat__color--timestamp: var(--webchat-colorNeutralForeground3);
+  --webchat__font--primary: var(--webchat-fontFamilyBase);
+  --webchat__font-size--small: var(--webchat-fontSizeBase200);
+  --webchat__font-size--medium: var(--webchat-fontSizeBase300);
+  --webchat__line-height--small: var(--webchat-lineHeightBase200);
+  --webchat__line-height--medium: var(--webchat-lineHeightBase300);
+  --webchat__max-width--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)
+    var(--webchat-spacingHorizontalMNudge);
+}
+
+:global(.webchat-fluent).theme.variant-copilot :global(.webchat__css-custom-properties) {
+  --webchat__padding--sendbox:
+    var(--webchat-spacingVerticalNone)
+    var(--webchat-spacingHorizontalXL)
+    var(--webchat-spacingVerticalMNudge)
+    var(--webchat-spacingHorizontalMNudge);
+}
+
+/* Transcript surface */
+:global(.webchat-fluent).theme :global(.webchat__surface) {
+  background-color: var(--webchat__color--surface);
+}
+
+:global(.webchat-fluent).theme.variant-copilot :global(.webchat__surface) {
+  box-sizing: border-box;
+  padding-inline-start: var(--webchat-spacingHorizontalMNudge);
+}
+
+/* Transcript scrollable */
+:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
+  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
+  scrollbar-color: unset;
+  scrollbar-width: unset;
+  /* Firefox */
+  -moz-scrollbar-color: var(--webchat-colorNeutralForeground5) transparent;
+  -moz-scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: var(--webchat-spacingVerticalMNudge);
+    visibility: hidden;
+  }
+
+  &:hover::-webkit-scrollbar {
+    width: var(--webchat-spacingVerticalMNudge);
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--webchat-colorNeutralForeground5);
+    border-radius: 10px;
+    border-right: 4px solid transparent;
+    border: 3px solid transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb:hover {
+    background-clip: padding-box;
+    background-color: var(--webchat-colorNeutralForeground5);
+    border-radius: 10px;
+    border-right: 2px solid transparent;
+    border: 1px solid transparent;
+  }
+}
+
+:global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
+  scrollbar-gutter: stable;
+}
+
+/* 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) {
+  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) {
+  /* Hide activity focus when no focus-visible state */
+  display: none;
+}
+
+/* Transcript Focus indicator when activity focused */
+:global(.webchat-fluent).theme :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) {
+  :global(.webchat__basic-transcript__focus-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 */
+    display: none;
+  }
+
+  :global(.webchat__bubble)::after, :global(.pre-chat-message-activity)::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    border-radius: var(--webchat__bubble--border-radius);
+    pointer-events: none;
+  }
+
+  :global(.pre-chat-message-activity)::after {
+    inset: 0;
+    border-radius: var(--webchat-borderRadiusSmall);
+  }
+}
+
+/* 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__filler) {
+  /* limit grow to half of the size to center the activity */
+  flex-grow: 0.5;
+}
+
+/* Modal */
+:global(.webchat-fluent).theme :global(.webchat__modal-dialog) {
+  height: 100%;
+  display: grid;
+  place-items: center;
+
+  &::backdrop {
+    background-color: var(--webchat-colorTransparentBackground);
+  }
+
+  :global(.webchat__modal-dialog__box) {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border-radius: var(--webchat-borderRadiusXLarge);
+    position: relative;
+    color: var(--webchat-colorNeutralForeground1);
+    box-shadow: var(--webchat-shadow64);
+  }
+
+  :global(.webchat__modal-dialog__close-button) {
+    color: var(--webchat-colorNeutralForeground1);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  }
+
+  /* TODO: align with original fluent modal styles in WebChat as they don't match v9 anymore */
+  :global(.webchat__modal-dialog__close-button):focus:not(:active):hover {
+    background-color: var(--webchat-colorNeutralBackground3);
+  }
+
+  :global(.webchat__modal-dialog__close-button):focus:active {
+    background-color: var(--webchat-colorNeutralBackground4);
+  }
+
+  :global(.webchat__modal-dialog__close-button):not(:focus-visible) {
+    border: none;
+  }
+
+  :global(.webchat__modal-dialog__close-button):focus {
+    border-color: var(--webchat-colorStrokeFocus2);
+  }
+
+  :global(.webchat__modal-dialog__close-button-image) {
+    fill: currentColor;
+  }
+}

package/src/components/theme/Theme.tsx

@@ -1,11 +1,12 @@
 import React, { type ReactNode } from 'react';
 import cx from 'classnames';
 import styles from './Theme.module.css';
-import { useStyles } from '../../styles';
+import { useStyles, useVariantClassName } from '../../styles';
 
 export const rootClassName = 'webchat-fluent';
 
 export default function Theme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
   const classNames = useStyles(styles);
-  return <div className={cx(rootClassName, classNames['theme'])}>{props.children}</div>;
+  const variantClassName = useVariantClassName(styles);
+  return <div className={cx(rootClassName, classNames['theme'], variantClassName)}>{props.children}</div>;
 }

package/src/private/FluentThemeProvider.tsx

@@ -1,15 +1,17 @@
+import type { ActivityMiddleware } from 'botframework-webchat-api';
 import { Components } from 'botframework-webchat-component';
 import React, { memo, type ReactNode } from 'react';
 
-import type { ActivityMiddleware } from 'botframework-webchat-api';
+import { ActivityDecorator } from '../components/activity';
 import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
-import { SendBox } from '../components/sendBox';
+import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
+import VariantComposer, { VariantList } from './VariantComposer';
 
 const { ThemeProvider } = Components;
 
-type Props = Readonly<{ children?: ReactNode | undefined }>;
+type Props = Readonly<{ children?: ReactNode | undefined; variant?: VariantList | undefined }>;
 
 const activityMiddleware: ActivityMiddleware[] = [
   () =>
@@ -21,19 +23,26 @@ const activityMiddleware: ActivityMiddleware[] = [
         return () => <PreChatMessageActivity activity={activity} />;
       }
 
-      return next(...args);
+      const renderActivity = next(...args);
+
+      return renderActivity
+        ? (...args) => <ActivityDecorator activity={activity}>{renderActivity(...args)}</ActivityDecorator>
+        : renderActivity;
     }
 ];
-const sendBoxMiddleware = [() => () => () => SendBox];
-
-const FluentThemeProvider = ({ children }: Props) => (
-  <WebChatTheme>
-    <TelephoneKeypadProvider>
-      <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware}>
-        {children}
-      </ThemeProvider>
-    </TelephoneKeypadProvider>
-  </WebChatTheme>
+
+const sendBoxMiddleware = [() => () => () => PrimarySendBox];
+
+const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
+  <VariantComposer variant={variant}>
+    <WebChatTheme>
+      <TelephoneKeypadProvider>
+        <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware}>
+          {children}
+        </ThemeProvider>
+      </TelephoneKeypadProvider>
+    </WebChatTheme>
+  </VariantComposer>
 );
 
 export default memo(FluentThemeProvider);

package/src/private/VariantComposer.ts

@@ -0,0 +1,29 @@
+import { createContext } from 'react';
+
+import createComposer from './createComposer';
+
+type VariantName = 'fluent' | 'copilot' | '';
+
+export type VariantList = `${VariantName}`;
+
+export type VariantContextType = {
+  variant: VariantList;
+};
+
+export const VariantContext = createContext<VariantContextType>(
+  new Proxy(
+    {},
+    {
+      get() {
+        throw new Error('Unable to use VariantContext without VariantComposer');
+      }
+    }
+  ) as unknown as VariantContextType
+);
+
+const VariantComposer = createComposer<VariantContextType>(VariantContext, {
+  defaults: { variant: '' },
+  displayName: 'VariantComposer'
+});
+
+export default VariantComposer;

package/src/private/createComposer.tsx

@@ -0,0 +1,16 @@
+import React, { type Context, memo, type ReactNode, useMemo } from 'react';
+
+export default function createComposer<
+  C,
+  P extends { children?: ReactNode | undefined } = Partial<C> & { children?: ReactNode | undefined }
+>({ Provider }: Context<C>, { defaults, displayName }: Readonly<{ defaults: Readonly<C>; displayName: string }>) {
+  const Composer = ({ children, ...props }: Readonly<P>) => {
+    const value = useMemo(() => Object.freeze({ ...defaults, ...props }), [props]);
+
+    return <Provider value={value}>{children}</Provider>;
+  };
+
+  Composer.displayName = displayName;
+
+  return memo(Composer);
+}

package/src/private/useVariants.ts

@@ -0,0 +1,7 @@
+import { useContext, useMemo } from 'react';
+import { VariantContext } from './VariantComposer';
+
+export default function useVariants() {
+  const { variant } = useContext(VariantContext);
+  return useMemo(() => variant.split(' '), [variant]);
+}

package/src/styles/index.ts

@@ -1,4 +1,5 @@
 import injectStyle from './injectStyle';
 import useStyles from './useStyles';
+import useVariantClassName from './useVariantClassName';
 
-export { injectStyle, useStyles };
+export { injectStyle, useStyles, useVariantClassName };

package/src/styles/useVariantClassName.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import useVariants from '../private/useVariants';
+import useStyles from './useStyles';
+
+export default function useVariantClassName<T extends CSSModuleClasses>(styles: T): string {
+  const classNames = useStyles(styles);
+  const variants = useVariants();
+  return useMemo(
+    () =>
+      variants
+        .map(variant => classNames[`variant-${variant}`])
+        .filter(value => value)
+        .join(' '),
+    [classNames, variants]
+  );
+}

package/src/testIds.ts

@@ -1,4 +1,5 @@
 const testIds = {
+  preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
   sendBoxTextBox: 'send box text area',