Clean up docs

Author: compulim

docs/MIDDLEWARE.md

@@ -1,10 +1,12 @@
 # Middleware
 
-## Cooking recipes
+## Recipes
 
-### Showing channel message as a badge
+### Show channel message as a badge
 
-When the following activity is received, the middleware will display it in a badge.
+This sample demonstrates the following:
+
+- Add a new activity middleware component for a specific type of activity
 
 #### Activity payload
 
@@ -59,3 +61,62 @@ const polyMiddleware = [
    })
 ];
 ```
+
+### Decorate activity with a border
+
+This sample demonstrates the following:
+
+- Decorate an activity
+- Use [hooks](./HOOKS.md#usestyleoptions) within the activity middleware component
+
+#### Screenshot
+
+![Web Chat showing message with a blue outline](./media/middleware/decorate-message.png)
+
+#### Code snippet
+
+```tsx
+import ReactWebChat, { createStoreWithOptions, hooks } from 'botframework-webchat';
+import {
+   activityComponent,
+   createActivityPolyMiddleware,
+   type ActivityPolyMiddlewareProps,
+   type ActivityPolyMiddlewareRenderer
+} from 'botframework-webchat/middleware';
+import React, { Fragment, memo, useMemo } from 'react';
+import { render } from 'react-dom';
+
+const { useStyleOptions } = hooks;
+
+type MessageBorderProps = ActivityPolyMiddlewareProps & {
+   readonly render: ActivityPolyMiddlewareRenderer | undefined;
+};
+
+const MessageBorder = memo<MessageBorderProps>(function MessageBorder({ render }) {
+   const [{ accent }] = useStyleOptions();
+
+   const style = useMemo(() => ({ outlineColor: accent }), [accent]);
+
+   return (
+      <div className="message-border" style={style}>
+         <Fragment>{render?.({})}</Fragment>
+      </div>
+   );
+});
+
+const polyMiddleware = [
+   createActivityPolyMiddleware(next => request => {
+      const { activity } = request;
+
+      if (activity.type === 'message') {
+         const render = next(request)?.render;
+
+         return activityComponent<MessageBorderProps>(MessageBorder, {
+            render
+         });
+      }
+
+      return next(request);
+   })
+];
+```