@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
218 lines (217 loc) • 6.59 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { SpeechToTextButtonProps } from '@progress/kendo-react-buttons';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { AxiosResponse, AxiosRequestConfig } from 'axios';
import { CustomComponent } from '@progress/kendo-react-common';
import { AIPromptOutputInterface } from '@progress/kendo-react-conversational-ui';
import { GridAIPromptProps } from './ai-tool/GridAIPrompt.js';
import { GridAIRequestData } from '../hooks/useGridAIRequest.js';
import * as React from 'react';
/**
* Represents the handle interface for the GridToolbarAIAssistant component.
*/
export interface GridToolbarAIAssistantHandle {
/**
* Shows the AI assistant prompt interface.
*/
show: () => void;
/**
* Hides the AI assistant prompt interface.
*/
hide: () => void;
}
/**
* Represents the request data structure for the GridToolbarAIAssistant component.
*/
export type GridToolbarAIAssistantRequestData = GridAIRequestData;
/**
* Represents the props interface for the GridToolbarAIAssistant component.
* This component provides AI-powered functionality for grid operations through natural language prompts.
* Users can request sorting, filtering, grouping, and highlighting through conversational input.
*
* @example
* ```tsx
* <Grid data={products}>
* <GridToolbar>
* <GridToolbarAIAssistant
* requestUrl="/api/ai/grid"
* promptPlaceHolder="Ask AI to sort, filter, or group your data"
* suggestionsList={[
* 'Sort products by price',
* 'Show only electronics',
* 'Group by category'
* ]}
* onResponseSuccess={(response) => console.log('AI processed:', response)}
* />
* </GridToolbar>
* </Grid>
* ```
*/
export interface GridToolbarAIAssistantProps {
/**
* Defines the URL to which the request will be sent.
*
* @example
* ```jsx
* <GridToolbarAIAssistant requestUrl="https://example.com/api/ai" />
* ```
*/
requestUrl?: string;
/**
* Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.
*
* @example
* ```jsx
* <GridToolbarAIAssistant enableSpeechToText={true} />
* ```
*/
enableSpeechToText?: boolean | SpeechToTextButtonProps;
/**
* Defines the placeholder text for the AI prompt input.
*
* @example
* ```jsx
* <GridToolbarAIAssistant promptPlaceHolder="Ask AI to filter, sort or group" />
* ```
*/
promptPlaceHolder?: string;
/**
* Defines the list of suggestions for the AI prompt.
*
* @example
* ```jsx
* <GridToolbarAIAssistant suggestionsList={['Sort by Amount', 'Group by Account Type']} />
* ```
*/
suggestionsList?: string[];
/**
* Defines if the AI prompt is in streaming mode.
*
* @example
* ```jsx
* <GridToolbarAIAssistant streaming={true} />
* ```
*/
streaming?: boolean;
/**
* Defines if the AI prompt is in loading mode.
*
* @example
* ```jsx
* <GridToolbarAIAssistant loading={true} />
* ```
*/
loading?: boolean;
/**
* Defines the outputs of the AI prompt.
*
* @example
* ```jsx
* <GridToolbarAIAssistant outputs={[{ id: 1, title: 'Output 1', responseContent: '...' }]} />
* ```
*/
outputs?: AIPromptOutputInterface[];
/**
* Defines the options for the axios request.
*
* @example
* ```jsx
* <GridToolbarAIAssistant requestOptions={{ timeout: 5000 }} />
* ```
*/
requestOptions?: AxiosRequestConfig;
/**
* Called before the request is sent.
*
* @example
* ```jsx
* <GridToolbarAIAssistant onPromptRequest={(request) => console.log(request)} />
* ```
*/
onPromptRequest?: (request: GridToolbarAIAssistantRequestData, isRetry?: boolean) => void;
/**
* Called when the response is received.
*
* @example
* ```jsx
* <GridToolbarAIAssistant onResponseSuccess={(response) => console.log(response)} />
* ```
*/
onResponseSuccess?: (response: AxiosResponse<any>, promptMessage?: string, isRetry?: boolean) => void;
/**
* Called when the response returns an error.
*
* @example
* ```jsx
* <GridToolbarAIAssistant onResponseError={(error) => console.error(error)} />
* ```
*/
onResponseError?: (error: any) => void;
/**
* Defines the user role for the request. Defaults to 'user'.
*
* @example
* ```jsx
* <GridToolbarAIAssistant role="admin" />
* ```
*
* @remarks
* This property is related to accessibility.
*/
role?: string;
/**
* Customizes the AI prompt component.
*
* @example
* ```jsx
* <GridToolbarAIAssistant gridAIPrompt={MyCustomPromptComponent} />
* ```
*/
gridAIPrompt?: CustomComponent<GridAIPromptProps>;
/**
* Defines the icon rendered in the GridToolbarAIAssistant tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
*
* @example
* ```jsx
* <GridToolbarAIAssistant icon="home" />
* ```
*/
icon?: string;
/**
* Defines the SVG icon rendered in the GridToolbarAIAssistant tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
*
* @example
* ```jsx
* import { gearIcon } from '@progress/kendo-svg-icons';
*
* <GridToolbarAIAssistant svgIcon={gearIcon} />
* ```
*/
svgIcon?: SVGIcon;
/**
* Specifies if the popup will be displayed.
*
* @example
* ```jsx
* <GridToolbarAIAssistant show={true} />
* ```
*/
show?: boolean;
/**
* The method that will be called to close the column menu.
*
* @example
* ```jsx
* <GridToolbarAIAssistant onCloseWindow={() => console.log('close menu');} />
* ```
*/
onCloseWindow?: () => void;
}
declare const GridToolbarAIAssistant: React.ForwardRefExoticComponent<GridToolbarAIAssistantProps & React.RefAttributes<GridToolbarAIAssistantHandle>>;
export { GridToolbarAIAssistant };