[JS] bump: Updating Feedback buttons to the sample (#2245)

> ## Linked update > This PR adds feedback button functionality to the sample. > #minor : https://review.learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/bot-messages-ai-generated-content?branch=pr-en-us-11185&tabs=before%2Cbotmessage#feedback-buttons > > ## Details > Provide a list of your changes here. If you are fixing a bug, please provide steps to reproduce the bug. > 1. Added feedback functionality for users. >2. Introduced two new options for feedback: >Default Feedback: Users can type "default feedback" to provide predefined feedback. >Custom Feedback: Users can type "custom feedback" to provide personalized feedback. >3. Updated the bot's welcome message to inform users about these feedback options. > > #### Change details > > > Describe your changes, with screenshots and code snippets as appropriate > > **code snippets**: > > **screenshots**: > ![Screenshot (1027)](https://github.com/user-attachments/assets/7c1099a3-b69c-4a7c-9df1-a564948e7c8b) ![Screenshot (1028)](https://github.com/user-attachments/assets/cfe118e9-61b0-4398-a59b-419343f2936c) ![Screenshot (1029)](https://github.com/user-attachments/assets/b99c0f3c-8b11-45d3-969a-ddc9b45e06b4) ![Screenshot (1030)](https://github.com/user-attachments/assets/d61ae4c4-b9aa-4afd-b6c7-bddf7ad9a0a7) ![Screenshot (1031)](https://github.com/user-attachments/assets/88beb3ad-5dcd-4dda-ae6e-30eb530b24f9) ![Screenshot (1032)](https://github.com/user-attachments/assets/37258ff0-bd1b-4c1a-8737-ad06cb0a9ee8) > ## Attestation Checklist > * [ ] My code follows the style guidelines of this project > * I have checked for/fixed spelling, linting, and other errors > * I have commented my code for clarity > * I have made corresponding changes to the documentation (updating the doc strings in the code is sufficient) > * My changes generate no new warnings > * I have added tests that validates my changes, and provides sufficient test coverage. I have tested with: > > * Local testing > * E2E testing in Teams > * New and existing unit tests pass locally with my changes > > ### Additional information > > Feel free to add other relevant information below --------- Co-authored-by: Corina <[email protected]>
microsoft · Jan 7, 2025 · 510b2fd · 510b2fd
1 parent fb49078
commit 510b2fd
Showing 1 changed file with 87 additions and 3 deletions.
diff --git a/js/samples/03.ai-concepts/f.chatModeration/src/bot.ts b/js/samples/03.ai-concepts/f.chatModeration/src/bot.ts
@@ -9,7 +9,7 @@ import {
     OpenAIModerator,
     Moderator
 } from '@microsoft/teams-ai';
-import { MemoryStorage, TurnContext } from 'botbuilder';
+import { ActivityTypes, CardFactory, MemoryStorage, TaskModuleTaskInfo, TurnContext } from 'botbuilder';
 import * as path from 'path';
 
 if (!process.env.OPENAI_KEY && !process.env.AZURE_OPENAI_KEY) {
@@ -90,7 +90,9 @@ const app = new Application({
     storage,
     ai: {
         planner,
-        moderator
+        moderator,
+        enable_feedback_loop: true,
+        feedback_loop_type: 'custom'
     }
 });
 
@@ -104,7 +106,11 @@ app.conversationUpdate('membersAdded', async (context, state) => {
         // Ignore the bot joining the conversation
         if (membersAdded[member].id !== context.activity.recipient.id) {
             await context.sendActivity(
-                `Hello and welcome! With this sample you can see the functionality of the Content Safety Moderator of Azure Open AI services.`
+                `Hello and welcome! With this sample, you can see the functionality of the Content Safety Moderator of Azure Open AI services.
+        Additionally, you can explore the feedback functionality by using the following commands:
+
+- **Default Feedback:** Test the default feedback feature.
+- **Custom Feedback:** Try out the custom feedback option.`
             );
         }
     }
@@ -115,6 +121,77 @@ app.message('/reset', async (context, state) => {
     await context.sendActivity(`Ok lets start this over.`);
 });
 
+app.message('default feedback', async (context, state) => {
+
+    await context.sendActivity({
+        type: ActivityTypes.Message,
+        text: "We'd love to hear your thoughts! Please click below to provide feedback.",
+        channelData: {
+          feedbackLoop: {
+            type: "default"
+          }
+        },
+      });
+});
+
+app.message('custom feedback', async (context, state) => {
+
+    await context.sendActivity({
+        type: ActivityTypes.Message,
+        text: "We'd love to hear your thoughts! Please click below to provide feedback.",
+        channelData: {
+          feedbackLoop: {
+            type: "custom"
+          }
+        },
+      });
+});
+
+app.messages.fetch(async (context, state, data) => {
+    var taskInfo = {} as any; // TaskModuleTaskInfo
+    const createAdaptiveCardAttachment = () =>
+         CardFactory.adaptiveCard({
+            version: '1.0.0',
+            type: 'AdaptiveCard',
+            body: [
+                {
+                    type: 'TextBlock',
+                    text: 'Enter Text Here'
+                },
+                {
+                    type: 'Input.Text',
+                    id: 'usertext',
+                    placeholder: 'This is a custom feedback form built with Adaptive Card.',
+                    IsMultiline: true
+                }
+            ],
+            actions: [
+                {
+                    type: 'Action.Submit',
+                    title: 'Submit'
+                }
+            ]
+        });
+
+    const setTaskInfo = (taskInfo: any, uiSettings: any) => {
+        taskInfo.height = uiSettings.height;
+        taskInfo.width = uiSettings.width;
+        taskInfo.title = uiSettings.title;
+    }
+
+    taskInfo.card = createAdaptiveCardAttachment();
+
+    setTaskInfo(taskInfo, {
+      width: 400,
+      height: 200,
+      title: 'Custom Feedback Form',
+      id: path,
+      buttonTitle: 'Custom Feedback Form'
+    });
+
+    return Promise.resolve(taskInfo as string | TaskModuleTaskInfo);
+});
+
 app.ai.action(AI.FlaggedInputActionName, async (context, state, data) => {
     let message = '';
     if (data?.categories?.hate) {
@@ -133,6 +210,7 @@ app.ai.action(AI.FlaggedInputActionName, async (context, state, data) => {
     await context.sendActivity(
         `I'm sorry your message was flagged due to triggering Azure OpenAI’s content management policy. Reason: ${message}`
     );
+
     return AI.StopCommandName;
 });
 
@@ -145,3 +223,9 @@ app.ai.action(AI.HttpErrorActionName, async (context, state, data) => {
     await context.sendActivity('An AI request failed. Please try again later.');
     return AI.StopCommandName;
 });
+
+app.feedbackLoop(async (context, state, data) => {
+    await context.sendActivity('Thank you for your feedback!');
+    const Feedback = typeof data.actionValue.feedback === 'string' ? JSON.parse(data.actionValue.feedback) : data.actionValue.feedback;
+    await context.sendActivity('Provided reaction: '+ data.actionValue.reaction + '<br>Feedback: ' + (Feedback.usertext != undefined ? Feedback.usertext : Feedback.feedbackText));
+});