feat(genqa): new feedback modal (#4092)

**Feedback Modal Full width** 

![Screenshot 2024-06-14 at 3 24
25 PM](https://github.com/coveo/ui-kit/assets/119955059/74cf8b69-d580-4cc9-b6f0-ceab3a393ed9)


**Hover buttons state** 

![Screenshot 2024-06-14 at 3 27
25 PM](https://github.com/coveo/ui-kit/assets/119955059/d4d8ecb9-1e9b-4cb9-8f75-257133a0ebb4)


**Selected buttons state**

![Screenshot 2024-06-14 at 3 27
36 PM](https://github.com/coveo/ui-kit/assets/119955059/d34200c3-b422-4379-ad78-85bf66383940)


**Required field error after submit state**

![Screenshot 2024-06-14 at 3 27
50 PM](https://github.com/coveo/ui-kit/assets/119955059/26e9cea6-e941-4f46-bebc-9d7cba58cbcf)


**Feedback modal mobile version**

![Screenshot 2024-06-14 at 3 28
12 PM](https://github.com/coveo/ui-kit/assets/119955059/273a8083-f112-4e91-8e0d-9bed778489e9)


**Feedback modal mobile version with error**

<img width="441" alt="Screenshot 2024-07-11 at 11 21 00 AM"
src="https://github.com/coveo/ui-kit/assets/119955059/e5337797-f3b5-4d2f-a78a-908a892d2286">


**Sumbit Events**

![Screenshot 2024-07-05 at 10 39
36 AM](https://github.com/coveo/ui-kit/assets/119955059/c7d24668-58dc-4f73-8c77-1f840cfa10de)


**DEMO**


https://github.com/coveo/ui-kit/assets/119955059/34dc5da7-fbb6-4e55-b0ed-4a4cecb2f179

packages/atomic/cypress/e2e/generated-answer-selectors.ts

@@ -1,3 +1,5 @@
+import {GeneratedAnswerFeedbackV2} from '@coveo/headless';
+
 export const generatedAnswerComponent = 'atomic-generated-answer';
 export const feedbackModal = 'atomic-generated-answer-feedback-modal';
 export const GeneratedAnswerSelectors = {
@@ -54,12 +56,17 @@ export const feedbackModalSelectors = {
   modalHeader: () =>
     feedbackModalSelectors.atomicModal().find('[part="modal-header"]'),
   modalFooter: () =>
-    feedbackModalSelectors.atomicModal().find('[part="modalFooter"]'),
-  detailsTextArea: () =>
-    feedbackModalSelectors.atomicModal().find('[part="details-input"]'),
+    feedbackModalSelectors.atomicModal().find('[part="modal-footer"]'),
   other: () => feedbackModalSelectors.atomicModal().find('.other'),
-  reason: () =>
-    feedbackModalSelectors.atomicModal().find('[part="reason-radio"]'),
+  feedbackOption: (
+    feedback: keyof GeneratedAnswerFeedbackV2,
+    optionText: 'No' | 'Yes' | 'Not sure'
+  ) =>
+    feedbackModalSelectors
+      .atomicModal()
+      .find('[part="form"]')
+      .find(`.${feedback}`)
+      .find(`input[value=${optionText}]`),
   submitButton: () =>
     feedbackModalSelectors.atomicModal().find('[part="submit-button"]'),
   cancelButton: () =>

packages/atomic/cypress/e2e/generated-answer.cypress.ts

@@ -151,42 +151,68 @@ describe('Generated Answer Test Suites', () => {
         setupGeneratedAnswer(streamId);
         cy.wait(getStreamInterceptAlias(streamId));
         GeneratedAnswerSelectors.answer();
-        GeneratedAnswerSelectors.dislikeButton().click({force: true});
       });
 
       it('should open when an answer is disliked', () => {
+        GeneratedAnswerSelectors.dislikeButton().click({force: true});
+
+        feedbackModalSelectors.modalBody().should('exist');
+        feedbackModalSelectors.modalHeader().should('exist');
+        feedbackModalSelectors.modalFooter().should('exist');
+      });
+
+      it('should open when an answer is liked', () => {
+        GeneratedAnswerSelectors.likeButton().click({force: true});
+
         feedbackModalSelectors.modalBody().should('exist');
         feedbackModalSelectors.modalHeader().should('exist');
         feedbackModalSelectors.modalFooter().should('exist');
       });
 
       describe('select button', () => {
-        it('should submit proper reason', () => {
-          const notAccurateReason = feedbackModalSelectors.reason().eq(1);
-          notAccurateReason.should('have.id', 'notAccurate');
-          notAccurateReason.click({force: true});
+        it('should submit proper feedback', () => {
+          GeneratedAnswerSelectors.likeButton().click({force: true});
+
+          feedbackModalSelectors
+            .feedbackOption('correctTopic', 'Yes')
+            .click({force: true});
+          feedbackModalSelectors
+            .feedbackOption('hallucinationFree', 'No')
+            .click({force: true});
+
+          feedbackModalSelectors.submitButton().click();
+          feedbackModalSelectors.submitButton().should('exist');
+
+          feedbackModalSelectors
+            .feedbackOption('readable', 'Yes')
+            .click({force: true});
+          feedbackModalSelectors
+            .feedbackOption('documented', 'Yes')
+            .click({force: true});
 
           feedbackModalSelectors.submitButton().click();
           feedbackModalSelectors.submitButton().should('not.exist');
           feedbackModalSelectors.cancelButton().should('exist');
 
           cy.get(`${RouteAlias.UA}.3`)
-            .its('request.body.customData.reason')
-            .should('equal', 'notAccurate');
-        });
-      });
+            .its('request.body.customData.helpful')
+            .should('equal', true);
 
-      describe('add details text area', () => {
-        it('should be visible when other is selected', () => {
-          feedbackModalSelectors.detailsTextArea().should('not.exist');
+          cy.get(`${RouteAlias.UA}.3`)
+            .its('request.body.customData.correctTopic')
+            .should('equal', 'yes');
 
-          const reasons = feedbackModalSelectors.reason();
-          reasons.last().should('have.id', 'other');
+          cy.get(`${RouteAlias.UA}.3`)
+            .its('request.body.customData.hallucinationFree')
+            .should('equal', 'no');
 
-          reasons.last().click({force: true});
+          cy.get(`${RouteAlias.UA}.3`)
+            .its('request.body.customData.readable')
+            .should('equal', 'yes');
 
-          feedbackModalSelectors.detailsInput().should('exist');
-          feedbackModalSelectors.submitButton().should('be.enabled');
+          cy.get(`${RouteAlias.UA}.3`)
+            .its('request.body.customData.documented')
+            .should('equal', 'yes');
         });
       });
     });

packages/atomic/src/components.d.ts

@@ -1020,6 +1020,10 @@ export namespace Components {
           * A `GeneratedAnswer` controller instance. It is used when the user interacts with the modal.
          */
         "generatedAnswer": GeneratedAnswer;
+        /**
+          * Indicates whether the answer was helpful or not.
+         */
+        "helpful": boolean;
         /**
           * Indicates whether the modal is open.
          */
@@ -6486,6 +6490,10 @@ declare namespace LocalJSX {
           * A `GeneratedAnswer` controller instance. It is used when the user interacts with the modal.
          */
         "generatedAnswer": GeneratedAnswer;
+        /**
+          * Indicates whether the answer was helpful or not.
+         */
+        "helpful"?: boolean;
         /**
           * Indicates whether the modal is open.
          */

packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.pcss

@@ -1 +1,61 @@
 @import '../../../../global/global.pcss';
+
+@define-mixin mobile-feedback-modal {
+  &::part(container) {
+    @apply w-auto min-w-full;
+  }
+
+  &::part(header),
+  &::part(body),
+  &::part(footer) {
+    @apply max-w-full;
+  }
+  [part='buttons'] {
+    .required-label {
+      @apply text-sm;
+    }
+  }
+  [part='form'] {
+    .answer-evaluation {
+      @apply block;
+    }
+
+    .options {
+      @apply mt-2;
+    }
+  }
+  [part='modal-header'] {
+    .hide {
+      @apply hidden;
+    }
+  }
+}
+
+[part='generated-answer-feedback-modal'] {
+  &::part(container) {
+    @apply min-w-[42.5rem];
+  }
+
+  &::part(header),
+  &::part(body),
+  &::part(footer) {
+    @apply max-w-[42.5rem];
+  }
+
+  @screen mobile-only {
+    @mixin mobile-feedback-modal;
+  }
+}
+
+[part='form'] {
+  .active {
+    @apply border-primary-light text-primary-light;
+    background-color: var(--atomic-primary-background);
+  }
+  .text-error-red {
+    color: var(--atomic-inline-code);
+  }
+  .required {
+    @apply flex;
+  }
+}