@progress/kendo-angular-grid 21.0.0-develop.12 → 21.0.0-develop.14

package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs

@@ -7,9 +7,12 @@ import { AIPromptComponent, OutputViewComponent, PromptViewComponent, AIPromptCu
 import { HttpClient, HttpRequest } from '@angular/common/http';
 import { ContextService } from './../../../../common/provider.service';
 import { ColumnInfoService } from './../../../../common/column-info.service';
-import { GridToolbarAIResponseSuccessEvent, GridToolbarAIResponseErrorEvent } from './models';
+import { GridAIAssistantResponseSuccessEvent, GridAIAssistantResponseErrorEvent } from './models';
 import { NgIf } from '@angular/common';
 import { convertDateStringsInFilter, highlightBy } from './utils';
+import { isCheckboxColumn } from '../../../../columns/column-base';
+import { CommandColumnComponent } from '../../../../columns/command-column.component';
+import { isPresent } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common/http";
 import * as i2 from "./../../../../common/provider.service";
@@ -34,7 +37,11 @@ export class AiAssistantComponent {
     currentRequestSubscription = null;
     //Remove this when the AI Assistant has a built-in loading indicator
     loadingOutput = { id: 'k-loading-item', output: '', prompt: '' };
+    // flat columns used for highlight utilities (expects { field })
     columns = [];
+    leafColumns = [];
+    // nested tree representing the actual Grid column components sent to the AI service
+    columnsTree = [];
     idCounter = 0;
     constructor(http, ctx, columnInfoService) {
         this.http = http;
@@ -42,7 +49,36 @@ export class AiAssistantComponent {
         this.columnInfoService = columnInfoService;
     }
     ngAfterViewInit() {
-        this.columns = this.columnInfoService.leafNamedColumns.map((col) => ({ field: col.field }));
+        // Build a nested GridColumnDescriptor tree based on the actual Grid columns structure.
+        // This includes root columns and their nested children (for ColumnGroup and SpanColumn).
+        const rootColumns = this.ctx?.grid?.columnList?.rootColumns() || [];
+        const buildDescriptor = (col) => {
+            const hasChildren = Boolean(col.hasChildren && col.childrenArray?.length);
+            const descriptor = {
+                id: col.id,
+                field: col.field
+            };
+            if (hasChildren) {
+                descriptor.header = col.displayTitle;
+                descriptor.columns = col.childrenArray.map((c) => buildDescriptor(c));
+            }
+            // For special columns that don't have a field, emit an optional type token
+            // so the AI service knows how to treat them (checkbox/command/reorder)
+            if (!col.field) {
+                if (isCheckboxColumn(col)) {
+                    descriptor.type = 'checkbox';
+                }
+                else if (col instanceof CommandColumnComponent) {
+                    descriptor.type = 'command';
+                }
+            }
+            return descriptor;
+        };
+        this.columnsTree = rootColumns.map((col) => buildDescriptor(col));
+        // Preserve a flat columns array (fields) for highlight utilities.
+        // Use leafNamedColumns as the canonical list of leaf columns with display titles.
+        this.leafColumns = this.columnInfoService.leafNamedColumns || [];
+        this.columns = this.leafColumns.map((col) => ({ field: col.field }));
     }
     ngOnDestroy() {
         this.unsubscribeCurrentRequest();
@@ -66,7 +102,8 @@ export class AiAssistantComponent {
             this.lastMessage = ev.prompt;
         }
         this.requestData = {
-            columns: this.columns,
+            // send nested tree to AI service
+            columns: this.columnsTree,
             promptMessage: ev.prompt,
             url: this.requestUrl,
             requestOptions: {
@@ -110,30 +147,22 @@ export class AiAssistantComponent {
             this.aiToolDirective.emitOpenClose = true;
             this.aiToolDirective.toggleWindow();
         }
-        const responseBody = response.body;
-        const responseSuccessEvent = new GridToolbarAIResponseSuccessEvent(response);
+        const responseBody = response.body || { commands: [] };
+        const responseSuccessEvent = new GridAIAssistantResponseSuccessEvent(response);
         this.aiToolDirective.responseSuccess.emit(responseSuccessEvent);
         if (responseSuccessEvent.isDefaultPrevented()) {
             this.deleteLoadingOutput();
             return;
         }
-        const isFilterable = Boolean(this.ctx.grid.filterable);
-        const isSortable = Boolean(this.ctx.grid.sortable);
-        const isGroupable = Boolean(this.ctx.grid.groupable);
-        if (isFilterable && responseBody.filter) {
-            this.processFilterResponse(responseBody.filter);
-        }
-        if (isSortable && responseBody.sort) {
-            this.processArrayResponse(responseBody.sort, this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
-        }
-        if (isGroupable && responseBody.group) {
-            this.processArrayResponse(responseBody.group, this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
-        }
-        if (this.ctx.highlightDirective && responseBody.highlight) {
-            this.processHighlightResponse(responseBody.highlight);
+        const messages = [];
+        // Include optional top-level message from the response
+        if (responseBody.message) {
+            messages.push(responseBody.message);
         }
+        // Execute received commands sequentially and collect messages.
+        this.processCommands(responseBody.commands || [], messages);
         const responseContentStart = [`${this.ctx.localization.get('aiAssistantOutputCardBodyContent')} \n`];
-        const responseContentBody = responseBody.messages
+        const responseContentBody = messages
             .map((output, idx) => `${idx + 1} ${output}`)
             .join('\n');
         const output = {
@@ -146,7 +175,7 @@ export class AiAssistantComponent {
         this.aiToolDirective.promptOutputs.unshift(output);
     }
     handleError(error) {
-        const responseErrorEvent = new GridToolbarAIResponseErrorEvent(error);
+        const responseErrorEvent = new GridAIAssistantResponseErrorEvent(error);
         this.aiToolDirective.responseError.emit(responseErrorEvent);
         if (responseErrorEvent.isDefaultPrevented()) {
             this.deleteLoadingOutput();
@@ -183,12 +212,468 @@ export class AiAssistantComponent {
             updateGrid(mergedArray);
         }
     }
-    processHighlightResponse(highlight) {
-        if (highlight.length === 0) {
-            this.ctx.highlightDirective['setState']([]);
+    processCommands(commands, messages) {
+        if (!commands?.length) {
+            return;
+        }
+        const isFilterable = Boolean(this.ctx.grid.filterable);
+        const isSortable = Boolean(this.ctx.grid.sortable);
+        const isGroupable = Boolean(this.ctx.grid.groupable);
+        const findColumnById = (id) => this.ctx.grid.columnList.toArray().find((c) => c.id === id);
+        const updateColumnHierarchy = (column, updater) => {
+            const changed = [];
+            const queue = [column];
+            while (queue.length) {
+                const current = queue.shift();
+                if (!current) {
+                    continue;
+                }
+                const didChange = updater(current);
+                if (didChange) {
+                    changed.push(current);
+                }
+                if (current.hasChildren && current.childrenArray?.length) {
+                    queue.push(...current.childrenArray);
+                }
+            }
+            return changed;
+        };
+        commands.forEach((cmd) => {
+            let displayMessage = cmd.message || '';
+            if (this.isColumnCommand(cmd.type)) {
+                if (cmd.id) {
+                    const column = findColumnById(cmd.id);
+                    const replacement = this.getColumnReplacement(column);
+                    displayMessage = this.replaceQuotedColumnId(displayMessage, replacement);
+                }
+            }
+            messages.push(displayMessage);
+            switch (cmd.type) {
+                case 'GridSort':
+                    if (!isSortable) {
+                        break;
+                    }
+                    // cmd.sort is a SortDescriptor - replace or merge with existing sort
+                    this.processArrayResponse([cmd.sort], this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
+                    break;
+                case 'GridClearSort':
+                    if (!isSortable) {
+                        break;
+                    }
+                    this.ctx.grid.sortChange.next([]);
+                    break;
+                case 'GridFilter':
+                    if (!isFilterable) {
+                        break;
+                    }
+                    this.processFilterResponse(cmd.filter);
+                    break;
+                case 'GridClearFilter':
+                    if (!isFilterable) {
+                        break;
+                    }
+                    this.ctx.grid.filterChange.next(undefined);
+                    break;
+                case 'GridGroup':
+                    if (!isGroupable) {
+                        break;
+                    }
+                    this.processArrayResponse([cmd.group], this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
+                    break;
+                case 'GridClearGroup':
+                    if (!isGroupable) {
+                        break;
+                    }
+                    this.ctx.grid.groupChange.next([]);
+                    break;
+                case 'GridHighlight':
+                    if (!this.ctx.highlightDirective) {
+                        break;
+                    }
+                    this.processHighlightResponse([cmd.highlight]);
+                    break;
+                case 'GridClearHighlight':
+                    if (!this.ctx.highlightDirective) {
+                        break;
+                    }
+                    this.ctx.highlightDirective['setState']([]);
+                    break;
+                case 'GridSelect': {
+                    this.processSelectionResponse([cmd.select], messages);
+                    break;
+                }
+                case 'GridClearSelect': {
+                    const selectionInstance = this.getSelectionInstance();
+                    if (!selectionInstance) {
+                        this.updateLastMessage(messages, this.ctx.localization?.get('aiAssistantSelectionNotEnabled'));
+                        break;
+                    }
+                    this.applySelectionState(selectionInstance, []);
+                    break;
+                }
+                case 'GridColumnResize': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    // parse size (accept numeric or strings like '200px')
+                    let newWidth;
+                    if (typeof cmd.size === 'number') {
+                        newWidth = cmd.size;
+                    }
+                    else if (typeof cmd.size === 'string') {
+                        const numericPart = parseFloat(cmd.size);
+                        if (!isNaN(numericPart)) {
+                            newWidth = numericPart;
+                        }
+                    }
+                    if (typeof newWidth === 'number') {
+                        const oldWidth = col.width;
+                        // set the column width (ColumnBase.width setter handles string -> number)
+                        col.width = newWidth;
+                        // emit columnResize event with ColumnResizeArgs[]
+                        const args = [{ column: col, oldWidth: oldWidth, newWidth: newWidth }];
+                        this.ctx.grid.columnResize.emit(args);
+                    }
+                    break;
+                }
+                case 'GridColumnReorder': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    const newIndex = Number(cmd.position);
+                    if (!isNaN(newIndex)) {
+                        // call grid API to reorder the column - this will trigger columnReorder event internally
+                        this.ctx.grid.reorderColumn(col, newIndex, { before: true });
+                    }
+                    break;
+                }
+                case 'GridColumnShow':
+                case 'GridColumnHide': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    const targetHidden = cmd.type === 'GridColumnHide';
+                    const changed = updateColumnHierarchy(col, (current) => {
+                        if (current.hidden === targetHidden) {
+                            return false;
+                        }
+                        current.hidden = targetHidden;
+                        return true;
+                    });
+                    if (changed.length) {
+                        this.columnInfoService.changeVisibility(changed);
+                    }
+                    break;
+                }
+                case 'GridColumnLock':
+                case 'GridColumnUnlock': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    const targetLocked = cmd.type === 'GridColumnLock';
+                    const changed = updateColumnHierarchy(col, (current) => {
+                        if (current.locked === targetLocked) {
+                            return false;
+                        }
+                        current.locked = targetLocked;
+                        return true;
+                    });
+                    if (changed.length) {
+                        this.columnInfoService.changeLocked(changed);
+                    }
+                    break;
+                }
+                case 'GridPage': {
+                    this.processPageCommand(cmd);
+                    break;
+                }
+                case 'GridPageSize': {
+                    this.processPageSizeCommand(cmd);
+                    break;
+                }
+                case 'GridExportExcel': {
+                    this.runExportWithFileName(this.ctx.excelComponent, cmd.fileName, () => this.ctx.grid.saveAsExcel());
+                    break;
+                }
+                case 'GridExportPDF': {
+                    this.runExportWithFileName(this.ctx.pdfComponent, cmd.fileName, () => this.ctx.grid.saveAsPDF());
+                    break;
+                }
+                default:
+                    // Unknown command - ignore
+                    break;
+            }
+        });
+    }
+    runExportWithFileName(component, fileName, action) {
+        if (!component) {
+            action();
+            return;
+        }
+        const hasComponentFileName = isPresent(component.fileName) && component.fileName !== '';
+        if (hasComponentFileName || !fileName) {
+            action();
+            return;
+        }
+        const previousFileName = component.fileName;
+        component.fileName = fileName;
+        try {
+            action();
+        }
+        finally {
+            component.fileName = previousFileName;
+        }
+    }
+    processPageCommand(command) {
+        const pageSize = this.getCurrentPageSizeValue();
+        if (!isPresent(pageSize) || pageSize <= 0) {
+            return;
+        }
+        const total = this.getTotalItemsCount();
+        const requestedPage = Number(command.page);
+        let targetPage = Number.isFinite(requestedPage) ? Math.floor(requestedPage) : 1;
+        if (targetPage < 1) {
+            targetPage = 1;
+        }
+        if (isPresent(total) && pageSize > 0) {
+            const maxPage = Math.max(1, Math.ceil(total / pageSize));
+            targetPage = Math.min(targetPage, maxPage);
+        }
+        const skip = (targetPage - 1) * pageSize;
+        this.emitGridPageChange(skip, pageSize);
+    }
+    processPageSizeCommand(command) {
+        const rawPageSize = Number(command.pageSize);
+        if (!Number.isFinite(rawPageSize)) {
+            return;
+        }
+        const newPageSize = Math.max(1, Math.floor(rawPageSize));
+        const skip = Math.max(0, this.ctx.grid?.skip ?? 0);
+        this.ensurePageSizeOption(newPageSize);
+        this.emitGridPageChange(skip, newPageSize);
+    }
+    emitGridPageChange(skip, take) {
+        const grid = this.ctx.grid;
+        const normalizedSkip = Math.max(0, Math.floor(skip));
+        const normalizedTake = Math.max(1, Math.floor(take));
+        grid.skip = normalizedSkip;
+        grid.pageSize = normalizedTake;
+        grid.pageChange.emit({ skip: normalizedSkip, take: normalizedTake });
+    }
+    ensurePageSizeOption(pageSize) {
+        const grid = this.ctx.grid;
+        if (!grid) {
             return;
         }
-        const highlightedItems = highlightBy(this.ctx.dataBindingDirective['originalData'], highlight, this.columns);
+        const pageable = grid.pageable;
+        if (!pageable || typeof pageable === 'boolean') {
+            return;
+        }
+        const pageSizes = pageable.pageSizes;
+        if (!Array.isArray(pageSizes) || pageSizes.length === 0) {
+            return;
+        }
+        if (pageSizes.includes(pageSize)) {
+            return;
+        }
+        const uniqueSizes = [pageSize, ...pageSizes.filter(size => size !== pageSize)];
+        grid.pageable = {
+            ...pageable,
+            pageSizes: uniqueSizes
+        };
+        const changeDetector = grid?.changeDetectorRef;
+        if (changeDetector && typeof changeDetector.markForCheck === 'function') {
+            changeDetector.markForCheck();
+        }
+    }
+    getCurrentPageSizeValue() {
+        const grid = this.ctx.grid;
+        if (!grid) {
+            return null;
+        }
+        const candidates = [grid.pageSize, grid.currentState?.take, this.ctx.dataBindingDirective?.['state']?.take];
+        for (const candidate of candidates) {
+            if (typeof candidate === 'number' && candidate > 0) {
+                return candidate;
+            }
+        }
+        const pageable = grid.pageable;
+        if (pageable && typeof pageable === 'object' && Array.isArray(pageable.pageSizes)) {
+            const numericSize = pageable.pageSizes.find(size => typeof size === 'number' && size > 0);
+            if (numericSize) {
+                return numericSize;
+            }
+        }
+        const originalData = this.ctx.dataBindingDirective?.['originalData'];
+        if (Array.isArray(originalData) && originalData.length > 0) {
+            return originalData.length;
+        }
+        return null;
+    }
+    getTotalItemsCount() {
+        const grid = this.ctx.grid;
+        if (!grid) {
+            return null;
+        }
+        const gridData = grid.data;
+        if (gridData && typeof gridData.total === 'number') {
+            return gridData.total;
+        }
+        const view = grid.view;
+        if (view && typeof view.total === 'number') {
+            return view.total;
+        }
+        const originalData = this.ctx.dataBindingDirective?.['originalData'];
+        if (Array.isArray(originalData)) {
+            return originalData.length;
+        }
+        return null;
+    }
+    getSelectionInstance() {
+        const selectionDirective = this.ctx.grid?.selectionDirective;
+        if (selectionDirective && typeof selectionDirective === 'object') {
+            return selectionDirective;
+        }
+        const defaultSelection = this.ctx.grid?.defaultSelection;
+        if (defaultSelection && typeof defaultSelection === 'object') {
+            return defaultSelection;
+        }
+        return null;
+    }
+    updateLastMessage(messages, newMessage) {
+        if (!messages.length) {
+            return;
+        }
+        messages[messages.length - 1] = newMessage;
+    }
+    getHighlightItems(descriptors) {
+        if (!descriptors?.length) {
+            return [];
+        }
+        const data = this.ctx.dataBindingDirective?.['originalData'] || [];
+        return highlightBy(data, descriptors, this.columns);
+    }
+    processSelectionResponse(selection, messages) {
+        const selectionInstance = this.getSelectionInstance();
+        if (!selectionInstance) {
+            this.updateLastMessage(messages, this.ctx.localization?.get('aiAssistantSelectionNotEnabled'));
+            return;
+        }
+        const descriptors = (selection || []).filter((descriptor) => Boolean(descriptor));
+        if (descriptors.length === 0) {
+            this.applySelectionState(selectionInstance, []);
+            return;
+        }
+        const highlightItems = this.getHighlightItems(descriptors);
+        if (!highlightItems.length) {
+            this.applySelectionState(selectionInstance, []);
+            return;
+        }
+        const hasCellSelections = highlightItems.some(item => isPresent(item.columnKey));
+        const hasRowSelections = highlightItems.some(item => !isPresent(item.columnKey));
+        const isCellMode = selectionInstance.isCellSelectionMode;
+        if ((!isCellMode && hasCellSelections) || (isCellMode && hasRowSelections)) {
+            const key = isCellMode ? 'aiAssistantSelectionCellModeRequired' : 'aiAssistantSelectionRowModeRequired';
+            this.updateLastMessage(messages, this.ctx.localization?.get(key));
+            return;
+        }
+        const selectionState = this.mapHighlightItemsToSelection(selectionInstance, highlightItems, isCellMode);
+        this.applySelectionState(selectionInstance, selectionState);
+    }
+    mapHighlightItemsToSelection(selectionInstance, highlightItems, isCellMode) {
+        const data = this.ctx.dataBindingDirective?.['originalData'] || [];
+        if (isCellMode) {
+            const mapped = highlightItems
+                .filter(item => isPresent(item.itemKey) && isPresent(item.columnKey))
+                .map(item => {
+                const rowIndex = item.itemKey;
+                const columnIndex = item.columnKey;
+                const dataItem = data[rowIndex];
+                if (!isPresent(dataItem)) {
+                    return null;
+                }
+                if (typeof selectionInstance['getSelectionItem'] === 'function') {
+                    const columnComponent = this.leafColumns[columnIndex];
+                    const selectionItem = selectionInstance['getSelectionItem']({ dataItem, index: rowIndex }, columnComponent, columnIndex);
+                    if (selectionItem && isPresent(selectionItem.itemKey) && isPresent(selectionItem.columnKey)) {
+                        return selectionItem;
+                    }
+                    return null;
+                }
+                const itemKey = typeof selectionInstance.getItemKey === 'function'
+                    ? selectionInstance.getItemKey({ dataItem, index: rowIndex })
+                    : rowIndex;
+                return isPresent(itemKey) ? { itemKey, columnKey: columnIndex } : null;
+            })
+                .filter((item) => isPresent(item));
+            return mapped.filter((item, index, self) => self.findIndex(other => other.itemKey === item.itemKey && other.columnKey === item.columnKey) === index);
+        }
+        const rowKeys = highlightItems
+            .filter(item => isPresent(item.itemKey))
+            .map(item => {
+            const rowIndex = item.itemKey;
+            const dataItem = data[rowIndex];
+            if (!isPresent(dataItem)) {
+                return null;
+            }
+            if (typeof selectionInstance.getItemKey === 'function') {
+                return selectionInstance.getItemKey({ dataItem, index: rowIndex });
+            }
+            return rowIndex;
+        })
+            .filter(isPresent);
+        return Array.from(new Set(rowKeys));
+    }
+    applySelectionState(selectionInstance, selectionState) {
+        selectionInstance.selectedKeys = selectionState;
+        if (typeof selectionInstance['setState'] === 'function') {
+            selectionInstance['setState'](selectionState);
+        }
+        const changeDetector = selectionInstance['cd'];
+        if (changeDetector && typeof changeDetector.markForCheck === 'function') {
+            changeDetector.markForCheck();
+        }
+        if (typeof selectionInstance['notifyChange'] === 'function') {
+            selectionInstance['notifyChange']();
+        }
+    }
+    replaceQuotedColumnId(message, replacement) {
+        if (!replacement) {
+            const columnIdPattern = /(?:&quot;|")(k-grid\d+-col\d+)(?:&quot;|")\s*/g;
+            return message.replace(columnIdPattern, '').replace(/\s{2,}/g, ' ').trim();
+        }
+        const columnIdPattern = /(?:&quot;|")(k-grid\d+-col\d+)(?:&quot;|")/g;
+        return message.replace(columnIdPattern, (match) => {
+            const isEncoded = match.startsWith('&quot;');
+            return isEncoded ? `&quot;${replacement}&quot;` : `"${replacement}"`;
+        });
+    }
+    isColumnCommand(type) {
+        return type === 'GridColumnResize' ||
+            type === 'GridColumnReorder' ||
+            type === 'GridColumnShow' ||
+            type === 'GridColumnHide' ||
+            type === 'GridColumnLock' ||
+            type === 'GridColumnUnlock';
+    }
+    getColumnReplacement(column) {
+        if (!column) {
+            return '';
+        }
+        if (column.title && String(column.title).trim()) {
+            return String(column.title).trim();
+        }
+        if (column.field && String(column.field).trim()) {
+            return String(column.field).trim();
+        }
+        return '';
+    }
+    processHighlightResponse(highlight) {
+        const highlightedItems = this.getHighlightItems(highlight);
         this.ctx.highlightDirective['setState'](highlightedItems);
     }
     processFilterResponse(filter) {

package/esm2022/rendering/toolbar/tools/ai-assistant/models.mjs

@@ -18,7 +18,7 @@ export const DEFAULT_AI_REQUEST_OPTIONS = {
 /**
  * Represents the event data when the AI Assistant request completes successfully.
  */
-export class GridToolbarAIResponseSuccessEvent extends PreventableEvent {
+export class GridAIAssistantResponseSuccessEvent extends PreventableEvent {
     /**
      * The HTTP response from the AI service.
      */
@@ -31,7 +31,7 @@ export class GridToolbarAIResponseSuccessEvent extends PreventableEvent {
 /**
  * Represents the event data when the AI Assistant request completes with an error.
  */
-export class GridToolbarAIResponseErrorEvent extends PreventableEvent {
+export class GridAIAssistantResponseErrorEvent extends PreventableEvent {
     /**
      * The HTTP error response from the AI service.
      */