Fluent: allow displaying feedback inside activity actions toolbar

microsoft · Jan 9, 2025 · 17b9981 · 17b9981
1 parent cf2b542
commit 17b9981
Show file tree

Hide file tree

Showing 24 changed files with 299 additions and 82 deletions.
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.html b/__tests__/html/fluentTheme/side-by-side.wide.dark.html
@@ -612,6 +612,49 @@
 
     $ pip install numpy matplotlib`
         }
+      ], [
+        {
+          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 +769,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();
         }
       }));
 

diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.js b/__tests__/html/fluentTheme/side-by-side.wide.dark.js
@@ -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'));
   });
 });
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.html b/__tests__/html/fluentTheme/side-by-side.wide.html
@@ -622,6 +622,49 @@
 
     $ pip install numpy matplotlib`
         }
+      ], [
+        {
+          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 +752,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();
         }
       }));
 

diff --git a/__tests__/html/fluentTheme/side-by-side.wide.js b/__tests__/html/fluentTheme/side-by-side.wide.js
@@ -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'));
 });
diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts
@@ -928,6 +928,18 @@ type StyleOptions = {
    * New in 4.19.0.
    */
   codeBlockTheme?: 'github-light-default' | 'github-dark-default';
+
+  /**
+   * Feedback actions placement
+   *
+   * - `'activity-actions'` - place feedback buttons inside activity actions
+   * - `'activity-status'` - place feedback buttons inside activity status
+   *
+   * @default 'activity-status'
+   *
+   * New in 4.19.0.
+   */
+  feedbackActionsPlacement?: 'activity-actions' | 'activity-status';
 };
 
 // StrictStyleOptions is only used internally in Web Chat and for simplifying our code:

diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts
@@ -305,7 +305,9 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   borderAnimationColor2: '#4DD3FF',
   borderAnimationColor3: '#2B8DD8',
 
-  codeBlockTheme: 'github-light-default' as const
+  codeBlockTheme: 'github-light-default' as const,
+
+  feedbackActionsPlacement: 'activity-status' as const
 };
 
 export default DEFAULT_OPTIONS;
diff --git a/packages/component/src/Activity/ActivityFeedback.tsx b/packages/component/src/Activity/ActivityFeedback.tsx
@@ -0,0 +1,53 @@
+import { hooks } from 'botframework-webchat-api';
+import { getOrgSchemaMessage, OrgSchemaAction, parseAction, WebChatActivity } from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { memo, useMemo } from 'react';
+
+import Feedback from './private/Feedback';
+import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
+
+const { useStyleOptions } = hooks;
+
+type ActivityFeedbackProps = Readonly<{
+  activity: WebChatActivity;
+  placement: 'activity-status' | 'activity-actions';
+}>;
+
+function ActivityFeedback({ activity, placement }: ActivityFeedbackProps) {
+  const [{ feedbackActionsPlacement }] = useStyleOptions();
+
+  const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
+
+  const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]);
+
+  const feedbackActions = useMemo<ReadonlySet<OrgSchemaAction> | undefined>(() => {
+    try {
+      const reactActions = (messageThing?.potentialAction || []).filter(
+        ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction'
+      );
+
+      if (reactActions.length) {
+        return Object.freeze(new Set(reactActions));
+      }
+
+      const voteActions = graph.filter(({ type }) => type === 'https://schema.org/VoteAction').map(parseAction);
+
+      if (voteActions.length) {
+        return Object.freeze(new Set(voteActions));
+      }
+    } catch {
+      // Intentionally left blank.
+    }
+  }, [graph, messageThing?.potentialAction]);
+
+  return feedbackActions?.size && placement === feedbackActionsPlacement ? (
+    <Feedback
+      actions={feedbackActions}
+      className={cx({
+        'webchat__thumb-button--large': feedbackActionsPlacement === 'activity-actions'
+      })}
+    />
+  ) : null;
+}
+
+export default memo(ActivityFeedback);
diff --git a/...ivityStatus/private/Feedback/Feedback.tsx → ...mponent/src/Activity/private/Feedback.tsx b/...ivityStatus/private/Feedback/Feedback.tsx → ...mponent/src/Activity/private/Feedback.tsx
@@ -3,19 +3,20 @@ import { type OrgSchemaAction } from 'botframework-webchat-core';
 import React, { Fragment, memo, useEffect, useState, type PropsWithChildren } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import FeedbackVoteButton from './private/VoteButton';
+import FeedbackVoteButton from './VoteButton';
 
 const { usePonyfill, usePostActivity } = hooks;
 
 type Props = Readonly<
   PropsWithChildren<{
     actions: ReadonlySet<OrgSchemaAction>;
+    className?: string | undefined;
   }>
 >;
 
 const DEBOUNCE_TIMEOUT = 500;
 
