Merge pull request #5 from DevExpress-Examples/24.2_fix-viewer-assistant-document-loading

24.2 Add error handling, fix viewer assistant creation

Author: AndZ5556

CS/ReportingApp/ReportingApp.csproj

@@ -47,7 +47,7 @@
     <Exec Command="npm install" />
   </Target>
   <ItemGroup>
-    <PackageReference Include="Azure.AI.OpenAI" Version="2.1.0-beta.2" />
+    <PackageReference Include="Azure.AI.OpenAI" Version="2.2.0-beta.2" />
     <PackageReference Include="Azure.AI.OpenAI.Assistants" Version="1.0.0-beta.4" />
     <PackageReference Include="DevExpress.AIIntegration.OpenAI" Version="24.2.*-*" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.11" />

CS/ReportingApp/Views/Home/DocumentViewer.cshtml

@@ -5,9 +5,7 @@
     async function BeforeRender(sender, args) {
         const previewModel = args;
         const reportPreview = previewModel.reportPreview;
-        const result = await fetch(`/AI/CreateUserAssistant`);
-        const chatId = await result.text();
-        aiTab = createAssistantTab(chatId);
+        aiTab = createAssistantTab();
         const model = aiTab.model;
         previewModel.tabPanel.tabs.push(aiTab);
         reportPreview.events.on('documentBuildingChanged', (args) => {

CS/ReportingApp/wwwroot/js/aiIntegration.js

@@ -1,7 +1,7 @@
-const createAssistantTab = (function() {
+const createAssistantTab = (function() {
 
     let lastUserQuery;
-
+    let errorList = [];
     const assistant = {
         id: 'assistant',
         name: 'Virtual Assistant',
@@ -11,6 +11,28 @@
         id: 'user',
     };
 
+
+    async function _tryFetch(instance, fetchAction, message) {
+        try {
+            return await fetchAction();
+        } catch(error) {
+            _handleError(instance, { message: error.message, code: message });
+        }
+    }
+
+    function _handleError(instance, error) {
+        const id = "id" + Math.random().toString(16).slice(2)
+        setTimeout(() => {
+            errorList = errorList.filter(err => err.id !== id);
+            instance.option('alerts', errorList);
+        }, 10000);
+        errorList.push({
+            id: id,
+            message: `${error.code} - ${error.message}`
+        });
+        instance.option('alerts', errorList);
+    }
+
     function normalizeAIResponse(text) {
         text = text.replace(/【\d+:\d+†[^\】]+】/g, "");
         let html = marked.parse(text);
@@ -23,16 +45,23 @@
         navigator.clipboard.writeText(text);
     }
 
-    async function getAIResponse(text, id) {
+    async function getAIResponse(instance, text, id) {
         const formData = new FormData();
         formData.append('text', text);
         formData.append('chatId', id);
         lastUserQuery = text;
-        const response = await fetch(`/AI/GetAnswer`, {
-            method: 'POST',
-            body: formData
-        });
-        return await response.text();
+        return _tryFetch(instance, async () => {
+            const response = await fetch('/AI/GetAnswer', {
+                method: 'POST',
+                body: formData
+            });
+
+            if(!response.ok) {
+                _handleError(instance, { code: `${response.status}`, message: `Internal server error` });
+                return;
+            }
+            return await response.text();
+        }, 'GetAnswer');
     }
 
     function RenderAssistantMessage(instance, message) {
@@ -45,14 +74,15 @@
         const newItems = items.slice(0, -1);
         instance.option({ items: newItems });
         instance.option({ typingUsers: [assistant] });
-        const aiResponse = await getAIResponse(lastUserQuery, assistant.id);
+        const aiResponse = await getAIResponse(instance, lastUserQuery, assistant.id);
         setTimeout(() => {
             instance.option({ typingUsers: [] });
             RenderAssistantMessage(instance, aiResponse);
         }, 200);
     }
 
     function createAssistantTab(chatId) {
+        let lastRefreshButton;
         assistant.id = chatId;
         const model = {
             title: 'AI Assistant',
@@ -72,6 +102,7 @@
 
                 const buttonContainer = document.createElement('div');
                 buttonContainer.classList.add('dx-bubble-button-container');
+                lastRefreshButton?.remove();
                 const copyBtnElement = document.createElement('div');
                 new DevExpress.ui.dxButton(copyBtnElement, {
                     icon: 'copy',
@@ -86,15 +117,16 @@
                     onClick: () => refreshAnswer(data.component)
                 });
                 buttonContainer.appendChild(refreshBtnElement);
+                lastRefreshButton = refreshBtnElement;
                 container.appendChild(buttonContainer);
             },
             onMessageEntered: async (e) => {
                 const instance = e.component;
+                instance.option('alerts', []);
                 instance.renderMessage(e.message);
                 instance.option({ typingUsers: [assistant] });
                 const userInput = e.message.text;
-
-                var response = await getAIResponse(userInput, assistant.id);
+                const response = await getAIResponse(instance, userInput, assistant.id ?? model.chatId);
                 RenderAssistantMessage(instance, response);
             }
         };

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/853003889/24.2.2%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1252182)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)