botframework-webchat-fluent-theme 4.18.1-main.20240927.ea7a875 → 4.18.1-main.20241008.1d59ded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240927.ea7a875",
+  "version": "4.18.1-main.20241008.1d59ded",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -52,9 +52,10 @@
   },
   "localDependencies": {
     "botframework-webchat-api": "production",
+    "botframework-webchat-base": "development",
     "botframework-webchat-component": "production",
     "botframework-webchat-core": "production",
-    "botframework-webchat-styles": "production"
+    "botframework-webchat-styles": "development"
   },
   "pinDependencies": {
     "@types/react": [
@@ -67,14 +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.20241008.1d59ded",
+    "botframework-webchat-styles": "4.18.1-main.20241008.1d59ded",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240927.ea7a875",
-    "botframework-webchat-component": "4.18.1-main.20240927.ea7a875",
-    "botframework-webchat-core": "4.18.1-main.20240927.ea7a875",
-    "botframework-webchat-styles": "4.18.1-main.20240927.ea7a875",
+    "botframework-webchat-api": "4.18.1-main.20241008.1d59ded",
+    "botframework-webchat-component": "4.18.1-main.20241008.1d59ded",
+    "botframework-webchat-core": "4.18.1-main.20241008.1d59ded",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

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

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .activity-decorator {
   display: contents;
   font-family: var(--webchat__font--primary);
@@ -10,7 +9,11 @@
 
   --webchat-bubble-maxWidth: var(--bubble-maxWidth, 450px);
   --webchat-bubble-minHeight: var(--bubble-minHeight, 36px);
-  --webchat-externalLink-mask: var(--externalLink-mask, var(--webchat__icon-url--external-link) center center / 10px 10px);
+  --webchat-externalLink-mask: var(
+    --externalLink-mask,
+    var(--webchat__icon-url--external-link) center center /
+    10px 10px
+  );
   --webchat-externalLink-maxWidth: var(--externalLink-maxWidth, 204px);
 
   /* Override for stacked layout message which has user message bubble props */
@@ -49,7 +52,7 @@
   }
 }
 
-/* Decorator copilot variant which has bot message */  
+/* 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);
@@ -116,7 +119,9 @@
 }
 
 /* Stacked layout which has message bubble */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) {
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) {
   max-width: 100%;
   overflow: visible;
 }
@@ -134,7 +139,9 @@
 }
 
 /* Message bubble content */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) {
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) {
   background-color: var(--webchat__bubble--background-color);
   border-radius: var(--webchat__bubble--border-radius);
   border-width: 0;
@@ -157,13 +164,15 @@
     padding-block-end: 0;
   }
 
-  +:global(.webchat__text-content) {
+  + :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) {
+: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);
@@ -179,7 +188,9 @@
 }
 
 /* Message bubble attachment content */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) {
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) {
   cursor: default;
   font-size: var(--webchat-fontSizeBase300);
   line-height: var(--webchat-lineHeightBase300);
@@ -201,7 +212,10 @@
 }
 
 /* Markdown links and citation links */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) a[href]:not(:global(.webchat__render-markdown__pure-identifier)) {
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__render-markdown)
+  a[href]:not(:global(.webchat__render-markdown__pure-identifier)) {
   color: var(--webchat-colorBrandForegroundLink);
   text-decoration-color: transparent;
 
@@ -231,8 +245,14 @@
 }
 
 /* Citation inline references */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) :global(.webchat__render-markdown__citation),
-:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) :global(.webchat__render-markdown__pure-identifier) {
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__render-markdown)
+  :global(.webchat__render-markdown__citation),
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__render-markdown)
+  :global(.webchat__render-markdown__pure-identifier) {
   align-items: center;
   background-color: var(--webchat-colorNeutralBackground3);
   border-radius: var(--webchat-borderRadiusMedium);
@@ -265,7 +285,8 @@
     color: var(--webchat-colorBrandForeground2Pressed);
   }
 
-  &::before, &::after {
+  &::before,
+  &::after {
     all: unset;
   }
 
@@ -284,7 +305,7 @@
 /* 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);
   }
@@ -375,7 +396,9 @@
     text-overflow: ellipsis;
   }
 
-  :global(.webchat__link-definitions__list-item-main-text):has(:global(.webchat__link-definitions__open-in-new-window-icon))::before {
+  :global(.webchat__link-definitions__list-item-main-text):has(
+      :global(.webchat__link-definitions__open-in-new-window-icon)
+    )::before {
     align-self: center;
     background: currentColor;
     color: currentColor;

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

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .copilot-message-header {
   align-items: center;
   box-sizing: border-box;

package/src/components/dropZone/DropZone.module.css

@@ -12,12 +12,12 @@
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {
   background-color: #e00;
-  color: White
+  color: White;
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {
   height: 36px;
   /* Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the "--droppable" modifier.*/
   pointer-events: none;
-  width: 36px
+  width: 36px;
 }

