LLM-friendly URL

Answer Component API Reference

Properties

All available properties can be seen in the code snippet below:

index.html
Web component
Angular
React
React Native
Vue
<luzmo-iq-embed-chat
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed authorization key >"
  authToken="< Embed authorization token >"
  options="< Customization options object, following the IQAnswerOptions interface >"
  messages="< An array of messages to be displayed in the component, each conforming to the IQMessage interface >"
>
</luzmo-iq-embed-chat>

Below you can find a list of all available properties that you can (optionally) specify in the IQ answer component, together with their explanation and possible values:

Parameter Description
apiHost
string
Tenancy of Luzmo API to connect to. Defaults to 'https://api.luzmo.com/'.
For US multi-tenant application, set apiHost to 'https://api.us.luzmo.com/'. For dedicated VPC environments, you should point towards your VPC-specific address.
appServer
string
Tenancy of Luzmo app to connect to. Defaults to 'https://app.luzmo.com/'.
For US multi-tenant application, set appServer to 'https://app.us.luzmo.com/'. For dedicated VPC environments, you should point towards your VPC-specific address.
authKey
uuid
The authorization key (i.e. "id") from the response of the authorization request in your backend.
authToken
string
The authorization token from the response of the authorization request in your backend.
messages
IQMessage[]
An array of messages to be displayed in the IQ answer component. Each message should conform to the IQMessage interface.
options
IQAnswerOptions
The options object can be provided to the IQ answer component to customize its appearance and configure additional settings.

Example

An example usage of the component.

index.html
Web component
Angular
React
React Native
Vue
<luzmo-iq-embed-chat
  options='{
    "areWelcomeMessagesVisible": false,
    "areInitialSuggestionsEnabled": true,
    "areChartActionsEnabled": false,
    "isConfigurationEnabled": true,
    "responseMode": "mixed",
    "theme": { "id": "urban" }
  }'
  messages='[
  {
    "type": "humanMessage",
    "message": "Average Watts vs Average Heart Rate over Time in a line chart",
    "messageId": "29f150a7-d448-4a44-91e9-e381ebae6a71"
  },
  {
    "type": "systemMessage",
    "message": "<p>The analysis of Average Watts and Average Heart Rate over time reveals a notable trend. From June 2023 to June 2024, Average Watts generally increased from 282.42 to 288.65, while Average Heart Rate showed a slight decline from 146.37 to 134.03. This suggests a potential improvement in efficiency or fitness over the period.</p>",
    "messageId": "daeb4f9e-5b94-4d7a-998a-55f709803abf"
  },
  {
    "type": "chartAnswer",
    "question": "Average Watts vs Average Heart Rate over Time in a line chart",
    "chart": {
      "type": "line-chart",
      "options": {},
      "filters": [
        {
          "condition": "and",
          "filters": [
            {
              "expression": "? < ?",
              "parameters": [
                {
                  "dataset_id": "efc4d9a7-d9db-4234-99c3-60c3e67b16a2",
                  "column_id": "4e20cea6-be8f-43a3-9149-38db8bedff92"
                },
                "2024-09-01T00:00:00Z"
              ]
            }
          ]
        }
      ],
      "slots": [
        {
          "name": "x-axis",
          "content": [
            {
              "columnId": "4e20cea6-be8f-43a3-9149-38db8bedff92",
              "type": "datetime",
              "datasetId": "efc4d9a7-d9db-4234-99c3-60c3e67b16a2",
              "level": 3,
              "label": {
                "en": "Start Date"
              },
              "format": "%m-%Y"
            }
          ]
        },
        {
          "name": "measure",
          "content": [
            {
              "columnId": "6139af3a-9fc6-4d3e-88f0-12ec8c5ec132",
              "type": "numeric",
              "datasetId": "efc4d9a7-d9db-4234-99c3-60c3e67b16a2",
              "label": {
                "en": "Average Watts"
              },
              "format": ".2f",
              "aggregationFunc": "average"
            },
            {
              "columnId": "6750d8aa-0496-41e7-8f7c-7db5f39aa494",
              "type": "numeric",
              "datasetId": "efc4d9a7-d9db-4234-99c3-60c3e67b16a2",
              "label": {
                "en": "Average Heart Rate"
              },
              "format": ".2f",
              "aggregationFunc": "average"
            }
          ]
        }
      ]
    },
  }
]'
>
</luzmo-iq-embed-chat>

Customization

Customization options

The IQAnswerOptions interface allows to customize the appearance and functionality of the IQ answer component.


