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

package/dist/types-BXPldIKA.d.mts

@@ -0,0 +1,86 @@
+import * as react_chain_of_responsibility from 'react-chain-of-responsibility';
+import { EmptyObject } from 'type-fest';
+import { WebChatActivity } from 'botframework-webchat-core';
+
+declare const types$1: {
+    init: "activity border";
+    middleware: react_chain_of_responsibility.ComponentMiddleware<Readonly<{
+        /**
+         * Decorate the activity as it participate in a livestreaming session.
+         *
+         * - `"completing"` - decorate as the livestreaming is completing
+         * - `"ongoing"` - decorate as the livestreaming is ongoing
+         * - `"preparing"` - decorate as the livestreaming is being prepared
+         * - `undefined` - not participated in a livestreaming session
+         */
+        livestreamingState: "completing" | "ongoing" | "preparing" | undefined;
+        /**
+         * Gets the role of the sender for the activity.
+         *
+         * - `"bot"` - the sender is a bot or other users
+         * - `"channel"` - the sender is the channel service
+         * - `"user"` - the sender is the current user
+         * - `undefined` - the sender is unknown
+         */
+        from: "bot" | "channel" | `user` | undefined;
+    }>, EmptyObject>;
+    props: EmptyObject;
+    request: Readonly<{
+        /**
+         * Decorate the activity as it participate in a livestreaming session.
+         *
+         * - `"completing"` - decorate as the livestreaming is completing
+         * - `"ongoing"` - decorate as the livestreaming is ongoing
+         * - `"preparing"` - decorate as the livestreaming is being prepared
+         * - `undefined` - not participated in a livestreaming session
+         */
+        livestreamingState: "completing" | "ongoing" | "preparing" | undefined;
+        /**
+         * Gets the role of the sender for the activity.
+         *
+         * - `"bot"` - the sender is a bot or other users
+         * - `"channel"` - the sender is the channel service
+         * - `"user"` - the sender is the current user
+         * - `undefined` - the sender is unknown
+         */
+        from: "bot" | "channel" | `user` | undefined;
+    }>;
+};
+type ActivityBorderDecoratorMiddleware = typeof types$1.middleware;
+
+declare const activityBorderDecoratorTypeName: "activity border";
+
+declare const types: {
+    init: "activity grouping";
+    middleware: react_chain_of_responsibility.ComponentMiddleware<Readonly<{
+        /**
+         * Name of the grouping from the result of `groupActivitesMiddleware()`.
+         */
+        groupingName: string;
+    }>, Readonly<{
+        activities: readonly WebChatActivity[];
+    }>>;
+    props: Readonly<{
+        activities: readonly WebChatActivity[];
+    }>;
+    request: Readonly<{
+        /**
+         * Name of the grouping from the result of `groupActivitesMiddleware()`.
+         */
+        groupingName: string;
+    }>;
+};
+type ActivityGroupingDecoratorMiddleware = typeof types.middleware;
+
+declare const activityGroupingDecoratorTypeName: "activity grouping";
+
+type DecoratorMiddlewareTypes = {
+    [activityBorderDecoratorTypeName]: ReturnType<ActivityBorderDecoratorMiddleware>;
+    [activityGroupingDecoratorTypeName]: ReturnType<ActivityGroupingDecoratorMiddleware>;
+};
+type DecoratorMiddlewareInit = keyof DecoratorMiddlewareTypes;
+interface DecoratorMiddleware {
+    (init: keyof DecoratorMiddlewareTypes): DecoratorMiddlewareTypes[typeof init] | false;
+}
+
+export type { DecoratorMiddleware as D, DecoratorMiddlewareInit as a, DecoratorMiddlewareTypes as b };

package/dist/types-BXPldIKA.d.ts

