Skip to content

Commit 389edd4

Browse files
OEvgenyOEvgeny
committed
feat: copilot variant styling improvements
1 parent f7a730f commit 389edd4

File tree

69 files changed

+1162
-138
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1162
-138
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ Breaking changes in this release:
318318
- Activity status, in PR [#5669](https://github.com/microsoft/BotFramework-WebChat/pull/5669), by [@OEvgeny](https://github.com/OEvgeny)
319319
- Text attachment and related components, in PR [#5670](https://github.com/microsoft/BotFramework-WebChat/pull/5670), by [@OEvgeny](https://github.com/OEvgeny)
320320
- (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)
321+
- Improved adaptive cards rendering in copilot variant, in PR [#5682](https://github.com/microsoft/BotFramework-WebChat/pull/5682), by [@OEvgeny](https://github.com/OEvgeny)
321322

322323
### Deprecated
323324

‎__tests__/assets/custom-element/custom-element.js‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,5 @@
11
/* eslint-env browser */
22

3-
// #region TODO: Remove me after we bump Chrome to v117+
4-
const customElementNames = customElements.getName instanceof Function ? null : new WeakMap();
5-
6-
export function getCustomElementName(customElementConstructor) {
7-
if (customElementNames) {
8-
return customElementNames.get(customElementConstructor);
9-
}
10-
return customElements.getName(customElementConstructor);
11-
}
12-
13-
function setCustomElementName(customElementConstructor, name) {
14-
if (customElementNames) {
15-
customElementNames.set(customElementConstructor, name);
16-
}
17-
// No need to set for browsers that support customElements.getName()
18-
}
19-
// #endregion
20-
213
export function customElement(elementKey, createElementClass) {
224
const elementRegistration = document.querySelector(`element-registration[element-key="${elementKey}"]`);
235
elementRegistration.elementConstructor = createElementClass(elementRegistration);
@@ -73,7 +55,6 @@ function initDocument(elementRegistration, currentDocument) {
7355
}
7456

7557
customElements.define(elementName, constructor, constructor.options);
76-
setCustomElementName(constructor, elementName);
7758

7859
result.resolve(constructor);
7960
},

‎__tests__/assets/custom-element/keyboard-event.ce.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
<kbd></kbd>
107107
</template>
108108
<script type="module">
109-
import { customElement, getCustomElementName } from '/assets/custom-element/custom-element.js';
109+
import { customElement } from '/assets/custom-element/custom-element.js';
110110

111111
customElement('keyboard-event', currentDocument =>
112112
class KeyboardEventElement extends HTMLElement {
@@ -130,8 +130,7 @@
130130
}
131131

132132
static listenKeyboardEvents(scope = window) {
133-
// const myTagName = customElements.getName(this)
134-
const myTagName = getCustomElementName(this);
133+
const myTagName = customElements.getName(this)
135134
const abortController = new AbortController();
136135
scope.addEventListener('keydown', event => {
137136
const element = document.createElement(myTagName);

‎__tests__/assets/custom-element/test-shell.ce.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Test Shell custom element</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
body {
12+
margin: 0;
13+
}
14+
test-shell {
15+
display: grid;
16+
grid-template-rows: min-content auto;
17+
18+
#webchat {
19+
height: 640px;
20+
width: 380px;
21+
transition: width 0.2s 0.2s ease-out;
22+
}
23+
24+
.fui-FluentProvider {
25+
display: contents;
26+
}
27+
28+
.webchat__surface {
29+
overflow: hidden;
30+
}
31+
}
32+
33+
test-shell:has(.theme.variant-copilot) > #webchat {
34+
width: 680px;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<template>
40+
<style type="text/css">
41+
* {
42+
box-sizing: border-box;
43+
}
44+
45+
:host([data-theme="light"]) {
46+
--body-background: linear-gradient(135deg, #e0f7ff 0%, #ffe5f0 100%);
47+
--webchat-container-background: linear-gradient(160deg, #ffffff22 0%, #f8f9facc 100%);
48+
--notice-color: #495057;
49+
--notice-background: #f8f9fa77;
50+
--notice-border: 1px solid #dee2e6;
51+
}
52+
53+
:host([data-theme="dark"]) {
54+
--body-background: linear-gradient(135deg, #0b1a2b 0%, #2c001e 100%);
55+
--webchat-container-background: linear-gradient(160deg, #1a1a1acc 0%, #222222cc 100%);
56+
--notice-color: #f8f9fa;
57+
--notice-background: #49505777;
58+
--notice-border: 1px solid #666666;
59+
}
60+
61+
:host {
62+
margin: 0;
63+
min-height: 100vh;
64+
padding: 30px;
65+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
66+
Oxygen, Ubuntu, Cantarell, sans-serif;
67+
background: var(--body-background);
68+
display: grid;
69+
gap: 20px;
70+
71+
opacity: 0;
72+
transition: opacity 0.3s 0.7s ease-in-out;
73+
}
74+
75+
:host([data-theme="dark"]), :host([data-theme="light"]) {
76+
opacity: 1;
77+
}
78+
79+
.webchat-container {
80+
border-radius: 16px;
81+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
82+
background: var(--webchat-container-background);
83+
position: relative;
84+
display: grid;
85+
place-self: center;
86+
87+
.loader-notice {
88+
opacity: 0.33;
89+
place-self: center;
90+
}
91+
}
92+
93+
.notice {
94+
background: var(--notice-background);
95+
border: var(--notice-border);
96+
color: var(--notice-color);
97+
padding: 15px;
98+
border-radius: 8px;
99+
max-width: 440px;
100+
font-size: 14px;
101+
place-self: start center;
102+
103+
&::after {
104+
content: ' (theme=' attr(data-theme)')' ' (variant=' attr(data-variant)')';
105+
opacity: 0.75;
106+
}
107+
}
108+
</style>
109+
<div class="notice">
110+
</div>
111+
<div class="webchat-container">
112+
<slot>
113+
<div class="loader-notice">
114+
Web Chat root element is not provided.
115+
</div>
116+
</slot>
117+
</div>
118+
</template>
119+
<script type="module">
120+
import { customElement } from '/assets/custom-element/custom-element.js';
121+
122+
customElement('test-shell', currentDocument =>
123+
class TestShellElement extends HTMLElement {
124+
constructor() {
125+
super();
126+
const template = currentDocument.querySelector('template');
127+
const fragment = template.content.cloneNode(true);
128+
129+
this.notice = fragment.querySelector('.notice');
130+
131+
this.initDataset();
132+
this.initNotice();
133+
134+
const shadowRoot = this.attachShadow({ mode: 'open' });
135+
shadowRoot.appendChild(fragment);
136+
}
137+
138+
initNotice() {
139+
this.notice.textContent = document.title;
140+
141+
Object.assign(this.notice.dataset, this.dataset);
142+
}
143+
144+
initDataset() {
145+
const params = new URLSearchParams(location.search)
146+
this.dataset.theme = params.get('fluent-theme') || 'light';
147+
this.dataset.fluentTheme = this.dataset.theme;
148+
this.dataset.variant = params.get('variant');
149+
}
150+
}
151+
);
152+
</script>
153+
</body>
154+
</html>

‎__tests__/assets/esm/postActivity.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export function postActivity(adapter, activityOrString) {
2+
const activityTemplate = {
3+
type: 'message',
4+
from: { id: 'user', name: 'User', role: 'user' },
5+
timestamp: new Date().toISOString()
6+
};
7+
8+
return new Promise((resolve, reject) =>
9+
adapter
10+
.postActivity(
11+
Object.assign(
12+
activityTemplate,
13+
typeof activityOrString === 'string' ? { text: activityOrString } : activityOrString
14+
)
15+
)
16+
.subscribe(resolve, reject)
17+
);
18+
}

‎__tests__/assets/esm/test.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* eslint-env browser */
2+
import '/test-harness.mjs';
3+
import '/test-page-object.mjs';
4+
import * as WebChat from 'botframework-webchat';
5+
6+
Object.assign(window, { WebChat });
7+
8+
const createHostStub = (host = {}) => ({
9+
...Object.fromEntries(
10+
Object.keys(host).map(methodName => [
11+
methodName,
12+
// eslint-disable-next-line no-console
13+
(...args) => console.info(`host.${methodName}()`, ...args)
14+
])
15+
),
16+
run: fn => fn()
17+
});
18+
19+
const isWebDriver = !!navigator.webdriver;
20+
21+
export const host = isWebDriver ? window.host : createHostStub(window.host);
22+
23+
export const { pageConditions, testHelpers } = window;
24+
25+
export const run = host.run || window.run;

‎__tests__/html2/activity/collapsible.copilot.dark.html.snap-8.png‎

-674 Bytes
Loading

‎__tests__/html2/activity/collapsible.copilot.html.snap-8.png‎

-903 Bytes
Loading

‎__tests__/html2/activity/collapsible.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@
66
<script type="importmap">
77
{
88
"imports": {
9-
"react": "https://esm.sh/react@18.3.1",
10-
"react-dom": "https://esm.sh/react-dom@18.3.1",
11-
"react-dom/": "https://esm.sh/react-dom@18.3.1/",
9+
"@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
10+
"@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
1211
"@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
13-
"@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme"
12+
"react": "https://esm.sh/react@18",
13+
"react-dom": "https://esm.sh/react-dom@18",
14+
"react-dom/": "https://esm.sh/react-dom@18/",
15+
"react-jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
1416
}
1517
}
1618
</script>
@@ -34,10 +36,11 @@
3436
<body>
3537
<main id="webchat"></main>
3638
<script type="module">
39+
import { FluentProvider } from '@fluentui/react-provider';
40+
import { createDarkTheme, webLightTheme } from '@fluentui/tokens';
41+
import { waitFor } from '@testduet/wait-for';
3742
import React from 'react';
3843
import { createRoot } from 'react-dom/client';
39-
import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';
40-
import { waitFor } from '@testduet/wait-for';
4144

4245
async function openLastActivity() {
4346
let summaries;

‎__tests__/html2/activity/message-status.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<script type="importmap">
88
{
99
"imports": {
10-
"@fluentui/react-provider": "https://esm.sh/@fluentui/react-provider?deps=react@18&exports=FluentProvider",
11-
"@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
10+
"@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
11+
"@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
1212
"@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
1313
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
1414
"botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
@@ -18,7 +18,8 @@
1818
"botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
1919
"react": "https://esm.sh/react@18",
2020
"react-dom": "https://esm.sh/react-dom@18",
21-
"react-dom/": "https://esm.sh/react-dom@18/"
21+
"react-dom/": "https://esm.sh/react-dom@18/",
22+
"react-jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
2223
}
2324
}
2425
</script>

0 commit comments

Comments
 (0)