botframework-webchat-fluent-theme 4.18.1-main.20241126.c3857bf → 4.18.1-main.20250114.4df27b8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20241126.c3857bf",
+  "version": "4.18.1-main.20250114.4df27b8",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -68,15 +68,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^20.12.11",
     "@types/react": "^16.14.60",
-    "botframework-webchat-base": "4.18.1-main.20241126.c3857bf",
-    "botframework-webchat-styles": "4.18.1-main.20241126.c3857bf",
+    "botframework-webchat-base": "4.18.1-main.20250114.4df27b8",
+    "botframework-webchat-styles": "4.18.1-main.20250114.4df27b8",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20241126.c3857bf",
-    "botframework-webchat-component": "4.18.1-main.20241126.c3857bf",
-    "botframework-webchat-core": "4.18.1-main.20241126.c3857bf",
+    "botframework-webchat-api": "4.18.1-main.20250114.4df27b8",
+    "botframework-webchat-component": "4.18.1-main.20250114.4df27b8",
+    "botframework-webchat-core": "4.18.1-main.20250114.4df27b8",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

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

@@ -33,6 +33,9 @@
   --webchat-colorNeutralStencil1: var(--colorNeutralStencil1, #e6e6e6); /* #575757 for dark mode */
   --webchat-colorNeutralStencil2: var(--colorNeutralStencil2, #fafafa); /* #333333 for dark mode */
 
+  --webchat-colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient, rgba(0, 0, 0, 0.12));
+  --webchat-colorNeutralShadowKey: var(--colorNeutralShadowKey, rgba(0, 0, 0, 0.14));
+
   --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
 
   --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
@@ -74,6 +77,8 @@
 
   /* New greys from the link above not exposed by Fluent */
   --webchat-colorGrey8: #141414;
+  --webchat-colorGrey14: #242424;
+  --webchat-colorGrey92: #ebebeb;
   --webchat-colorGrey98: #fafafa;
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
@@ -225,7 +230,8 @@
 /* Scrollbars */
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
 :global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body),
-:global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block']) {
+:global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block']),
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__body) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;
@@ -391,6 +397,72 @@
   }
 }
 
