|
| 1 | +--- |
| 2 | +id: dxDataGrid.Options.aiAssistant.customizeResponseText |
| 3 | +type: function(command) |
| 4 | +--- |
| 5 | +--- |
| 6 | +##### shortDescription |
| 7 | +Customizes AI Assistant response messages for each command. |
| 8 | + |
| 9 | +##### param(command): DataGridCommandInfo |
| 10 | +Information about the command. |
| 11 | + |
| 12 | +##### return: ResponseStatusTexts |
| 13 | +Custom messages for **success** and **failure** responses. |
| 14 | + |
| 15 | +--- |
| 16 | +**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. |
| 17 | + |
| 18 | +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 (❌). |
| 19 | + |
| 20 | +The **command** parameter contains the following fields: |
| 21 | + |
| 22 | +- **name**: The command's name ([DataGridPredefinedCommandNames]({basewidgetpath}/Types/DataGridPredefinedCommandNames/)). |
| 23 | +- **args**: Command arguments. Refer to [DataGridPredefinedCommands]({basewidgetpath}/Types/DataGridPredefinedCommands/) for information about the arguments of each available command. |
| 24 | + |
| 25 | +Configure **customizeResponseText** to return an object with the following fields: |
| 26 | + |
| 27 | +- **success**: Text to display when the command succeeds. |
| 28 | +- **failure**: Text to display when the command fails. |
| 29 | + |
| 30 | +If you do not specify any of these fields, the AI Assistant chat displays the default message. |
| 31 | + |
| 32 | +You can use this function to localize response text. The following code snippet uses the [locale()](/Documentation/ApiReference/Common/Utils/localization/#locale) method to specify text for multiple locales: |
| 33 | + |
| 34 | +--- |
| 35 | + |
| 36 | +##### jQuery |
| 37 | + |
| 38 | + <!-- tab: index.js --> |
| 39 | + const currentLocale = DevExpress.localization.locale(); |
| 40 | + |
| 41 | + $('#{widget-name}-container').dx{WidgetName}({ |
| 42 | + aiAssistant: { |
| 43 | + customizeResponseText(command) { |
| 44 | + switch (currentLocale) { |
| 45 | + case 'en': |
| 46 | + return { |
| 47 | + success: `Command succeeded: ${command.name}`, |
| 48 | + failure: `Command failed: ${command.name}`, |
| 49 | + }; |
| 50 | + case 'fr': |
| 51 | + return { /* Translated texts */ }; |
| 52 | + } |
| 53 | + }, |
| 54 | + }, |
| 55 | + }); |
| 56 | + |
| 57 | +##### Angular |
| 58 | + |
| 59 | + <!-- tab: app.component.html --> |
| 60 | + <dx-{widget-name}> |
| 61 | + <dxo-{widget-name}-ai-assistant |
| 62 | + [enabled]="true" |
| 63 | + [customizeResponseText]="customizeResponseText" |
| 64 | + ></dxo-{widget-name}-ai-assistant> |
| 65 | + </dx-{widget-name}> |
| 66 | + |
| 67 | + <!-- tab: app.component.ts --> |
| 68 | + import { Dx{WidgetName}Module, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}'; |
| 69 | + import { locale } from "devextreme/localization"; |
| 70 | + |
| 71 | + export class AppComponent { |
| 72 | + currentLocale = locale(); |
| 73 | + customizeResponseText = (command) => { |
| 74 | + switch (this.currentLocale) { |
| 75 | + case 'en': |
| 76 | + return { |
| 77 | + success: `Command succeeded: ${command.name}`, |
| 78 | + failure: `Command failed: ${command.name}`, |
| 79 | + }; |
| 80 | + case 'fr': |
| 81 | + return { /* Translated texts */ }; |
| 82 | + } |
| 83 | + }; |
| 84 | + } |
| 85 | + |
| 86 | +##### Vue |
| 87 | + |
| 88 | + <!-- tab: App.vue --> |
| 89 | + <template> |
| 90 | + <Dx{WidgetName}> |
| 91 | + <DxAIAssistant |
| 92 | + :customize-response-text="customizeResponseText" |
| 93 | + /> |
| 94 | + </Dx{WidgetName}> |
| 95 | + </template> |
| 96 | + |
| 97 | + <script setup lang="ts"> |
| 98 | + import { Dx{WidgetName}, DxAIAssistant, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}'; |
| 99 | + import { locale } from "devextreme/localization"; |
| 100 | + |
| 101 | + const currentLocale = locale(); |
| 102 | + function customizeResponseText(command) { |
| 103 | + switch (currentLocale) { |
| 104 | + case 'en': |
| 105 | + return { |
| 106 | + success: `Command succeeded: ${command.name}`, |
| 107 | + failure: `Command failed: ${command.name}`, |
| 108 | + }; |
| 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 | + |
| 134 | + function App() { |
| 135 | + return ( |
| 136 | + <{WidgetName}> |
| 137 | + <AIAssistant |
| 138 | + enabled={true} |
| 139 | + customizeResponseText={customizeResponseText} |
| 140 | + /> |
| 141 | + </{WidgetName}> |
| 142 | + ); |
| 143 | + }; |
| 144 | + |
| 145 | +--- |
0 commit comments