All available properties can be seen in the code snippet below:
<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. |
An example usage of the component.
<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> The IQAnswerOptions interface allows to customize the appearance and functionality of the IQ answer component.
| 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. |
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.
These variables control the overall appearance of elements like borders, background colors, font sizes, and spacing.
--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 */These variables define the appearance of both human and system messages in the component.
--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 */These variables are used for customizing the appearance of spinners within the component.
--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 */These variables control the appearance of feedback icons and rating elements.
--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 */These variables are used to adjust the appearance of tooltips.
--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 */The following types are exported by the libraries:
import {
IQAnswerOptions,
IQMessage,
IQSuggestion
} from '@luzmo/embed';