microsoft · compulim · Apr 23, 2025 · Apr 2, 2025 · Apr 3, 2025 · Apr 3, 2025
@@ -281,7 +281,9 @@ jobs:
         with:
           compression-level: 0
           name: test-snapshot-diff-html-${{ matrix.shard-index }}
-          path: ./__tests__/__image_snapshots__/*/__diff_output__/*
+          path: |
+            ./__tests__/__image_snapshots__/*/__diff_output__/*
+            ./__tests__/html2/**/*.snap-*-diff.png
 
   merge-test-results:
     if: always()

@@ -85,6 +85,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Added support of [contentless activity in livestream](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/LIVESTREAMING.md#scenario-3-interim-activities-with-no-content), in PR [#5430](https://github.com/microsoft/BotFramework-WebChat/pull/5430), by [@compulim](https://github.com/compulim)
 - Added sliding dots typing indicator in Fluent theme, in PR [#5447](https://github.com/microsoft/BotFramework-WebChat/pull/5447) and PR [#5448](https://github.com/microsoft/BotFramework-WebChat/pull/5448), by [@compulim](https://github.com/compulim)
 - (Experimental) Add an ability to pass `completion` prop into Fluent send box and expose the component, in PR [#5466](https://github.com/microsoft/BotFramework-WebChat/pull/5466), by [@OEvgeny](https://github.com/OEvgeny)
+- Added feedback form for like/dislike button when `feedbackActionsPlacement` is `"activity-actions"`, in PR [#5460](https://github.com/microsoft/BotFramework-WebChat/pull/5460), by [@lexi-taylor](https://github.com/lexi-taylor) and [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

@@ -0,0 +1,133 @@
+<!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>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <React.Fragment>
+            <ReactWebChat
+              directLine={directLine}
+              store={store}
+              styleOptions={{
+                feedbackActionsPlacement: 'activity-actions'
+              }}
+            />
+          </React.Fragment>
+        );
+
+        render(<App />, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          type: 'message',
+          id: 'a-00000',
+          timestamp: 0,
+          text: 'This is a test message to show feedback buttons',
+          from: {
+            role: 'bot'
+          },
+          locale: 'en-US',
+          entities: [],
+          channelData: {
+            feedbackLoop: {
+              type: 'default',
+              disclaimer: 'This is a test disclaimer message'
+            }
+          }
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        pageElements.byTestId('send box text area').focus();
+        await host.sendShiftTab(3);
+
+        await host.sendKeys('ENTER');
+        await host.sendKeys('ENTER');
+
+        await host.snapshot('local');
+
+        // Dismiss like button
+        await host.sendShiftTab(2);
+        await host.sendKeys('ENTER');
+
+        await host.snapshot('local');
+
+        // Click like button
+        await host.sendKeys('ENTER');
+
+        await pageConditions.became(
+          'feedback form is open',
+          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
+          1000
+        );
+
+        // Go to cancel button
+        await host.sendTab(2);
+        await host.sendKeys('ENTER');
+
+        await host.snapshot('local');
+
+        // Re-open feedback form
+        pageElements.byTestId('send box text area').focus();
+        await host.sendShiftTab(3);
+
+        await host.sendKeys('ENTER');
+        // Send dislike
+        await host.sendTab(1);
+        await host.sendKeys('ENTER');
+
+        await pageConditions.became(
+          'feedback form is open',
+          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
+          1000
+        );
+
+        await host.sendKeys('Test feedback');
+
+        await host.snapshot('local');
+
+        const { activity } = await directLine.actPostActivity(async () => {
+          await host.sendTab(1);
+          await host.sendKeys('ENTER');
+        });
+
+        expect(activity).toEqual(
+          expect.objectContaining({
+            type: 'invoke',
+            name: 'message/submitAction',
+            value: {
+              actionName: 'feedback',
+              actionValue: {
+                reaction: 'dislike',
+                feedback: {
+                  feedbackText: 'Test feedback'
+                }
+              }
+            }
+          })
+        );
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,169 @@
+<!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="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/fluent-bundle.production.min.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 type="text/css">
+      .fluent-provider {
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          Fluent: { FluentProvider, createDarkTheme },
+          React,
+          ReactDOMClient: { createRoot },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [
+            { name: 'prefers-reduced-motion', value: 'reduce' },
+            { name: 'prefers-color-scheme', value: 'dark' }
+          ]
+        });
+
+        const root = createRoot(document.getElementById('webchat'));
+
+        function renderWebChat(uiState) {
+          const theme = {
+            ...createDarkTheme({
+              10: '#124C32',
+              20: '#1A5B3E',
+              30: '#216A4A',
+              40: '#297956',
+              50: '#308861',
+              60: '#38976D',
+              70: '#40A779',
+              80: '#158051',
+              90: '#4FC590',
+              100: '#56D49C',
+              110: '#5EE3A8',
+              120: '#79E8B7',
+              130: '#94ECC5',
+              140: '#AFF1D3',
+              150: '#C9F6E2',
+              160: '#E4FAF1'
+            }),
+            colorNeutralBackground1Disabled: '#101010',
+            colorNeutralBackground1Hover: '#101010',
+            colorNeutralForeground5: '#424242',
+            colorNeutralForegroundOnBrand: '#292929'
+          };
+
+          root.render(
+            <FluentProvider className="fluent-provider" theme={theme}>
+              <FluentThemeProvider variant="fluent">
+                <ReactWebChat directLine={directLine} store={store} uiState={uiState} />
+              </FluentThemeProvider>
+            </FluentProvider>
+          );
+        }
+
+        renderWebChat();
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          type: 'message',
+          id: 'a-00000',
+          timestamp: 0,
+          text: 'This is a test message to show feedback buttons',
+          from: {
+            role: 'bot'
+          },
+          locale: 'en-US',
+          entities: [],
+          channelData: {
+            feedbackLoop: {
+              type: 'default',
+              disclaimer: 'This is a test disclaimer message'
+            }
+          }
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        pageElements.byTestId('send box text area').focus();
+        await host.sendShiftTab(2);
+
+        await host.sendKeys('ENTER');
+        await host.sendKeys('ENTER');
+
+        await host.snapshot('local');
+
+        // Dismiss like button
+        await host.sendShiftTab(2);
+        await host.sendKeys('ENTER');
+
+        await host.snapshot('local');
+
+        // Click like button
+        await host.sendKeys('ENTER');
+
+        await pageConditions.became(
+          'feedback form is open',
+          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
+          1000
+        );
+
+        // Go to cancel button
+        await host.sendTab(2);
+        await host.sendKeys('ENTER');
+
+        await host.snapshot('local');
+
+        pageElements.byTestId('send box text area').focus();
+        await host.sendShiftTab(2);
+
+        await host.sendKeys('ENTER');
+        // Send dislike
+        await host.sendTab(1);
+        await host.sendKeys('ENTER');
+
+        await pageConditions.became(
+          'feedback form is open',
+          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
+          1000
+        );
+
+        await host.sendKeys('Test feedback');
+
+        await host.snapshot('local');
+
+        const { activity } = await directLine.actPostActivity(async () => {
+          await host.sendTab(1);
+          await host.sendKeys('ENTER');
+        });
+
+        expect(activity).toEqual(
+          expect.objectContaining({
+            type: 'invoke',
+            name: 'message/submitAction',
+            value: {
+              actionName: 'feedback',
+              actionValue: {
+                reaction: 'dislike',
+                feedback: {
+                  feedbackText: 'Test feedback'
+                }
+              }
+            }
+          })
+        );
+      });
+    </script>
+  </body>
+</html>