Query Input
On this page:
About Query Input
Query Input is an input box component that can be placed anywhere in the DOM (Document Object Model). The QueryInput component works together with the QueryOutput component to automatically handle certain interactions with the data.
Setting Up Query Input
The following sections in this document contain detailed information about how to customize the properties of this widget.
<body>
<div id="query-input"></div>
<script>
var queryInput = new QueryInput('#query-input', {
authentication: {
token: token,
apiKey: apiKey,
domain: domain,
},
});
</script>
</body>
Options
| Option Name | Data Type | Default Value |
|---|---|---|
| authentication | Object | {} |
| autoQLConfig | Object | {} |
| themeConfig | Object | {} |
| onSubmit | Function | (queryText) => {} |
| onResponseCallback | Function | (httpResponseObject) => {} |
| isDisabled | Boolean | false |
| placeholder | String | 'Type your queries here' |
| showLoadingDots | Boolean | true |
| showChataIcon | Boolean | true |
| enableVoiceRecord | Boolean | true |
| autoCompletePlacement | String: 'above' || 'below' | 'above' |
onSubmit: Called when the user hits "enter" after typing in a query. Will not be called if the input is empty.
onResponseCallback: Called once a response is received from our API's query endpoint. If the call is successful, the response will be returned. If the call is not successful, the error object will be returned.
isDisabled: If true, the input box will be greyed out. It is recommended to disable the input box while the http request is running so the user doesn't overload the API.
placeholder: Customize the placeholder in the input box.
showLoadingDots: If this value is true, a loading animation will appear in the input box on the right side while the request is running.
showChataIcon: If this value is true, the Chata.ai logo will show on in the input box on the left side.
enableVoiceRecord: Set this value to false if you want to remove the voice-to-text button.
Voice-to-text
The voice-to-text feature uses Web Speech API, so this feature is only available for Chrome users.
autoCompletePlacement: Customize the location of the AutoComplete popover. It can either be placed above or below the input box.
authentication Options
| Key | Value Type | Description |
|---|---|---|
| token | String | Your valid JWT encrypted with your user ID and customer ID. For more information on how to create this token, please visit the "Security" section of our docs. |
| apiKey | String | Your API key. For more information on how to obtain this, please visit the "Security" section of our docs. |
| domain | String | The base URL for your API. For more information on how to obtain this, please visit the "Security" section of our docs. |
autoQLConfig Options
| Key | Value Type | Description |
|---|---|---|
| enableAutocomplete | Boolean | true |
| debug | Boolean | false |
enableAutocomplete: Automatically populates similar query suggestions as users enter a query, so they get results more quickly and easily. If enabled, suggested queries will begin to appear above the query input bar as the user types.
debug: If this value is true, the user can copy the full query language (QL) statement (ex. SQL statement) that was dynamically generated from their natural language query input by clicking "Copy generated query to clipboard".
themeConfig Option
| Key | Value Type | Description |
|---|---|---|
| theme | String: 'light' || 'dark' | 'light' |
| accentColor | String | light theme: '#28a8e0', dark theme: '#525252' |
| fontFamily | String | 'sans-serif' |
theme: Color theme for Query Input. Currently there are two options: light theme and dark theme. In addition to changing the overall theme, you can also change the accent color using the accentColor option.
accentColor: Primary accent color used in Query Input. This is the color of the header and speech-to-text button. If also using Query Output, this will be the color of the messages displayed in the interface (both natural language query inputs from users and the associated responses that are generated and returned to the user). Note that the visualization (table and chart) colors will not be affected here.
fontFamily: Customize the font family to the provided font wherever possible. Accepts any CSS font family that is available, and if none is provided, will default to Sans-Serif.
Examples
<body>
<div id="query-input"></div>
<div id="query-output"></div>
<script>
var queryInput = new QueryInput('#query-input', {
authentication: {
token: token,
apiKey: apiKey,
domain: domain,
},
autoCompletePlacement: 'bottom',
});
var queryOutput = new QueryOutput('#query-output', {
displayType: 'line',
})
queryInput.bind(queryOutput)
</script>
</body>
Updated almost 2 years ago