botframework-webchat-fluent-theme 4.18.1-main.20250505.5e12798 → 4.18.1-main.20250528.43d5b5c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250505.5e12798",
+  "version": "4.18.1-main.20250528.43d5b5c",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -61,10 +61,6 @@
     "@types/react": [
       "16",
       "react@16.8.6 is our baseline"
-    ],
-    "valibot": [
-      "0",
-      "valibot@0 until they finalize @1"
     ]
   },
   "devDependencies": {
@@ -72,20 +68,20 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^22.13.4",
     "@types/react": "^16.14.62",
-    "botframework-webchat-base": "4.18.1-main.20250505.5e12798",
-    "botframework-webchat-styles": "4.18.1-main.20250505.5e12798",
+    "botframework-webchat-base": "4.18.1-main.20250528.43d5b5c",
+    "botframework-webchat-styles": "4.18.1-main.20250528.43d5b5c",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250505.5e12798",
-    "botframework-webchat-component": "4.18.1-main.20250505.5e12798",
-    "botframework-webchat-core": "4.18.1-main.20250505.5e12798",
+    "botframework-webchat-api": "4.18.1-main.20250528.43d5b5c",
+    "botframework-webchat-component": "4.18.1-main.20250528.43d5b5c",
+    "botframework-webchat-core": "4.18.1-main.20250528.43d5b5c",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",
     "use-ref-from": "0.1.0",
-    "valibot": "0.42.1"
+    "valibot": "1.1.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6"

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

@@ -1,11 +1,3 @@
-:global {
-  /* biome-ignore format: do not print each class on the new line */
-  .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o, .p, .q, .r, .s, .t, .v, .w, .u, .x, .y, .z,
-  .A, .B, .C, .D, .E, .F, .G, .H, .I, .J, .K, .L, .M, .N, .O, .P, .Q, .R, .S, .T, .V, .W, .U, .X, .Y, .Z {
-    /* esbuild considers empty global classes as used and removes them due to lack of rules */
-  }
-}
-
 :global(.webchat-fluent).theme {
   display: contents;
 
@@ -603,13 +595,15 @@
 
 /* Feedback button */
 :global(.webchat-fluent).theme :global(.webchat__thumb-button) {
-  color: var(--webchat-colorNeutralForeground1);
+  :global(.webchat__thumb-button__image) {
+    color: var(--webchat-colorNeutralForeground1);
+  }
 
-  &:focus-visible {
+  &:has(:global(.webchat__thumb-button__input):focus-visible) {
     outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
   }
 
-  &[aria-disabled='true'] {
+  &:has(:global(.webchat__thumb-button__input)[aria-disabled='true']) :global(.webchat__thumb-button__image) {
     color: var(--webchat-colorNeutralForegroundDisabled);
   }
 }
@@ -630,25 +624,28 @@
 }
 
 /* Feedback Form */
+/* TODO: Need review */
 :global(.webchat-fluent).theme :global(.webchat__feedback-form) {
-  gap: var(--webchat-spacingVerticalXS);
-
-  :global(.webchat__feedback-form__body) {
-    font-family: var(--webchat-fontFamilyBase);
+  :global(.webchat__feedback-form__form-header) {
     color: var(--webchat-colorNeutralForeground1);
+    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase300);
     font-weight: var(--webchat-fontWeightRegular);
     line-height: var(--webchat-lineHeightBase300);
   }
-  
-  :global(.webchat__feedback-form__caption) {
-    font-family: var(--webchat-fontFamilyBase);
+
+  :global(.webchat__feedback-form__form) {
+    gap: var(--webchat-spacingVerticalXS);
+  }
+
+  :global(.webchat__feedback-form__form-footer) {
     color: var(--webchat-colorNeutralForeground1);
+    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase100);
     font-weight: var(--webchat-fontWeightRegular);
     line-height: var(--webchat-lineHeightBase200);
   }
-  
+
   :global(.webchat__feedback-form__submit-button) {
     background-color: var(--webchat-colorBrandBackground);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
@@ -659,23 +656,23 @@
     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__feedback-form__cancel-button) {
     background-color: var(--webchat-colorNeutralBackground1);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
@@ -686,23 +683,23 @@
     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);
     }
   }
-  
+
   :global(.webchat__feedback-form-text-area) {
     background-color: var(--webchat-colorNeutralBackground1);
     border-radius: var(--webchat-borderRadiusMedium);
@@ -726,5 +723,5 @@
       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 };