Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,27 @@ default: undefined
Binds the {WidgetName} to an AI service.

---
To activate AI functionality in {WidgetName}, configure this object and assign *"ai"* to a column's [type](/api-reference/_hidden/dxDataGridColumn/type.md '{basewidgetpath}/Configuration/columns/#type') property.
The DevExtreme {WidgetName} ships with the following AI features:

This object configures options for all AI columns within the component. To configure AI options specific to a column, define **columns[]**.**ai**.[aiIntegration](/api-reference/40%20Common%20Types/15%20grids/ColumnAIOptions/aiIntegration.md '{basewidgetpath}/Configuration/columns/ai/#aiIntegration').
- AI Columns
- AI Assistant

To activate AI functionality, configure **aiIntegration** and specify {WidgetName} properties as follows:

- Assign *"ai"* to a column's [type](/api-reference/_hidden/dxDataGridColumn/type.md '{basewidgetpath}/Configuration/columns/#type') property to implement an AI Column.
- Set **aiAssistant**.[enabled]({basewidgetpath}/Configuration/aiAssistant/#enabled) to `true` to activate the AI Assistant.

This object stores shared AI options for the {WidgetName} AI Assistant and all AI columns within the component. To configure AI options specific to a column, define **columns[]**.**ai**.[aiIntegration](/api-reference/40%20Common%20Types/15%20grids/ColumnAIOptions/aiIntegration.md '{basewidgetpath}/Configuration/columns/ai/#aiIntegration'). To configure AI options specific to the AI Assistant, define **aiAssistant**.[aiIntegration]({basewidgetpath}/Configuration/aiAssistant/#aiIntegration).

#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIColumns/",
name: "DataGrid"
name: "DataGrid - AI Columns"
}
#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/AIColumns/",
name: "TreeList"
}
name: "TreeList - AI Columns"
}
#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIAssistant/",
name: "DataGrid - AI Assistant"
}
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ The model data. Available only if you use Knockout.
The JSON schema of the AI Assistant response.

##### field(e.additionalInfo): Record
<!-- Description goes here -->
Additional information included in the AI Assistant request.

---
Use this handler to modify the AI Assistant request.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
---
id: dxDataGrid.Options.aiAssistant
type: AIAssistant
inheritsType: AIAssistant
---
---
##### shortDescription
<!-- Description goes here -->
Configures the {WidgetName} AI Assistant.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
---
id: dxDataGrid.Options.aiAssistant.customizeResponseText
type: function(command)
---
---
##### shortDescription
Customizes AI Assistant response texts for each requested command.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid "texts" (plural). "Text" is uncountable and if you say "texts" it's closer to something like "manuscripts".

I'm also not sure about the phrase "requested command". You usually "run" or "execute" a command. You don't "request a command". Or a "request" can be a synonym for a "command".

Suggested change
Customizes AI Assistant response texts for each requested command.
Customizes AI Assistant response messages for each command/request.


##### param(command): DataGridCommandInfo
Information about the command.

##### return: ResponseStatusTexts
Custom texts for **success** and **failure** response statuses.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Custom texts for **success** and **failure** response statuses.
Custom messages for **success** and **failure** responses.


---
Use this function to customize response message texts for AI Assistant commands. **customizeResponseText** is called for each requested command. The AI Assistant chat displays these texts below the response title. When a response includes multiple commands, the chat displays each command's text on separate lines.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Use this function to customize response message texts for AI Assistant commands. **customizeResponseText** is called for each requested command. The AI Assistant chat displays these texts below the response title. When a response includes multiple commands, the chat displays each command's text on separate lines.
**customizeResponseText** is called for each command/request. Use this function to customize response messages for AI Assistant commands. The chat displays these message strings below the response title. When a response includes multiple commands, the chat displays individual messages on separate lines.


When a command succeeds, the AI Assistant chat displays the response text in green and prefixes the text with a checkmark button emoji (✅). When a command fails, the AI Assistant chat displays the text in red and prefixes with a cross mark emoji (❌) instead.
Comment thread
arman-boyakhchyan marked this conversation as resolved.
Comment thread
arman-boyakhchyan marked this conversation as resolved.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
When a command succeeds, the AI Assistant chat displays the response text in green and prefixes the text with a checkmark button emoji (✅). When a command fails, the AI Assistant chat displays the text in red and prefixes with a cross mark emoji (❌) instead.
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:

- **name**: The command's name ([DataGridPredefinedCommandNames]({basewidgetpath}/Types/DataGridPredefinedCommandNames/)).
- **args**: Command arguments. Refer to [DataGridPredefinedCommands]({basewidgetpath}/Types/DataGridPredefinedCommands/) for information about the arguments of each available command.

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.

Omit a field in the return object to use default texts.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Omit a field in the return object to use default texts.
If you don't specify any of these fields, the AI Assistant chat displays the default message.


You can use this function to translate response texts. The following code snippet uses the [locale()](/Documentation/ApiReference/Common/Utils/localization/#locale) method to specify texts 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 */ };
}
},
},
});

##### Angular

<!-- tab: app.component.html -->
<dx-{widget-name}>
<dxo-{widget-name}-ai-assistant
[enabled]="true"
[customizeResponseText]="customizeResponseText"
></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 */ };
}
};
}

##### Vue

<!-- tab: App.vue -->
<template>
<Dx{WidgetName}>
<DxAIAssistant
:customize-response-text="customizeResponseText"
/>
</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 */ };
}
};
</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 App() {
return (
<{WidgetName}>
<AIAssistant
enabled={true}
customizeResponseText={customizeResponseText}
/>
</{WidgetName}>
);
};

---
Loading
Loading