botframework-webchat-api 4.18.2 → 4.19.0

package/src/decorator/private/templateDecorator.tsx

@@ -0,0 +1,113 @@
+import PassthroughFallback from './PassthroughFallback';
+import DecoratorComposerContext from './DecoratorComposerContext';
+import React, { memo, useContext, useMemo, type Context, type ComponentType, type ReactNode } from 'react';
+import { ComponentMiddleware, createChainOfResponsibility } from 'react-chain-of-responsibility';
+import { middlewareFactoryMarker } from '../../middleware/private/templateMiddleware';
+
+const decoratorChain = createChainOfResponsibility<undefined, any, any>();
+
+export default function templateDecorator<
+  const P extends { children?: ReactNode | undefined },
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  const R extends {},
+  const Name extends string = string
+>(
+  name: Name,
+  DecoratorRequestContext: Context<{ request: R }>,
+  FinalComponent: ComponentType<P> = PassthroughFallback
+) {
+  type FullProps = P & {
+    Next: ComponentType<P>;
+    request: R;
+  };
+  type Middleware = (name: Name) => ReturnType<ComponentMiddleware<undefined, FullProps, typeof name>> | false;
+
+  function buildComponent<T extends P>(
+    Component: ComponentType<FullProps>,
+    Next: ComponentType<P>
+  ): React.ComponentType<T> {
+    function ChainNext(props: T) {
+      const request = useContext(DecoratorRequestContext)?.request;
+      return <Component {...props} Next={Next} request={request} />;
+    }
+
+    ChainNext.displayName = `ChainNext(Next ${name})`;
+    return memo<T>(ChainNext);
+  }
+
+  function createMiddleware(Component: ComponentType<FullProps>): Middleware {
+    const factory: Middleware = (init: string): ReturnType<Middleware> | false => {
+      if (init !== name) {
+        return false;
+      }
+
+      return next => () => {
+        const Next = next(undefined);
+        return Next && buildComponent(Component, Next);
+      };
+    };
+
+    // 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;
+  }
+
+  // Reuse global chain, but cast it to the correct type.
+  const { Provider: DecoratorChainProvider, useBuildComponentCallback } = decoratorChain as ReturnType<
+    typeof createChainOfResponsibility<undefined, P, unknown>
+  >;
+
+  function Chain(props: P) {
+    const buildMiddleware = useBuildComponentCallback();
+    const Proxy = useMemo(() => buildMiddleware(undefined, { fallbackComponent: FinalComponent }), [buildMiddleware]);
+
+    return Proxy && <Proxy {...props} />;
+  }
+
+  Chain.displayName = `DecoratorChain(Chain ${name})`;
+
+  const MemoChain = memo<P>(Chain);
+
+  function DecoratorProxy(props: P & Readonly<{ request: R }>) {
+    const { request } = props;
+    const { middleware } = useContext(DecoratorComposerContext);
+    const decoratorMiddleware = useMemo(
+      () =>
+        middleware
+          .map(middleware => middleware(name))
+          .filter(enhancer => enhancer)
+          // Conversion from internal props to actual middleware stack props.
+          .map(enhancer => () => enhancer) as ComponentMiddleware<undefined, P, unknown>[],
+      [middleware]
+    );
+
+    const value = useMemo(() => ({ request }), [request]);
+
+    return (
+      <DecoratorRequestContext.Provider value={value}>
+        <DecoratorChainProvider init={name} middleware={decoratorMiddleware}>
+          <MemoChain {...props} />
+        </DecoratorChainProvider>
+      </DecoratorRequestContext.Provider>
+    );
+  }
+
+  DecoratorProxy.displayName = `DecoratorProxy(Decorator ${name})`;
+
+  return {
+    createMiddleware,
+    Proxy: memo<P & Readonly<{ request: R }>>(DecoratorProxy),
+    // This is for type inference, so we can use it in other files.
+    '~types': undefined as unknown as {
+      middleware: Middleware;
+      request: R;
+      props: P;
+    }
+  };
+}
+
+export type InferMiddleware<T extends ReturnType<typeof templateDecorator>> = T['~types']['middleware'];
+export type InferProps<T extends ReturnType<typeof templateDecorator>> = T['~types']['props'];
+export type InferRequest<T extends ReturnType<typeof templateDecorator>> = T['~types']['request'];

package/src/decorator/types.ts

@@ -0,0 +1,4 @@
+import { ActivityBorderDecoratorMiddleware } from './ActivityBorder/private/ActivityBorderDecoratorMiddleware';
+import { ActivityGroupingDecoratorMiddleware } from './ActivityGrouping/private/ActivityGroupingDecoratorMiddleware';
+
+export type DecoratorMiddleware = ActivityBorderDecoratorMiddleware | ActivityGroupingDecoratorMiddleware;