@@ -0,0 +1,86 @@
+import * as react_chain_of_responsibility from 'react-chain-of-responsibility';
+import { EmptyObject } from 'type-fest';
+import { WebChatActivity } from 'botframework-webchat-core';
+
+declare const types$1: {
+    init: "activity border";
+    middleware: react_chain_of_responsibility.ComponentMiddleware<Readonly<{
+        /**
+         * Decorate the activity as it participate in a livestreaming session.
+         *
+         * - `"completing"` - decorate as the livestreaming is completing
+         * - `"ongoing"` - decorate as the livestreaming is ongoing
+         * - `"preparing"` - decorate as the livestreaming is being prepared
+         * - `undefined` - not participated in a livestreaming session
+         */
+        livestreamingState: "completing" | "ongoing" | "preparing" | undefined;
+        /**
+         * Gets the role of the sender for the activity.
+         *
+         * - `"bot"` - the sender is a bot or other users
+         * - `"channel"` - the sender is the channel service
+         * - `"user"` - the sender is the current user
+         * - `undefined` - the sender is unknown
+         */
+        from: "bot" | "channel" | `user` | undefined;
+    }>, EmptyObject>;
+    props: EmptyObject;
+    request: Readonly<{
+        /**
+         * Decorate the activity as it participate in a livestreaming session.
+         *
+         * - `"completing"` - decorate as the livestreaming is completing
+         * - `"ongoing"` - decorate as the livestreaming is ongoing
+         * - `"preparing"` - decorate as the livestreaming is being prepared
+         * - `undefined` - not participated in a livestreaming session
+         */
+        livestreamingState: "completing" | "ongoing" | "preparing" | undefined;
+        /**
+         * Gets the role of the sender for the activity.
+         *
+         * - `"bot"` - the sender is a bot or other users
+         * - `"channel"` - the sender is the channel service
+         * - `"user"` - the sender is the current user
+         * - `undefined` - the sender is unknown
+         */
+        from: "bot" | "channel" | `user` | undefined;
+    }>;
+};
+type ActivityBorderDecoratorMiddleware = typeof types$1.middleware;
+
+declare const activityBorderDecoratorTypeName: "activity border";
+
+declare const types: {
+    init: "activity grouping";
+    middleware: react_chain_of_responsibility.ComponentMiddleware<Readonly<{
+        /**
+         * Name of the grouping from the result of `groupActivitesMiddleware()`.
+         */
+        groupingName: string;
+    }>, Readonly<{
+        activities: readonly WebChatActivity[];
+    }>>;
+    props: Readonly<{
+        activities: readonly WebChatActivity[];
+    }>;
+    request: Readonly<{
+        /**
+         * Name of the grouping from the result of `groupActivitesMiddleware()`.
+         */
+        groupingName: string;
+    }>;
+};
+type ActivityGroupingDecoratorMiddleware = typeof types.middleware;
+
+declare const activityGroupingDecoratorTypeName: "activity grouping";
+
+type DecoratorMiddlewareTypes = {
+    [activityBorderDecoratorTypeName]: ReturnType<ActivityBorderDecoratorMiddleware>;
+    [activityGroupingDecoratorTypeName]: ReturnType<ActivityGroupingDecoratorMiddleware>;
+};
+type DecoratorMiddlewareInit = keyof DecoratorMiddlewareTypes;
+interface DecoratorMiddleware {
+    (init: keyof DecoratorMiddlewareTypes): DecoratorMiddlewareTypes[typeof init] | false;
+}
+
+export type { DecoratorMiddleware as D, DecoratorMiddlewareInit as a, DecoratorMiddlewareTypes as b };

package/internal.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./lib/internal');
+module.exports = require('./dist/botframework-webchat-api.internal.js');

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "botframework-webchat-api",
-  "version": "4.18.0",
+  "version": "4.18.1-hotfix.20260127.b53acdf",
   "description": "React DOM component of botframework-webchat",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/botframework-webchat-api.js",
+  "types": "./dist/botframework-webchat-api.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -11,8 +11,8 @@
         "default": "./dist/botframework-webchat-api.mjs"
       },
       "require": {
-        "types": "./lib/index.d.ts",
-        "default": "./lib/index.js"
+        "types": "./dist/botframework-webchat-api.d.ts",
+        "default": "./dist/botframework-webchat-api.js"
       }
     },
     "./internal": {
@@ -21,8 +21,8 @@
         "default": "./dist/botframework-webchat-api.internal.mjs"
       },
       "require": {
-        "types": "./lib/internal.d.ts",
-        "default": "./lib/internal.js"
+        "types": "./dist/botframework-webchat-api.internal.d.ts",
+        "default": "./dist/botframework-webchat-api.internal.js"
       }
     },
     "./decorator": {
@@ -31,8 +31,8 @@
         "default": "./dist/botframework-webchat-api.decorator.mjs"
       },
       "require": {
-        "types": "./lib/decorator/index.d.ts",
-        "default": "./lib/decorator/index.js"
+        "types": "./dist/botframework-webchat-api.decorator.d.ts",
+        "default": "./dist/botframework-webchat-api.decorator.js"
       }
     }
   },
@@ -51,78 +51,27 @@
   "files": [
     "./dist/**/*",
     "./*.js",
-    "./lib/**/*",
     "./src/**/*"
   ],
   "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/component#readme",
   "scripts": {
-    "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": "npm run build:globalize && npm run build:tsup",
     "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",
+    "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
+    "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
+    "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
     "eslint": "npm run precommit",
-    "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",
+    "postversion": "cat package.json | jq '.version as $V | (.localDependencies // {} | with_entries(select(.value == \"production\") | { key: .key, value: $V })) as $L1 | (.localDependencies // {} | with_entries(select(.value == \"development\") | { key: .key, value: $V })) as $L2 | ((.dependencies // {}) + $L1 | to_entries | sort_by(.key) | from_entries) as $D1 | ((.devDependencies // {}) + $L2 | to_entries | sort_by(.key) | from_entries) as $D2 | . + { dependencies: $D1, devDependencies: $D2 }' > 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",
-    "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"
+    "preversion": "cat package.json | jq '(.localDependencies // {} | to_entries | map([if .value == \"production\" then \"dependencies\" else \"devDependencies\" end, .key])) as $P | delpaths($P)' > package-temp.json && mv package-temp.json package.json",
+    "start": "npm run build:tsup -- --onSuccess=\"touch ../component/src/index.ts\" --watch"
   },
