diff --git a/CHANGELOG.md b/CHANGELOG.md index 81c2686b7a..6c6cd642ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -317,6 +317,7 @@ Breaking changes in this release: - Bubble, carousel, say-alt, in PR [#5668](https://github.com/microsoft/BotFramework-WebChat/pull/5668), by [@OEvgeny](https://github.com/OEvgeny) - Activity status, in PR [#5669](https://github.com/microsoft/BotFramework-WebChat/pull/5669), by [@OEvgeny](https://github.com/OEvgeny) - Text attachment and related components, in PR [#5670](https://github.com/microsoft/BotFramework-WebChat/pull/5670), by [@OEvgeny](https://github.com/OEvgeny) +- (Experimental) Added custom variants support for `botframework-webchat-fluent-theme` package, in PR [#5675](https://github.com/microsoft/BotFramework-WebChat/pull/5675), by [@OEvgeny](https://github.com/OEvgeny) ### Deprecated diff --git a/__tests__/assets/webchat-copilot-deprecated.variant.css b/__tests__/assets/webchat-copilot-deprecated.variant.css new file mode 100644 index 0000000000..941a9e58d9 --- /dev/null +++ b/__tests__/assets/webchat-copilot-deprecated.variant.css @@ -0,0 +1,135 @@ +:is(.webchat-fluent .sendbox.wKGyPWW_variant-copilot-deprecated) .sendbox__text-counter:not(.sendbox__text-counter--error) { + visibility: hidden; +} +.webchat-fluent .activity-loader.wKGyPWW_variant-copilot-deprecated { + margin: var(--webchat-spacingVerticalXS) 0 var(--webchat-spacingVerticalXS) -10px; +} + +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated { + --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalNone); + position: relative; +} + +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .part-grouping-decorator__header { + padding-block: var(--webchat-spacingVerticalS); +} +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) .part-grouping-decorator__header { + display: none; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--group { + --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalXS); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot { + --webchat-part-grouping__bubble--background-color: transparent; + --webchat-part-grouping__bubble--border-radius: var(--webchat-borderRadius2XLarge); + --webchat-part-grouping__bubble--space-block: var(--webchat-spacingVerticalNone); + --webchat-part-grouping__bubble--space-inline: var(--webchat-spacingHorizontalNone); + --webchat-part-grouping__bubble--max-width: 100%; + --webchat-part-grouping__bubble--min-height: 20px; + --webchat-part-grouping__code-block--space-inline: var(--webchat-spacingHorizontalNone); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .activity-status { + margin: 0 0 var(--webchat-spacingHorizontalXXS); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .stacked-layout__status { + order: -1; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.bubble--from-user) .bubble { + margin-block-end: var(--webchat-spacingVerticalM); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.bubble.bubble--from-user), +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.pre-chat-message-activity), +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):has(.liner-message-activity) { + padding-inline-start: var(--webchat-spacingHorizontalNone); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .bubble .text-content .text-content__generated-badge { + display: none; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .stacked-layout:has(.collapsible-grouping) { + margin-inline: var(--webchat-spacingHorizontalNone); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .collapsible-grouping__content { + anchor-name: --webchat-flair; + background: var(--webchat-colorNeutralBackground1); + border-radius: var(--webchat-borderRadius2XLarge); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .stacked-layout .stacked-layout__message-status { + margin-inline: var(--webchat-spacingHorizontalNone) var(--webchat-spacingHorizontalS); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated) .border-flair { + border-radius: var(--webchat-borderRadius2XLarge); + inset: anchor(top) anchor(right) anchor(bottom) anchor(left); + position-anchor: --webchat-flair; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot { + margin-inline-end: var(--webchat-spacingHorizontalXXL); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .stacked-layout { + margin: 0; + position: static; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble { + width: var(--webchat-part-grouping__bubble--max-width); + position: static; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot:not(.part-grouping-decorator--group) .bubble__content { + gap: var(--webchat-spacingVerticalS); + flex-direction: column; + display: flex; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble .collapsible-content .collapsible-content__content { + margin-block: var(--webchat-spacingVerticalNone); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment-list { + margin-block-start: var(--webchat-spacingVerticalS); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .bubble .collapsible-content .collapsible-content__content .stacked-layout__attachment { + max-width: var(--webchat-part-grouping__bubble--max-width); +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated).part-grouping-decorator--from-bot .stacked-layout__status { + display: none; +} +:is(.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated):not(.part-grouping-decorator--group) .bubble:not(.bubble--from-user) .bubble__content { + anchor-name: --webchat-flair; + max-width: unset; +} +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated { + padding-inline-start: var(--webchat-spacingHorizontalMNudge); +} +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .collapsible-grouping { + margin-inline-end: var(--webchat-spacingHorizontalXXL); +} +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated.part-grouping-decorator--from-bot .bubble__content { + box-sizing: content-box; + margin-block: calc(var(--webchat-spacingVerticalS) * -1); + margin-inline: calc(var(--webchat-spacingHorizontalS) * -1); + padding-block: var(--webchat-spacingVerticalS); + padding-inline: var(--webchat-spacingHorizontalS); +} +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .stacked-layout .transcript-focus-area__activity-list { + --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalL); +} +.webchat-fluent .part-grouping-decorator.wKGyPWW_variant-copilot-deprecated .bubble:not(.bubble--from-user):after { + margin-block: var(--webchat-spacingVerticalXS); + outline-offset: 5px; + --webchat-part-grouping__bubble--border-radius: calc(var(--webchat-borderRadius2XLarge) - 8px); +} +.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__css-custom-properties { + --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalXL) var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalMNudge); +} +.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__surface { + box-sizing: border-box; + padding-inline-start: var(--webchat-spacingHorizontalMNudge); +} +.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .transcript-focus-area { + --webchat__transcript--spacing: var(--webchat-spacingVerticalM); +} +.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__basic-transcript .webchat__basic-transcript__scrollable { + scrollbar-gutter: stable; +} +.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .transcript-focus-area:focus-visible .transcript-focus-area__content--focused .collapsible-grouping:after { + inset: -2px -4px; +} +.webchat-fluent.theme.wKGyPWW_variant-copilot-deprecated .webchat__basic-transcript .webchat__basic-transcript__filler { + flex-grow: 0; +} \ No newline at end of file diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html new file mode 100644 index 0000000000..54d9447339 --- /dev/null +++ b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side (dark): code block with dark theme navigation (right) + + + + diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-1.png new file mode 100644 index 0000000000..bf91b83151 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-2.png new file mode 100644 index 0000000000..a48fa7ec6c Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-3.png new file mode 100644 index 0000000000..39b6fdf8a4 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-4.png new file mode 100644 index 0000000000..f018f6d3b5 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-5.png new file mode 100644 index 0000000000..72040effcf Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html new file mode 100644 index 0000000000..5db1d61e09 --- /dev/null +++ b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: code block with dark theme navigation (right) + + + + diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-1.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-1.png new file mode 100644 index 0000000000..d5fc442a7a Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-2.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-2.png new file mode 100644 index 0000000000..c35a8e3164 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-3.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-3.png new file mode 100644 index 0000000000..1bd999b776 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-4.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-4.png new file mode 100644 index 0000000000..173316dd95 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-5.png b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-5.png new file mode 100644 index 0000000000..18da55bc0a Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock-dark.custom-variant.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html new file mode 100644 index 0000000000..faa18a0d25 --- /dev/null +++ b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side (dark): code block navigation (right) + + + + diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-1.png new file mode 100644 index 0000000000..d4e65154e0 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-2.png new file mode 100644 index 0000000000..99d4d9a7f8 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-3.png new file mode 100644 index 0000000000..200b9b9265 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-4.png new file mode 100644 index 0000000000..fb6180fc2f Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-5.png new file mode 100644 index 0000000000..6bd98da65a Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html new file mode 100644 index 0000000000..108af83244 --- /dev/null +++ b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: code block navigation (right) + + + + diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-1.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-1.png new file mode 100644 index 0000000000..7428feddeb Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-2.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-2.png new file mode 100644 index 0000000000..298a5972a1 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-3.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-3.png new file mode 100644 index 0000000000..4d477cca52 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-4.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-4.png new file mode 100644 index 0000000000..c6455fe097 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-5.png b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-5.png new file mode 100644 index 0000000000..cfd5b25f16 Binary files /dev/null and b/__tests__/html2/side-by-side/codeblock.custom-variant.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html new file mode 100644 index 0000000000..3eb2657358 --- /dev/null +++ b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side (dark): feedback navigation (right) + + + + diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-1.png new file mode 100644 index 0000000000..1f02c7c50c Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-2.png new file mode 100644 index 0000000000..a04f54cede Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-3.png new file mode 100644 index 0000000000..777df3887f Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-4.png new file mode 100644 index 0000000000..59878cd240 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-5.png new file mode 100644 index 0000000000..9dd7251a90 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-6.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-6.png new file mode 100644 index 0000000000..dd69a46043 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-7.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-7.png new file mode 100644 index 0000000000..78fc226e61 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html new file mode 100644 index 0000000000..c66a626540 --- /dev/null +++ b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: feedback navigation (right) + + + + diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-1.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-1.png new file mode 100644 index 0000000000..bbe4ff489a Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-2.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-2.png new file mode 100644 index 0000000000..8aeb26fd04 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-3.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-3.png new file mode 100644 index 0000000000..9d3d26c5a5 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-4.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-4.png new file mode 100644 index 0000000000..587cd2d5c5 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-5.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-5.png new file mode 100644 index 0000000000..5896affd93 Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-6.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-6.png new file mode 100644 index 0000000000..a5bdb91e5b Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-7.png b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-7.png new file mode 100644 index 0000000000..6a7d7b8e2b Binary files /dev/null and b/__tests__/html2/side-by-side/feedback.custom-variant.navigation.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/index.html b/__tests__/html2/side-by-side/index.html index 886644f65f..a2c9080648 100644 --- a/__tests__/html2/side-by-side/index.html +++ b/__tests__/html2/side-by-side/index.html @@ -4,6 +4,7 @@ Two Chat panes side-by-side using Fluent theme + + + + diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-1.png new file mode 100644 index 0000000000..143c6ab815 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-2.png new file mode 100644 index 0000000000..c278bed74d Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-3.png new file mode 100644 index 0000000000..3450b4fb85 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-4.png new file mode 100644 index 0000000000..623877dba2 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-5.png new file mode 100644 index 0000000000..96d1710adb Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-6.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-6.png new file mode 100644 index 0000000000..3c0f1eca09 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-7.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-7.png new file mode 100644 index 0000000000..96d1710adb Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-8.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-8.png new file mode 100644 index 0000000000..b2b98829d6 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-9.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-9.png new file mode 100644 index 0000000000..395a0e3065 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.dark.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html new file mode 100644 index 0000000000..94e6a2417e --- /dev/null +++ b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: pre-chat navigate (right) + + + + diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-1.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-1.png new file mode 100644 index 0000000000..6c9675c86b Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-2.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-2.png new file mode 100644 index 0000000000..4de06f1fb9 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-3.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-3.png new file mode 100644 index 0000000000..f3da2f958f Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-4.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-4.png new file mode 100644 index 0000000000..c346fc6d0b Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-5.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-5.png new file mode 100644 index 0000000000..39f0cefd76 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-6.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-6.png new file mode 100644 index 0000000000..f2496614e5 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-7.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-7.png new file mode 100644 index 0000000000..39f0cefd76 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-8.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-8.png new file mode 100644 index 0000000000..7c05b2eb1d Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-9.png b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-9.png new file mode 100644 index 0000000000..84e351e8e2 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-chat.custom-variant.navigation.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html b/__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html new file mode 100644 index 0000000000..e8e52617c6 --- /dev/null +++ b/__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side (dark): pre-liner (right) + + + + diff --git a/__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html.snap-1.png b/__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html.snap-1.png new file mode 100644 index 0000000000..5b7c8773e3 Binary files /dev/null and b/__tests__/html2/side-by-side/pre-liner.custom-variant.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/pre-liner.custom-variant.html b/__tests__/html2/side-by-side/pre-liner.custom-variant.html new file mode 100644 index 0000000000..91137689d0 --- /dev/null +++ b/__tests__/html2/side-by-side/pre-liner.custom-variant.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: pre-liner (right) + + + + diff --git a/__tests__/html2/side-by-side/pre-liner.custom-variant.html.snap-1.png b/__tests__/html2/side-by-side/pre-liner.custom-variant.html.snap-1.png new file mode 100644 index 0000000000..7dafc1f4fe Binary files /dev/null and b/__tests__/html2/side-by-side/pre-liner.custom-variant.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/streaming.custom-variant.dark.html b/__tests__/html2/side-by-side/streaming.custom-variant.dark.html new file mode 100644 index 0000000000..b40855d6af --- /dev/null +++ b/__tests__/html2/side-by-side/streaming.custom-variant.dark.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side (dark): streaming (right) + + + + diff --git a/__tests__/html2/side-by-side/streaming.custom-variant.dark.html.snap-1.png b/__tests__/html2/side-by-side/streaming.custom-variant.dark.html.snap-1.png new file mode 100644 index 0000000000..fc45b6435a Binary files /dev/null and b/__tests__/html2/side-by-side/streaming.custom-variant.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/streaming.custom-variant.html b/__tests__/html2/side-by-side/streaming.custom-variant.html new file mode 100644 index 0000000000..712366fbad --- /dev/null +++ b/__tests__/html2/side-by-side/streaming.custom-variant.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: streaming (right) + + + + diff --git a/__tests__/html2/side-by-side/streaming.custom-variant.html.snap-1.png b/__tests__/html2/side-by-side/streaming.custom-variant.html.snap-1.png new file mode 100644 index 0000000000..c0645ec2b7 Binary files /dev/null and b/__tests__/html2/side-by-side/streaming.custom-variant.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html new file mode 100644 index 0000000000..8c0002fa85 --- /dev/null +++ b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side (dark): transcript navigation (left, right) + + + + diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-1.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-1.png new file mode 100644 index 0000000000..1982008e2b Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-10.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-10.png new file mode 100644 index 0000000000..ad93bd623a Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-10.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-11.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-11.png new file mode 100644 index 0000000000..ab175b6884 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-11.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-12.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-12.png new file mode 100644 index 0000000000..7863c1f616 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-12.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-13.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-13.png new file mode 100644 index 0000000000..01bd392ee7 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-13.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-14.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-14.png new file mode 100644 index 0000000000..948793ba7b Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-14.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-15.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-15.png new file mode 100644 index 0000000000..f84da4fbaf Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-15.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-16.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-16.png new file mode 100644 index 0000000000..9eb9af6dc3 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-16.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-17.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-17.png new file mode 100644 index 0000000000..9d9c8510b3 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-17.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-2.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-2.png new file mode 100644 index 0000000000..7f9816ec29 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-3.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-3.png new file mode 100644 index 0000000000..799a10c5bc Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-4.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-4.png new file mode 100644 index 0000000000..2b8358e218 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-5.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-5.png new file mode 100644 index 0000000000..aba6324034 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-6.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-6.png new file mode 100644 index 0000000000..021dbbad3f Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-7.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-7.png new file mode 100644 index 0000000000..2396660ad5 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-8.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-8.png new file mode 100644 index 0000000000..51adda779f Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-9.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-9.png new file mode 100644 index 0000000000..c590863e90 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.dark.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-1.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-1.png new file mode 100644 index 0000000000..16fdd89b1c Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-2.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-2.png new file mode 100644 index 0000000000..a7543b84d8 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-3.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-3.png new file mode 100644 index 0000000000..989fdb7c36 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-4.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-4.png new file mode 100644 index 0000000000..9d1dc2954b Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-5.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-5.png new file mode 100644 index 0000000000..18bd483d34 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-6.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-6.png new file mode 100644 index 0000000000..792cdec83f Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-7.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-7.png new file mode 100644 index 0000000000..2042439938 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-8.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-8.png new file mode 100644 index 0000000000..2697c867ee Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-9.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-9.png new file mode 100644 index 0000000000..23223d79c9 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.fluent.html.snap-9.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html new file mode 100644 index 0000000000..b486c3be37 --- /dev/null +++ b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html @@ -0,0 +1,10 @@ + + + + Two Chat panes side-by-side: transcript navigation (left, right) + + + + diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-1.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-1.png new file mode 100644 index 0000000000..16fdd89b1c Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-1.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-10.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-10.png new file mode 100644 index 0000000000..d3d6a7bd29 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-10.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-11.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-11.png new file mode 100644 index 0000000000..cb74eb7978 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-11.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-12.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-12.png new file mode 100644 index 0000000000..9415974b20 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-12.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-13.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-13.png new file mode 100644 index 0000000000..e320934558 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-13.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-14.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-14.png new file mode 100644 index 0000000000..250283b77b Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-14.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-15.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-15.png new file mode 100644 index 0000000000..92e1898ef5 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-15.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-16.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-16.png new file mode 100644 index 0000000000..26a5ef7602 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-16.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-17.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-17.png new file mode 100644 index 0000000000..20fcd0d6a8 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-17.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-2.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-2.png new file mode 100644 index 0000000000..0bacd88611 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-2.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-3.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-3.png new file mode 100644 index 0000000000..4475f41a41 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-3.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-4.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-4.png new file mode 100644 index 0000000000..4d54eed310 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-4.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-5.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-5.png new file mode 100644 index 0000000000..de51f20dfe Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-5.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-6.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-6.png new file mode 100644 index 0000000000..de50abc3b8 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-6.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-7.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-7.png new file mode 100644 index 0000000000..a714b86a88 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-7.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-8.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-8.png new file mode 100644 index 0000000000..0c85164f38 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-8.png differ diff --git a/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-9.png b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-9.png new file mode 100644 index 0000000000..972c1130a4 Binary files /dev/null and b/__tests__/html2/side-by-side/transcript.custom-variant.navigation.html.snap-9.png differ diff --git a/packages/fluent-theme/src/bundle.ts b/packages/fluent-theme/src/bundle.ts index a94a9aa5ce..93a7a7cf07 100644 --- a/packages/fluent-theme/src/bundle.ts +++ b/packages/fluent-theme/src/bundle.ts @@ -1,10 +1,12 @@ +import { CopilotMessageHeader, FluentThemeProvider, PartGroupDecorator, testIds } from './index'; import { SendBox as FluentSendBox } from './components/sendBox/index'; -import { FluentThemeProvider, testIds } from './index'; (globalThis as any).WebChat = { ...(globalThis as any).WebChat, - FluentThemeProvider, + CopilotMessageHeader, FluentSendBox, + FluentThemeProvider, + PartGroupDecorator, testIds: { ...(globalThis as any).WebChat?.testIds, ...testIds diff --git a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx index 17b84dbc4a..6957fb797d 100644 --- a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx +++ b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx @@ -11,7 +11,8 @@ import styles from './PartGroupingDecorator.module.css'; const partGroupingDecoratorPropsSchema = pipe( object({ activities: pipe(array(custom(value => safeParse(object({}), value).success)), readonly()), - children: optional(reactNode()) + children: optional(reactNode()), + header: optional(reactNode()) }), readonly() ); @@ -24,7 +25,8 @@ type PartGroupingDecoratorProps = { function PartGroupingDecorator(props: PartGroupingDecoratorProps) { const { - activities: [activity, ...restActivities] + activities: [activity, ...restActivities], + header } = validateProps(partGroupingDecoratorPropsSchema, props); const classNames = useStyles(styles); @@ -51,6 +53,7 @@ function PartGroupingDecorator(props: PartGroupingDecoratorProps) { variantClassName )} > + {header} ); diff --git a/packages/fluent-theme/src/index.ts b/packages/fluent-theme/src/index.ts index 1a3112f22d..da893b6174 100644 --- a/packages/fluent-theme/src/index.ts +++ b/packages/fluent-theme/src/index.ts @@ -1,8 +1,10 @@ -import { SendBox as FluentSendBox } from './components/sendBox/index'; -import FluentThemeProvider from './private/FluentThemeProvider'; import testIds from './testIds'; +import CopilotMessageHeader from './components/activity/CopilotMessageHeader'; +import PartGroupDecorator from './components/activity/PartGroupingDecorator'; +import FluentThemeProvider from './private/FluentThemeProvider'; +import { SendBox as FluentSendBox } from './components/sendBox/index'; -export { FluentSendBox, FluentThemeProvider, testIds }; +export { CopilotMessageHeader, FluentSendBox, FluentThemeProvider, PartGroupDecorator, testIds }; // #region Build info import buildInfo from './buildInfo'; diff --git a/packages/fluent-theme/src/private/VariantComposer.ts b/packages/fluent-theme/src/private/VariantComposer.ts index acbb3eb5ce..b6c0694aab 100644 --- a/packages/fluent-theme/src/private/VariantComposer.ts +++ b/packages/fluent-theme/src/private/VariantComposer.ts @@ -1,13 +1,17 @@ import { createContext } from 'react'; -import { literal, union, type InferOutput } from 'valibot'; +import { custom, type InferOutput } from 'valibot'; import createComposer from './createComposer'; -const variantNameSchema = union([literal(''), literal('copilot'), literal('fluent')]); +const supportedVariants = ['', 'copilot', 'fluent'] as const; -type VariantName = InferOutput; +const variantNameSchema = custom<'' | 'fluent' | 'copilot' | `${string} ${string}`>( + value => + typeof value === 'string' && + (supportedVariants.includes(value as (typeof supportedVariants)[number]) || /\s+/u.test(value as string)) +); -export type VariantList = `${VariantName}`; +export type VariantList = InferOutput; export type VariantContextType = { variant: VariantList; diff --git a/packages/fluent-theme/src/styles/useVariantClassName.ts b/packages/fluent-theme/src/styles/useVariantClassName.ts index beb8471feb..802128f7cb 100644 --- a/packages/fluent-theme/src/styles/useVariantClassName.ts +++ b/packages/fluent-theme/src/styles/useVariantClassName.ts @@ -8,7 +8,7 @@ export default function useVariantClassName(styles: return useMemo( () => variants - .map(variant => classNames[`variant-${variant}`]) + .map(variant => classNames[`variant-${variant}`] || variant) .filter(value => value) .join(' '), [classNames, variants]