botframework-webchat-api 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/decorator/ActivityGrouping/private/ActivityGroupingDecoratorMiddleware.ts

@@ -0,0 +1,38 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import templateMiddleware from '../../private/templateMiddleware';
+import { type activityGroupingDecoratorTypeName } from '../types';
+
+type Request = Readonly<{
+  /**
+   * Name of the grouping from the result of `groupActivitesMiddleware()`.
+   */
+  groupingName: string;
+}>;
+
+type Props = Readonly<{
+  activities: readonly WebChatActivity[];
+}>;
+
+const {
+  initMiddleware: initActivityGroupingDecoratorMiddleware,
+  Provider: ActivityGroupingDecoratorMiddlewareProvider,
+  Proxy: ActivityGroupingDecoratorMiddlewareProxy,
+  // False positive, `types` is used for its typing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  types
+} = templateMiddleware<typeof activityGroupingDecoratorTypeName, Request, Props>('ActivityGroupingDecoratorMiddleware');
+
+type ActivityGroupingDecoratorMiddleware = typeof types.middleware;
+type ActivityGroupingDecoratorMiddlewareInit = typeof types.init;
+type ActivityGroupingDecoratorMiddlewareProps = typeof types.props;
+type ActivityGroupingDecoratorMiddlewareRequest = typeof types.request;
+
+export {
+  ActivityGroupingDecoratorMiddlewareProvider,
+  ActivityGroupingDecoratorMiddlewareProxy,
+  initActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddlewareInit,
+  type ActivityGroupingDecoratorMiddlewareProps,
+  type ActivityGroupingDecoratorMiddlewareRequest
+};

package/src/decorator/ActivityGrouping/types.ts

@@ -0,0 +1 @@
+export const activityGroupingDecoratorTypeName = 'activity grouping' as const;

package/src/decorator/DecoratorComposer.tsx

@@ -0,0 +1,22 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+import InternalDecoratorComposer from './internal/InternalDecoratorComposer';
+import { type DecoratorMiddleware } from './types';
+
+type DecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware?: readonly DecoratorMiddleware[] | undefined;
+}>;
+
+function DecoratorComposer({ children, middleware }: DecoratorComposerProps) {
+  return middleware ? (
+    <InternalDecoratorComposer middleware={middleware} priority="normal">
+      {children}
+    </InternalDecoratorComposer>
+  ) : (
+    // We can't return `children` unless we are not using memo().
+    <Fragment>{children}</Fragment>
+  );
+}
+
+export default memo(DecoratorComposer);
+export { type DecoratorComposerProps };

package/src/decorator/internal/InternalDecoratorComposer.tsx

