Skip to content

Commit e78ed2d

Browse files
OEvgenyCopilotcompulim
authored
feat: copilot variant styling improvements (#5682)
* feat: copilot variant styling improvements * Self review * Vendor make * Cleanup * Fix permissions * Revert make.com vendoring, download with SHA-256 verification (#5684) * Initial plan * Revert make.com vendoring, add SHA verification and download from Internet Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> * Security: Move chmod after SHA verification Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> * Remove makeComSha256 field, hardcode SHA in build:pre:setup script Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> * Reorder build:pre script: local-dependencies before setup Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> * Use more specific .gitignore patterns with leading/trailing slashes Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: compulim <1622400+compulim@users.noreply.github.com> Co-authored-by: William Wong <compulim@users.noreply.github.com>
1 parent 67afe04 commit e78ed2d

File tree

70 files changed

+1158
-139
lines changed

Some content is hidden

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

70 files changed

+1158
-139
lines changed

‎.dockerignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
!/packages/test/fluent-bundle/dist
1111
!/packages/test/harness/dist
1212
!/packages/test/page-object/dist
13+
!/packages/test/test-assets/out
1314
!/packages/test/web-server/dist
1415
!/serve-test.json

‎.github/workflows/pull-request-validation.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ jobs:
6666
./packages/fluent-theme/static/
6767
./packages/test/harness/
6868
./packages/test/page-object/dist/
69+
./packages/test/test-assets/out/
6970
./packages/test/web-server/dist/
7071
./serve-test.json
7172
./testharness.dockerfile

‎CHANGELOG.md‎

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

323324
### Deprecated
324325

‎__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

0 commit comments

Comments
 (0)