New to KendoReact? Start a free 30-day trial

GridSmartBoxAIAssistantProps

Interface

Represents the props for the SmartBox component. SmartBox provides a unified search interface with three modes: standard search, semantic search, and AI assistant for natural language grid operations.

The AI assistant supports three operational modes configured via aiAssistantConfig:

Auto mode: Set requestOptions (with url) - SmartBox handles requests automatically
Controlled mode: Set requestUrl - SmartBox makes requests, you control loading state
Manual mode: Don't set requestUrl or requestOptions - Handle requests via onAIPromptRequest

Definition

Package:@progress/kendo-react-grid

Syntax:

tsx

// Auto mode - SmartBox handles everything automatically
<SmartBox
  aiAssistantConfig={{
    enabled: true,
    requestOptions: {
      url: '/api/ai/grid',
      timeout: 5000
    },
    promptSuggestions: ['Sort by price', 'Filter active items']
  }}
  searchConfig={{ enabled: true }}
/>

// Controlled mode - SmartBox makes requests, you control loading state
<SmartBox
  loading={isLoading}
  aiAssistantConfig={{
    enabled: true,
    requestUrl: '/api/ai/grid'
  }}
  onAIPromptRequest={(e) => setIsLoading(true)}
  onAIResponseSuccess={(e) => setIsLoading(false)}
/>

// Manual mode - fully custom request handling
<SmartBox
  loading={isLoading}
  aiAssistantConfig={{ enabled: true }}
  onAIPromptRequest={(e) => {
    setIsLoading(true);
    myCustomFetch(e.requestData).then(handleResponse);
  }}
/>

Properties

activeMode?

SmartBoxMode

Sets the currently active mode.

Example:

tsx

<SmartBox activeMode="aiAssistant" />

aiAssistantConfig?

boolean | GridSmartBoxAIAssistantConfigProps

Configures the AI assistant mode settings. Can be a boolean to enable/disable or an object with detailed settings.

Example:

tsx

<SmartBox aiAssistantConfig={{
  enabled: true,
  requestUrl: '/api/ai/grid',
  promptSuggestions: ['Sort by price', 'Filter active items']
}} />

ariaLabel?

string

Sets the accessible label (aria-label) for the SmartBox input element.

Example:

tsx

<SmartBox ariaLabel="AI-powered search" />

dir?

"ltr" | "rtl"

Sets the text direction.

Default:

'ltr'

enabled?

boolean

Specifies whether the mode is enabled.

fillMode?

"flat" | "solid" | "outline"

Sets the fill mode of the SmartBox.

Default:

'solid'

history?

boolean | GridSmartBoxHistoryProps

Sets the settings for the history queries of all modes. When set to true, enables history with default settings for all modes. When set to false, disables history for all modes. When set to an object, configures the history settings for all modes. This shared setting overrides individual mode history settings (e.g., searchConfig.history).

Example:

tsx

// Enable history with default settings for all modes
<SmartBox history={true} />

// Disable history for all modes
<SmartBox history={false} />

// Configure history settings for all modes (overrides individual mode settings)
<SmartBox history={{ size: 10, timestampFormat: 'HH:mm' }} />

historyItemRender?

Custom render function for history items.

Parameters:itemHistoryItemonClick() => voidReturns:

ReactNode

Example:

tsx

<SmartBox
  historyItemRender={(item, onClick) => (
    <li className="custom-history" onClick={onClick}>
      {item.text} - {item.timestamp.toLocaleString()}
    </li>
  )}
/>

loading?

boolean

Sets whether the SmartBox is in loading state. Use this for controlled mode to manage loading state externally.

Example:

tsx

<SmartBox loading={isLoading} onAIPromptRequest={() => setIsLoading(true)} />

onAICancelRequest?

() => void

Fires when an AI request is cancelled by the user. The user can cancel by clicking the stop button during loading.

Example:

tsx

<SmartBox
  onAICancelRequest={() => {
    console.log('Request cancelled');
    setLoading(false);
  }}
/>

onAIPromptRequest?

