New to KendoReact? Start a free 30-day trial

AI-driven Grid/Chart/Gauge renderer. Given a prompt and field metadata, delegates to an DatAInsightsComposerAIClient to produce a DatAInsightsConfig, then renders it with the appropriate KendoReact component.

Definition

Package:@progress/kendo-react-datainsights-composer

Properties Interface:DatAInsightsComposerProps

Properties

AI orchestration client. The host application owns the concrete implementation (real or mock). When omitted, there is no built-in mock: a submit only raises onPromptSubmit, and the host runs the request and passes the result back through configs, message, loading and history. With no client and no onPromptSubmit, submitting does nothing.

The rendered configurations. Supplying it makes the component controlled — it only ever renders what the host passes in, and reports intended changes through onConfigChange. Usually one entry, but an AI response may resolve to several components rendered together.

Fixes options on every config the AI generates or refines, for example { grid: { sortable: false } }. A fixed value replaces the AI's own and is stored in the config, History and saved JSON; options left out stay AI-driven. It does not change configs the host passes in through configs, defaultConfigs or history.

currentHistoryId?

null | string

The selected History item. Supplying it makes the selection controlled; pair it with history.

Active dataset key. If omitted, the only entry in datasets is active when there is exactly one. A key that matches no entry leaves no dataset active.

Dataset metadata and any rows currently available to render. Row data is local to the host and never sent to the AI client. Omit data while rows are loading; use [] when the dataset is loaded and empty.

Default:

[]

The initial configurations for an uncontrolled component. Ignored once configs is set.

Whether an uncontrolled component starts in edit mode. Read once on mount; ignored once editing is set.

Default:

false

The initial prompt text for an uncontrolled prompt. Seeds the PromptBox only — it is not submitted.

Default:

''

disabled?

boolean

Disables every input and action, still rendering the current configs read-only.

editing?

boolean

Whether edit mode is open, making the refine prompt and Confirm, Discard and History actions available. Supplying it makes edit mode controlled; the component reports user intent through onEditingChange. Discard restores the configs captured on opening, or the configs active immediately before the first History restore in that edit session.

height?

string | number

Minimum height of the component once a report is shown. A number is in pixels; the component grows when its content, such as a taller generated output, needs more room. The generated output itself is 400px high unless the prompt asks for another height.

Default:

500

The History items. Supplying it makes History controlled: the component shows exactly this list and reports changes through onHistoryItemCreate, onHistoryItemRestore and onDiscard. Pass the new list back to keep them in sync, and add items yourself when the host produces configs without an aiClient.

Initially selected History item; defaults to the newest initial item.

Initial History items for an uncontrolled component. Read once on mount; ignored once history is set.

A prompt to auto-submit once on mount. Ignored when configs/defaultConfigs is set, and it does not re-fire on later updates.

loading?

boolean

Forces the loading visual regardless of internal request state.

The maximum length of a prompt, applied to the prompt input. Unset by default, so there is no limit. Set it to bound how much text a user can send to the AI service.

The message shown over the report, or in the prompt card when there is none. Supplying it makes the message controlled: it replaces the component's own error, declined and clarification messages, and null shows none. Clear it yourself when the user moves on, for example from onPromptSubmit.

Fired whenever a valid set of configs is produced, from any origin.

Fired when Confirm is activated, including the current History item ID (or null when the configs are not in History). Confirm closes edit mode with or without it.

Processes the rows of each config yourself, for example on a server. Return the rows to show instead of the built-in filter, sort and row limit of the config's dataset, or undefined to keep the built-in processing. A Grid still sorts, groups and pages the returned rows itself, and a Gauge reduces them with its own filter and aggregate. Called once the dataset's data is defined, and again when the config or the rows change. A rejection fires onError with operation: 'processData' and falls back to the built-in processing. Returned rows are shown as they are, so the "no data" message for a filter that matches nothing is not shown.

Parameters:eventDatAInsightsComposerDataProcessEventReturns:

undefined | object[] | Promise​<undefined | object[]>

Fired when AI selection resolves a dataset while no dataset is active. Set datasetId to the resolved key and provide that entry's fields. The composer keeps loading and then sends the prompt itself once that dataset is active; the user can stop it meanwhile. Only fires with an aiClient; without one, set datasetId yourself.

Fired when the built-in Discard action restores the edit baseline: configs captured when edit mode opened, or, after a History restore, configs active immediately before the first restore in that session. A pending request is cancelled first (onPromptCancel fires). When restored configs differ from the rendered ones, onConfigChange also fires with origin: 'discard'.

Fired when the component opens or closes edit mode: Refine, a refine request, an AI or host result over a refine, Confirm and Discard. It is not fired for changes the host makes through editing. When editing is controlled, pass the new value back to apply it.

Fired when an AI client call rejects, with operation: 'generate', 'refine' or 'selectDataset', and when a report fails to render, with operation: 'render'. A report that fails to render is replaced by a message and shown again when its config changes. Declined requests are not errors.

Fired after a successful generate or refine creates a History item for its resulting configs. Only fires with an aiClient; without one, add the item to history yourself.

Fired when the user restores a History item.

Fired when an in-flight request is abandoned, including a host-driven one stopped from the loader; abort it here.

Fired on every keystroke in the prompt or refine PromptBox.

Fired on every prompt submit, including refines.

Fired when the user removes this component instance, with its config, component type, and resolved dataset. An uncontrolled component then returns to the empty prompt and clears its History, unless history or currentHistoryId is controlled. When configs is controlled, clear them here to remove the report. onConfigChange also fires, after onRemove, with empty values and origin: 'remove'.

Fired after every lifecycle state transition.

prompt?

string

The prompt text. Supplying it makes the prompt controlled.

Placeholder for the initial prompt input.

Placeholder for the refine/edit input.

Shows the chip list of available datasets under the PromptBox. Each chip opens a popup with that dataset's fields.

Default:

true

Shows the Datasets button while datasets exist and enables its TreeView popup of datasets and their fields. When false, both the button and the popup are hidden.

Default:

true

title?

string

Title above the prompt box in the empty state, in message states with no report, and while generating. Replaces the native title attribute on the root element.