feat(quantic): disclaimer message for rga (#3739)

Added a disclaimer at the bottom of the RGA message. The disclaimer has a default look and text of : `Generated content may contain errors. Verify important information.` And the section for the disclaimer is also a slot, so if someone wants to completely change what gets displayed as the disclaimer, they can not only edit the text, but also the HTML. The message is also a label, so it can be translated, etc. Single line footer: ![image](https://github.com/coveo/ui-kit/assets/2488155/116c546a-0bdf-4e97-8375-73911a409efa) Multi-line footer: ![image](https://github.com/coveo/ui-kit/assets/2488155/9ea7eb59-6bd1-4dea-9301-ef1ae14cb609) In the Insight Panel: ![image](https://github.com/coveo/ui-kit/assets/2488155/e09e6b6b-cbe5-4a19-bc90-74266a629044)
coveo · Mar 25, 2024 · a085429 · a085429
1 parent 138a8b1
commit a085429
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 5 deletions.
diff --git a/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-expectations.ts b/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-expectations.ts
@@ -208,6 +208,20 @@ function generatedAnswerExpectations(selector: GeneratedAnswerSelector) {
         .log(`should display the rephrase button with the label ${label}`);
     },
 
+    displayDisclaimer: (display: boolean) => {
+      selector
+        .disclaimer()
+        .should(display ? 'exist' : 'not.exist')
+        .log(`${should(display)} display the disclaimer`);
+    },
+
+    disclaimerContains: (text: string) => {
+      selector
+        .disclaimer()
+        .contains(text)
+        .log(`the disclaimer should contain "${text}"`);
+    },
+
     rephraseButtonIsSelected: (name: string, selected: boolean) => {
       selector
         .rephraseButtonByLabel(name)

diff --git a/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-selectors.ts b/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-selectors.ts
@@ -29,6 +29,7 @@ export interface GeneratedAnswerSelector extends ComponentSelector {
   citationTooltipUri: (index: number) => CypressSelector;
   citationTooltipTitle: (index: number) => CypressSelector;
   citationTooltipText: (index: number) => CypressSelector;
+  disclaimer: () => CypressSelector;
 }
 
 export const GeneratedAnswerSelectors: GeneratedAnswerSelector = {
@@ -126,4 +127,8 @@ export const GeneratedAnswerSelectors: GeneratedAnswerSelector = {
         '[data-cy="generated-answer__citations"] [data-cy="citation__tooltip-text"]'
       )
       .eq(index),
+  disclaimer: () =>
+    GeneratedAnswerSelectors.get().find(
+      '[data-cy="generated-answer__disclaimer"]'
+    ),
 };
diff --git a/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer.cypress.ts b/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer.cypress.ts
@@ -65,6 +65,9 @@ const genQaMessageTypePayload = {
 
 const retryableErrorCodes = [500, 429];
 
+const GENERATED_ANSWER_DISCLAIMER =
+  'Generated content may contain errors. Verify important information.';
+
 describe('quantic-generated-answer', () => {
   beforeEach(() => {
     cy.clock(0, ['Date']);
@@ -136,6 +139,12 @@ describe('quantic-generated-answer', () => {
             Expect.generatedAnswerIsStreaming(false);
           });
 
+          it('should display the disclaimer', () => {
+            Expect.displayDisclaimer(true);
+            Expect.disclaimerContains(GENERATED_ANSWER_DISCLAIMER);
+            Expect.generatedAnswerIsStreaming(false);
+          });
+
           it('should perform a search query with the default rephrase button', () => {
             cy.wait(InterceptAliases.Search);
             Expect.searchQueryContainsCorrectRephraseOption(
@@ -228,6 +237,7 @@ describe('quantic-generated-answer', () => {
             scope('when loading the page', () => {
               Expect.displayGeneratedAnswerCard(true);
               Expect.generatedAnswerFooterIsOnMultiline(true);
+              Expect.displayDisclaimer(true);
             });
           });
         });
@@ -258,6 +268,7 @@ describe('quantic-generated-answer', () => {
             Expect.displayCopyToClipboardButton(false);
             Expect.displayToggleGeneratedAnswerButton(true);
             Expect.toggleGeneratedAnswerButtonIsChecked(true);
+            Expect.displayDisclaimer(false);
           });
         });
 
@@ -596,6 +607,7 @@ describe('quantic-generated-answer', () => {
                   Expect.displayGeneratedAnswerContent(false);
                   Expect.displayLikeButton(false);
                   Expect.displayDislikeButton(false);
+                  Expect.displayDisclaimer(false);
                   if (analyticsMode === 'next') {
                     NextAnalyticsExpectations.emitQnaAnswerActionEvent(
                       {
@@ -864,6 +876,7 @@ describe('quantic-generated-answer', () => {
                     cy.wait(getStreamInterceptAlias(streamId));
                   }
                   Expect.displayGeneratedAnswerCard(true);
+                  Expect.displayDisclaimer(false);
 
                   Actions.clickRetry();
                   cy.wait(InterceptAliases.Search);

diff --git a/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html b/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html
@@ -119,6 +119,10 @@
           </c-quantic-tab-bar>
         </div>
 
+        <div class="slds-var-p-horizontal_medium">
+          <c-quantic-generated-answer engine-id={engineId} multiline-footer></c-quantic-generated-answer>
+        </div>
+
         <div class="slds-var-p-bottom_medium insight-panel_body">
           <c-quantic-query-error engine-id={engineId}></c-quantic-query-error>
           <c-quantic-did-you-mean engine-id={engineId}></c-quantic-did-you-mean>

diff --git a/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.js b/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.js
@@ -21,7 +21,7 @@ export default class ExampleInsightPanel extends LightningElement {
   /** @type {string} */
   @api engineId = 'example-insight-panel';
   /** @type {string} */
-  @api insightId = '6a333202-b1e0-451e-8664-26a1f93c2faf';
+  @api insightId = '142be676-703c-445f-b2d3-fcc7c0a3ded8';
 
   connectedCallback() {
     this.template.addEventListener(

diff --git a/...s/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.js-meta.xml b/...s/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.js-meta.xml
@@ -12,7 +12,7 @@
     <targetConfigs>
         <targetConfig targets="lightningCommunity__Default, lightning__AppPage, lightning__RecordPage, lightning__HomePage">
             <property name="engineId" type="String" default="example-insight-panel" label="Enter Coveo Headless engine ID"/>
-            <property name="insightId" type="String" default="6a333202-b1e0-451e-8664-26a1f93c2faf" label="The insight panel config ID"/>
+            <property name="insightId" type="String" default="" label="The insight panel config ID"/>
         </targetConfig>
     </targetConfigs>
 </LightningComponentBundle>
diff --git a/packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml b/packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml
@@ -1400,11 +1400,18 @@
     <protected>false</protected>
     <shortDescription>Generated answer ON</shortDescription>
   </labels>
-    <labels>
+  <labels>
     <fullName>quantic_GeneratedAnswerOff</fullName>
     <value>Generated answer OFF</value>
     <language>en_US</language>
     <protected>false</protected>
     <shortDescription>Generated answer OFF</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_RGADisclaimer</fullName>
+    <value>Generated content may contain errors. Verify important information.</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Generated answer disclaimer</shortDescription>
+  </labels>
 </CustomLabels>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.js b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.js
@@ -10,6 +10,7 @@ import irrelevant from '@salesforce/label/c.quantic_Irrelevant';
 import loading from '@salesforce/label/c.quantic_Loading';
 import other from '@salesforce/label/c.quantic_Other';
 import outOfDate from '@salesforce/label/c.quantic_OutOfDate';
+import rgaDisclaimer from '@salesforce/label/c.quantic_RGADisclaimer';
 import thisAnswerWasHelpful from '@salesforce/label/c.quantic_ThisAnswerWasHelpful';
 import thisAnswerWasNotHelpful from '@salesforce/label/c.quantic_ThisAnswerWasNotHelpful';
 import tryAgain from '@salesforce/label/c.quantic_TryAgain';
@@ -102,6 +103,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     generatingAnswer,
     generatedAnswerIsHidden,
     answerGenerated,
+    rgaDisclaimer,
   };
 
   /** @type {GeneratedAnswer} */
@@ -399,7 +401,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   }
 
   get generatedAnswerFooterCssClass() {
-    return `slds-grid slds-grid_align-spread generated-answer__footer--${
+    return `slds-grid slds-wrap slds-grid_align-spread generated-answer__footer--${
       this.multilineFooter ? 'multiline' : 'standard'
     }`;
   }
@@ -421,6 +423,14 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     }`;
   }
 
+  get shouldShowDisclaimer() {
+    return this.isVisible && !this.isStreaming;
+  }
+
+  get disclaimerCssClass() {
+    return `slds-var-m-top_small slds-col slds-size_1-of-1 slds-text-color_weak slds-text-body_small ${this.multilineFooter ? '' : 'slds-text-align_right'}`;
+  }
+
   /**
    * Sets the component in the initialization error state.
    */

diff --git a/.../quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html b/.../quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html
@@ -65,6 +65,13 @@
                 ></c-quantic-generated-answer-rephrase-buttons>
               </div>
             </template>
+            <template lwc:if={shouldShowDisclaimer}>
+              <div class={disclaimerCssClass} data-cy="generated-answer__disclaimer">
+                <slot name="disclaimer">
+                    {labels.rgaDisclaimer}
+                </slot>
+              </div>
+            </template>
           </div>
         </div>
       </template>

diff --git a/packages/quantic/force-app/main/translations/fr.translation-meta.xml b/packages/quantic/force-app/main/translations/fr.translation-meta.xml
@@ -776,4 +776,8 @@
     <label>Réponse générée OFF</label>
     <name>quantic_GeneratedAnswerOff</name>
   </customLabels>
+  <customLabels>
+    <label>Le contenu généré peut contenir des erreurs. Vérifiez les informations importantes.</label>
+    <name>quantic_RGADisclaimer</name>
+  </customLabels>
 </Translations>
diff --git a/...c/quantic-examples-community/experiences/Quantic_Examples1/views/insightPanelExample.json b/...c/quantic-examples-community/experiences/Quantic_Examples1/views/insightPanelExample.json
@@ -34,7 +34,7 @@
                 {
                   "componentAttributes": {
                     "engineId": "example-insight-panel",
-                    "insightId": "6a333202-b1e0-451e-8664-26a1f93c2faf"
+                    "insightId": "142be676-703c-445f-b2d3-fcc7c0a3ded8"
                   },
                   "componentName": "c:exampleInsightPanel",
                   "id": "fb698de6-174b-447f-817b-08959bfa06ce",