botframework-webchat-api 4.18.1-main.20260511.8fcd02a → 4.18.1

package/src/decorator/index.ts

@@ -0,0 +1,4 @@
+export { DecoratorComposer } from './private/DecoratorComposer';
+export { default as ActivityDecorator } from './private/ActivityDecorator';
+export { type DecoratorMiddleware } from './private/createDecoratorComposer';
+export { default as ActivityDecoratorRequest } from './private/activityDecoratorRequest';

package/src/decorator/private/ActivityBorderDecoratorMiddleware.ts

@@ -0,0 +1,31 @@
+import { type EmptyObject } from 'type-fest';
+
+import ActivityDecoratorRequest from './activityDecoratorRequest';
+import templateMiddleware from './templateMiddleware';
+
+const {
+  initMiddleware: initActivityBorderDecoratorMiddleware,
+  Provider: ActivityBorderDecoratorMiddlewareProvider,
+  Proxy: ActivityBorderDecoratorMiddlewareProxy,
+  types
+} = templateMiddleware<typeof activityBorderDecoratorTypeName, ActivityDecoratorRequest, EmptyObject>(
+  'ActivityBorderDecoratorMiddleware'
+);
+
+type ActivityBorderDecoratorMiddleware = typeof types.middleware;
+type ActivityBorderDecoratorMiddlewareInit = typeof types.init;
+type ActivityBorderDecoratorMiddlewareProps = typeof types.props;
+type ActivityBorderDecoratorMiddlewareRequest = typeof types.request;
+
+const activityBorderDecoratorTypeName = 'activity border' as const;
+
+export {
+  ActivityBorderDecoratorMiddlewareProvider,
+  ActivityBorderDecoratorMiddlewareProxy,
+  activityBorderDecoratorTypeName,
+  initActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddlewareInit,
+  type ActivityBorderDecoratorMiddlewareProps,
+  type ActivityBorderDecoratorMiddlewareRequest
+};

package/src/decorator/private/ActivityDecorator.tsx

@@ -0,0 +1,31 @@
+import { WebChatActivity } from 'botframework-webchat-core';
+import React, { Fragment, memo, useMemo, type ReactNode } from 'react';
+import { ActivityDecoratorRequest } from '..';
+import { ActivityBorderDecoratorMiddlewareProxy } from './ActivityBorderDecoratorMiddleware';
+
+const ActivityDecoratorFallback = memo(({ children }) => <Fragment>{children}</Fragment>);
+
+ActivityDecoratorFallback.displayName = 'ActivityDecoratorFallback';
+
+const supportedActivityRoles: ActivityDecoratorRequest['from'][] = ['bot', 'channel', 'user', undefined];
+const supportedActivityStates: ActivityDecoratorRequest['state'][] = ['informative', 'completion', undefined];
+
+function ActivityDecorator({ children, activity }: Readonly<{ activity?: WebChatActivity; children?: ReactNode }>) {
+  const request = useMemo<ActivityDecoratorRequest>(
+    () => ({
+      from: supportedActivityRoles.includes(activity?.from?.role) ? activity?.from?.role : undefined,
+      state: supportedActivityStates.includes(activity?.channelData?.streamType)
+        ? activity?.channelData?.streamType
+        : undefined
+    }),
+    [activity]
+  );
+
+  return (
+    <ActivityBorderDecoratorMiddlewareProxy fallbackComponent={ActivityDecoratorFallback} request={request}>
+      {children}
+    </ActivityBorderDecoratorMiddlewareProxy>
+  );
+}
+
+export default memo(ActivityDecorator);

package/src/decorator/private/DecoratorComposer.tsx

@@ -0,0 +1,6 @@
+import { memo } from 'react';
+import createDecoratorComposer from './createDecoratorComposer';
+
+export const DecoratorComposer = memo(createDecoratorComposer());
+
+DecoratorComposer.displayName = 'DecoratorComposer';

package/src/decorator/private/activityDecoratorRequest.ts

@@ -0,0 +1,6 @@
+type ActivityDecoratorRequestType = {
+  from: 'bot' | 'channel' | `user` | undefined;
+  state: 'completion' | 'informative' | undefined;
+};
+
+export default ActivityDecoratorRequestType;

