Grids AI Assistant: Add How-To Topics

concepts/05 UI Components/DataGrid/12 AI Assistant/00 AI Assistant.md

@@ -0,0 +1,17 @@
+The {WidgetName} AI Assistant allows you to use natural language to interact with the component.
+
+You can use and configure the following {WidgetName} capabilities via AI Assistant Chat prompts:
+
+- [Filter Rows and Search for Text/Values](/Documentation/Guide/UI_Components/DataGrid/Filtering_and_Searching/)
+- [Sort Data](/Documentation/Guide/UI_Components/DataGrid/Sorting/)
+- [Group Rows](/Documentation/Guide/UI_Components/DataGrid/Grouping/)
+- [Navigate between Data Pages](/Documentation/Guide/UI_Components/DataGrid/Paging/)
+- [Change Row Focus](/Documentation/Guide/UI_Components/DataGrid/Focused_Row/)
+- [Select Rows](/Documentation/Guide/UI_Components/DataGrid/Selection/)
+- [Calculate Summaries](/Documentation/Guide/UI_Components/DataGrid/Summaries/Predefined_Aggregate_Functions/)
+- [Fix](/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Fixing/), [Resize](/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Sizing/), and [Reorder Columns](/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Reordering/)
+
+#include common-demobutton-named with {
+    url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIAssistant/",
+    name: "DataGrid - AI Assistant"
+}

concepts/05 UI Components/DataGrid/12 AI Assistant/05 Configuration and Use.md

