Skip to content

Commit 6c3063d

Browse files
OEvgenycompulim
OEvgeny
and
compulim
authored
feat: Add decorators (#5205)
* Add decorators * Fix lint * Rework into a single ActivityBorder middleware stack * Add test * Add William's suggestions Co-authored-by: William Wong <compulim@users.noreply.github.com> * Polish * Remove Fluent Decorator and update test * Roll own Proxy implementation to bypass missing context * Update test * Rework according to RCoR changes * Changelog * Tweak changelog * Update RCoR * Sort * Typo and sort * Better type checking * Sort * Sort * Sort * Newline * Newline * Code styling * Props optional/undefined * Code styling * Clean up * Use EmptyObject for props instead of {} any * Sort and typo * Converge templateMiddleware and build user story * Fix no middleware and stabilize middleware prop * Refactor init * Fix type --------- Co-authored-by: William Wong <compulim@users.noreply.github.com>
1 parent 745a603 commit 6c3063d

39 files changed

Lines changed: 1103 additions & 145 deletions

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
2424

2525
## [Unreleased]
2626

27+
### Added
28+
29+
- (Experimental) Added initial decorators support, in PR [#5205](https://github.com/microsoft/BotFramework-WebChat/pull/5205), by [@OEvgeny](https://github.com/OEvgeny)
30+
- Introduced internal `botframework-webchat-api/decorator` import, in PR [#5205](https://github.com/microsoft/BotFramework-WebChat/pull/5205), by [@OEvgeny](https://github.com/OEvgeny)
31+
- Added `DecoratorComposer` and `ActivityDecorator` to be used for decorating activity border, in PR [#5205](https://github.com/microsoft/BotFramework-WebChat/pull/5205), by [@OEvgeny](https://github.com/OEvgeny)
32+
2733
### Fixed
2834

2935
- Improved performance for `useActivityWithRenderer`, in PR [#5172](https://github.com/microsoft/BotFramework-WebChat/pull/5172), by [@OEvgeny](https://github.com/OEvgeny)

‎__tests__/__image_snapshots__/html/with-decorator-js-fluent-theme-applied-with-decorators-1-snap.png‎

10.8 KB
Loading

‎__tests__/__image_snapshots__/html/with-decorator-js-fluent-theme-applied-with-decorators-2-snap.png‎

13.6 KB
Loading

‎__tests__/html/fluentTheme/withDecorator.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
12+
<style>
13+
.flair {
14+
border-radius: inherit;
15+
border: solid 2px red;
16+
}
17+
18+
.loader {
19+
border-bottom: solid 4px blue;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<main id="webchat"></main>
25+
<script type="text/babel">
26+
run(async function () {
27+
const {
28+
React,
29+
ReactDOM: { render },
30+
WebChat: {
31+
decorator: { DecoratorComposer },
32+
FluentThemeProvider,
33+
ReactWebChat
34+
}
35+
} = window; // Imports in UMD fashion.
36+
37+
function Flair({ children }) {
38+
return <div className="flair">{children}</div>;
39+
}
40+
41+
function Loader({ children }) {
42+
return <div className="loader">{children}</div>;
43+
}
44+
45+
const decoratorMiddleware = [
46+
init => init === 'activity border' && (next => request => (request.state === 'completion' ? Flair : next(request))),
47+
init => init === 'activity border' && (next => request => (request.state === 'informative' ? Loader : next(request)))
48+
];
49+
50+
const { directLine, store } = testHelpers.createDirectLineEmulator();
51+
52+
const App = () => <ReactWebChat
53+
directLine={directLine}
54+
store={store}
55+
styleOptions={{
56+
bubbleBorderRadius: 10,
57+
typingAnimationBackgroundImage: `url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAUACgDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAYCBwMFCP/EACsQAAECBQIEBQUAAAAAAAAAAAECAwAEBQYRBxITIjFBMlFhccFScoGh8f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD0lctx023JVD9UeKOIcNoSNylkdcCMbauSmXHLOPUx8r4ZAcQtO1SM9Mj5iO1gtWo1syc7S2zMKYSptbIPNgnII8/5HBpRZ9RpaKjNVVCpUzLPAQ1nmA7qPl6fmAondRrcaqhkVTiiQrYXgglsH7vnpHc3DcNNoEimaqT4Q2s4bCRuUs+gEaLd05uNFVMmiS3o3YEwFDhlP1Z7e3WLzUuzahUKHRk0zM07TmeApvOFLGEjcM9+Xp6wFnbN0Uu5GnF0x4qW1je2tO1Sc9Djy9oRD6QWlU6PPzVSqjRlgtksttKPMcqBKiO3h/cIDacIQgEIQgEIQgP/2Q==')`
58+
}}
59+
/>;
60+
61+
render(
62+
<FluentThemeProvider>
63+
<DecoratorComposer middleware={decoratorMiddleware}>
64+
<App />
65+
</DecoratorComposer>
66+
</FluentThemeProvider>,
67+
document.getElementById('webchat')
68+
);
69+
70+
await pageConditions.uiConnected();
71+
72+
await directLine.emulateIncomingActivity({
73+
channelData: {
74+
streamType: 'informative'
75+
},
76+
from: {
77+
id: 'u-00001',
78+
name: 'Bot',
79+
role: 'bot'
80+
},
81+
id: 'm-00001',
82+
text: 'Working on it...',
83+
type: 'message'
84+
});
85+
86+
await directLine.emulateIncomingActivity({
87+
channelData: {
88+
streamType: 'informative'
89+
},
90+
from: {
91+
id: 'u-00001',
92+
name: 'Bot',
93+
role: 'bot'
94+
},
95+
id: 't-00001',
96+
text: 'Working on it...',
97+
type: 'typing'
98+
});
99+
100+
await pageConditions.typingIndicatorShown();
101+
await pageConditions.numActivitiesShown(1);
102+
await host.snapshot();
103+
104+
const attachments = [
105+
{
106+
content: {
107+
type: 'AdaptiveCard',
108+
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
109+
version: '1.5',
110+
actions: [
111+
{ type: 'Action.Submit', title: 'Button 1' },
112+
{
113+
type: 'Action.ShowCard',
114+
title: 'Show card',
115+
card: {
116+
type: 'AdaptiveCard',
117+
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
118+
version: '1.5',
119+
actions: [
120+
{ type: 'Action.Submit', title: 'Button 2' },
121+
{ type: 'Action.Submit', title: 'Button 3' }
122+
]
123+
}
124+
}
125+
]
126+
},
127+
contentType: 'application/vnd.microsoft.card.adaptive'
128+
}
129+
];
130+
await directLine.emulateIncomingActivity({
131+
id: 'm-00001',
132+
from: {
133+
id: 'u-00001',
134+
name: 'Bot',
135+
role: 'bot'
136+
},
137+
text: 'Work completed!',
138+
channelData: { streamType: 'completion' },
139+
attachments
140+
});
141+
142+
await pageConditions.numActivitiesShown(1);
143+
144+
// THEN: Should render the activity.
145+
await host.snapshot();
146+
});
147+
</script>
148+
</body>
149+
</html>

‎__tests__/html/fluentTheme/withDecorator.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('Fluent theme applied', () => {
4+
test('with decorators', () => runHTML('fluentTheme/withDecorator'));
5+
});

0 commit comments

Comments
 (0)