microsoft · compulim · Jun 18, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 10, 2024
@@ -24,6 +24,12 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 
 ## [Unreleased]
 
+### Added
+
+-  (Experimental) Added initial decorators support, in PR [#5205](https://github.com/microsoft/BotFramework-WebChat/pull/5205), by [@OEvgeny](https://github.com/OEvgeny)
+   -  Introduced internal `botframework-webchat-api/decorator` import, in PR [#5205](https://github.com/microsoft/BotFramework-WebChat/pull/5205), by [@OEvgeny](https://github.com/OEvgeny)
+   -  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)
+
 ### Fixed
 
 -  Improved performance for `useActivityWithRenderer`, in PR [#5172](https://github.com/microsoft/BotFramework-WebChat/pull/5172), by [@OEvgeny](https://github.com/OEvgeny)

@@ -0,0 +1,149 @@
+<!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/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: { 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 = [
+          init => init === 'activity border' && (next => request => (request.state === 'completion' ? Flair : next(request))),
+          init => init === 'activity border' && (next => request => (request.state === 'informative' ? 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: {
+            streamType: 'informative'
+          },
+          from: {
+            id: 'u-00001',
+            name: 'Bot',
+            role: 'bot'
+          },
+          id: 'm-00001',
+          text: 'Working on it...',
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          channelData: {
+            streamType: 'informative'
+          },
+          from: {
+            id: 'u-00001',
+            name: 'Bot',
+            role: 'bot'
+          },
+          id: 't-00001',
+          text: 'Working on it...',
+          type: 'typing'
+        });
+
+        await pageConditions.typingIndicatorShown();
+        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({
+          id: 'm-00001',
+          from: {
+            id: 'u-00001',
+            name: 'Bot',
+            role: 'bot'
+          },
+          text: 'Work completed!',
+          channelData: { streamType: 'completion' },
+          attachments
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // THEN: Should render the activity.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('with decorators', () => runHTML('fluentTheme/withDecorator'));
+});
@@ -0,0 +1,3 @@
+// This is required for Webpack 4 which does not support named exports.
+// eslint-disable-next-line no-undef
+module.exports = require('./lib/decorator');
@@ -24,6 +24,16 @@
         "types": "./lib/internal.d.ts",
         "default": "./lib/internal.js"
       }
+    },
+    "./decorator": {
+      "import": {
+        "types": "./dist/botframework-webchat-api.decorator.d.mts",
+        "default": "./dist/botframework-webchat-api.decorator.mjs"
+      },
+      "require": {
+        "types": "./lib/decorator.d.ts",
+        "default": "./lib/decorator.js"
+      }
     }
   },
   "publishConfig": {

@@ -0,0 +1,4 @@
+export { DecoratorComposer } from './private/DecoratorComposer';
+export { default as ActivityDecorator } from './private/ActivityDecorator';
+export { type DecoratorMiddleware } from './private/createDecoratorComposer';
+export { default as ActivityDecoratorRequest } from './private/activityDecoratorRequest';
@@ -0,0 +1,29 @@
+import ActivityDecoratorRequest from './activityDecoratorRequest';
+import templateMiddleware from './templateMiddleware';
+
+const {
+  Provider: ActivityBorderDecoratorMiddlewareProvider,
+  Proxy: ActivityBorderDecoratorMiddlewareProxy,
+  initMiddleware: initActivityBorderDecoratorMiddleware,
+  types
+} = templateMiddleware<{}, ActivityDecoratorRequest, typeof activityBorderDecoratorTypeName>(
+  'ActivityBorderDecoratorMiddleware'
+);
+
+type ActivityBorderDecoratorMiddleware = typeof types.middleware;
+type ActivityBorderDecoratorMiddlewareProps = typeof types.props;
+type ActivityBorderDecoratorMiddlewareRequest = typeof types.request;
+type ActivityBorderDecoratorMiddlewareInit = typeof types.init;
+
+const activityBorderDecoratorTypeName = 'activity border' as const;
+
+export {
+  ActivityBorderDecoratorMiddlewareProvider,
+  ActivityBorderDecoratorMiddlewareProxy,
+  activityBorderDecoratorTypeName,
+  initActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddlewareProps,
+  type ActivityBorderDecoratorMiddlewareRequest,
+  type ActivityBorderDecoratorMiddlewareInit
+};
@@ -0,0 +1,30 @@
+import React, { type ReactNode, memo, useMemo } from 'react';
+import { ActivityBorderDecoratorMiddlewareProxy } from './ActivityBorderDecoratorMiddleware';
+import { WebChatActivity } from 'botframework-webchat-core';
+import { ActivityDecoratorRequest } from '..';
+
+const ActivityDecoratorFallback = memo(({ children }) => <React.Fragment>{children}</React.Fragment>);
+
+ActivityDecoratorFallback.displayName = 'ActivityDecoratorFallback';
+
+const supportedActivityRoles = ['bot', 'chnnel', 'user', undefined] as const;
+const supportedActivityStates = ['informative', 'completion', undefined] as const;
+
+function ActivityDecorator({ children, activity }: Readonly<{ activity?: WebChatActivity; children?: ReactNode }>) {
+  const request = useMemo<ActivityDecoratorRequest>(
+    () => ({
+      from: supportedActivityRoles.includes(activity?.from?.role) ? activity?.from?.role : undefined,
+      state: supportedActivityStates.includes(activity?.channelData?.streamType)
+        ? activity?.channelData?.streamType
+        : undefined
+    }),
+    [activity]
+  );
+  return (
+    <ActivityBorderDecoratorMiddlewareProxy fallbackComponent={ActivityDecoratorFallback} request={request}>
+      {children}
+    </ActivityBorderDecoratorMiddlewareProxy>
+  );
+}
+
+export default memo(ActivityDecorator);
@@ -0,0 +1,6 @@
+import { memo } from 'react';
+import createDecoratorComposer from './createDecoratorComposer';
+
+export const DecoratorComposer = memo(createDecoratorComposer());
+
+DecoratorComposer.displayName = 'DecoratorComposer';
@@ -0,0 +1,6 @@
+type ActivityDecoratorRequestType = {
+  from: 'bot' | 'channel' | `user` | undefined;
+  state: 'completion' | 'informative' | undefined;
+};
+
+export default ActivityDecoratorRequestType;
@@ -0,0 +1,36 @@
+import React, { type ReactNode, useMemo } from 'react';
+import {
+  ActivityBorderDecoratorMiddlewareProvider,
+  activityBorderDecoratorTypeName,
+  initActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddleware
+} from './ActivityBorderDecoratorMiddleware';
+
+type DecoratorMiddlewareInit = typeof activityBorderDecoratorTypeName;
+
+export type DecoratorComposerComponent = (
+  props: Readonly<{
+    children?: ReactNode;
+    middleware?: DecoratorMiddleware[];
+  }>
+) => React.JSX.Element;
+
+export type DecoratorMiddleware = (
+  init: DecoratorMiddlewareInit
+) => ReturnType<ActivityBorderDecoratorMiddleware> | false;
+
+const EMPTY_ARRAY = [];
+
+export default (): DecoratorComposerComponent =>
+  ({ children, middleware = EMPTY_ARRAY }) => {
+    const borderMiddlewares = useMemo(
+      () => initActivityBorderDecoratorMiddleware(middleware, activityBorderDecoratorTypeName),
+      [middleware]
+    );
+
+    return (
+      <ActivityBorderDecoratorMiddlewareProvider middleware={borderMiddlewares}>
+        {children}
+      </ActivityBorderDecoratorMiddlewareProvider>
+    );
+  };
@@ -0,0 +1,62 @@
+import { warnOnce } from 'botframework-webchat-core';
+import { createChainOfResponsibility, type ComponentMiddleware } from 'react-chain-of-responsibility';
+import { type EmptyObject } from 'type-fest';
+import { any, array, custom, safeParse, type Output } from 'valibot';
+
+export type MiddlewareWithInit<M extends ComponentMiddleware<unknown>, I = unknown> = (
+  init: I
+) => ReturnType<M> | false;
+
+export default function createMiddlewareFacility<
+  Props extends {} = EmptyObject,
+  Request extends {} = EmptyObject,
+  Init extends {} = undefined
+>(name: string) {
+  type Middleware = ComponentMiddleware<Request, Props>;
+
+  const validateMiddleware = custom<Middleware>(input => typeof input === 'function', 'Middleware must be a function.');
+
+  const middlewareSchema = array(any([validateMiddleware]));
+
+  const isMiddleware = (middleware: unknown): middleware is Output<typeof middlewareSchema> =>
+    safeParse(middlewareSchema, middleware).success;
+
+  const warnInvalid = warnOnce(`"${name}" prop is invalid`);
+
+  const rectifyProps = (middleware: unknown): readonly Middleware[] => {
+    if (middleware) {
+      if (isMiddleware(middleware)) {
+        return Object.isFrozen(middleware) ? middleware : Object.freeze([...middleware]);
+      }
+
+      warnInvalid();
+    }
+
+    return Object.freeze([]);
+  };
+
+  const initMiddleware = (middleware: MiddlewareWithInit<Middleware>[], init: Init): readonly Middleware[] =>
+    rectifyProps(
+      middleware
+        .map(md => md(init))
+        .filter((enhancer): enhancer is ReturnType<Middleware> => !!enhancer)
+        .map(enhancer => () => enhancer)
+    );
+
+  const { Provider, Proxy } = createChainOfResponsibility<Request, Props>();
+
+  Provider.displayName = `${name}Provider`;
+  Proxy.displayName = `${name}Proxy`;
+
+  return {
+    types: {
+      middleware: undefined as Middleware,
+      props: undefined as Props,
+      request: undefined as Request,
+      init: undefined as Init
+    },
+    Provider,
+    Proxy,
+    initMiddleware
+  };
+}
@@ -5,7 +5,8 @@ export default defineConfig({
   ...baseConfig,
   entry: {
     'botframework-webchat-api': './src/index.ts',
-    'botframework-webchat-api.internal': './src/internal.ts'
+    'botframework-webchat-api.internal': './src/internal.ts',
+    'botframework-webchat-api.decorator': './src/decorator/index.ts'
   },
   noExternal: ['globalize']
 });
@@ -2,6 +2,7 @@
 // window['WebChat'] is required for TypeScript
 
 import { StrictStyleOptions, StyleOptions } from 'botframework-webchat-api';
+import * as decorator from 'botframework-webchat-api/decorator';
 import { Constants, createStore, createStoreWithDevTools, createStoreWithOptions } from 'botframework-webchat-core';
 
 import ReactWebChat, {
@@ -75,6 +76,7 @@ window['WebChat'] = {
   createStore,
   createStoreWithOptions,
   createStyleSet,
+  decorator,
   hooks,
   ReactWebChat,
   renderWebChat,