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.

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 NameData TypeDefault Value
authenticationObject{}
autoQLConfigObject{}
themeConfigObject{}
onSubmitFunction(queryText) => {}
onResponseCallbackFunction(httpResponseObject) => {}
isDisabledBooleanfalse
placeholderString'Type your queries here'
showLoadingDotsBooleantrue
showChataIconBooleantrue
enableVoiceRecordBooleantrue
autoCompletePlacementString: '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 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

KeyValue TypeDescription
tokenStringYour 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.
apiKeyStringYour API key. For more information on how to obtain this, please visit the "Security" section of our docs.
domainStringThe base URL for your API. For more information on how to obtain this, please visit the "Security" section of our docs.

autoQLConfig Prop

KeyValue TypeDescription
enableAutocompleteBooleantrue
debugBooleanfalse

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

KeyValue TypeDescription
themeString: 'light' || 'dark''light'
accentColorStringlight theme: '#28a8e0', dark theme: '#525252'
fontFamilyString'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

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