Add rationales to the getPromptJSON output of Radio widget and Label Image widget (#2557)

## Summary:

Add rationales to the getPromptJSON output of Radio widget and Label Image widget.

This is a small addition to the information that getPromptJSON already returns, and only affects these specific widgets.

The intent is to have rationales accessible when we use getPromptJSON to get the state of widgets.

Issue: TUT-2087

## Test plan:
- Updated tests
- Run all tests

Author: marekweb

Reviewers: jeremywiebe, benchristel, anakaren-rojas, marekweb, MikeKlemarewski, tony-dinh

Required Reviewers:

Approved By: jeremywiebe, benchristel, anakaren-rojas

Checks: ✅ 8 checks were successful

Pull Request URL: #2557

Author: marekweb

.changeset/metal-spies-double.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Add rationales to the getPromptJSON output of Radio widget and Label Image widget

packages/perseus/src/widget-ai-utils/group/group-ai-utils.test.ts

@@ -127,7 +127,11 @@ describe("Group AI utils", () => {
                             options: [
                                 {value: "$45$"},
                                 {value: "$42$"},
-                                {value: "$30$"},
+                                {
+                                    value: "$30$",
+                                    rationale:
+                                        "Here's a clue, this isn't the correct answer!",
+                                },
                                 {value: "$18$"},
                                 {value: "$15$"},
                             ],

packages/perseus/src/widget-ai-utils/label-image/label-image-ai-utils.test.ts

@@ -142,15 +142,19 @@ describe("LabelImage AI utils", () => {
                 markers: [
                     {
                         label: "The fourth unlabeled bar line.",
+                        answers: ["SUVs"],
                     },
                     {
                         label: "The third unlabeled bar line.",
+                        answers: ["Trucks"],
                     },
                     {
                         label: "The second unlabeled bar line.",
+                        answers: ["Cars"],
                     },
                     {
                         label: "The first unlabeled bar line.",
+                        answers: ["Vans"],
                     },
                 ],
                 choices: ["Trucks", "Vans", "Cars", "SUVs"],
@@ -211,15 +215,19 @@ describe("LabelImage AI utils", () => {
                         markers: [
                             {
                                 label: "The fourth unlabeled bar line.",
+                                answers: ["SUVs"],
                             },
                             {
                                 label: "The third unlabeled bar line.",
+                                answers: ["Trucks"],
                             },
                             {
                                 label: "The second unlabeled bar line.",
+                                answers: ["Cars"],
                             },
                             {
                                 label: "The first unlabeled bar line.",
+                                answers: ["Vans"],
                             },
                         ],
                     },

packages/perseus/src/widget-ai-utils/label-image/label-image-ai-utils.ts

@@ -8,6 +8,7 @@ type BaseMarker = {
 
 type UserInputMarker = {
     label: string;
+    answers?: string[];
     selected?: ReadonlyArray<string>;
 };
 
@@ -29,9 +30,13 @@ export const getPromptJSON = (
     userInput: PerseusLabelImageUserInput,
 ): LabelImagePromptJSON => {
     const propMarkers = renderProps.markers.map((marker) => {
-        return {
+        const userInputMarker: UserInputMarker = {
             label: marker.label,
         };
+        if (marker.answers?.length) {
+            userInputMarker.answers = marker.answers;
+        }
+        return userInputMarker;
     });
 
     const inputMarkers = userInput.markers.map((marker) => {

packages/perseus/src/widget-ai-utils/radio/radio-ai-utils.ts

@@ -7,6 +7,7 @@ import type React from "react";
 
 type BasicOption = {
     value: string;
+    rationale?: string;
 };
 
 export type RadioPromptJSON = {
@@ -26,9 +27,13 @@ export const getPromptJSON = (
     const choices = renderProps.choices || [];
 
     const options = choices.map((choice) => {
-        return {
+        const option: BasicOption = {
             value: choice.content,
         };
+        if (choice.clue) {
+            option.rationale = choice.clue;
+        }
+        return option;
     });
 
     return {