Fluent: allow displaying feedback inside activity actions toolbar (#5407)

* Fluent: allow displaying feedback inside activity actions toolbar

* Snapshots

---------

Co-authored-by: William Wong <compulim@users.noreply.github.com>

Author: OEvgeny

CHANGELOG.md

@@ -74,6 +74,10 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Added support for math blocks using `$$` delimiter alongside existing `\[...\]` and `\(...\)` notations, in PR [#5381](https://github.com/microsoft/BotFramework-WebChat/pull/5381), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added support for speech recognition initial silence timeout when using Azure Speech, in PR [#5400](https://github.com/microsoft/BotFramework/WebChat/pull/5400), by [@compulim](https://github.com/compulim)
 -  Introduced syntax highlighting for markdown code blocks, in PR [#5389](https://github.com/microsoft/BotFramework-WebChat/pull/5389), by [@OEvgeny](https://github.com/OEvgeny)
+-  (Experimental) Added `feedbackActionsPlacement` style option to control feedback button placement, in PR [#5407](https://github.com/microsoft/BotFramework-WebChat/pull/5407), by [@OEvgeny](https://github.com/OEvgeny)
+   -  New style option supports two values: `'activity-actions'` and `'activity-status'` (default)
+   -  When set to `'activity-actions'`, feedback buttons are displayed in the activity actions toolbar
+   -  When set to `'activity-status'`, feedback buttons appear in the activity status area (default behavior)
 
 ### Changed
 

__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-2-snap.png

@@ -21,6 +21,10 @@ body {
   width: 360px;
 }
 
+.webchat__tooltip {
+  transition-duration: 0.01ms !important;
+}
+
 body.jest input,
 body.jest textarea,
 body.jest [contenteditable] {

__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-3-snap.png

@@ -612,6 +612,91 @@
 
     $ pip install numpy matplotlib`
         }
+      ], [
+        {
+          from:{
+            role: "bot"
+          },
+          id: "a-00000",
+          type: "message",
+          text: "This is compleded feedback action example.",
+          timestamp: timestamp(),
+          entities: [
+            {
+              ...aiMessageEntity,
+              keywords: ['AIGeneratedContent', 'AllowCopy'],
+              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}"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          from:{
+            role: "bot"
+          },
+          id: "a-00001",
+          type: "message",
+          text: "Hi! I'm Cody, the devbot. How can I help?",
+          timestamp: timestamp(),
+          entities: [
+            {
+              ...aiMessageEntity,
+              keywords: ['AIGeneratedContent', 'AllowCopy'],
+              potentialAction: [
+                {
+                  "@type": "LikeAction",
+                  actionStatus: "PotentialActionStatus",
+                  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}"
+                  }
+                }
+              ]
+            }
+          ]
+        }
       ]];
 
       const leftStore = testHelpers.createStore();
@@ -726,6 +811,24 @@
           await host.snapshot();
           await host.sendKeys('ENTER');
           await host.snapshot();
+        },
+        likeDislike: async sendbox => {
+          sendbox.focus();
+          await host.sendShiftTab();
+          await host.sendKeys('ARROW_UP');
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+          await host.sendKeys('ESCAPE');
+          await host.sendKeys('ESCAPE');
+          await host.snapshot();
         }
       }));
 

__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-4-snap.png

@@ -17,6 +17,10 @@ describe('Fluent theme applied', () => {
     test('side by side left - transcript, right - codeblock', () =>
       runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=5&focus=1&focus-preset=viewCode'));
     test('side by side left - transcript, right - codeblock dark', () =>
-      runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=5&focus=1&focus-preset=viewCode&codeBlockTheme=github-dark-default'));
+      runHTML(
+        'fluentTheme/side-by-side.wide.dark?transcript=0&transcript=5&focus=1&focus-preset=viewCode&codeBlockTheme=github-dark-default'
+      ));
+    test('side by side left - transcript, right - feedback', () =>
+      runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=6&focus=1&focus-preset=likeDislike'));
   });
 });

__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png

@@ -622,6 +622,91 @@
 
     $ pip install numpy matplotlib`
         }
+      ], [
+        {
+          from:{
+            role: "bot"
+          },
+          id: "a-00000",
+          type: "message",
+          text: "This is compleded feedback action example.",
+          timestamp: timestamp(),
+          entities: [
+            {
+              ...aiMessageEntity,
+              keywords: ['AIGeneratedContent', 'AllowCopy'],
+              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}"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          from:{
+            role: "bot"
+          },
+          id: "a-00001",
+          type: "message",
+          text: "Hi! I'm Cody, the devbot. How can I help?",
+          timestamp: timestamp(),
+          entities: [
+            {
+              ...aiMessageEntity,
+              keywords: ['AIGeneratedContent', 'AllowCopy'],
+              potentialAction: [
+                {
+                  "@type": "LikeAction",
+                  actionStatus: "PotentialActionStatus",
+                  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}"
+                  }
+                }
+              ]
+            }
+          ]
+        }
       ]];
 
       const leftStore = testHelpers.createStore();
@@ -709,6 +794,24 @@
           await host.snapshot();
           await host.sendKeys('ENTER');
           await host.snapshot();
+        },
+        likeDislike: async sendbox => {
+          sendbox.focus();
+          await host.sendShiftTab();
+          await host.sendKeys('ARROW_UP');
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+          await host.sendKeys('ESCAPE');
+          await host.sendKeys('ESCAPE');
+          await host.snapshot();
         }
       }));
 

__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png

@@ -16,5 +16,9 @@ describe('Fluent theme applied', () => {
   test('side by side left - transcript, right - codeblock', () =>
     runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=5&focus=1&focus-preset=viewCode'));
   test('side by side left - transcript, right - codeblock dark', () =>
-    runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=5&focus=1&focus-preset=viewCode&codeBlockTheme=github-dark-default'));
+    runHTML(
+      'fluentTheme/side-by-side.wide?transcript=0&transcript=5&focus=1&focus-preset=viewCode&codeBlockTheme=github-dark-default'
+    ));
+  test('side by side left - transcript, right - feedback', () =>
+    runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=6&focus=1&focus-preset=likeDislike'));
 });