microsoft · compulim · Feb 3, 2026 · Jan 31, 2026 · Jan 31, 2026 · Jan 31, 2026
@@ -10,5 +10,6 @@
 !/packages/test/fluent-bundle/dist
 !/packages/test/harness/dist
 !/packages/test/page-object/dist
+!/packages/test/test-assets/out
 !/packages/test/web-server/dist
 !/serve-test.json
@@ -66,6 +66,7 @@ jobs:
           ./packages/fluent-theme/static/
           ./packages/test/harness/
           ./packages/test/page-object/dist/
+          ./packages/test/test-assets/out/
           ./packages/test/web-server/dist/
           ./serve-test.json
           ./testharness.dockerfile

@@ -319,6 +319,7 @@ Breaking changes in this release:
    - Activity status, in PR [#5669](https://github.com/microsoft/BotFramework-WebChat/pull/5669), by [@OEvgeny](https://github.com/OEvgeny)
    - Text attachment and related components, in PR [#5670](https://github.com/microsoft/BotFramework-WebChat/pull/5670), by [@OEvgeny](https://github.com/OEvgeny)
 - (Experimental) Added custom variants support for `botframework-webchat-fluent-theme` package, in PR [#5675](https://github.com/microsoft/BotFramework-WebChat/pull/5675), by [@OEvgeny](https://github.com/OEvgeny)
+- Improved adaptive cards rendering in copilot variant, in PR [#5682](https://github.com/microsoft/BotFramework-WebChat/pull/5682), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Deprecated
 

@@ -1,23 +1,5 @@
 /* eslint-env browser */
 
-// #region TODO: Remove me after we bump Chrome to v117+
-const customElementNames = customElements.getName instanceof Function ? null : new WeakMap();
-
-export function getCustomElementName(customElementConstructor) {
-  if (customElementNames) {
-    return customElementNames.get(customElementConstructor);
-  }
-  return customElements.getName(customElementConstructor);
-}
-
-function setCustomElementName(customElementConstructor, name) {
-  if (customElementNames) {
-    customElementNames.set(customElementConstructor, name);
-  }
-  // No need to set for browsers that support customElements.getName()
-}
-// #endregion
-
 export function customElement(elementKey, createElementClass) {
   const elementRegistration = document.querySelector(`element-registration[element-key="${elementKey}"]`);
   elementRegistration.elementConstructor = createElementClass(elementRegistration);
@@ -73,7 +55,6 @@ function initDocument(elementRegistration, currentDocument) {
       }
 
       customElements.define(elementName, constructor, constructor.options);
-      setCustomElementName(constructor, elementName);
 
       result.resolve(constructor);
     },

@@ -106,7 +106,7 @@
     <kbd></kbd>
   </template>
   <script type="module">
-    import { customElement, getCustomElementName } from '/assets/custom-element/custom-element.js';
+    import { customElement } from '/assets/custom-element/custom-element.js';
 
     customElement('keyboard-event', currentDocument =>
       class KeyboardEventElement extends HTMLElement {
@@ -130,8 +130,7 @@
         }
 
         static listenKeyboardEvents(scope = window) {
-          // const myTagName = customElements.getName(this)
-          const myTagName = getCustomElementName(this);
+          const myTagName = customElements.getName(this)
           const abortController = new AbortController();
           scope.addEventListener('keydown', event => {
             const element = document.createElement(myTagName);

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Test Shell custom element</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+    }
+    test-shell {
+      display: grid;
+      grid-template-rows: min-content auto;
+
+      #webchat {
+        height: 640px;
+        width: 380px;
+        transition: width 0.2s 0.2s ease-out;
+      }
+
+      .fui-FluentProvider {
+        display: contents;
+      }
+
+      .webchat__surface {
+        overflow: hidden;
+      }
+    }
+
+    test-shell:has(.theme.variant-copilot) > #webchat {
+      width: 680px;
+    }
+  </style>
+</head>
+<body>
+  <template>
+    <style type="text/css">
+      * {
+        box-sizing: border-box;
+      }
+
+      :host([data-theme="light"]) {
+        --body-background: linear-gradient(135deg, #e0f7ff 0%, #ffe5f0 100%);
+        --webchat-container-background: linear-gradient(160deg, #ffffff22 0%, #f8f9facc 100%);
+        --notice-color: #495057;
+        --notice-background: #f8f9fa77;
+        --notice-border: 1px solid #dee2e6;
+      }
+
+      :host([data-theme="dark"]) {
+        --body-background: linear-gradient(135deg, #0b1a2b 0%, #2c001e 100%);
+        --webchat-container-background: linear-gradient(160deg, #1a1a1acc 0%, #222222cc 100%);
+        --notice-color: #f8f9fa;
+        --notice-background: #49505777;
+        --notice-border: 1px solid #666666;
+      }
+
+      :host {
+        margin: 0;
+        min-height: 100vh;
+        padding: 30px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+        background: var(--body-background);
+        display: grid;
+        gap: 20px;
+
+        opacity: 0;
+        transition: opacity 0.3s 0.7s ease-in-out;
+      }
+
+      :host([data-theme="dark"]), :host([data-theme="light"]) {
+        opacity: 1;
+      }
+
+      .webchat-container {
+        border-radius: 16px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+        background: var(--webchat-container-background);
+        position: relative;
+        display: grid;
+        place-self: center;
+
+        .loader-notice {
+          opacity: 0.33;
+          place-self: center;
+        }
+      }
+
+      .notice {
+        background: var(--notice-background);
+        border: var(--notice-border);
+        color: var(--notice-color);
+        padding: 15px;
+        border-radius: 8px;
+        max-width: 440px;
+        font-size: 14px;
+        place-self: start center;
+
+        &::after {
+          content: ' (theme=' attr(data-theme)')' ' (variant=' attr(data-variant)')';
+          opacity: 0.75;
+        } 
+      }
+    </style>
+    <div class="notice">
+    </div>
+    <div class="webchat-container">
+      <slot>
+        <div class="loader-notice">
+          Web Chat root element is not provided.
+        </div>
+      </slot>
+    </div>
+  </template>
+  <script type="module">
+    import { customElement } from '/assets/custom-element/custom-element.js';
+
+    customElement('test-shell', currentDocument =>
+      class TestShellElement extends HTMLElement {
+        constructor() {
+          super();
+          const template = currentDocument.querySelector('template');
+          const fragment = template.content.cloneNode(true);
+
+          this.notice = fragment.querySelector('.notice');
+
+          this.initDataset();
+          this.initNotice();
+
+          const shadowRoot = this.attachShadow({ mode: 'open' });
+          shadowRoot.appendChild(fragment);
+        }
+
+        initNotice() {
+          this.notice.textContent = document.title;
+
+          Object.assign(this.notice.dataset, this.dataset);
+        }
+
+        initDataset() {
+          const params = new URLSearchParams(location.search)
+          this.dataset.theme = params.get('fluent-theme') || 'light';
+          this.dataset.fluentTheme = this.dataset.theme;
+          this.dataset.variant = params.get('variant');
+        }
+      }
+    );
+  </script>
+</body>
+</html>
@@ -0,0 +1,18 @@
+export function postActivity(adapter, activityOrString) {
+  const activityTemplate = {
+    type: 'message',
+    from: { id: 'user', name: 'User', role: 'user' },
+    timestamp: new Date().toISOString()
+  };
+
+  return new Promise((resolve, reject) =>
+    adapter
+      .postActivity(
+        Object.assign(
+          activityTemplate,
+          typeof activityOrString === 'string' ? { text: activityOrString } : activityOrString
+        )
+      )
+      .subscribe(resolve, reject)
+  );
+}
@@ -0,0 +1,25 @@
+/* eslint-env browser */
+import '/test-harness.mjs';
+import '/test-page-object.mjs';
+import * as WebChat from 'botframework-webchat';
+
+Object.assign(window, { WebChat });
+
+const createHostStub = (host = {}) => ({
+  ...Object.fromEntries(
+    Object.keys(host).map(methodName => [
+      methodName,
+      // eslint-disable-next-line no-console
+      (...args) => console.info(`host.${methodName}()`, ...args)
+    ])
+  ),
+  run: fn => fn()
+});
+
+const isWebDriver = !!navigator.webdriver;
+
+export const host = isWebDriver ? window.host : createHostStub(window.host);
+
+export const { pageConditions, testHelpers } = window;
+
+export const run = host.run || window.run;
@@ -6,11 +6,13 @@
     <script type="importmap">
       {
         "imports": {
-          "react": "https://esm.sh/react@18.3.1",
-          "react-dom": "https://esm.sh/react-dom@18.3.1",
-          "react-dom/": "https://esm.sh/react-dom@18.3.1/",
+          "@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
+          "@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
           "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
-          "@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme"
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/",
+          "react-jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
         }
       }
     </script>
@@ -34,10 +36,11 @@
   <body>
     <main id="webchat"></main>
     <script type="module">
+      import { FluentProvider } from '@fluentui/react-provider';
+      import { createDarkTheme, webLightTheme } from '@fluentui/tokens';
+      import { waitFor } from '@testduet/wait-for';
       import React from 'react';
       import { createRoot } from 'react-dom/client';
-      import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';
-      import { waitFor } from '@testduet/wait-for';
 
       async function openLastActivity() {
         let summaries;

@@ -7,8 +7,8 @@
   <script type="importmap">
     {
       "imports": {
-        "@fluentui/react-provider": "https://esm.sh/@fluentui/react-provider?deps=react@18&exports=FluentProvider",
-        "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
+        "@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
+        "@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
         "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
         "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
         "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
@@ -18,7 +18,8 @@
         "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
         "react": "https://esm.sh/react@18",
         "react-dom": "https://esm.sh/react-dom@18",
-        "react-dom/": "https://esm.sh/react-dom@18/"
+        "react-dom/": "https://esm.sh/react-dom@18/",
+        "react-jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
       }
     }
   </script>

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Attachment AdaptiveCard: custom (copilot, dark)</title>
+    <script>
+      location = './custom.skip?variant=copilot&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Attachment AdaptiveCard: custom (copilot)</title>
+    <script>
+      location = './custom.skip?variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Attachment AdaptiveCard: custom (fluent, dark)</title>
+    <script>
+      location = './custom.skip?variant=fluent&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Attachment AdaptiveCard: custom (fluent)</title>
+    <script>
+      location = './custom.skip?variant=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>