When the user makes a query, this component displays an AI-generated answer in addition to the relevant Knowledge Base results. 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.
This is what the Generative AI component looks like:
AI-generated answer
Consent dialog
This is how you create the component:
sdk.component('generative-ai-response', target: HTMLElement|String, options: Object);
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 links to additional documentation you may want to share with users before they accept or refuse the use of GenAI |
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, all characters will be displayed in the same chunk. |
delayOnChunk | Number | 50 | Sets the time delay in milliseconds before the next chunk is displayed. |
The following methods can be used in this component:
Name | Description |
---|---|
linkToSearchBox(component: Component) | Link a search-box component to this results component. That way, the answer displayed by the Generative AI component will be updated according to the query submitted to the search-box component. |
Generative AI responses use the GENERATIVE_AI_ANSWER external tracking type.
This is a configuration that can be passed to the component:
{
//Enables or disables the use of Generative AI to provide a response
'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.'
},
'stream': {
// Set the number of char per chunk
'charsPerChunk': 3,
// Set the time delay in milliseconds before the next chunk is displayed
'delayOnChunk': 50
}
}