Merge branch 'main' into users/lexitaylor/fix-stricttype

lexi-taylor · web-flow · commit 575470f9f8cc · 2025-09-17T09:04:30.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -301,6 +301,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed [#5520](https://github.com/microsoft/BotFramework-WebChat/issues/5520). Version information should be injected when installed via npm, in PR [#5521](https://github.com/microsoft/BotFramework-WebChat/pull/5521), by [@compulim](https://github.com/compulim)
 - Fixed aria-label only announcing placeholder in feedback form, in PR [#5567](https://github.com/microsoft/BotFramework-WebChat/pull/5567)
 - Fixed placing focus on the code block content, so it is possible to scroll code via keyboard, in PR [#5575](https://github.com/microsoft/BotFramework-WebChat/pull/5575), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed [#5581](https://github.com/microsoft/BotFramework-WebChat/issues/5581). Activities should be displayed after upgrading via `npm install`, in PR [#5582](https://github.com/microsoft/BotFramework-WebChat/pull/5582), by [@compulim](https://github.com/compulim)
 
 ### Removed
 
diff --git a/biome.json b/biome.json
@@ -1,21 +1,19 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",
     "useIgnoreFile": true
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["**/dist"]
+    "includes": ["**", "!**/dist"]
   },
   "formatter": {
     "indentStyle": "space",
     "indentWidth": 2
   },
-  "organizeImports": {
-    "enabled": false
-  },
+  "assist": { "actions": { "source": { "organizeImports": "off" } } },
   "javascript": {
     "formatter": {
       "enabled": false
@@ -44,5 +42,12 @@
     "linter": {
       "enabled": true
     }
+  },
+  "linter": {
+    "rules": {
+      "style": {
+        "noDescendingSpecificity": "off"
+      }
+    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/api-middleware/package.json b/packages/api-middleware/package.json
@@ -89,7 +89,7 @@
   },
   "dependencies": {
     "handler-chain": "^0.1.0",
-    "react-chain-of-responsibility": "^0.4.0-main.c2f17da",
+    "react-chain-of-responsibility": "0.4.0-main.c2f17da",
     "react-wrap-with": "0.1.0",
     "valibot": "1.1.0"
   }
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -135,7 +135,7 @@
     "iter-fest": "0.3.0",
     "math-random": "2.0.1",
     "prop-types": "15.8.1",
-    "react-chain-of-responsibility": "^0.4.0-main.c2f17da",
+    "react-chain-of-responsibility": "0.4.0-main.c2f17da",
     "react-redux": "7.2.9",
     "redux": "5.0.1",
     "simple-update-in": "2.2.0",
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -137,7 +137,7 @@
     "merge-refs": "2.0.0",
     "prop-types": "15.8.1",
     "punycode": "2.3.1",
-    "react-chain-of-responsibility": "^0.4.0-main.c2f17da",
+    "react-chain-of-responsibility": "0.4.0-main.c2f17da",
     "react-dictate-button": "4.0.0",
     "react-film": "4.0.0",
     "react-redux": "7.2.9",
diff --git a/packages/component/src/Activity/CodeBlockContent.module.css b/packages/component/src/Activity/CodeBlockContent.module.css
@@ -1,6 +1,5 @@
 :global(.webchat) .code-block-content {
-  border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble)
-    var(--webchat__border-color--bubble);
+  border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) var(--webchat__border-color--bubble);
   border-radius: var(--webchat__border-radius--bubble);
   display: block;
   font-family: var(--webchat__font--primary);
@@ -9,8 +8,11 @@
   font-weight: 400;
   margin: 0 calc(var(--webchat__border-width--bubble) * -1) calc(var(--webchat__border-width--bubble) * -1);
   overflow: hidden;
-  overflow: clip;
   position: relative;
+
+  @supports (overflow: clip) {
+    overflow: clip;
+  }
 }
 
 :global(.webchat) .code-block-content__header {
diff --git a/packages/component/src/Activity/StackedLayout.module.css b/packages/component/src/Activity/StackedLayout.module.css
@@ -106,7 +106,7 @@
     color: var(--webchat__color--subtle);
     display: grid;
     font-size: 1.1em;
-    grid-template-areas: "message-status-icon";
+    grid-template-areas: 'message-status-icon';
     margin-block: calc(var(--webchat__padding--regular) + 1px);
     margin-inline-start: var(--webchat__padding--regular);
     place-self: start;
@@ -193,12 +193,12 @@
     .stacked-layout__bubble {
       grid-template: 'content' 1fr / 1fr;
     }
-    
+
     .stacked-layout__message-status {
       display: none;
     }
-    
-    &:has(.stacked-layout__message-status--final), 
+
+    &:has(.stacked-layout__message-status--final),
     &:has(.stacked-layout__message-status--incomplete) {
       .stacked-layout__bubble {
         grid-template:
diff --git a/packages/component/src/Activity/private/MessageStatusLoader.module.css b/packages/component/src/Activity/private/MessageStatusLoader.module.css
@@ -8,7 +8,8 @@
 }
 
 @keyframes message-status-loader__pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.3;
   }
   50% {
diff --git a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
@@ -57,4 +57,3 @@
   color: var(--webchat__color--subtle);
   line-height: 20px;
 }
-
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
@@ -41,7 +41,9 @@
   margin: calc(var(--webchat__padding--regular) / -2);
   overflow: clip;
   padding: calc(var(--webchat__padding--regular) / 2);
-  transition: visibility 0s, height 0.2s ease;
+  transition:
+    visibility 0s,
+    height 0.2s ease;
   visibility: hidden;
 }
 
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css
@@ -2,4 +2,4 @@
   .part-grouping-activity__activities {
     padding-block: 0 var(--webchat__padding--regular);
   }
-}
+}
diff --git a/packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.module.css b/packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.module.css
@@ -7,7 +7,9 @@
 
   &.send-box-attachment-bar-item--as-list-item {
     border-radius: 4px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0px 2px 4px rgba(0, 0, 0, 0.14),
+      0px 0px 2px rgba(0, 0, 0, 0.12);
     grid-template-areas: 'body auxiliary';
     grid-template-columns: 1fr auto;
     padding: 2px;
diff --git a/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css b/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css
@@ -4,7 +4,7 @@
   display: grid;
   grid-template-areas: 'content';
   outline: 0;
-  
+
   --webchat__transcript--spacing: 10px;
 
   .transcript-focus-area__indicator,
@@ -24,16 +24,21 @@
     min-width: 0;
   }
 
