Genai_jsui NPM

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-03-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/genai_jsui@2.0.4/dist/index.js"></script>
<script src="https://unpkg.com/genai_jsui@2.0.4/dist/locales.js"></script>
<link rel="https://unpkg.com/genai_jsui@2.0.4/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_organizationsorganizationIDpagespageIDheader_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_organizationsorganizationIDpagespageIDheader_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_organizationsorganizationIDpagespageIDheader_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)

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",
      }
    });
  </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

@everything-registry/sub-chunk-1730

21 days ago

2 months ago

2 months ago

3 months ago

4 months ago