-  "devDependencies": {
-    "@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",
-    "cldr-data": "4.18.0",
-    "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",
-    "node-dev": "^8.0.0",
-    "type-fest": "^4.18.2",
-    "typescript": "^5.4.5"
-  },
-  "dependencies": {
-    "botframework-webchat-core": "4.18.0",
-    "globalize": "1.7.0",
-    "math-random": "2.0.1",
-    "prop-types": "15.8.1",
-    "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-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"
+  "localDependencies": {
+    "botframework-webchat-cldr-data": "development",
+    "botframework-webchat-core": "production"
   },
   "pinDependencies": {
     "@babel/cli": [
@@ -150,7 +99,46 @@
       "react@16.8.6 is our baseline"
     ],
     "react-redux": [
-      "7"
+      "7",
+      "react-redux@>7 requires newer version of React"
     ]
+  },
+  "devDependencies": {
+    "@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": "^22.13.4",
+    "@types/react": "^16.14.62",
+    "babel-plugin-istanbul": "^7.0.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "botframework-webchat-cldr-data": "4.18.1-hotfix.20260127.b53acdf",
+    "concurrently": "^9.1.2",
+    "core-js": "^3.40.0",
+    "cross-env": "^7.0.3",
+    "globalize-compiler": "^1.1.1",
+    "iana-tz-data": "^2019.1.0",
+    "nodemon": "^3.1.9",
+    "type-fest": "^4.34.1",
+    "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "botframework-webchat-core": "4.18.1-hotfix.20260127.b53acdf",
+    "globalize": "1.7.0",
+    "iter-fest": "^0.2.1",
+    "math-random": "2.0.1",
+    "prop-types": "15.8.1",
+    "react-chain-of-responsibility": "0.2.0",
+    "react-redux": "7.2.9",
+    "redux": "5.0.1",
+    "simple-update-in": "2.2.0",
+    "use-ref-from": "0.1.0",
+    "valibot": "1.1.0"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.6",
+    "react-dom": ">= 16.8.6"
   }
 }

package/src/StyleOptions.ts

@@ -150,10 +150,43 @@ type StyleOptions = {
   bubbleFromUserNubSize?: number;
 
   bubbleFromUserTextColor?: string;
-  bubbleImageHeight?: number;
-  bubbleMaxWidth?: number;
+
+  /**
+   * 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;
+
   bubbleMinHeight?: number;
-  bubbleMinWidth?: number;
 
   /**
    * Nub offset ''bottom' will render nub at the bottom
@@ -847,13 +880,99 @@ 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;
+
+  /**
+   * Defines how activities are being grouped by (in the order of appearance in the array). Default to `['sender', 'status']` or `sender,status` in CSS.
+   *
+   * Values are key of result of `groupActivitiesMiddleware`. The default implementation of `groupActivitiesMiddleware` has `sender` and `status`.
+   *
+   * To add new groupings, configure `groupActivitiesMiddleware` to output extra groups. Then, add the group names to `styleOptions.groupActivitiesBy`.
+   */
+  groupActivitiesBy?: readonly string[] | undefined;
 };
 
 // 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, 'hideScrollToEndButton' | 'newMessagesButtonFontSize'>> & {
