genai_jsui

v2.0.9

Published

3 days ago

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

Downloads

4,306

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

2024-05-15 v2.0.9

Features
- Task 361920: Customizable citation links
- Task 369738: Rephrase buttons> Impoved 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;
      }
    }
  });