microsoft · compulim · Sep 20, 2025 · Sep 19, 2025 · Sep 19, 2025 · Sep 19, 2025
@@ -132,6 +132,11 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Unified build info and injection of `<meta>` tag, in PR [#5571](https://github.com/microsoft/BotFramework-WebChat/pull/5571), by [@compulim](https://github.com/compulim)
 - Added documentation for `isPartOf` property, in PR [#5573](https://github.com/microsoft/BotFramework-WebChat/pull/5573), by [@compulim](https://github.com/compulim)
 - `fluent-theme`: Changed dependencies to import solely from the "bundle" package, in PR [#5584](https://github.com/microsoft/BotFramework-WebChat/pull/5584), by [@compulim](https://github.com/compulim)
+- Improved bundling, in PR [#5588](https://github.com/microsoft/BotFramework-WebChat/pull/5588), by [@compulim](https://github.com/compulim)
+   - New named exports
+      - `api`: `botframework-webchat-api/hook`
+      - `bundle`: `botframework-webchat/component`, `botframework-webchat/decorator` (internal-use), `botframework-webchat/hook`
+      - `component`: `botframework-webchat-component/component`, `botframework-webchat-component/hook`
 
 ### Changed
 

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <style type="text/css">
+      /* TODO: [P*] Can we eliminate this style? */
+      .fui-FluentProvider,
+      .webchat-fluent {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme",
+          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
+          "botframework-webchat/internal": "/__dist__/packages/bundle/dist/botframework-webchat/internal.mjs",
+          "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/dist/botframework-webchat-fluent-theme.mjs",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import React from 'react';
+
+      // We should allow using React from environment.
+      // When web devs import Web Chat as <script type="module">, we want to enable customization.
+      // Customization requires React.createElement() and calling some hooks.
+      window.React = React;
+    </script>
+    <script type="module">
+      import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';
+      import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
+      import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      const { useStyleOptions } = hooks;
+      const {
+        testHelpers: { createDirectLineEmulator }
+      } = window;
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        const fluentTheme = {
+          ...createDarkTheme({
+            10: '#12174c',
+            20: '#1a1f5b',
+            30: '#21276a',
+            40: '#293079',
+            50: '#303788',
+            60: '#384097',
+            70: '#4049a7',
+            80: '#151e80',
+            90: '#4f59c5',
+            100: '#5661d4',
+            110: '#5e69e3',
+            120: '#7982e8',
+            130: '#949bec',
+            140: '#afb5f1',
+            150: '#c9cdf6',
+            160: '#e4e6fa'
+          }),
+          colorNeutralBackground1Disabled: '#101010',
+          colorNeutralBackground1Hover: '#101010',
+          colorNeutralForeground5: '#424242'
+        };
+
+        createRoot(document.getElementsByTagName('main')[0]).render(
+          createElement(
+            FluentProvider,
+            { className: 'fui-FluentProvider', theme: fluentTheme },
+            createElement(
+              FluentThemeProvider,
+              { variant: 'fluent' },
+              createElement(ReactWebChat, { directLine, store })
+            )
+          )
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity('Hello, World!');
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs"
+        }
+      }
+    </script>
+    <script type="module">
+      import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
+
+      run(async function () {
+        const {
+          testHelpers: { createDirectLineEmulator }
+        } = window;
+
+        // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+        window.WebChat = { createStoreWithOptions };
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity('Hello, World!');
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
+          "botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import React from 'react';
+
+      // We should allow using React from environment.
+      // When web devs import Web Chat as <script type="module">, we want to enable customization.
+      // Customization requires React.createElement() and calling some hooks.
+      window.React = React;
+    </script>
+    <script type="module">
+      import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
+      import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      const { useStyleOptions } = hooks;
+      const {
+        testHelpers: { createDirectLineEmulator }
+      } = window;
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        function MyMiddleware({ nextResult }) {
+          // THEN: Web Chat hooks can be called.
+          const [{ accent }] = useStyleOptions();
+
+          return createElement(
+            'div',
+            { style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
+            nextResult?.render({})
+          );
+        }
+
+        createRoot(document.getElementsByTagName('main')[0]).render(
+          createElement(ReactWebChat, {
+            directLine,
+            polymiddleware: [
+              createActivityPolymiddleware(
+                next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
+              )
+            ],
+            store
+          })
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity('Hello, World!');
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
+          "botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18"
+        }
+      }
+    </script>
+    <script type="module">
+      import React from 'react';
+      import ReactDOM from 'react-dom';
+
+      // We should allow using React from environment.
+      // When web devs import Web Chat as <script type="module">, we want to enable customization.
+      // Customization requires React.createElement() and calling some hooks.
+      window.React = React;
+      window.ReactDOM = ReactDOM;
+    </script>
+    <script type="module">
+      import { createDirectLine, createStoreWithOptions, hooks, renderWebChat } from 'botframework-webchat';
+      import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
+      import { createElement } from 'react';
+
+      const { useStyleOptions } = hooks;
+      const {
+        testHelpers: { createDirectLineEmulator }
+      } = window;
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        function MyMiddleware({ nextResult }) {
+          // THEN: Web Chat hooks can be called.
+          const [{ accent }] = useStyleOptions();
+
+          return createElement(
+            'div',
+            { style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
+            nextResult?.render({})
+          );
+        }
+
+        renderWebChat(
+          {
+            directLine,
+            polymiddleware: [
+              createActivityPolymiddleware(
+                next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
+              )
+            ],
+            store
+          },
+          document.getElementsByTagName('main')[0]
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity('Hello, World!');
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -41,6 +41,9 @@ const TRANSFORM_IGNORE_PACKAGES = [
   'unist-util-stringify-position',
   'uuid',
 
+  // Related to Speech SDK.
+  'microsoft-cognitiveservices-speech-sdk',
+
   // Related to Adaptive Cards.
   'dom7',
   'ssr-window',