botframework-webchat-api 4.18.2 → 4.19.0

package/src/middleware/private/templateMiddleware.check.test.tsx

@@ -0,0 +1,47 @@
+import templateMiddleware from './templateMiddleware';
+
+test('should warn if middleware is not an array of function', () => {
+  const warn = jest.fn();
+  const template = templateMiddleware('Check');
+
+  jest.spyOn(console, 'warn').mockImplementation(warn);
+
+  template.extractMiddleware(1 as any);
+
+  expect(warn).toHaveBeenCalledTimes(1);
+  expect(warn).toHaveBeenNthCalledWith(1, expect.stringContaining('must be an array of function'));
+});
+
+test('should warn if middleware did not return function', () => {
+  const warn = jest.fn();
+  const template = templateMiddleware('Check');
+
+  jest.spyOn(console, 'warn').mockImplementation(warn);
+
+  template.extractMiddleware([() => 1 as any]);
+
+  expect(warn).toHaveBeenCalledTimes(1);
+  expect(warn).toHaveBeenNthCalledWith(1, expect.stringContaining('must return enhancer function'));
+});
+
+test('should not warn if middleware return false', () => {
+  const warn = jest.fn();
+  const template = templateMiddleware('Check');
+
+  jest.spyOn(console, 'warn').mockImplementation(warn);
+
+  template.extractMiddleware([() => false]);
+
+  expect(warn).toHaveBeenCalledTimes(0);
+});
+
+test('should not warn if middleware return function', () => {
+  const warn = jest.fn();
+  const template = templateMiddleware('Check');
+
+  jest.spyOn(console, 'warn').mockImplementation(warn);
+
+  template.extractMiddleware([() => () => 1 as any]);
+
+  expect(warn).toHaveBeenCalledTimes(0);
+});

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

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

package/src/middleware/private/templateMiddleware.tsx

@@ -0,0 +1,106 @@
+import { warnOnce } from '@msinternal/botframework-webchat-base/utils';
+import React, { memo, type ReactNode } from 'react';
+import { createChainOfResponsibility, type ComponentMiddleware } from 'react-chain-of-responsibility';
+import { array, function_, is, type InferOutput } from 'valibot';
+
+type MiddlewareWithInit<M extends ComponentMiddleware<any, any, any>, I> = (init: I) => ReturnType<M> | false;
+
+const arrayOfFunctionSchema = array(function_());
+
+/** @deprecated New middleware should use `templatePolymiddleware`. */
+const middlewareFactoryMarker = Symbol();
+
+const isArrayOfFunction = (middleware: unknown): middleware is InferOutput<typeof arrayOfFunctionSchema> =>
+  is(arrayOfFunctionSchema, middleware);
+
+const EMPTY_ARRAY = Object.freeze([]);
+
+/** @deprecated New middleware should use `templatePolymiddleware`. */
+// Following @types/react to use {} for props.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+function templateMiddleware<Request, Props extends {}>(name: string) {
+  type Middleware = ComponentMiddleware<Request, Props, string>;
+
+  const createMiddleware = (enhancer: ReturnType<Middleware>): Middleware => {
+    const factory: Middleware = init => init === name && enhancer;
+
+    // This is for checking if the middleware is created via factory function or not.
+    // We recommend middleware to be created using factory function.
+    factory[middlewareFactoryMarker satisfies symbol] = middlewareFactoryMarker;
+
+    return factory;
+  };
+
+  const warnInvalidExtraction = warnOnce(`Middleware passed for extraction of "${name}" must be an array of function`);
+
+  const extractMiddleware = (
+    middleware: readonly MiddlewareWithInit<ComponentMiddleware<unknown, unknown>, string>[] | undefined
+  ): readonly Middleware[] => {
+    if (middleware) {
+      if (isArrayOfFunction(middleware)) {
+        return Object.freeze(
+          middleware
+            .map(middleware => {
+              const result = middleware(name);
+
+              if (typeof result !== 'function' && result !== false) {
+                console.warn(`botframework-webchat: ${name}.middleware must return enhancer function or false`);
+
+                return false;
+              }
+
+              return result;
+            })
+            .filter((enhancer): enhancer is ReturnType<Middleware> => !!enhancer)
+            .map(enhancer => () => enhancer)
+        );
+      }
+
+      warnInvalidExtraction();
+    }
+
+    return EMPTY_ARRAY;
+  };
+
+  const { Provider, Proxy } = createChainOfResponsibility<Request, Props, string>();
+
+  type TemplatedProviderProps = {
+    readonly children?: ReactNode | undefined;
+    readonly middleware: readonly Middleware[];
+  };
+
+  // eslint-disable-next-line prefer-arrow-callback
+  const TemplatedProvider = memo(function TemplatedProvider({ children, middleware }: TemplatedProviderProps) {
+    return (
+      <Provider init={name} middleware={middleware}>
+        {children}
+      </Provider>
+    );
+  });
+
+  TemplatedProvider.displayName = `${name}Provider`;
+
+  Proxy.displayName = `${name}Proxy`;
+
+  return {
+    createMiddleware,
+    extractMiddleware,
+    Provider: TemplatedProvider,
+    Proxy,
+    '~types': undefined as {
+      middleware: Middleware;
+      props: Props;
+      request: Request;
+    }
+  };
+}
+
+/** @deprecated New middleware should use `templatePolymiddleware`. */
+type InferMiddleware<T extends { '~types': { middleware } }> = T['~types']['middleware'];
+/** @deprecated New middleware should use `templatePolymiddleware`. */
+type InferProps<T extends { '~types': { props } }> = T['~types']['props'];
+/** @deprecated New middleware should use `templatePolymiddleware`. */
+type InferRequest<T extends { '~types': { request } }> = T['~types']['request'];
+
+export default templateMiddleware;
+export { middlewareFactoryMarker, type InferMiddleware, type InferProps, type InferRequest };

