GridSmartBoxAIAssistantProps

Updated on Feb 6, 2026

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

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

Name	Type	Default	Description
activeMode?	SmartBoxMode		Sets the currently active mode. 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. tsx <SmartBox aiAssistantConfig={{ enabled: true, requestUrl: '/api/ai/grid', promptSuggestions: ['Sort by price', 'Filter active items'] }} />
dir?	"rtl" | "ltr"	'ltr'	Sets the text direction.
enabled?	boolean		Specifies whether the mode is enabled.
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). 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?	(item: HistoryItem, onClick: () => void) => ReactNode		Custom render function for history items. 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. 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. 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. 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. 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. 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. tsx <SmartBox onClose={() => console.log('Popup closed')} />
onFocus?	() => void		Fires when the SmartBox input is focused.
onOpen?	() => void		Fires when the SmartBox popup opens. 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. 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. tsx <SmartBox onSemanticSearch={(event) => { console.log('Semantic search:', event.searchValue); }} />
placeholder?	string		Sets the placeholder text for the SmartBox input.
promptSuggestionRender?	(suggestion: string, onClick: () => void) => ReactNode		Custom render function for prompt suggestions. tsx <SmartBox promptSuggestionRender={(suggestion, onClick) => ( <li className="custom-suggestion" onClick={onClick}>{suggestion}</li> )} />
searchConfig?	boolean | GridSmartBoxSearchProps		Configures the search mode settings. Can be a boolean to enable/disable or an object with detailed settings. 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. tsx <SmartBox semanticSearchConfig={{ enabled: true, placeholder: 'Search with AI...' }} />
size?	"small" | "medium" | "large"	'medium'	Sets the size of the SmartBox. tsx <SmartBox size="large" />
textboxProps?	TextBoxProps		Props to pass to the TextBox component.