These options help define whether certain elements, such as charts, text summaries, or feedback panel, are displayed to users.

The table below provides a detailed overview of each configurable parameter and its purpose:

Parameter Description
areChartActionsEnabled
boolean
Determines whether users should be allowed to trigger chart actions that enable them to explore further insights based on the given chart type. Defaults to true
chartTheme
ItemThemeConfig
Specifies the theme settings for customizing the appearance of charts displayed in the component.
isChartConfigurationEnabled
boolean
Specifies whether users should be able to configure charts with the chart configuration panel. Defaults to true
isChartExportEnabled
boolean
Specifies whether exporting charts as PNGs should be enabled for users.Defaults to false
isChartFeedbackEnabled
boolean
Specifies whether the feedback mechanism should be displayed, allowing users to rate AI responses and suggest chart corrections. Defaults to true
locale
string
Specifies the locale used for component interactions, including localization of text elements like welcome messages, responses, and chart configurations. Accepts values: 'de', 'en', 'es', 'fr', 'it', 'ja', 'nl', 'no', 'pt', 'ru', 'sv', 'tr'.
responseMode
string
Defines the response mode for the answer component: 'chart', 'text', or 'mixed' (default). 'chart' shows AI responses as charts only, 'text' shows only text summaries, and 'mixed' displays both.

CSS Variables

The following CSS variables can be used to customize various aspects of the Luzmo IQ answer component. They are grouped based on their functionality, such as general styling, messages, or feedback.

General Styling

These variables control the overall appearance of elements like borders, background colors, font sizes, and spacing.

css
--luzmo-iq-background-active-color: #f1f5f9;      /* Background color when active */
--luzmo-iq-background-color: #ffffff;             /* Default background color */
--luzmo-iq-background-hover-color: #f8fafc;       /* Background color on hover */
--luzmo-iq-border-color: rgba(0,0,0,.1);          /* Border color */
--luzmo-iq-border-radius-full: 999rem;            /* Full (circle) border radius */
--luzmo-iq-border-radius-lg: .75rem;              /* Large border radius */
--luzmo-iq-border-radius-xl: 1rem;                /* Extra-large border radius */
--luzmo-iq-border-radius: .5rem;                  /* Standard border radius */
--luzmo-iq-border-width: 1px;                     /* Standard border width */
--luzmo-iq-font-color: #333;                      /* Default font color */
--luzmo-iq-font-size: .875rem;                    /* Default font size */
--luzmo-iq-font-weight: 400;                      /* Standard font weight */
--luzmo-iq-spacing-1: .125rem;                    /* Small spacing */
--luzmo-iq-spacing-5: 1rem;                       /* Large spacing */

Messages Styling

These variables define the appearance of both human and system messages in the component.

css
--luzmo-iq-human-message-background: blue;                  /* Default background color for human messages */
--luzmo-iq-human-message-color: white;                      /* Default text color for human messages */
--luzmo-iq-system-message-background: rgb(226, 232, 240);   /* Default background for system messages */
--luzmo-iq-system-message-color: #333;                      /* Default text color for system messages */

Spinner Styling

These variables are used for customizing the appearance of spinners within the component.

css
--luzmo-iq-spinner-border-width: .125rem;         /* Default spinner border width */
--luzmo-iq-spinner-color: magenta;                /* Default spinner color */
--luzmo-iq-spinner-opacity: .5;                   /* Default spinner opacity */

Feedback and Ratings

These variables control the appearance of feedback icons and rating elements.

css
--luzmo-iq-info-icon-size: 1rem;                                    /* Default size of the info icons */
--luzmo-iq-negative-feedback-icon-hover-color: rgb(216, 64, 64);    /* Default hover color for negative feedback */
--luzmo-iq-positive-feedback-icon-hover-color: rgb(20, 120, 63);    /* Default hover color for positive feedback */
--luzmo-iq-rating-icon-size: 1rem;                                  /* Default size of the rating icons */

Tooltips

These variables are used to adjust the appearance of tooltips.

css
--luzmo-iq-tooltip-background-color: #000;     /* Tooltip background color, defaults to #000 (black) */
--luzmo-iq-tooltip-color: #fff;                /* Tooltip text color, defaults to #fff (white) */
--luzmo-iq-tooltip-font-size: 0.8125rem;       /* Tooltip font size, defaults to 0.8125rem */

Types

The following types are exported by the libraries:

index.ts
Web component
Angular
React
React Native
Vue
import {
  IQAnswerOptions,
  IQMessage,
  IQSuggestion
} from '@luzmo/embed';
Did this page help you?
Yes No