package/src/decorator/private/createDecoratorComposer.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo, type ReactNode } from 'react';
+import {
+  ActivityBorderDecoratorMiddlewareProvider,
+  activityBorderDecoratorTypeName,
+  initActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddleware
+} from './ActivityBorderDecoratorMiddleware';
+
+type DecoratorMiddlewareInit = typeof activityBorderDecoratorTypeName;
+
+export type DecoratorComposerComponent = (
+  props: Readonly<{
+    children?: ReactNode;
+    middleware?: DecoratorMiddleware[];
+  }>
+) => React.JSX.Element;
+
+export type DecoratorMiddleware = (
+  init: DecoratorMiddlewareInit
+) => ReturnType<ActivityBorderDecoratorMiddleware> | false;
+
+const EMPTY_ARRAY = [];
+
+export default (): DecoratorComposerComponent =>
+  ({ children, middleware = EMPTY_ARRAY }) => {
+    const borderMiddlewares = useMemo(
+      () => initActivityBorderDecoratorMiddleware(middleware, activityBorderDecoratorTypeName),
+      [middleware]
+    );
+
+    return (
+      <ActivityBorderDecoratorMiddlewareProvider middleware={borderMiddlewares}>
+        {children}
+      </ActivityBorderDecoratorMiddlewareProvider>
+    );
+  };

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

@@ -1,7 +1,7 @@
 /* eslint no-magic-numbers: "off" */
-import { type StrictStyleOptions } from './StyleOptions';
+import StyleOptions from './StyleOptions';
 
-function fontFamily(fonts: readonly string[]): string {
+function fontFamily(fonts) {
   return fonts.map(font => `'${font}'`).join(', ');
 }
 
@@ -9,7 +9,7 @@ const DEFAULT_ACCENT = '#0063B1';
 const DEFAULT_SUBTLE = '#767676'; // With contrast 4.5:1 to white
 const PADDING_REGULAR = 10;
 
-const DEFAULT_OPTIONS: StrictStyleOptions = {
+const DEFAULT_OPTIONS: Required<StyleOptions> = {
   // Basic styling
   accent: DEFAULT_ACCENT,
   backgroundColor: 'White',
@@ -26,7 +26,6 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   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,13 +53,10 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   bubbleFromUserNubOffset: 0,
   bubbleFromUserNubSize: undefined,
   bubbleFromUserTextColor: 'Black',
-  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.
-  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',
@@ -77,7 +73,7 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   slowConnectionAfter: 15000,
 
   // Emoji
-  emojiSet: undefined,
+  emojiSet: true,
 
   // Live region - Accessibility
   internalLiveRegionFadeAfter: 1000,
@@ -89,20 +85,21 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   markdownRenderHTML: true,
 
   // Scroll behavior
+  hideScrollToEndButton: undefined, // Deprecated as of 4.14.0. Use "scrollToEndButtonBehavior" instead. Remove on or after 2023-06-02.
   autoScrollSnapOnActivity: false,
   autoScrollSnapOnActivityOffset: 0,
   autoScrollSnapOnPage: false,
   autoScrollSnapOnPageOffset: 0, // TODO: Rename from "autoScrollSnapOnPageoffset".
 
   // Send box
-  disableFileUpload: false,
   hideSendBox: false,
+  hideUploadButton: false,
   hideTelephoneKeypadButton: true,
   microphoneButtonColorOnDictate: '#F33',
-  sendAttachmentOn: 'send',
   sendBoxBackground: 'White',
   uploadAccept: undefined,
   uploadMultiple: true,
+  sendAttachmentOn: 'send',
 
   // Send box buttons
   sendBoxButtonColor: undefined,
@@ -192,6 +189,16 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   suggestedActionKeyboardFocusIndicatorBorderWidth: 1,
   suggestedActionKeyboardFocusIndicatorInset: 2,
 
+  suggestedActionActiveBackground: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionBackground: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionDisabledBackground: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionDisabledBorderColor: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionDisabledBorderStyle: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionDisabledBorderWidth: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionDisabledTextColor: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionFocusBackground: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+  suggestedActionHoverBackground: undefined, // Deprecated as of 4.15.0. Remove on or after 2023-09-16.
+
   // Suggested actions carousel layout
   suggestedActionsCarouselFlipperCursor: undefined,
   suggestedActionsCarouselFlipperBoxWidth: 40,
@@ -220,6 +227,7 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   // Transcript overlay buttons
   scrollToEndButtonBehavior: 'unread',
   scrollToEndButtonFontSize: '85%',
+  newMessagesButtonFontSize: undefined, // Deprecated as of 4.14.0, renamed to "scrollToEndButtonFontSize". Remove on or after 2023-06-02.
   transcriptOverlayButtonBackground: 'rgba(0, 0, 0, .6)',
   transcriptOverlayButtonBackgroundOnDisabled: 'rgba(0, 0, 0, .6)',
   transcriptOverlayButtonBackgroundOnFocus: 'rgba(0, 0, 0, .8)',
@@ -230,6 +238,7 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   transcriptOverlayButtonColorOnHover: undefined,
 
   // Toast UI
+
   notificationDebounceTimeout: 400,
 
   hideToaster: false,
@@ -281,33 +290,7 @@ const DEFAULT_OPTIONS: StrictStyleOptions = {
   // 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;