AI Column: Write JS Framework demos, DataGrid, Angular (#31745)

Author: dmirgaev

apps/demos/Demos/DataGrid/AIColumns/Angular/app/ai.service.ts

@@ -0,0 +1,106 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import { Injectable } from '@angular/core';
+import notify from 'devextreme/ui/notify';
+import {
+  AIIntegration,
+  type RequestParams,
+  type Response,
+} from 'devextreme-angular/common/ai-integration';
+
+type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const RATE_LIMIT_RETRY_DELAY_MS = 30000;
+const MAX_PROMPT_SIZE = 5000;
+
+const service = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await service.chat.completions.create(params, { signal });
+  const result = response.choices[0].message?.content;
+
+  if (!result) {
+    throw new Error('AI response returned empty content');
+  }
+
+  return result;
+}
+
+async function getAIResponseRecursive(messages: AIMessage[], signal: AbortSignal): Promise<string> {
+  return getAIResponse(messages, signal)
+    .catch(async (error) => {
+      if (!error.message.includes('Connection error')) {
+        return Promise.reject(error);
+      }
+
+      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, RATE_LIMIT_RETRY_DELAY_MS));
+
+      return getAIResponseRecursive(messages, signal);
+    });
+}
+
+const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const isValidRequest = JSON.stringify(prompt.user).length < MAX_PROMPT_SIZE;
+
+    if (!isValidRequest) {
+      return {
+        promise: Promise.reject(new Error('Request is too large')),
+        abort: () => {},
+      };
+    }
+
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    if (!prompt.user || !prompt.system) {
+      throw new Error('Invalid prompt data');
+    }
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system },
+      { role: 'user', content: prompt.user },
+    ];
+
+    const promise = getAIResponseRecursive(aiPrompt, signal);
+
+    const result: Response = {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+
+    return result;
+  },
+});
+
+@Injectable()
+export class AiService {
+  getAiIntegration() {
+    return aiIntegration;
+  }
+}

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

@@ -0,0 +1,3 @@
+::ng-deep #gridContainer .ai__cell {
+  background-color: var(--dx-datagrid-row-alternation-bg);
+}

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

@@ -0,0 +1,78 @@
+<dx-data-grid
+  id="gridContainer"
+  keyExpr="ID"
+  [dataSource]="vehicles"
+  [showBorders]="true"
+  [aiIntegration]="aiIntegration"
+  (onAIColumnRequestCreating)="onAIColumnRequestCreating($event)"
+>
+  <dxo-data-grid-grouping [contextMenuEnabled]="false" />
+  <dxo-data-grid-paging [pageSize]="10" />
+
+  <dxi-data-grid-column
+    dataField="TrademarkName"
+    caption="Trademark"
+    [width]="200"
+    cellTemplate="trademarkTemplate"
+  />
+  <div *dxTemplate="let model of 'trademarkTemplate'">
+    <trademark
+      [id]="model.data.ID"
+      [name]="model.data.Name"
+      [trademarkName]="model.data.TrademarkName"
+      (showInfo)="showInfo(model.data)"
+    />
+  </div>
+  <dxi-data-grid-column
+    dataField="Price"
+    format="currency"
+    alignment="left"
+    [width]="100"
+  />
+  <dxi-data-grid-column
+    dataField="CategoryName"
+    caption="Category"
+    [minWidth]="180"
+    cellTemplate="categoryTemplate"
+  />
+  <div *dxTemplate="let model of 'categoryTemplate'">
+    <category [category]="model.data.CategoryName" />
+  </div>
+  <dxi-data-grid-column dataField="Modification" [width]="180" />
+  <dxi-data-grid-column dataField="Horsepower" [width]="140" />
+  <dxi-data-grid-column
+    dataField="BodyStyleName"
+    caption="Body Style"
+    [width]="180"
+  />
+  <dxi-data-grid-column
+    name="AI Column"
+    caption="AI Column"
+    cssClass="ai__cell"
+    type="ai"
+    [fixed]="true"
+    fixedPosition="right"
+    [width]="200"
+  >
+    <dxo-data-grid-ai
+      prompt="Identify the country where this vehicle model is originally manufactured or developed, based on its brand, model, and specifications."
+      mode="auto"
+      noDataText="No data"
+    />
+  </dxi-data-grid-column>
+</dx-data-grid>
+
+<dx-popup
+  title="Image Info"
+  [width]="360"
+  [height]="260"
+  [(visible)]="popupVisible"
+  [dragEnabled]="false"
+  [hideOnOutsideClick]="true"
+  (onHiding)="hideInfo()"
+>
+  <dxo-position at="center" my="center" collision="fit" />
+  <div *dxTemplate="let _ of 'content'">
+    <license-info *ngIf="currentVehicle" [vehicle]="currentVehicle" />
+  </div>
+</dx-popup>

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

@@ -0,0 +1,77 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+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 { Trademark } from './trademark/trademark.component';
+import { Category } from './category/category.component';
+import { LicenseInfo } from './license-info/license-info.component';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config?.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
+  providers: [Service, AiService],
+})
+export class AppComponent {
+  vehicles: Vehicle[];
+
+  popupVisible = false;
+
+  currentVehicle: Vehicle | null = null;
+
+  aiIntegration: AIIntegration;
+
+  constructor(service: Service, aiService: AiService) {
+    this.vehicles = service.getVehicles();
+    this.aiIntegration = aiService.getAiIntegration();
+  }
+
+  showInfo(vehicle: Vehicle) {
+    this.currentVehicle = vehicle;
+    this.popupVisible = true;
+  }
+
+  hideInfo() {
+    this.popupVisible = false;
+  }
+
+  onAIColumnRequestCreating(e: { data: Partial<Vehicle>[] }) {
+    e.data = e.data.map((item) => ({
+      ID: item.ID,
+      TrademarkName: item.TrademarkName,
+      Name: item.Name,
+      Modification: item.Modification,
+    }));
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxDataGridModule,
+    DxPopupModule,
+  ],
+  declarations: [
+    AppComponent,
+    Trademark,
+    Category,
+    LicenseInfo,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);