botframework-webchat-api 4.18.1-main.20260416.88357ae → 4.18.1

package/src/{middleware → decorator}/private/templateMiddleware.test.tsx

@@ -1,9 +1,9 @@
-/** @jest-environment @happy-dom/jest-environment */
+/** @jest-environment jsdom */
 
 import { render } from '@testing-library/react';
 import React, { Fragment, type ReactNode } from 'react';
 
-import templateMiddleware, { type InferMiddleware } from './templateMiddleware';
+import templateMiddleware from './templateMiddleware';
 
 type ButtonProps = Readonly<{ children?: ReactNode | undefined }>;
 type LinkProps = Readonly<{ children?: ReactNode | undefined; href: string }>;
@@ -20,30 +20,28 @@ const InternalLinkImpl = ({ children, href }: LinkProps) => <a href={href}>{chil
 
 // User story for using templateMiddleware as a building block for uber middleware.
 test('an uber middleware', () => {
-  const buttonTemplate = templateMiddleware<void, ButtonProps>('Button');
   const {
-    createMiddleware: createButtonMiddleware,
-    extractMiddleware: extractButtonMiddleware,
+    initMiddleware: initButtonMiddleware,
     Provider: ButtonProvider,
-    Proxy: Button
-  } = buttonTemplate;
+    Proxy: Button,
+    types: buttonTypes
+  } = templateMiddleware<'button', void, ButtonProps>('Button');
 
-  type ButtonMiddleware = InferMiddleware<typeof buttonTemplate>;
+  type ButtonMiddleware = typeof buttonTypes.middleware;
 
-  const linkTemplate = templateMiddleware<{ external: boolean }, LinkProps>('Link');
   const {
-    createMiddleware: createLinkMiddleware,
-    extractMiddleware: extractLinkMiddleware,
+    initMiddleware: initLinkMiddleware,
     Provider: LinkProvider,
-    Proxy: Link
-  } = linkTemplate;
+    Proxy: Link,
+    types: linkTypes
+  } = templateMiddleware<'link', { external: boolean }, LinkProps>('Link');
 
-  type LinkMiddleware = InferMiddleware<typeof linkTemplate>;
+  type LinkMiddleware = typeof linkTypes.middleware;
 
-  const buttonMiddleware: ButtonMiddleware[] = [createButtonMiddleware(() => () => ButtonImpl)];
+  const buttonMiddleware: ButtonMiddleware[] = [init => init === 'button' && (() => () => ButtonImpl)];
   const linkMiddleware: LinkMiddleware[] = [
-    createLinkMiddleware(next => request => (request.external ? ExternalLinkImpl : next(request))),
-    createLinkMiddleware(() => () => InternalLinkImpl)
+    init => init === 'link' && (next => request => (request.external ? ExternalLinkImpl : next(request))),
+    init => init === 'link' && (() => () => InternalLinkImpl)
   ];
 
   const App = ({
@@ -55,9 +53,9 @@ test('an uber middleware', () => {
   }>) => (
     <Fragment>
       {/* TODO: Should not case middleware to any */}
-      <ButtonProvider middleware={extractButtonMiddleware(middleware as any)}>
+      <ButtonProvider middleware={initButtonMiddleware(middleware as any, 'button')}>
         {/* TODO: Should not case middleware to any */}
-        <LinkProvider middleware={extractLinkMiddleware(middleware as any)}>{children}</LinkProvider>
+        <LinkProvider middleware={initLinkMiddleware(middleware as any, 'link')}>{children}</LinkProvider>
       </ButtonProvider>
     </Fragment>
   );

package/src/decorator/private/templateMiddleware.ts

@@ -0,0 +1,58 @@
+import { warnOnce } from 'botframework-webchat-core';
+import { createChainOfResponsibility, type ComponentMiddleware } from 'react-chain-of-responsibility';
+import { type EmptyObject } from 'type-fest';
+import { any, array, custom, safeParse, type Output } from 'valibot';
+
+export type MiddlewareWithInit<M extends ComponentMiddleware<any, any, any>, I> = (init: I) => ReturnType<M> | false;
+
+const EMPTY_ARRAY = Object.freeze([]);
+
+export default function templateMiddleware<Init, Request = any, Props extends {} = EmptyObject>(name: string) {
+  type Middleware = ComponentMiddleware<Request, Props>;
+
+  const middlewareSchema = array(
+    any([custom<Middleware>(input => typeof input === 'function', 'Middleware must be a function.')])
+  );
+
+  const isMiddleware = (middleware: unknown): middleware is Output<typeof middlewareSchema> =>
+    safeParse(middlewareSchema, middleware).success;
+
+  const warnInvalid = warnOnce(`"${name}" prop is invalid`);
+
+  const initMiddleware = (
+    middleware: readonly MiddlewareWithInit<Middleware, Init>[],
+    init?: Init
+  ): readonly Middleware[] => {
+    if (middleware) {
+      if (isMiddleware(middleware)) {
+        return Object.freeze(
+          middleware
+            ?.map(middleware => middleware(init))
+            .filter((enhancer): enhancer is ReturnType<Middleware> => !!enhancer)
+            .map(enhancer => () => enhancer)
+        );
+      }
+
+      warnInvalid();
+    }
+
+    return EMPTY_ARRAY;
+  };
+
+  const { Provider, Proxy } = createChainOfResponsibility<Request, Props>();
+
+  Provider.displayName = `${name}Provider`;
+  Proxy.displayName = `${name}Proxy`;
+
+  return {
+    initMiddleware,
+    Provider,
+    Proxy,
+    types: {
+      init: undefined as Init,
+      middleware: undefined as Middleware,
+      props: undefined as Props,
+      request: undefined as Request
+    }
+  };
+}

package/src/defaultStyleOptions.ts

@@ -26,7 +26,6 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   rootZIndex: 0, // "z-index" for the root container of Web Chat. This will form a new stacking context so "z-index" used in children won't pollute.
 
   transitionDuration: '0s',
-  transitionEasing: 'ease',
 
   // Avatar
   avatarBorderRadius: '50%',
@@ -54,16 +53,10 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   bubbleFromUserNubOffset: 0,
   bubbleFromUserNubSize: undefined,
   bubbleFromUserTextColor: 'Black',
-  bubbleImageHeight: undefined,
-  bubbleImageMaxHeight: 240, // Based on previously default `bubbleImageHeight` of 240px.
-  bubbleImageMinHeight: 240, // TODO: Should change to 180px. Based on 320px bubble width showing a 16:9 image, or `320 / (16 / 9)`. 320px bubble width is based on 360px wide of the chat canvas.
-  bubbleMaxWidth: undefined, // Deprecated.
-  bubbleMinWidth: undefined, // Deprecated.
-  bubbleAttachmentMaxWidth: 480, // Based off screen width = 600px
-  bubbleAttachmentMinWidth: 250, // min screen width = 300px; Microsoft Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
-  bubbleMessageMaxWidth: 480, // Based off screen width = 600px
-  bubbleMessageMinWidth: 0,
+  bubbleImageHeight: 240,
+  bubbleMaxWidth: 480, // Based off screen width = 600px
   bubbleMinHeight: 40,
+  bubbleMinWidth: 250, // min screen width = 300px; Microsoft Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
   bubbleNubOffset: 0,
   bubbleNubSize: undefined,
   bubbleTextColor: 'Black',
@@ -99,15 +92,14 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   autoScrollSnapOnPageOffset: 0, // TODO: Rename from "autoScrollSnapOnPageoffset".
 
   // Send box
-  disableFileUpload: false,
   hideSendBox: false,
+  hideUploadButton: false,
   hideTelephoneKeypadButton: true,
-  hideUploadButton: undefined, // Deprecated as of 4.19.0.
   microphoneButtonColorOnDictate: '#F33',
-  sendAttachmentOn: 'send',
   sendBoxBackground: 'White',
   uploadAccept: undefined,
   uploadMultiple: true,
+  sendAttachmentOn: 'send',
 
   // Send box buttons
   sendBoxButtonColor: undefined,
@@ -246,6 +238,7 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   transcriptOverlayButtonColorOnHover: undefined,
 
   // Toast UI
+
   notificationDebounceTimeout: 400,
 
   hideToaster: false,
@@ -297,33 +290,7 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   // Video
   videoHeight: 270, // based on bubbleMaxWidth: 480 / 16 * 9 = 270
 
-  maxMessageLength: 2000,
-
-  stylesRoot: document.head,
-
-  // Border animation
-  borderAnimationColor1: '#203C91',
-  borderAnimationColor2: '#4DD3FF',
-  borderAnimationColor3: '#2B8DD8',
-
-  codeBlockTheme: 'github-light-default' as const,
-
-  feedbackActionsPlacement: 'activity-status' as const,
-
-  // Speech recognition
-  speechRecognitionContinuous: false,
-
-  partGroupDefaultOpen: true,
-  referenceListDefaultOpen: true,
-
-  groupActivitiesBy: ['sender', 'status', 'part'],
-
-  // Send box attachment bar
-  sendBoxAttachmentBarMaxHeight: 114,
-  sendBoxAttachmentBarMaxThumbnail: 3,
-
-  // Speech-to-speech options
-  showMicrophoneButton: 'auto'
+  maxMessageLength: 2000
 };
 
 export default DEFAULT_OPTIONS;