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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "botframework-webchat-api",
-  "version": "4.18.1-main.20260416.88357ae",
+  "version": "4.18.1",
   "description": "React DOM component of botframework-webchat",
-  "main": "./dist/botframework-webchat-api.js",
-  "types": "./dist/botframework-webchat-api.d.ts",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -11,28 +11,8 @@
         "default": "./dist/botframework-webchat-api.mjs"
       },
       "require": {
-        "types": "./dist/botframework-webchat-api.d.ts",
-        "default": "./dist/botframework-webchat-api.js"
-      }
-    },
-    "./decorator": {
-      "import": {
-        "types": "./dist/botframework-webchat-api.decorator.d.mts",
-        "default": "./dist/botframework-webchat-api.decorator.mjs"
-      },
-      "require": {
-        "types": "./dist/botframework-webchat-api.decorator.d.ts",
-        "default": "./dist/botframework-webchat-api.decorator.js"
-      }
-    },
-    "./hook": {
-      "import": {
-        "types": "./dist/botframework-webchat-api.hook.d.mts",
-        "default": "./dist/botframework-webchat-api.hook.mjs"
-      },
-      "require": {
-        "types": "./dist/botframework-webchat-api.hook.d.ts",
-        "default": "./dist/botframework-webchat-api.hook.js"
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
       }
     },
     "./internal": {
@@ -41,18 +21,18 @@
         "default": "./dist/botframework-webchat-api.internal.mjs"
       },
       "require": {
-        "types": "./dist/botframework-webchat-api.internal.d.ts",
-        "default": "./dist/botframework-webchat-api.internal.js"
+        "types": "./lib/internal.d.ts",
+        "default": "./lib/internal.js"
       }
     },
-    "./middleware": {
+    "./decorator": {
       "import": {
-        "types": "./dist/botframework-webchat-api.middleware.d.mts",
-        "default": "./dist/botframework-webchat-api.middleware.mjs"
+        "types": "./dist/botframework-webchat-api.decorator.d.mts",
+        "default": "./dist/botframework-webchat-api.decorator.mjs"
       },
       "require": {
-        "types": "./dist/botframework-webchat-api.middleware.d.ts",
-        "default": "./dist/botframework-webchat-api.middleware.js"
+        "types": "./lib/decorator/index.d.ts",
+        "default": "./lib/decorator/index.js"
       }
     }
   },
