microsoft · OEvgeny · Feb 5, 2025 · Feb 5, 2025 · Feb 5, 2025 · Feb 5, 2025
@@ -2037,6 +2037,9 @@ It should check the result from downstream middleware. If it is falsy, it should
 -  Adds Direct Line Speech support, by [@compulim](https://github.com/compulim) in PR [#2621](https://github.com/microsoft/BotFramework-WebChat/pull/2621)
    -  Adds [`microsoft-cognitiveservices-sdk@1.8.1`](https://npmjs.com/package/microsoft-cognitiveservices-speech-sdk), in PR [#2704](https://github.com/microsoft/BotFramework-WebChat/pull/2704)
 -  Fixes [#2692](https://github.com/microsoft/BotFramework-WebChat/issues/2692). Rename sample 17 to 17.a, by [@corinagum](https://github.com/corinagum) in PR [#2695](https://github.com/microsoft/BotFramework-WebChat/pull/2695)
+-  Added `ActivityActionsDecorator` for customizing activity actions layout, in PR [#5419](https://github.com/microsoft/BotFramework-WebChat/pull/5419), by [@OEvgeny](https://github.com/OEvgeny)
+   -  Exposed `ActivityButton` component to be used in activity actions toolbar, in PR [#5419](https://github.com/microsoft/BotFramework-WebChat/pull/5419), by [@OEvgeny](https://github.com/OEvgeny)
+   -  Exposed `useShowModal` hook for displaying custom modal dialogs, in PR [#5419](https://github.com/microsoft/BotFramework-WebChat/pull/5419), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

@@ -0,0 +1,207 @@
+<!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;
+    }
+
+    .loader {
+      border-bottom: solid 4px blue;
+    }
+
+    .actions  {
+      display: contents;
+    }
+
+    .actions > * {
+      border: solid 2px green !important;
+    }
+  </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>;
+      }
+
+      function Actions({ activity, children }) {
+        if (activity.entities[0].keywords.includes('highlighted')) {
+          return <div className="actions">{children}</div>;
+        }
+        return <>{children}</>;
+      }
+
+      const decoratorMiddleware = [
+        init =>
+          init === 'activity border' &&
+          (next => request => (request.livestreamingState === 'completing' ? Flair : next(request))),
+        init =>
+          init === 'activity border' &&
+          (next => request => (request.livestreamingState === 'preparing' ? Loader : next(request))),
+        init =>
+          init === 'activity actions' &&
+          (next => request => (!request.livestreamingState ? Actions : 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('local');
+
+      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!'
+      });
+
+      await pageConditions.numActivitiesShown(1);
+
+
+      await directLine.emulateIncomingActivity({
+        from: {
+          role: "bot"
+        },
+        id: "a-00002",
+        type: "message",
+        text: "This is compleded feedback action example.",
+        entities: [
+          {
+            '@context': 'https://schema.org',
+            '@id': '',
+            '@type': 'Message',
+            type: 'https://schema.org/Message',
+            keywords: ['AIGeneratedContent', 'AllowCopy', 'highlighted'],
+            potentialAction: [
+              {
+                "@type": "LikeAction",
+                actionStatus: "CompletedActionStatus",
+                target: {
+                  "@type": "EntryPoint",
+                  urlTemplate: "ms-directline://postback?interaction=like"
+                }
+              },
+              {
+                "@type": "DislikeAction",
+                actionStatus: "PotentialActionStatus",
+                result: {
+                  "@type": "Review",
+                  reviewBody: "I don't like it.",
+                  "reviewBody-input": {
+                    "@type": "PropertyValueSpecification",
+                    valueMinLength: 3,
+                    valueName: "reason"
+                  }
+                },
+                target: {
+                  "@type": "EntryPoint",
+                  urlTemplate: "ms-directline://postback?interaction=dislike{&reason}"
+                }
+              }
+            ]
+          }
+        ]
+      });
+
+      await pageConditions.numActivitiesShown(2);
+
+      // THEN: Should render the activity.
+      await host.snapshot('local');
+    });
+  </script>
+</body>
+
+</html>