Skip to content

Commit f0c5587

Browse files
OEvgenyOEvgeny
committed
Add Web Chat test and more icons customization
1 parent 4918ce1 commit f0c5587

6 files changed

Lines changed: 100 additions & 69 deletions

File tree

‎__tests__/html2/basic/customIcons.fluent.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Renders custom icons (fluent)</title>
5+
<script>
6+
location = './customIcons?theme=fluent';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>

‎__tests__/html2/basic/customIcons.fluent.html.snap-1.png‎

17.5 KB
Loading

‎__tests__/html2/basic/customIcons.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<title>Render custom icons replaced via CSS</title>
5+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
6+
<script type="importmap">
7+
{
8+
"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/",
12+
"@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme"
13+
}
14+
}
15+
</script>
16+
<script crossorigin="anonymous" src="/test-harness.js"></script>
17+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
18+
<script type="module">
19+
import React from 'react';
20+
import ReactDOM from 'react-dom';
21+
22+
window.React = React;
23+
window.ReactDOM = ReactDOM;
24+
</script>
25+
<script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
26+
<script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
27+
<style>
28+
#webchat .webchat__send-box__main .component-icon.icon--send,
29+
#webchat .sendbox__toolbar-button .fluent-icon.icon--send {
30+
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 22 22'%3E%3Cpath fill='%23000' d='M4 18.5v-13L19.423 12zM5 17l11.85-5L5 7v3.885L9.846 12L5 13.116zm0 0V7z'/%3E%3C/svg%3E");
31+
--webchat__component-icon--mask: var(--icon);
32+
--webchat__fluent-icon--mask: var(--icon);
33+
}
34+
35+
#webchat .webchat__send-box__main .component-icon.icon--attachment,
36+
#webchat .sendbox__toolbar-button .fluent-icon.icon--attachment {
37+
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 22 22'%3E%3Cpath fill='%23000' d='M16.346 11.385V6.769h1v4.616zm-5.538 5.457q-.452-.269-.726-.734q-.274-.466-.274-1.031V6.769h1zM11.96 21q-2.271 0-3.846-1.595t-1.575-3.867v-8.73q0-1.587 1.09-2.697Q8.722 3 10.309 3t2.678 1.11t1.091 2.698V14h-1V6.789q-.006-1.166-.802-1.977T10.308 4q-1.163 0-1.966.821q-.804.821-.804 1.987v8.73q-.005 1.853 1.283 3.157Q10.11 20 11.961 20q.556 0 1.056-.124t.945-.372v1.11q-.468.2-.972.293q-.505.093-1.03.093m4.386-1v-2.616h-2.615v-1h2.615V13.77h1v2.615h2.616v1h-2.616V20z'/%3E%3C/svg%3E");
38+
--webchat__component-icon--mask: var(--icon);
39+
--webchat__fluent-icon--mask: var(--icon);
40+
}
41+
42+
#webchat .webchat__activity-button .component-icon.icon--view-code {
43+
--webchat__component-icon--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 17.308L2.692 12L8 6.692l.714.714l-4.6 4.6L8.708 16.6zm8 0l-.713-.714l4.6-4.6L15.292 7.4L16 6.692L21.308 12z'/%3E%3C/svg%3E");
44+
}
45+
46+
#webchat .webchat__activity-button .component-icon.icon--copy {
47+
--webchat__component-icon--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.116 17q-.691 0-1.153-.462T7.5 15.385V4.615q0-.69.463-1.153T9.116 3h7.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T16.884 17zm0-1h7.769q.23 0 .423-.192t.192-.423V4.615q0-.23-.192-.423T16.884 4H9.116q-.231 0-.424.192t-.192.423v10.77q0 .23.192.423t.423.192m-3 4q-.69 0-1.153-.462T4.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h8.77v1zM8.5 16V4z'/%3E%3C/svg%3E");
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<main id="webchat"></main>
53+
<script type="module">
54+
run(async function () {
55+
const { directLine, store } = testHelpers.createDirectLineEmulator();
56+
57+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
58+
59+
await pageConditions.uiConnected();
60+
61+
const aiMessageEntity = {
62+
'@context': 'https://schema.org',
63+
'@id': '',
64+
'@type': 'Message',
65+
keywords: ['AIGeneratedContent', 'AllowCopy'],
66+
type: 'https://schema.org/Message'
67+
};
68+
69+
directLine.emulateIncomingActivity({
70+
from: { role: 'bot' },
71+
entities: [{
72+
...aiMessageEntity,
73+
isBasedOn: {
74+
'@type': 'SoftwareSourceCode',
75+
'programmingLanguage': 'python',
76+
"text": `print("Hello, World!")`
77+
}
78+
}],
79+
type: "message",
80+
text: `This example demonstrates custom icons in Web Chat`,
81+
});
82+
83+
await pageConditions.numActivitiesShown(1);
84+
85+
// THEN: Should render the icon.
86+
await host.snapshot('local');
87+
});
88+
</script>
89+
</body>
90+
</html>

‎__tests__/html2/basic/customIcons.html.snap-1.png‎

18 KB
Loading

‎__tests__/html2/fluentTheme/simple.customIcons.html‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎__tests__/html2/fluentTheme/simple.customIcons.html.snap-1.png‎

-14.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)