-  &:focus .transcript-focus-area__content--focused > .transcript-focus-area__content-overlay .transcript-focus-area__indicator {
+  &:focus
+    .transcript-focus-area__content--focused
+    > .transcript-focus-area__content-overlay
+    .transcript-focus-area__indicator {
     border-color: var(--webchat__color--transcript-activity-visual-keyboard-indicator);
     border-style: var(--webchat__border-style--transcript-activity-visual-keyboard-indicator);
     border-width: var(--webchat__border-width--transcript-activity-visual-keyboard-indicator);
-    inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2) calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2);
+    inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2)
+      calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2);
     position: absolute;
   }
 
   &:focus-visible .transcript-focus-area__transcript-indicator,
-  .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + .transcript-focus-area__transcript-indicator {
+  .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible)
+    + .transcript-focus-area__transcript-indicator {
     border-color: var(--webchat__border-color--transcript-visual-keyboard-indicator);
     border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
     border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
diff --git a/packages/component/src/decorator/private/BorderFlair.module.css b/packages/component/src/decorator/private/BorderFlair.module.css
@@ -104,15 +104,17 @@
     var(--webchat-decorator-borderFlair-animated-color2),
     var(--webchat-decorator-borderFlair-animated-color3)
   );
-  --webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box,
-    linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box;
+  --webchat-decorator-borderFlair-borderMask:
+    linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box, linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%))
+    border-box;
 
   animation:
     borderAnimation-angle 2000ms linear 0ms forwards,
     borderAnimation-color1 1200ms linear 0ms forwards,
     borderAnimation-color2 1200ms linear 200ms forwards,
     borderAnimation-color3 1200ms linear 400ms forwards;
-  background: var(--webchat-decorator-borderFlair-borderGradient) center center /
+  background:
+    var(--webchat-decorator-borderFlair-borderGradient) center center /
     var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
   border: var(--webchat-decorator-borderFlair-borderSize) solid transparent;
   border-radius: inherit;
diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css
@@ -31,7 +31,7 @@
   outline-offset: -2px;
 }
 
-:global(.webchat) .code-block-copy-button[aria-disabled="true"] {
+:global(.webchat) .code-block-copy-button[aria-disabled='true'] {
   background: #f0f0f0;
   border: 1px solid #e0e0e0;
   color: #bdbdbd;
diff --git a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
@@ -56,7 +56,9 @@
     padding-block: var(--webchat-spacingVerticalS);
   }
   /* Hide duplicate bot headers */
-  &.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) .part-grouping-decorator__header {
+  &.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header)
+    + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header)
+    .part-grouping-decorator__header {
     display: none;
   }
   /* #region Collapsible grouping */
@@ -152,7 +154,7 @@
     display: flex;
     flex-flow: column nowrap;
     margin-inline: var(--webchat-spacingHorizontalMNudge);
-    
+
     :global(.stacked-layout) {
       margin-inline: var(--webchat-spacingHorizontalNone);
       position: static;
@@ -208,7 +210,6 @@
     box-shadow: unset;
   }
 
-
   /* Message bubble content */
   :global(.stacked-layout .webchat__bubble .webchat__bubble__content) {
     background-color: var(--webchat__bubble--background-color);
@@ -258,20 +259,20 @@
     font-weight: var(--webchat-fontWeightRegular);
     margin-block: 0;
     margin-inline: var(--webchat__bubble--inline-padding);
-  
+
     :global(.code-block-content__header) {
       padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL);
     }
