Introduction of polymiddleware

.dockerignore

@@ -2,6 +2,7 @@
 !/__tests__
 /__tests__/__image_snapshots__
 !/packages/bundle/dist
+!/packages/debug-theme/dist
 !/packages/fluent-theme/dist
 !/packages/playground/build
 !/packages/test/fluent-bundle/dist

.github/workflows/pull-request-validation.yml

@@ -57,6 +57,7 @@ jobs:
           ./package.json
           ./__tests__/
           ./packages/bundle/dist/
+          ./packages/debug-theme/dist/
           ./packages/fluent-theme/dist/
           ./packages/test/harness/
           ./packages/test/page-object/dist/

CHANGELOG.md

@@ -41,6 +41,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - `sendBoxToolbarMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
 - `styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14
 - `botframework-directlinespeech-sdk` no longer ponyfill `AbortController`, it is supported by modern browsers, in PR [#5530](https://github.com/microsoft/BotFramework-WebChat/pull/5530)
+- `activityMiddleware` is being deprecated in favor of [`polymiddleware`](./docs/MIDDLEWARE.md). It will be removed on or after 2027-08-16, related to PR [#5515](https://github.com/microsoft/BotFramework-WebChat/pull/5515)
 
 ### Added
 
@@ -108,6 +109,13 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Deprecated `hideUploadButton` in favor of `disableFileUpload`.
    - Updated `BasicSendBoxToolbar` to rely solely on `disableFileUpload`.
 - Added support for livestreaming via `entities[type="streaminfo"]` in PR [#5517](https://github.com/microsoft/BotFramework-WebChat/pull/5517) by [@kylerohn](https://github.com/kylerohn) and [@compulim](https://github.com/compulim)
+- Added `polymiddleware`, a new [universal middleware for every UIs](./docs/MIDDLEWARE.md), by [@compulim](https://github.com/compulim) in PR [#5515](https://github.com/microsoft/BotFramework-WebChat/pull/5515)
+   - Added `polymiddleware` to `<ThemeProvider>`
+   - Currently supports activity middleware and the new error box middleware
+- New internal packages, by [@compulim](https://github.com/compulim) in PR [#5515](https://github.com/microsoft/BotFramework-WebChat/pull/5515)
+   - `@msinternal/botframework-webchat-api-middleware` for middleware branch of API package
+   - `@msinternal/botframework-webchat-debug-theme` package for enabling debugging scenarios
+   - `@msinternal/botframework-webchat-react-hooks` for helpers for React hooks
 
 ### Changed
 
@@ -151,7 +159,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - [`[email protected]`](https://npmjs.com/package/micromark/v/4.0.2)
       - [`[email protected]`](https://npmjs.com/package/microsoft-cognitiveservices-speech-sdk/v/1.45.0)
       - [`[email protected]`](https://npmjs.com/package/mime/v/4.0.7)
-      - [`react-chain-of-responsibility@0.3.0`](https://npmjs.com/package/react-chain-of-responsibility/v/0.3.0)
+      - [`react-chain-of-responsibility@0.4.0-main.2a72139`](https://npmjs.com/package/react-chain-of-responsibility/v/0.4.0-main.2a72139)
       - [`[email protected]`](https://npmjs.com/package/react-film/v/4.0.0)
       - [`[email protected]`](https://npmjs.com/package/react-say/v/2.2.0)
       - [`[email protected]`](https://npmjs.com/package/react-scroll-to-bottom/v/4.2.0)
@@ -277,11 +285,12 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed [#5518](https://github.com/microsoft/BotFramework-WebChat/issues/5518). Minimal bundled build should work properly, in PR [#5507](https://github.com/microsoft/BotFramework-WebChat/pull/5507), by [@compulim](https://github.com/compulim)
 - Fixed [#5520](https://github.com/microsoft/BotFramework-WebChat/issues/5520). Version information should be injected when installed via npm, in PR [#5521](https://github.com/microsoft/BotFramework-WebChat/pull/5521), by [@compulim](https://github.com/compulim)
 
-# Removed
+### Removed
 
 - Deprecating `disabled` props and `useDisabled` hook in favor of new `uiState` props and `useUIState` hook, in PR [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276), by [@compulim](https://github.com/compulim)
 - `useSuggestedActions()` hook is being deprecated in favor of the `useSuggestedActionsHooks().useSuggestedActions()` hook, in PR [#5489](https://github.com/microsoft/BotFramework-WebChat/pull/5489), by [@compulim](https://github.com/compulim)
 - Fixed core internal import in legacy CommonJS environments, in [5509](https://github.com/microsoft/BotFramework-WebChat/pull/5509), by [@OEvgeny](https://github.com/OEvgeny)
+- `activityMiddleware` is being deprecated in favor of [`polymiddleware`](./docs/MIDDLEWARE.md). It will be removed on or after 2027-08-16, related to PR [#5515](https://github.com/microsoft/BotFramework-WebChat/pull/5515)
 
 ### Samples
 

__tests__/html/focusManagement.disableHeroCard.obsolete.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
@@ -15,14 +15,29 @@
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         WebChat: {
-          Components: { HeroCardContent }
+          Components: { HeroCardContent },
+          hooks: { useActivities }
         }
       } = window;
 
       run(async function () {
         const store = testHelpers.createStore();
         const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
 
+        const AutoDisableHeroCardContent = ({ activity, attachment }) => {
+          const [activities] = useActivities();
+          const messageActivities = activities.filter(activity => activity.type === 'message');
+          const isMostRecentMessageActivity = messageActivities.pop() === activity;
+
+          return (
+            <HeroCardContent
+              actionPerformedClassName="card__action--performed"
+              content={attachment.content}
+              disabled={!isMostRecentMessageActivity}
+            />
+          );
+        };
+
         WebChat.renderWebChat(
           {
             attachmentMiddleware:
@@ -35,13 +50,7 @@
                 const mostRecent = messageActivities.pop() === activity;
 
                 if (attachment.contentType === 'application/vnd.microsoft.card.hero') {
-                  return (
-                    <HeroCardContent
-                      actionPerformedClassName="card__action--performed"
-                      content={attachment.content}
-                      disabled={!mostRecent}
-                    />
-                  );
+                  return <AutoDisableHeroCardContent activity={activity} attachment={attachment} />;
                 }
 
                 return next(...args);

__tests__/html/renderActivity.performance.html

@@ -19,20 +19,32 @@
     <script type="text/babel" data-presets="env,stage-3,react">
       const BATCH_SIZE = 5;
 
-      const timesActivityRendered = new Map();
+      const timesEnhancerCalled = new Map();
+      const timesHandlerCalled = new Map();
 
       function activityRendered() {
-        return next => (...args) => {
-          const [{ activity }] = args;
-          const renderActivity = next(...args)
-          timesActivityRendered.set(activity.id, (timesActivityRendered.get(activity.id) ?? 0) + 1);
-          return (...args) => (
-            <>
-              {renderActivity.call ? renderActivity(...args) : renderActivity}
-              <small> Rendered {timesActivityRendered.get(activity.id)} times</small>
-            </>
-          )
-        }
+        return next =>
+          (...args) => {
+            const [{ activity }] = args;
+            const renderActivity = next(...args);
+
+            timesEnhancerCalled.set(activity.id, (timesEnhancerCalled.get(activity.id) ?? 0) + 1);
+
+            return (...args) => {
+              timesHandlerCalled.set(activity.id, (timesHandlerCalled.get(activity.id) ?? 0) + 1);
+
+              return (
+                <>
+                  {renderActivity.call ? renderActivity(...args) : renderActivity}
+                  <small>
+                    {' '}
+                    Enhancer called {timesEnhancerCalled.get(activity.id)} times and handler called{' '}
+                    {timesHandlerCalled.get(activity.id)} times
+                  </small>
+                </>
+              );
+            };
+          };
       }
 
       let shownCount = 0;
@@ -43,7 +55,13 @@
           promises.push(
             // Plain text message isolate dependencies on Markdown.
             directLine.emulateIncomingActivity(
-              { id: `activity-${shownCount + index}`, text: `Message ${shownCount + index}.`, textFormat: 'plain', type: 'message', timestamp },
+              {
+                id: `activity-${shownCount + index}`,
+                text: `Message ${shownCount + index}.`,
+                textFormat: 'plain',
+                type: 'message',
+                timestamp
+              },
               { skipWait: true }
             )
           );
@@ -54,53 +72,54 @@
         await pageConditions.numActivitiesShown(shownCount);
       }
 
-      run(
-        async function () {
-          const {
-            WebChat: { ReactWebChat }
-          } = window; // Imports in UMD fashion.
-
-          const { directLine, store } = testHelpers.createDirectLineEmulator();
-
-          WebChat.renderWebChat({ directLine, store, activityMiddleware: [activityRendered] }, document.querySelector('main'));
-
-          await pageConditions.uiConnected();
-          pageElements.transcript().focus();
-
-          // WHEN: Adding 10 activities.
-          await postMessagesBatch(directLine);
-          await postMessagesBatch(directLine);
-
-          // THEN: Should not re-render activity more than twice.
-          expect(Math.max(...timesActivityRendered.values())).toEqual(2);
-          expect(Math.min(...timesActivityRendered.values())).toEqual(1);
-
-          // WHEN: Scroll and clicked on the 5th activity.
-          const previousTimesActivityRendered = structuredClone(timesActivityRendered)
-          pageElements.activities()[4].scrollIntoView();
-          await host.clickAt(10, 10, pageElements.activities()[4]);
-
-          // THEN: Should focus on the activity.
-          expect(pageElements.focusedActivity()).toEqual(pageElements.activities()[4]);
-
-          // THEN: Should not re-render.          
-          expect(timesActivityRendered).toEqual(previousTimesActivityRendered);
-
-          // WHEN: The 9th activity received an update.
-          const timestamp = new Date().toISOString();
-          const activity9Renders = timesActivityRendered.get('activity-8');
-          await directLine.emulateIncomingActivity(
-              { id: `activity-8`, text: `Activity 8 got updated`, textFormat: 'plain', type: 'message', timestamp },
-              { skipWait: true }
-            );
+      run(async function () {
+        const {
+          WebChat: { ReactWebChat }
+        } = window; // Imports in UMD fashion.
 
-          // THEN: Should re-render the 9th activity once.
-          expect(timesActivityRendered.get('activity-8')).toBe(activity9Renders + 1);
-          // THEN: Should render the updated 9th activity.
-          pageElements.focusedActivity().scrollIntoView();
-          await host.snapshot();
-        }
-      );
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          { directLine, store, activityMiddleware: [activityRendered] },
+          document.querySelector('main')
+        );
+
+        await pageConditions.uiConnected();
+        pageElements.transcript().focus();
+
+        // WHEN: Adding 10 activities.
+        await postMessagesBatch(directLine);
+        await postMessagesBatch(directLine);
+
+        // THEN: Should not re-render activity more than twice.
+        expect(Math.max(...timesHandlerCalled.values())).toEqual(2);
+        expect(Math.min(...timesHandlerCalled.values())).toEqual(1);
+
+        // WHEN: Scroll and clicked on the 5th activity.
+        const previousTimesActivityRendered = structuredClone(timesHandlerCalled);
+        pageElements.activities()[4].scrollIntoView();
+        await host.clickAt(10, 10, pageElements.activities()[4]);
+
+        // THEN: Should focus on the activity.
+        expect(pageElements.focusedActivity()).toEqual(pageElements.activities()[4]);
+
+        // THEN: Should not re-render.
+        expect(timesHandlerCalled).toEqual(previousTimesActivityRendered);
+
+        // WHEN: The 9th activity received an update.
+        const timestamp = new Date().toISOString();
+        const activity9Renders = timesHandlerCalled.get('activity-8');
+        await directLine.emulateIncomingActivity(
+          { id: `activity-8`, text: `Activity 8 got updated`, textFormat: 'plain', type: 'message', timestamp },
+          { skipWait: true }
+        );
+
+        // THEN: Should re-render the 9th activity once.
+        expect(timesHandlerCalled.get('activity-8')).toBe(activity9Renders + 1);
+        // THEN: Should render the updated 9th activity.
+        pageElements.focusedActivity().scrollIntoView();
+        await host.snapshot();
+      });
     </script>
   </body>
 </html>