@@ -69,97 +49,108 @@
     "url": "https://github.com/microsoft/BotFramework-WebChat/issues"
   },
   "files": [
-    "./*.js",
     "./dist/**/*",
+    "./*.js",
+    "./lib/**/*",
     "./src/**/*"
   ],
   "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/component#readme",
   "scripts": {
-    "build": "npm run --if-present build:pre && npm run build:run && npm run --if-present build:post",
-    "build:post": "npm run build:post:dtsroll && npm run build:post:validate:dts",
-    "build:post:dtsroll": "dtsroll ./dist/*.d.*",
-    "build:post:validate:dts": "vg ast-check dist-types ./dist/*.d.*",
-    "build:pre": "npm run build:pre:local-dependencies && npm run build:pre:watch && npm run build:pre:globalize",
-    "build:pre:globalize": "node scripts/createPrecompiledGlobalize.mjs",
-    "build:pre:local-dependencies": "../../scripts/npm/build-local-dependencies.sh",
-    "build:pre:watch": "../../scripts/npm/build-watch.sh",
-    "build:run": "tsup",
-    "bump": "vg bump prod && vg bump dev && (npm audit fix || exit 0)",
+    "auditfix": "npm audit fix --legacy-peer-deps || exit 0",
+    "build": "npm run build:globalize && npm run build:tsup && npm run build:typescript && npm run build:babel",
+    "build:babel": "cross-env build_tool=babel module_format=commonjs babel src --copy-files --extensions .js,.ts,.tsx --ignore **/*.spec.js,**/*.spec.ts,**/*.spec.tsx,**/*.test.js,**/*.test.ts,**/*.test.tsx,__tests__/**/*.js,__tests__/**/*.ts,__tests__/**/*.tsx --no-copy-ignored --out-dir lib --verbose",
+    "build:globalize": "node scripts/createPrecompiledGlobalize.mjs",
+    "build:tsup": "tsup --config ./tsup.config.ts",
+    "build:typescript": "tsc --project src/tsconfig.json",
+    "bump": "npm run bump:prod && npm run bump:dev && npm run bump:auditfix",
+    "bump:auditfix": "npm audit fix --legacy-peer-deps || exit 0",
+    "bump:dev": "if [ `cat package.json | jq -r '.devDependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.devDependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
+    "bump:prod": "if [ `cat package.json | jq -r '.dependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps --save-exact $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.dependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
     "eslint": "npm run precommit",
-    "postversion": "../../scripts/npm/postversion.sh",
+    "postauditfix": "npm run postbump",
+    "postbump": "cat package.json | jq '. + (.dependencies = ((.dependencies + (.localPeerDependencies // {})) | to_entries | sort_by(.key) | from_entries)) | (.devDependencies = ((.devDependencies + (.localPeerDevDependencies // {})) | to_entries | sort_by(.key) | from_entries))' > package-temp.json && mv package-temp.json package.json",
+    "preauditfix": "npm run prebump",
+    "prebump": "cat package.json | jq '(((.localPeerDependencies // {}) | keys | map([\"dependencies\", .])) + ((.localPeerDevDependencies // {}) | keys | map([\"devDependencies\", .]))) as $localPeerPaths | delpaths($localPeerPaths)' > package-temp.json && mv package-temp.json package.json",
     "precommit": "npm run precommit:eslint -- src && npm run precommit:typecheck",
     "precommit:eslint": "../../node_modules/.bin/eslint --report-unused-disable-directives --max-warnings 0",
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
-    "preversion": "../../scripts/npm/preversion.sh",
-    "start": "../../scripts/npm/notify-build.sh \"src\" \"../api-graph/package.json\" \"../api-middleware/package.json\" \"../support/cldr-data/package.json\" \"../redux-store/package.json\""
-  },
-  "pinDependencies": {
-    "@types/jest": [
-      "29",
-      "pinned jest@29"
-    ],
-    "@types/react": [
-      "16",
-      "react@16.8.6 is our baseline"
-    ],
-    "react-redux": [
-      "7",
-      "react-redux@>7 requires newer version of React"
-    ]
-  },
-  "localDependencies": {
-    "@msinternal/botframework-webchat-api-graph": "development",
-    "@msinternal/botframework-webchat-api-middleware": "development",
-    "@msinternal/botframework-webchat-base": "development",
-    "@msinternal/botframework-webchat-cldr-data": "development",
-    "@msinternal/botframework-webchat-react-hooks": "development",
-    "@msinternal/botframework-webchat-react-valibot": "development",
-    "@msinternal/botframework-webchat-redux-store": "development",
-    "@msinternal/botframework-webchat-tsconfig": "development"
+    "prestart": "npm run build:babel",
+    "start": "concurrently --kill-others --names \"babel,globalize,tsc\" \"npm run start:babel\" \"npm run start:globalize\" \"npm run start:typescript\" \"npm run start:tsup\"",
+    "start:babel": "npm run build:babel -- --skip-initial-build --watch",
+    "start:globalize": "node-dev --respawn scripts/createPrecompiledGlobalize.mjs",
+    "start:tsup": "npm run build:tsup -- --watch",
+    "start:typescript": "npm run build:typescript -- --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
-    "@msinternal/botframework-webchat-api-graph": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-api-middleware": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-base": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-cldr-data": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-react-hooks": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-react-valibot": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-redux-store": "4.18.1-main.20260416.88357ae",
-    "@msinternal/botframework-webchat-tsconfig": "4.18.1-main.20260416.88357ae",
-    "@types/dom-speech-recognition": "^0.0.7",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^25.3.3",
-    "@types/react": "^16.14.69",
-    "babel-plugin-istanbul": "^7.0.1",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/dom-speech-recognition": "^0.0.4",
+    "@types/node": "^20.12.11",
+    "@types/react": "^16.14.60",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "core-js": "^3.48.0",
-    "cross-env": "^10.1.0",
+    "cldr-data": "4.18.1",
+    "concurrently": "^8.2.2",
+    "core-js": "^3.37.0",
+    "cross-env": "^7.0.3",
     "globalize-compiler": "^1.1.1",
     "iana-tz-data": "^2019.1.0",
-    "nodemon": "^3.1.14",
-    "type-fest": "^5.4.4",
-    "typescript": "^5.9.3"
+    "node-dev": "^8.0.0",
+    "type-fest": "^4.18.2",
+    "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-core": "4.18.1-main.20260416.88357ae",
-    "globalize": "1.7.1",
-    "iter-fest": "0.3.1",
+    "botframework-webchat-core": "4.18.1",
+    "globalize": "1.7.0",
     "math-random": "2.0.1",
     "prop-types": "15.8.1",
-    "react-chain-of-responsibility": "0.4.2",
+    "react-chain-of-responsibility": "0.2.0-main.3cb47ab",
     "react-redux": "7.2.9",
     "redux": "5.0.1",
     "simple-update-in": "2.2.0",
-    "use-reduce-memo": "0.1.0",
-    "use-ref-from": "0.2.1",
-    "valibot": "1.2.0"
+    "use-ref-from": "0.1.0",
+    "valibot": "0.30.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6",
     "react-dom": ">= 16.8.6"
+  },
+  "localPeerDependencies": {
+    "botframework-webchat-core": "0.0.0-0"
+  },
+  "localPeerDevDependencies": {
+    "cldr-data": "36.0.0-0"
+  },
+  "pinDependencies": {
+    "@babel/cli": [
+      "7.18.10",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/core": [
+      "7.19.1",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/preset-env": [
+      "7.19.1",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/preset-react": [
+      "7.18.6",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/preset-typescript": [
+      "7.18.6",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@types/react": [
+      "16",
+      "react@16.8.6 is our baseline"
+    ],
+    "react-redux": [
+      "7"
+    ]
   }
 }