+/* Code block */
+:global(.webchat-fluent).theme :global(.webchat__code-block) {
+  border: none;
+  font-family: var(--webchat-fontFamilyMonospace);
+  font-size: var(--webchat-fontSizeBase300);
+
+  --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
+  --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
+
+  :global(.webchat__code-block-copy-button) {
+    background: transparent;
+    border: none;
+    color: var(--webchat__code-block__copy-button--color);
+    height: 20px;
+    margin-inline-start: var(--webchat-spacingHorizontalS);
+    padding: 0;
+    width: 20px;
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+
+    :global(.webchat__code-block-copy-button__icon) {
+      background-color: currentColor;
+    }
+
+    &:hover {
+      background: var(--webchat__code-block__copy-button--background);
+      color: var(--webchat__code-block__copy-button--color);
+    }
+
+    &:active {
+      background: var(--webchat__code-block__copy-button--background);
+      color: var(--webchat__code-block__copy-button--color);
+    }
+
+    &:focus {
+      color: var(--webchat__code-block__copy-button--color);
+      outline-color: currentColor;
+    }
+  }
+
+  &:global(:has(.webchat__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) {
+      outline: none;
+    }
+  }
+
+  &:global(:has(> .webchat__code-block__theme--github-dark-default)) {
+    --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey8));
+    --webchat__code-block__copy-button--background: var(
+      --codeBlockCopyButtonBackgroundPressed,
+      var(--webchat-colorGrey14)
+    );
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonForeground, var(--webchat__color--code-block));
+    --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey98));
+  }
+
+  &:global(:has(> .webchat__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));
+    --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey8));
+  }
+}
+
 /* View Code dialog */
 :global(.webchat-fluent).theme :global(.webchat__modal-dialog.webchat__view-code-dialog) {
   :global(.webchat__modal-dialog__close-button-layout) {
@@ -408,34 +480,14 @@
     width: unset;
   }
 
-  :global(.webchat__view-code-dialog__copy-button) {
-    background: transparent;
-    border: none;
-    color: var(--webchat-colorNeutralForeground1);
-    height: 20px;
+  :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-spacingVerticalS);
-    padding: 0;
     position: absolute;
     right: 32px;
     top: 0;
-    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-    width: 20px;
-
-    :global(.webchat__code-block-copy-button__icon) {
-      background-color: currentColor;
-    }
-
-    &:hover {
-      background: var(--webchat-colorNeutralBackground3);
-    }
-
-    &:active {
-      background: var(--webchat-colorNeutralBackground3);
-    }
-
-    &:focus {
-      outline-color: var(--webchat-colorStrokeFocus2);
-    }
   }
 
   :global(.webchat__modal-dialog__box) {
@@ -454,33 +506,10 @@
   }
 
   :global(.webchat__view-code-dialog__body) {
-    display: contents;
-  }
-
-  :global(.webchat__view-code-dialog__code-body) {
-    background: var(--webchat__code-block--background);
     font-family: var(--webchat-fontFamilyMonospace);
     font-size: var(--webchat-fontSizeBase300);
-    line-height: var(--webchat-fontSizeBase300);
-    margin-inline: calc(var(--webchat-spacingHorizontalM) * -1);
-    padding-inline: var(--webchat-spacingHorizontalM);
-  }
-
-  :global(.webchat__view-code-dialog__code-body:has(.shiki:focus-visible)):focus-within {
-    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
-
-    :global(.shiki) {
-      outline: none;
-    }
-  }
-
-  :global(.webchat__view-code-dialog__code-body:has(.shiki.github-light-default)) {
-    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey98));
-  }
-
-  :global(.webchat__view-code-dialog__code-body:has(.shiki.github-dark-default)) {
-    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey8));
+    margin: 0 calc(var(--webchat-spacingHorizontalM) * -1);
+    padding: 0 var(--webchat-spacingHorizontalM);
   }
 
   :global(.webchat__view-code-dialog__footer) {
@@ -564,3 +593,31 @@
 :global(.webchat-fluent).theme :global(.webchat__monochrome-image-masker) {
   background-color: var(--webchat-colorNeutralForeground4);
 }
+
+/* Feedback button */
+:global(.webchat-fluent).theme :global(.webchat__thumb-button) {
+  color: var(--webchat-colorNeutralForeground1);
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+  }
+}
+
+/* Tooltip */
+:global(.webchat-fluent).theme :global(.webchat__tooltip) {
+  --webchat__tooltip-background: var(--tooltip-background, var(--webchat-colorNeutralBackground1));
+
+  color: var(--webchat-colorNeutralForeground1);
+  filter: drop-shadow(0 0 2px var(--webchat-colorNeutralShadowAmbient))
+    drop-shadow(0 4px 8px var(--webchat-colorNeutralShadowKey));
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: var(--webchat-fontSizeBase200);
+  font-weight: var(--webchat-fontWeightRegular);
+  line-height: var(--webchat-lineHeightBase200);
+  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
+  transition: opacity var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+}

package/src/private/FluentThemeProvider.tsx

@@ -1,4 +1,4 @@
-import type { ActivityMiddleware } from 'botframework-webchat-api';
+import { type ActivityMiddleware, type StyleOptions } from 'botframework-webchat-api';
 import { Components } from 'botframework-webchat-component';
 import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
@@ -43,11 +43,20 @@ const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
 const styles = createStyles();
 
+const fluentStyleOptions: StyleOptions = Object.freeze({
+  feedbackActionsPlacement: 'activity-actions'
+});
+
 const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
   <VariantComposer variant={variant}>
     <WebChatTheme>
       <TelephoneKeypadProvider>
-        <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware} styles={styles}>
+        <ThemeProvider
+          activityMiddleware={activityMiddleware}
+          sendBoxMiddleware={sendBoxMiddleware}
+          styleOptions={fluentStyleOptions}
+          styles={styles}
+        >
           <WebChatDecorator>{children}</WebChatDecorator>
         </ThemeProvider>
       </TelephoneKeypadProvider>