microsoft · compulim · Sep 24, 2025 · Sep 22, 2025 · Sep 22, 2025 · Sep 22, 2025
@@ -2,6 +2,7 @@
 !/__tests__
 /__tests__/__image_snapshots__
 !/packages/bundle/dist
+!/packages/bundle/static
 !/packages/debug-theme/dist
 !/packages/fluent-theme/dist
 !/packages/playground/build

@@ -78,7 +78,9 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: bundles
-          path: packages/bundle/dist/**/*
+          path: |
+            packages/bundle/dist/**/*
+            packages/bundle/stable/**/*
 
       - name: Upload tarballs
         uses: actions/upload-artifact@v4

@@ -61,7 +61,9 @@ jobs:
         uses: actions/upload-artifact@v2
         with:
           name: bundle
-          path: 'packages/bundle/dist/**/*'
+          path: |
+            packages/bundle/dist/**/*
+            packages/bundle/stable/**/*
 
       - name: Upload npm-tarball
         uses: actions/upload-artifact@v2

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

@@ -137,6 +137,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - `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`
+- (Experimental) Added support for importing via `<script type="module">`, by [@compulim](https://github.com/compulim) in PR [#5592](https://github.com/microsoft/BotFramework-WebChat/pull/5592)
 
 ### Changed
 

@@ -0,0 +1,82 @@
+<!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/static/botframework-webchat.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js"
+        }
+      }
+    </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({
+          attachments: [
+            {
+              content: {
+                type: 'AdaptiveCard',
+                body: [
+                  {
+                    type: 'TextBlock',
+                    text: 'You can choose one of the followings.'
+                  }
+                ],
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.2',
+                actions: [
+                  {
+                    type: 'Action.Submit',
+                    title: 'What time is it?'
+                  },
+                  {
+                    type: 'Action.Submit',
+                    title: 'What is the weather?'
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ],
+          from: { id: 'bot', role: 'bot' },
+          text: 'What can I do for you?',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+
+        expect(typeof globalThis.React).toBe('undefined');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,82 @@
+<!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/static/botframework-webchat.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18"
+        }
+      }
+    </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({
+          attachments: [
+            {
+              content: {
+                type: 'AdaptiveCard',
+                body: [
+                  {
+                    type: 'TextBlock',
+                    text: 'You can choose one of the followings.'
+                  }
+                ],
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.2',
+                actions: [
+                  {
+                    type: 'Action.Submit',
+                    title: 'What time is it?'
+                  },
+                  {
+                    type: 'Action.Submit',
+                    title: 'What is the weather?'
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ],
+          from: { id: 'bot', role: 'bot' },
+          text: 'What can I do for you?',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+
+        expect(typeof globalThis.React).toBe('undefined');
+      });
+    </script>
+  </body>
+</html>
@@ -10,7 +10,9 @@
     <script type="importmap">
       {
         "imports": {
-          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs"
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18"
         }
       }
     </script>
@@ -27,13 +29,7 @@
 
         const { directLine, store } = createDirectLineEmulator();
 
-        renderWebChat(
-          {
-            directLine,
-            store
-          },
-          document.getElementById('webchat')
-        );
+        renderWebChat({ directLine, store }, document.getElementById('webchat'));
 
         await pageConditions.uiConnected();
 
@@ -42,6 +38,8 @@
         await pageConditions.numActivitiesShown(1);
 
         await host.snapshot('local');
+
+        expect(typeof globalThis.React).toBe('undefined');
       });
     </script>
   </body>

@@ -0,0 +1,71 @@
+<!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/static/botframework-webchat.js",
+          "botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat.middleware.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18"
+        }
+      }
+    </script>
+    <script type="module">
+      import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
+      import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
+      import { createElement } from 'react';
+      import { render } from 'react-dom';
+
+      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({})
+          );
+        }
+
+        render(
+          createElement(ReactWebChat, {
+            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>
@@ -10,22 +10,14 @@
     <script type="importmap">
       {
         "imports": {
-          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
-          "botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat.middleware.js",
           "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';

@@ -10,23 +10,13 @@
     <script type="importmap">
       {
         "imports": {
-          "botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
-          "botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat.middleware.js",
           "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';

@@ -18,23 +18,14 @@
       {
         "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": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/internal": "/__dist__/packages/bundle/static/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/"
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js"
         }
       }
     </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';