microsoft · OEvgeny · Nov 7, 2025 · Nov 6, 2025 · Nov 6, 2025 · Nov 6, 2025
@@ -145,6 +145,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Added target to Chrome 100 and re-enable Lightning CSS for ESM builds, by [@compulim](https://github.com/compulim) in PR [#5602](https://github.com/microsoft/BotFramework-WebChat/pull/5602)
 - Relaxed `role` prop to allow any string instead of ARIA landmark roles, in PR [#5561](https://github.com/microsoft/BotFramework-WebChat/pull/5561), by [@compulim](https://github.com/compulim)
 - Cleaned up `<ThemeProvider>` and various CSS related code, in PR [#5611](https://github.com/microsoft/BotFramework-WebChat/pull/5611), by [@compulim](https://github.com/compulim)
+- (Experimental) Reworked the copilot variant to align with the modern Copilot UX, in PR [#5630](https://github.com/microsoft/BotFramework-WebChat/pull/5630), by [@OEvgeny](https://github.com/OEvgeny)
+   - The legacy design is temporarily available as `copilot-deprecated` for migration
 
 ### Changed
 

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Citation long ref (copilot-deprecated)</title>
+    <script>
+      location = './citation.longRef?theme=fluent&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Collapsible activity (copilot, dark)</title>
+    <script>
+      location = './collapsible?variant=copilot-deprecated&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Collapsible activity (copilot-deprecated)</title>
+    <script>
+      location = './collapsible?variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -124,7 +124,7 @@
         const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
         root.render(
-          variant === 'copilot' || variant === 'fluent' ?
+          variant ?
             React.createElement(
               FluentProvider,
               { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Message status (copilot-deprecated)</title>
+    <script>
+      location = './message-status?variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -33,7 +33,7 @@
       height: 100%;
     }
 
-    .theme.variant-copilot {
+    .theme.variant-copilot-deprecated {
       --webchat__color--surface: var(--colorGrey98);
     }
   </style>
@@ -124,7 +124,7 @@
       const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
       root.render(
-        variant === 'copilot' || variant === 'fluent' ?
+        variant ?
           createElement(
             FluentProvider,
             { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Disable file upload (copilot-deprecated)</title>
+    <script>
+      location = './disableFileUpload?theme=fluent&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -33,7 +33,7 @@
       height: 100%;
     }
 
-    .theme.variant-copilot {
+    .theme.variant-copilot-deprecated {
       --webchat__color--surface: var(--colorGrey98);
     }
   </style>
@@ -125,7 +125,7 @@
       const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
       root.render(
-        variant === 'copilot' || variant === 'fluent' ?
+        variant ?
           createElement(
             FluentProvider,
             { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?theme=dark&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?theme=light&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -95,7 +95,7 @@
         const root = createRoot(document.getElementById('webchat'));
 
         root.render(
-          variant === 'copilot' || variant === 'fluent' ? 
+          variant ? 
             React.createElement(
               FluentProvider,
               { theme: fluentTheme },

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Link Definition Badge (copilot-deprecated): Test link definition badge</title>
+    <script>
+      location = './badge?variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Link Definition Badge (dark, copilot): Test link definition badge</title>
+    <script>
+      location = './badge?fluent-theme=dark&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -93,7 +93,7 @@
         const webChatProps = { dir: searchParams.get('dir'), directLine, store };
 
         root.render(
-          variant === 'copilot' || variant === 'fluent' ? 
+          variant ? 
             React.createElement(
               FluentProvider,
               { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout.scroll?theme=dark&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout.scroll?theme=light&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -83,7 +83,7 @@
         const root = createRoot(document.getElementById('webchat'));
 
         root.render(
-          variant === 'copilot' || variant === 'fluent' ? 
+          variant ? 
             React.createElement(
               FluentProvider,
               { theme: fluentTheme },
@@ -115,7 +115,7 @@
         document.querySelector(`#webchat [data-testid="${testIds.sendBoxTextBox}"]`).focus();
 
         await host.sendShiftTab(
-          (searchParams.get('variant') === 'copilot' || searchParams.get('variant') === 'fluent') ? 2 : 3
+          ['copilot', 'copilot-deprecated', 'fluent'].includes(searchParams.get('variant')) ? 2 : 3
         );
         await host.sendKeys('ENTER');
 

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Part grouping (copilot dark)</title>
+    <script>
+      location = './?variant=copilot-deprecated&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Part grouping (copilot-deprecated)</title>
+    <script>
+      location = './?variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -32,7 +32,7 @@
       height: 100%;
     }
 
-    .theme.variant-copilot {
+    .theme.variant-copilot-deprecated {
       --webchat__color--surface: var(--colorGrey98);
     }
   </style>
@@ -133,7 +133,7 @@
       const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
       root.render(
-        variant === 'copilot' || variant === 'fluent' ?
+        variant ?
           React.createElement(
             FluentProvider,
             { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -32,7 +32,7 @@
         height: 100%;
       }
 
-      .theme.variant-copilot {
+      .theme.variant-copilot-deprecated {
         --webchat__color--surface: var(--colorGrey98);
       }
     </style>
@@ -91,7 +91,7 @@
         const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
         root.render(
-          variant === 'copilot' || variant === 'fluent'
+          variant
             ? React.createElement(
                 FluentProvider,
                 { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -31,7 +31,7 @@
         height: 100%;
       }
 
-      .theme.variant-copilot {
+      .theme.variant-copilot-deprecated {
         --webchat__color--surface: var(--colorGrey98);
       }
     </style>
@@ -89,7 +89,7 @@
         const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
         root.render(
-          variant === 'copilot' || variant === 'fluent'
+          variant
             ? React.createElement(
                 FluentProvider,
                 { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -32,7 +32,7 @@
       height: 100%;
     }
 
-    .theme.variant-copilot {
+    .theme.variant-copilot-deprecated {
       --webchat__color--surface: var(--colorGrey98);
     }
   </style>
@@ -116,7 +116,7 @@
       const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
       root.render(
-        variant === 'copilot' || variant === 'fluent' ?
+        variant ?
           React.createElement(
             FluentProvider,
             { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -32,7 +32,7 @@
       height: 100%;
     }
 
-    .theme.variant-copilot {
+    .theme.variant-copilot-deprecated {
       --webchat__color--surface: var(--colorGrey98);
     }
   </style>
@@ -114,7 +114,7 @@
       const webChatProps = { directLine, store, styleOptions: { codeBlockTheme } };
 
       root.render(
-        variant === 'copilot' || variant === 'fluent' ?
+        variant ?
           React.createElement(
             FluentProvider,
             { className: 'fui-FluentProvider', theme: fluentTheme },

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './clearAfterSend?theme=fluent&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './styleOptions.maxHeight?theme=fluent&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -122,7 +122,7 @@
       const searchParams = new URLSearchParams(location.search);
 
       const [leftTranscriptIndex = 0, rightTranscriptIndex = 1] = searchParams.getAll('transcript');
-      const [leftVariant = 'fluent', rightVariant = 'copilot'] = searchParams.getAll('variant');
+      const [leftVariant = 'fluent', rightVariant = 'copilot-deprecated'] = searchParams.getAll('variant');
 
       const sendBoxIndexes = searchParams.getAll('focus');
       const activeFocusPresets = searchParams.getAll('focus-preset');

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './typingIndicator?theme=fluent&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './typingIndicator.scroll?theme=fluent&variant=copilot-deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -10,7 +10,8 @@
       var(--webchat-spacingHorizontalSNudge);
   }
 
-  &.variant-copilot {
+  &.variant-copilot,
+  &.variant-copilot-deprecated {
     margin: var(--webchat-spacingVerticalXS) 0 var(--webchat-spacingVerticalXS) -10px;
   }
 }