Skip to content

Commit 3974250

Browse files
arman-boyakhchyanarman-boyakhchyan
authored
Grids AI Assistant: Add How-To Topics (#8819)
1 parent 1349b91 commit 3974250

8 files changed

Lines changed: 405 additions & 0 deletions

File tree

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
The {WidgetName} AI Assistant allows you to use natural language to interact with the component.
2+
3+
You can use and configure the following {WidgetName} capabilities via AI Assistant Chat prompts:
4+
5+
- [Filter Rows and Search for Text/Values](/Documentation/Guide/UI_Components/DataGrid/Filtering_and_Searching/)
6+
- [Sort Data](/Documentation/Guide/UI_Components/DataGrid/Sorting/)
7+
- [Group Rows](/Documentation/Guide/UI_Components/DataGrid/Grouping/)
8+
- [Navigate between Data Pages](/Documentation/Guide/UI_Components/DataGrid/Paging/)
9+
- [Change Row Focus](/Documentation/Guide/UI_Components/DataGrid/Focused_Row/)
10+
- [Select Rows](/Documentation/Guide/UI_Components/DataGrid/Selection/)
11+
- [Calculate Summaries](/Documentation/Guide/UI_Components/DataGrid/Summaries/Predefined_Aggregate_Functions/)
12+
- [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/)
13+
14+
#include common-demobutton-named with {
15+
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIAssistant/",
16+
name: "DataGrid - AI Assistant"
17+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
To activate the AI Assistant, configure the following properties:
2+
3+
- Specify [aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) or **aiAssistant**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#aiIntegration)
4+
- Set **aiAssistant**.[enabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#enabled) to `true`
5+
6+
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.
7+
8+
[note]
9+
10+
Ensure users can access the AI Assistant:
11+
12+
- Do not hide the {WidgetName} toolbar (do not set **toolbar**.[visible](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/#visible) to `false`).
13+
- If you define **toolbar**.[items[]](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/), include *"aiAssistantButton"* in the array.
14+
15+
[/note]
16+
17+
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).
18+
19+
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‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
AI Assistant allows you to customize AI responses using the following callbacks:
2+
3+
- [customizeResponseTitle](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#customizeResponseTitle): Customizes response titles (first line in a response)
4+
- [customizeResponseText](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#customizeResponseText): Customizes response messages (all lines below the title)
5+
6+
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:
7+
8+
---
9+
10+
##### jQuery
11+
12+
<!-- tab: index.js -->
13+
const currentLocale = DevExpress.localization.locale();
14+
15+
$('#{widget-name}-container').dx{WidgetName}({
16+
aiAssistant: {
17+
customizeResponseText(command) {
18+
switch (currentLocale) {
19+
case 'en':
20+
return {
21+
success: `Command succeeded: ${command.name}`,
22+
failure: `Command failed: ${command.name}`,
23+
};
24+
case 'fr':
25+
return { /* Translated texts */ };
26+
}
27+
},
28+
customizeResponseTitle(status, commandNames) {
29+
switch (currentLocale) {
30+
case 'en':
31+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
32+
case 'fr':
33+
return /* Translated texts */;
34+
}
35+
},
36+
},
37+
});
38+
39+
##### Angular
40+
41+
<!-- tab: app.component.html -->
42+
<dx-{widget-name}>
43+
<dxo-{widget-name}-ai-assistant
44+
[enabled]="true"
45+
[customizeResponseText]="customizeResponseText"
46+
[customizeResponseTitle]="customizeResponseTitle"
47+
></dxo-{widget-name}-ai-assistant>
48+
</dx-{widget-name}>
49+
50+
<!-- tab: app.component.ts -->
51+
import { Dx{WidgetName}Module, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
52+
import { locale } from "devextreme/localization";
53+
54+
export class AppComponent {
55+
currentLocale = locale();
56+
customizeResponseText = (command) => {
57+
switch (this.currentLocale) {
58+
case 'en':
59+
return {
60+
success: `Command succeeded: ${command.name}`,
61+
failure: `Command failed: ${command.name}`,
62+
};
63+
case 'fr':
64+
return { /* Translated texts */ };
65+
}
66+
};
67+
customizeResponseTitle = (status, commandNames) => {
68+
switch (this.currentLocale) {
69+
case 'en':
70+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
71+
case 'fr':
72+
return /* Translated texts */;
73+
}
74+
};
75+
}
76+
77+
##### Vue
78+
79+
<!-- tab: App.vue -->
80+
<template>
81+
<Dx{WidgetName}>
82+
<DxAIAssistant
83+
:customize-response-text="customizeResponseText"
84+
:customize-response-title="customizeResponseTitle"
85+
/>
86+
</Dx{WidgetName}>
87+
</template>
88+
89+
<script setup lang="ts">
90+
import { Dx{WidgetName}, DxAIAssistant, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
91+
import { locale } from "devextreme/localization";
92+
93+
const currentLocale = locale();
94+
function customizeResponseText(command) {
95+
switch (currentLocale) {
96+
case 'en':
97+
return {
98+
success: `Command succeeded: ${command.name}`,
99+
failure: `Command failed: ${command.name}`,
100+
};
101+
case 'fr':
102+
return { /* Translated texts */ };
103+
}
104+
};
105+
function customizeResponseTitle(status, commandNames) {
106+
switch (currentLocale) {
107+
case 'en':
108+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
109+
case 'fr':
110+
return /* Translated texts */;
111+
}
112+
};
113+
</script>
114+
115+
##### React
116+
117+
<!-- tab: App.tsx -->
118+
import { {WidgetName}, AIAssistant, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
119+
import { locale } from "devextreme/localization";
120+
121+
const currentLocale = locale();
122+
function customizeResponseText(command) {
123+
switch (currentLocale) {
124+
case 'en':
125+
return {
126+
success: `Command succeeded: ${command.name}`,
127+
failure: `Command failed: ${command.name}`,
128+
};
129+
case 'fr':
130+
return { /* Translated texts */ };
131+
}
132+
};
133+
function customizeResponseTitle(status, commandNames) {
134+
switch (currentLocale) {
135+
case 'en':
136+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
137+
case 'fr':
138+
return /* Translated texts */;
139+
}
140+
};
141+
142+
function App() {
143+
return (
144+
<{WidgetName}>
145+
<AIAssistant
146+
enabled={true}
147+
customizeResponseText={customizeResponseText}
148+
customizeResponseTitle={customizeResponseTitle}
149+
/>
150+
</{WidgetName}>
151+
);
152+
};
153+
154+
---

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Note the following AI Assistant specifics and best practices:
2+
3+
- The assistant does not have access to component data by default. In some scenarios, this can cause commands to fail.
4+
5+
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.
6+
7+
- 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").
8+
9+
- 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).
10+
11+
- The assistant does not support certain actions that are only accessible in the component UI (for instance, it cannot expand/collapse groups).
12+
13+
- If you expect users to request certain commands in the AI Assistant, ensure the corresponding {WidgetName} feature is enabled to avoid command failures.
14+
15+
#####See Also#####
16+
- [DataGridPredefinedCommands](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/DataGridPredefinedCommands/)

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
The {WidgetName} AI Assistant allows you to use natural language to interact with the component.
2+
3+
You can use and configure the following {WidgetName} capabilities via AI Assistant Chat prompts:
4+
5+
- [Filter Rows and Search for Text/Values](/Documentation/Guide/UI_Components/TreeList/Filtering_and_Searching/)
6+
- [Sort Data](/Documentation/Guide/UI_Components/TreeList/Sorting/)
7+
- [Navigate between Pages](/Documentation/Guide/UI_Components/TreeList/Paging/)
8+
- [Change Row Focus](/Documentation/Guide/UI_Components/TreeList/Focused_Row/)
9+
- [Select Rows](/Documentation/Guide/UI_Components/TreeList/Selection/)
10+
- [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‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
To activate the AI Assistant, configure the following properties:
2+
3+
- Specify [aiIntegration](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#aiIntegration) or **aiAssistant**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#aiIntegration)
4+
- Set **aiAssistant**.[enabled](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#enabled) to `true`
5+
6+
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.
7+
8+
[note]
9+
10+
Ensure users can access the AI Assistant:
11+
12+
- Do not hide the {WidgetName} toolbar (do not set **toolbar**.[visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/toolbar/#visible) to `false`).
13+
- If you define **toolbar**.[items[]](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/toolbar/items/), include *"aiAssistantButton"* in the array.
14+
15+
[/note]
16+
17+
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).
18+
19+
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‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
AI Assistant allows you to customize AI responses using the following callbacks:
2+
3+
- [customizeResponseTitle](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#customizeResponseTitle): Customizes response titles (first line in a response)
4+
- [customizeResponseText](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/aiAssistant/#customizeResponseText): Customizes response messages (all lines below the title)
5+
6+
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:
7+
8+
---
9+
10+
##### jQuery
11+
12+
<!-- tab: index.js -->
13+
const currentLocale = DevExpress.localization.locale();
14+
15+
$('#{widget-name}-container').dx{WidgetName}({
16+
aiAssistant: {
17+
customizeResponseText(command) {
18+
switch (currentLocale) {
19+
case 'en':
20+
return {
21+
success: `Command succeeded: ${command.name}`,
22+
failure: `Command failed: ${command.name}`,
23+
};
24+
case 'fr':
25+
return { /* Translated texts */ };
26+
}
27+
},
28+
customizeResponseTitle(status, commandNames) {
29+
switch (currentLocale) {
30+
case 'en':
31+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
32+
case 'fr':
33+
return /* Translated texts */;
34+
}
35+
},
36+
},
37+
});
38+
39+
##### Angular
40+
41+
<!-- tab: app.component.html -->
42+
<dx-{widget-name}>
43+
<dxo-{widget-name}-ai-assistant
44+
[enabled]="true"
45+
[customizeResponseText]="customizeResponseText"
46+
[customizeResponseTitle]="customizeResponseTitle"
47+
></dxo-{widget-name}-ai-assistant>
48+
</dx-{widget-name}>
49+
50+
<!-- tab: app.component.ts -->
51+
import { Dx{WidgetName}Module, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
52+
import { locale } from "devextreme/localization";
53+
54+
export class AppComponent {
55+
currentLocale = locale();
56+
customizeResponseText = (command) => {
57+
switch (this.currentLocale) {
58+
case 'en':
59+
return {
60+
success: `Command succeeded: ${command.name}`,
61+
failure: `Command failed: ${command.name}`,
62+
};
63+
case 'fr':
64+
return { /* Translated texts */ };
65+
}
66+
};
67+
customizeResponseTitle = (status, commandNames) => {
68+
switch (this.currentLocale) {
69+
case 'en':
70+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
71+
case 'fr':
72+
return /* Translated texts */;
73+
}
74+
};
75+
}
76+
77+
##### Vue
78+
79+
<!-- tab: App.vue -->
80+
<template>
81+
<Dx{WidgetName}>
82+
<DxAIAssistant
83+
:customize-response-text="customizeResponseText"
84+
:customize-response-title="customizeResponseTitle"
85+
/>
86+
</Dx{WidgetName}>
87+
</template>
88+
89+
<script setup lang="ts">
90+
import { Dx{WidgetName}, DxAIAssistant, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
91+
import { locale } from "devextreme/localization";
92+
93+
const currentLocale = locale();
94+
function customizeResponseText(command) {
95+
switch (currentLocale) {
96+
case 'en':
97+
return {
98+
success: `Command succeeded: ${command.name}`,
99+
failure: `Command failed: ${command.name}`,
100+
};
101+
case 'fr':
102+
return { /* Translated texts */ };
103+
}
104+
};
105+
function customizeResponseTitle(status, commandNames) {
106+
switch (currentLocale) {
107+
case 'en':
108+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
109+
case 'fr':
110+
return /* Translated texts */;
111+
}
112+
};
113+
</script>
114+
115+
##### React
116+
117+
<!-- tab: App.tsx -->
118+
import { {WidgetName}, AIAssistant, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
119+
import { locale } from "devextreme/localization";
120+
121+
const currentLocale = locale();
122+
function customizeResponseText(command) {
123+
switch (currentLocale) {
124+
case 'en':
125+
return {
126+
success: `Command succeeded: ${command.name}`,
127+
failure: `Command failed: ${command.name}`,
128+
};
129+
case 'fr':
130+
return { /* Translated texts */ };
131+
}
132+
};
133+
function customizeResponseTitle(status, commandNames) {
134+
switch (currentLocale) {
135+
case 'en':
136+
return `${status.toUpperCase()}: ${commandNames.join(', ')}`;
137+
case 'fr':
138+
return /* Translated texts */;
139+
}
140+
};
141+
142+
function App() {
143+
return (
144+
<{WidgetName}>
145+
<AIAssistant
146+
enabled={true}
147+
customizeResponseText={customizeResponseText}
148+
customizeResponseTitle={customizeResponseTitle}
149+
/>
150+
</{WidgetName}>
151+
);
152+
};
153+
154+
---

0 commit comments

Comments
 (0)