Vue TreeList - aiAssistant

Configures the TreeList AI Assistant.

Type:

AIAssistant

DataGrid - AI Assistant Demo

aiIntegration

Binds the AI Assistant to an AI service.

Type:

AIIntegration

To activate the AI Assistant in TreeList, configure this object and assign true to aiAssistant.enabled.

DataGrid - AI Assistant Demo

chat

Configures the AI Assistant chat.

Type: dxChat_Options

Use DevExtreme Chat options to configure this object.

NOTE

We do not recommend that you specify the following Chat options:

DataGrid - AI Assistant Demo

customizeResponseText

Customizes AI Assistant response messages for each command.

Type:

Function

Function parameters:
command:

CommandInfo

Information about the command.

Return Value:

ResponseStatusTexts

Custom messages for success and failure responses.

customizeResponseText is called for each command. Use this function to customize response messages for AI Assistant commands. The chat displays these messages below the response title. If a response includes multiple commands, the chat displays each message on a separate line.

When a command succeeds, the AI Assistant chat displays the response in green and prefixes the text with a checkmark button emoji (✅). When a command fails, the AI Assistant chat displays the response in red and prefixes the text with a cross mark emoji (❌).

The command parameter contains the following fields:

Configure customizeResponseText to return an object with the following fields:

  • success: Text to display when the command succeeds.
  • failure: Text to display when the command fails.

If you do not specify any of these fields, the AI Assistant chat displays the default message.

You can use this function to localize response text. The following code snippet uses the locale() method to specify text 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 */ };
            }
        },
    },
});
Angular
app.component.html
app.component.ts
<dx-tree-list>
    <dxo-tree-list-ai-assistant
        [enabled]="true"
        [customizeResponseText]="customizeResponseText"
    ></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 */ };
        }
    };
}
Vue
App.vue
<template>
    <DxTreeList>
        <DxAIAssistant
            :customize-response-text="customizeResponseText"
        />
    </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 */ };
    }
};
</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 App() {
    return (
        <TreeList>
            <AIAssistant
                enabled={true}
                customizeResponseText={customizeResponseText}
            />
        </TreeList>
    );
};

customizeResponseTitle

Customizes AI Assistant response titles.

Type:

Function

Function parameters:
status:

ResponseStatus

The response status. If a response describes multiple commands, this parameter equals "success" only if all commands succeed.

commandNames:

Array<String>

An array of commands (PredefinedCommandNames).

Return Value:

String

The custom response title.

Use this function to customize the titles of AI Assistant response messages. The following code snippet adds response statuses to titles:

jQuery
index.js
$('#tree-list-container').dxTreeList({
    aiAssistant: {
        customizeResponseTitle(status, commandNames) {
            switch (status) {
                case 'success':
                    return `Completed: ${commandNames.join(', ')}`;
                case 'failure':
                    return `Failed: ${commandNames.join(', ')}`;
            }
        },
    },
});
Angular
app.component.html
app.component.ts
<dx-tree-list>
    <dxo-tree-list-ai-assistant
        [enabled]="true"
        [customizeResponseTitle]="customizeResponseTitle"
    ></dxo-tree-list-ai-assistant>
</dx-tree-list>
import { DxTreeListModule, type DxTreeListTypes } from 'devextreme-angular/ui/tree-list';

export class AppComponent {
    customizeResponseTitle = (status, commandNames) => {
        switch (status) {
            case 'success':
                return `Completed: ${commandNames.join(', ')}`;
            case 'failure':
                return `Failed: ${commandNames.join(', ')}`;
        }
    };
}
Vue
App.vue
<template>
    <DxTreeList>
        <DxAIAssistant
            :customize-response-title="customizeResponseTitle"
        />
    </DxTreeList>
</template>

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

function customizeResponseTitle(status, commandNames) {
    switch (status) {
        case 'success':
            return `Completed: ${commandNames.join(', ')}`;
        case 'failure':
            return `Failed: ${commandNames.join(', ')}`;
    }
};
</script>
React
App.tsx
import { TreeList, AIAssistant, type TreeListTypes } from 'devextreme-react/tree-list';

function customizeResponseTitle(status, commandNames) {
    switch (status) {
        case 'success':
            return `Completed: ${commandNames.join(', ')}`;
        case 'failure':
            return `Failed: ${commandNames.join(', ')}`;
    }
};

function App() {
    return (
        <TreeList>
            <AIAssistant
                enabled={true}
                customizeResponseTitle={customizeResponseTitle}
            />
        </TreeList>
    );
};

You can use this function to translate response titles. The following code snippet uses the locale() method to specify titles for multiple locales:

jQuery
index.js
const currentLocale = DevExpress.localization.locale();

$('#tree-list-container').dxTreeList({
    aiAssistant: {
        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"
        [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();
    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-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 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 customizeResponseTitle(status, commandNames) {
    switch (currentLocale) {
        case 'en':
            return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
        case 'fr':
            return /* Translated texts */;
    }
};

function App() {
    return (
        <TreeList>
            <AIAssistant
                enabled={true}
                customizeResponseTitle={customizeResponseTitle}
            />
        </TreeList>
    );
};

enabled

Specifies whether the AI Assistant is enabled.

Type:

Boolean

Default Value: false

To activate the AI Assistant in TreeList, set this property to true and configure the aiAssistant.aiIntegration object.

DataGrid - AI Assistant Demo

popup

Configures the AI Assistant popup.

Type:

Popup Configuration

Use DevExtreme Popup options to configure this object.

NOTE

We do not recommend that you specify the following Popup options:

title

Specifies the AI Assistant title.

Type:

String

Default Value: 'AI Assistant'

The component displays this title in the following elements:

  • The AI Assistant popup
  • The tooltip of the AI Assistant toolbar item