feat: add custom variants support

CHANGELOG.md

@@ -317,6 +317,7 @@ Breaking changes in this release:
    - Bubble, carousel, say-alt, in PR [#5668](https://github.com/microsoft/BotFramework-WebChat/pull/5668), by [@OEvgeny](https://github.com/OEvgeny)
    - 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)
 
 ### Deprecated
 

__tests__/assets/webchat-copilot-deprecated.variant.css

@@ -0,0 +1,135 @@
+:is(.webchat-fluent .sendbox.wKGyPWW_variant-copilot-deprecated) .sendbox__text-counter:not(.sendbox__text-counter--error) {
+  visibility: hidden;
+}
+.webchat-fluent .activity-loader.wKGyPWW_variant-copilot-deprecated {
+  margin: var(--webchat-spacingVerticalXS) 0 var(--webchat-spacingVerticalXS) -10px;
+}
+
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated {
+  --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalNone);
+  position: relative;
+}
+
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .part-grouping-decorator__header {
+  padding-block: var(--webchat-spacingVerticalS);
+}
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) .part-grouping-decorator__header {
+  display: none;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--group {
+  --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalXS);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot {
+  --webchat-part-grouping__bubble--background-color: transparent;
+  --webchat-part-grouping__bubble--border-radius: var(--webchat-borderRadius2XLarge);
+  --webchat-part-grouping__bubble--space-block: var(--webchat-spacingVerticalNone);
+  --webchat-part-grouping__bubble--space-inline: var(--webchat-spacingHorizontalNone);
+  --webchat-part-grouping__bubble--max-width: 100%;
+  --webchat-part-grouping__bubble--min-height: 20px;
+  --webchat-part-grouping__code-block--space-inline: var(--webchat-spacingHorizontalNone);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .activity-status {
+  margin: 0 0 var(--webchat-spacingHorizontalXXS);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .stacked-layout__status {
+  order: -1;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.bubble--from-user) .bubble {
+  margin-block-end: var(--webchat-spacingVerticalM);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.bubble.bubble--from-user),
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.pre-chat-message-activity),
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.liner-message-activity) {
+  padding-inline-start: var(--webchat-spacingHorizontalNone);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .bubble .text-content .text-content__generated-badge {
+  display: none;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .stacked-layout:has(.collapsible-grouping) {
+  margin-inline: var(--webchat-spacingHorizontalNone);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .collapsible-grouping__content {
+  anchor-name: --webchat-flair;
+  background: var(--webchat-colorNeutralBackground1);
+  border-radius: var(--webchat-borderRadius2XLarge);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .stacked-layout .stacked-layout__message-status {
+  margin-inline: var(--webchat-spacingHorizontalNone) var(--webchat-spacingHorizontalS);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .border-flair {
+  border-radius: var(--webchat-borderRadius2XLarge);
+  inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+  position-anchor: --webchat-flair;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot {
+  margin-inline-end: var(--webchat-spacingHorizontalXXL);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .stacked-layout {
+  margin: 0;
+  position: static;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble {
+  width: var(--webchat-part-grouping__bubble--max-width);
+  position: static;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot:not(.part-grouping-decorator--group) .bubble__content {
+  gap: var(--webchat-spacingVerticalS);
+  flex-direction: column;
+  display: flex;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble .collapsible-content .collapsible-content__content {
+  margin-block: var(--webchat-spacingVerticalNone);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment-list {
+  margin-block-start: var(--webchat-spacingVerticalS);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment {
+  max-width: var(--webchat-part-grouping__bubble--max-width);
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .stacked-layout__status {
+  display: none;
+}
+:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):not(.part-grouping-decorator--group) .bubble:not(.bubble--from-user) .bubble__content {
+  anchor-name: --webchat-flair;
+  max-width: unset;
+}
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated {
+  padding-inline-start: var(--webchat-spacingHorizontalMNudge);
+}
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .collapsible-grouping {
+  margin-inline-end: var(--webchat-spacingHorizontalXXL);
+}
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated.part-grouping-decorator--from-bot .bubble__content {
+  box-sizing: content-box;
+  margin-block: calc(var(--webchat-spacingVerticalS) * -1);
+  margin-inline: calc(var(--webchat-spacingHorizontalS) * -1);
+  padding-block: var(--webchat-spacingVerticalS);
+  padding-inline: var(--webchat-spacingHorizontalS);
+}
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .stacked-layout .transcript-focus-area__activity-list {
+  --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalL);
+}
+.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .bubble:not(.bubble--from-user):after {
+  margin-block: var(--webchat-spacingVerticalXS);
+  outline-offset: 5px;
+  --webchat-part-grouping__bubble--border-radius: calc(var(--webchat-borderRadius2XLarge) - 8px);
+}
+.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__css-custom-properties {
+  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalXL) var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalMNudge);
+}
+.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__surface {
+  box-sizing: border-box;
+  padding-inline-start: var(--webchat-spacingHorizontalMNudge);
+}
+.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .transcript-focus-area {
+  --webchat__transcript--spacing: var(--webchat-spacingVerticalM);
+}
+.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__basic-transcript .webchat__basic-transcript__scrollable {
+  scrollbar-gutter: stable;
+}
+.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .transcript-focus-area:focus-visible .transcript-focus-area__content--focused .collapsible-grouping:after {
+  inset: -2px -4px;
+}
+.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__basic-transcript .webchat__basic-transcript__filler {
+  flex-grow: 0;
+}

__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): code block with dark theme navigation (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=5&focus=1&focus-preset=viewCode&codeBlockTheme=github-dark-default&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: code block with dark theme navigation (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=5&focus=1&focus-preset=viewCode&codeBlockTheme=github-dark-default';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): code block navigation (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=5&focus=1&focus-preset=viewCode&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: code block navigation (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=5&focus=1&focus-preset=viewCode';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): feedback navigation (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=6&focus=1&focus-preset=likeDislike&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/feedback.custom-variant.navigation.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: feedback navigation (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=6&focus=1&focus-preset=likeDislike';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/index.html

@@ -4,6 +4,7 @@
 <head>
   <title>Two Chat panes side-by-side using Fluent theme</title>
   <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  <link href="/assets/webchat-copilot-deprecated.variant.css" rel="stylesheet" type="text/css" />
   <script type="importmap">
     {
       "imports": {
@@ -107,7 +108,13 @@
 
     run(async function () {
       const {
-        WebChat: { FluentThemeProvider, ReactWebChat },
+        WebChat: { 
+          decorator: { createActivityGroupingMiddleware, DecoratorComposer },
+          CopilotMessageHeader,
+          FluentThemeProvider, 
+          PartGroupDecorator, 
+          ReactWebChat
+        }
       } = window; // Imports in UMD fashion.
 
       await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
@@ -791,6 +798,27 @@
         '160': '#e4e6fa'
       };
 
+      let RightWrap = React.Fragment;
+      if (/\s/u.test(rightVariant)) {
+        const CustomPartGroupDecorator = (props) => {
+          const { 
+            activities: [activity, ...restActivities],
+          } = props;
+          const isFromBot = activity?.from?.role === 'bot';
+          return React.createElement(PartGroupDecorator, {
+            ...(isFromBot && { header: React.createElement(CopilotMessageHeader, { activity, className: 'part-grouping-decorator__header' })}),
+            ...props,
+          });
+        };
+        const partGrouping = createActivityGroupingMiddleware(next => request => {
+          if (request.groupingName === 'part') {
+            return CustomPartGroupDecorator;
+          }
+          return next(request);
+        });
+        RightWrap = ({ children }) => React.createElement(DecoratorComposer, { middleware: [partGrouping] }, children);
+      }
+
       const App = () => {
         const theme = searchParams.get('theme');
         const isDarkTheme = theme === 'fluent-dark';
@@ -823,20 +851,22 @@
           ),
           React.createElement('div', { className: "webchat-right" },
             React.createElement(FluentThemeProvider, { variant: rightVariant },
-              React.createElement(ReactWebChat, {
-                directLine: rightDirectLine,
-                store: rightStore,
-                overrideLocalizedStrings: {
-                  TEXT_INPUT_PLACEHOLDER: 'Ask a work question or use / to reference people, files and more',
-                  ACTIVITY_CODE_CAUTION: 'AI-generated code. Review and use carefully. [More info on FAQ](https://aka.ms/AIandCopilotFAQs).'
-                },
-                styleOptions: {
-                  groupTimestamp: 1,
-                  timestampFormat: 'absolute',
-                  botAvatarBackgroundColor: '#304E7A',
-                  ...adjustStyleOptions
-                }
-              })
+              React.createElement(RightWrap, null,
+                React.createElement(ReactWebChat, {
+                  directLine: rightDirectLine,
+                  store: rightStore,
+                  overrideLocalizedStrings: {
+                    TEXT_INPUT_PLACEHOLDER: 'Ask a work question or use / to reference people, files and more',
+                    ACTIVITY_CODE_CAUTION: 'AI-generated code. Review and use carefully. [More info on FAQ](https://aka.ms/AIandCopilotFAQs).'
+                  },
+                  styleOptions: {
+                    groupTimestamp: 1,
+                    timestampFormat: 'absolute',
+                    botAvatarBackgroundColor: '#304E7A',
+                    ...adjustStyleOptions
+                  }
+                })
+              )
             )
           )
         );

__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): pre-chat navigate (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&focus=1&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: pre-chat navigate (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&focus=1';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): pre-liner (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=3&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/pre-liner.custom-variant.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: pre-liner (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=3';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/streaming.custom-variant.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): streaming (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=4&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/streaming.custom-variant.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: streaming (right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=4';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side (dark): transcript navigation (left, right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=2&focus=0&focus=1&theme=fluent-dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/side-by-side/transcript.custom-variant.navigation.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Two Chat panes side-by-side: transcript navigation (left, right)</title>
+    <script>
+      location = './?variant=fluent&variant=variant-copilot-deprecated%20wKGyPWW_variant-copilot-deprecated&transcript=0&transcript=2&focus=0&focus=1';
+    </script>
+  </head>
+  <body></body>
+</html>