(event: GridSmartBoxRequestEvent) => void

Fires when an AI prompt request is initiated. Use this callback to intercept requests, modify data, or handle requests manually.

Parameters:eventGridSmartBoxRequestEvent

Example:

tsx

// Controlled mode - intercept and modify request
<SmartBox
  onAIPromptRequest={(event) => {
    console.log('Prompt:', event.requestData.promptMessage);
    setLoading(true);
  }}
/>

// Manual mode - handle request yourself
<SmartBox
  onAIPromptRequest={(event) => {
    fetch('/api/ai', {
      method: 'POST',
      body: JSON.stringify(event.requestData)
    }).then(handleResponse);
  }}
/>

onAIResponseError?

(event: GridSmartBoxResponseErrorEvent) => void

Fires when an AI response returns an error. Only fires in auto or controlled mode when a requestUrl is configured.

Parameters:eventGridSmartBoxResponseErrorEvent

Example:

tsx

<SmartBox
  onAIResponseError={(event) => {
    console.error('AI error:', event.error);
    setLoading(false);
  }}
/>

onAIResponseSuccess?

(event: GridSmartBoxResponseSuccessEvent) => void

Fires when an AI response is received successfully. Only fires in auto or controlled mode when a requestUrl is configured.

Parameters:eventGridSmartBoxResponseSuccessEvent

Example:

tsx

<SmartBox
  onAIResponseSuccess={(event) => {
    console.log('AI response:', event.response);
    setLoading(false);
  }}
/>

onBlur?

() => void

Fires when the SmartBox input is blurred.

onClose?

() => void

Fires when the SmartBox popup closes.

Example:

tsx

<SmartBox onClose={() => console.log('Popup closed')} />

onFocus?

() => void

Fires when the SmartBox input is focused.

onOpen?

() => void

Fires when the SmartBox popup opens.

Example:

tsx

<SmartBox onOpen={() => console.log('Popup opened')} />

onSearch?

(event: GridSmartBoxSearchEvent) => void

Fires when a search is performed in Search mode. The event contains the search value and filter descriptor.

Parameters:eventGridSmartBoxSearchEvent

Example:

tsx

<SmartBox
  onSearch={(event) => {
    console.log('Search value:', event.searchValue);
    // Prevent default filtering if needed
    event.preventDefault();
  }}
/>

onSemanticSearch?

(event: GridSmartBoxSearchEvent) => void

Fires when a search is performed in Semantic Search mode. The event contains the search value and filter descriptor.

Parameters:eventGridSmartBoxSearchEvent

Example:

tsx

<SmartBox
  onSemanticSearch={(event) => {
    console.log('Semantic search:', event.searchValue);
  }}
/>

placeholder?

string

Sets the placeholder text for the SmartBox input.

promptSuggestionRender?

Custom render function for prompt suggestions.

Parameters:suggestionstringonClick() => voidReturns:

ReactNode

Example:

tsx

<SmartBox
  promptSuggestionRender={(suggestion, onClick) => (
    <li className="custom-suggestion" onClick={onClick}>{suggestion}</li>
  )}
/>

rounded?

"small" | "medium" | "large" | "full" | "none"

Sets the border radius of the SmartBox.

Default:

'medium'

searchConfig?

boolean | GridSmartBoxSearchProps

Configures the search mode settings. Can be a boolean to enable/disable or an object with detailed settings.

Example:

tsx

<SmartBox searchConfig={{ enabled: true, fields: ['name', 'description'], delay: 300 }} />

semanticSearchConfig?

boolean | GridSmartBoxSemanticSearchConfigProps

Configures the semantic search mode settings. Can be a boolean to enable/disable or an object with detailed settings.

Example:

tsx

<SmartBox semanticSearchConfig={{ enabled: true, placeholder: 'Search with AI...' }} />

size?

"small" | "medium" | "large"

Sets the size of the SmartBox.

Default:

'medium'

Example:

tsx

<SmartBox size="large" />

textboxProps?

TextBoxProps

Props to pass to the TextBox component.