+type StrictStyleOptions = Required<
+  Omit<
+    StyleOptions,
+    'bubbleImageHeight' | 'bubbleMaxWidth' | 'bubbleMinWidth' | 'hideScrollToEndButton' | 'newMessagesButtonFontSize'
+  >
+> & {
   bubbleFromUserNubOffset: number;
   bubbleNubOffset: number;
   emojiSet: false | Record<string, string>;

package/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx

@@ -0,0 +1,48 @@
+import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo, type ReactNode } from 'react';
+import PassthroughFallback from '../private/PassthroughFallback';
+import {
+  ActivityBorderDecoratorMiddlewareProxy,
+  type ActivityBorderDecoratorMiddlewareRequest
+} from './private/ActivityBorderDecoratorMiddleware';
+
+const supportedActivityRoles: ActivityBorderDecoratorMiddlewareRequest['from'][] = [
+  'bot',
+  'channel',
+  'user',
+  undefined
+];
+
+type ActivityBorderDecoratorProps = Readonly<{
+  activity?: WebChatActivity | undefined;
+  children?: ReactNode | undefined;
+}>;
+
+function ActivityBorderDecorator({ activity, children }: ActivityBorderDecoratorProps) {
+  const request = useMemo<ActivityBorderDecoratorMiddlewareRequest>(() => {
+    const { type } = getActivityLivestreamingMetadata(activity) || {};
+
+    return {
+      livestreamingState:
+        type === 'final activity'
+          ? 'completing'
+          : type === 'informative message'
+            ? 'preparing'
+            : type === 'interim activity'
+              ? 'ongoing'
+              : type === 'contentless'
+                ? undefined // No bubble is shown for "contentless" livestream, should not decorate.
+                : undefined,
+      from: supportedActivityRoles.includes(activity?.from?.role) ? activity?.from?.role : undefined
+    };
+  }, [activity]);
+
+  return (
+    <ActivityBorderDecoratorMiddlewareProxy fallbackComponent={PassthroughFallback} request={request}>
+      {children}
+    </ActivityBorderDecoratorMiddlewareProxy>
+  );
+}
+
+export default memo(ActivityBorderDecorator);
+export { type ActivityBorderDecoratorProps };

package/src/decorator/ActivityBorder/private/ActivityBorderDecoratorMiddleware.ts

@@ -0,0 +1,51 @@
+import type { EmptyObject } from 'type-fest';
+import templateMiddleware from '../../private/templateMiddleware';
+import { type activityBorderDecoratorTypeName } from '../types';
+
+type Request = Readonly<{
+  /**
+   * Decorate the activity as it participate in a livestreaming session.
+   *
+   * - `"completing"` - decorate as the livestreaming is completing
+   * - `"ongoing"` - decorate as the livestreaming is ongoing
+   * - `"preparing"` - decorate as the livestreaming is being prepared
+   * - `undefined` - not participated in a livestreaming session
+   */
+  livestreamingState: 'completing' | 'ongoing' | 'preparing' | undefined;
+
+  /**
+   * Gets the role of the sender for the activity.
+   *
+   * - `"bot"` - the sender is a bot or other users
+   * - `"channel"` - the sender is the channel service
+   * - `"user"` - the sender is the current user
+   * - `undefined` - the sender is unknown
+   */
+  from: 'bot' | 'channel' | `user` | undefined;
+}>;
+
+type Props = EmptyObject;
+
+const {
+  initMiddleware: initActivityBorderDecoratorMiddleware,
+  Provider: ActivityBorderDecoratorMiddlewareProvider,
+  Proxy: ActivityBorderDecoratorMiddlewareProxy,
+  // False positive, `types` is used for its typing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  types
+} = templateMiddleware<typeof activityBorderDecoratorTypeName, Request, Props>('ActivityBorderDecoratorMiddleware');
+
+type ActivityBorderDecoratorMiddleware = typeof types.middleware;
+type ActivityBorderDecoratorMiddlewareInit = typeof types.init;
+type ActivityBorderDecoratorMiddlewareProps = typeof types.props;
+type ActivityBorderDecoratorMiddlewareRequest = typeof types.request;
+
+export {
+  ActivityBorderDecoratorMiddlewareProvider,
+  ActivityBorderDecoratorMiddlewareProxy,
+  initActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddlewareInit,
+  type ActivityBorderDecoratorMiddlewareProps,
+  type ActivityBorderDecoratorMiddlewareRequest
+};

package/src/decorator/ActivityBorder/types.ts

@@ -0,0 +1 @@
+export const activityBorderDecoratorTypeName = 'activity border' as const;

package/src/decorator/ActivityGrouping/ActivityGroupingDecorator.tsx

@@ -0,0 +1,31 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo, type ReactNode } from 'react';
+
+import PassthroughFallback from '../private/PassthroughFallback';
+import {
+  ActivityGroupingDecoratorMiddlewareProxy,
+  type ActivityGroupingDecoratorMiddlewareRequest
+} from './private/ActivityGroupingDecoratorMiddleware';
+
+type ActivityGroupingDecoratorProps = Readonly<{
+  activities: readonly WebChatActivity[];
+  children?: ReactNode | undefined;
+  groupingName: string;
+}>;
+
+function ActivityGroupingDecorator({ activities, children, groupingName }: ActivityGroupingDecoratorProps) {
+  const request = useMemo<ActivityGroupingDecoratorMiddlewareRequest>(() => ({ groupingName }), [groupingName]);
+
+  return (
+    <ActivityGroupingDecoratorMiddlewareProxy
+      activities={activities}
+      fallbackComponent={PassthroughFallback}
+      request={request}
+    >
+      {children}
+    </ActivityGroupingDecoratorMiddlewareProxy>
+  );
+}
+
+export default memo(ActivityGroupingDecorator);
+export { type ActivityGroupingDecoratorProps };