Skip to content

feat: template decorator #5510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OEvgeny merged 3 commits into from
Jul 10, 2025
Merged

feat: template decorator #5510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
12365da
feat: template decorator
OEvgeny Jul 8, 2025
06dfc28
Fix tests
OEvgeny Jul 9, 2025
ad70bb7
Changelog
OEvgeny Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
- `useGroupActivities` hook is being deprecated in favor of the `useGroupActivitiesByName` hook. The hook will be removed on or after 2027-05-04
- `useSuggestedActions()` hook is being deprecated in favor of the `useSuggestedActionsHooks().useSuggestedActions()` hook. The hook will be removed on or after 2027-05-30
- The following middleware should be created using their respective factory function:
- `activityBorderDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
- `activityBorderDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504), [#5510](https://github.com/microsoft/BotFramework-WebChat/pull/5510)
- `activityGroupingDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
- `sendBoxMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
- `sendBoxToolbarMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
Expand Down
257 changes: 130 additions & 127 deletions __tests__/html/fluentTheme/withCustomDecorator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,138 +1,141 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
<style>
.flair {
border-radius: inherit;
border: solid 2px red;

<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
<style>
.flair {
border-radius: inherit;
border: solid 2px red;
}

.loader {
border-bottom: solid 4px blue;
}
</style>
</head>

<body>
<main id="webchat"></main>
<script type="text/babel">
run(async function () {
const {
React,
ReactDOM: { render },
WebChat: {
decorator: { createActivityBorderMiddleware, DecoratorComposer },
FluentThemeProvider,
ReactWebChat
}
} = window; // Imports in UMD fashion.

function Flair({ request, Next, ...props }) {
return <div className={request.livestreamingState === 'completing' ? 'flair' : ''}>
<Next {...props} showFlair={false} />
</div>;
}

.loader {
border-bottom: solid 4px blue;
function Loader({ request, Next, ...props }) {
return <div className={request.livestreamingState === 'preparing' ? 'loader' : ''}>
<Next {...props} showLoader={false} />
</div>;
}
</style>
</head>
<body>
<main id="webchat"></main>
<script type="text/babel">
run(async function () {
const {
React,
ReactDOM: { render },
WebChat: {
decorator: { createActivityBorderMiddleware, DecoratorComposer },
FluentThemeProvider,
ReactWebChat
}
} = window; // Imports in UMD fashion.

function Flair({ children }) {
return <div className="flair">{children}</div>;
}

function Loader({ children }) {
return <div className="loader">{children}</div>;
}
const decoratorMiddleware = [
createActivityBorderMiddleware(Flair),
createActivityBorderMiddleware(Loader)
];

const decoratorMiddleware = [
createActivityBorderMiddleware(
next => request => (request.livestreamingState === 'completing' ? Flair : next(request))
),
createActivityBorderMiddleware(
next => request => (request.livestreamingState === 'preparing' ? Loader : next(request))
)
];

const { directLine, store } = testHelpers.createDirectLineEmulator();

const App = () => (
<ReactWebChat
directLine={directLine}
store={store}
styleOptions={{
bubbleBorderRadius: 10,
typingAnimationBackgroundImage: `url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAUACgDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAYCBwMFCP/EACsQAAECBQIEBQUAAAAAAAAAAAECAwAEBQYRBxITIjFBMlFhccFScoGh8f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD0lctx023JVD9UeKOIcNoSNylkdcCMbauSmXHLOPUx8r4ZAcQtO1SM9Mj5iO1gtWo1syc7S2zMKYSptbIPNgnII8/5HBpRZ9RpaKjNVVCpUzLPAQ1nmA7qPl6fmAondRrcaqhkVTiiQrYXgglsH7vnpHc3DcNNoEimaqT4Q2s4bCRuUs+gEaLd05uNFVMmiS3o3YEwFDhlP1Z7e3WLzUuzahUKHRk0zM07TmeApvOFLGEjcM9+Xp6wFnbN0Uu5GnF0x4qW1je2tO1Sc9Djy9oRD6QWlU6PPzVSqjRlgtksttKPMcqBKiO3h/cIDacIQgEIQgEIQgP/2Q==')`
}}
/>
);

render(
<FluentThemeProvider>
<DecoratorComposer middleware={decoratorMiddleware}>
<App />
</DecoratorComposer>
</FluentThemeProvider>,
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await directLine.emulateIncomingActivity({
channelData: { streamSequence: 1, streamType: 'informative' },
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
},
id: 't-00001',
text: 'Working on it...',
type: 'typing'
});

await pageConditions.numActivitiesShown(1);
await host.snapshot();

