# DatAInsights Composer Editing and History

Users can refine generated visualizations with follow-up prompts and return to previous versions through History. Your application can also persist results between visits.

## View and Edit Modes

A generated visualization is displayed in one of two modes:

* **View mode**—The component displays the Grid, Chart, or Gauge together with a **Refine** and **Remove** button.
* **Edit mode**—The component displays a prompt for refining the result with **Confirm**, **Discard**, and **History** buttons.

A visualization that the AI generates opens in edit mode, so the user can approve it. A visualization that the app supplies through the `configs` or `defaultConfigs` property opens in view mode instead.

## History

Each successful generation or refinement adds a version to **History**. Select an earlier version to restore it. Refining a restored version replaces any newer versions.

## Persisting and Restoring Visualizations

Handle [`onConfirm`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#onconfirm) to store the current configurations, and pass them to [`defaultConfigs`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#defaultconfigs) to restore the visualization. To persist History as well, store the `history` from [`onHistoryItemCreate`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#onhistoryitemcreate) and restore it through `initialHistory`.

The following example saves visualizations and History in browser `localStorage`. It starts in edit mode with three prompts already in History. Select **History** to restore an earlier version, or refine the visualization and select **Confirm**. Run the example again to restore the saved result, or select **Clear storage** to remove the saved data and start with an empty prompt.

[Demo Source](https://demos.telerik.com/kendo-react-ui/datainsights-composer/persist-state/source.txt)

> You are responsible for securing persisted configurations and History, including data in `localStorage`. Follow the [application security responsibilities](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/security#responsibility-model).

## Suggested Links

* [DatAInsights Composer Controlled Mode](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/controlled-mode)
* [DatAInsights Composer Events](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/events)
* [DatAInsights Composer Accessibility](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/accessibility)
* [API Reference of the DatAInsights Composer](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api)