@@ -0,0 +1,19 @@
+To activate the AI Assistant, configure the following properties:
+
+- Specify [aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) or **aiAssistant**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#aiIntegration)
+- Set **aiAssistant**.[enabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#enabled) to `true`
+
+Once activated, {WidgetName} adds a predefined item (*"aiAssistantButton"*) to the component [toolbar](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/). This button opens the AI Assistant chat in a pop-up window.
+
+[note]
+
+Ensure users can access the AI Assistant:
+
+- Do not hide the {WidgetName} toolbar (do not set **toolbar**.[visible](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/#visible) to `false`).
+- If you define **toolbar**.[items[]](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/), include *"aiAssistantButton"* in the array.
+
+[/note]
+
+You can specify [chat](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#chat) and [popup](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#popup) objects in **aiAssistant** to customize the assistant window. These objects support DevExtreme [Chat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/) and [Popup](/Documentation/ApiReference/UI_Components/dxPopup/Configuration/) configuration and allow you to integrate options such as [Chat suggestions](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#suggestions).
+
+You can also define **aiAssistant**.[title](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#title) to specify a custom title for the AI Assistant popup.

concepts/05 UI Components/DataGrid/12 AI Assistant/10 Response Customization.md

@@ -0,0 +1,154 @@
+AI Assistant allows you to customize AI responses using the following callbacks:
+
+- [customizeResponseTitle](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#customizeResponseTitle): Customizes response titles (first line in a response)
+- [customizeResponseText](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#customizeResponseText): Customizes response messages (all lines below the title)
+
+You can use these callbacks to localize responses. The following code snippet uses the [locale()](/Documentation/ApiReference/Common/Utils/localization/#locale) utility method to specify response messages and titles for multiple locales:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    const currentLocale = DevExpress.localization.locale();
+
+    $('#{widget-name}-container').dx{WidgetName}({
+        aiAssistant: {
+            customizeResponseText(command) {
+                switch (currentLocale) {
+                    case 'en':
+                        return {
+                            success: `Command succeeded: ${command.name}`,
+                            failure: `Command failed: ${command.name}`,
+                        };
+                    case 'fr':
+                        return { /* Translated texts */ };
+                }
+            },
+            customizeResponseTitle(status, commandNames) {
+                switch (currentLocale) {
+                    case 'en':
+                        return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+                    case 'fr':
+                        return /* Translated texts */;
+                }
+            },
+        },
+    });
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-{widget-name}>
+        <dxo-{widget-name}-ai-assistant
+            [enabled]="true"
+            [customizeResponseText]="customizeResponseText"
+            [customizeResponseTitle]="customizeResponseTitle"
+        ></dxo-{widget-name}-ai-assistant>
+    </dx-{widget-name}>
+
+    <!-- tab: app.component.ts -->
+    import { Dx{WidgetName}Module, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
+    import { locale } from "devextreme/localization";
+
+    export class AppComponent {
+        currentLocale = locale();
+        customizeResponseText = (command) => {
+            switch (this.currentLocale) {
+                case 'en':
+                    return {
+                        success: `Command succeeded: ${command.name}`,
+                        failure: `Command failed: ${command.name}`,
+                    };
+                case 'fr':
+                    return { /* Translated texts */ };
+            }
+        };
+        customizeResponseTitle = (status, commandNames) => {
+            switch (this.currentLocale) {
+                case 'en':
+                    return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+                case 'fr':
+                    return /* Translated texts */;
+            }
+        };
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <Dx{WidgetName}>
+            <DxAIAssistant
+                :customize-response-text="customizeResponseText"
+                :customize-response-title="customizeResponseTitle"
+            />
+        </Dx{WidgetName}>
+    </template>
+
+    <script setup lang="ts">
+    import { Dx{WidgetName}, DxAIAssistant, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
+    import { locale } from "devextreme/localization";
+
+    const currentLocale = locale();
+    function customizeResponseText(command) {
+        switch (currentLocale) {
+            case 'en':
+                return {
+                    success: `Command succeeded: ${command.name}`,
+                    failure: `Command failed: ${command.name}`,
+                };
+            case 'fr':
+                return { /* Translated texts */ };
+        }
+    };
+    function customizeResponseTitle(status, commandNames) {
+        switch (currentLocale) {
+            case 'en':
+                return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+            case 'fr':
+                return /* Translated texts */;
+        }
+    };
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    import { {WidgetName}, AIAssistant, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
+    import { locale } from "devextreme/localization";
+
+    const currentLocale = locale();
+    function customizeResponseText(command) {
+        switch (currentLocale) {
+            case 'en':
+                return {
+                    success: `Command succeeded: ${command.name}`,
+                    failure: `Command failed: ${command.name}`,
+                };
+            case 'fr':
+                return { /* Translated texts */ };
+        }
+    };
+    function customizeResponseTitle(status, commandNames) {
+        switch (currentLocale) {
+            case 'en':
+                return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+            case 'fr':
+                return /* Translated texts */;
+        }
+    };
+
+    function App() {
+        return (
+            <{WidgetName}>
+                <AIAssistant
+                    enabled={true}
+                    customizeResponseText={customizeResponseText}
+                    customizeResponseTitle={customizeResponseTitle}
+                />
+            </{WidgetName}>
+        );
+    };
+
+---

concepts/05 UI Components/DataGrid/12 AI Assistant/15 Specifics and Best Practices.md

@@ -0,0 +1,16 @@
+Note the following AI Assistant specifics and best practices:
+
+- The assistant does not have access to component data by default. In some scenarios, this can cause commands to fail.
+
+    For instance, to select the last row on a [page](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/paging/), the assistant calls the `selectByIndexes` command and uses the page size to specify an index. If the number of rows on the active page is smaller than the page size, the command fails.
+
+- AI Assistant may not preserve the results of executed commands of the same type. Specify if the AI should preserve or discard previous results in your requests (include keywords such as "also" or "only").
+
+- If {WidgetName} is bound to a large dataset, the `selectAll` command may increase the context size of requests beyond the limits of your AI service. The `selectAll` command adds all row keys to the request [context](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/AIAssistantRequestCreatingEvent/#context) (in [onAIAssistantRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIAssistantRequestCreating)). To avoid this behavior, you can activate **selection**.[deferred](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#deferred).
+
+- The assistant does not support certain actions that are only accessible in the component UI (for instance, it cannot expand/collapse groups).
+
+- If you expect users to request certain commands in the AI Assistant, ensure the corresponding {WidgetName} feature is enabled to avoid command failures.
+
+#####See Also#####
+- [DataGridPredefinedCommands](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/DataGridPredefinedCommands/)

concepts/05 UI Components/TreeList/07 AI Assistant/00 AI Assistant.md

@@ -0,0 +1,10 @@
+The {WidgetName} AI Assistant allows you to use natural language to interact with the component.
+
+You can use and configure the following {WidgetName} capabilities via AI Assistant Chat prompts:
+
+- [Filter Rows and Search for Text/Values](/Documentation/Guide/UI_Components/TreeList/Filtering_and_Searching/)
+- [Sort Data](/Documentation/Guide/UI_Components/TreeList/Sorting/)
+- [Navigate between Pages](/Documentation/Guide/UI_Components/TreeList/Paging/)
+- [Change Row Focus](/Documentation/Guide/UI_Components/TreeList/Focused_Row/)
+- [Select Rows](/Documentation/Guide/UI_Components/TreeList/Selection/)
+- [Fix](/Documentation/Guide/UI_Components/TreeList/Columns/Column_Fixing/), [Resize](/Documentation/Guide/UI_Components/TreeList/Columns/Column_Sizing/), and [Reorder Columns](/Documentation/Guide/UI_Components/TreeList/Columns/Column_Reordering/)

concepts/05 UI Components/TreeList/07 AI Assistant/05 Configuration and Use.md

@@ -0,0 +1,19 @@
+To activate the AI Assistant, configure the following properties:
+
+- Specify [aiIntegration](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#aiIntegration) or **aiAssistant**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#aiIntegration)
+- Set **aiAssistant**.[enabled](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#enabled) to `true`
+
+Once activated, {WidgetName} adds a predefined item (*"aiAssistantButton"*) to the component [toolbar](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/toolbar/). This button opens the AI Assistant chat in a pop-up window.
+
+[note]
+
+Ensure users can access the AI Assistant:
+
+- Do not hide the {WidgetName} toolbar (do not set **toolbar**.[visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/toolbar/#visible) to `false`).
+- If you define **toolbar**.[items[]](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/toolbar/items/), include *"aiAssistantButton"* in the array.
+
+[/note]
+
+You can specify [chat](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#chat) and [popup](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#popup) objects in **aiAssistant** to customize the assistant window. These objects support DevExtreme [Chat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/) and [Popup](/Documentation/ApiReference/UI_Components/dxPopup/Configuration/) configuration and allow you to integrate options such as [Chat suggestions](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#suggestions).
+
+You can also define **aiAssistant**.[title](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#title) to specify a custom title for the AI Assistant popup.

concepts/05 UI Components/TreeList/07 AI Assistant/10 Response Customization.md

@@ -0,0 +1,154 @@
+AI Assistant allows you to customize AI responses using the following callbacks:
+
+- [customizeResponseTitle](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#customizeResponseTitle): Customizes response titles (first line in a response)
+- [customizeResponseText](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#customizeResponseText): Customizes response messages (all lines below the title)
+
+You can use these callbacks to localize responses. The following code snippet uses the [locale()](/Documentation/ApiReference/Common/Utils/localization/#locale) utility method to specify response messages and titles for multiple locales:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    const currentLocale = DevExpress.localization.locale();
+
+    $('#{widget-name}-container').dx{WidgetName}({
+        aiAssistant: {
+            customizeResponseText(command) {
+                switch (currentLocale) {
+                    case 'en':
+                        return {
+                            success: `Command succeeded: ${command.name}`,
+                            failure: `Command failed: ${command.name}`,
+                        };
+                    case 'fr':
+                        return { /* Translated texts */ };
+                }
+            },
+            customizeResponseTitle(status, commandNames) {
+                switch (currentLocale) {
+                    case 'en':
+                        return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+                    case 'fr':
+                        return /* Translated texts */;
+                }
+            },
+        },
+    });
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-{widget-name}>
+        <dxo-{widget-name}-ai-assistant
+            [enabled]="true"
+            [customizeResponseText]="customizeResponseText"
+            [customizeResponseTitle]="customizeResponseTitle"
+        ></dxo-{widget-name}-ai-assistant>
+    </dx-{widget-name}>
+
+    <!-- tab: app.component.ts -->
+    import { Dx{WidgetName}Module, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
+    import { locale } from "devextreme/localization";
+
+    export class AppComponent {
+        currentLocale = locale();
+        customizeResponseText = (command) => {
+            switch (this.currentLocale) {
+                case 'en':
+                    return {
+                        success: `Command succeeded: ${command.name}`,
+                        failure: `Command failed: ${command.name}`,
+                    };
+                case 'fr':
+                    return { /* Translated texts */ };
+            }
+        };
+        customizeResponseTitle = (status, commandNames) => {
+            switch (this.currentLocale) {
+                case 'en':
+                    return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+                case 'fr':
+                    return /* Translated texts */;
+            }
+        };
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <Dx{WidgetName}>
+            <DxAIAssistant
+                :customize-response-text="customizeResponseText"
+                :customize-response-title="customizeResponseTitle"
+            />
+        </Dx{WidgetName}>
+    </template>
+
+    <script setup lang="ts">
+    import { Dx{WidgetName}, DxAIAssistant, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
+    import { locale } from "devextreme/localization";
+
+    const currentLocale = locale();
+    function customizeResponseText(command) {
+        switch (currentLocale) {
+            case 'en':
+                return {
+                    success: `Command succeeded: ${command.name}`,
+                    failure: `Command failed: ${command.name}`,
+                };
+            case 'fr':
+                return { /* Translated texts */ };
+        }
+    };
+    function customizeResponseTitle(status, commandNames) {
+        switch (currentLocale) {
+            case 'en':
+                return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+            case 'fr':
+                return /* Translated texts */;
+        }
+    };
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    import { {WidgetName}, AIAssistant, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
+    import { locale } from "devextreme/localization";
+
+    const currentLocale = locale();
+    function customizeResponseText(command) {
+        switch (currentLocale) {
+            case 'en':
+                return {
+                    success: `Command succeeded: ${command.name}`,
+                    failure: `Command failed: ${command.name}`,
+                };
+            case 'fr':
+                return { /* Translated texts */ };
+        }
+    };
+    function customizeResponseTitle(status, commandNames) {
+        switch (currentLocale) {
+            case 'en':
+                return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
+            case 'fr':
+                return /* Translated texts */;
+        }
+    };
+
+    function App() {
+        return (
+            <{WidgetName}>
+                <AIAssistant
+                    enabled={true}
+                    customizeResponseText={customizeResponseText}
+                    customizeResponseTitle={customizeResponseTitle}
+                />
+            </{WidgetName}>
+        );
+    };
+
+---