add feedback loop property to messages

lexi-taylor · lexi-taylor · commit f8bf2cde1466 · 2025-04-03T15:14:14.000-04:00
diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html b/__tests__/html2/fluentTheme/defaultFeedback.activity.html
@@ -0,0 +1,68 @@
+<!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>
+  </head>
+
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          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'
+            }
+          }
+        });
+
+        const { activity } = await directLine.actPostActivity(() => Promise.resolve({}));
+
+        expect(activity).toEqual(
+          expect.objectContaining({
+            name: 'webchat:activity-status/feedback',
+            type: 'event',
+            channelData: expect.objectContaining({
+              feedbackLoop: { type: 'default' }
+            })
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/component/src/Activity/ActivityFeedback.tsx b/packages/component/src/Activity/ActivityFeedback.tsx
@@ -2,6 +2,8 @@ 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 { defaultFeedbackEntities } from './private/DefaultFeedbackEntities';
+import { isDefaultFeedbackActivity } from './private/isDefaultFeedbackActivity';
 
 import Feedback from './private/Feedback';
 import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
@@ -12,12 +14,27 @@ type ActivityFeedbackProps = Readonly<{
   activity: WebChatActivity;
 }>;
 
+const parseActivity = (entities?: WebChatActivity['entities']) => {
+  const graph = dereferenceBlankNodes(entities || []);
+  const messageThing = getOrgSchemaMessage(graph);
+  return { graph, messageThing };
+};
+
+const useGetMessageThing = (activity: WebChatActivity) =>
+  useMemo(() => {
+    const { messageThing, graph } = parseActivity(activity.entities);
+    if (messageThing?.potentialAction) {
+      return { includeDefaultFeedback: false, messageThing, graph };
+    } else if (isDefaultFeedbackActivity(activity)) {
+      return { includeDefaultFeedback: true, ...parseActivity([defaultFeedbackEntities]) };
+    }
+    return { includeDefaultFeedback: false, ...parseActivity() };
+  }, [activity]);
+
 function ActivityFeedback({ activity }: ActivityFeedbackProps) {
   const [{ feedbackActionsPlacement }] = useStyleOptions();
 
-  const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
-
-  const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]);
+  const { messageThing, graph, includeDefaultFeedback } = useGetMessageThing(activity);
 
   const feedbackActions = useMemo<ReadonlySet<OrgSchemaAction>>(() => {
     try {
@@ -46,6 +63,7 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
       className={cx({
         'webchat__thumb-button--large': feedbackActionsPlacement === 'activity-actions'
       })}
+      includeDefaultFeedback={includeDefaultFeedback}
     />
   );
 }
diff --git a/packages/component/src/Activity/private/DefaultFeedbackEntities.ts b/packages/component/src/Activity/private/DefaultFeedbackEntities.ts
@@ -0,0 +1,17 @@
+export const defaultFeedbackEntities = {
+  '@context': 'https://schema.org',
+  '@id': '',
+  '@type': 'Message',
+  type: 'https://schema.org/Message',
+  keywords: [],
+  potentialAction: [
+    {
+      '@type': 'LikeAction',
+      actionStatus: 'PotentialActionStatus'
+    },
+    {
+      '@type': 'DislikeAction',
+      actionStatus: 'PotentialActionStatus'
+    }
+  ]
+};
diff --git a/packages/component/src/Activity/private/Feedback.tsx b/packages/component/src/Activity/private/Feedback.tsx
@@ -11,12 +11,13 @@ type Props = Readonly<
   PropsWithChildren<{
     actions: ReadonlySet<OrgSchemaAction>;
     className?: string | undefined;
+    includeDefaultFeedback?: boolean;
   }>
 >;
 
 const DEBOUNCE_TIMEOUT = 500;
 
-const Feedback = memo(({ actions, className }: Props) => {
+const Feedback = memo(({ actions, className, includeDefaultFeedback }: Props) => {
   const [{ clearTimeout, setTimeout }] = usePonyfill();
   const [selectedAction, setSelectedAction] = useState<OrgSchemaAction | undefined>();
   const postActivity = usePostActivity();
@@ -36,15 +37,19 @@ const Feedback = memo(({ actions, className }: Props) => {
           entities: [selectedAction],
           name: 'webchat:activity-status/feedback',
           type: 'event',
-          channelData: {
-            feedbackLoop: { type: 'default' }
-          }
+          ...(includeDefaultFeedback
+            ? {
+                channelData: {
+                  feedbackLoop: { type: 'default' }
+                }
+              }
+            : {})
         } as any),
       DEBOUNCE_TIMEOUT
     );
 
     return () => clearTimeout(timeout);
-  }, [clearTimeout, postActivityRef, selectedAction, setTimeout]);
+  }, [clearTimeout, includeDefaultFeedback, postActivityRef, selectedAction, setTimeout]);
 
   const actionProps = useMemo(
     () =>
diff --git a/packages/component/src/Activity/private/isDefaultFeedbackActivity.ts b/packages/component/src/Activity/private/isDefaultFeedbackActivity.ts
@@ -0,0 +1,23 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+type ActivityType = 'event' | 'message';
+
+type FeedbackActivity<T extends ActivityType> = WebChatActivity & {
+  type: T;
+  channelData: {
+    feedbackLoop: {
+      type: 'default';
+    };
+  };
+};
+
+export const isDefaultFeedbackActivity = (activity: WebChatActivity): activity is FeedbackActivity<ActivityType> => {
+  if (
+    (activity.type === 'message' || activity.type === 'event') &&
+    activity.channelData.feedbackLoop?.type === 'default'
+  ) {
+    return true;
+  }
+
+  return false;
+};
diff --git a/packages/core/src/types/WebChatActivity.ts b/packages/core/src/types/WebChatActivity.ts
@@ -112,6 +112,10 @@ type ChannelData<SendStatus extends SupportedSendStatus | undefined, Type extend
 
           // TODO: [P2] #3953 It seems Direct Line added a new "summary" field to cater this case.
           'webchat:fallback-text'?: string;
+
+          feedbackLoop?: {
+            type: 'default';
+          };
         }
       : Record<any, any>)
 >;
diff --git a/packages/fluent-theme/src/components/activity/FeedbackForm.tsx b/packages/fluent-theme/src/components/activity/FeedbackForm.tsx
@@ -2,7 +2,7 @@ import React, { memo, useState, useMemo, useCallback } from 'react';
 import { hooks } from 'botframework-webchat-component';
 import { useStyles } from '../../styles';
 import styles from './FeedbackForm.module.css';
-import { type WebChatActivity, parseThing } from 'botframework-webchat-core';
+import { type WebChatActivity, parseThing, markActivity } from 'botframework-webchat-core';
 import StackedLayout from './private/StackedLayout';
 import TextArea from '../sendBox/TextArea';
 import cx from 'classnames';
@@ -45,15 +45,21 @@ function FeedbackForm({ activity }: Readonly<{ activity: WebChatActivity }>) {
             }
           }
         } as any);
+        if (activity.id) {
+          markActivity({ id: activity.id }, 'feedbackActionClicked', true);
+        }
         setFeedback('');
       }
     },
-    [feedback, postActivity, reactionType]
+    [activity.id, feedback, postActivity, reactionType]
   );
 
   const handleCancel = useCallback(() => {
     setFeedback('');
-  }, []);
+    if (activity.id) {
+      markActivity({ id: activity.id }, 'feedbackActionClicked', true);
+    }
+  }, [activity.id]);
 
   const handleChange = useCallback(
     event => {
