Implement data display from AI service

Author: Alyar

packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts

@@ -26,7 +26,6 @@ const DATAGRID_DEPRECATED_TEMPLATE_WARNING = 'Specifying grid templates with the
 gridCore.registerModulesOrder([
   'stateStoring',
   'columns',
-  'aiColumn',
   'selection',
   'editorFactory',
   'columnChooser',
@@ -40,6 +39,7 @@ gridCore.registerModulesOrder([
   'adaptivity',
   'data',
   'virtualScrolling',
+  'aiColumn',
   'columnHeaders',
   'filterRow',
   'headerPanel',

packages/devextreme/js/__internal/grids/grid_core/ai_column/m_ai_column_controller.ts

@@ -3,7 +3,7 @@ import type { GenerateGridColumnCommandResult, RequestCallbacks } from '@js/comm
 import type { Callback } from '@js/core/utils/callbacks';
 
 import type { Column, ColumnsController } from '../columns_controller/m_columns_controller';
-import type { DataController } from '../data_controller/m_data_controller';
+import type { DataController, HandleDataChangedArguments } from '../data_controller/m_data_controller';
 import { Controller } from '../m_modules';
 import { AIColumnIntegrationController } from './m_ai_column_integration_controller';
 import { getAICommandColumnDefaultOptions, isAIColumnAutoMode } from './utils';
@@ -15,14 +15,29 @@ export class AIColumnController extends Controller {
 
   private aiColumnIntegrationController!: AIColumnIntegrationController;
 
-  private dataChangedHandler!: (e) => any;
+  private dataSourceChangedHandler!: (e?: HandleDataChangedArguments) => void;
 
   public aiRequestCompleted!: Callback;
 
   public aiRequestRejected!: Callback;
 
   private addAICommandColumn(): void {
-    this.columnsController.addCommandColumn(getAICommandColumnDefaultOptions());
+    const { dataController, aiColumnIntegrationController } = this;
+
+    this.columnsController.addCommandColumn({
+      ...getAICommandColumnDefaultOptions(),
+      calculateCellValue(data) {
+        const key = dataController.keyOf(data);
+        const response = aiColumnIntegrationController.getColumnResponseData(this.name);
+
+        return response?.[key] ?? null;
+      },
+    });
+  }
+
+  private subscribeToDataSourceChanged(): void {
+    this.dataSourceChangedHandler = this.handleDataSourceChanged.bind(this);
+    this.dataController.dataSource()?.changed.add(this.dataSourceChangedHandler);
   }
 
   protected callbackNames(): string[] {
@@ -33,13 +48,11 @@ export class AIColumnController extends Controller {
     this.columnsController = this.getController('columns');
     this.dataController = this.getController('data');
 
-    this.addAICommandColumn();
-
     this.aiColumnIntegrationController = new AIColumnIntegrationController(this.component);
     this.aiColumnIntegrationController.init();
 
-    this.dataChangedHandler = this.handleDataChanged.bind(this);
-    this.dataController.changed.add(this.dataChangedHandler);
+    this.subscribeToDataSourceChanged();
+    this.addAICommandColumn();
   }
 
   private showResults(
@@ -54,9 +67,13 @@ export class AIColumnController extends Controller {
     return this.columnsController.getColumns().filter((col) => col.type === 'ai') as Column[];
   }
 
-  private handleDataChanged(e) {
+  private handleDataSourceChanged(args?: HandleDataChangedArguments): void {
     const aiColumns = this.getAIColumns();
 
+    if (args?.changeType === 'loadError') {
+      return;
+    }
+
     for (const col of aiColumns) {
       if (isAIColumnAutoMode(col)) {
         this.refreshAIColumn(col.name as string);
@@ -96,6 +113,7 @@ export class AIColumnController extends Controller {
     return {
       onComplete: (data): void => {
         this.aiRequestCompleted.fire(data);
+        this.dataController.updateItems();
       },
       onError: (error: Error): void => {
         this.aiRequestRejected.fire(error);
@@ -105,14 +123,16 @@ export class AIColumnController extends Controller {
 
   public clearAIColumn(columnName: string): void {
     this.aiColumnIntegrationController.abortRequest(columnName);
+    this.aiColumnIntegrationController.resetColumnResponseData();
     this.columnsController.columnOption(columnName, 'ai.prompt', '');
+    this.dataController.updateItems();
   }
 
   public getAIColumnText(columnName: string, key: any): void {
 
   }
 
   public dispose(): void {
-    this.dataController.changed.remove(this.dataChangedHandler);
+    this.dataController.dataSource()?.changed.remove(this.dataSourceChangedHandler);
   }
 }

packages/devextreme/js/__internal/grids/grid_core/ai_column/m_ai_column_integration_controller.ts

@@ -15,6 +15,8 @@ import { getDataFromRowItems, reduceDataCachedKeys } from './utils';
 export class AIColumnIntegrationController extends Controller {
   private aborts: Record<string, (() => void) | undefined> = { };
 
+  private responseData: Record<string, Record<PropertyKey, unknown>> = {};
+
   private columnsController!: ColumnsController;
 
   private dataController!: DataController;
@@ -79,8 +81,8 @@ export class AIColumnIntegrationController extends Controller {
     const keyField = this.dataController.key();
     const reducedData = reduceDataCachedKeys(data, cachedResponse, keyField);
     const areAllDataCached = Object.keys(reducedData).length === 0;
+
     if (areAllDataCached) {
-      this.showResult(columnName, {}, cachedResponse);
       return;
     }
 
@@ -103,14 +105,12 @@ export class AIColumnIntegrationController extends Controller {
     this.abortRequest(columnName);
   }
 
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  private showResult(
+  private saveResult(
     columnName: string,
     response: Record<PropertyKey, unknown>,
-    cachedData: Record<PropertyKey, string>,
+    // cachedData: Record<PropertyKey, string>,
   ): void {
-    // TODO: Implement result display logic
-    const mergedData = { ...cachedData, ...response };
+    this.responseData[columnName] = response;
   }
 
   private getAICommandCallbacks(
@@ -129,10 +129,10 @@ export class AIColumnIntegrationController extends Controller {
           };
 
           this.executeAction('onAIColumnResponseReceived', args);
-          this.showResult(
+          this.saveResult(
             columnName,
             finalResponse.data,
-            cachedResponse,
+            // cachedResponse,
           );
           this.processCommandCompletion(columnName);
           callBacks?.onComplete?.(finalResponse);
@@ -189,4 +189,12 @@ export class AIColumnIntegrationController extends Controller {
     super.dispose();
     Object.keys(this.aborts).forEach((columnName) => this.abortRequest(columnName));
   }
+
+  public getColumnResponseData(columnName: string): Record<PropertyKey, unknown> | null {
+    return this.responseData[columnName] ?? null;
+  }
+
+  public resetColumnResponseData(): void {
+    this.responseData = {};
+  }
 }

packages/devextreme/js/__internal/grids/grid_core/ai_column/utils.ts

@@ -4,7 +4,7 @@ import type { Column } from '../columns_controller/m_columns_controller';
 import type { Item, UserData } from '../data_controller/m_data_controller';
 import { AI_COLUMN_NAME, CLASSES } from './const';
 
-export const getAICommandColumnDefaultOptions = (): unknown => ({
+export const getAICommandColumnDefaultOptions = (): object => ({
   type: AI_COLUMN_NAME,
   command: AI_COLUMN_NAME,
   cssClass: CLASSES.aiColumn,

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts

@@ -92,6 +92,7 @@ export interface Column extends ColumnBase {
   visibleWidth?: string | number;
   hidingPriority?: number;
   ai?: ColumnAIOptions;
+  command?: string;
 }
 
 export class ColumnsController extends modules.Controller {
@@ -1740,10 +1741,13 @@ export class ColumnsController extends modules.Controller {
       extend(true, calculatedColumnOptions, {
         allowSorting: false,
         allowGrouping: false,
-        calculateCellValue() {
-          return null;
-        },
       });
+
+      if (columnOptions?.type !== AI_COLUMN_NAME) {
+        calculatedColumnOptions.calculateCellValue = function () {
+          return null;
+        };
+      }
     }
 
     if (bandColumn) {

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -20,6 +20,7 @@ import type { SelectionController } from '@ts/grids/grid_core/selection/m_select
 import type { StateStoringController } from '@ts/grids/grid_core/state_storing/m_state_storing_core';
 import type { ValidatingController } from '@ts/grids/grid_core/validating/m_validating';
 
+import { AI_COLUMN_NAME } from '../ai_column/const';
 import modules from '../m_modules';
 import type {
   Controllers, Module,
@@ -63,7 +64,7 @@ const changePaging = function (that, optionName, value) {
   return 0;
 };
 
-interface HandleDataChangedArguments {
+export interface HandleDataChangedArguments {
   changeType?: 'refresh' | 'update' | 'loadError';
   isDelayed?: boolean;
   isLiveUpdate?: boolean;
@@ -803,7 +804,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
     for (let i = 0; i < columns.length; i++) {
       const column = columns[i];
       value = isModified ? undefined : null;
-      if (!column.command) {
+      if (!column.command || column.type === AI_COLUMN_NAME) {
         if (column.calculateCellValue) {
           value = column.calculateCellValue(data);
         } else if (column.dataField) {

packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts

@@ -29,10 +29,10 @@ import type { ResizingController } from '@ts/grids/grid_core/views/m_grid_view';
 
 import { CLASSES as REORDERING_CLASSES } from '../columns_resizing_reordering/const';
 import type { EditingController } from '../editing/m_editing';
-import type { EditorFactory } from '../editor_factory/m_editor_factory';
 import gridCoreUtils from '../m_utils';
 import { CLASSES } from '../sticky_columns/const';
 import { ColumnsView } from './m_columns_view';
+import { getCellText } from './utils';
 
 const ROWS_VIEW_CLASS = 'rowsview';
 const CONTENT_CLASS = 'content';
@@ -911,7 +911,7 @@ export class RowsView extends ColumnsView {
     parameters.data = data;
     parameters.rowType = row.rowType;
     parameters.values = row.values;
-    parameters.text = !column.command ? gridCoreUtils.formatValue(displayValue, column) : '';
+    parameters.text = getCellText(column, displayValue);
     parameters.rowIndex = row.rowIndex;
     parameters.summaryItems = summaryCells && summaryCells[options.columnIndex];
     parameters.resized = column.resizedCallbacks;

packages/devextreme/js/__internal/grids/grid_core/views/utils.ts

@@ -0,0 +1,12 @@
+import { AI_COLUMN_NAME } from '../ai_column/const';
+import type { Column } from '../columns_controller/m_columns_controller';
+import gridCoreUtils from '../m_utils';
+
+export const getCellText = (
+  column: Column,
+  displayValue: unknown,
+): string => (
+  !column.command || column.type === AI_COLUMN_NAME
+    ? gridCoreUtils.formatValue(displayValue, column) as string
+    : ''
+);