diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f1965b5ff..c500809615 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -101,6 +101,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/ - Resolved [#5463](https://github.com/microsoft/BotFramework-WebChat/issues/5463). Added attachment preview for `sendAttachmentOn: "send"`, in PR [#5464](https://github.com/microsoft/BotFramework-WebChat/pull/5464), by [@compulim](https://github.com/compulim), in PR [#5492](https://github.com/microsoft/BotFramework-WebChat/pull/5492), by [@OEvgeny](https://github.com/OEvgeny) - Attaching files will no longer remove previously attached files - Updated Fluent theme to use the new attachment preview feature +- Added collapsible activity and activity with abstract handling, in PR [#5506](https://github.com/microsoft/BotFramework-WebChat/pull/5506), by [@OEvgeny](https://github.com/OEvgeny) ### Changed diff --git a/__tests__/__image_snapshots__/html/avatar-empty-initials-js-avatar-with-empty-initials-should-leave-gutter-space-1-snap.png b/__tests__/__image_snapshots__/html/avatar-empty-initials-js-avatar-with-empty-initials-should-leave-gutter-space-1-snap.png index 0bd9e5fb0a..917f25e1ee 100644 Binary files a/__tests__/__image_snapshots__/html/avatar-empty-initials-js-avatar-with-empty-initials-should-leave-gutter-space-1-snap.png and b/__tests__/__image_snapshots__/html/avatar-empty-initials-js-avatar-with-empty-initials-should-leave-gutter-space-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-1-snap.png b/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-1-snap.png index fbe057cb8b..2d0912d78a 100644 Binary files a/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-1-snap.png and b/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-2-snap.png b/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-2-snap.png index 23f08ef8f2..fb8327d312 100644 Binary files a/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-2-snap.png and b/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-3-snap.png b/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-3-snap.png index fbe057cb8b..2d0912d78a 100644 Binary files a/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-3-snap.png and b/__tests__/__image_snapshots__/html/citation-accordion-js-citation-accordion-should-expand-and-collapse-on-click-3-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-basic-js-citation-should-display-1-snap.png b/__tests__/__image_snapshots__/html/citation-basic-js-citation-should-display-1-snap.png index b6c206b27e..56cb46a576 100644 Binary files a/__tests__/__image_snapshots__/html/citation-basic-js-citation-should-display-1-snap.png and b/__tests__/__image_snapshots__/html/citation-basic-js-citation-should-display-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-show-modal-close-button-js-citation-modal-dialog-should-close-when-clicking-on-close-button-2-snap.png b/__tests__/__image_snapshots__/html/citation-show-modal-close-button-js-citation-modal-dialog-should-close-when-clicking-on-close-button-2-snap.png index 7216d2c56e..1db6689d65 100644 Binary files a/__tests__/__image_snapshots__/html/citation-show-modal-close-button-js-citation-modal-dialog-should-close-when-clicking-on-close-button-2-snap.png and b/__tests__/__image_snapshots__/html/citation-show-modal-close-button-js-citation-modal-dialog-should-close-when-clicking-on-close-button-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-show-modal-close-escape-js-citation-modal-dialog-should-close-when-escape-key-is-pressed-2-snap.png b/__tests__/__image_snapshots__/html/citation-show-modal-close-escape-js-citation-modal-dialog-should-close-when-escape-key-is-pressed-2-snap.png index 7216d2c56e..1db6689d65 100644 Binary files a/__tests__/__image_snapshots__/html/citation-show-modal-close-escape-js-citation-modal-dialog-should-close-when-escape-key-is-pressed-2-snap.png and b/__tests__/__image_snapshots__/html/citation-show-modal-close-escape-js-citation-modal-dialog-should-close-when-escape-key-is-pressed-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-1-snap.png b/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-1-snap.png index 93c24c8b91..d1933e2010 100644 Binary files a/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-1-snap.png and b/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-2-snap.png b/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-2-snap.png index f0f84e5d7b..acd70791ae 100644 Binary files a/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-2-snap.png and b/__tests__/__image_snapshots__/html/citation-show-modal-width-desktop-js-citation-modal-dialog-should-show-60-on-desktop-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/citation-show-modal-width-mobile-js-citation-modal-dialog-should-show-full-width-on-mobile-device-1-snap.png b/__tests__/__image_snapshots__/html/citation-show-modal-width-mobile-js-citation-modal-dialog-should-show-full-width-on-mobile-device-1-snap.png index fbe057cb8b..2d0912d78a 100644 Binary files a/__tests__/__image_snapshots__/html/citation-show-modal-width-mobile-js-citation-modal-dialog-should-show-full-width-on-mobile-device-1-snap.png and b/__tests__/__image_snapshots__/html/citation-show-modal-width-mobile-js-citation-modal-dialog-should-show-full-width-on-mobile-device-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/hooks-use-create-activity-renderer-js-use-create-activity-renderer-should-render-activity-1-snap.png b/__tests__/__image_snapshots__/html/hooks-use-create-activity-renderer-js-use-create-activity-renderer-should-render-activity-1-snap.png index d779ff6c34..845293a827 100644 Binary files a/__tests__/__image_snapshots__/html/hooks-use-create-activity-renderer-js-use-create-activity-renderer-should-render-activity-1-snap.png and b/__tests__/__image_snapshots__/html/hooks-use-create-activity-renderer-js-use-create-activity-renderer-should-render-activity-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/identifier-as-string-js-link-definition-should-display-identifier-of-type-string-1-snap.png b/__tests__/__image_snapshots__/html/identifier-as-string-js-link-definition-should-display-identifier-of-type-string-1-snap.png index fe21654123..eaafa7bf45 100644 Binary files a/__tests__/__image_snapshots__/html/identifier-as-string-js-link-definition-should-display-identifier-of-type-string-1-snap.png and b/__tests__/__image_snapshots__/html/identifier-as-string-js-link-definition-should-display-identifier-of-type-string-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/reference-js-link-definition-should-reference-sample-1-snap.png b/__tests__/__image_snapshots__/html/reference-js-link-definition-should-reference-sample-1-snap.png index 3b86fd82cd..b4cac0b886 100644 Binary files a/__tests__/__image_snapshots__/html/reference-js-link-definition-should-reference-sample-1-snap.png and b/__tests__/__image_snapshots__/html/reference-js-link-definition-should-reference-sample-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/timestamp-prepend-text-js-timestamp-prepend-text-1-snap.png b/__tests__/__image_snapshots__/html/timestamp-prepend-text-js-timestamp-prepend-text-1-snap.png index 2f7d3f0f59..6e13263636 100644 Binary files a/__tests__/__image_snapshots__/html/timestamp-prepend-text-js-timestamp-prepend-text-1-snap.png and b/__tests__/__image_snapshots__/html/timestamp-prepend-text-js-timestamp-prepend-text-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/wrap-zero-width-space-js-link-definition-should-word-wrap-pure-identifier-to-next-line-but-not-text-content-1-snap.png b/__tests__/__image_snapshots__/html/wrap-zero-width-space-js-link-definition-should-word-wrap-pure-identifier-to-next-line-but-not-text-content-1-snap.png index d1f7c75ee1..b8288dd9d6 100644 Binary files a/__tests__/__image_snapshots__/html/wrap-zero-width-space-js-link-definition-should-word-wrap-pure-identifier-to-next-line-but-not-text-content-1-snap.png and b/__tests__/__image_snapshots__/html/wrap-zero-width-space-js-link-definition-should-word-wrap-pure-identifier-to-next-line-but-not-text-content-1-snap.png differ diff --git a/__tests__/html/accessibility.activity.stackedLayoutRole.html b/__tests__/html/accessibility.activity.stackedLayoutRole.html index dec84de3e5..261e48e5b7 100644 --- a/__tests__/html/accessibility.activity.stackedLayoutRole.html +++ b/__tests__/html/accessibility.activity.stackedLayoutRole.html @@ -23,7 +23,7 @@ await pageConditions.minNumActivitiesShown(2); await pageConditions.scrollToBottomCompleted(); - const messageRole = document.querySelector('.webchat__stacked-layout__message-row').getAttribute('role'); + const messageRole = document.querySelector('.stacked-layout__message-row').getAttribute('role'); expect(messageRole).toEqual('group'); }); diff --git a/__tests__/html2/activity/citation.longRef.copilot.html.snap-1.png b/__tests__/html2/activity/citation.longRef.copilot.html.snap-1.png index 7859598853..bb3429b99e 100644 Binary files a/__tests__/html2/activity/citation.longRef.copilot.html.snap-1.png and b/__tests__/html2/activity/citation.longRef.copilot.html.snap-1.png differ diff --git a/__tests__/html2/activity/citation.longRef.fluent.html.snap-1.png b/__tests__/html2/activity/citation.longRef.fluent.html.snap-1.png index 136078ce33..36bdadf762 100644 Binary files a/__tests__/html2/activity/citation.longRef.fluent.html.snap-1.png and b/__tests__/html2/activity/citation.longRef.fluent.html.snap-1.png differ diff --git a/__tests__/html2/activity/citation.longRef.html.snap-1.png b/__tests__/html2/activity/citation.longRef.html.snap-1.png index 1bddc38fc4..107c6e799d 100644 Binary files a/__tests__/html2/activity/citation.longRef.html.snap-1.png and b/__tests__/html2/activity/citation.longRef.html.snap-1.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html b/__tests__/html2/activity/collapsible.copilot.dark.html new file mode 100644 index 0000000000..0c9e65dc3e --- /dev/null +++ b/__tests__/html2/activity/collapsible.copilot.dark.html @@ -0,0 +1,10 @@ + + + + Collapsible activity (copilot, dark) + + + + diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-1.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-1.png new file mode 100644 index 0000000000..b7de5590ae Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-1.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-2.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-2.png new file mode 100644 index 0000000000..374226460d Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-2.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-3.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-3.png new file mode 100644 index 0000000000..9dadab4c13 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-3.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-4.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-4.png new file mode 100644 index 0000000000..9adcfc1cae Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-4.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-5.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-5.png new file mode 100644 index 0000000000..d1ccec647d Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-5.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-6.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-6.png new file mode 100644 index 0000000000..3eeccebf26 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-6.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.dark.html.snap-7.png b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-7.png new file mode 100644 index 0000000000..45fc0d436f Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.dark.html.snap-7.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html b/__tests__/html2/activity/collapsible.copilot.html new file mode 100644 index 0000000000..f85a38ee7b --- /dev/null +++ b/__tests__/html2/activity/collapsible.copilot.html @@ -0,0 +1,10 @@ + + + + Collapsible activity (copilot) + + + + diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-1.png b/__tests__/html2/activity/collapsible.copilot.html.snap-1.png new file mode 100644 index 0000000000..dd96f0ff4c Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-1.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-2.png b/__tests__/html2/activity/collapsible.copilot.html.snap-2.png new file mode 100644 index 0000000000..f817786dc4 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-2.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-3.png b/__tests__/html2/activity/collapsible.copilot.html.snap-3.png new file mode 100644 index 0000000000..dad6b1e2f5 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-3.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-4.png b/__tests__/html2/activity/collapsible.copilot.html.snap-4.png new file mode 100644 index 0000000000..a7285ff5e9 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-4.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-5.png b/__tests__/html2/activity/collapsible.copilot.html.snap-5.png new file mode 100644 index 0000000000..e325e72b39 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-5.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-6.png b/__tests__/html2/activity/collapsible.copilot.html.snap-6.png new file mode 100644 index 0000000000..80db2e9d31 Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-6.png differ diff --git a/__tests__/html2/activity/collapsible.copilot.html.snap-7.png b/__tests__/html2/activity/collapsible.copilot.html.snap-7.png new file mode 100644 index 0000000000..435e1bdc7b Binary files /dev/null and b/__tests__/html2/activity/collapsible.copilot.html.snap-7.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html b/__tests__/html2/activity/collapsible.fluent.dark.html new file mode 100644 index 0000000000..07a7b81c77 --- /dev/null +++ b/__tests__/html2/activity/collapsible.fluent.dark.html @@ -0,0 +1,10 @@ + + + + Collapsible activity (fluent, dark) + + + + diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-1.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-1.png new file mode 100644 index 0000000000..c870e0b672 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-2.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-2.png new file mode 100644 index 0000000000..5fb8d88dc9 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-2.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-3.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-3.png new file mode 100644 index 0000000000..64ff9f67b7 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-3.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-4.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-4.png new file mode 100644 index 0000000000..e99da75c4c Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-4.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-5.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-5.png new file mode 100644 index 0000000000..c39408f065 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-5.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-6.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-6.png new file mode 100644 index 0000000000..164bb6c62d Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-6.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.dark.html.snap-7.png b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-7.png new file mode 100644 index 0000000000..823a1ffe13 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.dark.html.snap-7.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html b/__tests__/html2/activity/collapsible.fluent.html new file mode 100644 index 0000000000..ac9f765458 --- /dev/null +++ b/__tests__/html2/activity/collapsible.fluent.html @@ -0,0 +1,10 @@ + + + + Collapsible activity (fluent) + + + + diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-1.png b/__tests__/html2/activity/collapsible.fluent.html.snap-1.png new file mode 100644 index 0000000000..464f6e9bb5 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-1.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-2.png b/__tests__/html2/activity/collapsible.fluent.html.snap-2.png new file mode 100644 index 0000000000..bf71dfcb0e Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-2.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-3.png b/__tests__/html2/activity/collapsible.fluent.html.snap-3.png new file mode 100644 index 0000000000..a2bab4630a Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-3.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-4.png b/__tests__/html2/activity/collapsible.fluent.html.snap-4.png new file mode 100644 index 0000000000..27690c0c62 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-4.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-5.png b/__tests__/html2/activity/collapsible.fluent.html.snap-5.png new file mode 100644 index 0000000000..97a967c451 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-5.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-6.png b/__tests__/html2/activity/collapsible.fluent.html.snap-6.png new file mode 100644 index 0000000000..ea8ee74446 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-6.png differ diff --git a/__tests__/html2/activity/collapsible.fluent.html.snap-7.png b/__tests__/html2/activity/collapsible.fluent.html.snap-7.png new file mode 100644 index 0000000000..8d527eb3f5 Binary files /dev/null and b/__tests__/html2/activity/collapsible.fluent.html.snap-7.png differ diff --git a/__tests__/html2/activity/collapsible.html b/__tests__/html2/activity/collapsible.html new file mode 100644 index 0000000000..9a210902b8 --- /dev/null +++ b/__tests__/html2/activity/collapsible.html @@ -0,0 +1,377 @@ + + + + Collapsible activity + + + + + + + + + + +
+ + + diff --git a/__tests__/html2/activity/collapsible.html.snap-1.png b/__tests__/html2/activity/collapsible.html.snap-1.png new file mode 100644 index 0000000000..d62520fd80 Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-1.png differ diff --git a/__tests__/html2/activity/collapsible.html.snap-2.png b/__tests__/html2/activity/collapsible.html.snap-2.png new file mode 100644 index 0000000000..056ca3cf98 Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-2.png differ diff --git a/__tests__/html2/activity/collapsible.html.snap-3.png b/__tests__/html2/activity/collapsible.html.snap-3.png new file mode 100644 index 0000000000..a04cc87f73 Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-3.png differ diff --git a/__tests__/html2/activity/collapsible.html.snap-4.png b/__tests__/html2/activity/collapsible.html.snap-4.png new file mode 100644 index 0000000000..d86e33447c Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-4.png differ diff --git a/__tests__/html2/activity/collapsible.html.snap-5.png b/__tests__/html2/activity/collapsible.html.snap-5.png new file mode 100644 index 0000000000..63bd4aaf0d Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-5.png differ diff --git a/__tests__/html2/activity/collapsible.html.snap-6.png b/__tests__/html2/activity/collapsible.html.snap-6.png new file mode 100644 index 0000000000..d29b572aa2 Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-6.png differ diff --git a/__tests__/html2/activity/collapsible.html.snap-7.png b/__tests__/html2/activity/collapsible.html.snap-7.png new file mode 100644 index 0000000000..e27f580c4e Binary files /dev/null and b/__tests__/html2/activity/collapsible.html.snap-7.png differ diff --git a/__tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png b/__tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png index f776a3f013..a97ba1db11 100644 Binary files a/__tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png and b/__tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png differ diff --git a/__tests__/html2/copyButton/layout.copilot.light.html.snap-1.png b/__tests__/html2/copyButton/layout.copilot.light.html.snap-1.png index 6f66f9cec8..ff858aa1bb 100644 Binary files a/__tests__/html2/copyButton/layout.copilot.light.html.snap-1.png and b/__tests__/html2/copyButton/layout.copilot.light.html.snap-1.png differ diff --git a/__tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png b/__tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png index fb01f1d405..f287cdf765 100644 Binary files a/__tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png and b/__tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/copyButton/layout.fluent.light.html.snap-1.png b/__tests__/html2/copyButton/layout.fluent.light.html.snap-1.png index d0fe3fd0dd..cb790d44f0 100644 Binary files a/__tests__/html2/copyButton/layout.fluent.light.html.snap-1.png and b/__tests__/html2/copyButton/layout.fluent.light.html.snap-1.png differ diff --git a/__tests__/html2/copyButton/layout.html.snap-1.png b/__tests__/html2/copyButton/layout.html.snap-1.png index dc9c22af94..779aa3507c 100644 Binary files a/__tests__/html2/copyButton/layout.html.snap-1.png and b/__tests__/html2/copyButton/layout.html.snap-1.png differ diff --git a/__tests__/html2/grouping/fluentTheme.html.snap-1.png b/__tests__/html2/grouping/fluentTheme.html.snap-1.png index 1b75147711..73dd6423d3 100644 Binary files a/__tests__/html2/grouping/fluentTheme.html.snap-1.png and b/__tests__/html2/grouping/fluentTheme.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/badge.copilot.html.snap-1.png b/__tests__/html2/linkDefinition/badge.copilot.html.snap-1.png index e7a67be551..2e012da221 100644 Binary files a/__tests__/html2/linkDefinition/badge.copilot.html.snap-1.png and b/__tests__/html2/linkDefinition/badge.copilot.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/badge.dark.copilot.html.snap-1.png b/__tests__/html2/linkDefinition/badge.dark.copilot.html.snap-1.png index e578aabd2c..57a7b5dabe 100644 Binary files a/__tests__/html2/linkDefinition/badge.dark.copilot.html.snap-1.png and b/__tests__/html2/linkDefinition/badge.dark.copilot.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/badge.dark.fluent.html.snap-1.png b/__tests__/html2/linkDefinition/badge.dark.fluent.html.snap-1.png index b79e5580cf..43ae9ee5f8 100644 Binary files a/__tests__/html2/linkDefinition/badge.dark.fluent.html.snap-1.png and b/__tests__/html2/linkDefinition/badge.dark.fluent.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/badge.fluent.html.snap-1.png b/__tests__/html2/linkDefinition/badge.fluent.html.snap-1.png index 12b93729b1..9c927f26e0 100644 Binary files a/__tests__/html2/linkDefinition/badge.fluent.html.snap-1.png and b/__tests__/html2/linkDefinition/badge.fluent.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/badge.html.snap-1.png b/__tests__/html2/linkDefinition/badge.html.snap-1.png index be49160843..123fff28db 100644 Binary files a/__tests__/html2/linkDefinition/badge.html.snap-1.png and b/__tests__/html2/linkDefinition/badge.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-1.png index 8b7e4b9cf6..807b5a8ea2 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-1.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-2.png index e7e5440d33..16dc68d8a3 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-2.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-3.png index 95f1da6630..e27b04fa70 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-3.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-4.png index cb2b12160b..48551dd3a6 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-4.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-5.png index 9a713e94c5..0f650e83a8 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-5.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-1.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-1.png index 44b45d91cf..4cfe1e26ec 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-1.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-2.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-2.png index 3198e1b222..05cc0f5a06 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-2.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-3.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-3.png index 36f326d572..36131a2d1b 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-3.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-4.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-4.png index 58d5f33439..9e57f27a48 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-4.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-5.png b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-5.png index 8f20fef79e..cfbe053e5f 100644 Binary files a/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-5.png and b/__tests__/html2/side-by-side/codeblock-dark.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-1.png index 0699a9345f..a4eb6c5c0c 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-1.png and b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-2.png index 4b1754af2f..2f4557feb7 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-2.png and b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-3.png index fab91d7d44..2af598e287 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-3.png and b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-4.png index 57c4290e20..bef46308d2 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-4.png and b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-5.png index 8de6ba6b24..644c0ba3c4 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-5.png and b/__tests__/html2/side-by-side/codeblock.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-1.png b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-1.png index e1bb757525..3d0ef226bf 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-1.png and b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-2.png b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-2.png index 7f769ef408..b68922bd01 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-2.png and b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-3.png b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-3.png index 9fe810ee93..338373a617 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-3.png and b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-4.png b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-4.png index b6ebcc5c51..9cae67f6de 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-4.png and b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-5.png b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-5.png index 8637dab26e..a3a97e0e8c 100644 Binary files a/__tests__/html2/side-by-side/codeblock.navigation.html.snap-5.png and b/__tests__/html2/side-by-side/codeblock.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-1.png index a97ddd1159..4f46ba2d28 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-1.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-2.png index d9fb86aa35..f211bb58e4 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-2.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-3.png index a4494c1bdb..94aec58fd9 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-3.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-4.png index 53749d9d06..27868edccc 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-4.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-5.png index 0f556df3e0..600d6d9341 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-5.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-6.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-6.png index 1bb4cddf33..0cae837259 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-6.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-7.png b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-7.png index fd2d5917a6..5988a87c9f 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-7.png and b/__tests__/html2/side-by-side/feedback.navigation.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-1.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-1.png index 01eb65abd2..96bd65c3af 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-1.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-2.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-2.png index 3177d9750b..e8b87c83c7 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-2.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-3.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-3.png index 4301641fb0..f8020b0d60 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-3.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-4.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-4.png index 6ff83c009d..9fc49e07be 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-4.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-5.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-5.png index 6ef3278099..4d7d6df34f 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-5.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-6.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-6.png index 678102d921..9eb0bb5b2d 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-6.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/feedback.navigation.html.snap-7.png b/__tests__/html2/side-by-side/feedback.navigation.html.snap-7.png index 655084751e..caf9681c7d 100644 Binary files a/__tests__/html2/side-by-side/feedback.navigation.html.snap-7.png and b/__tests__/html2/side-by-side/feedback.navigation.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/fluent.dark.html.snap-1.png b/__tests__/html2/side-by-side/fluent.dark.html.snap-1.png index bdfe639dbf..205933b357 100644 Binary files a/__tests__/html2/side-by-side/fluent.dark.html.snap-1.png and b/__tests__/html2/side-by-side/fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/fluent.html.snap-1.png b/__tests__/html2/side-by-side/fluent.html.snap-1.png index c642d27841..9a2b3eb9ad 100644 Binary files a/__tests__/html2/side-by-side/fluent.html.snap-1.png and b/__tests__/html2/side-by-side/fluent.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/index.html b/__tests__/html2/side-by-side/index.html index 5155b9c0ee..a122e554c7 100644 --- a/__tests__/html2/side-by-side/index.html +++ b/__tests__/html2/side-by-side/index.html @@ -846,7 +846,7 @@ await host.snapshot('local'); await host.sendKeys('ENTER'); // hide timestamp to not fail snapshot if is not relative - sendbox.parentElement.parentElement.parentElement.parentElement.querySelector('.webchat__basic-transcript__activity:last-child .webchat__stacked-layout__status').style.opacity = 0 + sendbox.parentElement.parentElement.parentElement.parentElement.querySelector('.webchat__basic-transcript__activity:last-child .stacked-layout__status').style.opacity = 0; await host.snapshot('local'); await host.sendShiftTab(); await host.snapshot('local'); diff --git a/__tests__/html2/side-by-side/index.html.snap-1.png b/__tests__/html2/side-by-side/index.html.snap-1.png index 29e70bb104..69eb06a12a 100644 Binary files a/__tests__/html2/side-by-side/index.html.snap-1.png and b/__tests__/html2/side-by-side/index.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-1.png index f82da9e604..24bc7b4b8c 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-1.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-2.png index 16f5c5a95d..7896b7e87f 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-2.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-3.png index 5a75af3970..3b61822a1d 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-3.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-4.png index a15f54acde..542adb5156 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-4.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-5.png index 6ca9c5577f..737687e141 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-5.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-6.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-6.png index fd0a4b497a..68f510a093 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-6.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-7.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-7.png index 6ca9c5577f..737687e141 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-7.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-8.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-8.png index 00b276cc6b..94d7e0ae8c 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-8.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-9.png b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-9.png index a5d594b93e..e0a83fac55 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-9.png and b/__tests__/html2/side-by-side/pre-chat.navigation.dark.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-1.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-1.png index 8127c4fe13..a535a8e600 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-1.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-2.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-2.png index 605200ce4c..e5af50873c 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-2.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-3.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-3.png index aa9f9cb555..bb6522a948 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-3.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-4.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-4.png index 64ec4008fd..2bbc789b32 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-4.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-5.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-5.png index 04b32c6811..5dc852556b 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-5.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-6.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-6.png index d88710b48f..5738c42a1e 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-6.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-7.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-7.png index 04b32c6811..5dc852556b 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-7.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-8.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-8.png index 5af9f92c23..0a284da14b 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-8.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-9.png b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-9.png index 25debe22d8..d90b5f9155 100644 Binary files a/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-9.png and b/__tests__/html2/side-by-side/pre-chat.navigation.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/pre-liner.dark.html.snap-1.png b/__tests__/html2/side-by-side/pre-liner.dark.html.snap-1.png index 973214cbd2..b33eb285ca 100644 Binary files a/__tests__/html2/side-by-side/pre-liner.dark.html.snap-1.png and b/__tests__/html2/side-by-side/pre-liner.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-liner.html.snap-1.png b/__tests__/html2/side-by-side/pre-liner.html.snap-1.png index 33e517af8c..3b57cefdd8 100644 Binary files a/__tests__/html2/side-by-side/pre-liner.html.snap-1.png and b/__tests__/html2/side-by-side/pre-liner.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/streaming.dark.html.snap-1.png b/__tests__/html2/side-by-side/streaming.dark.html.snap-1.png index f3cbffe80a..400e657e2f 100644 Binary files a/__tests__/html2/side-by-side/streaming.dark.html.snap-1.png and b/__tests__/html2/side-by-side/streaming.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/streaming.html b/__tests__/html2/side-by-side/streaming.html index 0696e04154..434f3461b9 100644 --- a/__tests__/html2/side-by-side/streaming.html +++ b/__tests__/html2/side-by-side/streaming.html @@ -1,9 +1,9 @@ - Two Chat panes side-by-side (dark): streaming (right) + Two Chat panes side-by-side: streaming (right) diff --git a/__tests__/html2/side-by-side/streaming.html.snap-1.png b/__tests__/html2/side-by-side/streaming.html.snap-1.png index f3cbffe80a..2f4d794377 100644 Binary files a/__tests__/html2/side-by-side/streaming.html.snap-1.png and b/__tests__/html2/side-by-side/streaming.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-1.png index 85e07320d8..ff18df302e 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-1.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-10.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-10.png index 4de0347c2a..29586475eb 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-10.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-10.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-11.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-11.png index a3d3706ecc..51740c1025 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-11.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-11.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-12.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-12.png index e775e73a1c..a4fd1d9848 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-12.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-12.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-13.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-13.png index fb78f31fe0..5266f5ea07 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-13.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-13.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-14.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-14.png index 2dcd63f441..a583c85783 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-14.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-14.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-15.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-15.png index 7ae71df301..435cf851b0 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-15.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-15.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-16.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-16.png index f04af2452e..c329427001 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-16.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-16.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-17.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-17.png index 5f398811b4..3d93c87bf2 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-17.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-17.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-2.png index 0395f5fe11..602e993073 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-2.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-3.png index 16bf0f3892..60bd9f649f 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-3.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-4.png index aaff144512..60a0667479 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-4.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-5.png index 90aee850d0..07acccca72 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-5.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-6.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-6.png index be21567518..60a95dffd0 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-6.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-7.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-7.png index 82991c2ec3..9e651c839a 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-7.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-8.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-8.png index e976183ec2..88c9ba7b07 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-8.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-9.png b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-9.png index 02fd2aef52..55aaa44781 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-9.png and b/__tests__/html2/side-by-side/transcript.navigation.dark.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-1.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-1.png index 2dc52381c6..0d87fe833c 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-1.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-2.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-2.png index e70e0b4f42..f3c970a37d 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-2.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-3.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-3.png index 3307580d44..daa9d14100 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-3.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-4.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-4.png index 7bdf340d4f..c41e41f743 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-4.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-5.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-5.png index c05e7500b6..8d81aa900b 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-5.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-6.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-6.png index 3966ce7ab1..300a034cea 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-6.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-7.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-7.png index 80666fe5eb..4bb85fcaa2 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-7.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-8.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-8.png index b141f8895b..2dbd5dc21c 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-8.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-9.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-9.png index d9ad2d375c..d3f7623286 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-9.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.dark.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-1.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-1.png index 5939d192ec..c936b91c3f 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-1.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-2.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-2.png index f206b5cce7..106a4b3579 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-2.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-3.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-3.png index 708092f74b..64d0cfd839 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-3.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-4.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-4.png index a6f2a388a9..8429ecaa0a 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-4.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-5.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-5.png index d0781de23c..b001c66976 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-5.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-6.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-6.png index 3cf695fe34..b8acff98a5 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-6.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-7.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-7.png index 14441398f0..72367d14dd 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-7.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-8.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-8.png index db3fdab62e..ffa4f9e165 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-8.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-9.png b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-9.png index e12b584e9f..079e262501 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-9.png and b/__tests__/html2/side-by-side/transcript.navigation.fluent.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-1.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-1.png index 87e0b58c68..1aaa4eaeff 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-1.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-10.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-10.png index 0a81efa8da..9bcecd2a8a 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-10.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-10.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-11.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-11.png index aba01d6eb7..2056f7e6a5 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-11.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-11.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-12.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-12.png index 9bc8359b01..78bfd6ec33 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-12.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-12.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-13.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-13.png index 19867e341e..286694eea4 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-13.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-13.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-14.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-14.png index edf9d42ccb..36540be3d4 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-14.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-14.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-15.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-15.png index 1d24813246..cd040bfdca 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-15.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-15.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-16.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-16.png index 02da561737..b0bd1ef414 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-16.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-16.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-17.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-17.png index c9517db67b..5cee1c5718 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-17.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-17.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-2.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-2.png index 07e294637c..5ac5c19eca 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-2.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-3.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-3.png index a3f8ba5217..8e2ae96481 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-3.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-4.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-4.png index c10f5fec90..c1d3603874 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-4.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-5.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-5.png index e0f3053c4f..b856049e13 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-5.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-6.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-6.png index c58c82a6bb..13fed46cb3 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-6.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-7.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-7.png index 365833bd7e..ce5b693e9e 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-7.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-8.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-8.png index b0107c2abc..fb31be2939 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-8.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.navigation.html.snap-9.png b/__tests__/html2/side-by-side/transcript.navigation.html.snap-9.png index da1336271e..b9d8c9f75f 100644 Binary files a/__tests__/html2/side-by-side/transcript.navigation.html.snap-9.png and b/__tests__/html2/side-by-side/transcript.navigation.html.snap-9.png differ diff --git a/packages/api/src/decorator.ts b/packages/api/src/decorator.ts index c8ec728dfc..069821c719 100644 --- a/packages/api/src/decorator.ts +++ b/packages/api/src/decorator.ts @@ -2,12 +2,14 @@ export { default as DecoratorComposer } from './decorator/DecoratorComposer'; export { type DecoratorMiddleware } from './decorator/types'; +export { default as useDecoratorRequest, type InferDecoratorRequest } from './decorator/useDecoratorRequest'; // ActivityBorderDecorator export { default as ActivityBorderDecorator, createActivityBorderMiddleware, + ActivityBorderDecoratorRequest, type ActivityBorderDecoratorProps } from './decorator/ActivityBorder/ActivityBorderDecorator'; diff --git a/packages/api/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx b/packages/api/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx index 0259910e6b..1d63a3f197 100644 --- a/packages/api/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx +++ b/packages/api/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx @@ -7,6 +7,7 @@ import { createActivityBorderMiddleware, type ActivityBorderDecoratorMiddlewareRequest } from './private/ActivityBorderDecoratorMiddleware'; +import ActivityBorderDecoratorRequestContext from './private/ActivityBorderDecoratorRequestContext'; const supportedActivityRoles: ActivityBorderDecoratorMiddlewareRequest['from'][] = [ 'bot', @@ -39,12 +40,17 @@ function ActivityBorderDecorator({ activity, children }: ActivityBorderDecorator }; }, [activity]); + const requestValue = useMemo(() => Object.freeze({ request }), [request]); + return ( - - {children} - + + + {children} + + ); } export default memo(ActivityBorderDecorator); export { createActivityBorderMiddleware, type ActivityBorderDecoratorProps }; +export { ActivityBorderDecoratorRequestContext as ActivityBorderDecoratorRequest }; diff --git a/packages/api/src/decorator/ActivityBorder/private/ActivityBorderDecoratorRequestContext.ts b/packages/api/src/decorator/ActivityBorder/private/ActivityBorderDecoratorRequestContext.ts new file mode 100644 index 0000000000..efa3e0f423 --- /dev/null +++ b/packages/api/src/decorator/ActivityBorder/private/ActivityBorderDecoratorRequestContext.ts @@ -0,0 +1,18 @@ +import { createContext } from 'react'; +import { ActivityBorderDecoratorMiddlewareRequest } from './ActivityBorderDecoratorMiddleware'; + +type ActivityBorderDecoratorRequestContextType = Readonly<{ + request: ActivityBorderDecoratorMiddlewareRequest; +}>; + +const ActivityBorderDecoratorRequestContext = createContext( + Object.freeze({ + request: Object.freeze({ + from: undefined, + livestreamingState: undefined + }) + }) +); + +export default ActivityBorderDecoratorRequestContext; +export { type ActivityBorderDecoratorRequestContextType }; diff --git a/packages/api/src/decorator/useDecoratorRequest.ts b/packages/api/src/decorator/useDecoratorRequest.ts new file mode 100644 index 0000000000..a5b832355b --- /dev/null +++ b/packages/api/src/decorator/useDecoratorRequest.ts @@ -0,0 +1,15 @@ +import { useContext } from 'react'; +import { ActivityBorderDecoratorRequest } from './ActivityBorder/ActivityBorderDecorator'; + +export default function useDecoratorRequest(type: typeof ActivityBorderDecoratorRequest) { + const request = useContext(type)?.request; + + if (!request) { + throw new Error(`useDecoratorRequest must be used within a ${type}Provider`); + } + + return request; +} + +export type InferDecoratorRequest = + T extends React.Context ? (U extends { request: infer R } ? R : never) : never; diff --git a/packages/bundle/src/module/exports-minimal.ts b/packages/bundle/src/module/exports-minimal.ts index 67da30cbac..260b445e80 100644 --- a/packages/bundle/src/module/exports-minimal.ts +++ b/packages/bundle/src/module/exports-minimal.ts @@ -1,6 +1,6 @@ import { StrictStyleOptions, StyleOptions } from 'botframework-webchat-api'; import * as apiDecorator from 'botframework-webchat-api/decorator'; -import { WebChatDecorator } from 'botframework-webchat-component/decorator'; +import * as componentDecorator from 'botframework-webchat-component/decorator'; import * as internal from 'botframework-webchat-component/internal'; import { Constants, createStore, createStoreWithDevTools, createStoreWithOptions } from 'botframework-webchat-core'; @@ -55,7 +55,7 @@ export default ReactWebChat; const decorator = Object.freeze({ ...apiDecorator, - WebChatDecorator + ...componentDecorator }); export { diff --git a/packages/component/src/Activity/AttachmentRow.tsx b/packages/component/src/Activity/AttachmentRow.tsx new file mode 100644 index 0000000000..b7f182eb44 --- /dev/null +++ b/packages/component/src/Activity/AttachmentRow.tsx @@ -0,0 +1,56 @@ +import { useStyles } from 'botframework-webchat-styles/react'; +import { reactNode, validateProps } from 'botframework-webchat-react-valibot'; +import cx from 'classnames'; +import React, { memo } from 'react'; +import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot'; + +import ScreenReaderText from '../ScreenReaderText'; +import Bubble from './Bubble'; + +import styles from './StackedLayout.module.css'; + +const attachmentRowPropsSchema = pipe( + object({ + attachedAlt: string(), + children: optional(reactNode()), + fromUser: boolean(), + hasAvatar: boolean(), + hasNub: boolean(), + showBubble: optional(boolean()) + }), + readonly() +); + +type AttachmentRowProps = InferInput; + +function AttachmentRow(props: AttachmentRowProps) { + const { + attachedAlt, + children, + fromUser, + hasAvatar, + hasNub, + showBubble = true + } = validateProps(attachmentRowPropsSchema, props); + const classNames = useStyles(styles); + + return ( +
+ + {showBubble ? ( + + {children} + + ) : ( +
{children}
+ )} +
+ ); +} + +export default memo(AttachmentRow); +export { attachmentRowPropsSchema, type AttachmentRowProps }; diff --git a/packages/component/src/Activity/CodeBlockContent.module.css b/packages/component/src/Activity/CodeBlockContent.module.css new file mode 100644 index 0000000000..4346b651b6 --- /dev/null +++ b/packages/component/src/Activity/CodeBlockContent.module.css @@ -0,0 +1,38 @@ +:global(.webchat) .code-block-content { + border-block: 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); + font-size: 14px; + font-style: normal; + font-weight: 400; + margin-block-end: calc(var(--webchat__border-width--bubble) * -1); + overflow: hidden; + overflow: clip; + position: relative; +} + +:global(.webchat) .code-block-content__header { + align-items: center; + display: flex; + gap: var(--webchat__padding--regular); + justify-content: space-between; + padding: var(--webchat__padding--regular); +} + +:global(.webchat) .code-block-content__title { + font-weight: 600; + + &::first-letter { + text-transform: uppercase; + } +} + +:global(.webchat) .code-block-content__code-block { + border: none; + margin: 0; + max-height: 360px; + overflow-y: auto; + padding: var(--webchat__padding--regular) 8px var(--webchat__padding--regular) var(--webchat__padding--regular); +} diff --git a/packages/component/src/Activity/CodeBlockContent.tsx b/packages/component/src/Activity/CodeBlockContent.tsx new file mode 100644 index 0000000000..5d7d338ea5 --- /dev/null +++ b/packages/component/src/Activity/CodeBlockContent.tsx @@ -0,0 +1,42 @@ +import { useStyles } from 'botframework-webchat-styles/react'; +import { validateProps } from 'botframework-webchat-react-valibot'; +import cx from 'classnames'; +import React, { memo } from 'react'; +import { object, optional, pipe, readonly, string, type InferInput } from 'valibot'; + +import useCodeBlockTag from '../providers/CustomElements/useCodeBlockTagName'; + +import styles from './CodeBlockContent.module.css'; + +const codeBlockContentPropsSchema = pipe( + object({ + code: string(), + language: optional(string()), + title: optional(string()) + }), + readonly() +); + +type CodeBlockContentProps = InferInput; + +function CodeBlockContent(props: CodeBlockContentProps) { + const { code, language, title } = validateProps(codeBlockContentPropsSchema, props); + const classNames = useStyles(styles); + const [, CodeBlock] = useCodeBlockTag(); + + return ( +
+ {title && ( +
+
{title}
+
+ )} + + {code} + +
+ ); +} + +export default memo(CodeBlockContent); +export { codeBlockContentPropsSchema, type CodeBlockContentProps }; diff --git a/packages/component/src/Activity/CollapsibleContent.module.css b/packages/component/src/Activity/CollapsibleContent.module.css new file mode 100644 index 0000000000..cc7bd0372f --- /dev/null +++ b/packages/component/src/Activity/CollapsibleContent.module.css @@ -0,0 +1,29 @@ +:global(.webchat) .collapsible-content { + &[open] .collapsible-content__chevron { + transform: rotate(180deg); + } +} + +:global(.webchat) .collapsible-content__summary { + cursor: pointer; + display: inline-flex; + font-family: var(--webchat__font--primary); + gap: calc(var(--webchat__padding--regular) / 2); + list-style: none; + margin: var(--webchat__padding--regular); + padding: 0; + + &::-webkit-details-marker { + display: none; + } + + &:focus-visible { + outline-offset: 3px; + } +} + +:global(.webchat) .collapsible-content__content { + display: flex; + flex-direction: column; + margin-block-start: calc(var(--webchat__padding--regular) * -1); +} diff --git a/packages/component/src/Activity/CollapsibleContent.tsx b/packages/component/src/Activity/CollapsibleContent.tsx new file mode 100644 index 0000000000..7c3d50877f --- /dev/null +++ b/packages/component/src/Activity/CollapsibleContent.tsx @@ -0,0 +1,68 @@ +import { useStyles } from 'botframework-webchat-styles/react'; +import { reactNode, validateProps } from 'botframework-webchat-react-valibot'; +import cx from 'classnames'; +import React, { memo, ReactEventHandler, useCallback, useRef, useState } from 'react'; +import { object, optional, pipe, readonly, string, type InferInput } from 'valibot'; +import random from 'math-random'; + +import styles from './CollapsibleContent.module.css'; +import { ComponentIcon } from '../Icon'; + +const collapsibleContentPropsSchema = pipe( + object({ + children: reactNode(), + summary: reactNode(), + summaryClassName: optional(string()) + }), + readonly() +); + +type CollapsibleContentProps = InferInput; + +function uniqueId(count = Infinity) { + return ( + random() + // eslint-disable-next-line no-magic-numbers + .toString(36) + // eslint-disable-next-line no-magic-numbers + .substring(2, 2 + count) + ); +} + +function CollapsibleContent(props: CollapsibleContentProps) { + const { children, summary, summaryClassName } = validateProps(collapsibleContentPropsSchema, props); + const [id] = useState(() => `webchat-collapsible-content-${uniqueId()}`); + const classNames = useStyles(styles); + const summaryRef = useRef(null); + + const handleToggle = useCallback>(event => { + const summary = summaryRef.current; + const details = event.target; + if (summary && details && details instanceof HTMLDetailsElement) { + const isDetailsOpen = details.open.toString(); + summary.setAttribute('aria-expanded', isDetailsOpen); + summary.setAttribute('aria-pressed', isDetailsOpen); + } + }, []); + + return ( + // eslint-disable-next-line react/forbid-dom-props +
+ +
{children}
+
+ ); +} + +export default memo(CollapsibleContent); +export { collapsibleContentPropsSchema, type CollapsibleContentProps }; diff --git a/packages/component/src/Activity/StackedLayout.module.css b/packages/component/src/Activity/StackedLayout.module.css new file mode 100644 index 0000000000..947ace777d --- /dev/null +++ b/packages/component/src/Activity/StackedLayout.module.css @@ -0,0 +1,135 @@ +:global(.webchat) .stacked-layout { + font-family: var(--webchat__font--primary); + margin-inline: var(--webchat__padding--regular); + position: relative; /* This is to keep screen reader text in the destinated area. */ + + .stacked-layout__attachment-row, + .stacked-layout__main, + .stacked-layout__message-row, + .stacked-layout__status { + display: flex; + } + + .stacked-layout__alignment-pad { + flex-shrink: 0; + transition-duration: var(--webchat__transition-duration); + transition-property: width; + width: 0; + } + + &.stacked-layout--extra-trailing .stacked-layout__alignment-pad { + width: var(--webchat__padding--regular); + } + + .stacked-layout__title { + color: var(--webchat__color--subtle); + font-size: 1.1em; + margin-block-start: var(--webchat__padding--regular); + margin-inline: var(--webchat__padding--regular); + } + + .stacked-layout__attachment { + max-width: var(--webchat__max-width--attachment-bubble); + min-width: var(--webchat__min-width--attachment-bubble); + transition-duration: var(--webchat__transition-duration); + transition-property: max-width, min-width; + width: 100%; + } + + .stacked-layout__attachment-list { + display: flex; + flex-direction: column; + + &:empty { + display: none; + } + } + + .stacked-layout__attachment-row { + margin-block-start: var(--webchat__padding--regular); + width: 100%; + } + + &.stacked-layout--no-message .stacked-layout__attachment-list .stacked-layout__attachment-row:first-child { + margin-block-start: 0; + } + + .stacked-layout__avatar-gutter { + display: flex; + flex-direction: column; + flex-shrink: 0; + transition-duration: var(--webchat__transition-duration); + transition-property: width; + width: 0; + } + + &.stacked-layout--from-user { + .stacked-layout__attachment-row, + .stacked-layout__main, + .stacked-layout__message-row, + .stacked-layout__status { + flex-direction: row-reverse; + } + } + + .stacked-layout__content { + flex: 1; + + /* This is for bottom aligning an avatar with a message bubble shorter than the avatar. */ + /* Related to the test at activityGrouping.avatarMiddleware.atBottom.js. */ + display: flex; + flex-direction: column; + + /* This "overflow: hidden" is to make sure text overflow will get clipped correctly. */ + /* Related to the test at basic.js "long URLs with keep-all". */ + overflow: hidden; + } + + .stacked-layout__message { + max-width: var(--webchat__max-width--message-bubble); + min-width: var(--webchat__min-width--message-bubble); + overflow: hidden; + transition-duration: var(--webchat__transition-duration); + transition-property: max-width; + } + + .stacked-layout__nub-pad { + flex-shrink: 0; + transition-duration: var(--webchat__transition-duration); + transition-property: width; + width: 0; + } + + &.stacked-layout--hide-avatar, + &.stacked-layout--show-avatar { + .stacked-layout__avatar-gutter { + width: var(--webchat__size--avatar); + } + } + + &.stacked-layout--hide-avatar, + &.stacked-layout--show-avatar, + &.stacked-layout--hide-nub, + &.stacked-layout--show-nub { + .stacked-layout__attachment { + max-width: calc(var(--webchat__max-width--attachment-bubble) + var(--webchat__padding--regular)); + min-width: calc(var(--webchat__min-width--attachment-bubble) + var(--webchat__padding--regular)); + } + + .stacked-layout__message { + max-width: calc(var(--webchat__max-width--message-bubble) + var(--webchat__padding--regular)); + min-width: calc(var(--webchat__min-width--message-bubble) + var(--webchat__padding--regular)); + } + + .stacked-layout__nub-pad { + width: var(--webchat__padding--regular); + } + } + + &:not(.stacked-layout--top-callout) { + .stacked-layout__avatar-gutter, + .stacked-layout__content { + justify-content: flex-end; + } + } +} diff --git a/packages/component/src/Activity/StackedLayout.tsx b/packages/component/src/Activity/StackedLayout.tsx index 8a4e80638e..2bdf339926 100644 --- a/packages/component/src/Activity/StackedLayout.tsx +++ b/packages/component/src/Activity/StackedLayout.tsx @@ -1,72 +1,110 @@ /* eslint complexity: ["error", 50] */ import { hooks } from 'botframework-webchat-api'; +import type { RenderAttachment } from 'botframework-webchat-api'; import { ActivityBorderDecorator } from 'botframework-webchat-api/decorator'; -import classNames from 'classnames'; -import React, { memo } from 'react'; +import { getActivityLivestreamingMetadata, getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core'; +import { useStyles } from 'botframework-webchat-styles/react'; +import cx from 'classnames'; +import React, { Fragment, memo, useCallback, useMemo, type ReactNode } from 'react'; +import isBasedOnSoftwareSourceCode from '../Attachment/Text/private/isBasedOnSoftwareSourceCode'; import ScreenReaderText from '../ScreenReaderText'; import isZeroOrPositive from '../Utils/isZeroOrPositive'; import textFormatToContentType from '../Utils/textFormatToContentType'; -import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject'; import useUniqueId from '../hooks/internal/useUniqueId'; -import useStyleSet from '../hooks/useStyleSet'; +import AttachmentRow from './AttachmentRow'; import Bubble from './Bubble'; +import CodeBlockContent from './CodeBlockContent'; +import CollapsibleContent from './CollapsibleContent'; -import type { RenderAttachment } from 'botframework-webchat-api'; -import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core'; -import type { ReactNode } from 'react'; +import styles from './StackedLayout.module.css'; const { useAvatarForBot, useAvatarForUser, useLocalizer, useStyleOptions } = hooks; -const ROOT_STYLE = { - '&.webchat__stacked-layout': { - position: 'relative', // This is to keep screen reader text in the destinated area. - - '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status': - { - display: 'flex' - }, - - '& .webchat__stacked-layout__alignment-pad': { - flexShrink: 0 - }, - - '& .webchat__stacked-layout__attachment': { - width: '100%' - }, - - '& .webchat__stacked-layout__avatar-gutter': { - display: 'flex', - flexDirection: 'column', - flexShrink: 0 - }, - - '&.webchat__stacked-layout--from-user': { - '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status': - { - flexDirection: 'row-reverse' - } - }, - - '& .webchat__stacked-layout__content': { - flex: 1, - - // This is for bottom aligning an avatar with a message bubble shorter than the avatar. - // Related to the test at activityGrouping.avatarMiddleware.atBottom.js. - display: 'flex', - flexDirection: 'column', - - // This "overflow: hidden" is to make sure text overflow will get clipped correctly. - // Related to the test at basic.js "long URLs with keep-all". - overflow: 'hidden' - }, - - '& .webchat__stacked-layout__nub-pad': { - flexShrink: 0 - } +type StackedLayoutInnerProps = Readonly<{ + activity: WebChatActivity; + children?: ReactNode | undefined; + fromUser: boolean; + hasAttachments: boolean; + hasDisplayText: boolean; + id: string; + renderAvatar?: false | (() => Exclude) | undefined; + renderBubbleContent: (title?: string | undefined) => ReactNode; + showCallout?: boolean | undefined; +}>; + +const StackedLayoutInner = memo( + ({ + activity, + children, + fromUser, + hasAttachments, + hasDisplayText, + id, + renderAvatar, + renderBubbleContent, + showCallout + }: StackedLayoutInnerProps) => { + const [styleOptions] = useStyleOptions(); + const [{ initials: botInitials }] = useAvatarForBot(); + const [{ initials: userInitials }] = useAvatarForUser(); + const localize = useLocalizer(); + const classNames = useStyles(styles); + + const messageThing = useMemo(() => getOrgSchemaMessage(activity.entities), [activity]); + const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions; + const greetingAlt = ( + fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '') + ).replace(/\s{2,}/gu, ' '); + + const initials = fromUser ? userInitials : botInitials; + const nubOffset = fromUser ? bubbleFromUserNubOffset : bubbleNubOffset; + const nubSize = fromUser ? bubbleFromUserNubSize : bubbleNubSize; + + const hasAvatar = initials || typeof initials === 'string'; + const hasNub = typeof nubSize === 'number'; + const topAlignedCallout = isZeroOrPositive(nubOffset); + + const showAvatar = showCallout && hasAvatar && !!renderAvatar; + const showNub = showCallout && hasNub && (topAlignedCallout || !hasAttachments); + + return ( +
+
+ {showAvatar && renderAvatar && renderAvatar()} +
+
+ {!!hasDisplayText && ( +
+ + + + {renderBubbleContent(messageThing?.abstract)} + + +
+ )} +
{children}
+
+
+
+ ); } -}; +); + +StackedLayoutInner.displayName = 'StackedLayoutInner'; type StackedLayoutProps = Readonly<{ activity: WebChatActivity; @@ -88,29 +126,26 @@ const StackedLayout = ({ const [styleOptions] = useStyleOptions(); const [{ initials: botInitials }] = useAvatarForBot(); const [{ initials: userInitials }] = useAvatarForUser(); - const [{ stackedLayout: stackedLayoutStyleSet }] = useStyleSet(); const ariaLabelId = useUniqueId('webchat__stacked-layout__id'); const localize = useLocalizer(); - const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; + const classNames = useStyles(styles); const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions; const isMessageOrTyping = activity.type === 'message' || activity.type === 'typing'; - const attachments = (isMessageOrTyping && activity.attachments) || []; + const attachments = useMemo(() => (isMessageOrTyping && activity.attachments) || [], [activity, isMessageOrTyping]); const fromUser = activity.from.role === 'user'; const messageBackDisplayText: string = (isMessageOrTyping && activity.channelData?.messageBack?.displayText) || ''; + const messageThing = useMemo(() => getOrgSchemaMessage(activity.entities), [activity]); + const isCollapsible = useMemo(() => messageThing?.keywords?.includes('Collapsible'), [messageThing]); const isLivestreaming = !!getActivityLivestreamingMetadata(activity); const activityDisplayText = isMessageOrTyping ? messageBackDisplayText || activity.text : isLivestreaming && 'text' in activity - ? activity.text + ? (activity.text as string) : ''; - const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT'); - const greetingAlt = ( - fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '') - ).replace(/\s{2,}/gu, ' '); const initials = fromUser ? userInitials : botInitials; const nubOffset = fromUser ? bubbleFromUserNubOffset : bubbleNubOffset; @@ -129,82 +164,137 @@ const StackedLayout = ({ const showAvatar = showCallout && hasAvatar && !!renderAvatar; const showNub = showCallout && hasNub && (topAlignedCallout || !attachments?.length); + const renderMainBubbleContent = useCallback( + (title = '') => ( + + {title &&
{title}
} + {renderAttachment({ + activity, + attachment: { + content: activityDisplayText, + contentType: textFormatToContentType('textFormat' in activity ? activity.textFormat : undefined) + } + })} + + ), + [activity, activityDisplayText, classNames, renderAttachment] + ); + + const attachmentChildren = useMemo(() => { + const syntheticAttachments = []; + + const attachmentAlt = localize( + fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT', + otherInitials || '' + ); + + if (isCollapsible && 'text' in activity && activity.text) { + syntheticAttachments.push( + + {renderMainBubbleContent()} + + ); + } + + if (isCollapsible && isBasedOnSoftwareSourceCode(messageThing)) { + syntheticAttachments.push( + + + + ); + } + + return syntheticAttachments.concat( + attachments.map((attachment, index) => ( + + {renderAttachment({ activity, attachment })} + + )) + ); + }, [ + activity, + attachments, + fromUser, + hasAvatar, + hasNub, + isCollapsible, + localize, + messageThing, + otherInitials, + renderAttachment, + renderMainBubbleContent + ]); + + const renderCollapsibleBubbleContent = useCallback( + (title = '') => ( + +
{attachmentChildren}
+ + ), + [attachmentChildren, classNames] + ); + + const renderBubbleContent = isCollapsible ? renderCollapsibleBubbleContent : renderMainBubbleContent; + return (
-
-
{showAvatar && renderAvatar()}
-
- {!!activityDisplayText && ( -
- - - - {renderAttachment({ - activity, - attachment: { - content: activityDisplayText, - contentType: textFormatToContentType('textFormat' in activity ? activity.textFormat : undefined) - } - })} - - -
- )} - {attachments.map((attachment, index) => ( -
- - - {renderAttachment({ activity, attachment })} - -
- ))} -
-
-
+ 0} + hasDisplayText={!!activityDisplayText?.length || isCollapsible} + id={ariaLabelId} + renderAvatar={renderAvatar} + renderBubbleContent={renderBubbleContent} + showCallout={showCallout} + > + {!isCollapsible && attachmentChildren} + {typeof renderActivityStatus === 'function' && ( -
-
-
+
+
+
{renderActivityStatus({ hideTimestamp })} -
+
)}
diff --git a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx index 881b7edf76..bb76ce9785 100644 --- a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx +++ b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx @@ -243,7 +243,10 @@ function MarkdownTextContent(props: MarkdownTextContentProps) { )}
- {activity.type === 'message' && isBasedOnSoftwareSourceCode(messageThing) && messageThing.isBasedOn.text ? ( + {activity.type === 'message' && + isBasedOnSoftwareSourceCode(messageThing) && + messageThing.isBasedOn.text && + !messageThing.keywords?.includes?.('Collapsible') ? ( '); } + +:global(.webchat) .icon--chevron { + --webchat__component-icon--mask: url('data:image/svg+xml;utf8,'); +} /* #endregion */ diff --git a/packages/component/src/Icon/ComponentIcon.tsx b/packages/component/src/Icon/ComponentIcon.tsx index 864530c259..ba55313d0e 100644 --- a/packages/component/src/Icon/ComponentIcon.tsx +++ b/packages/component/src/Icon/ComponentIcon.tsx @@ -39,7 +39,7 @@ function BaseComponentIcon(props: InferInput({ >
{headerText}
- +
{accessoryComponentType && ( diff --git a/packages/component/src/LinkDefinition/private/Chevron.tsx b/packages/component/src/LinkDefinition/private/Chevron.tsx deleted file mode 100644 index 748b4b3a19..0000000000 --- a/packages/component/src/LinkDefinition/private/Chevron.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { memo } from 'react'; - -const Chevron = memo(() => ( - - - -)); - -Chevron.displayName = 'Chevron'; - -export default Chevron; diff --git a/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx b/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx index 8736bb73a5..a9479b8188 100644 --- a/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx +++ b/packages/component/src/Middleware/Activity/createCoreMiddleware.tsx @@ -1,5 +1,6 @@ +/* eslint complexity: ["error", 21] */ import { ActivityMiddleware } from 'botframework-webchat-api'; -import { getActivityLivestreamingMetadata } from 'botframework-webchat-core'; +import { getActivityLivestreamingMetadata, getOrgSchemaMessage } from 'botframework-webchat-core'; import React from 'react'; import CarouselLayout from '../../Activity/CarouselLayout'; @@ -15,6 +16,7 @@ export default function createCoreMiddleware(): ActivityMiddleware[] { // TODO: [P4] Can we simplify these if-statement to something more readable? const { type } = activity; + const messageThing = getOrgSchemaMessage(activity.entities); // Filter out activities that should not visible. if ( @@ -24,14 +26,14 @@ export default function createCoreMiddleware(): ActivityMiddleware[] { // Do not show content for contentless livestream interims, or finalized activity without content. (type === 'typing' && (getActivityLivestreamingMetadata(activity)?.type === 'contentless' || - !(activity['text'] || activity.attachments?.length > 0))) || + !(activity['text'] || activity.attachments?.length > 0 || messageThing?.abstract))) || (type === 'message' && // Do not show postback (activity.channelData?.postBack || // Do not show messageBack if displayText is undefined (activity.channelData?.messageBack && !activity.channelData.messageBack.displayText) || // Do not show empty bubbles (no text and attachments) - !(activity.text || activity.attachments?.length))) + !(activity.text || activity.attachments?.length || messageThing?.abstract))) ) { return false; } else if (type === 'message' || type === 'typing') { diff --git a/packages/component/src/Styles/CustomPropertyNames.ts b/packages/component/src/Styles/CustomPropertyNames.ts index c3a3cdb5ee..68d4fb5301 100644 --- a/packages/component/src/Styles/CustomPropertyNames.ts +++ b/packages/component/src/Styles/CustomPropertyNames.ts @@ -4,6 +4,10 @@ const CustomPropertyNames = Object.freeze({ BorderAnimationColor1: '--webchat__border-animation--color-1', BorderAnimationColor2: '--webchat__border-animation--color-2', BorderAnimationColor3: '--webchat__border-animation--color-3', + BorderColorBubble: '--webchat__border-color--bubble', + BorderRadiusBubble: '--webchat__border-radius--bubble', + BorderStyleBubble: '--webchat__border-style--bubble', + BorderWidthBubble: '--webchat__border-width--bubble', ColorAccent: '--webchat__color--accent', ColorCodeBlock: '--webchat__color--code-block', ColorSubtle: '--webchat__color--subtle', @@ -20,7 +24,8 @@ const CustomPropertyNames = Object.freeze({ MinWidthAttachmentBubble: '--webchat__min-width--attachment-bubble', MinWidthMessageBubble: '--webchat__min-width--message-bubble', PaddingRegular: '--webchat__padding--regular', - SizeAvatar: '--webchat__size--avatar' + SizeAvatar: '--webchat__size--avatar', + TransitionDuration: '--webchat__transition-duration' }) satisfies Readonly>; export default CustomPropertyNames; diff --git a/packages/component/src/Styles/useCustomPropertiesClassName.ts b/packages/component/src/Styles/useCustomPropertiesClassName.ts index 750b44dfe0..df876a858d 100644 --- a/packages/component/src/Styles/useCustomPropertiesClassName.ts +++ b/packages/component/src/Styles/useCustomPropertiesClassName.ts @@ -23,6 +23,10 @@ export default function useCustomPropertiesClassName() { borderAnimationColor3, bubbleAttachmentMaxWidth, bubbleAttachmentMinWidth, + bubbleBorderColor, + bubbleBorderRadius, + bubbleBorderStyle, + bubbleBorderWidth, bubbleImageMaxHeight, bubbleImageMinHeight, bubbleMessageMaxWidth, @@ -46,6 +50,10 @@ export default function useCustomPropertiesClassName() { ${CustomPropertyNames.BorderAnimationColor1}: ${borderAnimationColor1}; ${CustomPropertyNames.BorderAnimationColor2}: ${borderAnimationColor2}; ${CustomPropertyNames.BorderAnimationColor3}: ${borderAnimationColor3}; + ${CustomPropertyNames.BorderColorBubble}: ${bubbleBorderColor}; + ${CustomPropertyNames.BorderRadiusBubble}: ${bubbleBorderRadius}px; + ${CustomPropertyNames.BorderStyleBubble}: ${bubbleBorderStyle}; + ${CustomPropertyNames.BorderWidthBubble}: ${bubbleBorderWidth}px; ${CustomPropertyNames.ColorAccent}: ${accent}; ${CustomPropertyNames.ColorSubtle}: ${subtle}; ${CustomPropertyNames.ColorTimestamp}: ${timestampColor || subtle}; diff --git a/packages/component/src/decorator/index.ts b/packages/component/src/decorator/index.ts index 6bd18d65f9..f0502a4c50 100644 --- a/packages/component/src/decorator/index.ts +++ b/packages/component/src/decorator/index.ts @@ -1 +1,3 @@ export { default as WebChatDecorator } from './private/WebChatDecorator'; +export { default as BorderLoader } from './private/BorderLoader'; +export { default as BorderFlair } from './private/BorderFlair'; diff --git a/packages/component/src/decorator/private/BorderFlair.tsx b/packages/component/src/decorator/private/BorderFlair.tsx index e8152a3086..846eb3201c 100644 --- a/packages/component/src/decorator/private/BorderFlair.tsx +++ b/packages/component/src/decorator/private/BorderFlair.tsx @@ -4,7 +4,10 @@ import { useStyles } from 'botframework-webchat-styles/react'; import styles from './BorderFlair.module.css'; -function BorderFlair({ children }: Readonly<{ children?: ReactNode | undefined }>) { +function BorderFlair({ + children, + showFlair = true +}: Readonly<{ children?: ReactNode | undefined; showFlair?: boolean }>) { const classNames = useStyles(styles); const [isComplete, setComplete] = useState(false); @@ -16,13 +19,19 @@ function BorderFlair({ children }: Readonly<{ children?: ReactNode | undefined } [] ); + if (!showFlair && isComplete) { + setComplete(false); + } + return ( {children} -
+ {showFlair && ( +
+ )} ); } diff --git a/packages/component/src/decorator/private/BorderLoader.tsx b/packages/component/src/decorator/private/BorderLoader.tsx index 7ef4012d70..f43f3b9cb1 100644 --- a/packages/component/src/decorator/private/BorderLoader.tsx +++ b/packages/component/src/decorator/private/BorderLoader.tsx @@ -3,15 +3,20 @@ import { useStyles } from 'botframework-webchat-styles/react'; import styles from './BorderLoader.module.css'; -function BorderLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) { +function BorderLoader({ + children, + showLoader = true +}: Readonly<{ children?: ReactNode | undefined; showLoader?: boolean }>) { const classNames = useStyles(styles); return (
{children} -
-
-
+ {showLoader && ( +
+
+
+ )}
); } diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts b/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts index bf58f0ca7f..17283563f1 100644 --- a/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts +++ b/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts @@ -3,7 +3,7 @@ import { hooks } from 'botframework-webchat-api'; import { ReactNode, useMemo, useRef } from 'react'; import { useStyleSet } from '../../../hooks'; -import { defaultHighlightCode, HighlightCodeFn } from '../../../hooks/internal/codeHighlighter'; +import { defaultHighlightCode, HighlightCodeFn } from '../../../hooks/internal/codeHighlighter/index'; import { parseDocumentFragmentFromString, useCodeHighlighter } from '../../../internal'; const { useStyleOptions, useLocalizer } = hooks; diff --git a/packages/core/src/utils/getActivityLivestreamingMetadata.ts b/packages/core/src/utils/getActivityLivestreamingMetadata.ts index ae18142bdb..8fb58547b0 100644 --- a/packages/core/src/utils/getActivityLivestreamingMetadata.ts +++ b/packages/core/src/utils/getActivityLivestreamingMetadata.ts @@ -16,6 +16,7 @@ import { } from 'valibot'; import { type WebChatActivity } from '../types/WebChatActivity'; +import getOrgSchemaMessage from './getOrgSchemaMessage'; const EMPTY_ARRAY = Object.freeze([]); @@ -48,7 +49,8 @@ const livestreamingActivitySchema = union([ id: string(), // Informative message must have "text". text: string(), - type: literal('typing') + type: literal('typing'), + entities: optional(array(any()), EMPTY_ARRAY) }), // Conclude with a message. object({ @@ -122,7 +124,11 @@ export default function getActivityLivestreamingMetadata(activity: WebChatActivi : { sequenceNumber: output.channelData.streamSequence, sessionId, - type: !(output.text || output.attachments?.length) + type: !( + output.text || + output.attachments?.length || + ('entities' in output && getOrgSchemaMessage(output.entities)?.abstract) + ) ? 'contentless' : output.channelData.streamType === 'informative' ? 'informative message' diff --git a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css index c7c3857dac..b3344323d8 100644 --- a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css +++ b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css @@ -19,7 +19,7 @@ --webchat-externalLink-maxWidth: var(--externalLink-maxWidth, 204px); /* Override for stacked layout message which has user message bubble props */ - &:has(:global(.webchat__stacked-layout .webchat__bubble--from-user)) { + &:has(:global(.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; @@ -41,7 +41,7 @@ margin: 0 0 var(--webchat-spacingHorizontalXXS); } - :global(.webchat__stacked-layout__status) { + :global(.stacked-layout__status) { order: -1; } @@ -70,7 +70,7 @@ padding: var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalM); position: relative; - :global(.webchat__stacked-layout) { + :global(.stacked-layout) { margin: 0; position: static; } @@ -81,31 +81,24 @@ } :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; + flex-direction: column; gap: var(--webchat-spacingVerticalS); - padding-inline-end: var(--webchat-spacingHorizontalM); - width: 500px; + margin-block: calc(var(--webchat-spacingVerticalS) * -1); + margin-inline: 20px calc(var(--webchat-spacingHorizontalS) * -1); + padding-block: var(--webchat-spacingVerticalS); + padding-inline: var(--webchat-spacingHorizontalS); } - :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__bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment-list) { + margin-block-start: var(--webchat-spacingVerticalS); + } + + :global(.webchat__bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment) { + max-width: var(--webchat__bubble--max-width); } - :global(.webchat__stacked-layout__status) { + :global(.stacked-layout__status) { display: none; } } @@ -116,36 +109,45 @@ } /* Stacked layout */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout) { +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout) { display: flex; flex-flow: column nowrap; + margin-inline: var(--webchat-spacingHorizontalMNudge); + + :global(.stacked-layout__title) { + font-size: var(--webchat-fontSizeBase400); + line-height: var(--webchat-lineHeightBase400); + color: var(--webchat-colorNeutralForeground4); + margin: var(--webchat__bubble--block-padding) var(--webchat__bubble--inline-padding) 0; + } + + :global(.stacked-layout__attachment-row) { + margin-block-start: var(--webchat-spacingVerticalMNudge); + } + + &:global(.stacked-layout--no-message .stacked-layout__attachment-row) { + margin-block-start: 0; + } } /* 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(.stacked-layout .stacked-layout__content:has(.webchat__bubble)) { max-width: 100%; overflow: visible; } /* Message status */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__status) { +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .stacked-layout__status) { font-size: var(--webchat__font-size--small); line-height: var(--webchat__line-height--small); } /* Message bubble */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) { +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble) { 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%; - } - /* Ensure activity loader doesn't have bubble and shadow */ &:has(:global(.activity-loader)) :global(.webchat__bubble__content) { background: transparent; @@ -154,9 +156,7 @@ } /* Message bubble content */ -:global(.webchat-fluent) - .activity-decorator - :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) { +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__bubble__content) { background-color: var(--webchat__bubble--background-color); border-radius: var(--webchat__bubble--border-radius); border-width: 0; @@ -168,7 +168,7 @@ } /* Message bubble text content */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content) { +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__text-content) { font-size: var(--webchat__font-size--medium); line-height: var(--webchat__line-height--medium); min-height: auto; @@ -187,7 +187,7 @@ /* Message bubble text content generated badge */ :global(.webchat-fluent) .activity-decorator - :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) { + :global(.stacked-layout .webchat__bubble .webchat__text-content__generated-badge) { align-items: center; align-self: flex-start; background-color: var(--webchat-colorNeutralBackground5); @@ -203,9 +203,7 @@ } /* Message bubble attachment content */ -:global(.webchat-fluent) - .activity-decorator - :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) { +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__fileContent__badge) { cursor: default; font-size: var(--webchat-fontSizeBase300); line-height: var(--webchat-lineHeightBase300); @@ -222,10 +220,70 @@ :global(.webchat-fluent) .activity-decorator - :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__downloadIcon) { + :global(.stacked-layout .webchat__bubble .webchat__fileContent__downloadIcon) { color: var(--webchat-colorBrandForegroundLink); } +/* Message bubble collapsible content */ +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .collapsible-content) { + :global(.collapsible-content__summary) { + margin-block: var(--webchat__bubble--block-padding); + margin-inline: var(--webchat__bubble--inline-padding); + + &:focus-visible { + border-radius: var(--webchat-borderRadiusSmall); + outline-offset: 4px; + outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2); + } + } + + :global(.collapsible-content__content) { + margin-block: 0 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; + } +} + +/* Message bubble code block content */ +:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .code-block-content) { + border-radius: var(--webchat-borderRadiusXLarge); + border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1); + font-size: var(--webchat-fontSizeBase300); + 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(.webchat__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; + right: 0; + top: 0; + } +} + /* Markdown links and citation links */ :global(.webchat-fluent) .activity-decorator @@ -330,9 +388,8 @@ } :global(.webchat__link-definitions__header-chevron) { - fill: var(--webchat-colorNeutralForeground3); + color: var(--webchat-colorNeutralForeground3); font-size: var(--webchat__font-size--small); - width: 1em; } &:focus-visible { diff --git a/packages/fluent-theme/src/components/activity/ActivityLoader.module.css b/packages/fluent-theme/src/components/activity/ActivityLoader.module.css index 52cd1c52b3..4ab12a8f9a 100644 --- a/packages/fluent-theme/src/components/activity/ActivityLoader.module.css +++ b/packages/fluent-theme/src/components/activity/ActivityLoader.module.css @@ -1,10 +1,15 @@ :global(.webchat-fluent) .activity-loader { + align-self: flex-start; flex: none; height: 8px; - margin: var(--webchat-spacingHorizontalM) 0 0 18px; + margin: var(--webchat-spacingVerticalM) 0 0 18px; width: auto; &.variant-fluent { - margin: 0 0 var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalSNudge); + margin: 0 0 var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalSNudge); + } + + &.variant-copilot { + margin: var(--webchat-spacingVerticalXS) 0 0 -10px; } } diff --git a/packages/fluent-theme/src/components/activity/ActivityLoader.tsx b/packages/fluent-theme/src/components/activity/ActivityLoader.tsx index f1482bb81a..fe3884c801 100644 --- a/packages/fluent-theme/src/components/activity/ActivityLoader.tsx +++ b/packages/fluent-theme/src/components/activity/ActivityLoader.tsx @@ -6,14 +6,17 @@ import { useVariantClassName } from '../../styles'; import SlidingDots from '../assets/SlidingDots'; import styles from './ActivityLoader.module.css'; -function FluentActivityLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) { +function FluentActivityLoader({ + children, + showLoader = true +}: Readonly<{ children?: ReactNode | undefined; showLoader?: boolean }>) { const classNames = useStyles(styles); const variantClassName = useVariantClassName(classNames); return ( {children} - + {showLoader && } ); } diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css index 7361ab3b0f..62e37d9d9e 100644 --- a/packages/fluent-theme/src/components/theme/Theme.module.css +++ b/packages/fluent-theme/src/components/theme/Theme.module.css @@ -199,6 +199,7 @@ --webchat__line-height--small: var(--webchat-lineHeightBase200); --webchat__line-height--medium: var(--webchat-lineHeightBase300); --webchat__max-width--bubble: var(--webchat-bubble-maxWidth); + --webchat__max-width--attachment-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) @@ -224,6 +225,7 @@ } /* Scrollbars */ +:global(.webchat-fluent).theme :global(.code-block-content .code-block-content__code-block), :global(.webchat-fluent).theme :global(.send-box-attachment-bar.send-box-attachment-bar--as-list-item), :global(.webchat-fluent).theme :global(.text-area.text-area--scroll), :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable), diff --git a/packages/fluent-theme/src/private/FluentThemeProvider.tsx b/packages/fluent-theme/src/private/FluentThemeProvider.tsx index 14e4d50457..9fba5d6856 100644 --- a/packages/fluent-theme/src/private/FluentThemeProvider.tsx +++ b/packages/fluent-theme/src/private/FluentThemeProvider.tsx @@ -1,11 +1,15 @@ +/* eslint-disable prefer-arrow-callback */ import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api'; import { + ActivityBorderDecoratorRequest, createActivityBorderMiddleware, DecoratorComposer, + type InferDecoratorRequest, + useDecoratorRequest, type DecoratorMiddleware } from 'botframework-webchat-api/decorator'; +import { BorderFlair, WebChatDecorator } from 'botframework-webchat-component/decorator'; import { Components } from 'botframework-webchat-component'; -import { WebChatDecorator } from 'botframework-webchat-component/decorator'; import React, { memo, type ReactNode } from 'react'; import { ActivityDecorator } from '../components/activity'; @@ -18,6 +22,7 @@ import { TelephoneKeypadProvider } from '../components/telephoneKeypad'; import { WebChatTheme } from '../components/theme'; import SlidingDotsTypingIndicator from '../components/typingIndicator/SlidingDotsTypingIndicator'; import { createStyles } from '../styles'; +import { composePipeline } from './composePipeline'; import VariantComposer, { VariantList } from './VariantComposer'; const { ThemeProvider } = Components; @@ -52,10 +57,34 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([ const sendBoxMiddleware = [() => () => () => PrimarySendBox]; +const FluentDecorator = composePipeline>([ + function FluentBorderLoader({ request, Next, ...props }) { + return ( + + + + ); + }, + function FluentBorderFlair({ request, Next, ...props }) { + return ( + + + + ); + } +]); + +FluentDecorator.displayName = 'FluentDecoratorPipeline'; + +const FluentDecoratorWithRequest = memo(function DecoratorWithRequest(props) { + const request = useDecoratorRequest(ActivityBorderDecoratorRequest); + return ; +}); + +FluentDecoratorWithRequest.displayName = 'FluentDecoratorWithRequest'; + const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([ - createActivityBorderMiddleware( - next => request => (request.livestreamingState === 'preparing' ? ActivityLoader : next(request)) - ) + createActivityBorderMiddleware(() => () => FluentDecoratorWithRequest) ]); const styles = createStyles('fluent-theme'); diff --git a/packages/fluent-theme/src/private/composePipeline.tsx b/packages/fluent-theme/src/private/composePipeline.tsx new file mode 100644 index 0000000000..810e2f3ad6 --- /dev/null +++ b/packages/fluent-theme/src/private/composePipeline.tsx @@ -0,0 +1,49 @@ +/* eslint-disable prefer-arrow-callback */ +import React, { Fragment, memo, type ComponentType, type ReactNode } from 'react'; + +type PipelineProps = Readonly<{ request: R }> & P; +type InnerPipelineProps = PipelineProps & Readonly<{ originalRequest: R }>; + +type NextComponent = ComponentType

>; +type ComposedComponent = ComponentType>; +type StageComponent = ComponentType< + PipelineProps & { + Next: NextComponent; + } +>; +type PipelineComponent = ComponentType>; + +const Passthrough = memo(function PipelinePassthrough({ children }: Readonly<{ children?: ReactNode | undefined }>) { + return {children}; +}); + +export function composePipeline< + Request, + Props extends { children?: ReactNode | undefined } = { children?: ReactNode | undefined } +>(stages: StageComponent[], PassthroughComponent = Passthrough): PipelineComponent { + const ComposedPipeline = stages.reduceRight>((Next, Stage) => { + const StageMemo = memo(Stage); + + const StageWrapper = memo>(({ originalRequest, request, ...innerRest }) => { + const resolvedRequest = request ?? originalRequest; + return ( + } + request={resolvedRequest} + {...(innerRest as Props)} + originalRequest={originalRequest} + /> + ); + }); + StageWrapper.displayName = `PipelineStage(Memo(${Stage.displayName || Stage.name}))`; + return StageWrapper; + }, PassthroughComponent); + + return memo(function Pipeline(props: PipelineProps) { + const { request, ...restProps } = props; + + return ; + }); +} + +export type { NextComponent, PipelineProps, PipelineComponent, StageComponent }; diff --git a/packages/test/page-object/src/globals/pageElements/activityStatuses.js b/packages/test/page-object/src/globals/pageElements/activityStatuses.js index 5ef427df5e..00f6b8345e 100644 --- a/packages/test/page-object/src/globals/pageElements/activityStatuses.js +++ b/packages/test/page-object/src/globals/pageElements/activityStatuses.js @@ -2,6 +2,6 @@ import activities from './activities'; export default function getActivityStatuses() { return [].map.call(activities(), element => - element.querySelector('.webchat__carousel-filmstrip__status, .webchat__stacked-layout__status') + element.querySelector('.webchat__carousel-filmstrip__status, .stacked-layout__status') ); }