botframework-webchat-fluent-theme 4.18.1-main.20240911.3e47786 → 4.18.1-main.20240912.54a6a40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240911.3e47786",
+  "version": "4.18.1-main.20240912.54a6a40",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -69,9 +69,9 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240911.3e47786",
-    "botframework-webchat-component": "4.18.1-main.20240911.3e47786",
-    "botframework-webchat-core": "4.18.1-main.20240911.3e47786",
+    "botframework-webchat-api": "4.18.1-main.20240912.54a6a40",
+    "botframework-webchat-component": "4.18.1-main.20240912.54a6a40",
+    "botframework-webchat-core": "4.18.1-main.20240912.54a6a40",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/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 */

package/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 {