Authorization
API Resources
NL Interpreter
Search
Assist
Generative Ai
Generative AI
This component displays an AI-generated answer that is shown when the user makes a query. It includes a disclaimer message that shows when the user hovers over an info icon and tells the user that the answer has been generated by an AI.
Optionally, a consent dialog is displayed before an AI answer can be shown. The dialog can include links displayed beneath the dialog, a message, and buttons allowing the user to accept or decline their consent. If the user accepts, an AI-generated answer can be returned. If the user declines, this component will not work. User consent must be asked every time there is a new session.
You can also choose to display the AI-generated answer in chunks, so it looks like the answer is being streamed.
Component image
This is what the Generative AI component looks like:
AI-generated answer
Consent dialog
Usage
This is how you create the component:
sdk.component('generative-ai-response', target: HTMLElement|String, options: Object);Options
| Name | Type | Default | Description |
|---|---|---|---|
| enable | Boolean | false | Enable or disable Generative AI responses. |
| consent | Object | Configure the consent dialog. | |
| consent.enable | Boolean | false | Enable or disable the consent dialog. |
| consent.title | String | [consent prompt title] | The title of the consent dialog. |
| consent.body | String | "" | The text displayed in the consent dialog. Allows sanitized HTML. |
| consent.acceptButton | String | "" | Label for the accept button |
| consent.declineButton | String | "" | Label for the decline button |
| consent.links | Array of links | "" | Optional |
| consent.links[].text | String | "" | The link text |
| consent.links[].url | String | "" | The link URL |
| disclaimer | Object String | "" | Disclaimer message shown when user hovers over the info icon |
| errors | Object String | {notResponse => 'Error message'} | Contains the error message shown if an answer cannot be retrieved. |
| charsPerChunk | Number | 3 | Sets the maximum number of characters displayed in a chunk. If there aren't enough characters to reach the maximum, the remaining characters will be displayed. |
| delayOnChunk | Number | 50 | Sets the time delay in milliseconds before the next chunk is displayed. |
Methods
The following methods can be used in this component:
| Name | Description |
|---|---|
| linkTo(component: Component) | Components are a visual representation of a search store instance (and they enable interaction with the user). When components are created using the sdk.build method, they are automatically linked, however this is not the case when you manually create components. |
| generateAnswer(userQuestion: String, questionTrackingCode: String, options: Object) | Use this method to return an AI-generated response to a user query, based on the search results matching that query. |
| trackUserQuestion(userQuestion: String) | Use this method to obtain the log ID of the user query, which is used as for the questionTrackingCode parameter in generateAnswer. |
Tracking
Generative AI responses use the GENERATIVE_AI_ANSWER external tracking type.
Example
This is a configuration that can be passed to the component:
{
//Enables or disables the Generative AI
'enable': 'true'
'consent': {
//Enables or disables the consent dialog
'enable':'true'
//Consent dialog body text
'body': 'Do you accept the use of Generative AI to generate responses to your questions? <a href=\"https://inbenta.com\" target=\"_blank\">Click here for more information </a>.'
//Accept button label
'acceptButton': 'Accept'
//Decline button label
'declineButton': 'Decline'
//Optional. Links shown next to the dialog.
'links': [
{
text:"Acme",
url: "https://acme.com"
}
]
},
//Disclaimer text that displays when you hover over the info icon
'disclaimer': {
'body': 'This answer was generated by AI' //Allow sanitized HTML
},
//Error text shown if an AI response cannot be returned.
'errors': {
*'notResponse' => 'Sorry, I don’t have a response for your query.'
},
// Set the number of char per chunk
'charsPerChunk': 3,
// Set the time delay in milliseconds before the next chunk is displayed
'delayOnChunk': 50
}