package/src/components/linerActivity/private/LinerMessageActivity.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .liner-message-activity {
   align-items: center;
   box-sizing: border-box;
@@ -14,9 +13,10 @@
   text-align: center;
   width: 100%;
 
-  &::before, &::after {
+  &::before,
+  &::after {
     border-top: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
-    content: "";
+    content: '';
     display: flex;
     flex: auto;
     min-width: 8px;

package/src/components/sendBox/Attachments.module.css

@@ -3,5 +3,5 @@
   border: 1px solid var(--webchat-colorNeutralStroke1);
   cursor: default;
   padding: 6px 8px;
-  width: fit-content
+  width: fit-content;
 }

package/src/components/sendBox/SendBox.module.css

@@ -28,14 +28,13 @@
   grid-template:
     [telephone-keypad-start] 'text-area' [telephone-keypad-end]
     var(--webchat-sendbox-attachment-area-active)
-    'controls' / [telephone-keypad] 1fr
-  ;
+    'controls' / [telephone-keypad] 1fr;
   line-height: 20px;
   padding: 8px;
   position: relative;
 
   &:has(.sendbox__attachment--in-grid) {
-    --webchat-sendbox-attachment-area-active: 'attachment'
+    --webchat-sendbox-attachment-area-active: 'attachment';
   }
 
   &:focus-within {
@@ -48,7 +47,7 @@
     border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);
     bottom: -1px;
     clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
-    content: "";
+    content: '';
     height: var(--webchat-sendbox-border-radius);
     left: -1px;
     position: absolute;

package/src/components/sendBox/TextArea.module.css

@@ -44,17 +44,17 @@
 
   /* Chrome, Edge, and Safari */
   &::-webkit-scrollbar {
-    width: 8px
+    width: 8px;
   }
 
   &::-webkit-scrollbar-track {
     background-color: var(--webchat-colorNeutralBackground5);
-    border-radius: 16px
+    border-radius: 16px;
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--webchat-colorNeutralForeground2);
-    border-radius: 16px
+    border-radius: 16px;
   }
 
   &::-webkit-scrollbar-corner {

package/src/components/sendBox/Toolbar.module.css

@@ -31,16 +31,16 @@
   }
 
   @media (hover: hover) {
-    &:not([aria-disabled="true"]):hover {
+    &:not([aria-disabled='true']):hover {
       color: var(--webchat-colorNeutralForeground2BrandHover);
     }
   }
 
-  &:not([aria-disabled="true"]):active {
+  &:not([aria-disabled='true']):active {
     color: var(--webchat-colorNeutralForeground2BrandPressed);
   }
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     color: var(--webchat-colorNeutralForegroundDisabled);
     cursor: not-allowed;
   }
@@ -51,7 +51,9 @@
   border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);
   height: 28px;
 
-  &:first-child, &:last-child, &:only-child {
-    display: none
+  &:first-child,
+  &:last-child,
+  &:only-child {
+    display: none;
   }
 }

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -14,18 +14,18 @@
   transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 
   @media (hover: hover) {
-    &:not([aria-disabled="true"]):hover {
+    &:not([aria-disabled='true']):hover {
       background-color: var(--webchat-colorBrandBackground2Hover);
-      color: var(--webchat-colorBrandForeground2Hover)
+      color: var(--webchat-colorBrandForeground2Hover);
     }
   }
-  &:not([aria-disabled="true"]):active {
+  &:not([aria-disabled='true']):active {
     background-color: var(--webchat-colorBrandBackground2Pressed);
-    color: var(--webchat-colorBrandForeground2Pressed)
+    color: var(--webchat-colorBrandForeground2Pressed);
   }
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     color: var(--webchat-colorNeutralForegroundDisabled);
-    cursor: not-allowed
+    cursor: not-allowed;
   }
 }
 

package/src/components/suggestedActions/SuggestedActions.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .suggested-actions {
   align-items: flex-end;
   align-self: flex-end;
@@ -8,7 +7,7 @@
 
   &:not(:empty) {
     padding-block-end: 8px;
-    padding-inline-start: 4px
+    padding-inline-start: 4px;
   }
 
   &.suggested-actions--flow {
@@ -18,6 +17,6 @@
   }
 
   &.suggested-actions--stacked {
-    flex-direction: column
+    flex-direction: column;
   }
 }

package/src/components/telephoneKeypad/private/Button.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .telephone-keypad__button {
   -webkit-user-select: none;
   align-items: center;
@@ -28,7 +27,7 @@
 
   &:hover {
     /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
-    background-color: var(--webchat-colorGray30)
+    background-color: var(--webchat-colorGray30);
   }
 }
 
@@ -49,7 +48,7 @@
     justify-content: center;
     margin: 8px 4px;
     width: 32px;
-  };
+  }
 
   .telephone-keypad__button__ruby {
     display: none;

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .telephone-keypad {
   /* Commented out whitelabel styles for now. */
   /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */

package/src/components/theme/Theme.module.css

@@ -97,8 +97,27 @@
   --webchat-spacingVerticalXXXL: var(--spacingVerticalXXXL, 32px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
-  --webchat-fontFamilyBase: var(--fontFamilyBase, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
-  --webchat-fontFamilyNumeric: var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
+  --webchat-fontFamilyBase: var(
+    --fontFamilyBase,
+    'Segoe UI',
+    'Segoe UI Web (West European)',
+    -apple-system,
+    BlinkMacSystemFont,
+    Roboto,
+    'Helvetica Neue',
+    sans-serif
+  );
+  --webchat-fontFamilyNumeric: var(
+    --fontFamilyNumeric,
+    Bahnschrift,
+    'Segoe UI',
+    'Segoe UI Web (West European)',
+    -apple-system,
+    BlinkMacSystemFont,
+    Roboto,
+    'Helvetica Neue',
+    sans-serif
+  );
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
   --webchat-fontWeightRegular: var(--fontWeightRegular, 400);
@@ -143,8 +162,8 @@
   --webchat-durationUltraSlow: var(--durationUltraSlow, 500ms);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts */
-  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
-  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
+  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1, 0, 1, 1));
+  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0, 0, 0, 1));
 }
 
 @media (prefers-reduced-motion) {
@@ -167,22 +186,17 @@
   --webchat__max-width--bubble: var(--webchat-bubble-maxWidth);
   --webchat__min-height--bubble: var(--webchat-bubble-minHeight);
   --webchat__padding--regular: var(--webchat-spacingVerticalS);
-  --webchat__padding--sendbox:
-    var(--webchat-spacingVerticalNone)
-    var(--webchat-spacingHorizontalMNudge)
+  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalMNudge)
     var(--webchat-spacingHorizontalMNudge);
 
