Skip to content

Commit 69cacaf

Browse files
compulimcompulim
committed
Add sample
1 parent db3a917 commit 69cacaf

15 files changed

Lines changed: 220 additions & 5 deletions

File tree

‎__tests__/html2/samples/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/dist/

‎__tests__/html2/samples/middleware/channelMessage.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<title>Sample</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+
}
12+
}
13+
</script>
14+
<script crossorigin="anonymous" src="https://esm.sh/tsx" type="module"></script>
15+
<script crossorigin="anonymous" src="/test-harness.js"></script>
16+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
17+
<style type="text/css">
18+
.channel-message {
19+
align-items: center;
20+
display: flex;
21+
flex-direction: column;
22+
}
23+
24+
.channel-message__body {
25+
background-color: #666;
26+
border-radius: 100px;
27+
color: White;
28+
font-family: sans-serif;
29+
font-size: small;
30+
padding: .2em .5em;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<main id="webchat"></main>
36+
<script src="../dist/middleware/channelMessage.js" type="module"></script>
37+
</body>
38+
</html>

‎__tests__/html2/samples/middleware/channelMessage.html.snap-1.png‎

12.2 KB
Loading

‎__tests__/html2/samples/middleware/channelMessage.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import ReactWebChat, { createStoreWithOptions } from 'botframework-webchat';
2+
import { type WebChatActivity } from 'botframework-webchat-core';
3+
import {
4+
activityComponent,
5+
createActivityPolyMiddleware,
6+
type ActivityPolyMiddlewareProps,
7+
type ActivityPolyMiddlewareRenderer
8+
} from 'botframework-webchat/middleware';
9+
import React from 'react';
10+
import { render } from 'react-dom';
11+
12+
declare global {
13+
const host: any;
14+
const pageConditions: any;
15+
const pageElements: any;
16+
const run: (fn: () => Promise<void>) => Promise<void>;
17+
const testHelpers: any;
18+
}
19+
20+
// Use code-splitting to speed up development time, just dummy import is sufficient.
21+
// esbuild will split out botframework-webchat* packages into their own chunks.
22+
await import('botframework-webchat');
23+
await import('botframework-webchat/middleware');
24+
25+
run(async () => {
26+
// #region Sample code
27+
28+
type MyActivityProps = ActivityPolyMiddlewareProps & {
29+
readonly activity: WebChatActivity & { type: 'message' };
30+
readonly render: ActivityPolyMiddlewareRenderer | undefined;
31+
};
32+
33+
function ChannelMessage({ activity }: MyActivityProps) {
34+
return (
35+
<div className="channel-message">
36+
<div className="channel-message__body">{activity.text}</div>
37+
</div>
38+
);
39+
}
40+
41+
const polyMiddleware = [
42+
createActivityPolyMiddleware(next => request => {
43+
const { activity } = request;
44+
45+
if (activity.from.role === 'channel' && activity.type === 'message') {
46+
const render = next(request)?.render;
47+
48+
return activityComponent<MyActivityProps>(ChannelMessage, {
49+
activity,
50+
render
51+
});
52+
}
53+
54+
return next(request);
55+
})
56+
];
57+
58+
// #endregion Sample code
59+
60+
(window as any).WebChat = { createStoreWithOptions };
61+
62+
const { directLine, store } = testHelpers.createDirectLineEmulator();
63+
64+
render(
65+
<ReactWebChat directLine={directLine} polyMiddleware={polyMiddleware} store={store} />,
66+
document.getElementsByTagName('main')[0]!
67+
);
68+
69+
await pageConditions.uiConnected();
70+
71+
directLine.emulateIncomingActivity({
72+
from: { id: 'channel', role: 'channel' },
73+
text: 'An agent has joined the conversation',
74+
type: 'message'
75+
});
76+
77+
directLine.emulateIncomingActivity({
78+
from: { id: 'bot', role: 'bot' },
79+
text: 'Hello, World!',
80+
type: 'message'
81+
});
82+
83+
await host.snapshot('local');
84+
});

‎__tests__/html2/samples/tsconfig.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "@msinternal/botframework-webchat-tsconfig/current"
3+
}

‎docs/MIDDLEWARE.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Middleware
2+
3+
## Poly middleware
4+
5+
```tsx
6+
import ReactWebChat, { createStoreWithOptions } from 'botframework-webchat';
7+
import { type WebChatActivity } from 'botframework-webchat-core';
8+
import {
9+
activityComponent,
10+
createActivityPolyMiddleware,
11+
type ActivityPolyMiddlewareProps,
12+
type ActivityPolyMiddlewareRenderer
13+
} from 'botframework-webchat/middleware';
14+
15+
type MyActivityProps = ActivityPolyMiddlewareProps & {
16+
readonly activity: WebChatActivity & { type: 'message' };
17+
readonly render: ActivityPolyMiddlewareRenderer | undefined;
18+
};
19+
20+
function ChannelMessage({ activity }: MyActivityProps) {
21+
return (
22+
<div className="channel-message">
23+
<div className="channel-message__body">{activity.text}</div>
24+
</div>
25+
);
26+
}
27+
28+
const polyMiddleware = [
29+
createActivityPolyMiddleware(next => request => {
30+
const { activity } = request;
31+
32+
if (activity.from.role === 'channel' && activity.type === 'message') {
33+
const render = next(request)?.render;
34+
35+
return activityComponent<MyActivityProps>(ChannelMessage, {
36+
activity,
37+
render
38+
});
39+
}
40+
41+
return next(request);
42+
})
43+
];
44+
```

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
"biome": "biome check ./packages",
4242
"browser": "node ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/",
4343
"browser:watch": "node-dev --no-notify --respawn ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/",
44-
"build": "npm run build --if-present --workspaces",
44+
"build": "npm run build:production && npm run build:html2-samples",
45+
"build:html2-samples": "cd __tests__/html2/samples/ && esbuild --bundle --format=esm --outbase=. --outdir=./dist/ --minify **/*.tsx --splitting",
46+
"build:production": "npm run build --if-present --workspaces",
4547
"bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0) && npm run bump:packages && npm run bump:samples",
4648
"bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localPeerDependencies // []) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
4749
"bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localPeerDependencies // []) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",

‎packages/api/src/middleware.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ export {
22
activityComponent,
33
ActivityPolyMiddlewareProvider,
44
ActivityPolyMiddlewareProxy,
5+
// TODO: Rename to activityPolyMiddleware
56
createActivityPolyMiddleware,
6-
extractActivityEnhancer,
77
useBuildRenderActivityCallback,
88
type ActivityPolyMiddleware,
99
type ActivityPolyMiddlewareHandler,

‎packages/bundle/middleware.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// This is required for Webpack 4 which does not support named exports.
2+
// eslint-disable-next-line no-undef
3+
module.exports = require('./dist/botframework-webchat.middleware.js');

‎packages/bundle/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,16 @@
1414
"types": "./dist/botframework-webchat.d.ts",
1515
"default": "./dist/botframework-webchat.js"
1616
}
17+
},
18+
"./middleware": {
19+
"import": {
20+
"types": "./dist/botframework-webchat.middleware.d.mts",
21+
"default": "./dist/botframework-webchat.middleware.mjs"
22+
},
23+
"require": {
24+
"types": "./dist/botframework-webchat.middleware.d.ts",
25+
"default": "./dist/botframework-webchat.middleware.js"
26+
}
1727
}
1828
},
1929
"publishConfig": {

0 commit comments

Comments
 (0)