botframework-webchat-fluent-theme 4.18.1-main.20250423.8c9cf52 → 4.18.1-main.20250505.488ce72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250423.8c9cf52",
+  "version": "4.18.1-main.20250505.488ce72",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -72,15 +72,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^22.13.4",
     "@types/react": "^16.14.62",
-    "botframework-webchat-base": "4.18.1-main.20250423.8c9cf52",
-    "botframework-webchat-styles": "4.18.1-main.20250423.8c9cf52",
+    "botframework-webchat-base": "4.18.1-main.20250505.488ce72",
+    "botframework-webchat-styles": "4.18.1-main.20250505.488ce72",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250423.8c9cf52",
-    "botframework-webchat-component": "4.18.1-main.20250423.8c9cf52",
-    "botframework-webchat-core": "4.18.1-main.20250423.8c9cf52",
+    "botframework-webchat-api": "4.18.1-main.20250505.488ce72",
+    "botframework-webchat-component": "4.18.1-main.20250505.488ce72",
+    "botframework-webchat-core": "4.18.1-main.20250505.488ce72",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/sendBox/TextArea.module.css

@@ -14,7 +14,7 @@
 
 :global(.webchat-fluent) .sendbox__text-area--in-completion {
   .sendbox__text-area-doppelganger {
-    visibility: visible;
+    visibility: unset;
   }
 
   .sendbox__text-area-input {

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

@@ -630,97 +630,101 @@
 }
 
 /* Feedback Form */
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__body1) {
-  font-family: var(--webchat-fontFamilyBase);
-  color: var(--webchat-colorNeutralForeground1);
-  font-size: var(--webchat-fontSizeBase300);
-  font-weight: var(--webchat-fontWeightRegular);
-  line-height: var(--webchat-lineHeightBase300);
-}
-
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__caption1) {
-  font-family: var(--webchat-fontFamilyBase);
-  color: var(--webchat-colorNeutralForeground1);
-  font-size: var(--webchat-fontSizeBase100);
-  font-weight: var(--webchat-fontWeightRegular);
-  line-height: var(--webchat-lineHeightBase200);
-}
+:global(.webchat-fluent).theme :global(.webchat__feedback-form) {
+  gap: var(--webchat-spacingVerticalXS);
 
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__button__submit) {
-  background-color: var(--webchat-colorBrandBackground);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
-  border-radius: var(--webchat-borderRadiusMedium);
-  color: var(--webchat-colorNeutralForegroundOnBrand);
-  cursor: pointer;
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase300);
-  padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
-  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-
-  &:hover {
-    background-color: var(--webchat-colorBrandBackgroundHover);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundHover);
-  }
-
-  &:focus-visible {
-    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
-  }
-
-  &:active {
-    background-color: var(--webchat-colorBrandBackgroundPressed);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundPressed);
-  }
-}
-
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__button__cancel) {
-  background-color: var(--webchat-colorNeutralBackground1);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
-  border-radius: var(--webchat-borderRadiusMedium);
-  color: var(--webchat-colorNeutralForeground1);
-  cursor: pointer;
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase300);
-  padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
-  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-
-  &:hover {
-    background-color: var(--webchat-colorNeutralBackground1Hover);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+  :global(.webchat__feedback-form__body) {
+    font-family: var(--webchat-fontFamilyBase);
+    color: var(--webchat-colorNeutralForeground1);
+    font-size: var(--webchat-fontSizeBase300);
+    font-weight: var(--webchat-fontWeightRegular);
+    line-height: var(--webchat-lineHeightBase300);
   }
-
-  &:focus-visible {
-    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+  
+  :global(.webchat__feedback-form__caption) {
+    font-family: var(--webchat-fontFamilyBase);
+    color: var(--webchat-colorNeutralForeground1);
+    font-size: var(--webchat-fontSizeBase100);
+    font-weight: var(--webchat-fontWeightRegular);
+    line-height: var(--webchat-lineHeightBase200);
   }
-
-  &:active {
-    background-color: var(--webchat-colorNeutralBackground1Pressed);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+  
+  :global(.webchat__feedback-form__submit-button) {
+    background-color: var(--webchat-colorBrandBackground);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForegroundOnBrand);
+    cursor: pointer;
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  
+    &:hover {
+      background-color: var(--webchat-colorBrandBackgroundHover);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundHover);
+    }
+  
+    &:focus-visible {
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+    }
+  
+    &:active {
+      background-color: var(--webchat-colorBrandBackgroundPressed);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundPressed);
+    }
   }