package/src/StyleOptions.ts

@@ -29,15 +29,10 @@ type StyleOptions = {
   paddingWide?: number;
 
   /**
-   * The duration to be used for transitions
+  Transition for Bubble, Carousel, and StackedLayout
    */
   transitionDuration?: string;
 
-  /**
-   * The easing function to be used for transitions
-   */
-  transitionEasing?: string;
-
   /**
    * Fonts
    * Default font size will be inherited from the host app
@@ -155,43 +150,10 @@ type StyleOptions = {
   bubbleFromUserNubSize?: number;
 
   bubbleFromUserTextColor?: string;
-
-  /**
-   * Specifies the fixed height of the bubble for image, default to unset.
-   *
-   * @deprecated Use `bubbleImageMaxHeight` and `bubbleImageMinHeight` instead. To mimick behavior before deprecation, set both options to 240px.
-   */
-  bubbleImageHeight?: number | undefined;
-
-  /**
-   * Specifies the maximum height of the bubble for image, default to 240px.
-   *
-   * CSS variable: `--webchat__max-height--image-bubble`.
-   *
-   * New in 4.18.0.
-   */
-  bubbleImageMaxHeight?: number | undefined;
-
-  /**
-   * Specifies the minimum height of the bubble for image, default to 240px.
-   *
-   * CSS variable: `--webchat__min-height--image-bubble`.
-   *
-   * New in 4.18.0.
-   */
-  bubbleImageMinHeight?: number | undefined;
-
-  /* @deprecated Please use `bubbleAttachmentMaxWidth` and `bubbleMessageMaxWidth` instead. */
-  bubbleMaxWidth?: number | undefined;
-  /* @deprecated Please use `bubbleAttachmentMaxWidth` and `bubbleMessageMaxWidth` instead. */
-  bubbleMinWidth?: number | undefined;
-
-  bubbleAttachmentMaxWidth?: number | undefined;
-  bubbleAttachmentMinWidth?: number | undefined;
-  bubbleMessageMaxWidth?: number | undefined;
-  bubbleMessageMinWidth?: number | undefined;
-
+  bubbleImageHeight?: number;
+  bubbleMaxWidth?: number;
   bubbleMinHeight?: number;
+  bubbleMinWidth?: number;
 
   /**
    * Nub offset ''bottom' will render nub at the bottom
@@ -302,14 +264,6 @@ type StyleOptions = {
    */
 
   hideSendBox?: boolean;
-
-  /**
-   * Indicates if the upload file button should be hidden.
-   *
-   * @default false
-   *
-   * @deprecated deprecated since 4.18.0: obsolated by {@linkcode disableFileUpload}. This option will be removed on or after 2027-07-14.
-   */
   hideUploadButton?: boolean;
 
   /**
@@ -893,151 +847,13 @@ type StyleOptions = {
    * @default 2000
    */
   maxMessageLength?: number;
-
-  /**
-   * The node to place Web Chat styles into. Needed when using as a Web Component.
-   *
-   * @default document.head
-   */
-  stylesRoot?: Node;
-
-  /**
-   * Border animation
-   */
-
-  /**
-   * Border animation 1st color
-   *
-   * CSS variable: `--webchat__animation--border-color-1` CSS variable to adjust the color
-   *
-   * New in 4.19.0.
-   */
-  borderAnimationColor1?: string;
-  /**
-   * Border animation 2nd color
-   *
-   * CSS variable: `--webchat__animation--border-color-2` CSS variable to adjust the color
-   *
-   * New in 4.19.0.
-   */
-  borderAnimationColor2?: string;
-  /**
-   * Border animation 3rd color
-   *
-   * CSS variable: `--webchat__animation--border-color-3` CSS variable to adjust the color
-   *
-   * New in 4.19.0.
-   */
-  borderAnimationColor3?: string;
-
-  /**
-   * Code block theme
-   *
-   * - `'github-light-default'` - use light theme for code blocks
-   * - `'github-dark-default'` - use dark theme for code blocks
-   *
-   * @default 'github-light-default'
-   *
-   * New in 4.19.0.
-   */
-  codeBlockTheme?: 'github-light-default' | 'github-dark-default';
-
-  /**
-   * (EXPERIMENTAL) Feedback buttons placement
-   *
-   * - `'activity-actions'` - place feedback buttons inside activity actions - will show feedback form
-   * - `'activity-status'` - place feedback buttons inside activity status
-   *
-   * @default 'activity-status'
-   *
-   * @deprecated This is an experimental style options and should not be used without understanding its risk.
-   *
-   * New in 4.19.0.
-   */
-  feedbackActionsPlacement?: 'activity-actions' | 'activity-status';
-
-  /**
-   * Use continuous mode for speech recognition. Default to `false`.
-   *
-   * - `true` to use continuous mode which focuses on a hands-off experience, keeping speech recognition active for extended periods, supporting barge-in, non-speech interactions will not stop speech recognition
-   * - `false` to use interactive mode which focuses on privacy, keeping speech recognition active only for the minimal time required, no barge-in, non-speech interactions will stop speech recognition
-   *
-   * @see https://github.com/microsoft/BotFramework-WebChat/pull/5426
-   */
-  speechRecognitionContinuous?: boolean | undefined;
-
-  /**
-   * Whether part groups are open by default.
-   *
-   * @default true
-   */
-  partGroupDefaultOpen?: boolean | undefined;
-
-  /**
-   * Whether references (citation link definitions) are open by default.
-   *
-   * @default true
-   */
-  referenceListDefaultOpen?: boolean | undefined;
-
-  /**
-   * Defines how activities are being grouped by (in the order of appearance in the array). Default to `['sender', 'status', 'part']` or `sender,status` in CSS.
-   *
-   * Values are key of result of `groupActivitiesMiddleware`. The default implementation of `groupActivitiesMiddleware` has `sender`, `status`, and `part`.
-   *
-   * To add new groupings, configure `groupActivitiesMiddleware` to output extra groups. Then, add the group names to `styleOptions.groupActivitiesBy`.
-   */
-  groupActivitiesBy?: readonly string[] | undefined;
-
-  /**
-   * Send box: maximum number of attachment item to preview as thumbnail before showing as text-only.
-   * Send box: maximum height of the attachment bar.
-   *
-   * @default 114
-   */
-  sendBoxAttachmentBarMaxHeight?: number;
-
-  /**
-   * Send box: maximum number of attachment item to preview as thumbnail before showing as list item.
-   *
-   * @default 3
-   */
-  sendBoxAttachmentBarMaxThumbnail?: number;
-
-  /**
-   * Indicates if file upload should be disabled.
-   *
-   * @default false
-   *
-   * New in 4.19.0.
-   */
-  disableFileUpload?: boolean;
-  /**
-   * Controls microphone button visibility in Fluent theme send box.
-   *
-   * - `'auto'` - Show microphone button if the chat adapter supports voice (has voiceConfiguration capability)
-   * - `'hide'` - Do not show microphone button regardless of adapter capabilities
-   *
-   * @default 'auto'
-   */
-  showMicrophoneButton?: 'auto' | 'hide';
 };
 
 // StrictStyleOptions is only used internally in Web Chat and for simplifying our code:
 // 1. Allow developers to set the "bubbleNubOffset" option as "top" (string), but when we normalize them, we will convert it to 0 (number);
 // 2. Renamed/deprecated options, only the newer option will be kept, the older option will be dropped.
 //    Internally, no code should use the deprecated value except the migration code.
-type StrictStyleOptions = Required<
-  Omit<
-    StyleOptions,
-    | 'bubbleImageHeight'
-    | 'bubbleMaxWidth'
-    | 'bubbleMinWidth'
-    | 'hideScrollToEndButton'
-    | 'hideUploadButton'
-    | 'newMessagesButtonFontSize'
-  >
-> & {
+type StrictStyleOptions = Required<Omit<StyleOptions, 'hideScrollToEndButton' | 'newMessagesButtonFontSize'>> & {
   bubbleFromUserNubOffset: number;
   bubbleNubOffset: number;
   emojiSet: false | Record<string, string>;

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>
+    );
+  };