const attachments = [
{
content: {
type: 'AdaptiveCard',
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
actions: [
{ type: 'Action.Submit', title: 'Button 1' },
{
type: 'Action.ShowCard',
title: 'Show card',
card: {
type: 'AdaptiveCard',
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
actions: [
{ type: 'Action.Submit', title: 'Button 2' },
{ type: 'Action.Submit', title: 'Button 3' }
]
}
const { directLine, store } = testHelpers.createDirectLineEmulator();

const App = () => (
<ReactWebChat
directLine={directLine}
store={store}
styleOptions={{
bubbleBorderRadius: 10,
typingAnimationBackgroundImage: `url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAUACgDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAYCBwMFCP/EACsQAAECBQIEBQUAAAAAAAAAAAECAwAEBQYRBxITIjFBMlFhccFScoGh8f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD0lctx023JVD9UeKOIcNoSNylkdcCMbauSmXHLOPUx8r4ZAcQtO1SM9Mj5iO1gtWo1syc7S2zMKYSptbIPNgnII8/5HBpRZ9RpaKjNVVCpUzLPAQ1nmA7qPl6fmAondRrcaqhkVTiiQrYXgglsH7vnpHc3DcNNoEimaqT4Q2s4bCRuUs+gEaLd05uNFVMmiS3o3YEwFDhlP1Z7e3WLzUuzahUKHRk0zM07TmeApvOFLGEjcM9+Xp6wFnbN0Uu5GnF0x4qW1je2tO1Sc9Djy9oRD6QWlU6PPzVSqjRlgtksttKPMcqBKiO3h/cIDacIQgEIQgEIQgP/2Q==')`
}}
/>
);

render(
<FluentThemeProvider>
<DecoratorComposer middleware={decoratorMiddleware}>
<App />
</DecoratorComposer>
</FluentThemeProvider>,
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await directLine.emulateIncomingActivity({
channelData: { streamSequence: 1, streamType: 'informative' },
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
},
id: 't-00001',
text: 'Working on it...',
type: 'typing'
});

await pageConditions.numActivitiesShown(1);
await host.snapshot();

const attachments = [
{
content: {
type: 'AdaptiveCard',
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
actions: [
{ type: 'Action.Submit', title: 'Button 1' },
{
type: 'Action.ShowCard',
title: 'Show card',
card: {
type: 'AdaptiveCard',
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
actions: [
{ type: 'Action.Submit', title: 'Button 2' },
{ type: 'Action.Submit', title: 'Button 3' }
]
}
]
},
contentType: 'application/vnd.microsoft.card.adaptive'
}
];
await directLine.emulateIncomingActivity({
attachments,
channelData: { streamId: 't-00001', streamType: 'final' },
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
}
]
},
id: 'm-00001',
text: 'Work completed!'
});
contentType: 'application/vnd.microsoft.card.adaptive'
}
];
await directLine.emulateIncomingActivity({
attachments,
channelData: { streamId: 't-00001', streamType: 'final' },
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
},
id: 'm-00001',
text: 'Work completed!'
});

await pageConditions.numActivitiesShown(1);
await pageConditions.numActivitiesShown(1);

// THEN: Should render the activity.
await host.snapshot();
});
</script>
</body>
</html>
// THEN: Should render the activity.
await host.snapshot();
});
</script>
</body>

</html>
31 changes: 16 additions & 15 deletions __tests__/html2/livestream/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

.flair--ongoing {
outline-color: green;
border-radius: var(--webchat-borderRadiusXLarge);
}

.loader {
Expand All @@ -39,28 +40,28 @@
}
} = window; // Imports in UMD fashion.

function Flair({ children }) {
return <div className="flair">{children}</div>;
function Flair({ request, Next, ...props }) {
return <div className={request.livestreamingState === 'completing' ? 'flair' : ''}>
<Next {...props} />
</div>;
}

function FlairOngoing({ children }) {
return <div className="flair flair--ongoing">{children}</div>;
function FlairOngoing({ request, Next, ...props }) {
return <div className={request.livestreamingState === 'ongoing' ? 'flair flair--ongoing' : ''}>
<Next {...props} />
</div>;
}

function Loader({ children }) {
return <div className="loader">{children}</div>;
function Loader({ request, Next, ...props }) {
return <div className={request.livestreamingState === 'preparing' ? 'loader' : ''}>
<Next {...props} showLoader={false} />
</div>;
}

const decoratorMiddleware = [
createActivityBorderMiddleware(
next => request => (request.livestreamingState === 'completing' ? Flair : next(request))
),
createActivityBorderMiddleware(
next => request => (request.livestreamingState === 'preparing' ? Loader : next(request))
),
createActivityBorderMiddleware(
next => request => (request.livestreamingState === 'ongoing' ? FlairOngoing : next(request))
)
createActivityBorderMiddleware(Flair),
createActivityBorderMiddleware(FlairOngoing),
createActivityBorderMiddleware(Loader)
];

const { directLine, store } = testHelpers.createDirectLineEmulator();
Expand Down
11 changes: 1 addition & 10 deletions packages/api/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core';
import React, { memo, useMemo, type ReactNode } from 'react';

import PassthroughFallback from '../private/PassthroughFallback';
import {
ActivityBorderDecoratorMiddlewareProxy,
createActivityBorderMiddleware,
Expand Down Expand Up @@ -40,15 +39,7 @@ function ActivityBorderDecorator({ activity, children }: ActivityBorderDecorator
};
}, [activity]);

const requestValue = useMemo(() => Object.freeze({ request }), [request]);

return (
<ActivityBorderDecoratorRequestContext.Provider value={requestValue}>
<ActivityBorderDecoratorMiddlewareProxy fallbackComponent={PassthroughFallback} request={request}>
{children}
</ActivityBorderDecoratorMiddlewareProxy>
</ActivityBorderDecoratorRequestContext.Provider>
);
return <ActivityBorderDecoratorMiddlewareProxy request={request}>{children}</ActivityBorderDecoratorMiddlewareProxy>;
}

export default memo(ActivityBorderDecorator);
Expand Down
Loading
Loading