package/src/decorator/useDecoratorRequest.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { ActivityBorderDecoratorRequest } from './ActivityBorder/ActivityBorderDecorator';
+
+export default function useDecoratorRequest(type: typeof ActivityBorderDecoratorRequest) {
+  const request = useContext(type)?.request;
+
+  if (!request) {
+    throw new Error(`useDecoratorRequest must be used within a ${type}Provider`);
+  }
+
+  return request;
+}
+
+export type InferDecoratorRequest<T extends typeof ActivityBorderDecoratorRequest> =
+  T extends React.Context<infer U> ? (U extends { request: infer R } ? R : never) : never;

package/src/defaultStyleOptions.ts

@@ -1,7 +1,7 @@
 /* eslint no-magic-numbers: "off" */
-import StyleOptions from './StyleOptions';
+import { type StrictStyleOptions } from './StyleOptions';
 
-function fontFamily(fonts) {
+function fontFamily(fonts: readonly string[]): string {
   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: Required<StyleOptions> = {
+const DEFAULT_OPTIONS: StrictStyleOptions = {
   // Basic styling
   accent: DEFAULT_ACCENT,
   backgroundColor: 'White',
@@ -26,6 +26,7 @@ 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%',
@@ -53,10 +54,13 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   bubbleFromUserNubOffset: 0,
   bubbleFromUserNubSize: undefined,
   bubbleFromUserTextColor: 'Black',
-  bubbleImageHeight: 240,
-  bubbleMaxWidth: 480, // Based off screen width = 600px
+  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,
   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',
@@ -73,7 +77,7 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   slowConnectionAfter: 15000,
 
   // Emoji
-  emojiSet: true,
+  emojiSet: undefined,
 
   // Live region - Accessibility
   internalLiveRegionFadeAfter: 1000,
@@ -85,21 +89,20 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   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,
@@ -189,16 +192,6 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   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,
@@ -227,7 +220,6 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   // 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)',
@@ -238,7 +230,6 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   transcriptOverlayButtonColorOnHover: undefined,
 
   // Toast UI
-
   notificationDebounceTimeout: 400,
 
   hideToaster: false,
@@ -290,7 +281,33 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   // Video
   videoHeight: 270, // based on bubbleMaxWidth: 480 / 16 * 9 = 270
 
-  maxMessageLength: 2000
+  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'
 };
 
 export default DEFAULT_OPTIONS;

package/src/env.d.ts

@@ -0,0 +1,9 @@
+// For adding things to `globalThis`, TypeScript need `var`, not `const` or `let`.
+/* eslint-disable no-var */
+declare global {
+  var WEB_CHAT_BUILD_INFO_BUILD_TOOL: string | undefined;
+  var WEB_CHAT_BUILD_INFO_MODULE_FORMAT: string | undefined;
+  var WEB_CHAT_BUILD_INFO_VERSION: string | undefined;
+}
+
+export {};

package/src/errorBox/errorBoxTelemetryPolymiddleware.ts

@@ -0,0 +1,53 @@
+import {
+  createErrorBoxPolymiddleware,
+  errorBoxComponent,
+  ErrorBoxPolymiddlewareHandlerResult
+} from '@msinternal/botframework-webchat-api-middleware';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { memo, useEffect } from 'react';
+import { custom, never, object, optional, pipe, readonly, unknown, type InferInput } from 'valibot';
+
+import { useTrackException } from '../hooks';
+
+const errorBoxTelemetryHeadlessPropsSchema = pipe(
+  object({
+    children: optional(never()),
+    error: unknown(),
+    render: optional(custom<ErrorBoxPolymiddlewareHandlerResult['render']>(value => typeof value === 'function'))
+  }),
+  readonly()
+);
+
+type ErrorBoxTelemetryHeadlessProps = InferInput<typeof errorBoxTelemetryHeadlessPropsSchema>;
+
+// Use traditional function for component name.
+// eslint-disable-next-line prefer-arrow-callback
+const ErrorBoxTelemetryHeadless = memo(function ErrorBoxTelemetryHeadless(props: ErrorBoxTelemetryHeadlessProps) {
+  const { error, render } = validateProps(errorBoxTelemetryHeadlessPropsSchema, props);
+  const trackException = useTrackException();
+
+  useEffect(() => {
+    if (error instanceof Error) {
+      trackException(error, false);
+    } else {
+      const telemetryError = new Error('Unknown error');
+
+      telemetryError.cause = error;
+      telemetryError.name = 'WebChatError';
+
+      trackException(telemetryError, false);
+    }
+  }, [error, trackException]);
+
+  return render?.();
+});
+
+const errorBoxTelemetryPolymiddleware = createErrorBoxPolymiddleware(
+  next => request =>
+    errorBoxComponent(ErrorBoxTelemetryHeadless, {
+      error: request.error,
+      render: next(request)?.render
+    })
+);
+
+export default errorBoxTelemetryPolymiddleware;