Developers

Generative AI

Generative AI

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.

Component image

This is what the Generative AI component looks like:

AI-generated answer

AI-generated answer

Consent dialog

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 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.

Methods

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.

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 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
  }
}