microsoft · compulim · Oct 14, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      main {
+        position: relative;
+      }
+
+      .webchat .chat-launcher-button {
+        /* Setting it to absolute for testing only. */
+        position: absolute !important;
+      }
+
+      .webchat .chat-launcher-modal {
+        height: 400px !important;
+        width: 320px !important;
+      }
+
+      #webchat {
+        background-image: url(./assets/background.jpg);
+        background-position: center;
+        background-size: cover;
+      }
+
+      .popover--non-modal {
+        display: block;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          visibility 0.2s allow-discrete,
+          opacity 0.2s ease;
+      }
+
+      .popover--non-modal:popover-open {
+        visibility: visible;
+        opacity: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18,react-dom@18&exports=FluentProvider,webLightTheme",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
+          "botframework-webchat/experience/chatLauncher": "/__dist__/packages/bundle/static/botframework-webchat/experience/chatLauncher.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
+          "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <webchat--chat-launcher-experience token="..." />
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+      import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
+
+      import { createStoreWithOptions } from 'botframework-webchat';
+      import { ChatLauncher } from 'botframework-webchat/experience/chatLauncher';
+      import { fn, spyOn } from 'jest-mock';
+      import { createElement } from 'react';
+      import { flushSync } from 'react-dom';
+      import { createRoot } from 'react-dom/client';
+
+      testHelpers.ignoreReactDeprecation({ defaultProps: true });
+
+      run(async function () {
+        const {
+          testHelpers: { createDirectLineEmulator }
+        } = window;
+
+        // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+        window.WebChat = { createStoreWithOptions };
+
+        const fluentTheme = {
+          ...webLightTheme,
+          // Original is #242424 which is too light for fui-FluentProvider to pass our accessibility checks.
+          colorNeutralForeground1: '#1b1b1b'
+        };
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        flushSync(() =>
+          createRoot(document.getElementById('webchat')).render(
+            createElement(
+              FluentProvider,
+              { className: 'fui-FluentProvider', theme: fluentTheme },
+              createElement(
+                FluentThemeProvider,
+                { variant: 'fluent' },
+                createElement(ChatLauncher, { directLine, store })
+              )
+            )
+          )
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Mollit nostrud duis do sunt adipisicing excepteur deserunt anim qui eu. Eu occaecat sit laborum dolore sint ullamco. Enim aliquip culpa duis aute laborum cillum minim dolore dolore nulla voluptate ea. Qui exercitation minim velit adipisicing est eiusmod nisi et sint. Voluptate eiusmod aliqua quis esse sit excepteur culpa enim dolore voluptate irure cillum. Amet consequat ea ipsum laborum cillum non amet labore ad ipsum. Et nisi occaecat quis minim magna ea esse cillum.',
+          timestamp: -120000,
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Velit labore excepteur duis sit adipisicing quis eiusmod elit minim ea enim quis. Cillum ex adipisicing excepteur incididunt consectetur qui eu Lorem in minim ipsum. Commodo mollit aliqua ut sit ex commodo sit irure tempor adipisicing ipsum. Laboris fugiat labore eu est nulla cupidatat. Sit ut est laboris do.',
+          timestamp: -60000,
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Quis elit eiusmod minim anim dolor nostrud. Eu cillum anim reprehenderit ullamco non elit labore eiusmod. Aute esse adipisicing ad enim do aute tempor enim. Laborum anim qui esse sit. Amet elit incididunt reprehenderit enim dolor.',
+          timestamp: 0,
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(3);
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      main {
+        position: relative;
+      }
+
+      .webchat .chat-launcher-button {
+        /* Setting it to absolute for testing only. */
+        position: absolute !important;
+      }
+
+      .webchat .chat-launcher-modal {
+        height: 400px !important;
+        width: 320px !important;
+      }
+
+      #webchat {
+        background-image: url(./assets/background.jpg);
+        background-position: center;
+        background-size: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/experience/chatLauncher": "/__dist__/packages/bundle/static/botframework-webchat/experience/chatLauncher.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
+        }
+      }
+    </script>
+    <webchat--chat-launcher-experience token="..." />
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions } from 'botframework-webchat';
+      import { ChatLauncher } from 'botframework-webchat/experience/chatLauncher';
+      import { fn, spyOn } from 'jest-mock';
+      import { createElement } from 'react';
+      import { flushSync } from 'react-dom';
+      import { createRoot } from 'react-dom/client';
+
+      testHelpers.ignoreReactDeprecation({ defaultProps: true });
+
+      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();
+
+        flushSync(() =>
+          createRoot(document.getElementById('webchat')).render(createElement(ChatLauncher, { directLine, store }))
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Mollit nostrud duis do sunt adipisicing excepteur deserunt anim qui eu. Eu occaecat sit laborum dolore sint ullamco. Enim aliquip culpa duis aute laborum cillum minim dolore dolore nulla voluptate ea. Qui exercitation minim velit adipisicing est eiusmod nisi et sint. Voluptate eiusmod aliqua quis esse sit excepteur culpa enim dolore voluptate irure cillum. Amet consequat ea ipsum laborum cillum non amet labore ad ipsum. Et nisi occaecat quis minim magna ea esse cillum.',
+          timestamp: -120000,
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Velit labore excepteur duis sit adipisicing quis eiusmod elit minim ea enim quis. Cillum ex adipisicing excepteur incididunt consectetur qui eu Lorem in minim ipsum. Commodo mollit aliqua ut sit ex commodo sit irure tempor adipisicing ipsum. Laboris fugiat labore eu est nulla cupidatat. Sit ut est laboris do.',
+          timestamp: -60000,
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Quis elit eiusmod minim anim dolor nostrud. Eu cillum anim reprehenderit ullamco non elit labore eiusmod. Aute esse adipisicing ad enim do aute tempor enim. Laborum anim qui esse sit. Amet elit incididunt reprehenderit enim dolor.',
+          timestamp: 0,
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(3);
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <link href="./css/pauseAnimation.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="module">
+      run(async function () {
+        const {
+          React: { createElement },
+          ReactDOM: { render },
+          WebChat: {
+            Components: { BasicWebChat, Composer },
+            decorator: { WebChatDecorator },
+            hooks: { useActivityKeys, useGetActivitiesByKey }
+          }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+        let currentActivityKeysWithId = [];
+
+        const Monitor = () => {
+          const [activityKeys] = useActivityKeys();
+          const getActivitiesByKey = useGetActivitiesByKey();
+
+          currentActivityKeysWithId = Object.freeze(
+            activityKeys.map(key => [key, getActivitiesByKey(key).map(({ id }) => id)])
+          );
+
+          return false;
+        };
+
+        render(
+          createElement(
+            WebChatDecorator,
+            {},
+            createElement(
+              Composer,
+              {
+                directLine,
+                store
+              },
+              createElement(BasicWebChat),
+              createElement(Monitor)
+            )
+          ),
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // SETUP: Bot sent a message.
+        await directLine.emulateIncomingActivity({
+          id: 'a-00001',
+          from: { id: 'u-00001', name: 'Bot', role: 'bot' },
+          text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.',
+          type: 'message'
+        });
+
+        let firstActivityKey = currentActivityKeysWithId[0][0];
+
+        // WHEN: Bot is typing a message.
+        const firstTypingActivityId = 't-00001';
+
+        await directLine.emulateIncomingActivity({
+          channelData: { streamSequence: 1, streamType: 'streaming' },
+          from: { id: 'u-00001', name: 'Bot', role: 'bot' },
+          id: firstTypingActivityId,
+          text: 'A quick',
+          type: 'typing'
+        });
+
+        let secondActivityKey = currentActivityKeysWithId[1][0];
+
+        // THEN: Should display 2 messages.
+        await pageConditions.numActivitiesShown(2);
+        expect(pageElements.typingIndicator()).toBeFalsy();
+        expect(pageElements.activityContents()[0]).toHaveProperty(
+          'textContent',
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
+        );
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
+        await host.snapshot('local');
+
+        // THEN: Should have 2 activity keys.
+        expect(currentActivityKeysWithId).toEqual([
+          [firstActivityKey, ['a-00001']],
+          [secondActivityKey, ['t-00001']]
+        ]);
+
+        // ---
+
+        // WHEN: Bot send another unrelated message.
+        await directLine.emulateIncomingActivity({
+          channelData: { streamId: 'x-99999', streamSequence: 2, streamType: 'streaming' },
+          from: { id: 'u-00001', name: 'Bot', role: 'bot' },
+          id: 't-00002',
+          text: 'A quick brown fox',
+          type: 'typing'
+        });
+
+        let thirdActivityKey = currentActivityKeysWithId[2][0];
+
+        // THEN: Should display 3 messages.
+        await pageConditions.numActivitiesShown(3);
+        expect(pageElements.typingIndicator()).toBeFalsy();
+        expect(pageElements.activityContents()[0]).toHaveProperty(
+          'textContent',
+          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
+        );
+        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
+        expect(pageElements.activityContents()[2]).toHaveProperty('textContent', 'A quick brown fox');
+        await host.snapshot('local');
+
+        // THEN: Should have 2 activity keys only.
+        expect(currentActivityKeysWithId).toEqual([
+          [firstActivityKey, ['a-00001']],
+          [secondActivityKey, ['t-00001']],
+          [thirdActivityKey, ['t-00002']]
+        ]);
+      });
+    </script>
+  </body>
+</html>
@@ -19,6 +19,7 @@ module.exports = {
   'packages/core/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:core'],
   'packages/debug-theme/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:debug-theme'],
   'packages/directlinespeech/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:directlinespeech'],
+  'packages/experience-chat-launcher/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:experience-chat-launcher'],
   'packages/fluent-theme/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:fluent-theme'],
   'packages/isomorphic-react/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:isomorphic-react'],
   'packages/isomorphic-react-dom/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:isomorphic-react-dom'],