botframework-webchat-fluent-theme 4.18.1-main.20240911.3e47786 → 4.18.1-main.20240917.4b9342a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240911.3e47786",
+  "version": "4.18.1-main.20240917.4b9342a",
   "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.20240917.4b9342a",
+    "botframework-webchat-component": "4.18.1-main.20240917.4b9342a",
+    "botframework-webchat-core": "4.18.1-main.20240917.4b9342a",
     "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,69 @@
     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);
+  }
+
+  /* Hide generated badge as it is in the copilot header */
+  :global(.webchat__bubble .webchat__text-content .webchat__text-content__generated-badge) {
+    display: none;
+  }
+}
+
+/* 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 +141,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 */
@@ -113,6 +152,30 @@
   min-height: auto;
   padding-block: var(--webchat__bubble--block-padding);
   padding-inline: var(--webchat__bubble--inline-padding);
+
+  &:empty {
+    padding-block-end: 0;
+  }
+
+  +:global(.webchat__text-content) {
+    margin-top: calc(var(--webchat__bubble--block-padding) * -1);
+  }
+}
+
+/* Message bubble text content generated badge */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) {
+  align-items: center;
+  align-self: flex-start;
+  background-color: var(--webchat-colorNeutralBackground5);
+  border-radius: var(--webchat-borderRadiusMedium);
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground3);
+  cursor: default;
+  display: inline-flex;
+  font-size: var(--webchat-fontSizeBase100);
+  height: 16px;
+  line-height: var(--webchat-lineHeightBase100);
+  padding-inline: var(--webchat-spacingHorizontalXS);
 }
 
 /* Message bubble attachment content */
@@ -131,6 +194,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 +283,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 +294,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 {