-const Feedback = memo(({ actions }: Props) => {
+const Feedback = memo(({ actions, className }: Props) => {
   const [{ clearTimeout, setTimeout }] = usePonyfill();
   const [selectedAction, setSelectedAction] = useState<OrgSchemaAction | undefined>();
   const postActivity = usePostActivity();
@@ -46,6 +47,7 @@ const Feedback = memo(({ actions }: Props) => {
       {Array.from(actions).map((action, index) => (
         <FeedbackVoteButton
           action={action}
+          className={className}
           key={action['@id'] || index}
           onClick={setSelectedAction}
           pressed={selectedAction === action}

diff --git a/...te/Feedback/private/ThumbButton.Image.tsx → ...rc/Activity/private/ThumbButton.Image.tsx b/...te/Feedback/private/ThumbButton.Image.tsx → ...rc/Activity/private/ThumbButton.Image.tsx
@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 
-import ThumbDislike16Filled from './icons/ThumbDislike16Filled';
-import ThumbDislike16Regular from './icons/ThumbDislike16Regular';
-import ThumbLike16Filled from './icons/ThumbLike16Filled';
-import ThumbLike16Regular from './icons/ThumbLike16Regular';
+import ThumbDislike16Filled from './ThumbDislike16Filled';
+import ThumbDislike16Regular from './ThumbDislike16Regular';
+import ThumbLike16Filled from './ThumbLike16Filled';
+import ThumbLike16Regular from './ThumbLike16Regular';
 
 type Props = Readonly<{
   className?: string;

diff --git a/.../private/Feedback/private/ThumbButton.tsx → ...nent/src/Activity/private/ThumbButton.tsx b/.../private/Feedback/private/ThumbButton.tsx → ...nent/src/Activity/private/ThumbButton.tsx
@@ -3,17 +3,18 @@ import classNames from 'classnames';
 import React, { memo } from 'react';
 
 import ThumbButtonImage from './ThumbButton.Image';
-import useStyleSet from '../../../../hooks/useStyleSet';
+import useStyleSet from '../../hooks/useStyleSet';
 
 const { useLocalizer } = hooks;
 
 type Props = Readonly<{
+  className?: string | undefined;
   direction: 'down' | 'up';
   onClick?: () => void;
   pressed?: boolean;
 }>;
 
-const ThumbButton = memo(({ direction, onClick, pressed }: Props) => {
+const ThumbButton = memo(({ className, direction, onClick, pressed }: Props) => {
   const [{ thumbButton }] = useStyleSet();
   const localize = useLocalizer();
 
@@ -26,6 +27,7 @@ const ThumbButton = memo(({ direction, onClick, pressed }: Props) => {
       className={classNames(
         'webchat__thumb-button',
         { 'webchat__thumb-button--is-pressed': pressed },
+        className,
         thumbButton + ''
       )}
       onClick={onClick}

diff --git a/...ck/private/icons/ThumbDislike16Filled.tsx → ...Activity/private/ThumbDislike16Filled.tsx b/...ck/private/icons/ThumbDislike16Filled.tsx → ...Activity/private/ThumbDislike16Filled.tsx
diff --git a/...k/private/icons/ThumbDislike16Regular.tsx → ...ctivity/private/ThumbDislike16Regular.tsx b/...k/private/icons/ThumbDislike16Regular.tsx → ...ctivity/private/ThumbDislike16Regular.tsx
diff --git a/...dback/private/icons/ThumbLike16Filled.tsx → ...rc/Activity/private/ThumbLike16Filled.tsx b/...dback/private/icons/ThumbLike16Filled.tsx → ...rc/Activity/private/ThumbLike16Filled.tsx
diff --git a/...back/private/icons/ThumbLike16Regular.tsx → ...c/Activity/private/ThumbLike16Regular.tsx b/...back/private/icons/ThumbLike16Regular.tsx → ...c/Activity/private/ThumbLike16Regular.tsx
diff --git a/...s/private/Feedback/private/VoteButton.tsx → ...onent/src/Activity/private/VoteButton.tsx b/...s/private/Feedback/private/VoteButton.tsx → ...onent/src/Activity/private/VoteButton.tsx
@@ -5,12 +5,13 @@ import { useRefFrom } from 'use-ref-from';
 import ThumbsButton from './ThumbButton';
 
 type Props = Readonly<{
+  className?: string;
   action: OrgSchemaAction;
   onClick?: (action: OrgSchemaAction) => void;
   pressed: boolean;
 }>;
 
-const FeedbackVoteButton = memo(({ action, onClick, pressed }: Props) => {
+const FeedbackVoteButton = memo(({ action, className, onClick, pressed }: Props) => {
   const onClickRef = useRefFrom(onClick);
   const voteActionRef = useRefFrom(action);
 
@@ -28,7 +29,7 @@ const FeedbackVoteButton = memo(({ action, onClick, pressed }: Props) => {
 
   const handleClick = useCallback(() => onClickRef.current?.(voteActionRef.current), [onClickRef, voteActionRef]);
 
-  return <ThumbsButton direction={direction} onClick={handleClick} pressed={pressed} />;
+  return <ThumbsButton className={className} direction={direction} onClick={handleClick} pressed={pressed} />;
 });
 
 FeedbackVoteButton.displayName = 'FeedbackVoteButton';