Query Input

On this page:

• About Query Input
• Setting Up Query Input
• Props
• Examples

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.

JavaScript

import React from 'react'
import { QueryInput } from 'react-autoql';

import 'react-autoql/dist/autoql.esm.css'

export default class App extends React.Component {
  render = () => {
    return (
      <QueryInput
      	authentication={{
          apiKey="your-api-key"
          domain="https://yourdomain.com"
          token="your-jwt-token"
        }}
        onResponseCallback={response => {
          console.log(response)
        }}
      />
    )
  }
}

Props

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

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 Prop

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 Prop

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

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

JavaScript

import React, { Component, Fragment } from 'react'
import { QueryInput, QueryOutput } from 'react-autoql';

import 'react-autoql/dist/autoql.esm.css'

export default class App extends Component {
  queryInputRef = null;

  state = {
    isQueryRunning: false,
    queryResponse: null
  }

  render = () => {
    return (
      <Fragment>
        <QueryInput
      	  authentication={{
            apiKey="your-api-key"
            domain="https://yourdomain.com"
            token="your-jwt-token"
          }}
          ref={r => (this.queryInputRef = r)}
          onSubmit={() => this.setState({ isQueryRunning: true })}
          onResponseCallback={response => {
            this.setState({
              queryResponse: response,
              isQueryRunning: false
            })
          }}
          autoCompletePlacement="bottom"
          isDisabled={this.state.isQueryRunning}
        />
        <QueryOutput
          queryInputRef={this.queryInputRef}
          queryResponse={this.state.queryResponse}
        />
      </Fragment>
    )
  }
}