AI Assistant: add filter value to command default message (DevExpress#33817)

Author: anna-shakhova

packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_index.scss

@@ -59,6 +59,13 @@
   gap: $ai-chat-message-content-gap;
 }
 
+.dx-ai-chat__action-list-item-text {
+  display: -webkit-box;
+  -webkit-line-clamp: $ai-chat-action-list-item-text-max-lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .dx-ai-chat__message-progressbar {
   position: absolute;
   left: 0;

packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss

@@ -2,3 +2,4 @@ $ai-chat-message-gap: 8px;
 $ai-chat-message-content-gap: 4px;
 $ai-chat-message-width: 280px;
 $ai-chat-message-regenerate-button-border-radius: 4px;
+$ai-chat-action-list-item-text-max-lines: 2;

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

@@ -338,11 +338,15 @@ describe('filterValueCommand', () => {
       expect(result.status).toBe('success');
     });
 
-    it('returns failure when option throws', async () => {
+    it('returns failure when applying the filter throws', async () => {
       const instance = await createGrid();
-      jest.spyOn(instance, 'option').mockImplementationOnce(() => {
-        throw new Error('Error');
-      });
+      const original = instance.option.bind(instance) as (...a: unknown[]) => unknown;
+      jest.spyOn(instance, 'option').mockImplementation(((...args: unknown[]) => {
+        if (args[0] === 'filterValue' && args.length > 1) {
+          throw new Error('Error');
+        }
+        return original(...args);
+      }) as never);
       const callbacks = createCallbacks();
 
       const result = await filterValueCommand.execute(instance, callbacks)({
@@ -450,15 +454,15 @@ describe('filterValueCommand', () => {
   });
 
   describe('default message', () => {
-    it('uses `Apply a filter.` when expression is set', async () => {
+    it('appends the human-readable filter text when expression is set', async () => {
       const instance = await createGrid();
       const callbacks = createCallbacks();
 
       await filterValueCommand.execute(instance, callbacks)({
         expression: singleBasic('name', '=', 'Alpha'),
       });
 
-      expect(callbacks.success).toHaveBeenCalledWith('Apply a filter.');
+      expect(callbacks.success).toHaveBeenCalledWith("Apply a filter: [Name] Equals 'Alpha'.");
     });
 
     it('uses `Clear filter.` when expression is null', async () => {
@@ -472,18 +476,22 @@ describe('filterValueCommand', () => {
       expect(callbacks.success).toHaveBeenCalledWith('Clear filter.');
     });
 
-    it('passes the same default message to failure when executability fails', async () => {
+    it('passes the same readable default message to failure when applying the filter fails', async () => {
       const instance = await createGrid();
-      jest.spyOn(instance, 'option').mockImplementationOnce(() => {
-        throw new Error('Error');
-      });
+      const original = instance.option.bind(instance) as (...a: unknown[]) => unknown;
+      jest.spyOn(instance, 'option').mockImplementation(((...args: unknown[]) => {
+        if (args[0] === 'filterValue' && args.length > 1) {
+          throw new Error('Error');
+        }
+        return original(...args);
+      }) as never);
       const callbacks = createCallbacks();
 
       await filterValueCommand.execute(instance, callbacks)({
         expression: singleBasic('name', '=', 'Alpha'),
       });
 
-      expect(callbacks.failure).toHaveBeenCalledWith('Apply a filter.');
+      expect(callbacks.failure).toHaveBeenCalledWith("Apply a filter: [Name] Equals 'Alpha'.");
     });
   });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/commands/filtering.ts

@@ -1,5 +1,7 @@
 import type { SearchOperation } from '@js/common/data.types';
 import type { BasicFilterExpr, FilterExprNode, FilterExprTree } from '@js/common/grids';
+import { when } from '@js/core/utils/deferred';
+import { isDefined } from '@js/core/utils/type';
 import type { CommandResult } from '@ts/grids/grid_core/ai_assistant/types';
 import type { InternalGrid } from '@ts/grids/grid_core/m_types';
 import { z } from 'zod';
@@ -111,12 +113,28 @@ function convertFilterExprToArray(
   return walk(tree.rootId);
 }
 
+const getFilterSuccessMessage = async (
+  component: InternalGrid,
+  filterValue: FilterExprArray,
+): Promise<string> => {
+  try {
+    const filterText: string = await when(
+      // Custom filter operations are omitted as not supported in command
+      component.getView('filterPanelView').getFilterText(filterValue, []),
+    );
+
+    return `Apply a filter: ${filterText}.`;
+  } catch {
+    return 'Apply a filter.';
+  }
+};
+
 export const filterValueCommand = defineGridCommand({
   name: 'filterValue',
   description: 'Apply a filter expression to the grid. Replaces any existing filter; pass null for expression to clear. The expression is a flat node list: {"rootId":id,"nodes":[...]}. Each node is {"id":<unique string like "n1">,"expr":<expression>}, where "expr" is one of: basic {"type":"basic","field":dataField,"operator":op,"value":val}, combined {"type":"combined","combiner":"and"|"or","leftId":nodeId,"rightId":nodeId}, negated {"type":"negated","expressionId":nodeId}. "rootId" MUST be the "id" of the outermost node (the top of the expression tree) and must match one of the node ids exactly — never invent a value like "root". Every "leftId"/"rightId"/"expressionId" must also match a node "id". Ids must be unique and must not form cycles. The "field" is the column dataField (not the caption). Supported operators: "=", "<>", "<", "<=", ">", ">=", "contains", "notcontains", "startswith", "endswith". DATE VALUES: When a value is a date or datetime, always use "YYYY-MM-DDTHH:mm:ss" format without timezone suffix, e.g. "2024-05-10T00:00:00" for midnight or "2024-05-10T14:30:00" for a specific time. Always include the "T" and time part. Do NOT use date-only format like "2024-05-10" without time. Do NOT append "Z" or any timezone offset unless the user explicitly requests it. Do NOT use natural language for dates. To express "not and" / "not or", add a negated node whose expressionId points at a combined node. Example for name = "Alpha" AND age > 10 (rootId is "n3", the combined node): {"rootId":"n3","nodes":[{"id":"n1","expr":{"type":"basic","field":"name","operator":"=","value":"Alpha"}},{"id":"n2","expr":{"type":"basic","field":"age","operator":">","value":10}},{"id":"n3","expr":{"type":"combined","combiner":"and","leftId":"n1","rightId":"n2"}}]}.',
   schema: filterValueCommandSchema,
-  execute: (component, { success, failure }) => (args): Promise<CommandResult> => {
-    const defaultMessage = args.expression === null
+  execute: (component, { success, failure }) => async (args): Promise<CommandResult> => {
+    let defaultMessage = args.expression === null
       ? 'Clear filter.'
       : 'Apply a filter.';
 
@@ -125,12 +143,16 @@ export const filterValueCommand = defineGridCommand({
         ? undefined
         : convertFilterExprToArray(component, args.expression);
 
+      if (isDefined(filterValue)) {
+        defaultMessage = await getFilterSuccessMessage(component, filterValue);
+      }
+
       // Handles remote operations via data controller listening for the `filtering` change
       component.option('filterValue', filterValue);
 
-      return Promise.resolve(success(defaultMessage));
+      return success(defaultMessage);
     } catch {
-      return Promise.resolve(failure(defaultMessage));
+      return failure(defaultMessage);
     }
   },
 });

packages/devextreme/js/__internal/grids/grid_core/ai_chat/ai_chat.test.ts

@@ -394,6 +394,27 @@ describe('AIChat', () => {
         expect(icons[2].textContent).toBe(ABORTED_ITEM_EMOJI);
       });
 
+      it('should expose the full command message via the title attribute (shown on hover)', () => {
+        createAIChat();
+        triggerContentTemplate();
+
+        const chatConfig = getChatConfig();
+        const container = document.createElement('div');
+        const message = "Apply a filter: [Name] Contains 'Health'";
+
+        renderMessageTemplate(chatConfig, {
+          author: { id: AI_ASSISTANT_AUTHOR_ID, name: 'AI Assistant' },
+          text: 'Filter',
+          status: 'success',
+          commands: [{ status: 'success', message }],
+        }, container);
+
+        const $text = container.querySelector(`.${CLASSES.actionListItemText}`);
+
+        expect($text?.textContent).toBe(message);
+        expect($text?.getAttribute('title')).toBe(message);
+      });
+
       it('should not render regenerate button when all commands succeed', () => {
         const onRegenerate = jest.fn();
         createAIChat({ onRegenerate });

packages/devextreme/js/__internal/grids/grid_core/ai_chat/ai_chat.ts

@@ -223,6 +223,7 @@ export class AIChat {
     $('<span>')
       .addClass(CLASSES.actionListItemText)
       .text(command.message)
+      .attr('title', command.message)
       .appendTo($item);
   }
 

packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_panel.ts

@@ -3,6 +3,7 @@ import eventsEngine from '@js/common/core/events/core/events_engine';
 import messageLocalization from '@js/common/core/localization/message';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred, when } from '@js/core/utils/deferred';
 import { isDefined } from '@js/core/utils/type';
 import CheckBox from '@js/ui/check_box';
@@ -311,7 +312,7 @@ export class FilterPanelView extends modules.View {
     return result;
   }
 
-  private getFilterText(filterValue, customOperations) {
+  public getFilterText(filterValue, customOperations): DeferredObj<string> {
     const options = {
       customOperations,
       columns: this._columnsController.getFilteringColumns(),