-}
-
-:global(.webchat-fluent).theme :global(.webchat__feedback-form-text-area) {
-  background-color: var(--webchat-colorNeutralBackground1);
-  border-radius: var(--webchat-borderRadiusMedium);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase300);
-  line-height: var(--webchat-lineHeightBase300);
-  gap: var(--webchat-spacingVerticalSNudge);
-  padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
-  &::after {
-    border-bottom-left-radius: var(--webchat-borderRadiusMedium);
-    border-bottom-right-radius: var(--webchat-borderRadiusMedium);
-    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
-    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
-    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-  }
-  &:focus-within {
+  
+  :global(.webchat__feedback-form__cancel-button) {
+    background-color: var(--webchat-colorNeutralBackground1);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForeground1);
+    cursor: pointer;
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  
+    &:hover {
+      background-color: var(--webchat-colorNeutralBackground1Hover);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+    }
+  
+    &:focus-visible {
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+    }
+  
+    &:active {
+      background-color: var(--webchat-colorNeutralBackground1Pressed);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+    }
   }
-  &:focus-within::after {
-    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
-    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-  }
-}
+  
+  :global(.webchat__feedback-form-text-area) {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    line-height: var(--webchat-lineHeightBase300);
+    gap: var(--webchat-spacingVerticalSNudge);
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
+    &::after {
+      border-bottom-left-radius: var(--webchat-borderRadiusMedium);
+      border-bottom-right-radius: var(--webchat-borderRadiusMedium);
+      border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
+      clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    }
+    &:focus-within {
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    }
+    &:focus-within::after {
+      clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    }
+  }  
+}

package/src/private/FluentThemeProvider.tsx

@@ -1,5 +1,10 @@
 import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
-import { DecoratorComposer, DecoratorMiddleware } from 'botframework-webchat-api/decorator';
+import {
+  DecoratorComposer,
+  DecoratorMiddleware,
+  type DecoratorMiddlewareInit,
+  type DecoratorMiddlewareTypes
+} from 'botframework-webchat-api/decorator';
 import { Components } from 'botframework-webchat-component';
 import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
@@ -18,7 +23,10 @@ import VariantComposer, { VariantList } from './VariantComposer';
 
 const { ThemeProvider } = Components;
 
-type Props = Readonly<{ children?: ReactNode | undefined; variant?: VariantList | undefined }>;
+type FluentThemeProviderProps = Readonly<{
+  children?: ReactNode | undefined;
+  variant?: VariantList | undefined;
+}>;
 
 const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
   () =>
@@ -45,11 +53,14 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
-const decoratorMiddleware: DecoratorMiddleware[] = [
-  init =>
+const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([
+  (init: DecoratorMiddlewareInit) =>
     init === 'activity border' &&
-    (next => request => (request.livestreamingState === 'preparing' ? ActivityLoader : next(request)))
-];
+    ((next => request =>
+      request.livestreamingState === 'preparing'
+        ? ActivityLoader
+        : next(request)) satisfies DecoratorMiddlewareTypes['activity border'])
+]);
 
 const styles = createStyles();
 
@@ -64,26 +75,29 @@ const typingIndicatorMiddleware = Object.freeze([
       args[0].visible ? <SlidingDotsTypingIndicator /> : next(...args)
 ] satisfies TypingIndicatorMiddleware[]);
 
-const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
-  <VariantComposer variant={variant}>
-    <WebChatTheme>
-      <TelephoneKeypadProvider>
-        <ThemeProvider
-          activityMiddleware={activityMiddleware}
-          sendBoxMiddleware={sendBoxMiddleware}
-          styleOptions={fluentStyleOptions}
-          styles={styles}
-          typingIndicatorMiddleware={typingIndicatorMiddleware}
-        >
-          <AssetComposer>
-            <WebChatDecorator>
-              <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
-            </WebChatDecorator>
-          </AssetComposer>
-        </ThemeProvider>
-      </TelephoneKeypadProvider>
-    </WebChatTheme>
-  </VariantComposer>
-);
+function FluentThemeProvider({ children, variant = 'fluent' }: FluentThemeProviderProps) {
+  return (
+    <VariantComposer variant={variant}>
+      <WebChatTheme>
+        <TelephoneKeypadProvider>
+          <ThemeProvider
+            activityMiddleware={activityMiddleware}
+            sendBoxMiddleware={sendBoxMiddleware}
+            styleOptions={fluentStyleOptions}
+            styles={styles}
+            typingIndicatorMiddleware={typingIndicatorMiddleware}
+          >
+            <AssetComposer>
+              <WebChatDecorator>
+                <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
+              </WebChatDecorator>
+            </AssetComposer>
+          </ThemeProvider>
+        </TelephoneKeypadProvider>
+      </WebChatTheme>
+    </VariantComposer>
+  );
+}
 
 export default memo(FluentThemeProvider);
+export { type FluentThemeProviderProps };