genai_jsui

v2.2.1

Published

2 months ago

GeneratedAnswer is a Coveo JavaScript Framework (JSUI) component allowing display Coveo Relevance Generative Answering (RGA) content.

Downloads

5,412

0High
0Medium
0Low

jpdery26

GeneratedAnswer

Summary

GeneratedAnswer is a Coveo JavaScript Framework (JSUI) component allowing display Coveo Relevance Generative Answering (RGA) content.

Disclaimer

This package must not be redistributed. Coveo distributes the component to specific customers.

Change Log

v2024-11-05 v2.2.1

Fixes -Defect 388091: Citation links should not be stacked (regression)

v2024-10-30 v2.2.0

Features
- Task 387274: remove numbers on citations
  - incl. hiding toggle button by default (data-with-toggle option)
- Task 387273: remove duplicate citations
- Task 387271: Add show more feature
- Task 387272: hide the rephrase buttons by default
Fixes
- Missing type=button on buttons caused refresh

2024-09-23 v2.1.0

Feature
- Task 374269: Feedback Form enhanced details
Fix
- Copy button did not copy in Salesforce

2024-08-15 v2.0.15

Fix
- Defect 379561: Citation width go over the limit of the screen

2024-07-15 v2.0.14

Fix
- Defect 376217: In Salesforce, generated answer must only appear on page 1

2024-06-19 v2.0.13

Fix
- Defect 374603: feedback window appears to be restricted to the height of the GenAI component

2024-06-11 v2.0.12

Features
- Task 369742: Rich answer formatting

2024-05-15 v2.0.9

Features
- Task 361920: Customizable citation links
- Task 369738: Rephrase buttons> Improved mobile view
- Task 369739: Customizable legal disclaimer label

2024-04-30 v2.0.8

Features
- Task 365294: new Rephrase button: default
- Task 365295: Update title to : Generated Answer
Fixes
- Defect 361863: Citations length is hardcoded
- Defect 366462: Missing tooltip on toggle button
- Defect 368586: Citations will not include the entirety of the first word in most of the citations

2024-03-29 v2.0.7

Fixes
- Defect 366961: Feedback form not visible after new answer
- Accessibility
  - Task 363777: When the toggle button is opened, the focus is moved to the "Helpful" button
  - Task 363782: When the user opens the Feedback modal, there is no indication that the dialog modal has opened
  - Task 363784: Dialog modal is not understood by screen readers as a modal
  - Task 365308: The color contrast ratio between badge "Generated answer for you" And "Learn More" numbers and their background is not at least 4.5 to 1.
  - Task 365309: When a model dialog is closed, focus does not return to the trigger
  - Task 365310: Learn more links open in a new window, but do not give warning to users
  - Task 365485: Dialog modal can not be escaped out by using the ESCAPE key.

2024-03-08 v2.0.6

Features
- Accessibility
  - generated answer actively read (aria-live)
  - feedback buttons are pressed/no pressed
  - feedback form: buttons and toggle switch have aria-labels
  - feedback from traps focus
Fixes
- Defect 359929: feedback form can be submitted without option selected
- Defect 362867: invalid Usage Analytics values: copyToClipboard, showGeneratedAnswer, hideGeneratedAnswer, hoverGeneratedAnswerSource
- Feedback buttons sent Usage Analytics event even if already pressed

2024-02-07 v2.0.5

Feature
- Task 361526: Implement answerStyle property
Fixes
- Defect 359931: rephrase buttons dont show active

2024-01-05 v2.0.4

Fixes
- Salesforce Lightning: element.append() is not a function
- Defect 359675: Oops message when page opened in 2 tabs
- Improved readme

2023-12-15 v2.0.2

Features
- Copy to clipboard
- Show/Hide switch
- Citation hover text
- Rephrase buttons
- Feedback modal form

2023-10-31 v1.0.1

FIX: endpoint error when integrated in hosted search page
Feature: Salesforce Lightning support

2023-10-27 v1.0.0

initial release

Content

/dist: ready to use distribution files
- index.js
- index.min.js
- locales.js
- css/index.css
- css/index.min.css,
/pages/sample.html: ready to use sample page
/src: typescript source code to include in your project

Try it

Modify /pages/sample.html:

update demoConfig to point to your Coveo environment

<script >
    var demoConfig = {
      orgId: "",
      token: "",
      restUri: "",
      searchHub: ""
  };
  </script>

[OPTIONAL] Modify /pages/sample.html:
- if desired, follow Integrate using hotlinks to unpkg.com steps.
Browse /pages/sample.html locally with your browser

Options

The component allows the following option:

answerStyle: optional, string, possible values: [default, step, bullet, concise], default value: default
```
<div class="CoveoGeneratedAnswer" data-answer-style="bullet"></div>
```

Integration

Integrate distributed file in your existing application

Link Javascript and CSS resources from your search page
```
<script src="../dist/index.js"></script>
<script src="../dist/locales.js"></script>
<link rel="stylesheet" href="../dist/css/index.css" />
```
Note: these resources can be hosted in your site, or linked from unpkg (see below: Integrate using hotlinks to unpkg.com)
Insert the component element in your search page above the results section
```
<div>
  <div class="CoveoGeneratedAnswer"></div>
</div>
```
NOTE: suggested to insert above <div class="coveo-results-header">

