diff --git a/CS/Data/Dashboards/Financial.xml b/CS/Data/Dashboards/Financial.xml index 7391bd0..641ee05 100644 --- a/CS/Data/Dashboards/Financial.xml +++ b/CS/Data/Dashboards/Financial.xml @@ -125,7 +125,7 @@ - + @@ -241,7 +241,7 @@ - + @@ -319,7 +319,7 @@ - + @@ -342,23 +342,19 @@ - - - - + + + + - - + + - + - - ["The dashboard shows stock prices for different vendors during a specified trading period. ","You can see detailed data for a specified vendor by selecting a card. The dashboard parameters allow you to change the trading period."] - [{"href":"https://docs.devexpress.com/Dashboard/117163/web-dashboard/create-dashboards-on-the-web/dashboard-item-settings/cards","text":"Cards"},{"href":"https://docs.devexpress.com/Dashboard/14758/winforms-dashboard/winforms-designer/create-dashboards-in-the-winforms-designer/dashboard-item-settings/chart/series/financial-series","text":"Financial Series"},{"href":"https://docs.devexpress.com/Dashboard/117159/web-dashboard/create-dashboards-on-the-web/dashboard-item-settings/chart","text":"Charts"},{"href":"https://docs.devexpress.com/Dashboard/402204/web-dashboard/create-dashboards-on-the-web/dashboard-item-settings/grid/conditional-formatting","text":"Conditional Formatting "},{"href":"https://docs.devexpress.com/Dashboard/117062/web-dashboard/create-dashboards-on-the-web/data-analysis/dashboard-parameters","text":"Dashboard Parameters"}] - \ No newline at end of file diff --git a/CS/Pages/Index.cshtml b/CS/Pages/Index.cshtml index 203bfa0..029dee3 100644 --- a/CS/Pages/Index.cshtml +++ b/CS/Pages/Index.cshtml @@ -1,4 +1,5 @@ @page +@using DevExpress.DashboardWeb + +
+@(Html.DevExpress().Dashboard("dashboardControl1") + .ControllerName("DefaultDashboard") + .OnBeforeRender("handleBeforeRender") + .OnDashboardInitialized("handleDashboardInitialized") +) +
+``` + +After you register the extension, the AI Assistant icon appears in the Dashboard Toolbox: + +![DevExpress BI Dashboard - AI Assistant Custom Item Icon](images/dashboard-toolbar-ai-assistant-item.png) + +Click the item to add an AI Assistant item to the dashboard. Only one AI Assistant item is available per dashboard. You can ask the assistant questions in the Viewer mode. + +File to Review: +- [Index.cshtml](./CS/Pages/Index.cshtml) + +### Access the Assistant + +Each time a dashboard is initialized or its [dashboard state](https://docs.devexpress.com/Dashboard/DevExpress.DashboardCommon.DashboardState) changes, the application exports dashboard data to an Excel spreadsheet and creates a new assistant. This way, the AI Assistant always processes up-to-date data. + +Files to Review: + +- [aiChatCustomItem.js](./CS/wwwroot/js/aiChatCustomItem.js) +- [AIAssistantProvider.cs](./CS/Services/AIAssistantProvider.cs) +- [AIChatController](./CS/Controllers/AIChatController.cs) + +### Communicate with Assistant + +Each time a user sends a message, the [`onMessageEntered`](https://js.devexpress.com/jQuery/Documentation/24_2/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler passes the request to the assistant: + +```js +// ... +getAnswer(chatId, question) { + const formData = new FormData(); + formData.append('chatId', chatId); + formData.append('question', question); + return this._tryFetch(async () => { + const response = await fetch('/AIChat/GetAnswer', { + method: 'POST', + body: formData + }); + return await response.text(); + }, 'GetAnswer'); +} +// ... +async getAIResponse(question) { + this.lastUserQuery = question; + + if(!this.chatId) + this.chatId = await this.createChat(this.dashboardControl.getDashboardId(), this.dashboardControl.getDashboardState()); + if(this.chatId) + return await this.getAnswer(this.chatId, question); +}; +// ... +async onMessageEntered(e) { + const instance = e.component; + this.component.option('alerts', []); + instance.renderMessage(e.message); + instance.option({ typingUsers: [assistant] }); + const userInput = e.message.text + ((this.model.selectedSheet && "\nDiscuss item " + this.model.selectedSheet) + || "\nLet's discuss all items"); + const response = await this.getAIResponse(userInput); + this.renderAssistantMessage(instance, response); +} +``` + +[`AIChatController.GetAnswer`](./CS/Controllers/AIChatController.cs#L38) receives answers from the assistant. ## Files to Review -- link.cs (VB: link.vb) -- link.js -- ... +- [Program.cs](./CS/Program.cs) +- [Index.cshtml](./CS/Pages/Index.cshtml) +- [aiChatCustomItem.js](./CS/wwwroot/js/aiChatCustomItem.js) +- [AIAssistantProvider.cs](./CS/Services/AIAssistantProvider.cs) +- [IAIAssistantProvider.cs](./CS/Services/IAIAssistantProvider.cs) +- [AIChatController.cs](./CS/Controllers/AIChatController.cs) +- [AssistantHelper.cs](./CS/Services/AssistantHelper.cs) + ## Documentation -- link -- link -- ... +- [AI Integration](https://docs.devexpress.com/CoreLibraries/405204/ai-powered-extensions) +- [Create a Custom Item for the Web Dashboard](https://docs.devexpress.com/Dashboard/117546/web-dashboard/advanced-customization/create-a-custom-item) +- [Getting Started with JavaScript/jQuery Chat](https://js.devexpress.com/jQuery/Documentation/Guide/UI_Components/Chat/Getting_Started_with_Chat/) ## More Examples -- link -- link -- ... +- [DevExtreme Chat - Getting Started](https://github.com/DevExpress-Examples/devextreme-getting-started-with-chat) +- [Reporting for ASP.NET Core - Integrate AI Assistant based on Azure OpenAI](https://github.com/DevExpress-Examples/web-reporting-integrate-ai-assistant) + ## Does this example address your development requirements/objectives? diff --git a/images/dashboard-ai-assistant.png b/images/dashboard-ai-assistant.png new file mode 100644 index 0000000..bfe12e5 Binary files /dev/null and b/images/dashboard-ai-assistant.png differ diff --git a/images/dashboard-toolbar-ai-assistant-item.png b/images/dashboard-toolbar-ai-assistant-item.png new file mode 100644 index 0000000..1b5dfc8 Binary files /dev/null and b/images/dashboard-toolbar-ai-assistant-item.png differ