Fluent: rework spacing for copilot variant (#5296)

* Fluent: rework spacing for copilot variant

* Changelog

* Cleanup

* Snaps

* Decorator snaps

* Updated snaps and cleanup

* Fix snapshot and update summary styles

CHANGELOG.md

@@ -55,6 +55,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Updated styles for suggested actions and attachments in Fluent theme to improve readability and consistency, in PR [#5275](https://github.com/microsoft/BotFramework-WebChat/pull/5275), by [@OEvgeny](https://github.com/OEvgeny)
 -  Moved from `[email protected]` to `@redux/[email protected]`, in PR [#5292](https://github.com/microsoft/BotFramework-WebChat/pull/5292), by [@compulim](https://github.com/compulim)
 -  Enhanced the visual presentation of the Fluent theme copilot variant, in PR [#5293](https://github.com/microsoft/BotFramework-WebChat/pull/5293), by [@OEvgeny](https://github.com/OEvgeny)
+-  Refactored spacing and layout for copilot variant in Fluent theme, improving visual consistency, in PR [#5296](https://github.com/microsoft/BotFramework-WebChat/pull/5296), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

__tests__/html/fluentTheme/side-by-side.wide.dark.html

@@ -88,7 +88,6 @@
         author: {
           '@context': 'https://schema.org',
           '@type': 'Person',
-          type: 'https://schema.org/Person',
           image: botIcon,
           name: 'Onboarding Buddy',
         }

__tests__/html/fluentTheme/side-by-side.wide.html

@@ -97,7 +97,6 @@
         author: {
           '@context': 'https://schema.org',
           '@type': 'Person',
-          type: 'https://schema.org/Person',
           image: botIcon,
           name: 'Onboarding Buddy',
         }

__tests__/html/linkDefinition/badge.html

@@ -133,7 +133,11 @@
                 }
               ],
               type: 'https://schema.org/Message',
-              usageInfo: { '@id': '_:1' }
+              usageInfo: { '@id': '_:1' },
+              author: {
+                '@type': 'Person',
+                name: 'Lorem Ipsum Expert'
+              }
             }
           ],
           text: 'Ipsum[1] dolore[2] cupidatat[3] magna[4] consectetur[5] do tempor est excepteur.\n\n[1]: https://example.com/1/ "Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat"\n[2]: https://example.com/2/ "Laboris cupidatat voluptate"\n[3]: _:3 "Velit nulla culpa eu ea consectetur consectetur dolore velit"\n[4]: _:4 "Adipisicing enim nulla"\n[5]: https://example.com/5',

__tests__/html/linkDefinition/badge.js

@@ -3,4 +3,5 @@
 describe('link definition', () => {
   test('should display text ellipsis', () => runHTML('linkDefinition/badge'));
   test('should display text ellipsis in Fluent theme', () => runHTML('linkDefinition/badge?variant=fluent'));
+  test('should display text ellipsis in Copilot theme', () => runHTML('linkDefinition/badge?variant=copilot'));
 });

packages/fluent-theme/src/components/activity/ActivityDecorator.module.css

@@ -30,20 +30,6 @@
 /* Decorator copilot variant */
 :global(.webchat-fluent) .activity-decorator.variant-copilot {
   --webchat__bubble--border-radius: var(--webchat-borderRadiusXLarge);
-
-  &:not(:has(:global(.webchat__bubble--from-user))) {
-    --webchat__bubble--block-padding: var(--webchat-spacingVerticalS) var(--webchat-spacingVerticalS);
-    --webchat__bubble--border-radius: var(--webchat-borderRadiusMedium);
-    --webchat__bubble--inline-padding: 34px var(--webchat-spacingHorizontalS);
-    --webchat__bubble--max-width: 100%;
-
-    display: block;
-    padding-inline-start: var(--webchat-spacingHorizontalM);
-  }
-
-  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout__status) {
-    display: none;
-  }
 
   :global(.webchat__activity-status) {
     margin: 0 0 var(--webchat-spacingHorizontalXXS);
@@ -53,16 +39,64 @@
     order: -1;
   }
 
-  /* TODO: remove when we get decorators in and can place header directly to the bubble */
-  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content) {
-    padding-block: calc(var(--webchat-spacingVerticalMNudge) + 20px) var(--webchat-spacingVerticalS);
+  &:has(:global(.webchat__bubble--from-user)) :global(.webchat__bubble) {
+    margin-block-end: var(--webchat-spacingVerticalM);
+  }
+}
+
+/* Decorator copilot variant which has bot message */  
+:global(.webchat-fluent) .activity-decorator.variant-copilot:not(:has(:global(.webchat__bubble--from-user))) {
+  --webchat__bubble--block-padding: 0;
+  --webchat__bubble--border-radius: var(--webchat-borderRadiusMedium);
+  --webchat__bubble--inline-padding: 0;
+  --webchat__bubble--max-width: 100%;
+  --webchat__bubble--min-height: 20px;
+
+  display: flex;
+  flex-flow: column nowrap;
+  gap: var(--webchat-spacingVerticalS);
+  margin-inline: var(--webchat-spacingHorizontalM);
+  padding: var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalM);
+  position: relative;
+
+  :global(.webchat__stacked-layout) {
+    margin: 0;
+    position: static;
   }
 
