@@ -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:
+
+
+
+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