@@ -0,0 +1,61 @@
+import React, { memo, useContext, useMemo, type ReactNode } from 'react';
+import {
+  ActivityBorderDecoratorMiddlewareProvider,
+  initActivityBorderDecoratorMiddleware
+} from '../ActivityBorder/private/ActivityBorderDecoratorMiddleware';
+import { activityBorderDecoratorTypeName } from '../ActivityBorder/types';
+import {
+  ActivityGroupingDecoratorMiddlewareProvider,
+  initActivityGroupingDecoratorMiddleware
+} from '../ActivityGrouping/private/ActivityGroupingDecoratorMiddleware';
+import { activityGroupingDecoratorTypeName } from '../ActivityGrouping/types';
+import DecoratorComposerContext from '../private/DecoratorComposerContext';
+import { type DecoratorMiddleware } from '../types';
+
+type InternalDecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware: readonly DecoratorMiddleware[];
+  priority: 'low' | 'normal';
+}>;
+
+const EMPTY_ARRAY = Object.freeze([]);
+
+function InternalDecoratorComposer({
+  children,
+  middleware: middlewareFromProps = EMPTY_ARRAY,
+  priority
+}: InternalDecoratorComposerProps) {
+  const existingContext = useContext(DecoratorComposerContext);
+  const middleware = useMemo(
+    () =>
+      priority === 'low'
+        ? Object.freeze([...existingContext.middleware, ...middlewareFromProps])
+        : Object.freeze([...middlewareFromProps, ...existingContext.middleware]),
+    [existingContext, middlewareFromProps, priority]
+  );
+
+  const activityBorderMiddleware = useMemo(
+    () => initActivityBorderDecoratorMiddleware(middleware, activityBorderDecoratorTypeName),
+    [middleware]
+  );
+
+  const activityGroupingMiddleware = useMemo(
+    () => initActivityGroupingDecoratorMiddleware(middleware, activityGroupingDecoratorTypeName),
+    [middleware]
+  );
+
+  const context = useMemo(() => ({ middleware }), [middleware]);
+
+  return (
+    <DecoratorComposerContext.Provider value={context}>
+      <ActivityBorderDecoratorMiddlewareProvider middleware={activityBorderMiddleware}>
+        <ActivityGroupingDecoratorMiddlewareProvider middleware={activityGroupingMiddleware}>
+          {children}
+        </ActivityGroupingDecoratorMiddlewareProvider>
+      </ActivityBorderDecoratorMiddlewareProvider>
+    </DecoratorComposerContext.Provider>
+  );
+}
+
+export default memo(InternalDecoratorComposer);
+export { type InternalDecoratorComposerProps };

package/src/decorator/internal/LowPriorityDecoratorComposer.tsx

@@ -0,0 +1,19 @@
+import React, { memo, type ReactNode } from 'react';
+import { type DecoratorMiddleware } from '../types';
+import InternalDecoratorComposer from './InternalDecoratorComposer';
+
+type LowPriorityDecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware: readonly DecoratorMiddleware[];
+}>;
+
+function LowPriorityDecoratorDecomposer({ children, middleware }: LowPriorityDecoratorComposerProps) {
+  return (
+    <InternalDecoratorComposer middleware={middleware} priority="low">
+      {children}
+    </InternalDecoratorComposer>
+  );
+}
+
+export default memo(LowPriorityDecoratorDecomposer);
+export { type LowPriorityDecoratorComposerProps };

package/src/decorator/private/DecoratorComposerContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import { type DecoratorMiddleware } from '../types';
+
+type DecoratorComposerContextType = Readonly<{
+  middleware: readonly DecoratorMiddleware[];
+}>;
+
+const DecoratorComposerContext = createContext<DecoratorComposerContextType>(
+  Object.freeze({
+    middleware: Object.freeze([])
+  })
+);
+
+export default DecoratorComposerContext;
+export { type DecoratorComposerContextType };

package/src/decorator/private/PassthroughFallback.tsx

@@ -0,0 +1,12 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+type PassthroughFallbackProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+function PassthroughFallback({ children }: PassthroughFallbackProps) {
+  return <Fragment>{children}</Fragment>;
+}
+
+export default memo(PassthroughFallback);
+export { type PassthroughFallbackProps };

package/src/decorator/private/templateMiddleware.test.tsx

