Skip to content

Commit cd39b84

Browse files
compulimOEvgeny
compulim
and
OEvgeny
authored
Upgrade avatarMiddleware to polymiddleware (microsoft#5779)
* Initial custom agent * Request vs. props * Add more instructions * Upgrade avatarMiddleware to polymiddleware * Keep original request object * Fix ESLint * Fix ESLint * Move to macOS 26 * Fix legacy avatar bridge * Deprioritize default activity middleware * Patch attachmentLayout instead of via activityMiddleware * Add helper hooks * Add iterateEquals * Use useMemoIterable and polymiddleware * Add watch deps * Fix signature change * Refactor singleToArray nd OneOrMany * Fix AddFullBundle rerendering * Clean up singleToArray * Fix typings * Use undefined if array is empty * Clean up polymiddleware array * Fix avatarMiddleware * Fix middleware.length * Fix ESLint * Add displayName * Fix test * Add waitFor * Clean up useMemoIterable * Fix import * Remove no-magic-numbers * Should only show 1 message * Fix runHook twice * Fix window.React * Clean up * Add test * Clean up tests * Skip test * Use styleOptions at init * Add changing middleware tests * Add tests * Fix type portability * Add AvatarPolymiddlewareProxy * Clean up * Add useBuildRenderAvatarCallback test * Clean up * Clean up * Update doc * Centralize useBuildRenderCallback patch * Add entry * Fix PR number * Apply PR suggestions * Clean up singleToArray * singleToArray return new frozen array * Clean up * Fix [undefined] vs. [] * Add generator tests * Remove no-magic-numbers --------- Co-authored-by: Eugene <EOlonov@gmail.com>
1 parent 45490e5 commit cd39b84

File tree

94 files changed

+2871
-697
lines changed

Some content is hidden

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

94 files changed

+2871
-697
lines changed

‎.eslintrc.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ overrides:
5555
no-unused-vars: off
5656
'@typescript-eslint/no-unused-vars':
5757
- error
58-
- argsIgnorePattern: ^_$
58+
- argsIgnorePattern: ^_
5959
varsIgnorePattern: ^_
6060

6161
no-empty-function: off

‎.github/agents/polymiddleware-promoter.agent.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
name: Polymiddleware promoter
3+
description: Upgrade middleware to polymiddleware
4+
argument-hint: The existing middleware to upgrade
5+
# tools: ['vscode', 'execute', 'read', 'agent', 'edit', 'search', 'web', 'todo'] # specify the tools this agent can use. If not set, all enabled tools are allowed.
6+
---
7+
8+
<!-- Tip: Use /create-agent in chat to generate content with agent assistance -->
9+
10+
You are a developer upgrading middleware to polymiddleware.
11+
12+
Polymiddleware is newer, while middleware is older and should be upgraded.
13+
14+
Middleware and polymiddleware are pattern for plug-ins and our customization story. There are 2 sides: writing the middleware and using the middleware. Web Chat write and use the middleware. 3P developers write middleware and pass it to Web Chat.
15+
16+
Polymiddleware is a single middleware that process multiple types of middleware. Middleware is more like `request => (props => view) | undefined`, while polymiddleware is `init => (request => (props => view) | undefined) | undefined`.
17+
18+
The middleware philosophy can be found at https://npmjs.com/package/react-chain-of-responsibility.
19+
20+
When middleware receive a request, it decides if it want to process the request. If yes, it will return a React component. If no, it will pass it to the next middleware.
21+
22+
Definition of polymiddleware are at `packages/api-middleware/src/index.ts`.
23+
24+
Definition of middleware are scattered around but entrypoint at `packages/api/src/hooks/Composer.tsx`.
25+
26+
- You MUST upgrade all the usage of existing middleware to polymiddleware
27+
- You MUST write a legacy bridge to convert existing middleware into polymiddleware, look at `packages/api/src/legacy`
28+
- All tests MUST be visual regression tests, expectations MUST live inside the generated PNGs
29+
- You MUST NOT update any existing PNGs, as it means breaking existing feature
30+
- You MUST write migration tests: write a old middleware and pass it, it should render as expected because the code went through the new legacy bridge
31+
- You MUST write polymiddleware test: write a new polymiddleware and pass it, it should render
32+
- For each category of test, you MUST test it in 4 different way:
33+
1. Add new UI that will process new type of requests
34+
- You MUST verify existing middleware does not process that new type of request, only new polymiddleware does
35+
2. Delete existing UI: request processed by existing middleware should no longer process
36+
3. Replace UI that was processed by existing middleware, but now processed by a new middleware
37+
4. Decorate existing UI but wrapping the result from existing middleware, commonly with a border component
38+
- "request" vs. "props"
39+
- Code processing the request MUST NOT call hooks
40+
- Code processing the request decide to render a React component or not
41+
- Code processing the props MUST render, minimally, `<Fragment />` or `null`, they are processed by React
42+
- Request SHOULD contains information about "should render or not"
43+
- Props SHOULD contains information about "how to render"
44+
- You MUST NOT remove the existing middleware from `<Composer>`, however, print a deprecation warn-once, then bridge it to the polymiddleware
45+
- You SHOULD NOT export the `<XXXProvider>`, `XXXProviderProps`, and `extractXXXEnhancer`

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ jobs:
101101
strategy:
102102
matrix:
103103
os:
104-
- macos-latest
104+
- macos-26
105105
- ubuntu-latest
106106
- windows-latest
107107
runs-on: ${{ matrix.os }}

‎AGENTS.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
- Prefer uppercase for acronyms instead of Pascal case, e.g. `getURL()` over `getUrl()`
2424
- The only exception is `id`, e.g. `getId()` over `getID()`
2525
- Use fewer shorthands, only allow `min`, `max`, `num`
26+
- Prefer ternary operator over one-liner `if` statement
2627

2728
### Design
2829

@@ -35,6 +36,7 @@
3536
### Typing
3637

3738
- TypeScript is best-effort checking, use `valibot` for strict type checking
39+
- Use TypeScript CLI instead of `tsc`
3840
- Use `valibot` for runtime type checker, never use `zod`
3941
- Assume all externally exported functions will receive unsafe/invalid input, always check with `valibot`
4042
- Avoid `any`
@@ -100,9 +102,15 @@ export { MyComponentPropsSchema, type MyComponentProps };
100102
- Use `@testduet/given-when-then` package instead of xUnit style `describe`/`before`/`test`/`after`
101103
- Prefer integration/end-to-end testing than unit testing
102104
- Use as realistic setup as possible, such as using `msw` than mocking calls
105+
- Use `emulateIncomingActivity` and `emulateOutgoingActivity` to emulate conversation
103106

104107
## PR instructions
105108

106109
- Run new test and all of them must be green
107110
- Run `npm run precommit` to make sure it pass all linting process
108111
- Add changelog entry to `CHANGELOG.md`, follow our existing format
112+
113+
## Code review
114+
115+
- Code should use as much immutable (via `Object.freeze()`) as possible, DO NOT trust `readonly`
116+
- All inputs SHOULD be validated

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ Breaking changes in this release:
4040
- 💥 Root-level (unconnected) `Claim` entity is being deprecated, in PR [#5564](https://github.com/microsoft/BotFramework-WebChat/pull/5564), by [@compulim](https://github.com/compulim). It will be removed on or after 2027-08-29
4141
- Use `entities[@id=""][@type="Message"].citation[@type="Claim"]` instead
4242
- 💥 `activityStatusMiddleware.nextVisibleActivity` and `activityStatusMiddleware.sameTimestampGroup` is removed after deprecation, in PR [#5565](https://github.com/microsoft/BotFramework-WebChat/issues/5565), by [@compulim](https://github.com/compulim)
43+
- 💥 `avatarMiddleware` is being deprecated in favor of [`polymiddleware`](./docs/MIDDLEWARE.md). It will be removed on or after 2028-03-16, related to PR [#5779](https://github.com/microsoft/BotFramework-WebChat/pull/5779)
4344

4445
### Added
4546

@@ -111,8 +112,10 @@ Breaking changes in this release:
111112
- Updated `BasicSendBoxToolbar` to rely solely on `disableFileUpload`.
112113
- Added support for livestreaming via `entities[type="streaminfo"]` in PR [#5517](https://github.com/microsoft/BotFramework-WebChat/pull/5517) by [@kylerohn](https://github.com/kylerohn) and [@compulim](https://github.com/compulim)
113114
- Added `polymiddleware`, a new [universal middleware for every UIs](./docs/MIDDLEWARE.md), by [@compulim](https://github.com/compulim) in PR [#5515](https://github.com/microsoft/BotFramework-WebChat/pull/5515) and [#5566](https://github.com/microsoft/BotFramework-WebChat/pull/5566)
115+
- Legacy middleware is prioritized over polymiddleware
114116
- Added `polymiddleware` to `<ThemeProvider>`
115117
- Currently supports activity middleware and the new error box middleware
118+
- Supports avatar middleware, by [@compulim](https://github.com/compulim) in PR [#5779](https://github.com/microsoft/BotFramework-WebChat/pull/5779)
116119
- New internal packages, by [@compulim](https://github.com/compulim) in PR [#5515](https://github.com/microsoft/BotFramework-WebChat/pull/5515)
117120
- `@msinternal/botframework-webchat-api-middleware` for middleware branch of API package
118121
- `@msinternal/botframework-webchat-debug-theme` package for enabling debugging scenarios
@@ -356,6 +359,7 @@ Breaking changes in this release:
356359
- Removed legacy test harness, in PR [#5655](https://github.com/microsoft/BotFramework-WebChat/issues/5655), by [@compulim](https://github.com/compulim)
357360
- All tests are now either using `html2` test harness or simple unit tests
358361
- Legacy and `html` (html1) test harness are all migrated to `html2`
362+
- `avatarMiddleware` is being deprecated in favor of [`polymiddleware`](./docs/MIDDLEWARE.md). It will be removed on or after 2028-03-16, related to PR [#5779](https://github.com/microsoft/BotFramework-WebChat/pull/5779)
359363

360364
### Fixed
361365

@@ -410,6 +414,7 @@ Breaking changes in this release:
410414
- Fixed compatibility with `create-react-app` by adding file extension to `core-js` imports, by [@compulim](https://github.com/compulim) in PR [#5680](https://github.com/microsoft/BotFramework-WebChat/pull/5680)
411415
- Fixed virtual keyboard should be collapsed after being suppressed, in iOS 26.3, by [@compulim](https://github.com/compulim) in PR [#5757](https://github.com/microsoft/BotFramework-WebChat/pull/5757)
412416
- Fixed Fluent/Copilot typing indicator animation background color, in PR [#5770](https://github.com/microsoft/BotFramework-WebChat/pull/5770), by [@OEvgeny](https://github.com/OEvgeny)
417+
- Fixed `<AddFullBundle>` should not re-render when `attachment[ForScreenReader]Middleware` is updated without noticeable different (`iterateEquals`), by [@compulim](https://github.com/compulim), in PR [#5779](https://github.com/microsoft/BotFramework-WebChat/pull/5779)
413418

414419
## [4.18.0] - 2024-07-10
415420

__tests__/html2/activityGrouping/activityGrouping.legacyActivityMiddleware.html renamed to __tests__/html2/activityGrouping/activityGrouping.legacyActivityMiddleware.skip.html

Lines changed: 72 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1-
<!DOCTYPE html>
1+
<!--
2+
Polymiddleware does not support request modification.
3+
4+
Thus, modified `renderAttachment()` from legacy activity middleware is not honored.
5+
6+
This test is testing against "modified attachmentRenderer", thus it is failing.
7+
8+
Polymiddleware could support modified attachment polymiddleware when we finish the following work:
9+
10+
- Upgrade to attachment polymiddleware
11+
- Support cascaded polymiddleware
12+
- Today, polymiddleware are set in <APIComposer>, cascading means we need 2 x <APIComposer>
13+
- Tomorrow, we should allow cascading through <ThemeProvider polymiddleware={}>
14+
- That also means, default poly/middleware should be materialized in <ThemeProvider>, instead of <APIComposer>
15+
-->
16+
<!doctype html>
217
<html lang="en-US">
318
<head>
419
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
@@ -32,57 +47,63 @@
3247
run(async function () {
3348
await host.windowSize(undefined, 1280, document.getElementById('webchat'));
3449

35-
const activityMiddleware = () => next => (...renderActivityArgs) => {
36-
const [{ activity }] = renderActivityArgs;
50+
const activityMiddleware =
51+
() =>
52+
next =>
53+
(...renderActivityArgs) => {
54+
const [{ activity }] = renderActivityArgs;
3755

38-
const renderActivity = next(...renderActivityArgs);
56+
const renderActivity = next(...renderActivityArgs);
3957

40-
if (/^1/.test(activity.id)) {
41-
return (children, ...renderAttachmentArgs) => (
42-
<div className="decorated-activity">
43-
{renderActivity(
44-
(...renderAttachmentArgs) => (
45-
<div className="decorated-attachment">{children(...renderAttachmentArgs)}</div>
46-
),
58+
if (/^1/.test(activity.id)) {
59+
return (children, ...renderAttachmentArgs) => (
60+
<div className="decorated-activity">
61+
{renderActivity(
62+
(...renderAttachmentArgs) => (
63+
<div className="decorated-attachment">{children(...renderAttachmentArgs)}</div>
64+
),
65+
...renderActivityArgs
66+
)}
67+
</div>
68+
);
69+
} else if (/^2/.test(activity.id)) {
70+
return (children, ...renderAttachmentArgs) =>
71+
renderActivity(
72+
(...renderAttachmentArgs) => {
73+
const [firstArg] = renderAttachmentArgs;
74+
const {
75+
attachment,
76+
attachment: { contentType }
77+
} = firstArg;
78+
79+
if (/^image\//.test(contentType)) {
80+
return (
81+
<figure className="attachment-figure">
82+
{children(...renderAttachmentArgs)}
83+
<figcaption className="attachment-figure-caption">
84+
{children(
85+
{
86+
...firstArg,
87+
attachment: {
88+
...attachment,
89+
contentType: 'application/octet-stream'
90+
}
91+
},
92+
...renderAttachmentArgs
93+
)}
94+
</figcaption>
95+
</figure>
96+
);
97+
}
98+
99+
return children(...renderAttachmentArgs);
100+
},
47101
...renderActivityArgs
48-
)}
49-
</div>
50-
);
51-
} else if (/^2/.test(activity.id)) {
52-
return (children, ...renderAttachmentArgs) =>
53-
renderActivity((...renderAttachmentArgs) => {
54-
const [firstArg] = renderAttachmentArgs;
55-
const {
56-
attachment,
57-
attachment: { contentType }
58-
} = firstArg;
59-
60-
if (/^image\//.test(contentType)) {
61-
return (
62-
<figure className="attachment-figure">
63-
{children(...renderAttachmentArgs)}
64-
<figcaption className="attachment-figure-caption">
65-
{children(
66-
{
67-
...firstArg,
68-
attachment: {
69-
...attachment,
70-
contentType: 'application/octet-stream'
71-
}
72-
},
73-
...renderAttachmentArgs
74-
)}
75-
</figcaption>
76-
</figure>
77-
);
78-
}
79-
80-
return children(...renderAttachmentArgs);
81-
}, ...renderActivityArgs);
82-
}
83-
84-
return renderActivity;
85-
};
102+
);
103+
}
104+
105+
return renderActivity;
106+
};
86107

87108
WebChat.renderWebChat(
88109
{
@@ -106,8 +127,7 @@
106127
role: 'bot'
107128
},
108129
id: '1.0',
109-
text:
110-
'Decorating activity of **carousel layout**. Also decorate attachment without using attachment middleware.',
130+
text: 'Decorating activity of **carousel layout**. Also decorate attachment without using attachment middleware.',
111131
timestamp: 0,
112132
type: 'message'
113133
},
@@ -123,8 +143,7 @@
123143
role: 'bot'
124144
},
125145
id: '1.1',
126-
text:
127-
'Decorating activity of **stacked layout**. Also decorate attachment without using attachment middleware.',
146+
text: 'Decorating activity of **stacked layout**. Also decorate attachment without using attachment middleware.',
128147
timestamp: 0,
129148
type: 'message'
130149
},

__tests__/html2/activityGrouping/activityGrouping.legacyActivityMiddleware.html.snap-1.png renamed to __tests__/html2/activityGrouping/activityGrouping.legacyActivityMiddleware.skip.html.snap-1.png

File renamed without changes.

0 commit comments

Comments
 (0)