package/src/middleware/useBuildRenderAvatarCallback.ts

@@ -0,0 +1,37 @@
+// We need to patch `useBuildRenderAvatarCallback()` from `api-middleware`.
+//
+// - Request of `useBuildRenderAvatarCallback()` should not need `styleOptions`
+//   - We should call `useStyleOptions()` to get style options
+// - However, `api-middleware` is before `api`, so it do not have access to `useStyleOptions`
+//
+// Until we have `api-style-options`, we have to patch `useBuildRenderAvatarCallback()` inside `api`.
+
+import {
+  __INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol,
+  useBuildRenderAvatarCallback as useBuildRenderAvatarCallbackRaw
+} from '@msinternal/botframework-webchat-api-middleware';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+import type { ComponentRenderer } from 'react-chain-of-responsibility/preview';
+import { useRefFrom } from 'use-ref-from';
+import { useStyleOptions } from '../hooks';
+
+export default function useBuildRenderAvatarCallback(): (request: {
+  readonly activity: WebChatActivity;
+}) => ComponentRenderer<{ children?: never }> {
+  const [styleOptions] = useStyleOptions();
+
+  const renderAvatar = useBuildRenderAvatarCallbackRaw();
+  const styleOptionsRef = useRefFrom(styleOptions);
+
+  return useCallback<(request: { readonly activity: WebChatActivity }) => ReturnType<typeof renderAvatar>>(
+    request =>
+      renderAvatar(
+        Object.freeze({
+          activity: request.activity,
+          [__INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol]: styleOptionsRef.current
+        })
+      ),
+    [renderAvatar, styleOptionsRef]
+  );
+}

package/src/normalizeStyleOptions.ts

@@ -1,39 +1,47 @@
-import { warnOnce } from 'botframework-webchat-core';
+import { warnOnce } from '@msinternal/botframework-webchat-base/utils';
 
 import defaultStyleOptions from './defaultStyleOptions';
-import StyleOptions, { StrictStyleOptions } from './StyleOptions';
+import type { StrictStyleOptions, StyleOptions } from './StyleOptions';
 