-  --webchat__border-animation--color-1: #464FEB;
-  --webchat__border-animation--color-2: #47CFFA;
-  --webchat__border-animation--color-3: #B47CF8;
+  --webchat__border-animation--color-1: #464feb;
+  --webchat__border-animation--color-2: #47cffa;
+  --webchat__border-animation--color-3: #b47cf8;
 }
 
 :global(.webchat-fluent).theme.variant-copilot :global(.webchat__css-custom-properties) {
-  --webchat__padding--sendbox:
-    var(--webchat-spacingVerticalNone)
-    var(--webchat-spacingHorizontalXL)
-    var(--webchat-spacingVerticalMNudge)
-    var(--webchat-spacingHorizontalMNudge);
+  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalXL)
+    var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalMNudge);
 }
 
 /* Transcript surface */
@@ -230,23 +244,31 @@
   }
 }
 
-:global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
+:global(.webchat-fluent).theme.variant-copilot
+  :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
   scrollbar-gutter: stable;
 }
 
 /* Transcript focus indicator color when in focus-visible state */
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__terminator:focus-visible + .webchat__basic-transcript__focus-indicator) {
+:global(.webchat-fluent).theme
+  :global(
+    .webchat__basic-transcript
+    .webchat__basic-transcript__terminator:focus-visible
+    + .webchat__basic-transcript__focus-indicator
+  ) {
   border-color: var(--webchat-colorStrokeFocus2);
 }
 
 /* Transcript Activity indicator without focus-visible state */
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript:not(:focus-visible) .webchat__basic-transcript__activity-indicator--focus) {
+:global(.webchat-fluent).theme
+  :global(.webchat__basic-transcript:not(:focus-visible) .webchat__basic-transcript__activity-indicator--focus) {
   /* Hide activity focus when no focus-visible state */
   display: none;
 }
 
 /* Transcript Focus indicator when activity focused */
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) {
+:global(.webchat-fluent).theme
+  :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) {
   :global(.webchat__basic-transcript__focus-indicator) {
     /* Hide transcript focus when an activity is focused */
     display: none;
@@ -254,13 +276,17 @@
 }
 
 /* Transcript focused activity */
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript:focus-visible .webchat__basic-transcript__activity:has(.webchat__basic-transcript__activity-indicator--focus)) {
+:global(.webchat-fluent).theme
+  :global(
+    .webchat__basic-transcript:focus-visible
+    .webchat__basic-transcript__activity:has(.webchat__basic-transcript__activity-indicator--focus)
+  ) {
   :global(.webchat__basic-transcript__activity-indicator--focus) {
     /* Hide transcript activity focus when the activity is focused */
     display: none;
   }
 
-  :global(.webchat__bubble)::after, 
+  :global(.webchat__bubble)::after,
   :global(.pre-chat-message-activity)::after {
     border-radius: var(--webchat__bubble--border-radius);
     content: '';
@@ -290,7 +316,11 @@
 }
 
 /* Transcript with a single pre-chat activity */
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity) .webchat__basic-transcript__filler) {
+:global(.webchat-fluent).theme
+  :global(
+    .webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity)
+    .webchat__basic-transcript__filler
+  ) {
   /* limit grow to half of the size to center the activity */
   flex-grow: 0.5;
 }
@@ -367,7 +397,7 @@
     outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
   }
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     background: var(--webchat-colorNeutralBackgroundDisabled);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStrokeDisabled);
     color: var(--webchat-colorNeutralForegroundDisabled);