✨ AI Column: fix jQuery, React, Angular demos on the AZ server (#31780)

Author: dmlvr

…Grid/AIColumns/Angular/app/ai.service.ts …d/AIColumns/Angular/app/ai/ai.service.tsapps/demos/Demos/DataGrid/AIColumns/Angular/app/ai.service.ts renamed to apps/demos/Demos/DataGrid/AIColumns/Angular/app/ai/ai.service.ts apps/demos/Demos/DataGrid/AIColumns/Angular/app/ai.service.ts renamed to apps/demos/Demos/DataGrid/AIColumns/Angular/app/ai/ai.service.ts

@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxDataGridModule, DxPopupModule } from 'devextreme-angular';
 import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { Service, type Vehicle } from './app.service';
-import { AiService } from './ai.service';
+import { AiService } from './ai/ai.service';
 import { Trademark } from './trademark/trademark.component';
 import { Category } from './category/category.component';
 import { LicenseInfo } from './license-info/license-info.component';

apps/demos/Demos/DataGrid/AIColumns/Angular/app/app.component.ts

@@ -3,7 +3,7 @@ import DataGrid, {
   Column,
   Paging,
   Grouping,
-  Ai,
+  AI,
 } from 'devextreme-react/data-grid';
 import Popup, { Position } from 'devextreme-react/popup';
 import { vehicles } from './data.ts';
@@ -91,7 +91,7 @@ export default function App() {
           fixedPosition="right"
           cssClass="ai__cell"
         >
-          <Ai
+          <AI
             mode="auto"
             noDataText="No data"
             prompt="Identify the country where this vehicle model is originally manufactured or developed, based on its brand, model, and specifications."

apps/demos/Demos/DataGrid/AIColumns/React/App.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import DataGrid, {
-  Column, Paging, Grouping, Ai,
+  Column, Paging, Grouping, AI,
 } from 'devextreme-react/data-grid';
 import Popup, { Position } from 'devextreme-react/popup';
 import { vehicles } from './data.js';
@@ -83,7 +83,7 @@ export default function App() {
           fixedPosition="right"
           cssClass="ai__cell"
         >
-          <Ai
+          <AI
             mode="auto"
             noDataText="No data"
             prompt="Identify the country where this vehicle model is originally manufactured or developed, based on its brand, model, and specifications."

apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js

@@ -14,7 +14,6 @@
 
       window.AzureOpenAI = AzureOpenAI;
     </script>
-    <script type="module" src="service.js"></script>
     <script src="data.js"></script>
     <script src="index.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css" />

apps/demos/Demos/DataGrid/AIColumns/jQuery/index.html

@@ -1,4 +1,81 @@
 $(() => {
+  const deployment = 'gpt-4o-mini';
+  const apiVersion = '2024-02-01';
+  const endpoint = 'https://public-api.devexpress.com/demo-openai';
+  const apiKey = 'DEMO';
+
+  const aiService = new AzureOpenAI({
+    dangerouslyAllowBrowser: true,
+    deployment,
+    endpoint,
+    apiVersion,
+    apiKey,
+  });
+
+  async function getAIResponse(messages, signal) {
+    const params = {
+      messages,
+      model: deployment,
+      max_tokens: 1000,
+      temperature: 0.7,
+    };
+    const response = await aiService.chat.completions
+      .create(params, { signal });
+    const result = response.choices[0].message?.content;
+
+    return result;
+  }
+
+  async function getAIResponseRecursive(messages, signal) {
+    return getAIResponse(messages, signal)
+      .catch(async (error) => {
+        if (!error.message.includes('Connection error')) {
+          return Promise.reject(error);
+        }
+
+        DevExpress.ui.notify({
+          message: 'You have reached the AI rate limits of this demo. Retrying in 30 seconds...',
+          width: 'auto',
+          type: 'error',
+          displayTime: 5000,
+        });
+
+        await new Promise((resolve) => setTimeout(resolve, 30000));
+
+        return getAIResponseRecursive(messages, signal);
+      });
+  }
+
+  const aiIntegration = new DevExpress.aiIntegration({
+    sendRequest({ prompt }) {
+      const isValidRequest = JSON.stringify(prompt.user).length < 5000;
+      if (!isValidRequest) {
+        return {
+          promise: Promise.reject(new Error('Request is too large')),
+          abort: () => {},
+        };
+      }
+      const controller = new AbortController();
+      const signal = controller.signal;
+
+      const aiPrompt = [
+        { role: 'system', content: prompt.system },
+        { role: 'user', content: prompt.user },
+      ];
+
+      const promise = getAIResponseRecursive(aiPrompt, signal);
+
+      const result = {
+        promise,
+        abort: () => {
+          controller.abort();
+        },
+      };
+
+      return result;
+    },
+  });
+
   const popupContentTemplate = function (vehicle) {
     const {
       Source,

apps/demos/Demos/DataGrid/AIColumns/jQuery/index.js

@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxTreeListModule } from 'devextreme-angular';
 import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { Service, type IEmployee } from './app.service';
-import { AiService } from './ai.service';
+import { AiService } from './ai/ai.service';
 import { Email } from './email/email.component';
 import { Employee } from './employee/employee.component';
 import { Status } from './status/status.component';

apps/demos/Demos/DataGrid/AIColumns/jQuery/service.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import TreeList, { Column, Scrolling, Paging, Ai } from 'devextreme-react/tree-list';
+import TreeList, {
+  Column,
+  Scrolling,
+  Paging,
+  AI,
+} from 'devextreme-react/tree-list';
 import { employees } from './data.ts';
 import { aiIntegration } from './service.ts';
 import Employee from './Employee.tsx';
@@ -67,7 +72,7 @@ export default function App() {
         fixedPosition="right"
         cssClass="ai__cell"
       >
-        <Ai
+        <AI
           mode="auto"
           noDataText="No data"
           prompt="Identify department for each employee. It should be one of the following department types:  'Management', 'Human Resources', 'IT', 'Shipping', 'Support', 'Sales',  'Engineering'. Use 'Engineering' by default."