Integrate source code

Included dependencies in your project:

"@coveops/turbo-core": "^1.2.1",
"@microsoft/fetch-event-source": "^2.0.1",
"coveo-search-ui": "^2.10112.0",
"@popperjs/core": "^2.11.8"

Integrate using hotlinks to unpkg.com

Add resources links

Using the most recent version:

<script src="https://unpkg.com/genai_jsui/dist/index.js"></script>
<script src="https://unpkg.com/genai_jsui/dist/locales.js"></script>
<link rel="https://unpkg.com/genai_jsui/dist/css/index.min.css" />

Using a specific version (e.g. 2.0.4):

<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locales.js"></script>
<link rel="https://unpkg.com/[email protected]/dist/css/index.min.css" />

Insert the component element in your search page above the results section
```
<div>
  <div class="CoveoGeneratedAnswer"></div>
</div>
```
NOTE: suggested to insert above <div class="coveo-results-header">

Integrate in Classic Hosted Search Page (upkg)

This procedure integrates Coveo JSUI GenerativeAnswering component in a Classic Hosted Search Page using hotlinks to unkpackage.com.

Note: configuration below will allways use most recent version of the component. See Integrate using hotlinks to unpkg.com

Requirement
- have a classic hosted search page.
- lookup the following information for reuse is Swagger/API configuration requests:
  - Page ID
  - Organization ID
Add main module
- https://platform.cloud.coveo.com/docs?urls.primaryName=Search%20Pages#/Search%20Pages/post_rest_organizations__organizationID__pages__pageID__header_javascript
  Payload
```
{
  "Name": "genai-jsui",
  "URL": "https://unpkg.com/genai_jsui/dist/index.js",
  "InlineContent": ""
}
```
Add localization module
- https://platform.cloud.coveo.com/docs?urls.primaryName=Search%20Pages#/Search%20Pages/post_rest_organizations__organizationID__pages__pageID__header_javascript
  Payload
```
    {
      "Name": "genai-jsui-locales",
      "URL": "https://unpkg.com/genai_jsui/dist/locales.js",
      "InlineContent": ""
    }
```
Add CSS resource
- https://platform.cloud.coveo.com/docs?urls.primaryName=Search%20Pages#/Search%20Pages/post_rest_organizations__organizationID__pages__pageID__header_css
  Payload
```
    {
      "Name": "genai-jsui-css",
      "URL": "https://unpkg.com/genai_jsui/dist/css/index.min.css",
      "InlineContent": ""
    }
```
Insert GeneratedAnswer component in page markup
```
      <div>
        <div class="CoveoGeneratedAnswer"></div>
      </div>
```
NOTE: suggested to insert above <div class="coveo-results-header">

Code Customizations

For code customization, changes can be made in the non-minified JS file. We do not share our original source code repository.

Non-code Customizations

Modify labels (e.g Feedback form labels, legal disclaimer)

Modify "locales.js" directly, or add after "locales.js"

  <script src="https://unpkg.com/genai_jsui/dist/locales.js"></script>
  <script>
    String.toLocaleString({
      "en": {
        "irrelevant": "Irrelevant"   
        "not-accurate": "Inaccurate",
        "out-of-date": "Outdated",
        "harmful": "Harmful",
        "other": "Other",
        "generated-answer-disclaimer": "Generated content may contain inaccuracies. Always review citations."
      }
    });
  </script>

Note: this modifies only the display name of the feedback radio button labels. In Coveo Usage Analtyics Reports, you would still see the original values

Modify citation links

ClickUri of citations might not be suitable to use and needs to be modified before citations are rendered. Usually, you need additional fields from results to be able to construct an appropriate ClickUri

Request additional fields

Use data-fields-to-include-in-citations HTML attribute of CoveoGeneratedAnswer element to specify a colon-separate list of fields.

  <div>
    <div class="CoveoGeneratedAnswer" data-fields-to-include-in-citations="slug,itemid"></div>
  </div>

Update citations url

Use the citationsMiddleware initialization option of GeneratedAnswer component. The option value must be a callback function matching this signature:

  (citations) { 
      /*modifiy citations*/ 
      return citations 
  }

The citations parameter is an array of citation objects:

[
    {
        "id": "",
        "title": "",
        "uri": "",
        "clickUri": "",
        "permanentid": "",
        "text": "",
        "fields": {
            "": ""
        }
    }
]

Code sample

  Coveo.init(document.getElementById('search'), {
    Analytics: {
      searchHub: demoConfig.searchHub,
    },
    GeneratedAnswer: {
      citationsMiddleware: (citations) => {
        citations.forEach(x=>{
          const url = `https://www.barca.com/${x.fields.itemid}/${x.fields.slug}`;
          x.clickUri = url; //the href link 
          x.uri = url; // the rendered url
        })
        return citations;
      }
    }
  });