botframework-webchat-fluent-theme 4.18.1-main.20241009.63e5cb0 → 4.18.1-main.20241009.ef5bda6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20241009.63e5cb0",
+  "version": "4.18.1-main.20241009.ef5bda6",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -68,15 +68,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^20.12.11",
     "@types/react": "^16.14.60",
-    "botframework-webchat-base": "4.18.1-main.20241009.63e5cb0",
-    "botframework-webchat-styles": "4.18.1-main.20241009.63e5cb0",
+    "botframework-webchat-base": "4.18.1-main.20241009.ef5bda6",
+    "botframework-webchat-styles": "4.18.1-main.20241009.ef5bda6",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20241009.63e5cb0",
-    "botframework-webchat-component": "4.18.1-main.20241009.63e5cb0",
-    "botframework-webchat-core": "4.18.1-main.20241009.63e5cb0",
+    "botframework-webchat-api": "4.18.1-main.20241009.ef5bda6",
+    "botframework-webchat-component": "4.18.1-main.20241009.ef5bda6",
+    "botframework-webchat-core": "4.18.1-main.20241009.ef5bda6",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/activity/ActivityDecorator.module.css

@@ -6,8 +6,10 @@
   --webchat__bubble--block-padding: var(--webchat-spacingVerticalM);
   --webchat__bubble--min-height: var(--webchat-bubble-minHeight);
   --webchat__bubble--max-width: var(--webchat-bubble-maxWidth);
+  --webchat__bubble--min-width: var(--webchat-bubble-minWidth);
 
-  --webchat-bubble-maxWidth: var(--bubble-maxWidth, 450px);
+  --webchat-bubble-maxWidth: var(--bubble-maxWidth, max(450px, 75%));
+  --webchat-bubble-minWidth: var(--bubble-minWidth, auto);
   --webchat-bubble-minHeight: var(--bubble-minHeight, 36px);
   --webchat-externalLink-mask: var(
     --externalLink-mask,
@@ -20,6 +22,7 @@
   &:has(:global(.webchat__stacked-layout .webchat__bubble--from-user)) {
     --webchat__bubble--background-color: var(--webchat-colorBrandBackground2);
     --webchat__bubble--block-padding: var(--webchat-spacingVerticalS);
+    --webchat__bubble--min-width: auto;
   }
 }
 
@@ -134,8 +137,14 @@
 
 /* Message bubble */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) {
-  max-width: 100%;
+  max-width: min(var(--webchat__bubble--max-width), 100%);
+  min-width: var(--webchat__bubble--min-width);
   overflow: visible;
+
+  /* Take all width available when has message bubble latency loader */
+  &:has(:global(.border-loader)) {
+    width: 100%;
+  }
 }
 
 /* Message bubble content */
@@ -148,7 +157,7 @@
   box-shadow: var(--webchat__bubble--box-shadow);
   box-sizing: border-box;
   color: var(--webchat-colorNeutralForeground1);
-  max-width: var(--webchat__bubble--max-width);
+  max-width: 100%;
   min-height: var(--webchat__bubble--min-height);
 }
 
@@ -205,12 +214,6 @@
   }
 }
 
-/* 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