-const hideScrollToEndButtonDeprecation = warnOnce(
-  '"styleOptions.hideScrollToEndButton" has been deprecated. To hide scroll to end button, set "scrollToEndBehavior" to false. This deprecation migration will be removed on or after 2023-06-02.'
+const bubbleImageHeightDeprecation = warnOnce(
+  '"styleOptions.bubbleImageHeight" has been deprecated. Use "styleOptions.bubbleImageMaxHeight" and "styleOptions.bubbleImageMinHeight" instead. This deprecation migration will be removed on or after 2026-07-05.'
 );
 
-const newMessagesButtonFontSizeDeprecation = warnOnce(
-  '"styleOptions.newMessagesButtonFontSize" has been renamed to "styleOptions.scrollToEndButtonFontSize". This deprecation migration will be removed on or after 2023-06-02.'
+const bubbleMaxWidthDeprecation = warnOnce(
+  '"styleOptions.bubbleMaxWidth" has been deprecated. Use "styleOptions.bubbleAttachmentMaxWidth" and "styleOptions.bubbleMessageMaxWidth" instead. This deprecation migration will be removed on or after 2026-07-05.'
 );
 
-const suggestedActionBackgroundDeprecation = warnOnce(
-  '"styleOptions.suggestedActionBackground" has been deprecated. Please use "styleOptions.suggestedActionBackgroundColor" instead. This deprecation migration will be removed on or after 2021-09-16.'
+const bubbleMinWidthDeprecation = warnOnce(
+  '"styleOptions.bubbleMinWidth" has been deprecated. Use "styleOptions.bubbleAttachmentMinWidth" and "styleOptions.bubbleMessageMinWidth" instead. This deprecation migration will be removed on or after 2026-07-05.'
 );
 
-const suggestedActionXXXBackgroundDeprecation = warnOnce(
-  '"styleOptions.suggestedActionXXXBackground" has been deprecated. Please use "styleOptions.suggestedActionBackgroundColorOnXXX" instead. This deprecation migration will be removed on or after 2021-09-16.'
+const hideUploadButtonDeprecation = warnOnce(
+  '`styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14.'
 );
 
-const suggestedActionDisabledDeprecation = warnOnce(
-  '"styleOptions.suggestedActionDisabledXXX" has been renamed to "styleOptions.suggestedActionXXXOnDisabled". This deprecation migration will be removed on or after 2021-09-16.'
-);
+const slowConnectionAfterInvalidValue = warnOnce('"slowConnectionAfter" cannot be negative, will set to 0.');
 
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
 
-// eslint-disable-next-line complexity
 export default function normalizeStyleOptions({
-  hideScrollToEndButton,
-  newMessagesButtonFontSize,
+  bubbleImageHeight,
+  bubbleMaxWidth,
+  bubbleMinWidth,
+  disableFileUpload,
+  hideUploadButton,
+  slowConnectionAfter,
   ...options
 }: StyleOptions = {}): StrictStyleOptions {
-  const filledOptions: Required<StyleOptions> = { ...defaultStyleOptions, ...options };
+  const filledOptions: Required<StyleOptions> = {
+    ...defaultStyleOptions,
+    bubbleImageHeight: undefined,
+    bubbleMaxWidth: undefined,
+    bubbleMinWidth: undefined,
+    hideUploadButton: undefined,
+    ...options
+  };
 
   // Keep this list flat (no nested style) and serializable (no functions)
   const { bubbleFromUserNubOffset, bubbleNubOffset, emojiSet } = filledOptions;
@@ -58,7 +66,7 @@ export default function normalizeStyleOptions({
     normalizedBubbleNubOffset = bubbleNubOffset;
   }
 
-  if (emojiSet === true) {
+  if (emojiSet === true || typeof emojiSet === 'undefined') {
     normalizedEmojiSet = {
       ':)': '😊',
       ':-)': '😊',
@@ -86,6 +94,8 @@ export default function normalizeStyleOptions({
       '</3': '💔',
       '<\\3': '💔'
     };
+  } else if (emojiSet === false) {
+    normalizedEmojiSet = false;
   } else if (Object.prototype.toString.call(emojiSet) !== '[object Object]') {
     console.warn('botframework-webchat: emojiSet must be a boolean or an object with emoticon: emojiValues');
     normalizedEmojiSet = false;
@@ -93,14 +103,6 @@ export default function normalizeStyleOptions({
     normalizedEmojiSet = emojiSet;
   }
 
-  if (hideScrollToEndButton) {
-    hideScrollToEndButtonDeprecation();
-
-    // Only set if the "scrollToEndButtonBehavior" is not set.
-    // If it has been set, the developer should know the older "hideScrollToEndButton" option is deprecated.
-    filledOptions.scrollToEndButtonBehavior = options.scrollToEndButtonBehavior || false;
-  }
-
   let patchedScrollToEndButtonBehavior = filledOptions.scrollToEndButtonBehavior;
 
   if (patchedScrollToEndButtonBehavior !== 'any' && patchedScrollToEndButtonBehavior !== false) {
@@ -112,76 +114,49 @@ export default function normalizeStyleOptions({
     patchedScrollToEndButtonBehavior = 'unread';
   }
 
-  if (newMessagesButtonFontSize) {
-    newMessagesButtonFontSizeDeprecation();
-
-    // Only set if the "scrollToEndButtonFontSize" is not set.
-    filledOptions.scrollToEndButtonFontSize = options.scrollToEndButtonFontSize || newMessagesButtonFontSize;
-  }
-
-  options.suggestedActionBackground && suggestedActionBackgroundDeprecation();
-
-  if (options.suggestedActionActiveBackground) {
-    suggestedActionXXXBackgroundDeprecation();
-
-    filledOptions.suggestedActionBackgroundColorOnActive =
-      options.suggestedActionBackgroundColorOnActive || options.suggestedActionActiveBackground;
-  }
-
-  if (options.suggestedActionFocusBackground) {
-    suggestedActionXXXBackgroundDeprecation();
-
-    filledOptions.suggestedActionBackgroundColorOnFocus =
-      options.suggestedActionBackgroundColorOnFocus || options.suggestedActionFocusBackground;
-  }
-
-  if (options.suggestedActionHoverBackground) {
-    suggestedActionXXXBackgroundDeprecation();
-
-    filledOptions.suggestedActionBackgroundColorOnHover =
-      options.suggestedActionBackgroundColorOnHover || options.suggestedActionHoverBackground;
-  }
+  if (bubbleImageHeight) {
+    bubbleImageHeightDeprecation();
 
-  if (options.suggestedActionDisabledBackground) {
-    suggestedActionXXXBackgroundDeprecation();
+    filledOptions.bubbleImageMaxHeight = bubbleImageHeight;
+    filledOptions.bubbleImageMinHeight = bubbleImageHeight;
 
-    filledOptions.suggestedActionBackgroundColorOnDisabled =
-      options.suggestedActionBackgroundColorOnDisabled || options.suggestedActionDisabledBackground;
+    filledOptions.bubbleImageHeight = undefined;
   }
 
-  if (options.suggestedActionDisabledBorderColor) {
-    suggestedActionDisabledDeprecation();
+  if (bubbleMaxWidth) {
+    bubbleMaxWidthDeprecation();
 
-    filledOptions.suggestedActionBorderColorOnDisabled =
-      options.suggestedActionBorderColorOnDisabled || options.suggestedActionDisabledBorderColor;
+    filledOptions.bubbleAttachmentMaxWidth = bubbleMaxWidth;
+    filledOptions.bubbleMessageMaxWidth = bubbleMaxWidth;
   }
 
-  if (options.suggestedActionDisabledBorderStyle) {
-    suggestedActionDisabledDeprecation();
+  if (bubbleMinWidth) {
+    bubbleMinWidthDeprecation();
 
-    filledOptions.suggestedActionBorderStyleOnDisabled =
-      options.suggestedActionBorderStyleOnDisabled || options.suggestedActionDisabledBorderStyle;
+    filledOptions.bubbleAttachmentMinWidth = bubbleMinWidth;
+    filledOptions.bubbleMessageMinWidth = bubbleMinWidth;
   }
 
-  if (options.suggestedActionDisabledBorderWidth) {
-    suggestedActionDisabledDeprecation();
+  if (slowConnectionAfter < 0) {
+    slowConnectionAfterInvalidValue();
 
-    filledOptions.suggestedActionBorderWidthOnDisabled =
-      options.suggestedActionBorderWidthOnDisabled || options.suggestedActionDisabledBorderWidth;
+    slowConnectionAfter = 0;
   }
 
-  if (options.suggestedActionDisabledTextColor) {
-    suggestedActionDisabledDeprecation();
+  // Rectify deprecated "hideUploadButton" into "disableFileUpload"
+  if (typeof hideUploadButton !== 'undefined') {
+    hideUploadButtonDeprecation();
 
-    filledOptions.suggestedActionTextColorOnDisabled =
-      options.suggestedActionTextColorOnDisabled || options.suggestedActionDisabledTextColor;
+    disableFileUpload = !!hideUploadButton;
   }
 
   return {
     ...filledOptions,
     bubbleFromUserNubOffset: normalizedBubbleFromUserNubOffset,
     bubbleNubOffset: normalizedBubbleNubOffset,
+    disableFileUpload,
     emojiSet: normalizedEmojiSet,
-    scrollToEndButtonBehavior: patchedScrollToEndButtonBehavior
+    scrollToEndButtonBehavior: patchedScrollToEndButtonBehavior,
+    slowConnectionAfter
   };
 }