-  
+
     :global(.code-block-content__code-block) {
       padding-block: var(--webchat-spacingVerticalM);
       padding-inline: var(--webchat-spacingHorizontalL) var(--webchat-spacingHorizontalS);
     }
-  
+
     :global(.code-block-copy-button) {
       --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
       --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
-  
+
       margin-block-start: var(--webchat-spacingVerticalM);
       margin-inline-end: var(--webchat-spacingHorizontalL);
       position: absolute;
@@ -294,25 +295,26 @@
         outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
       }
     }
-  
+
     :global(.collapsible-content__content) {
       margin-block: var(--webchat-spacingVerticalNone) var(--webchat__bubble--block-padding);
     }
-  
+
     :global(.collapsible-content__content .stacked-layout__attachment-list) {
       gap: var(--webchat-spacingVerticalS);
     }
-  
+
     :global(.collapsible-content__content .stacked-layout__attachment-row) {
       margin: 0;
     }
-  
+
     :global(.collapsible-content__content .stacked-layout__attachment-row .webchat__text-content) {
       padding-block: 0;
     }
   }
- 
-  &.part-grouping-decorator--group  :global(.stacked-layout .webchat__bubble .collapsible-content .collapsible-content__content) {
+
+  &.part-grouping-decorator--group
+    :global(.stacked-layout .webchat__bubble .collapsible-content .collapsible-content__content) {
     margin-block: var(--webchat__bubble--block-padding) var(--webchat-spacingVerticalNone);
   }
 }
@@ -326,10 +328,11 @@
     padding-block: var(--webchat__bubble--block-padding);
     padding-inline: var(--webchat__bubble--inline-padding);
     position: relative;
-    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid), 
+    transition:
+      background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid),
       box-shadow var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   }
-  
+
   &.part-grouping-decorator--group:has(:global(.collapsible-grouping--open)) :global(.collapsible-grouping) {
     background-color: var(--webchat__bubble--background-color);
     box-shadow: var(--webchat__bubble--box-shadow);
@@ -364,7 +367,8 @@
     padding-block: var(--webchat-spacingVerticalS);
   }
 
-  &:where(:not(.part-grouping-decorator--group).part-grouping-decorator--from-bot) :global(.webchat__bubble .webchat__bubble__content) {
+  &:where(:not(.part-grouping-decorator--group).part-grouping-decorator--from-bot)
+    :global(.webchat__bubble .webchat__bubble__content) {
     background-color: var(--webchat__bubble--background-color);
     border-radius: var(--webchat__bubble--border-radius);
     box-shadow: var(--webchat__bubble--box-shadow);
@@ -429,7 +433,7 @@
 
   &.part-grouping-decorator--from-bot {
     margin-inline-end: var(--webchat-spacingHorizontalXXL);
-    
+
     :global(.stacked-layout) {
       margin: 0;
       position: static;
@@ -466,7 +470,8 @@
     }
   }
 
-  &:not(.part-grouping-decorator--group) :global(.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content) {
+  &:not(.part-grouping-decorator--group)
+    :global(.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content) {
     anchor-name: --webchat-flair;
     max-width: unset;
   }
diff --git a/packages/fluent-theme/src/components/sendBox/SendBox.module.css b/packages/fluent-theme/src/components/sendBox/SendBox.module.css
@@ -105,9 +105,10 @@
     background-color: var(--webchat-colorNeutralBackground1);
     border-radius: var(--webchat-borderRadiusMedium);
     color: var(--webchat-colorNeutralForeground1);
-    transition: background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), color
-      var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), opacity var(--webchat-durationUltraFast)
-      var(--webchat-curveAccelerateMid);
+    transition:
+      background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid),
+      color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid),
+      opacity var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);
 
     &:hover {
       background-color: var(--webchat-colorNeutralBackground1Hover);
diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@`
`89`	`89`	`},`
`90`	`90`	`"dependencies": {`
`91`	`91`	`"handler-chain": "^0.1.0",`
`92`		`- "react-chain-of-responsibility": "^0.4.0-main.c2f17da",`
	`92`	`+ "react-chain-of-responsibility": "0.4.0-main.c2f17da",`
`93`	`93`	`"react-wrap-with": "0.1.0",`
`94`	`94`	`"valibot": "1.1.0"`
`95`	`95`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,8 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`@keyframes message-status-loader__pulse {`
`11`		`- 0%, 100% {`
	`11`	`+ 0%,`
	`12`	`+ 100% {`
`12`	`13`	`opacity: 0.3;`
`13`	`14`	`}`
`14`	`15`	`50% {`
Original file line number	Diff line number	Diff line change
`@@ -57,4 +57,3 @@`
`57`	`57`	`color: var(--webchat__color--subtle);`
`58`	`58`	`line-height: 20px;`
`59`	`59`	`}`
`60`		`-`