-  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout .webchat__bubble) {
-    margin-block-start: -28px;
-    margin-inline-start: -10px;
+  :global(.webchat__bubble) {
+    position: static;
     width: var(--webchat__bubble--max-width);
   }
+
+  :global(.webchat__bubble .webchat__bubble__content) {
+    overflow: visible;
+  }
+
+  :global(.webchat__text-content) {
+    margin-inline-start: 28px;
+  }
+
+  :global(.border-loader) {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: var(--webchat-spacingVerticalS);
+    padding-inline-end: var(--webchat-spacingHorizontalM);
+    width: 500px;
+  }
+
+  :global(.border-loader__track) {
+    border-radius: inherit;
+    box-sizing: border-box;
+    clip-path: border-box;
+    margin-inline-start: 28px;
+    order: -1;
+    width: auto;
+  }
+
+  :global(.webchat__stacked-layout__status) {
+    display: none;
+  }
 }
 
 /* Transcript activity non-empty */
@@ -102,8 +136,8 @@
   box-shadow: var(--webchat__bubble--box-shadow);
   box-sizing: border-box;
   color: var(--webchat-colorNeutralForeground1);
-  min-height: var(--webchat__bubble--min-height);
   max-width: var(--webchat__bubble--max-width);
+  min-height: var(--webchat__bubble--min-height);
 }
 
 /* Message bubble text content */
@@ -131,6 +165,12 @@
   }
 }
 
+/* Message bubble latency loader */
+:global(.webchat-fluent) .activity-decorator :global(.border-loader) {
+  max-width: 100%;
+  width: var(--webchat__bubble--max-width);
+}
+
 /* Markdown links and citation links */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) a[href]:not(:global(.webchat__render-markdown__pure-identifier)) {
   color: var(--webchat-colorBrandForegroundLink);
@@ -214,6 +254,8 @@
 
 /* Citation summary chevron */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions__header) {
+  border-radius: var(--webchat-borderRadiusMedium);
+
   :global(.webchat__link-definitions__header-text) {
     color: var(--webchat-colorNeutralForeground3);
   }
@@ -223,6 +265,11 @@
     font-size: var(--webchat__font-size--small);
     width: 1em;
   }
+
+  &:focus-visible {
+    outline-offset: 1px;
+    outline: var(--webchat-strokeWidthThin) solid var(--webchat-colorStrokeFocus2);
+  }
 }
 
 /* Citation link definitions */

packages/fluent-theme/src/components/activity/CopilotMessageHeader.module.css

@@ -7,11 +7,6 @@
   flex-wrap: nowrap;
   gap: var(--webchat-spacingHorizontalS);
   max-width: var(--webchat__bubble--max-width);
-  padding-block-start: var(--webchat-spacingVerticalXS);
-  padding-inline: var(--webchat-spacingVerticalMNudge);
-  /* TODO: remove when moved to the bubble */
-  position: relative;
-  z-index: 1;
 }
 
 :global(.webchat-fluent) .copilot-message-header__avatar {