@@ -0,0 +1,100 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+import { render } from '@testing-library/react';
+import React, { Fragment, type ReactNode } from 'react';
+
+import templateMiddleware from './templateMiddleware';
+
+type ButtonProps = Readonly<{ children?: ReactNode | undefined }>;
+type LinkProps = Readonly<{ children?: ReactNode | undefined; href: string }>;
+
+const ButtonImpl = ({ children }: ButtonProps) => <button type="button">{children}</button>;
+
+const ExternalLinkImpl = ({ children, href }: LinkProps) => (
+  <a href={href} rel="noopener noreferer">
+    {children}
+  </a>
+);
+
+const InternalLinkImpl = ({ children, href }: LinkProps) => <a href={href}>{children}</a>;
+
+// User story for using templateMiddleware as a building block for uber middleware.
+test('an uber middleware', () => {
+  const {
+    initMiddleware: initButtonMiddleware,
+    Provider: ButtonProvider,
+    Proxy: Button,
+    // False positive, `types` is used for its typing.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    types: buttonTypes
+  } = templateMiddleware<'button', void, ButtonProps>('Button');
+
+  type ButtonMiddleware = typeof buttonTypes.middleware;
+
+  const {
+    initMiddleware: initLinkMiddleware,
+    Provider: LinkProvider,
+    Proxy: Link,
+    // False positive, `types` is used for its typing.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    types: linkTypes
+  } = templateMiddleware<'link', { external: boolean }, LinkProps>('Link');
+
+  type LinkMiddleware = typeof linkTypes.middleware;
+
+  const buttonMiddleware: ButtonMiddleware[] = [init => init === 'button' && (() => () => ButtonImpl)];
+  const linkMiddleware: LinkMiddleware[] = [
+    init => init === 'link' && (next => request => (request.external ? ExternalLinkImpl : next(request))),
+    init => init === 'link' && (() => () => InternalLinkImpl)
+  ];
+
+  const App = ({
+    children,
+    middleware
+  }: Readonly<{
+    children?: ReactNode | undefined;
+    middleware: ReadonlyArray<ButtonMiddleware | LinkMiddleware>;
+  }>) => (
+    <Fragment>
+      {/* TODO: Should not case middleware to any */}
+      <ButtonProvider middleware={initButtonMiddleware(middleware as any, 'button')}>
+        {/* TODO: Should not case middleware to any */}
+        <LinkProvider middleware={initLinkMiddleware(middleware as any, 'link')}>{children}</LinkProvider>
+      </ButtonProvider>
+    </Fragment>
+  );
+
+  const result = render(
+    <App middleware={[...buttonMiddleware, ...linkMiddleware]}>
+      {/* TODO: If "request" is of type "void", we should not need it specified. */}
+      <Button request={undefined}>{'Click me'}</Button>
+      <Link href="https://bing.com" request={{ external: false }}>
+        {'Internal link'}
+      </Link>
+      <Link href="https://example.com" request={{ external: true }}>
+        {'External link'}
+      </Link>
+    </App>
+  );
+
+  expect(result.container).toMatchInlineSnapshot(`
+<div>
+  <button
+    type="button"
+  >
+    Click me
+  </button>
+  <a
+    href="https://bing.com"
+  >
+    Internal link
+  </a>
+  <a
+    href="https://example.com"
+    rel="noopener noreferer"
+  >
+    External link
+  </a>
+</div>
+`);
+});

package/src/decorator/private/templateMiddleware.ts

