GeneratedAnswer is a Coveo JavaScript Framework (JSUI) component allowing display Coveo Relevance Generative Answering (RGA) content.
npm install genai_jsui/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
/pages/sample.html:
demoConfig to point to your Coveo environment
javascript
`
2. [OPTIONAL] Modify /pages/sample.html:
- if desired, follow Integrate using hotlinks to unpkg.com steps.
3. Browse /pages/sample.html locally with your browser
Options
The component allows the following option:
- answerConfigurationId: optional string
The unique identifier of the answer configuration to use to generate the answer. See Evaluate and manage Relevance Generative Answering (RGA) answers
`html
`
- answerStyle: optional, string, possible values: [default, step, bullet, concise], default value: default
`html
`
- citationsMiddleware: optional, function (for more details see Modify citation links)
- fieldsToIncludeInCitations: optional, list of field names, default value: []
`html
`
- maxCollapsedHeight: optional, number, default value: 320
`html
- noAnswerMessage: optional, string, supports localized keys
`html
`
- withToggle: optional, boolean, default value: false
`html
`
- disabledCitationAnchoring: optional, boolean, default value: false
`html
`
- enableMarkdownInAnswer: optional, boolean, default value: true
`html
`
Integration
$3
1. Link Javascript and CSS resources from your search page
`html
`
> Note: these resources can be hosted in your site, or linked from unpkg (see below: Integrate using hotlinks to unpkg.com)
2. Insert the component element in your search page above the results section
`html
`
> NOTE: suggested to insert above
$3
- Included dependencies in your project:
`json
"@coveops/turbo-core": "^1.2.1",
"@microsoft/fetch-event-source": "^2.0.1",
"coveo-search-ui": "^2.10113.0",
"@popperjs/core": "^2.11.8"
`
$3
1. Add resources links
- Using the most recent version:
`html
`
- Using a specific version (e.g. 2.0.4):
`html
`
2. Insert the component element in your search page above the results section
`html
`
> NOTE: suggested to insert above
$3
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
1. Requirement
- have a classic hosted search page.
- lookup the following information for reuse is Swagger/API configuration requests:
- Page ID
- Organization ID
2. Add main module
- https://platform.cloud.coveo.com/docs?urls.primaryName=Search%20Pages#/Search%20Pages/post_rest_organizations__organizationID__pages__pageID__header_javascript
Payload
`json
{
"Name": "genai-jsui",
"URL": "https://unpkg.com/genai_jsui/dist/index.js",
"InlineContent": ""
}
`
3. Add localization module
- https://platform.cloud.coveo.com/docs?urls.primaryName=Search%20Pages#/Search%20Pages/post_rest_organizations__organizationID__pages__pageID__header_javascript
Payload
`json
{
"Name": "genai-jsui-locales",
"URL": "https://unpkg.com/genai_jsui/dist/locales.js",
"InlineContent": ""
}
`
4. Add CSS resource
- https://platform.cloud.coveo.com/docs?urls.primaryName=Search%20Pages#/Search%20Pages/post_rest_organizations__organizationID__pages__pageID__header_css
Payload
`json
{
"Name": "genai-jsui-css",
"URL": "https://unpkg.com/genai_jsui/dist/css/index.min.css",
"InlineContent": ""
}
`
5. Insert GeneratedAnswer component in page markup
`html
`
> NOTE: suggested to insert above
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
$3
Modify "locales.js" directly, or add after "locales.js"
`html
`
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
$3
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.
`html
`
Update citations url
Use the citationsMiddleware initialization option of GeneratedAnswer component. The option value must be a callback function matching this signature:
`javascript
(citations) {
/modifiy citations/
return citations
}
`
The citations parameter is an array of citation objects:
`json
[
{
"id": "",
"title": "",
"uri": "",
"clickUri": "",
"permanentid": "",
"text": "",
"fields": {
"": ""
}
}
]
`
Code sample
`javascript
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;
}
}
});
``