dxDataGrid - AI Assistant: Implement partial re-rendering of messages when their status is updated (DevExpress#33531)

Co-authored-by: Alyar <>

Author: Alyar666

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_controller.test.ts

@@ -77,15 +77,13 @@ describe('AIAssistantController', () => {
   });
 
   describe('getMessageDataSource', () => {
-    it('should return dataSource with store and reshapeOnPush', () => {
+    it('should return dataSource with store', () => {
       const controller = createController();
       const dataSource = controller.getMessageDataSource() as {
         store: ArrayStore<Message, string>;
-        reshapeOnPush: boolean;
       };
 
       expect(dataSource.store).toBeDefined();
-      expect(dataSource.reshapeOnPush).toBe(true);
     });
   });
 
@@ -111,7 +109,8 @@ describe('AIAssistantController', () => {
           id: expect.stringContaining(AI_ASSISTANT_AUTHOR_ID),
           timestamp: expectedTimestamp,
           author: AI_ASSISTANT_AUTHOR,
-          text: 'Generate values',
+          headerText: 'Request in progress',
+          text: MessageStatus.Pending,
           status: MessageStatus.Pending,
         }),
       ]);
@@ -176,6 +175,7 @@ describe('AIAssistantController', () => {
         text: 'Generate values',
         timestamp: '2026-04-16T10:00:00.000Z',
       } as Message);
+      promise.catch(() => {});
 
       sendRequestCallbacks.onError?.(new Error('Network error'));
 
@@ -184,7 +184,9 @@ describe('AIAssistantController', () => {
       expect(messages).toEqual([
         expect.objectContaining({
           status: MessageStatus.Failure,
-          text: 'Network error',
+          headerText: 'Failed to process request',
+          text: MessageStatus.Failure,
+          errorText: 'Network error',
         }),
       ]);
 
@@ -201,6 +203,7 @@ describe('AIAssistantController', () => {
         text: 'Generate values',
         timestamp: '2026-04-16T10:00:00.000Z',
       } as Message);
+      promise.catch(() => {});
 
       const response = {} as ExecuteGridAssistantCommandResult;
 
@@ -213,7 +216,9 @@ describe('AIAssistantController', () => {
       expect(messages).toEqual([
         expect.objectContaining({
           status: MessageStatus.Failure,
-          text: 'Default error message',
+          headerText: 'Failed to process request',
+          text: MessageStatus.Failure,
+          errorText: 'Default error message',
         }),
       ]);
 

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view_controller.integration.test.ts

@@ -6,13 +6,28 @@ import {
   it,
   jest,
 } from '@jest/globals';
+import type {
+  ExecuteGridAssistantCommandParams,
+  ExecuteGridAssistantCommandResult,
+  RequestCallbacks,
+  Response as SendRequestResult,
+} from '@js/common/ai-integration';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import type { Message } from '@js/ui/chat';
+import { AIIntegration } from '@ts/core/ai_integration/core/ai_integration';
 
 import {
   afterTest,
   beforeTest,
   createDataGrid,
   type DataGridInstance,
+  flushAsync,
 } from '../../__tests__/__mock__/helpers/utils';
+import { CLASSES } from '../../ai_chat/const';
+import { MessageStatus } from '../const';
+import { GridCommands } from '../grid_commands';
+import type { CommandResult } from '../types';
 
 const AI_ASSISTANT_BUTTON_SELECTOR = '.dx-datagrid-ai-assistant-button';
 const HIDDEN_CLASS = 'dx-hidden';
@@ -33,6 +48,44 @@ const isAiAssistantButtonVisible = (instance: DataGridInstance): boolean => {
   return !button.closest(`.${HIDDEN_CLASS}`);
 };
 
+const createMockAIIntegration = (): {
+  aiIntegration: AIIntegration;
+  getLastCallbacks: () => RequestCallbacks<ExecuteGridAssistantCommandResult>;
+} => {
+  let lastCallbacks: RequestCallbacks<ExecuteGridAssistantCommandResult> = {};
+
+  const aiIntegration = new AIIntegration({
+    sendRequest(): SendRequestResult {
+      return {
+        promise: Promise.resolve('{}'),
+        abort: jest.fn(),
+      };
+    },
+  });
+
+  aiIntegration.executeGridAssistant = jest.fn((
+    params: ExecuteGridAssistantCommandParams,
+    callbacks: RequestCallbacks<ExecuteGridAssistantCommandResult>,
+  ): (() => void) => {
+    lastCallbacks = callbacks;
+    return jest.fn();
+  });
+
+  return {
+    aiIntegration,
+    getLastCallbacks: () => lastCallbacks,
+  };
+};
+
+const findMessageElements = (): dxElementWrapper => $(`.${CLASSES.aiChat}`).find(`.${CLASSES.message}`);
+
+const getMessageStatusClass = ($message: dxElementWrapper): string => {
+  if ($message.hasClass(CLASSES.messagePending)) return MessageStatus.Pending;
+  if ($message.hasClass(CLASSES.messageSuccess)) return MessageStatus.Success;
+  if ($message.hasClass(CLASSES.messageError)) return MessageStatus.Failure;
+  return '';
+};
+
 describe('AIAssistantViewController', () => {
   beforeEach(beforeTest);
   afterEach(afterTest);
@@ -128,4 +181,181 @@ describe('AIAssistantViewController', () => {
       expect(button?.getAttribute('title')).toBe('My Custom Title');
     });
   });
+
+  describe('message rendering', () => {
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let validateSpy;
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let executeCommandsSpy;
+
+    beforeEach(() => {
+      validateSpy = jest.spyOn(GridCommands.prototype, 'validate')
+        .mockReturnValue(true);
+      executeCommandsSpy = jest.spyOn(GridCommands.prototype, 'executeCommands')
+        .mockResolvedValue([
+          { status: 'success', message: 'Sorted by Name ascending' },
+        ] as CommandResult[]);
+    });
+
+    afterEach(() => {
+      validateSpy.mockRestore();
+      executeCommandsSpy.mockRestore();
+    });
+
+    const createDataGridWithAIAssistant = async (): Promise<{
+      instance: DataGridInstance;
+      getLastCallbacks: () => RequestCallbacks<ExecuteGridAssistantCommandResult>;
+    }> => {
+      const { aiIntegration, getLastCallbacks } = createMockAIIntegration();
+
+      const { instance } = await createDataGrid({
+        dataSource: [
+          { id: 1, name: 'Name 1' },
+          { id: 2, name: 'Name 2' },
+        ],
+        columns: [
+          { dataField: 'id', caption: 'ID', dataType: 'number' },
+          { dataField: 'name', caption: 'Name', dataType: 'string' },
+        ],
+        aiAssistant: { enabled: true, aiIntegration, title: 'AI Assistant' },
+      });
+
+      // Open the AI assistant popup so Chat renders into the DOM
+      const viewController = instance.getController('aiAssistantViewController');
+
+      await viewController.toggle();
+      jest.runAllTimers();
+
+      return { instance, getLastCallbacks };
+    };
+
+    const sendAIRequest = (
+      instance: DataGridInstance,
+      text: string,
+    ): void => {
+      const controller = instance.getController('aiAssistant');
+
+      controller.sendRequestToAI({
+        author: { id: 'user', name: 'User' },
+        text,
+        timestamp: new Date().toISOString(),
+      } as Message).catch(() => {});
+      jest.runAllTimers();
+    };
+
+    it('should render pending message after sendRequestToAI', async () => {
+      const { instance } = await createDataGridWithAIAssistant();
+
+      sendAIRequest(instance, 'Sort by Name');
+
+      const $messages = findMessageElements();
+
+      expect($messages.length).toBe(1);
+      expect(getMessageStatusClass($messages.eq(0))).toBe(MessageStatus.Pending);
+    });
+
+    it('should render success message with command list after AI completes', async () => {
+      const { instance, getLastCallbacks } = await createDataGridWithAIAssistant();
+
+      sendAIRequest(instance, 'Sort by Name');
+
+      getLastCallbacks().onComplete?.({
+        actions: [{ name: 'sort', args: { column: 'Name' } }],
+      });
+      await flushAsync();
+      await flushAsync();
+
+      const $messages = findMessageElements();
+
+      expect($messages.length).toBe(1);
+      expect(getMessageStatusClass($messages.eq(0))).toBe(MessageStatus.Success);
+
+      const $commandItems = $messages.eq(0).find(`.${CLASSES.actionListItem}`);
+
+      expect($commandItems.length).toBe(1);
+      expect($commandItems.find(`.${CLASSES.actionListItemText}`).text())
+        .toBe('Sorted by Name ascending');
+    });
+
+    it('should render failure message with error text after AI errors', async () => {
+      const { instance, getLastCallbacks } = await createDataGridWithAIAssistant();
+
+      sendAIRequest(instance, 'Sort by Name');
+
+      getLastCallbacks().onError?.(new Error('Network error'));
+      await flushAsync();
+
+      const $messages = findMessageElements();
+
+      expect($messages.length).toBe(1);
+      expect(getMessageStatusClass($messages.eq(0))).toBe(MessageStatus.Failure);
+      expect($messages.eq(0).find(`.${CLASSES.messageErrorText}`).text())
+        .toBe('Network error');
+    });
+
+    it('should render multiple messages with correct statuses after sequential requests', async () => {
+      const { instance, getLastCallbacks } = await createDataGridWithAIAssistant();
+
+      // First request
+      sendAIRequest(instance, 'Sort by Name');
+
+      const firstCallbacks = getLastCallbacks();
+
+      firstCallbacks.onComplete?.({
+        actions: [{ name: 'sort', args: { column: 'Name' } }],
+      });
+      await flushAsync();
+      await flushAsync();
+
+      // Second request
+      sendAIRequest(instance, 'Filter by Status');
+
+      const $messages = findMessageElements();
+
+      expect($messages.length).toBe(2);
+      expect(getMessageStatusClass($messages.eq(0))).toBe(MessageStatus.Success);
+      expect($messages.eq(0).find(`.${CLASSES.actionListItem}`).length).toBe(1);
+      expect(getMessageStatusClass($messages.eq(1))).toBe(MessageStatus.Pending);
+    });
+
+    it('should only re-render the updated message', async () => {
+      const { instance, getLastCallbacks } = await createDataGridWithAIAssistant();
+
+      // First request — complete it
+      sendAIRequest(instance, 'Sort by Name');
+
+      const firstCallbacks = getLastCallbacks();
+
+      firstCallbacks.onComplete?.({
+        actions: [{ name: 'sort', args: { column: 'Name' } }],
+      });
+      await flushAsync();
+      await flushAsync();
+
+      // Second request — pending
+      sendAIRequest(instance, 'Filter by Status');
+
+      const $messagesBefore = findMessageElements();
+
+      expect($messagesBefore.length).toBe(2);
+
+      const firstMessageNode = $messagesBefore.get(0);
+
+      // Complete second request — only message 2 should re-render
+      const secondCallbacks = getLastCallbacks();
+
+      secondCallbacks.onComplete?.({
+        actions: [{ name: 'filter', args: { column: 'Status' } }],
+      });
+      await flushAsync();
+      await flushAsync();
+
+      const $messagesAfter = findMessageElements();
+
+      expect($messagesAfter.length).toBe(2);
+      expect($messagesAfter.get(0)).toBe(firstMessageNode);
+      expect(getMessageStatusClass($messagesAfter.eq(1)))
+        .toBe(MessageStatus.Success);
+    });
+  });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_controller.ts

@@ -1,4 +1,5 @@
 import type { ExecuteGridAssistantCommandResult } from '@js/common/ai-integration';
+import messageLocalization from '@js/common/core/localization/message';
 import { ArrayStore } from '@js/common/data';
 import Guid from '@js/core/guid';
 import { isString } from '@js/core/utils/type';
@@ -22,6 +23,11 @@ export class AIAssistantController extends Controller {
 
   private aiAssistantIntegrationController?: AIAssistantIntegrationController;
 
+  // TODO: need to implement method for getting customized response title
+  private getCustomizedResponseTitle(): string {
+    return '';
+  }
+
   private updateAIMessage(messageId: string, data: Partial<Message>): void {
     this.messageStore?.push([
       {
@@ -62,8 +68,13 @@ export class AIAssistantController extends Controller {
           id: aiMessageId,
           timestamp: parsedTimestamp,
           author: AI_ASSISTANT_AUTHOR,
-          text: message.text,
+          headerText: messageLocalization.format('dxDataGrid-aiAssistantProcessingMessageHeader'),
           status: MessageStatus.Pending,
+          // The text field is currently used as a workaround to trigger a status update.
+          // We have to update this built-in property to force the message to re-render.
+          // If dxChat supports updating custom fields via the Store Push API in the future,
+          // we will be able to remove this text update workaround.
+          text: MessageStatus.Pending,
         },
       },
     ]);
@@ -77,15 +88,27 @@ export class AIAssistantController extends Controller {
       : MessageStatus.Success;
 
     this.updateAIMessage(messageId, {
-      status: messageStatus,
+      headerText: this.getCustomizedResponseTitle(),
       commands,
+      status: messageStatus,
+      // The text field is currently used as a workaround to trigger a status update.
+      // We have to update this built-in property to force the message to re-render.
+      // If dxChat supports updating custom fields via the Store Push API in the future,
+      // we will be able to remove this text update workaround.
+      text: messageStatus,
     });
   }
 
   private failAIMessage(messageId: string, error: Error): void {
     this.updateAIMessage(messageId, {
+      headerText: messageLocalization.format('dxDataGrid-aiAssistantErrorMessageHeader'),
+      errorText: error.message,
       status: MessageStatus.Failure,
-      text: error.message,
+      // The text field is currently used as a workaround to trigger a status update.
+      // We have to update this built-in property to force the message to re-render.
+      // If dxChat supports updating custom fields via the Store Push API in the future,
+      // we will be able to remove this text update workaround.
+      text: MessageStatus.Failure,
     });
   }
 
@@ -102,7 +125,6 @@ export class AIAssistantController extends Controller {
   public getMessageDataSource(): DataSourceLike<Message> {
     return {
       store: this.messageStore,
-      reshapeOnPush: true,
     };
   }