@@ -0,0 +1,60 @@
+import { warnOnce } from 'botframework-webchat-core';
+import { createChainOfResponsibility, type ComponentMiddleware } from 'react-chain-of-responsibility';
+import { type EmptyObject } from 'type-fest';
+import { any, array, function_, pipe, safeParse, type InferOutput } from 'valibot';
+
+export type MiddlewareWithInit<M extends ComponentMiddleware<any, any, any>, I> = (init: I) => ReturnType<M> | false;
+
+const EMPTY_ARRAY = Object.freeze([]);
+
+// Following @types/react to use {} for props.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export default function templateMiddleware<Init extends string, Request = any, Props extends {} = EmptyObject>(
+  name: string
+) {
+  type Middleware = ComponentMiddleware<Request, Props>;
+
+  const middlewareSchema = array(pipe(any(), function_()));
+
+  const isMiddleware = (middleware: unknown): middleware is InferOutput<typeof middlewareSchema> =>
+    safeParse(middlewareSchema, middleware).success;
+
+  const warnInvalid = warnOnce(`"${name}" prop is invalid`);
+
+  const initMiddleware = (
+    middleware: readonly MiddlewareWithInit<ComponentMiddleware<unknown, unknown>, Init>[],
+    init: Init
+  ): readonly Middleware[] => {
+    if (middleware) {
+      if (isMiddleware(middleware)) {
+        return Object.freeze(
+          middleware
+            .map(middleware => middleware(init) as ReturnType<Middleware>)
+            .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/decorator/types.ts

@@ -0,0 +1,15 @@
+import { type ActivityBorderDecoratorMiddleware } from './ActivityBorder/private/ActivityBorderDecoratorMiddleware';
+import { type activityBorderDecoratorTypeName } from './ActivityBorder/types';
+import { type ActivityGroupingDecoratorMiddleware } from './ActivityGrouping/private/ActivityGroupingDecoratorMiddleware';
+import { type activityGroupingDecoratorTypeName } from './ActivityGrouping/types';
+
+export type DecoratorMiddlewareTypes = {
+  [activityBorderDecoratorTypeName]: ReturnType<ActivityBorderDecoratorMiddleware>;
+  [activityGroupingDecoratorTypeName]: ReturnType<ActivityGroupingDecoratorMiddleware>;
+};
+
+export type DecoratorMiddlewareInit = keyof DecoratorMiddlewareTypes;
+
+export interface DecoratorMiddleware {
+  (init: keyof DecoratorMiddlewareTypes): DecoratorMiddlewareTypes[typeof init] | false;
+}

package/src/decorator.ts

@@ -0,0 +1,16 @@
+// Decorator general
+
+export { default as DecoratorComposer } from './decorator/DecoratorComposer';
+export {
+  type DecoratorMiddleware,
+  type DecoratorMiddlewareInit,
+  type DecoratorMiddlewareTypes
+} from './decorator/types';
+
+// ActivityBorderDecorator
+
+export { default as ActivityBorderDecorator } from './decorator/ActivityBorder/ActivityBorderDecorator';
+
+// ActivityGroupingDecorator
+
+export { default as ActivityGroupingDecorator } from './decorator/ActivityGrouping/ActivityGroupingDecorator';

package/src/defaultStyleOptions.ts

@@ -53,10 +53,16 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   bubbleFromUserNubOffset: 0,
   bubbleFromUserNubSize: undefined,
   bubbleFromUserTextColor: 'Black',
-  bubbleImageHeight: 240,
-  bubbleMaxWidth: 480, // Based off screen width = 600px
+  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,
   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',
@@ -238,7 +244,6 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   transcriptOverlayButtonColorOnHover: undefined,
 
   // Toast UI
-
   notificationDebounceTimeout: 400,
 
   hideToaster: false,
@@ -290,7 +295,23 @@ 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,
+
+  groupActivitiesBy: ['sender', 'status']
 };
 
 export default DEFAULT_OPTIONS;

package/{lib/external/PrecompiledGlobalize.cjs → src/external/PrecompiledGlobalize.js}

@@ -1,10 +1,11 @@
-const Globalize = require("globalize/dist/globalize-runtime");
+/* eslint-disable */
+import Globalize from "globalize/dist/globalize-runtime";
 
-require("globalize/dist/globalize-runtime/number");
-require("globalize/dist/globalize-runtime/plural");
-require("globalize/dist/globalize-runtime/date");
-require("globalize/dist/globalize-runtime/relative-time");
-require("globalize/dist/globalize-runtime/unit");
+import "globalize/dist/globalize-runtime/number";
+import "globalize/dist/globalize-runtime/plural";
+import "globalize/dist/globalize-runtime/date";
+import "globalize/dist/globalize-runtime/relative-time";
+import "globalize/dist/globalize-runtime/unit";
 
 var numberRound = Globalize._numberRound;
 var numberToPartsFormatterFn = Globalize._numberToPartsFormatterFn;
@@ -8852,4 +8853,4 @@ Globalize.b1707386695 = unitFormatterFn(
   },
 );
 
-module.exports = Globalize;
+export default Globalize;