JavaScript/jQuery TreeList - AI Assistant

The TreeList AI Assistant allows you to use natural language to interact with the component.

You can use and configure the following TreeList capabilities via AI Assistant Chat prompts:

Configuration and Use

To activate the AI Assistant, configure the following properties:

Specify aiIntegration or aiAssistant.aiIntegration
Set aiAssistant.enabled to true

Once activated, TreeList adds a predefined item ("aiAssistantButton") to the component 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 TreeList toolbar (do not set toolbar.visible to false).
If you define toolbar.items[], include "aiAssistantButton" in the array.

You can specify chat and popup objects in aiAssistant to customize the assistant window. These objects support DevExtreme Chat and Popup configuration and allow you to integrate options such as Chat suggestions.

You can also define aiAssistant.title to specify a custom title for the AI Assistant popup.

Response Customization

AI Assistant allows you to customize AI responses using the following callbacks:

customizeResponseTitle: Customizes response titles (first line in a response)
customizeResponseText: Customizes response messages (all lines below the title)

You can use these callbacks to localize responses. The following code snippet uses the locale() utility method to specify response messages and titles for multiple locales:

jQuery

index.js

const currentLocale = DevExpress.localization.locale();

$('#tree-list-container').dxTreeList({
    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

app.component.html

app.component.ts

<dx-tree-list>
    <dxo-tree-list-ai-assistant
        [enabled]="true"
        [customizeResponseText]="customizeResponseText"
        [customizeResponseTitle]="customizeResponseTitle"
    ></dxo-tree-list-ai-assistant>
</dx-tree-list>

import { DxTreeListModule, type DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
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

App.vue

<template>
    <DxTreeList>
        <DxAIAssistant
            :customize-response-text="customizeResponseText"
            :customize-response-title="customizeResponseTitle"
        />
    </DxTreeList>
</template>

<script setup lang="ts">
import { DxTreeList, DxAIAssistant, type DxTreeListTypes } from 'devextreme-vue/tree-list';
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

App.tsx

import { TreeList, AIAssistant, type TreeListTypes } from 'devextreme-react/tree-list';
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 (
        <TreeList>
            <AIAssistant
                enabled={true}
                customizeResponseText={customizeResponseText}
                customizeResponseTitle={customizeResponseTitle}
            />
        </TreeList>
    );
};

Specifics and Best Practices

Note the following AI Assistant specifics and best practices:

The assistant does not have access to component data by default. In some scenarios, this approach can cause commands to fail.

For instance, to select the last row on a page, 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.
The AI Assistant may not preserve the results of previously executed commands of the same type. To preserve or discard previous results, specify this in your request with keywords such as "also" or "only".
If TreeList 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 (in onAIAssistantRequestCreating).
The assistant does not support certain actions that are only accessible in the component UI (for instance, it cannot expand/collapse groups).
If users are likely to request specific commands in the AI Assistant, ensure that the corresponding TreeList feature is enabled to prevent command failures.